chore: replace Checkbox component with a BooleanField component

Checkbox and radio buttons are working the same way so I decided to
group them in a same component.

3 files changed, 15 insertions, 9 deletions

diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index a49c848..da77164 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -1 +1,2 @@
+@forward "./mixins/helpers";
 @forward "./mixins/media-queries";
diff --git a/src/styles/abstracts/mixins/_helpers.scss b/src/styles/abstracts/mixins/_helpers.scss
new file mode 100644
index 0000000..427ea4b
--- /dev/null
+++ b/src/styles/abstracts/mixins/_helpers.scss
@@ -0,0 +1,13 @@
+@use "../functions" as fun;
+
+@mixin visually-hidden {
+  width: fun.convert-px(1);
+  height: fun.convert-px(1);
+  padding: 0;
+  position: absolute !important;
+  overflow: hidden;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  word-break: normal;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss
index 3879643..381154f 100644
--- a/src/styles/base/_helpers.scss
+++ b/src/styles/base/_helpers.scss
@@ -14,15 +14,7 @@
 
 /* Text meant only for screen readers. */
 .screen-reader-text {
-  width: fun.convert-px(1);
-  height: fun.convert-px(1);
-  padding: 0;
-  position: absolute !important;
-  overflow: hidden;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  word-break: normal;
-  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+  @include mix.visually-hidden;
 
   &:focus {
     display: block;