diff --git a/app/components/radios.tsx b/app/components/radios.tsx
index 152e726..17854c4 100644
--- a/app/components/radios.tsx
+++ b/app/components/radios.tsx
@@ -28,13 +28,6 @@ export default function Radios() {
                         <Radio defaultChecked disabled />
                     </div>
                 </div>
-                <div>
-                    <h2> With Label </h2>
-                    <form style={{ display: 'flex', gap: '2em' }}>
-                        <Radio> Label </Radio>
-                        <Radio defaultChecked> Label </Radio>
-                    </form>
-                </div>
             </div>
         </div>
     );
diff --git a/app/components/switches.tsx b/app/components/switches.tsx
index 2532ce1..b304cd6 100644
--- a/app/components/switches.tsx
+++ b/app/components/switches.tsx
@@ -89,12 +89,8 @@ export default function Switches() {
                     >
                         <div>
                             <h2> Default </h2>
-                            <Switch icon labelPlacement={'left'}>
-                                Label
-                            </Switch>
-                            <Switch icon selected>
-                                Label
-                            </Switch>
+                            <Switch icon labelPlacement={'left'} />
+                            <Switch icon selected />
                         </div>
                     </div>
                 </div>
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx
index 616ac90..8c64023 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/checkbox/checkbox.tsx
@@ -43,6 +43,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                     ref={checkboxRef}
                     type={'checkbox'}
                 />
+                <span className={'m3 m3-checkbox-state'} />
                 <span className={'m3 m3-checkbox-state-layer'} />
                 <RippleArea
                     callback={setIsActive}
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index b277c9b..4bff9b2 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -5,16 +5,15 @@ import { RippleArea } from '../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { bool, oneOf, string } from 'prop-types';
-import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
+import { bool, string } from 'prop-types';
 
 /**
  * Radio component
  ** description
  */
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
-    ({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+    ({ centralRipple, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
@@ -24,34 +23,26 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
 
         return (
             <div {...events} className={classes}>
-                {children && labelPlacement === 'left' && (
-                    <label htmlFor={props.id}>{children}</label>
-                )}
-                <span>
-                    <CheckBoxLayout {...props} ref={ref} type={'radio'} />
-                    <span className={'m3 m3-radio-state-layer'} />
-                    <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
-                        <circle
-                            className={'m3-radio-outline'}
-                            cx={'50%'}
-                            cy={'50%'}
-                        />
-                        <circle
-                            className={'m3-radio-state'}
-                            cx={'50%'}
-                            cy={'50%'}
-                        />
-                    </svg>
-                    <RippleArea
-                        callback={setIsActive}
-                        central={centralRipple}
-                        className={'m3-checkbox-ripple-layer'}
-                        ref={ripplesRef}
+                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                <span className={'m3 m3-radio-state-layer'} />
+                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                    <circle
+                        className={'m3-radio-outline'}
+                        cx={'50%'}
+                        cy={'50%'}
                     />
-                </span>
-                {children && labelPlacement === 'right' && (
-                    <label htmlFor={props.id}>{children}</label>
-                )}
+                    <circle
+                        className={'m3-radio-state'}
+                        cx={'50%'}
+                        cy={'50%'}
+                    />
+                </svg>
+                <RippleArea
+                    callback={setIsActive}
+                    central={centralRipple}
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                />
             </div>
         );
     },
@@ -60,5 +51,4 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
 Radio.propTypes = {
     children: string,
     centralRipple: bool,
-    labelPlacement: oneOf(['left', 'right']),
 };
diff --git a/src/primitive-components/switch/switch.tsx b/src/primitive-components/switch/switch.tsx
index bb531c2..f0e4033 100644
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@@ -13,50 +13,24 @@ import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
 export const Switch = forwardRef<
     HTMLInputElement,
     SwitchMainProps & LabelPlacement
->(
-    (
-        {
-            icon,
-            disabled,
-            selected = false,
-            children,
-            labelPlacement = 'right',
-            ...props
-        },
-        ref,
-    ) => (
-        <div className={'m3 m3-switch'}>
-            {children && labelPlacement === 'left' && (
-                <label htmlFor={props.id}>{children}</label>
-            )}
-            <span>
-                <CheckBoxLayout
-                    {...props}
-                    className={`m3 ${props.className ?? ''}`.trimEnd()}
-                    disabled={disabled}
-                    ref={ref}
-                    type={'checkbox'}
-                />
-                <svg>
-                    <rect className={'m3 m3-switch-track'} />
-                    <circle className={'m3 m3-switch-handler'} />
-                    <circle className={'m3 m3-switch-handler-state-layer'} />
-                    <g>
-                        {icon && !selected && (
-                            <text className={'m3 m3-icon-unchecked'}>
-                                close
-                            </text>
-                        )}
-                        {icon && (
-                            <text className={'m3 m3-icon-checked'}>check</text>
-                        )}
-                    </g>
-                </svg>
-            </span>
-
-            {children && labelPlacement === 'right' && (
-                <label htmlFor={props.id}>{children}</label>
-            )}
-        </div>
-    ),
-);
+>(({ icon, selected = false, ...props }, ref) => (
+    <div className={'m3 m3-switch'}>
+        <CheckBoxLayout
+            {...props}
+            className={`m3 ${props.className ?? ''}`.trimEnd()}
+            ref={ref}
+            type={'checkbox'}
+        />
+        <svg>
+            <rect className={'m3 m3-switch-track'} />
+            <circle className={'m3 m3-switch-handler'} />
+            <circle className={'m3 m3-switch-handler-state-layer'} />
+            <g>
+                {icon && !selected && (
+                    <text className={'m3 m3-icon-unchecked'}>close</text>
+                )}
+                {icon && <text className={'m3 m3-icon-checked'}>check</text>}
+            </g>
+        </svg>
+    </div>
+));
diff --git a/src/styles/checkbox.sass b/src/styles/checkbox.sass
index 98cf47c..b7661b3 100644
--- a/src/styles/checkbox.sass
+++ b/src/styles/checkbox.sass
@@ -2,92 +2,103 @@
 
 label.m3.m3-checkbox-label
     @include m3-label-mixin
+    width: 18px
+    height: 18px
     & > span.m3.m3-checkbox-state-layer
         @include m3-state-layer-mixin
 
 span.m3.m3-checkbox-ripple-layer
     z-index: 20
+    width: 2.5rem
+    height: 2.5rem
     contain: content
     border-radius: 50%
     position: absolute
-    width: 2.5rem
-    height: 2.5rem
 
 input[type="checkbox"].m3.m3-checkbox
-    appearance: none
-    display: flex
-    align-items: center
-    justify-content: center
-    box-sizing: content-box
+    margin: 0
     z-index: 10
+    display: flex
     width: 1.125rem
     height: 1.125rem
-    margin: 0
-    outline-offset: -.14rem
+    appearance: none
+    position: absolute
+    align-items: center
     border-radius: .14rem
-    outline: .14rem solid var(--md-sys-color-on-surface-variant)
+    box-sizing: content-box
+    justify-content: center
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
-    &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
-        outline-color: var(--md-sys-color-error)
-        background-color: var(--md-sys-color-error)
+    & ~ span.m3-checkbox-state
+        transition: color .2s cubic-bezier(0.2, 0, 0, 1)
+        color: var(--md-sys-color-on-surface-variant)
 
-    &:is(.m3.m3-error, :user-invalid)
-        outline-color: var(--md-sys-color-error)
+    &:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
+        & ~ span.m3-checkbox-state
+            color: var(--md-sys-color-error)
+        background: var(--md-sys-color-on-error)
+
+    &:is(:user-invalid, .m3.m3-error):not(:checked)
+        & ~ span.m3-checkbox-state
+            color: var(--md-sys-color-error)
 
     &:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
-        outline-color: var(--md-sys-color-primary)
-        background-color: var(--md-sys-color-primary)
+        & ~ span.m3-checkbox-state
+            color: var(--md-sys-color-primary)
+        background: var(--md-sys-color-on-primary)
 
-    &:disabled
-        &:is(:hover, &)
+    &:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
+        color: var(--md-sys-color-on-surface)
+
+    &:disabled ~ *
+        &:is(:hover, &, :checked)
             opacity: 38%
-            border: 2px solid var(--md-sys-color-on-surface)
 
-        &:checked:is(:hover, &)
-            opacity: 38%
-            background-color: var(--md-sys-color-on-surface)
-
-    &::after
-        line-height: 1.125rem
+    & ~ span.m3-checkbox-state
+        pointer-events: none
+        z-index: 10
+        display: flex
+        align-items: center
+        justify-content: center
+        line-height: 24px
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-weight: 700
-        font-size: 1.125rem
-        color: var(--md-sys-color-on-primary)
+        font-size: 24px
+        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
 
-    &:checked::after
-        content: "done"
+    &:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
+        content: "check_box_outline_blank"
 
-    &:indeterminate::after
-        content: "check_indeterminate_small"
+    &:indeterminate ~ span.m3-checkbox-state::before
+        content: "indeterminate_check_box"
 
-    &:hover
-        outline-color: var(--md-sys-color-on-surface)
+    &:checked ~ span.m3-checkbox-state::before
+        content: "check_box"
 
     &:not(:disabled)
         &:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
-            & + span.m3.m3-checkbox-state-layer
+            & ~ span.m3.m3-checkbox-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
 
-        &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer
+        &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
 
-        &:is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer
+        &:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
-        &:is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer
+        &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
         &:hover
-            & + span.m3-checkbox-state-layer
+            & ~ span.m3-checkbox-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
 
-        &:active + span.m3.m3-checkbox-state-layer
+        &:active ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
-            & + span.m3-ripple-domain > .m3.ripple
+            & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 3ce7e2f..ff712c8 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -210,22 +210,16 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
 }
 
 div.m3.m3-radio {
-  display: inline-flex;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-div.m3.m3-radio > span {
   width: 20px;
   height: 20px;
   align-items: center;
   display: inline-flex;
   justify-content: center;
 }
-div.m3.m3-radio > span > span.m3-checkbox-ripple-layer, div.m3.m3-radio > span span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
   z-index: 5;
 }
-div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span.m3.m3-radio-state-layer {
   width: 40px;
   aspect-ratio: 1;
   border-radius: 50%;
@@ -233,7 +227,7 @@ div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
   pointer-events: none;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
+div.m3.m3-radio > input[type=radio].m3.m3-radio {
   margin: 0;
   width: 20px;
   height: 20px;
@@ -242,47 +236,47 @@ div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
   appearance: none;
   position: absolute;
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
   stroke-opacity: 38%;
   stroke: var(--md-sys-color-on-surface);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
   fill-opacity: 38%;
   fill: var(--md-sys-color-on-surface);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
   stroke: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
   fill-opacity: 0;
   fill: var(--md-sys-color-primary);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
   stroke: var(--md-sys-color-primary);
 }
-div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
   fill-opacity: 1;
   fill: var(--md-sys-color-primary);
 }
-div.m3.m3-radio > span svg {
+div.m3.m3-radio svg {
   margin: 0;
   width: 20px;
   z-index: 10;
@@ -290,17 +284,17 @@ div.m3.m3-radio > span svg {
   pointer-events: none;
   aspect-ratio: inherit;
 }
-div.m3.m3-radio > span svg > circle {
+div.m3.m3-radio svg > circle {
   transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-div.m3.m3-radio > span svg > circle.m3-radio-outline {
+div.m3.m3-radio svg > circle.m3-radio-outline {
   r: 9px;
   fill: black;
   fill-opacity: 0;
   stroke-width: 2px;
   stroke: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-radio > span svg > circle.m3-radio-state {
+div.m3.m3-radio svg > circle.m3-radio-state {
   r: 5px;
 }
 
@@ -556,42 +550,37 @@ div.m3.m3-switch {
   box-sizing: content-box;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch > span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-div.m3.m3-switch > span > svg {
+div.m3.m3-switch > svg {
   overflow: visible;
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
 }
-div.m3.m3-switch > span > svg > g {
+div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-div.m3.m3-switch > span > svg > g > text {
+div.m3.m3-switch > svg > g > text {
   font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
 }
-div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
 }
-div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
   fill-opacity: 0;
 }
-div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
   r: 8px;
 }
-div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > svg > rect.m3.m3-switch-track {
   transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   stroke-width: 2px;
   border-radius: 16px;
@@ -599,7 +588,7 @@ div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
   width: 50px;
   height: 30px;
 }
-div.m3.m3-switch > span > input.m3 {
+div.m3.m3-switch > input.m3 {
   cursor: pointer;
   appearance: none;
   opacity: 0 !important;
@@ -608,98 +597,98 @@ div.m3.m3-switch > span > input.m3 {
   height: 32px;
   position: absolute;
 }
-div.m3.m3-switch > span > input.m3:disabled {
+div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
 }
-div.m3.m3-switch > span > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-outline);
 }
-div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > g {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
   transform: translate(50%, 81%);
 }
-div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
   fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
+div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
   fill: var(--md-sys-color-on-primary-container);
 }
-div.m3.m3-switch > span > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-surface);
 }
-div.m3.m3-switch > span > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > span > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
   r: 12px;
 }
-div.m3.m3-switch > span > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
   opacity: 0;
 }
-div.m3.m3-switch > span > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
   cx: calc(100% - 16px);
 }
-div.m3.m3-switch > span > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
+div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
   opacity: 0;
 }
-div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:checked, div.m3.m3-switch > span > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
   r: 14px;
 }
-div.m3.m3-switch > span > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 38%;
 }
-div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-primary-container);
 }
-div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-primary);
   fill-opacity: 8%;
 }
-div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 8%;
 }
-div.m3.m3-switch > span > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-primary);
   fill-opacity: 12%;
 }
-div.m3.m3-switch > span > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
   fill: var(--md-sys-color-on-surface);
   fill-opacity: 12%;
 }
-div.m3.m3-switch > span > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
   rx: 16px;
   width: 52px;
   height: 32px;
   stroke-width: 0;
 }
-div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:not(:checked), div.m3.m3-switch > span > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
   x: 1px;
   y: 1px;
 }
-div.m3.m3-switch > span > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
   stroke: var(--md-sys-color-outline);
   fill: var(--md-sys-color-surface-container-highest);
 }
-div.m3.m3-switch > span > input.m3:checked + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
   stroke: var(--md-sys-color-primary);
   fill: var(--md-sys-color-primary);
 }
-div.m3.m3-switch > span > input.m3:disabled + svg > g > text.m3 {
+div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
   fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
 }
-div.m3.m3-switch > span > input.m3:disabled + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
   stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
   fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
 }
-div.m3.m3-switch > span > input.m3:checked:disabled + svg > g > text.m3 {
+div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
   transform: translateX(38.5%);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-div.m3.m3-switch > span > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
   stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
@@ -742,6 +731,8 @@ label.m3.m3-checkbox-label {
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
+  width: 18px;
+  height: 18px;
 }
 label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
   position: absolute;
@@ -753,88 +744,98 @@ label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
 
 span.m3.m3-checkbox-ripple-layer {
   z-index: 20;
+  width: 2.5rem;
+  height: 2.5rem;
   contain: content;
   border-radius: 50%;
   position: absolute;
-  width: 2.5rem;
-  height: 2.5rem;
 }
 
 input[type=checkbox].m3.m3-checkbox {
+  margin: 0;
+  z-index: 10;
+  display: flex;
+  width: 1.125rem;
+  height: 1.125rem;
   appearance: none;
+  position: absolute;
+  align-items: center;
+  border-radius: 0.14rem;
+  box-sizing: content-box;
+  justify-content: center;
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
+  color: var(--md-sys-color-on-surface-variant);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
+  background: var(--md-sys-color-on-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-error);
+}
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
+  background: var(--md-sys-color-on-primary);
+}
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-primary);
+}
+input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
+  color: var(--md-sys-color-on-surface);
+}
+input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) {
+  opacity: 38%;
+}
+input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  pointer-events: none;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: content-box;
-  z-index: 10;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin: 0;
-  outline-offset: -0.14rem;
-  border-radius: 0.14rem;
-  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
-  outline-color: var(--md-sys-color-error);
-  background-color: var(--md-sys-color-error);
-}
-input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  outline-color: var(--md-sys-color-error);
-}
-input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
-  outline-color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-primary);
-}
-input[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
-  opacity: 38%;
-  border: 2px solid var(--md-sys-color-on-surface);
-}
-input[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {
-  opacity: 38%;
-  background-color: var(--md-sys-color-on-surface);
-}
-input[type=checkbox].m3.m3-checkbox::after {
-  line-height: 1.125rem;
+  line-height: 24px;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-weight: 700;
-  font-size: 1.125rem;
-  color: var(--md-sys-color-on-primary);
+  font-size: 24px;
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
-input[type=checkbox].m3.m3-checkbox:checked::after {
-  content: "done";
+input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
+  content: "check_box_outline_blank";
 }
-input[type=checkbox].m3.m3-checkbox:indeterminate::after {
-  content: "check_indeterminate_small";
+input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
+  content: "indeterminate_check_box";
 }
-input[type=checkbox].m3.m3-checkbox:hover {
-  outline-color: var(--md-sys-color-on-surface);
+input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
+  content: "check_box";
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
 
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 7d3af62..2a2e528 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;ACjGhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AClKhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;;ASDA;ETIA;EACA;EACA;EACA;EACA;;;ASLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC3FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","icon.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAYQ;AACA;AACA;AACA;AACA;ACdR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ECgDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADpDA;ECCA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADHJ;ECFA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADAJ;ECLA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADGJ;ECRA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;ADMJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECQI;;ADLJ;ECHI;;ADOA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE5ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACfZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC5FhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACbR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ELNI;EKQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ELMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AKVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EL3CA;;AK8CA;ELxCA;;AK2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EL1DA;;AK6DA;ELvDA;;AK0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ETDI;EACA;EACA;EACA;EACA;ESDA;EACA;;AACA;ETEA;EACA;EACA;EACA;EACA;;;ASHJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACtGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;AbrHZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/radio.sass b/src/styles/radio.sass
index 551a1c5..a28fb13 100644
--- a/src/styles/radio.sass
+++ b/src/styles/radio.sass
@@ -1,11 +1,6 @@
 @import "mixins/m3-mixins"
 
 div.m3.m3-radio
-    display: inline-flex
-    justify-content: space-between
-    gap: 20px
-
-div.m3.m3-radio > span
     width: 20px
     height: 20px
     align-items: center
diff --git a/src/styles/swtich.sass b/src/styles/swtich.sass
index eea3439..a149f04 100644
--- a/src/styles/swtich.sass
+++ b/src/styles/swtich.sass
@@ -4,16 +4,11 @@ div.m3.m3-switch
     box-sizing: content-box
     display: flex
     align-items: center
-    justify-content: space-between
+    justify-content: center
     width: 52px
     height: 32px
 
-    & > span
-        display: flex
-        align-items: center
-        justify-content: center
-
-    & > span > svg
+    & > svg
         overflow: visible
         transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
         width: 52px
@@ -46,7 +41,7 @@ div.m3.m3-switch
             width: 50px
             height: 30px
 
-    & > span > input.m3
+    & > input.m3
         cursor: pointer
         appearance: none
         opacity: 0 !important