FIXED: Segmented-buttons sizes fixed, typography is done

app/page.tsx

@@ -38,7 +38,7 @@ export default function Page() {
                                     fillIcon={1}
                                     icon={'change_history'}
                                 >
-                                    Label 1
+                                    fin ita la comedia
                                 </SegmentButton>
                                 <SegmentButton
                                     fillIcon={1}

src/primitive-components/button-components/segmented-buttons/segment-button.tsx

@@ -31,8 +31,6 @@ export const SegmentButton = forwardRef<
         const classes =
             `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
 
-        const _icon = selectedState && icon;
-
         return (
             <ButtonLayout
                 {...props}
@@ -49,7 +47,7 @@ export const SegmentButton = forwardRef<
                 <IconWrapper
                     fillIcon={fillIcon}
                     grade={grade}
-                    icon={_icon}
+                    icon={icon}
                     iconPlace={iconPlace}
                     iconSize={iconSize}
                     opticalSize={opticalSize}

src/styles/button-styles/segmented-button.sass

@@ -1,7 +1,7 @@
 div.m3.m3-segmented-buttons
     padding: 0
     height: 40px
-    display: inline-flex
+    display: flex
     border-radius: 20px
     box-sizing: border-box
 
@@ -25,9 +25,21 @@ div.m3.m3-segmented-buttons
         & > span
             color: var(--md-sys-color-on-surface)
 
-        & > svg > text
+        & > svg
+            opacity: 0
+
+            & > text
                 fill: var(--md-sys-color-on-surface)
 
+        &:not(.selected)
+            & > svg
+                display: none
+
+            &::after, &::before
+                content: ''
+                width: 6px
+                position: relative
+
         & > span.m3.m3-ripple-domain > span.m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
@@ -40,6 +52,9 @@ div.m3.m3-segmented-buttons
         &.selected
             background-color: var(--md-sys-color-secondary-container)
 
+            & > svg
+                opacity: 1
+
             & > span
                 color: var(--md-sys-color-on-secondary-container)
 

src/styles/fonts.css

@@ -1,56 +1,44 @@
 @font-face {
   font-family: Material-Symbols-Rounded-Regular;
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
-    format("woff2");
-}
 @font-face {
   font-family: Material-Symbols-Outlined-Regular;
   src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
+  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
-    format("woff2");
-}
 @font-face {
   font-family: Material-Symbols-Sharp-Regular;
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
+  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
-    format("woff2");
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Thin;
   font-weight: 100;
-  src: url("./font/Roboto-Thin.ttf");
+  src: url("./font/Roboto-Thin.ttf"); }
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Light;
   font-weight: 300;
-  src: url("./font/Roboto-Light.ttf");
+  src: url("./font/Roboto-Light.ttf"); }
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Regular;
   font-weight: 400;
-  src: url("./font/Roboto-Regular.ttf");
+  src: url("./font/Roboto-Regular.ttf"); }
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Medium;
   font-weight: 500;
-  src: url("./font/Roboto-Medium.ttf");
+  src: url("./font/Roboto-Medium.ttf"); }
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Bold;
   font-weight: 700;
-  src: url("./font/Roboto-Bold.ttf");
+  src: url("./font/Roboto-Bold.ttf"); }
-}
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, system-ui;
   font-face-name: Black;
   font-weight: 900;
-  src: url("./font/Roboto-Black.ttf");
+  src: url("./font/Roboto-Black.ttf"); }
-}
 
 /*# sourceMappingURL=fonts.css.map */

src/styles/fonts.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["fonts.sass"],"names":[],"mappings":"AAGI;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","file":"fonts.css"}
+{
+"version": 3,
+"mappings": ";EAIQ,WAAW,EAAE,gCAAwC;EACrD,GAAG,EAAE,6DAAqE;EAC1E,GAAG,EAAE,+EAAuF;;EAF5F,WAAW,EAAE,iCAAwC;EACrD,GAAG,EAAE,8DAAqE;EAC1E,GAAG,EAAE,gFAAuF;;EAF5F,WAAW,EAAE,8BAAwC;EACrD,GAAG,EAAE,2DAAqE;EAC1E,GAAG,EAAE,6EAAuF;;EAM5F,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,OAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,gCAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,MAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,+BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,iBAAiB;EAC9B,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC",
+"sources": ["fonts.sass"],
+"names": [],
+"file": "fonts.css"
+}

src/styles/fonts.sass

@@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
 
 @each $name, $weight in $weights
     @font-face
-        font-family: Roboto, system-ui
+        font-family: Roboto
         font-face-name: #{$name}
         font-weight: #{$weight}
         src: url("./font/Roboto-#{$name}.ttf")

src/styles/generics.sass

@@ -20,9 +20,9 @@
 @import "input-styles/checkbox"
 @import "input-styles/text-field"
 
-@import "./themes/tokens"
+@import "./themes/tokens.css"
-@import "./themes/colors.module"
+@import "./themes/colors.module.css"
-@import "./themes/typography.module"
+@import "./themes/typography.module.css"
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark)
 @import "./themes/theme.light.css" (prefers-color-scheme: light)
 

src/styles/icon.css

@@ -1,69 +1,57 @@
 svg.m3.m3-svg-icon > text {
-  alignment-baseline: central;
   text-anchor: middle;
-}
+  dominant-baseline: middle;
+  alignment-baseline: middle; }
 svg.m3.m3-svg-icon > text.m3-size-12px {
   width: 12px;
   aspect-ratio: 1;
-  line-height: 12px;
   font-size: 12px;
-}
+  line-height: 12px; }
 svg.m3.m3-svg-icon > text.m3-size-16px {
   width: 16px;
   aspect-ratio: 1;
-  line-height: 16px;
   font-size: 16px;
-}
+  line-height: 16px; }
 svg.m3.m3-svg-icon > text.m3-size-20px {
   width: 20px;
   aspect-ratio: 1;
-  line-height: 20px;
   font-size: 20px;
-}
+  line-height: 20px; }
 svg.m3.m3-svg-icon > text.m3-size-24px {
   width: 24px;
   aspect-ratio: 1;
-  line-height: 24px;
   font-size: 24px;
-}
+  line-height: 24px; }
 svg.m3.m3-svg-icon > text.m3-size-28px {
   width: 28px;
   aspect-ratio: 1;
-  line-height: 28px;
   font-size: 28px;
-}
+  line-height: 28px; }
 svg.m3.m3-svg-icon > text.m3-size-32px {
   width: 32px;
   aspect-ratio: 1;
-  line-height: 32px;
   font-size: 32px;
-}
+  line-height: 32px; }
 svg.m3.m3-svg-icon > text.m3-size-36px {
   width: 36px;
   aspect-ratio: 1;
-  line-height: 36px;
   font-size: 36px;
-}
+  line-height: 36px; }
 svg.m3.m3-svg-icon > text.m3-size-40px {
   width: 40px;
   aspect-ratio: 1;
-  line-height: 40px;
   font-size: 40px;
-}
+  line-height: 40px; }
 svg.m3.m3-svg-icon > text.m3-size-48px {
   width: 48px;
   aspect-ratio: 1;
-  line-height: 48px;
   font-size: 48px;
-}
+  line-height: 48px; }
 svg.m3.m3-svg-icon > text.m3-Outlined {
-  font-family: Material-Symbols-Outlined-Regular;
+  font-family: Material-Symbols-Outlined-Regular; }
-}
 svg.m3.m3-svg-icon > text.m3-Rounded {
-  font-family: Material-Symbols-Rounded-Regular;
+  font-family: Material-Symbols-Rounded-Regular; }
-}
 svg.m3.m3-svg-icon > text.m3-Sharp {
-  font-family: Material-Symbols-Sharp-Regular;
+  font-family: Material-Symbols-Sharp-Regular; }
-}
 
 /*# sourceMappingURL=icon.css.map */

src/styles/icon.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["icon.sass"],"names":[],"mappings":"AAII;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","file":"icon.css"}
+{
+"version": 3,
+"mappings": "AAII,yBAAQ;EACJ,WAAW,EAAE,MAAM;EACnB,iBAAiB,EAAE,MAAM;EACzB,kBAAkB,EAAE,MAAM;AAG1B,sCAAyB;EACrB,KAAK,EAVZ,IAAI;EAWG,YAAY,EAAE,CAAC;EACf,SAAS,EAZhB,IAAI;EAaG,WAAW,EAblB,IAAI;AASD,sCAAyB;EACrB,KAAK,EAVN,IAAI;EAWH,YAAY,EAAE,CAAC;EACf,SAAS,EAZV,IAAI;EAaH,WAAW,EAbZ,IAAI;AASP,sCAAyB;EACrB,KAAK,EAVA,IAAI;EAWT,YAAY,EAAE,CAAC;EACf,SAAS,EAZJ,IAAI;EAaT,WAAW,EAbN,IAAI;AASb,sCAAyB;EACrB,KAAK,EAVM,IAAI;EAWf,YAAY,EAAE,CAAC;EACf,SAAS,EAZE,IAAI;EAaf,WAAW,EAbA,IAAI;AASnB,sCAAyB;EACrB,KAAK,EAVY,IAAI;EAWrB,YAAY,EAAE,CAAC;EACf,SAAS,EAZQ,IAAI;EAarB,WAAW,EAbM,IAAI;AASzB,sCAAyB;EACrB,KAAK,EAVkB,IAAI;EAW3B,YAAY,EAAE,CAAC;EACf,SAAS,EAZc,IAAI;EAa3B,WAAW,EAbY,IAAI;AAS/B,sCAAyB;EACrB,KAAK,EAVwB,IAAI;EAWjC,YAAY,EAAE,CAAC;EACf,SAAS,EAZoB,IAAI;EAajC,WAAW,EAbkB,IAAI;AASrC,sCAAyB;EACrB,KAAK,EAV8B,IAAI;EAWvC,YAAY,EAAE,CAAC;EACf,SAAS,EAZ0B,IAAI;EAavC,WAAW,EAbwB,IAAI;AAS3C,sCAAyB;EACrB,KAAK,EAVoC,IAAI;EAW7C,YAAY,EAAE,CAAC;EACf,SAAS,EAZgC,IAAI;EAa7C,WAAW,EAb8B,IAAI;AAgBjD,qCAAoB;EAChB,WAAW,EAAE,iCAAiC;AADlD,oCAAoB;EAChB,WAAW,EAAE,gCAAiC;AADlD,kCAAoB;EAChB,WAAW,EAAE,8BAAiC",
+"sources": ["icon.sass"],
+"names": [],
+"file": "icon.css"
+}

src/styles/input-styles/slider.css

@@ -1,3 +1,80 @@
+/*
+Error: Undefined mixin 'input-range-thumb-mixin'.
+        on line 35 of slider.sass, in `input-range-thumb-mixin'
+        from line 35 of slider.sass
 
+30:         overflow: hidden
+31:         border-radius: 2px
+32:         background-color: var(--md-sys-color-primary)
+33: 
+34:     &::-moz-range-thumb
+35:         @include input-range-thumb-mixin
+36: 
+37:         border: none
+38: 
+39:     &::-webkit-slider-container
+40:         appearance: none
 
-/*# sourceMappingURL=slider.css.map */
+Backtrace:
+slider.sass:35:in `input-range-thumb-mixin'
+slider.sass:35
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:348:in `block in visit_mixin'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `block in with_mixin'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:98:in `with_mixin'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:346:in `visit_mixin'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block (2 levels) in visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `map'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:440:in `block in visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:438:in `visit_rule'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `block in with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:135:in `with_frame'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/stack.rb:79:in `with_base'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:158:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `map'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:52:in `visit_children'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `block in visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/base.rb:36:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:157:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/visitors/perform.rb:10:in `visit'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:36:in `css_tree'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:389:in `_render_with_sourcemap'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/engine.rb:307:in `render_with_sourcemap'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:387:in `run'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/sass_scss.rb:63:in `process_result'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:50:in `parse'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib/sass/exec/base.rb:18:in `parse!'
+/usr/lib/ruby/gems/3.0.0/gems/sass-3.7.4/bin/sass:13:in `<top (required)>'
+/usr/bin/sass:23:in `load'
+/usr/bin/sass:23:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Error: Undefined mixin 'input-range-thumb-mixin'.\A         on line 35 of slider.sass, in `input-range-thumb-mixin'\A         from line 35 of slider.sass\A \A 30:         overflow: hidden\A 31:         border-radius: 2px\A 32:         background-color: var(--md-sys-color-primary)\A 33: \A 34:     &::-moz-range-thumb\A 35:         @include input-range-thumb-mixin\A 36: \A 37:         border: none\A 38: \A 39:     &::-webkit-slider-container\A 40:         appearance: none"; }

src/styles/input-styles/swtich.css

@@ -1,225 +1,113 @@
 div.m3.m3-switch {
+  gap: 20px;
   margin: 4px;
-  box-sizing: content-box;
+  height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
+  box-sizing: content-box; }
+  div.m3.m3-switch > svg {
     width: 52px;
     height: 32px;
-}
-div.m3.m3-switch > svg {
     overflow: visible;
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-  width: 52px;
+    div.m3.m3-switch > svg > g {
-  height: 32px;
-}
-div.m3.m3-switch > svg > g {
       transform: translate(11.5%, 81%);
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-}
+      div.m3.m3-switch > svg > g > text {
-div.m3.m3-switch > svg > g > text {
-  font-family: Material-Symbols-Outlined-Regular;
         font-size: 20px;
-}
+        font-family: Material-Symbols-Outlined-Regular, serif; }
-div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer,
+    div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-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;
-}
+      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
-div.m3.m3-switch > 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;
+      fill-opacity: 0; }
-}
+    div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
+      r: 8px; }
-  r: 8px;
+    div.m3.m3-switch > 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;
       rx: 15px;
       width: 50px;
-  height: 30px;
+      height: 30px; }
-}
+  div.m3.m3-switch > input.m3 {
-div.m3.m3-switch > input.m3 {
-  cursor: pointer;
-  appearance: none;
-  opacity: 0 !important;
     margin: 0;
     width: 52px;
     height: 32px;
+    cursor: pointer;
+    appearance: none;
     position: absolute;
-}
+    opacity: 0 !important; }
-div.m3.m3-switch > input.m3:disabled {
+    div.m3.m3-switch > input.m3:disabled {
-  cursor: not-allowed;
+      cursor: not-allowed; }
-}
+    div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
-div.m3.m3-switch
+      fill: var(--md-sys-color-outline); }
-  > input.m3:not(:checked, :disabled)
+    div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
-  + svg
+      transform: translate(50%, 81%); }
-  > 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-outline);
+      fill: var(--md-sys-color-on-primary); }
-}
+    div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
-div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
+      fill: var(--md-sys-color-on-primary); }
-  transform: translate(50%, 81%);
+    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
+    div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
-  > input.m3:checked:not(:disabled)
+      fill: var(--md-sys-color-surface); }
-  + svg
+    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 {
-  > circle.m3.m3-switch-handler {
+      r: 12px; }
-  fill: var(--md-sys-color-on-primary);
+    div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
-}
+      opacity: 0; }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
-  > input.m3:not(:disabled)
+      cx: calc(100% - 16px); }
-  + svg
+    div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
-  > g
+      opacity: 0; }
-  > text.m3.m3-icon-unchecked {
+    div.m3.m3-switch > input.m3:is(&:checked, &):not(:disabled):active + svg > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-on-primary);
+      r: 14px; }
-}
+    div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
-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
-  > input.m3:checked:disabled
-  + svg
-  > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-surface);
-}
-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 > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
-  opacity: 0;
-}
-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
-  > input.m3:not(:checked)
-  + svg
-  > g
-  > text.m3.m3-icon-checked {
-  opacity: 0;
-}
-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
-  > input.m3:not(:checked):disabled
-  + svg
-  > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-on-surface);
       fill-opacity: 38%;
-}
+      fill: var(--md-sys-color-on-surface); }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
-  > input.m3:hover:not(:disabled):checked
+      fill: var(--md-sys-color-primary-container); }
-  + svg
+    div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-primary-container);
-}
-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%;
-}
+      fill: var(--md-sys-color-primary); }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
-  > input.m3:hover:not(:disabled):not(:checked)
+      fill: var(--md-sys-color-on-surface-variant); }
-  + svg
+    div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-on-surface-variant);
-}
-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%;
-}
+      fill: var(--md-sys-color-on-surface); }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  > input.m3:active:not(:disabled):checked
-  + svg
-  > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-primary);
       fill-opacity: 12%;
-}
+      fill: var(--md-sys-color-primary); }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  > 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%;
-}
+      fill: var(--md-sys-color-on-surface); }
-div.m3.m3-switch
+    div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
-  > input.m3:is(:checked, :checked:disabled)
-  + svg
-  > rect.m3.m3-switch-track {
       rx: 16px;
       width: 52px;
       height: 32px;
-  stroke-width: 0;
+      stroke-width: 0; }
-}
+    div.m3.m3-switch > input.m3:is(&:not(:checked), &: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;
+      y: 1px; }
-}
+    div.m3.m3-switch > 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);
+      fill: var(--md-sys-color-surface-container-highest); }
-}
+    div.m3.m3-switch > 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);
-}
+      stroke: var(--md-sys-color-primary); }
-div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
+    div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
-  fill: color-mix(
+      fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent); }
-    in srgb,
+    div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
-    var(--md-sys-color-surface-container-highest) 38%,
-    transparent
-  );
-}
-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(
+      fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent); }
-    in srgb,
+    div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
-    var(--md-sys-color-surface-variant) 12%,
-    transparent
-  );
-}
-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);
+      fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
-}
+    div.m3.m3-switch > 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);
-}
+      stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent); }
 
 /*# sourceMappingURL=swtich.css.map */

src/styles/input-styles/swtich.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["swtich.sass"],"names":[],"mappings":"AAAA;EACI;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","file":"swtich.css"}
+{
+"version": 3,
+"mappings": "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",
+"sources": ["swtich.sass"],
+"names": [],
+"file": "swtich.css"
+}

src/styles/mixins/m3-mixins.css

@@ -1 +1,3 @@
+
+
 /*# sourceMappingURL=m3-mixins.css.map */

src/styles/mixins/m3-mixins.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"m3-mixins.css"}
+{
+"version": 3,
+"mappings": "",
+"sources": [],
+"names": [],
+"file": "m3-mixins.css"
+}

src/styles/ripple.css

@@ -3,8 +3,7 @@
   width: 100%;
   height: 100%;
   z-index: 20;
-  pointer-events: none;
+  pointer-events: none; }
-}
 
 .m3.ripple {
   position: absolute;
@@ -15,26 +14,20 @@
   z-index: 20;
   aspect-ratio: 1;
   border-radius: 50%;
+  animation-duration: 0.55s;
+  animation-iteration-count: 1;
   animation-name: rippleAppearanceAnimation;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.55s;
+  transition-duration: 0.55s;
-  transition:
+  transition-property: opacity, background-color;
-    opacity,
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
-    background,
+  .m3.ripple.visible {
-    background-color,
+    opacity: 1 !important; }
-    0.55s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.m3.ripple.visible {
-  opacity: 1 !important;
-}
 
 @keyframes rippleAppearanceAnimation {
   0% {
-    transform: scale3d(0, 0, 0);
+    transform: scale3d(0, 0, 0); }
-  }
   100% {
-    transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1); } }
-  }
-}
 
 /*# sourceMappingURL=ripple.css.map */

src/styles/ripple.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["ripple.sass"],"names":[],"mappings":"AAAA;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","file":"ripple.css"}
+{
+"version": 3,
+"mappings": "AAAA,oBAAoB;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,cAAc,EAAE,IAAI;;AAEtB,UAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,EAAE;EACX,YAAY,EAAE,CAAC;EACf,aAAa,EAAE,GAAG;EAElB,kBAAkB,EAAE,KAAI;EACxB,yBAAyB,EAAE,CAAC;EAC5B,cAAc,EAAE,yBAAyB;EACzC,yBAAyB,EAAE,4BAA4B;EAEvD,mBAAmB,EAAE,KAAI;EACzB,mBAAmB,EAAE,yBAAyB;EAC9C,0BAA0B,EAAE,4BAA4B;EAExD,kBAAS;IACP,OAAO,EAAE,YAAY;;;;IAIrB,SAAS,EAAE,gBAAgB;;IAE3B,SAAS,EAAE,gBAAgB",
+"sources": ["ripple.sass"],
+"names": [],
+"file": "ripple.css"
+}

src/styles/typography.css

@@ -1,5 +1,3 @@
-:is(h1, h2, h3, h4, h5, h6, code, p, span, pre, label).m3.m3-typography {
+
-  vertical-align: center;
-}
 
 /*# sourceMappingURL=typography.css.map */

src/styles/typography.css.map

@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["typography.sass"],"names":[],"mappings":"AAAA;EACI","file":"typography.css"}
+{
+"version": 3,
+"mappings": "",
+"sources": [],
+"names": [],
+"file": "typography.css"
+}