RENAMED: From checkbox-layout -> input-layout

ADDED: Slider componnet (without styles and functionality)
CHANGED: segmented-button styles

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

@@ -8,24 +8,21 @@ div.m3.m3-segmented-buttons
     border-collapse: collapse
 
     & > button.m3.m3-button-segment
-        margin: 0 -0.5px 0 -0.5px
-
-    & > button.m3.m3-button-segment:first-child
-        border-radius: 20px 0 0 20px
-    & > button.m3.m3-button-segment:last-child
-        border-radius: 0 20px 20px 0
-
-    & >  button.m3.m3-button-segment
         height: 40px
         display: flex
         min-width: 108px
+        border-radius: 0
         width: max-content
         padding-inline: 10px
+        margin: 0 -0.5px 0 -0.5px
+        background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
-        &
-            border-radius: 0
-            background-color: transparent
+        &:first-child
+            border-radius: 20px 0 0 20px
+
+        &:last-child
+            border-radius: 0 20px 20px 0
 
         & > span
             color: var(--md-sys-color-on-surface)
@@ -36,11 +33,11 @@ div.m3.m3-segmented-buttons
         &.selected
             background-color: var(--md-sys-color-secondary-container)
 
-        &.selected > span
-            color: var(--md-sys-color-on-secondary-container)
+            & > span
+                color: var(--md-sys-color-on-secondary-container)
 
-        &.selected > svg > text
-            fill: var(--md-sys-color-on-secondary-container)
+                & > text
+                    fill: var(--md-sys-color-on-secondary-container)
 
         & > span.m3.m3-button-segment-state-layer
             position: absolute

src/styles/generics.css

@@ -731,7 +731,15 @@ div.m3.m3-segmented-buttons {
   border-collapse: collapse;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  height: 40px;
+  display: flex;
+  min-width: 108px;
+  border-radius: 0;
+  width: max-content;
+  padding-inline: 10px;
   margin: 0 -0.5px 0 -0.5px;
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
   border-radius: 20px 0 0 20px;
@@ -739,18 +747,6 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
   border-radius: 0 20px 20px 0;
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  height: 40px;
-  display: flex;
-  min-width: 108px;
-  width: max-content;
-  padding-inline: 10px;
-  border: 1px solid var(--md-sys-color-outline);
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  border-radius: 0;
-  background-color: transparent;
-}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
   color: var(--md-sys-color-on-surface);
 }
@@ -763,7 +759,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
   color: var(--md-sys-color-on-secondary-container);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg > text {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text {
   fill: var(--md-sys-color-on-secondary-container);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {