diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 512a3f2..55ce82b 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,6 +6,28 @@
   <component name="ChangeListManager">
     <list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/components/text-fields.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/text-fields.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/page.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/radio.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/radio.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/radio.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/text-field.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/text-field.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.css.map" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/styles/text-field.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/text-field.sass" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -39,24 +61,24 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;experimental&quot;,
-    &quot;last_opened_file_path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/src/styles&quot;,
-    &quot;list.type.of.created.stylesheet&quot;: &quot;Sass&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "main",
+    "last_opened_file_path": "/home/drn04/material-you-react",
+    "list.type.of.created.stylesheet": "Sass",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "settings.editor.selected.configurable": "watcher.settings",
+    "ts.external.directory.path": "/home/drn04/material-you-react/node_modules/typescript/lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/styles" />
@@ -163,6 +185,13 @@
       <workItem from="1705937839794" duration="11116000" />
       <workItem from="1706023242228" duration="822000" />
       <workItem from="1706024195558" duration="6543000" />
+      <workItem from="1706212432785" duration="1892000" />
+      <workItem from="1706214971346" duration="611000" />
+      <workItem from="1706288977398" duration="4026000" />
+      <workItem from="1706338830405" duration="10157000" />
+      <workItem from="1706351565380" duration="805000" />
+      <workItem from="1706373080363" duration="1879000" />
+      <workItem from="1706426744715" duration="17520000" />
     </task>
     <task id="LOCAL-00019" summary="added customizable classname field for rippleArea component">
       <option name="closed" value="true" />
diff --git a/app/components/text-fields.tsx b/app/components/text-fields.tsx
index bade667..39471ba 100644
--- a/app/components/text-fields.tsx
+++ b/app/components/text-fields.tsx
@@ -4,9 +4,9 @@ import {Button} from "../../src/primitive-components/button/button";
 
 export function TextFields(_props : any) {
     return (
-        <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}>
+        <div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection:"column", gap: "2em"}}>
+            <h1> Inputs </h1>
             <div>
-                <h1> Inputs </h1>
                 <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                     <h2> Filled Inputs </h2>
                     <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
@@ -25,6 +25,17 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField placeholder={"Placeholder"}
+                                                   variant={"filled"}
+                                                   type={"email"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField placeholder={"Placeholder"}
+                                                   variant={"filled"}
+                                                   type={"email"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -46,6 +57,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -70,6 +94,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   placeholder={"Placeholder"}
+                                                   type={"email"}
+                                                   withAfterIcon/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   placeholder={"Placeholder"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -93,6 +130,21 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -120,6 +172,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   withBeforeIcon/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   withBeforeIcon
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -144,6 +209,21 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   withBeforeIcon/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   withBeforeIcon
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -171,6 +251,22 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   />
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -198,6 +294,24 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   />
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"filled"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   supportingText={"Supporting text"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"filled"}
                                                    type={"email"}
@@ -213,9 +327,8 @@ export function TextFields(_props : any) {
                 </div>
             </div>
             <div>
-                <h1> Outlined </h1>
                 <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
-                    <h2> Filled Inputs </h2>
+                    <h2> Outlined Inputs </h2>
                     <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
                         <div>
                             <div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
@@ -232,6 +345,17 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -253,6 +377,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -277,6 +414,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -300,6 +450,21 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withAfterIcon
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -327,6 +492,19 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -351,6 +529,21 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   supportingText={"Supporting text"}
+                                                   withBeforeIcon
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   supportingText={"Supporting text"}
+                                                   withBeforeIcon
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -378,6 +571,21 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
@@ -405,6 +613,23 @@ export function TextFields(_props : any) {
                                             Send
                                         </Button>
                                     </form>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}/>
+                                    </div>
+                                    <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
+                                        <TextField variant={"outlined"}
+                                                   type={"email"}
+                                                   withBeforeIcon
+                                                   withAfterIcon
+                                                   supportingText={"Supporting text"}
+                                                   placeholder={"Placeholder"}
+                                                   disabled/>
+                                    </div>
                                     <div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
                                         <TextField variant={"outlined"}
                                                    type={"email"}
diff --git a/app/page.tsx b/app/page.tsx
index 08a115a..64bb526 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -21,24 +21,30 @@ export default function Page() {
                 <h1>Google Material You UI kit</h1>
                 <div style={{
                         display: "flex",
-                        flexDirection:"row",
-                        justifyContent: "center",
-                        alignItems: "center",
+                        flexDirection:"column",
                         gap:"20px"
                 }}>
-                    {/*<div style={{*/}
-                    {/*    display: "flex",*/}
-                    {/*    flexDirection:"column",*/}
-                    {/*    gap:"20px",*/}
-                    {/*}}>*/}
-                    {/*    <Buttons/>*/}
-                    {/*    <IconButtons/>*/}
-                    {/*</div>*/}
-                    {/*<Switches/>*/}
-                    {/*<Checkboxes/>*/}
-                    {/*<Radios/>*/}
-                    {/*<Fabs/>*/}
-                    <TextFields/>
+                    <div style={{
+                        display: "flex",
+                        flexDirection:"row",
+                        gap:"20px"
+                    }}>
+                        <div style={{
+                            display: "flex",
+                            flexDirection:"column",
+                            gap:"20px",
+                        }}>
+                            <Buttons/>
+                            <IconButtons/>
+                        </div>
+                        <Switches/>
+                        <Checkboxes/>
+                        <Radios/>
+                        <Fabs/>
+                    </div>
+                    <div>
+                        <TextFields/>
+                    </div>
                 </div>
             </div>
         </Fragment>
diff --git a/package-lock.json b/package-lock.json
index 343555f..899f56b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "doryan-blog-next-turbo",
+  "name": "material-you-react",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/src/primitive-components/text-field/text-field.tsx b/src/primitive-components/text-field/text-field.tsx
index bcb8095..3cf7be2 100644
--- a/src/primitive-components/text-field/text-field.tsx
+++ b/src/primitive-components/text-field/text-field.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import React, {PropsWithChildren, useState} from 'react';
 import {bool, string} from "prop-types";
+import React, {PropsWithChildren, useState} from 'react';
 
 interface TextFieldInterface extends PropsWithChildren<any>{
     variant: "filled" | "outlined",
@@ -12,11 +12,11 @@ interface TextFieldInterface extends PropsWithChildren<any>{
 
 export function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
 
-    const [used, setUsed] = useState<boolean>(false);
+    const [raised, setRaised] = useState<boolean>(props.placeholder ? true : false);
 
     const callback = (e : any) => {
-        if(e.type === "blur" && e.target.value.length === 0) setUsed(false);
-        else if(e.type === "focus") setUsed(true);
+        if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false);
+        else if(e.type === "focus") setRaised(true);
     }
 
     const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" :
@@ -25,7 +25,18 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
     return (
         <span>
             <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
-                {withBeforeIcon && <span className={"m3-icon icon-before"}>{withBeforeIcon && "search"}</span>}
+                {variant === "outlined" &&
+                    <fieldset>
+                        <legend className={raised && "raised"}>
+                            <span>Label</span>
+                        </legend>
+                    </fieldset>
+                }
+                {withBeforeIcon &&
+                    <span className={"m3-icon icon-before"}>
+                        {withBeforeIcon && "search"}
+                    </span>
+                }
                 <input {...props}
                        className={`${props.className ?? ""} ${iconStyles}`.trim()}
                        onFocus={(event) => {
@@ -36,11 +47,21 @@ export function TextField({variant, withAfterIcon, withBeforeIcon, supportingTex
                            callback(event)
                            if(props.onBlur) props.onBlur(event)
                        }}/>
-                <label className={used && "used"}> {props.children ?? "Label"} </label>
+                <label className={raised && "raised"}>
+                    {props.children ?? "Label"}
+                </label>
                 <span className={"m3-text-field-state-layer"}/>
-                {withAfterIcon && <span className={"m3-icon"}>{withAfterIcon && "cancel"}</span>}
+                {withAfterIcon &&
+                    <span className={"m3-icon"}>
+                        {withAfterIcon && "cancel"}
+                    </span>
+                }
             </div>
-            {supportingText && <span className={"m3-text-field-supporting-text"}>{supportingText}</span>}
+            {supportingText &&
+                <span className={"m3-text-field-supporting-text"}>
+                    {supportingText}
+                </span>
+            }
         </span>
     );
 
@@ -52,5 +73,6 @@ TextField.propTypes = {
     withAfterIcon: bool,
     className: string,
     variant: string,
+    placeholder: string,
     supportingText: string,
 }
\ No newline at end of file
diff --git a/src/styles/button.css b/src/styles/button.css
index 5f3982a..135ff8a 100644
--- a/src/styles/button.css
+++ b/src/styles/button.css
@@ -1,127 +1,93 @@
 button:not(.m3-fab, .m3-icon-button) {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 18px;
-}
-button:not(.m3-fab, .m3-icon-button).m3 {
-  contain: content;
-  box-sizing: border-box;
-  border-radius: 100px;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 10px 24px;
-  border: none;
-  gap: 8px;
-}
-button:not(.m3-fab, .m3-icon-button).filled {
-  background-color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
-  color: var(--md-sys-color-on-primary);
-}
-button:not(.m3-fab, .m3-icon-button).outlined {
-  border: 1px solid var(--md-sys-color-outline) !important;
-  background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).text {
-  padding: 10px 12px !important;
-  background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).elevated {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  background-color: var(--md-sys-color-surface-container-low);
-}
-button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).tonal {
-  background-color: var(--md-sys-color-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
-  color: var(--md-sys-color-on-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button)::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
-  box-shadow: none !important;
-}
-button:not(.m3-fab, .m3-icon-button):active.elevated {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
-}
-button:not(.m3-fab, .m3-icon-button):active.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
-  border-color: var(--md-sys-color-primary) !important;
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-}
-button:not(.m3-fab, .m3-icon-button):hover.elevated {
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-}
-button:not(.m3-fab, .m3-icon-button):hover.filled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled {
-  pointer-events: none;
-}
-button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
-  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled.elevated {
-  box-shadow: none;
-}
-button:not(.m3-fab, .m3-icon-button):disabled.outlined {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
-}
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
+  button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
+    font-family: Material-Symbols-Outlined-Regular, sans-serif;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 18px; }
+  button:not(.m3-fab, .m3-icon-button).m3 {
+    contain: content;
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px 24px;
+    border: none;
+    gap: 8px; }
+  button:not(.m3-fab, .m3-icon-button).filled {
+    background-color: var(--md-sys-color-primary); }
+    button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
+      color: var(--md-sys-color-on-primary); }
+  button:not(.m3-fab, .m3-icon-button).outlined {
+    border: 1px solid var(--md-sys-color-outline) !important;
+    background-color: #00000000; }
+    button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).text {
+    padding: 10px 12px !important;
+    background-color: #00000000; }
+    button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).elevated {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    background-color: var(--md-sys-color-surface-container-low); }
+    button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).tonal {
+    background-color: var(--md-sys-color-secondary-container); }
+    button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
+      color: var(--md-sys-color-on-secondary-container); }
+  button:not(.m3-fab, .m3-icon-button)::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background: #00000000; }
+  button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
+    box-shadow: none !important; }
+  button:not(.m3-fab, .m3-icon-button):active.elevated {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
+  button:not(.m3-fab, .m3-icon-button):active.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
+    border-color: var(--md-sys-color-primary) !important; }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
+  button:not(.m3-fab, .m3-icon-button):hover.elevated {
+    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
+  button:not(.m3-fab, .m3-icon-button):hover.filled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):disabled {
+    pointer-events: none; }
+    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
+      color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
+      background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+    button:not(.m3-fab, .m3-icon-button):disabled.elevated {
+      box-shadow: none; }
+    button:not(.m3-fab, .m3-icon-button):disabled.outlined {
+      border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
 
 /*# sourceMappingURL=button.css.map */
diff --git a/src/styles/button.css.map b/src/styles/button.css.map
index 3ab9483..8ddcca4 100644
--- a/src/styles/button.css.map
+++ b/src/styles/button.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECHI;EDKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECpCA;;ADuCA;ECjCA;;ADoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECnDA;;ADsDA;EChDA;;ADmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "AAEA,oCAAoC;EAChC,UAAU,EAAE,wEAAuE;EAEnF,mDAAgB;IACZ,WAAW,EAAE,6CAA6C;IAC1D,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;EAErB,uCAAI;IACA,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,UAAU;IACtB,aAAa,EAAE,KAAK;IACpB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,GAAG;EAEZ,2CAAQ;IACJ,gBAAgB,EAAE,2BAA2B;IAC7C,uGAAmB;MACf,KAAK,EAAE,8BAA8B;EAE7C,6CAAU;IACN,MAAM,EAAE,gDAAgD;IACxD,gBAAgB,EAAE,SAAS;IAC3B,2GAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,yCAAM;IACF,OAAO,EAAE,oBAAoB;IAC7B,gBAAgB,EAAE,SAAS;IAC3B,mGAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,6CAAU;ICHN,UAAU,EAAE,iEAAkE;IDK9E,gBAAgB,EAAE,yCAAyC;IAC3D,2GAAmB;MACf,KAAK,EAAE,2BAA2B;EAE1C,0CAAO;IACH,gBAAgB,EAAE,uCAAuC;IACzD,qGAAmB;MACf,KAAK,EAAE,0CAA0C;EAEzD,4CAAS;ICaT,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;EDjBrB,+EAA4C;IACxC,UAAU,EAAE,mEAAmE;EAG/E,wGAAqC;IACjC,UAAU,EAAE,gEAAgE;EAEpF,8EAA2C;IACvC,UAAU,EAAE,+EAA+E;EAG3F,+DAAqB;ICpCrB,UAAU,EAAE,eAAe;EDuC3B,oDAAU;ICjCV,UAAU,EAAE,4EAA6E;EDoCzF,yDAAe;IACX,gBAAgB,EAAE,+EAA+E;EAGrG,2DAAU;IACN,YAAY,EAAE,sCAAsC;EAExD,iEAAgB;IACZ,gBAAgB,EAAE,mEAAmE;EAEzF,0FAAyC;IACrC,gBAAgB,EAAE,gEAAgE;EAEtF,gEAAe;IACX,gBAAgB,EAAE,+EAA+E;EAGrG,8DAAqB;ICnDrB,UAAU,EAAE,iEAAkE;EDsD9E,mDAAU;IChDV,UAAU,EAAE,iEAAkE;EDmD9E,yDAAgB;IACZ,gBAAgB,EAAE,kEAAkE;EAExF,kFAAyC;IACrC,gBAAgB,EAAE,+DAA+D;EAErF,wDAAe;IACX,gBAAgB,EAAE,8EAA8E;EAExG,6CAAU;IACN,cAAc,EAAE,IAAI;IAEpB,8FAAkD;MAC9C,KAAK,EAAE,mEAAmE;IAE9E,4EAAgC;MAC5B,UAAU,EAAE,mEAAmE;IAEnF,sDAAU;MACN,UAAU,EAAE,IAAI;IAEpB,sDAAU;MACN,MAAM,EAAE,wFAAwF",
+"sources": ["button.sass","mixins/m3-mixins.sass"],
+"names": [],
+"file": "button.css"
+}
diff --git a/src/styles/checkbox.css b/src/styles/checkbox.css
index 54b4568..31809c2 100644
--- a/src/styles/checkbox.css
+++ b/src/styles/checkbox.css
@@ -3,15 +3,13 @@ label.m3.m3-checkbox-label {
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
-  position: absolute;
-  width: 40px;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
+  aspect-ratio: 1; }
+  label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
+    position: absolute;
+    width: 40px;
+    aspect-ratio: inherit;
+    border-radius: 50%;
+    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
 
 span.m3.m3-checkbox-ripple-layer {
   z-index: 20;
@@ -19,10 +17,9 @@ span.m3.m3-checkbox-ripple-layer {
   border-radius: 50%;
   position: absolute;
   width: 40px;
-  height: 40px;
-}
+  height: 40px; }
 
-input[type=checkbox].m3.m3-checkbox {
+input[type="checkbox"].m3.m3-checkbox {
   appearance: none;
   display: flex;
   align-items: center;
@@ -34,69 +31,50 @@ input[type=checkbox].m3.m3-checkbox {
   margin: 0;
   border-radius: 2px;
   border: 2px 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)) {
-  border: 2px solid var(--md-sys-color-error);
-  background-color: var(--md-sys-color-error);
-}
-input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  border: 2px solid 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)) {
-  border: 2px solid 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: 18px;
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-weight: 700;
-  font-size: 18px;
-  color: var(--md-sys-color-on-primary);
-}
-input[type=checkbox].m3.m3-checkbox:checked::after {
-  content: "done";
-}
-input[type=checkbox].m3.m3-checkbox:indeterminate::after {
-  content: "check_indeterminate_small";
-}
-input[type=checkbox].m3.m3-checkbox:hover {
-  border: 2px solid var(--md-sys-color-on-surface);
-}
-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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
-}
+  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)) {
+    border: 2px solid var(--md-sys-color-error);
+    background-color: var(--md-sys-color-error); }
+  input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
+    border: 2px solid var(--md-sys-color-error); }
+  input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) {
+    border: 2px solid var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary); }
+  input[type="checkbox"].m3.m3-checkbox:disabled:is(:hover, &) {
+    opacity: 38%;
+    border: 2px solid var(--md-sys-color-on-surface); }
+  input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(:hover, &) {
+    opacity: 38%;
+    background-color: var(--md-sys-color-on-surface); }
+  input[type="checkbox"].m3.m3-checkbox::after {
+    line-height: 18px;
+    font-family: Material-Symbols-Outlined-Regular, sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--md-sys-color-on-primary); }
+  input[type="checkbox"].m3.m3-checkbox:checked::after {
+    content: "done"; }
+  input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
+    content: "check_indeterminate_small"; }
+  input[type="checkbox"].m3.m3-checkbox:hover {
+    border: 2px solid var(--md-sys-color-on-surface); }
+  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 {
+    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 {
+      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 {
+    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 {
+    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 {
+      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 {
+    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 {
+    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 {
+      background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
 
 /*# sourceMappingURL=checkbox.css.map */
diff --git a/src/styles/checkbox.css.map b/src/styles/checkbox.css.map
index 3f236ec..eb587a9 100644
--- a/src/styles/checkbox.css.map
+++ b/src/styles/checkbox.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["checkbox.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;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","file":"checkbox.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "AAEA,0BAA0B;ECDtB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,YAAY,EAAE,CAAC;EDDf,4DAAmC;ICInC,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,OAAO;IACrB,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,gDAA+C;;ADL/D,gCAAgC;EAC5B,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,qCAAqC;EACjC,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,WAAW;EACvB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,gDAAgD;EACxD,UAAU,EAAE,gDAA+C;EAE3D,+HAA2F;IACvF,MAAM,EAAE,mCAAmC;IAC3C,gBAAgB,EAAE,yBAAyB;EAE/C,qEAAiC;IAC7B,MAAM,EAAE,mCAAmC;EAE/C,wJAAoH;IAChH,MAAM,EAAE,qCAAqC;IAC7C,gBAAgB,EAAE,2BAA2B;EAG7C,4DAAe;IACX,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,wCAAwC;EAEpD,oEAAuB;IACnB,OAAO,EAAE,GAAG;IACZ,gBAAgB,EAAE,8BAA8B;EAExD,4CAAQ;IACJ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,6CAA6C;IAC1D,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,8BAA8B;EAEzC,oDAAgB;IACZ,OAAO,EAAE,MAAM;EAEnB,0DAAsB;IAClB,OAAO,EAAE,2BAA2B;EAExC,2CAAO;IACH,MAAM,EAAE,wCAAwC;EAI5C,6JAAmC;IAC/B,gBAAgB,EAAE,6DAA6D;EAEvF,gKAA6G;IACzG,gBAAgB,EAAE,8DAA8D;IAChF,qMAAsC;MAClC,gBAAgB,EAAE,8DAA8D;EAExF,+HAA4E;IACxE,gBAAgB,EAAE,+DAA+D;EAErF,iIAA8E;IAC1E,gBAAgB,EAAE,gEAAgE;IAClF,sKAAsC;MAClC,gBAAgB,EAAE,mEAAmE;EAGzF,yFAAgC;IAC5B,gBAAgB,EAAE,kEAAkE;EAE5F,6FAA0C;IACtC,gBAAgB,EAAE,mEAAmE;IACrF,kIAAsC;MAClC,gBAAgB,EAAE,gEAAgE",
+"sources": ["checkbox.sass","mixins/m3-mixins.sass"],
+"names": [],
+"file": "checkbox.css"
+}
diff --git a/src/styles/fabs.css b/src/styles/fabs.css
index a878986..59f8b00 100644
--- a/src/styles/fabs.css
+++ b/src/styles/fabs.css
@@ -1,127 +1,97 @@
 button.m3.m3-fab {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button.m3.m3-fab > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-}
-button.m3.m3-fab.m3 {
-  contain: content;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  border: none;
-  gap: 12px;
-}
-button.m3.m3-fab::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0);
-}
-button.m3.m3-fab.surface {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-surface-container-high);
-}
-button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
-  color: var(--md-sys-color-primary);
-}
-button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-fab.primary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-primary-container);
-}
-button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
-  color: var(--md-sys-color-on-primary-container);
-}
-button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
-}
-button.m3.m3-fab.secondary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-secondary-container);
-}
-button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
-  color: var(--md-sys-color-on-secondary-container);
-}
-button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-fab.tertiary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-tertiary-container);
-}
-button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
-  color: var(--md-sys-color-on-tertiary-container);
-}
-button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
-}
-button.m3.m3-fab.m3-small-fab {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  padding: 11px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-default-fab {
-  width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-large-fab {
-  width: 96px;
-  height: 96px;
-  border-radius: 28px;
-  padding: 34.5px;
-  font-size: 36px;
-}
-button.m3.m3-fab.m3-extended-fab {
-  width: auto;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
-}
-button.m3.m3-fab:hover.surface::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button.m3.m3-fab:hover.primary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
-}
-button.m3.m3-fab:hover.secondary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button.m3.m3-fab:hover.tertiary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
-}
-button.m3.m3-fab:focus-visible.surface::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.primary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.secondary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.tertiary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
-}
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
+  button.m3.m3-fab > span.m3-icon {
+    font-family: Material-Symbols-Outlined-Regular, sans-serif; }
+  button.m3.m3-fab.m3 {
+    contain: content;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border: none;
+    gap: 12px; }
+  button.m3.m3-fab::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background: #00000000; }
+  button.m3.m3-fab.surface {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-surface-container-high); }
+    button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
+      color: var(--md-sys-color-primary); }
+    button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-fab.primary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-primary-container); }
+    button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
+      color: var(--md-sys-color-on-primary-container); }
+    button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
+  button.m3.m3-fab.secondary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-secondary-container); }
+    button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
+      color: var(--md-sys-color-on-secondary-container); }
+    button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-fab.tertiary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-tertiary-container); }
+    button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
+      color: var(--md-sys-color-on-tertiary-container); }
+    button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
+  button.m3.m3-fab.m3-small-fab {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    padding: 11px;
+    font-size: 24px; }
+  button.m3.m3-fab.m3-default-fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+    padding: 19px;
+    font-size: 24px; }
+  button.m3.m3-fab.m3-large-fab {
+    width: 96px;
+    height: 96px;
+    border-radius: 28px;
+    padding: 34.5px;
+    font-size: 36px; }
+  button.m3.m3-fab.m3-extended-fab {
+    width: auto;
+    height: 56px;
+    border-radius: 16px;
+    padding: 19px;
+    font-size: 24px; }
+  button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); }
+  button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; }
+  button.m3.m3-fab:hover.surface::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button.m3.m3-fab:hover.primary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
+  button.m3.m3-fab:hover.secondary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button.m3.m3-fab:hover.tertiary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
+  button.m3.m3-fab:focus-visible.surface::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.primary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.secondary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.tertiary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
 
 /*# sourceMappingURL=fabs.css.map */
diff --git a/src/styles/fabs.css.map b/src/styles/fabs.css.map
index 7d189db..497844e 100644
--- a/src/styles/fabs.css.map
+++ b/src/styles/fabs.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["fabs.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;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;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"fabs.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "AAEA,gBAAgB;EACZ,UAAU,EAAE,wEAAuE;EAEnF,+BAAgB;IACZ,WAAW,EAAE,6CAA6C;EAE9D,mBAAI;IACA,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,IAAI;EAEb,wBAAS;IC8CT,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;EDlDrB,wBAAS;IC4BL,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,0CAAc;IAChC,iEAAmB;MACf,KAAK,EAAE,2BAAW;IACtB,4DAAqC;MACjC,UAAU,EAAE,gEAAgD;EDDhE,wBAAS;ICyBL,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,qCAAc;IAChC,iEAAmB;MACf,KAAK,EAAE,wCAAW;IACtB,4DAAqC;MACjC,UAAU,EAAE,6EAAgD;EDEhE,0BAAW;ICsBP,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,uCAAc;IAChC,qEAAmB;MACf,KAAK,EAAE,0CAAW;IACtB,8DAAqC;MACjC,UAAU,EAAE,+EAAgD;EDKhE,yBAAU;ICmBN,UAAU,EAAE,iEAAkE;IA5BlF,gBAAgB,EAAE,sCAAc;IAChC,mEAAmB;MACf,KAAK,EAAE,yCAAW;IACtB,6DAAqC;MACjC,UAAU,EAAE,8EAAgD;EDQhE,6BAAc;ICnBd,KAAK,EDoB6B,IAAI;ICnBtC,MAAM,EDmBkC,IAAI;IClB5C,aAAa,EDkBe,IAAI;ICjBhC,OAAO,EDiBuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,+BAAgB;ICvBhB,KAAK,EDwB6B,IAAI;ICvBtC,MAAM,EDuBkC,IAAI;ICtB5C,aAAa,EDsBe,IAAI;ICrBhC,OAAO,EDqBuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,6BAAc;IC3Bd,KAAK,ED4B6B,IAAI;IC3BtC,MAAM,ED2BkC,IAAI;IC1B5C,aAAa,ED0Be,IAAI;ICzBhC,OAAO,EDyBuC,MAAM;IAChD,SAAS,EAAE,IAAI;EAEnB,gCAAiB;IC/BjB,KAAK,EDgC6B,IAAI;IC/BtC,MAAM,ED+BkC,IAAI;IC9B5C,aAAa,ED8Be,IAAI;IC7BhC,OAAO,ED6BuC,IAAI;IAC9C,SAAS,EAAE,IAAI;EAEnB,oEAAqD;ICMjD,UAAU,EAAE,kEAAmE;EDHnF,qEAAsD;ICLlD,UAAU,EAAE,4EAA6E;EDSzF,sCAAiB;IACb,gBAAgB,EAAE,+DAA+D;EAErF,sCAAiB;IACb,gBAAgB,EAAE,4EAA4E;EAElG,wCAAmB;IACf,gBAAgB,EAAE,8EAA8E;EAEpG,uCAAkB;IACd,gBAAgB,EAAE,6EAA6E;EAGnG,8CAAiB;IACb,gBAAgB,EAAE,gEAAgE;EAEtF,8CAAiB;IACb,gBAAgB,EAAE,6EAA6E;EAEnG,gDAAmB;IACf,gBAAgB,EAAE,+EAA+E;EAErG,+CAAkB;IACd,gBAAgB,EAAE,8EAA8E",
+"sources": ["fabs.sass","mixins/m3-mixins.sass"],
+"names": [],
+"file": "fabs.css"
+}
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 97647df..819b457 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -1,147 +1,118 @@
+@import url(./themes/tokens.css);
+@import url(./themes/colors.module.css);
+@import url(./themes/typography.module.css);
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
 button.m3.m3-fab {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button.m3.m3-fab > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-}
-button.m3.m3-fab.m3 {
-  contain: content;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  border: none;
-  gap: 12px;
-}
-button.m3.m3-fab::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0);
-}
-button.m3.m3-fab.surface {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-surface-container-high);
-}
-button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
-  color: var(--md-sys-color-primary);
-}
-button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-fab.primary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-primary-container);
-}
-button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
-  color: var(--md-sys-color-on-primary-container);
-}
-button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
-}
-button.m3.m3-fab.secondary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-secondary-container);
-}
-button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
-  color: var(--md-sys-color-on-secondary-container);
-}
-button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-fab.tertiary {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
-  background-color: var(--md-sys-color-tertiary-container);
-}
-button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
-  color: var(--md-sys-color-on-tertiary-container);
-}
-button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
-}
-button.m3.m3-fab.m3-small-fab {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  padding: 11px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-default-fab {
-  width: 56px;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab.m3-large-fab {
-  width: 96px;
-  height: 96px;
-  border-radius: 28px;
-  padding: 34.5px;
-  font-size: 36px;
-}
-button.m3.m3-fab.m3-extended-fab {
-  width: auto;
-  height: 56px;
-  border-radius: 16px;
-  padding: 19px;
-  font-size: 24px;
-}
-button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
-}
-button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
-}
-button.m3.m3-fab:hover.surface::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button.m3.m3-fab:hover.primary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
-}
-button.m3.m3-fab:hover.secondary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button.m3.m3-fab:hover.tertiary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
-}
-button.m3.m3-fab:focus-visible.surface::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.primary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.secondary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-fab:focus-visible.tertiary::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
-}
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
+  button.m3.m3-fab > span.m3-icon {
+    font-family: Material-Symbols-Outlined-Regular, sans-serif; }
+  button.m3.m3-fab.m3 {
+    contain: content;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    border: none;
+    gap: 12px; }
+  button.m3.m3-fab::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background: #00000000; }
+  button.m3.m3-fab.surface {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-surface-container-high); }
+    button.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {
+      color: var(--md-sys-color-primary); }
+    button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-fab.primary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-primary-container); }
+    button.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {
+      color: var(--md-sys-color-on-primary-container); }
+    button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
+  button.m3.m3-fab.secondary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-secondary-container); }
+    button.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {
+      color: var(--md-sys-color-on-secondary-container); }
+    button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-fab.tertiary {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: var(--md-sys-color-tertiary-container); }
+    button.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {
+      color: var(--md-sys-color-on-tertiary-container); }
+    button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
+      background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
+  button.m3.m3-fab.m3-small-fab {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    padding: 11px;
+    font-size: 24px; }
+  button.m3.m3-fab.m3-default-fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+    padding: 19px;
+    font-size: 24px; }
+  button.m3.m3-fab.m3-large-fab {
+    width: 96px;
+    height: 96px;
+    border-radius: 28px;
+    padding: 34.5px;
+    font-size: 36px; }
+  button.m3.m3-fab.m3-extended-fab {
+    width: auto;
+    height: 56px;
+    border-radius: 16px;
+    padding: 19px;
+    font-size: 24px; }
+  button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); }
+  button.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important; }
+  button.m3.m3-fab:hover.surface::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button.m3.m3-fab:hover.primary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent); }
+  button.m3.m3-fab:hover.secondary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button.m3.m3-fab:hover.tertiary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent); }
+  button.m3.m3-fab:focus-visible.surface::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.primary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.secondary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-fab:focus-visible.tertiary::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); }
 
 label.m3.m3-radio-label {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
-  position: absolute;
-  width: 40px;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
+  aspect-ratio: 1; }
+  label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
+    position: absolute;
+    width: 40px;
+    aspect-ratio: inherit;
+    border-radius: 50%;
+    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
 
-input[type=radio].m3.m3-radio {
+input[type="radio"].m3.m3-radio {
   appearance: none;
   display: flex;
   align-items: center;
@@ -152,252 +123,190 @@ input[type=radio].m3.m3-radio {
   aspect-ratio: inherit;
   border-radius: 50%;
   border: 2px solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-input[type=radio].m3.m3-radio::after {
-  content: "";
-  width: 10px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-}
-input[type=radio].m3.m3-radio:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type=radio].m3.m3-radio:checked {
-  border: 2px solid var(--md-sys-color-primary);
-}
-input[type=radio].m3.m3-radio:checked::after {
-  background-color: var(--md-sys-color-primary);
-}
-input[type=radio].m3.m3-radio:checked:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type=radio].m3.m3-radio:checked:disabled::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
+  input[type="radio"].m3.m3-radio::after {
+    content: "";
+    width: 10px;
+    aspect-ratio: 1;
+    border-radius: 50%; }
+  input[type="radio"].m3.m3-radio:disabled {
+    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  input[type="radio"].m3.m3-radio:checked {
+    border: 2px solid var(--md-sys-color-primary); }
+  input[type="radio"].m3.m3-radio:checked::after {
+    background-color: var(--md-sys-color-primary); }
+  input[type="radio"].m3.m3-radio:checked:disabled {
+    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  input[type="radio"].m3.m3-radio:checked:disabled::after {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  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); }
+  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); }
+    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); }
+  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); }
+  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); }
+    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); }
 
 @font-face {
   font-family: Material-Icons-Regular;
-  src: url("./font/MaterialIcons-Regular.ttf");
-}
+  src: url("./font/MaterialIcons-Regular.ttf"); }
 @font-face {
   font-family: Material-Icons-Outlined-Regular;
-  src: url("./font/MaterialIconsOutlined-Regular.otf");
-}
+  src: url("./font/MaterialIconsOutlined-Regular.otf"); }
 @font-face {
   font-family: Material-Icons-Round-Regular;
-  src: url("./font/MaterialIconsRound-Regular.otf");
-}
+  src: url("./font/MaterialIconsRound-Regular.otf"); }
 @font-face {
   font-family: Material-Icons-Sharp-Regular;
-  src: url("./font/MaterialIconsSharp-Regular.otf");
-}
+  src: url("./font/MaterialIconsSharp-Regular.otf"); }
 @font-face {
   font-family: Material-Icons-Two-Tone-Regular;
-  src: url("./font/MaterialIconsTwoTone-Regular.otf");
-}
+  src: url("./font/MaterialIconsTwoTone-Regular.otf"); }
 @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") format("woff2");
-}
+  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
 @font-face {
   font-family: Material-Symbols-Round-Regular;
   src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
-}
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].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") format("woff2");
-}
+  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2"); }
 @font-face {
   font-family: Roboto;
   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-face-name: Light;
   font-weight: 300;
-  src: url("./font/Roboto-Light.ttf");
-}
+  src: url("./font/Roboto-Light.ttf"); }
 @font-face {
   font-family: Roboto;
   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-face-name: Medium;
   font-weight: 500;
-  src: url("./font/Roboto-Medium.ttf");
-}
+  src: url("./font/Roboto-Medium.ttf"); }
 @font-face {
   font-family: Roboto;
   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-face-name: Black;
   font-weight: 900;
-  src: url("./font/Roboto-Black.ttf");
-}
+  src: url("./font/Roboto-Black.ttf"); }
 button:not(.m3-fab, .m3-icon-button) {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-}
-button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 18px;
-}
-button:not(.m3-fab, .m3-icon-button).m3 {
-  contain: content;
-  box-sizing: border-box;
-  border-radius: 100px;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 10px 24px;
-  border: none;
-  gap: 8px;
-}
-button:not(.m3-fab, .m3-icon-button).filled {
-  background-color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
-  color: var(--md-sys-color-on-primary);
-}
-button:not(.m3-fab, .m3-icon-button).outlined {
-  border: 1px solid var(--md-sys-color-outline) !important;
-  background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).text {
-  padding: 10px 12px !important;
-  background-color: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).elevated {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  background-color: var(--md-sys-color-surface-container-low);
-}
-button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
-  color: var(--md-sys-color-primary);
-}
-button:not(.m3-fab, .m3-icon-button).tonal {
-  background-color: var(--md-sys-color-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
-  color: var(--md-sys-color-on-secondary-container);
-}
-button:not(.m3-fab, .m3-icon-button)::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0);
-}
-button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
-  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
-  box-shadow: none !important;
-}
-button:not(.m3-fab, .m3-icon-button):active.elevated {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
-}
-button:not(.m3-fab, .m3-icon-button):active.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
-  border-color: var(--md-sys-color-primary) !important;
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-}
-button:not(.m3-fab, .m3-icon-button):hover.elevated {
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-}
-button:not(.m3-fab, .m3-icon-button):hover.filled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled {
-  pointer-events: none;
-}
-button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
-  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-button:not(.m3-fab, .m3-icon-button):disabled.elevated {
-  box-shadow: none;
-}
-button:not(.m3-fab, .m3-icon-button):disabled.outlined {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
-}
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important; }
+  button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
+    font-family: Material-Symbols-Outlined-Regular, sans-serif;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 18px; }
+  button:not(.m3-fab, .m3-icon-button).m3 {
+    contain: content;
+    box-sizing: border-box;
+    border-radius: 100px;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 10px 24px;
+    border: none;
+    gap: 8px; }
+  button:not(.m3-fab, .m3-icon-button).filled {
+    background-color: var(--md-sys-color-primary); }
+    button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {
+      color: var(--md-sys-color-on-primary); }
+  button:not(.m3-fab, .m3-icon-button).outlined {
+    border: 1px solid var(--md-sys-color-outline) !important;
+    background-color: #00000000; }
+    button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).text {
+    padding: 10px 12px !important;
+    background-color: #00000000; }
+    button:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).elevated {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    background-color: var(--md-sys-color-surface-container-low); }
+    button:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {
+      color: var(--md-sys-color-primary); }
+  button:not(.m3-fab, .m3-icon-button).tonal {
+    background-color: var(--md-sys-color-secondary-container); }
+    button:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {
+      color: var(--md-sys-color-on-secondary-container); }
+  button:not(.m3-fab, .m3-icon-button)::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background: #00000000; }
+  button:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
+    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
+    box-shadow: none !important; }
+  button:not(.m3-fab, .m3-icon-button):active.elevated {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
+  button:not(.m3-fab, .m3-icon-button):active.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
+    border-color: var(--md-sys-color-primary) !important; }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
+  button:not(.m3-fab, .m3-icon-button):hover.elevated {
+    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
+  button:not(.m3-fab, .m3-icon-button):hover.filled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button:not(.m3-fab, .m3-icon-button):disabled {
+    pointer-events: none; }
+    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
+      color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+    button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
+      background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+    button:not(.m3-fab, .m3-icon-button):disabled.elevated {
+      box-shadow: none; }
+    button:not(.m3-fab, .m3-icon-button):disabled.outlined {
+      border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
 
 .m3.m3-ripple-domain {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 20;
-  pointer-events: none;
-}
+  pointer-events: none; }
 
 .m3.ripple {
   position: absolute;
@@ -411,21 +320,16 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
   animation-name: rippleAppearanceAnimation;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation-duration: 0.55s;
-  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.m3.ripple.visible {
-  opacity: 1 !important;
-}
+  transition: opacity, background, background-color, 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);
-  }
-}
-input[type=checkbox].m3.m3-switch {
+    transform: scale3d(1, 1, 1); } }
+input[type="checkbox"].m3.m3-switch {
   transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   display: flex;
   position: relative;
@@ -434,150 +338,116 @@ input[type=checkbox].m3.m3-switch {
   height: 32px;
   appearance: none;
   padding: 2px 2px 2px 6px;
-  border-radius: 16px;
+  border-radius: calc(32px / 2);
   border: 2px solid var(--md-sys-color-outline);
-  background-color: var(--md-sys-color-surface-container-high);
-}
-input[type=checkbox].m3.m3-switch:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);
-}
-input[type=checkbox].m3.m3-switch:checked {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-color: var(--md-sys-color-primary);
-}
-input[type=checkbox].m3.m3-switch::after {
-  transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  z-index: 9;
-  position: absolute;
-  display: flex;
-  content: "";
-  height: 40px;
-  width: 40px;
-  left: -6px;
-  border-radius: 50%;
-}
-input[type=checkbox].m3.m3-switch:checked::after {
-  transform: translateX(50%);
-}
-input[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {
-  transform-origin: center;
-}
-input[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 12px;
-}
-input[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {
-  content: "done" !important;
-  color: var(--md-sys-color-on-primary-container);
-}
-@media (prefers-color-scheme: light) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-on-primary);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  input[type=checkbox].m3.m3-switch[data-icon=true]::before {
-    color: var(--md-sys-color-surface-container-high);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {
-    color: var(--md-sys-color-surface-container-highest);
-  }
-  input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {
-    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  }
-}
-input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before {
-  transform: scale(150%);
-  content: "close";
-}
-input[type=checkbox].m3.m3-switch::before {
-  z-index: 10;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  content: "";
-  display: flex;
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: var(--md-sys-color-outline);
-}
-input[type=checkbox].m3.m3-switch:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-on-primary);
-}
-input[type=checkbox].m3.m3-switch:hover:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-input[type=checkbox].m3.m3-switch:hover::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-}
-input[type=checkbox].m3.m3-switch:active:checked::after {
-  transform: translateX(50%);
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-input[type=checkbox].m3.m3-switch:active::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-input[type=checkbox].m3.m3-switch:active:checked::before {
-  transform: translateX(125%) scale(175%);
-  background-color: var(--md-sys-color-primary-container);
-}
-input[type=checkbox].m3.m3-switch:active::before {
-  transform: scale(175%);
-  background-color: var(--md-sys-color-on-surface-variant);
-}
-input[type=checkbox].m3.m3-switch:disabled:checked {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
-}
-input[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {
-  opacity: 0;
-}
-input[type=checkbox].m3.m3-switch:disabled::before {
-  opacity: 0.38;
-  transform: initial;
-  background-color: var(--md-sys-color-outline) !important;
-}
-input[type=checkbox].m3.m3-switch:disabled:checked::before {
-  opacity: 1;
-  transform: translateX(125%) scale(150%);
-  background-color: var(--md-sys-color-surface) !important;
-}
+  background-color: var(--md-sys-color-surface-container-high); }
+  input[type="checkbox"].m3.m3-switch:disabled {
+    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent); }
+  input[type="checkbox"].m3.m3-switch:checked {
+    border: 2px solid #00000000;
+    background-color: var(--md-sys-color-primary); }
+  input[type="checkbox"].m3.m3-switch::after {
+    transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    z-index: 9;
+    position: absolute;
+    display: flex;
+    content: "";
+    height: 40px;
+    width: 40px;
+    left: -6px;
+    border-radius: 50%; }
+  input[type="checkbox"].m3.m3-switch:checked::after {
+    transform: translateX(50%); }
+  input[type="checkbox"].m3.m3-switch:checked::after, input[type="checkbox"].m3.m3-switch::after, input[type="checkbox"].m3.m3-switch:checked::before, input[type="checkbox"].m3.m3-switch::before {
+    transform-origin: center; }
+  input[type="checkbox"].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {
+    font-family: Material-Symbols-Outlined-Regular, sans-serif;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 12px; }
+  input[type="checkbox"].m3.m3-switch[data-icon=true]:checked::before {
+    content: "done" !important;
+    color: var(--md-sys-color-on-primary-container); }
+  @media (prefers-color-scheme: light) {
+    input[type="checkbox"].m3.m3-switch[data-icon=true]::before {
+      color: var(--md-sys-color-on-primary); }
+    input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled::before {
+      color: var(--md-sys-color-surface-container-highest); }
+    input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled:checked::before {
+      color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); } }
+  @media (prefers-color-scheme: dark) {
+    input[type="checkbox"].m3.m3-switch[data-icon=true]::before {
+      color: var(--md-sys-color-surface-container-high); }
+    input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled::before {
+      color: var(--md-sys-color-surface-container-highest); }
+    input[type="checkbox"].m3.m3-switch[data-icon=true]:disabled:checked::before {
+      color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent); } }
+  input[type="checkbox"].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type="checkbox"].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before {
+    transform: scale(150%);
+    content: "close"; }
+  input[type="checkbox"].m3.m3-switch::before {
+    z-index: 10;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    content: "";
+    display: flex;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-outline); }
+  input[type="checkbox"].m3.m3-switch:checked::before {
+    opacity: 1;
+    transform: translateX(125%) scale(150%);
+    background-color: var(--md-sys-color-on-primary); }
+  input[type="checkbox"].m3.m3-switch:hover:checked::after {
+    transform: translateX(50%);
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  input[type="checkbox"].m3.m3-switch:hover::after {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
+  input[type="checkbox"].m3.m3-switch:active:checked::after {
+    transform: translateX(50%);
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  input[type="checkbox"].m3.m3-switch:active::after {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+  input[type="checkbox"].m3.m3-switch:active:checked::before {
+    transform: translateX(125%) scale(175%);
+    background-color: var(--md-sys-color-primary-container); }
+  input[type="checkbox"].m3.m3-switch:active::before {
+    transform: scale(175%);
+    background-color: var(--md-sys-color-on-surface-variant); }
+  input[type="checkbox"].m3.m3-switch:disabled:checked {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important; }
+  input[type="checkbox"].m3.m3-switch:disabled:checked::after, input[type="checkbox"].m3.m3-switch:disabled::after {
+    opacity: 0; }
+  input[type="checkbox"].m3.m3-switch:disabled::before {
+    opacity: 0.38;
+    transform: initial;
+    background-color: var(--md-sys-color-outline) !important; }
+  input[type="checkbox"].m3.m3-switch:disabled:checked::before {
+    opacity: 1;
+    transform: translateX(125%) scale(150%);
+    background-color: var(--md-sys-color-surface) !important; }
 
 @keyframes toggle-shifting {
   50% {
-    width: 30px;
-  }
+    width: 30px; }
   100% {
-    width: 16px;
-  }
-}
+    width: 16px; } }
 label.m3.m3-checkbox-label {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
-  position: absolute;
-  width: 40px;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
+  aspect-ratio: 1; }
+  label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
+    position: absolute;
+    width: 40px;
+    aspect-ratio: inherit;
+    border-radius: 50%;
+    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
 
 span.m3.m3-checkbox-ripple-layer {
   z-index: 20;
@@ -585,10 +455,9 @@ span.m3.m3-checkbox-ripple-layer {
   border-radius: 50%;
   position: absolute;
   width: 40px;
-  height: 40px;
-}
+  height: 40px; }
 
-input[type=checkbox].m3.m3-checkbox {
+input[type="checkbox"].m3.m3-checkbox {
   appearance: none;
   display: flex;
   align-items: center;
@@ -600,239 +469,51 @@ input[type=checkbox].m3.m3-checkbox {
   margin: 0;
   border-radius: 2px;
   border: 2px 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)) {
-  border: 2px solid var(--md-sys-color-error);
-  background-color: var(--md-sys-color-error);
-}
-input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
-  border: 2px solid 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)) {
-  border: 2px solid 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: 18px;
-  font-family: Material-Symbols-Outlined-Regular, sans-serif;
-  font-weight: 700;
-  font-size: 18px;
-  color: var(--md-sys-color-on-primary);
-}
-input[type=checkbox].m3.m3-checkbox:checked::after {
-  content: "done";
-}
-input[type=checkbox].m3.m3-checkbox:indeterminate::after {
-  content: "check_indeterminate_small";
-}
-input[type=checkbox].m3.m3-checkbox:hover {
-  border: 2px solid var(--md-sys-color-on-surface);
-}
-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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  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 {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
-}
-
-div.m3.m3-text-field {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  box-sizing: border-box;
-  margin: 0;
-}
-div.m3.m3-text-field span.m3-icon.icon-before {
-  align-self: start;
-}
-div.m3.m3-text-field + span.m3-text-field-supporting-text {
-  display: flex;
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  color: var(--md-sys-color-on-surface-variant);
-  margin: 0 16px;
-}
-div.m3.m3-text-field > label {
-  padding-inline: 4px;
-  pointer-events: none;
-  transform: translate(12px, 0);
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  color: var(--md-sys-color-on-surface-variant);
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-large-font-size);
-  position: absolute;
-}
-div.m3.m3-text-field > input {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  color: var(--md-sys-color-on-surface);
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-large-font-size);
-  background-color: transparent;
-  border: none;
-}
-div.m3.m3-text-field > span.m3-icon {
-  position: absolute;
-  align-self: end;
-  margin: 12px;
-  width: 24px;
-  line-height: 24px;
-  font-size: 24px;
-  display: inherit;
-  align-items: center;
-  justify-content: inherit;
-  cursor: pointer;
-  color: var(--md-sys-color-on-surface-variant);
-  font-family: Material-Symbols-Outlined-Regular, serif;
-}
-div.m3.m3-text-field > span.m3-text-field-state-layer {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  position: absolute;
-}
-div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
-  outline: none;
-  caret-color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled {
-  contain: content;
-  border-radius: 4px 4px 0 0;
-}
-div.m3.m3-text-field.filled > label.used {
-  transform: translate(12px, -12px);
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-}
-div.m3.m3-text-field.filled > input:required:user-invalid {
-  caret-color: var(--md-sys-color-error);
-  box-shadow: inset 0 -2px 0 var(--md-sys-color-error);
-}
-div.m3.m3-text-field.filled:has(input:required:user-invalid) > *, div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-  color: var(--md-sys-color-error);
-}
-div.m3.m3-text-field.filled > input:focus-visible {
-  outline-offset: 2px;
-  box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled > input:focus-visible + label {
-  color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled:has(input:disabled), div.m3.m3-text-field.filled:has(input:disabled) + span.m3-text-field-supporting-text {
-  opacity: 38%;
-}
-div.m3.m3-text-field.filled > input {
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
-  background-color: var(--md-sys-color-surface-container-highest);
-  box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
-}
-div.m3.m3-text-field.filled > input.with-after-icon {
-  padding: 24px 48px 8px 16px;
-}
-div.m3.m3-text-field.filled > input.with-before-icon {
-  padding: 24px 16px 8px 48px;
-}
-div.m3.m3-text-field.filled > input.with-before-icon + label {
-  margin-left: 32px;
-}
-div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
-  padding: 24px 16px 8px;
-}
-div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
-  padding: 24px 48px 8px 48px;
-}
-div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-}
-div.m3.m3-text-field.outlined {
-  border-radius: 4px;
-}
-div.m3.m3-text-field.outlined > label.used {
-  background-color: var(--md-sys-color-surface);
-  transform: translate(12px, -27px) !important;
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-}
-div.m3.m3-text-field.outlined > input:required:user-invalid {
-  caret-color: var(--md-sys-color-error);
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-error);
-}
-div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *, div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-  color: var(--md-sys-color-error);
-}
-div.m3.m3-text-field.outlined > input:focus-visible {
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.outlined > input:focus-visible + label {
-  color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.outlined:has(input:disabled), div.m3.m3-text-field.outlined:has(input:disabled) + span.m3-text-field-supporting-text {
-  opacity: 38%;
-}
-div.m3.m3-text-field.outlined > input {
-  box-sizing: border-box;
-  border-radius: 4px;
-  outline-offset: -1px;
-  outline: 1px solid var(--md-sys-color-outline);
-}
-div.m3.m3-text-field.outlined > input.with-after-icon {
-  padding: 16px 48px 16px 16px;
-}
-div.m3.m3-text-field.outlined > input.with-before-icon {
-  padding: 16px 16px 16px 48px;
-}
-div.m3.m3-text-field.outlined > input.with-before-icon + label {
-  transform: translate(48px, 0);
-}
-div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
-  padding: 16px;
-}
-div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
-  padding: 16px 48px;
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible) {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible):has(input:not(div.m3.m3-text-field.outlined:hover:not(:focus-visible):user-invalid, :disabled, :focus-visible)) > label {
-  color: var(--md-sys-color-on-surface);
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible) > input:not(:user-invalid, :disabled, :focus-visible) {
-  outline-color: var(--md-sys-color-on-surface) !important;
-}
+  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)) {
+    border: 2px solid var(--md-sys-color-error);
+    background-color: var(--md-sys-color-error); }
+  input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
+    border: 2px solid var(--md-sys-color-error); }
+  input[type="checkbox"].m3.m3-checkbox:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled)) {
+    border: 2px solid var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary); }
+  input[type="checkbox"].m3.m3-checkbox:disabled:is(:hover, &) {
+    opacity: 38%;
+    border: 2px solid var(--md-sys-color-on-surface); }
+  input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(:hover, &) {
+    opacity: 38%;
+    background-color: var(--md-sys-color-on-surface); }
+  input[type="checkbox"].m3.m3-checkbox::after {
+    line-height: 18px;
+    font-family: Material-Symbols-Outlined-Regular, sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--md-sys-color-on-primary); }
+  input[type="checkbox"].m3.m3-checkbox:checked::after {
+    content: "done"; }
+  input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
+    content: "check_indeterminate_small"; }
+  input[type="checkbox"].m3.m3-checkbox:hover {
+    border: 2px solid var(--md-sys-color-on-surface); }
+  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 {
+    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 {
+      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 {
+    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 {
+    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 {
+      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 {
+    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 {
+    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 {
+      background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent); }
 
 button.m3.m3-icon-button {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
@@ -846,824 +527,118 @@ button.m3.m3-icon-button {
   width: 40px;
   height: 40px;
   border: none;
-  padding: 0;
-}
-button.m3.m3-icon-button::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-button.m3.m3-icon-button > span.m3-icon {
-  z-index: 25;
-  font-size: 2em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
-  font-family: Material-Symbols-Round-Regular, serif;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
-  font-size: 13.49px;
-  font-family: Material-Icons-Regular, serif;
-  font-weight: 500;
-}
-button.m3.m3-icon-button.default {
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default.selected.toggled {
-  color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled.toggled {
-  color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.filled.selected.toggled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.tonal.toggled {
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-}
-button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-button.m3.m3-icon-button.outlined {
-  border: 1px solid var(--md-sys-color-outline);
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined:disabled {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  button.m3.m3-icon-button.outlined.selected.toggled {
-    border: 1px solid rgba(0, 0, 0, 0);
-    background-color: var(--md-sys-color-inverse-surface-light);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  button.m3.m3-icon-button.outlined.selected.toggled {
-    border: 1px solid rgba(0, 0, 0, 0);
-    background-color: var(--md-sys-color-inverse-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-}
-button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
-}
-button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-
-:root {
-  /* display - large */
-  --md-sys-typescale-display-large-font-family-name: Roboto;
-  --md-sys-typescale-display-large-font-family-style: Regular;
-  --md-sys-typescale-display-large-font-weight: 400;
-  --md-sys-typescale-display-large-font-size: 57px;
-  --md-sys-typescale-display-large-line-height: 64px;
-  --md-sys-typescale-display-large-letter-spacing: -0.25px;
-  /* display - medium */
-  --md-sys-typescale-display-medium-font-family-name: Roboto;
-  --md-sys-typescale-display-medium-font-family-style: Regular;
-  --md-sys-typescale-display-medium-font-weight: 400;
-  --md-sys-typescale-display-medium-font-size: 45px;
-  --md-sys-typescale-display-medium-line-height: 52px;
-  --md-sys-typescale-display-medium-letter-spacing: 0px;
-  /* display - small */
-  --md-sys-typescale-display-small-font-family-name: Roboto;
-  --md-sys-typescale-display-small-font-family-style: Regular;
-  --md-sys-typescale-display-small-font-weight: 400;
-  --md-sys-typescale-display-small-font-size: 36px;
-  --md-sys-typescale-display-small-line-height: 44px;
-  --md-sys-typescale-display-small-letter-spacing: 0px;
-  /* headline - large */
-  --md-sys-typescale-headline-large-font-family-name: Roboto;
-  --md-sys-typescale-headline-large-font-family-style: Regular;
-  --md-sys-typescale-headline-large-font-weight: 400;
-  --md-sys-typescale-headline-large-font-size: 32px;
-  --md-sys-typescale-headline-large-line-height: 40px;
-  --md-sys-typescale-headline-large-letter-spacing: 0px;
-  /* headline - medium */
-  --md-sys-typescale-headline-medium-font-family-name: Roboto;
-  --md-sys-typescale-headline-medium-font-family-style: Regular;
-  --md-sys-typescale-headline-medium-font-weight: 400;
-  --md-sys-typescale-headline-medium-font-size: 28px;
-  --md-sys-typescale-headline-medium-line-height: 36px;
-  --md-sys-typescale-headline-medium-letter-spacing: 0px;
-  /* headline - small */
-  --md-sys-typescale-headline-small-font-family-name: Roboto;
-  --md-sys-typescale-headline-small-font-family-style: Regular;
-  --md-sys-typescale-headline-small-font-weight: 400;
-  --md-sys-typescale-headline-small-font-size: 24px;
-  --md-sys-typescale-headline-small-line-height: 32px;
-  --md-sys-typescale-headline-small-letter-spacing: 0px;
-  /* body - large */
-  --md-sys-typescale-body-large-font-family-name: Roboto;
-  --md-sys-typescale-body-large-font-family-style: Regular;
-  --md-sys-typescale-body-large-font-weight: 400;
-  --md-sys-typescale-body-large-font-size: 16px;
-  --md-sys-typescale-body-large-line-height: 24px;
-  --md-sys-typescale-body-large-letter-spacing: 0.50px;
-  /* body - medium */
-  --md-sys-typescale-body-medium-font-family-name: Roboto;
-  --md-sys-typescale-body-medium-font-family-style: Regular;
-  --md-sys-typescale-body-medium-font-weight: 400;
-  --md-sys-typescale-body-medium-font-size: 14px;
-  --md-sys-typescale-body-medium-line-height: 20px;
-  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
-  /* body - small */
-  --md-sys-typescale-body-small-font-family-name: Roboto;
-  --md-sys-typescale-body-small-font-family-style: Regular;
-  --md-sys-typescale-body-small-font-weight: 400;
-  --md-sys-typescale-body-small-font-size: 12px;
-  --md-sys-typescale-body-small-line-height: 16px;
-  --md-sys-typescale-body-small-letter-spacing: 0.40px;
-  /* label - large */
-  --md-sys-typescale-label-large-font-family-name: Roboto;
-  --md-sys-typescale-label-large-font-family-style: Medium;
-  --md-sys-typescale-label-large-font-weight: 500;
-  --md-sys-typescale-label-large-font-size: 14px;
-  --md-sys-typescale-label-large-line-height: 20px;
-  --md-sys-typescale-label-large-letter-spacing: 0.10px;
-  /* label - medium */
-  --md-sys-typescale-label-medium-font-family-name: Roboto;
-  --md-sys-typescale-label-medium-font-family-style: Medium;
-  --md-sys-typescale-label-medium-font-weight: 500;
-  --md-sys-typescale-label-medium-font-size: 12px;
-  --md-sys-typescale-label-medium-line-height: 16px;
-  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
-  /* label - small */
-  --md-sys-typescale-label-small-font-family-name: Roboto;
-  --md-sys-typescale-label-small-font-family-style: Medium;
-  --md-sys-typescale-label-small-font-weight: 500;
-  --md-sys-typescale-label-small-font-size: 11px;
-  --md-sys-typescale-label-small-line-height: 16px;
-  --md-sys-typescale-label-small-letter-spacing: 0.50px;
-  /* title - large */
-  --md-sys-typescale-title-large-font-family-name: Roboto;
-  --md-sys-typescale-title-large-font-family-style: Regular;
-  --md-sys-typescale-title-large-font-weight: 400;
-  --md-sys-typescale-title-large-font-size: 22px;
-  --md-sys-typescale-title-large-line-height: 28px;
-  --md-sys-typescale-title-large-letter-spacing: 0px;
-  /* title - medium */
-  --md-sys-typescale-title-medium-font-family-name: Roboto;
-  --md-sys-typescale-title-medium-font-family-style: Medium;
-  --md-sys-typescale-title-medium-font-weight: 500;
-  --md-sys-typescale-title-medium-font-size: 16px;
-  --md-sys-typescale-title-medium-line-height: 24px;
-  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
-  /* title - small */
-  --md-sys-typescale-title-small-font-family-name: Roboto;
-  --md-sys-typescale-title-small-font-family-style: Medium;
-  --md-sys-typescale-title-small-font-weight: 500;
-  --md-sys-typescale-title-small-font-size: 14px;
-  --md-sys-typescale-title-small-line-height: 20px;
-  --md-sys-typescale-title-small-letter-spacing: 0.10px;
-}
-
-.primary {
-  background-color: var(--md-sys-color-primary);
-}
-
-.primary-text {
-  color: var(--md-sys-color-primary);
-}
-
-.on-primary {
-  background-color: var(--md-sys-color-on-primary);
-}
-
-.on-primary-text {
-  color: var(--md-sys-color-on-primary);
-}
-
-.primary-container {
-  background-color: var(--md-sys-color-primary-container);
-}
-
-.primary-container-text {
-  color: var(--md-sys-color-primary-container);
-}
-
-.on-primary-container {
-  background-color: var(--md-sys-color-on-primary-container);
-}
-
-.on-primary-container-text {
-  color: var(--md-sys-color-on-primary-container);
-}
-
-.primary-fixed {
-  background-color: var(--md-sys-color-primary-fixed);
-}
-
-.primary-fixed-text {
-  color: var(--md-sys-color-primary-fixed);
-}
-
-.on-primary-fixed {
-  background-color: var(--md-sys-color-on-primary-fixed);
-}
-
-.on-primary-fixed-text {
-  color: var(--md-sys-color-on-primary-fixed);
-}
-
-.primary-fixed-dim {
-  background-color: var(--md-sys-color-primary-fixed-dim);
-}
-
-.primary-fixed-dim-text {
-  color: var(--md-sys-color-primary-fixed-dim);
-}
-
-.on-primary-fixed-variant {
-  background-color: var(--md-sys-color-on-primary-fixed-variant);
-}
-
-.on-primary-fixed-variant-text {
-  color: var(--md-sys-color-on-primary-fixed-variant);
-}
-
-.secondary {
-  background-color: var(--md-sys-color-secondary);
-}
-
-.secondary-text {
-  color: var(--md-sys-color-secondary);
-}
-
-.on-secondary {
-  background-color: var(--md-sys-color-on-secondary);
-}
-
-.on-secondary-text {
-  color: var(--md-sys-color-on-secondary);
-}
-
-.secondary-container {
-  background-color: var(--md-sys-color-secondary-container);
-}
-
-.secondary-container-text {
-  color: var(--md-sys-color-secondary-container);
-}
-
-.on-secondary-container {
-  background-color: var(--md-sys-color-on-secondary-container);
-}
-
-.on-secondary-container-text {
-  color: var(--md-sys-color-on-secondary-container);
-}
-
-.secondary-fixed {
-  background-color: var(--md-sys-color-secondary-fixed);
-}
-
-.secondary-fixed-text {
-  color: var(--md-sys-color-secondary-fixed);
-}
-
-.on-secondary-fixed {
-  background-color: var(--md-sys-color-on-secondary-fixed);
-}
-
-.on-secondary-fixed-text {
-  color: var(--md-sys-color-on-secondary-fixed);
-}
-
-.secondary-fixed-dim {
-  background-color: var(--md-sys-color-secondary-fixed-dim);
-}
-
-.secondary-fixed-dim-text {
-  color: var(--md-sys-color-secondary-fixed-dim);
-}
-
-.on-secondary-fixed-variant {
-  background-color: var(--md-sys-color-on-secondary-fixed-variant);
-}
-
-.on-secondary-fixed-variant-text {
-  color: var(--md-sys-color-on-secondary-fixed-variant);
-}
-
-.tertiary {
-  background-color: var(--md-sys-color-tertiary);
-}
-
-.tertiary-text {
-  color: var(--md-sys-color-tertiary);
-}
-
-.on-tertiary {
-  background-color: var(--md-sys-color-on-tertiary);
-}
-
-.on-tertiary-text {
-  color: var(--md-sys-color-on-tertiary);
-}
-
-.tertiary-container {
-  background-color: var(--md-sys-color-tertiary-container);
-}
-
-.tertiary-container-text {
-  color: var(--md-sys-color-tertiary-container);
-}
-
-.on-tertiary-container {
-  background-color: var(--md-sys-color-on-tertiary-container);
-}
-
-.on-tertiary-container-text {
-  color: var(--md-sys-color-on-tertiary-container);
-}
-
-.tertiary-fixed {
-  background-color: var(--md-sys-color-tertiary-fixed);
-}
-
-.tertiary-fixed-text {
-  color: var(--md-sys-color-tertiary-fixed);
-}
-
-.on-tertiary-fixed {
-  background-color: var(--md-sys-color-on-tertiary-fixed);
-}
-
-.on-tertiary-fixed-text {
-  color: var(--md-sys-color-on-tertiary-fixed);
-}
-
-.tertiary-fixed-dim {
-  background-color: var(--md-sys-color-tertiary-fixed-dim);
-}
-
-.tertiary-fixed-dim-text {
-  color: var(--md-sys-color-tertiary-fixed-dim);
-}
-
-.on-tertiary-fixed-variant {
-  background-color: var(--md-sys-color-on-tertiary-fixed-variant);
-}
-
-.on-tertiary-fixed-variant-text {
-  color: var(--md-sys-color-on-tertiary-fixed-variant);
-}
-
-.error {
-  background-color: var(--md-sys-color-error);
-}
-
-.error-text {
-  color: var(--md-sys-color-error);
-}
-
-.error-container {
-  background-color: var(--md-sys-color-error-container);
-}
-
-.error-container-text {
-  color: var(--md-sys-color-error-container);
-}
-
-.on-error {
-  background-color: var(--md-sys-color-on-error);
-}
-
-.on-error-text {
-  color: var(--md-sys-color-on-error);
-}
-
-.on-error-container {
-  background-color: var(--md-sys-color-on-error-container);
-}
-
-.on-error-container-text {
-  color: var(--md-sys-color-on-error-container);
-}
-
-.background {
-  background-color: var(--md-sys-color-background);
-}
-
-.background-text {
-  color: var(--md-sys-color-background);
-}
-
-.on-background {
-  background-color: var(--md-sys-color-on-background);
-}
-
-.on-background-text {
-  color: var(--md-sys-color-on-background);
-}
-
-.outline {
-  background-color: var(--md-sys-color-outline);
-}
-
-.outline-text {
-  color: var(--md-sys-color-outline);
-}
-
-.inverse-on-surface {
-  background-color: var(--md-sys-color-inverse-on-surface);
-}
-
-.inverse-on-surface-text {
-  color: var(--md-sys-color-inverse-on-surface);
-}
-
-.inverse-surface {
-  background-color: var(--md-sys-color-inverse-surface);
-}
-
-.inverse-surface-text {
-  color: var(--md-sys-color-inverse-surface);
-}
-
-.inverse-primary {
-  background-color: var(--md-sys-color-inverse-primary);
-}
-
-.inverse-primary-text {
-  color: var(--md-sys-color-inverse-primary);
-}
-
-.shadow {
-  background-color: var(--md-sys-color-shadow);
-}
-
-.shadow-text {
-  color: var(--md-sys-color-shadow);
-}
-
-.surface-tint {
-  background-color: var(--md-sys-color-surface-tint);
-}
-
-.surface-tint-text {
-  color: var(--md-sys-color-surface-tint);
-}
-
-.outline-variant {
-  background-color: var(--md-sys-color-outline-variant);
-}
-
-.outline-variant-text {
-  color: var(--md-sys-color-outline-variant);
-}
-
-.scrim {
-  background-color: var(--md-sys-color-scrim);
-}
-
-.scrim-text {
-  color: var(--md-sys-color-scrim);
-}
-
-.surface {
-  background-color: var(--md-sys-color-surface);
-}
-
-.surface-text {
-  color: var(--md-sys-color-surface);
-}
-
-.on-surface {
-  background-color: var(--md-sys-color-on-surface);
-}
-
-.on-surface-text {
-  color: var(--md-sys-color-on-surface);
-}
-
-.surface-variant {
-  background-color: var(--md-sys-color-surface-variant);
-}
-
-.surface-variant-text {
-  color: var(--md-sys-color-surface-variant);
-}
-
-.on-surface-variant {
-  background-color: var(--md-sys-color-on-surface-variant);
-}
-
-.on-surface-variant-text {
-  color: var(--md-sys-color-on-surface-variant);
-}
-
-.surface-container-highest {
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-
-.surface-container-highest-text {
-  color: var(--md-sys-color-surface-container-highest);
-}
-
-.surface-container-high {
-  background-color: var(--md-sys-color-surface-container-high);
-}
-
-.surface-container-high-text {
-  color: var(--md-sys-color-surface-container-high);
-}
-
-.surface-container {
-  background-color: var(--md-sys-color-surface-container);
-}
-
-.surface-container-text {
-  color: var(--md-sys-color-surface-container);
-}
-
-.surface-container-low {
-  background-color: var(--md-sys-color-surface-container-low);
-}
-
-.surface-container-low-text {
-  color: var(--md-sys-color-surface-container-low);
-}
-
-.surface-container-lowest {
-  background-color: var(--md-sys-color-surface-container-lowest);
-}
-
-.surface-container-lowest-text {
-  color: var(--md-sys-color-surface-container-lowest);
-}
-
-.surface-dim {
-  background-color: var(--md-sys-color-surface-dim);
-}
-
-.surface-dim-text {
-  color: var(--md-sys-color-surface-dim);
-}
-
-.surface-bright {
-  background-color: var(--md-sys-color-surface-bright);
-}
-
-.surface-bright-text {
-  color: var(--md-sys-color-surface-bright);
-}
-
-.display-large {
-  font-family: var(--md-sys-typescale-display-large-font-family-name);
-  font-style: var(--md-sys-typescale-display-large-font-family-style);
-  font-weight: var(--md-sys-typescale-display-large-font-weight);
-  font-size: var(--md-sys-typescale-display-large-font-size);
-  letter-spacing: var(--md-sys-typescale-display-large-tracking);
-  line-height: var(--md-sys-typescale-display-large-height);
-  text-transform: var(--md-sys-typescale-display-large-text-transform);
-  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
-}
-
-.display-medium {
-  font-family: var(--md-sys-typescale-display-medium-font-family-name);
-  font-style: var(--md-sys-typescale-display-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-display-medium-font-weight);
-  font-size: var(--md-sys-typescale-display-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
-  line-height: var(--md-sys-typescale-display-medium-height);
-  text-transform: var(--md-sys-typescale-display-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
-}
-
-.display-small {
-  font-family: var(--md-sys-typescale-display-small-font-family-name);
-  font-style: var(--md-sys-typescale-display-small-font-family-style);
-  font-weight: var(--md-sys-typescale-display-small-font-weight);
-  font-size: var(--md-sys-typescale-display-small-font-size);
-  letter-spacing: var(--md-sys-typescale-display-small-tracking);
-  line-height: var(--md-sys-typescale-display-small-height);
-  text-transform: var(--md-sys-typescale-display-small-text-transform);
-  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
-}
-
-.headline-large {
-  font-family: var(--md-sys-typescale-headline-large-font-family-name);
-  font-style: var(--md-sys-typescale-headline-large-font-family-style);
-  font-weight: var(--md-sys-typescale-headline-large-font-weight);
-  font-size: var(--md-sys-typescale-headline-large-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
-  line-height: var(--md-sys-typescale-headline-large-height);
-  text-transform: var(--md-sys-typescale-headline-large-text-transform);
-  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
-}
-
-.headline-medium {
-  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
-  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
-  font-size: var(--md-sys-typescale-headline-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
-  line-height: var(--md-sys-typescale-headline-medium-height);
-  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
-}
-
-.headline-small {
-  font-family: var(--md-sys-typescale-headline-small-font-family-name);
-  font-style: var(--md-sys-typescale-headline-small-font-family-style);
-  font-weight: var(--md-sys-typescale-headline-small-font-weight);
-  font-size: var(--md-sys-typescale-headline-small-font-size);
-  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
-  line-height: var(--md-sys-typescale-headline-small-height);
-  text-transform: var(--md-sys-typescale-headline-small-text-transform);
-  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
-}
-
-.body-large {
-  font-family: var(--md-sys-typescale-body-large-font-family-name);
-  font-style: var(--md-sys-typescale-body-large-font-family-style);
-  font-weight: var(--md-sys-typescale-body-large-font-weight);
-  font-size: var(--md-sys-typescale-body-large-font-size);
-  letter-spacing: var(--md-sys-typescale-body-large-tracking);
-  line-height: var(--md-sys-typescale-body-large-height);
-  text-transform: var(--md-sys-typescale-body-large-text-transform);
-  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
-}
-
-.body-medium {
-  font-family: var(--md-sys-typescale-body-medium-font-family-name);
-  font-style: var(--md-sys-typescale-body-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-body-medium-font-weight);
-  font-size: var(--md-sys-typescale-body-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-  line-height: var(--md-sys-typescale-body-medium-height);
-  text-transform: var(--md-sys-typescale-body-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
-}
-
-.body-small {
-  font-family: var(--md-sys-typescale-body-small-font-family-name);
-  font-style: var(--md-sys-typescale-body-small-font-family-style);
-  font-weight: var(--md-sys-typescale-body-small-font-weight);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  letter-spacing: var(--md-sys-typescale-body-small-tracking);
-  line-height: var(--md-sys-typescale-body-small-height);
-  text-transform: var(--md-sys-typescale-body-small-text-transform);
-  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
-}
-
-.label-large {
-  font-family: var(--md-sys-typescale-label-large-font-family-name);
-  font-style: var(--md-sys-typescale-label-large-font-family-style);
-  font-weight: var(--md-sys-typescale-label-large-font-weight);
-  font-size: var(--md-sys-typescale-label-large-font-size);
-  letter-spacing: var(--md-sys-typescale-label-large-tracking);
-  line-height: var(--md-sys-typescale-label-large-height);
-  text-transform: var(--md-sys-typescale-label-large-text-transform);
-  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
-}
-
-.label-medium {
-  font-family: var(--md-sys-typescale-label-medium-font-family-name);
-  font-style: var(--md-sys-typescale-label-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-label-medium-font-weight);
-  font-size: var(--md-sys-typescale-label-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
-  line-height: var(--md-sys-typescale-label-medium-height);
-  text-transform: var(--md-sys-typescale-label-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
-}
-
-.label-small {
-  font-family: var(--md-sys-typescale-label-small-font-family-name);
-  font-style: var(--md-sys-typescale-label-small-font-family-style);
-  font-weight: var(--md-sys-typescale-label-small-font-weight);
-  font-size: var(--md-sys-typescale-label-small-font-size);
-  letter-spacing: var(--md-sys-typescale-label-small-tracking);
-  line-height: var(--md-sys-typescale-label-small-height);
-  text-transform: var(--md-sys-typescale-label-small-text-transform);
-  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
-}
-
-.title-large {
-  font-family: var(--md-sys-typescale-title-large-font-family-name);
-  font-style: var(--md-sys-typescale-title-large-font-family-style);
-  font-weight: var(--md-sys-typescale-title-large-font-weight);
-  font-size: var(--md-sys-typescale-title-large-font-size);
-  letter-spacing: var(--md-sys-typescale-title-large-tracking);
-  line-height: var(--md-sys-typescale-title-large-height);
-  text-transform: var(--md-sys-typescale-title-large-text-transform);
-  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
-}
-
-.title-medium {
-  font-family: var(--md-sys-typescale-title-medium-font-family-name);
-  font-style: var(--md-sys-typescale-title-medium-font-family-style);
-  font-weight: var(--md-sys-typescale-title-medium-font-weight);
-  font-size: var(--md-sys-typescale-title-medium-font-size);
-  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
-  line-height: var(--md-sys-typescale-title-medium-height);
-  text-transform: var(--md-sys-typescale-title-medium-text-transform);
-  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
-}
-
-.title-small {
-  font-family: var(--md-sys-typescale-title-small-font-family-name);
-  font-style: var(--md-sys-typescale-title-small-font-family-style);
-  font-weight: var(--md-sys-typescale-title-small-font-weight);
-  font-size: var(--md-sys-typescale-title-small-font-size);
-  letter-spacing: var(--md-sys-typescale-title-small-tracking);
-  line-height: var(--md-sys-typescale-title-small-height);
-  text-transform: var(--md-sys-typescale-title-small-text-transform);
-  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
-}
+  padding: 0; }
+  button.m3.m3-icon-button::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute; }
+  button.m3.m3-icon-button > span.m3-icon {
+    z-index: 25;
+    font-size: 2em;
+    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
+  button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
+    font-family: Material-Symbols-Round-Regular, serif; }
+  button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
+    font-size: 13.49px;
+    font-family: Material-Icons-Regular, serif;
+    font-weight: 500; }
+  button.m3.m3-icon-button.default {
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.default.selected.toggled {
+    color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.filled {
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.filled.toggled {
+    color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-surface-container-highest); }
+  button.m3.m3-icon-button.filled.selected.toggled {
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.tonal.toggled {
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest); }
+  button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
+    color: var(--md-sys-color-on-secondary-container);
+    background-color: var(--md-sys-color-secondary-container); }
+  button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+  button.m3.m3-icon-button.outlined {
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.outlined:disabled {
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.outlined.toggled.selected:disabled {
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+  @media (prefers-color-scheme: light) {
+    button.m3.m3-icon-button.outlined.selected.toggled {
+      border: 1px solid #00000000;
+      background-color: var(--md-sys-color-inverse-surface-light);
+      color: var(--md-sys-color-inverse-on-surface); } }
+  @media (prefers-color-scheme: dark) {
+    button.m3.m3-icon-button.outlined.selected.toggled {
+      border: 1px solid #00000000;
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface); } }
+  button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
+  button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
 
 html {
   font-family: Roboto, serif;
-  color: var(--md-sys-color-on-surface);
-}
+  color: var(--md-sys-color-on-surface); }
 
 .m3 {
-  user-select: none;
-}
+  user-select: none; }
 
 .m3.m3-wrapper {
   background-color: var(--md-sys-color-surface);
   border-radius: 25px;
   padding: 25px;
   width: max-content;
-  height: min-content;
-}
+  height: min-content; }
 
 /*# sourceMappingURL=generics.css.map */
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 40e7060..4be2b92 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAYQ;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;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;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;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;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;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;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI;;;ACzKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;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;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;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;;;ACvJZ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AbrIF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "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",
+"sources": ["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","icon-button.sass"],
+"names": [],
+"file": "generics.css"
+}
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index 63b02e1..b9470dd 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -5,11 +5,10 @@
 @import "ripple"
 @import "swtich"
 @import "checkbox"
-@import "text-field"
 @import "icon-button"
-@import "./themes/tokens"
-@import "./themes/colors.module"
-@import "./themes/typography.module"
+@import "./themes/tokens.css"
+@import "./themes/colors.module.css"
+@import "./themes/typography.module.css"
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark)
 @import "./themes/theme.light.css" (prefers-color-scheme: light)
 
diff --git a/src/styles/icon-button.css b/src/styles/icon-button.css
index 890295c..d064e9a 100644
--- a/src/styles/icon-button.css
+++ b/src/styles/icon-button.css
@@ -10,142 +10,104 @@ button.m3.m3-icon-button {
   width: 40px;
   height: 40px;
   border: none;
-  padding: 0;
-}
-button.m3.m3-icon-button::before {
-  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-button.m3.m3-icon-button > span.m3-icon {
-  z-index: 25;
-  font-size: 2em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
-  font-family: Material-Symbols-Round-Regular, serif;
-}
-button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
-  font-size: 13.49px;
-  font-family: Material-Icons-Regular, serif;
-  font-weight: 500;
-}
-button.m3.m3-icon-button.default {
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.default.selected.toggled {
-  color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.filled.toggled {
-  color: var(--md-sys-color-primary);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.filled.selected.toggled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
-}
-button.m3.m3-icon-button.tonal.toggled {
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: var(--md-sys-color-surface-container-highest);
-}
-button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-}
-button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-button.m3.m3-icon-button.outlined {
-  border: 1px solid var(--md-sys-color-outline);
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined:disabled {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
-  background-color: rgba(0, 0, 0, 0);
-}
-button.m3.m3-icon-button.outlined.toggled.selected:disabled {
-  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
-  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  button.m3.m3-icon-button.outlined.selected.toggled {
-    border: 1px solid rgba(0, 0, 0, 0);
-    background-color: var(--md-sys-color-inverse-surface-light);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  button.m3.m3-icon-button.outlined.selected.toggled {
-    border: 1px solid rgba(0, 0, 0, 0);
-    background-color: var(--md-sys-color-inverse-surface);
-    color: var(--md-sys-color-inverse-on-surface);
-  }
-}
-button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
-}
-button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
-}
-button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
-button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
-}
+  padding: 0; }
+  button.m3.m3-icon-button::before {
+    transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute; }
+  button.m3.m3-icon-button > span.m3-icon {
+    z-index: 25;
+    font-size: 2em;
+    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48; }
+  button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {
+    font-family: Material-Symbols-Round-Regular, serif; }
+  button.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {
+    font-size: 13.49px;
+    font-family: Material-Icons-Regular, serif;
+    font-weight: 500; }
+  button.m3.m3-icon-button.default {
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.default.selected.toggled {
+    color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.filled {
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.filled.toggled {
+    color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-surface-container-highest); }
+  button.m3.m3-icon-button.filled.selected.toggled {
+    color: var(--md-sys-color-on-primary);
+    background-color: var(--md-sys-color-primary); }
+  button.m3.m3-icon-button.tonal.toggled {
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest); }
+  button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
+    color: var(--md-sys-color-on-secondary-container);
+    background-color: var(--md-sys-color-secondary-container); }
+  button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+  button.m3.m3-icon-button.outlined {
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.outlined:disabled {
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+    background-color: #00000000; }
+  button.m3.m3-icon-button.outlined.toggled.selected:disabled {
+    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
+  @media (prefers-color-scheme: light) {
+    button.m3.m3-icon-button.outlined.selected.toggled {
+      border: 1px solid #00000000;
+      background-color: var(--md-sys-color-inverse-surface-light);
+      color: var(--md-sys-color-inverse-on-surface); } }
+  @media (prefers-color-scheme: dark) {
+    button.m3.m3-icon-button.outlined.selected.toggled {
+      border: 1px solid #00000000;
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface); } }
+  button.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); }
+  button.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent); }
+  button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent); }
+  button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent); }
 
 /*# sourceMappingURL=icon-button.css.map */
diff --git a/src/styles/icon-button.css.map b/src/styles/icon-button.css.map
index 18a6817..cc379dc 100644
--- a/src/styles/icon-button.css.map
+++ b/src/styles/icon-button.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["icon-button.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;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;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;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","file":"icon-button.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "AAEA,wBAAwB;EACpB,UAAU,EAAE,wEAAuE;EACnF,OAAO,EAAE,OAAO;EAChB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,CAAC;EAEV,gCAAS;IACL,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,QAAQ;EAEtB,uCAAgB;IACZ,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,GAAG;IACd,uBAAuB,EAAE,yCAAyC;EAGlE,iEAAC;IACG,WAAW,EAAE,qCAAqC;EAEtD,kFAAkB;IACd,SAAS,EAAE,OAAO;IAClB,WAAW,EAAE,6BAA6B;IAC1C,WAAW,EAAE,GAAG;EAGpB,gCAAC;IACG,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,SAAS;EAE/B,yJAA4D;IACxD,KAAK,EAAE,2EAA2E;IAClF,gBAAgB,EAAE,SAAS;EAE/B,iDAAkB;IACd,KAAK,EAAE,2BAA2B;EAGtC,+BAAC;IACG,KAAK,EAAE,8BAA8B;IACrC,gBAAgB,EAAE,2BAA2B;EAEjD,uCAAS;IACL,KAAK,EAAE,2BAA2B;IAClC,gBAAgB,EAAE,6CAA6C;EAEnE,gDAAkB;IACd,KAAK,EAAE,8BAA8B;IACrC,gBAAgB,EAAE,2BAA2B;EAGjD,sCAAS;IACL,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,6CAA6C;EAEnE,+EAAqB;IACjB,KAAK,EAAE,0CAA0C;IACjD,gBAAgB,EAAE,uCAAuC;EAEjE,wEAAiD;IAC7C,KAAK,EAAE,mEAAmE;IAC1E,gBAAgB,EAAE,mEAAmE;EAGrF,iCAAC;IACG,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE,sCAAsC;IAC7C,gBAAgB,EAAE,SAAS;EAE/B,0CAAU;IACN,MAAM,EAAE,0EAA0E;IAClF,KAAK,EAAE,2EAA2E;IAClF,gBAAgB,EAAE,SAAS;EAE/B,2DAA2B;IACvB,MAAM,EAAE,yEAAyE;IACjF,KAAK,EAAE,mEAAmE;IAC1E,gBAAgB,EAAE,mEAAmE;EAEzF,oCAAoC;IAChC,kDAAkB;MACd,MAAM,EAAE,mBAAmB;MAC3B,gBAAgB,EAAE,yCAAyC;MAC3D,KAAK,EAAE,sCAAsC;EAErD,mCAAmC;IAC/B,kDAAkB;MACd,MAAM,EAAE,mBAAmB;MAC3B,gBAAgB,EAAE,mCAAmC;MACrD,KAAK,EAAE,sCAAsC;EAGrD,uLAA6F;IACzF,gBAAgB,EAAE,mEAAmE;EACzF,0FAA6C;IACzC,gBAAgB,EAAE,gEAAgE;EAGtF,mGAAqC;IACjC,gBAAgB,EAAE,2EAA2E;EAEjG,mIAAoE;IAChE,gBAAgB,EAAE,gEAAgE;EAEtF,kIAAmE;IAC/D,gBAAgB,EAAE,2EAA2E;EAGjG,qLAA6F;IACzF,gBAAgB,EAAE,+EAA+E;EACrG,yFAA6C;IACzC,gBAAgB,EAAE,2EAA2E;EAGjG,6EAAiC;IAC7B,gBAAgB,EAAE,0EAA0E;EAEhG,2IAAmD;IAC/C,gBAAgB,EAAE,kEAAkE;EACxF,oEAAwB;IACpB,gBAAgB,EAAE,+DAA+D;EAErF,yIAAiD;IAC7C,gBAAgB,EAAE,8EAA8E;EACpG,mEAAuB;IACnB,gBAAgB,EAAE,0EAA0E;EAGhG,qFAAiC;IAC7B,gBAAgB,EAAE,2EAA2E;EAEjG,2JAAmD;IAC/C,gBAAgB,EAAE,mEAAmE;EACzF,4EAAwB;IACpB,gBAAgB,EAAE,gEAAgE;EAEtF,yJAAiD;IAC7C,gBAAgB,EAAE,+EAA+E;EACrG,2EAAuB;IACnB,gBAAgB,EAAE,2EAA2E",
+"sources": ["icon-button.sass"],
+"names": [],
+"file": "icon-button.css"
+}
diff --git a/src/styles/mixins/m3-mixins.css.map b/src/styles/mixins/m3-mixins.css.map
index 85fd488..89551c2 100644
--- a/src/styles/mixins/m3-mixins.css.map
+++ b/src/styles/mixins/m3-mixins.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"m3-mixins.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "",
+"sources": [],
+"names": [],
+"file": "m3-mixins.css"
+}
diff --git a/src/styles/mixins/m3-mixins.sass b/src/styles/mixins/m3-mixins.sass
index e6ef126..0e603f0 100644
--- a/src/styles/mixins/m3-mixins.sass
+++ b/src/styles/mixins/m3-mixins.sass
@@ -27,37 +27,37 @@
         background: color-mix(in srgb, var($color) 12%, transparent)
 
 @mixin elevation-0($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: none !important
     @else
         box-shadow: none
 
 @mixin elevation-1($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
     @else
         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
 
 @mixin elevation-2($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
     @else
         box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
 
 @mixin elevation-3($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
     @else
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
 
 @mixin elevation-4($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
     @else
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
 
 @mixin elevation-5($important)
-    @if($important == true)
+    @if $important == true
         box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
     @else
         box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
diff --git a/src/styles/radio.css b/src/styles/radio.css
index a946256..0a9bed8 100644
--- a/src/styles/radio.css
+++ b/src/styles/radio.css
@@ -3,17 +3,15 @@ label.m3.m3-radio-label {
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-}
-label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
-  position: absolute;
-  width: 40px;
-  aspect-ratio: inherit;
-  border-radius: 50%;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
+  aspect-ratio: 1; }
+  label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
+    position: absolute;
+    width: 40px;
+    aspect-ratio: inherit;
+    border-radius: 50%;
+    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
 
-input[type=radio].m3.m3-radio {
+input[type="radio"].m3.m3-radio {
   appearance: none;
   display: flex;
   align-items: center;
@@ -24,46 +22,33 @@ input[type=radio].m3.m3-radio {
   aspect-ratio: inherit;
   border-radius: 50%;
   border: 2px solid var(--md-sys-color-on-surface-variant);
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-input[type=radio].m3.m3-radio::after {
-  content: "";
-  width: 10px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-}
-input[type=radio].m3.m3-radio:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type=radio].m3.m3-radio:checked {
-  border: 2px solid var(--md-sys-color-primary);
-}
-input[type=radio].m3.m3-radio:checked::after {
-  background-color: var(--md-sys-color-primary);
-}
-input[type=radio].m3.m3-radio:checked:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-input[type=radio].m3.m3-radio:checked:disabled::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
-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);
-}
+  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
+  input[type="radio"].m3.m3-radio::after {
+    content: "";
+    width: 10px;
+    aspect-ratio: 1;
+    border-radius: 50%; }
+  input[type="radio"].m3.m3-radio:disabled {
+    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  input[type="radio"].m3.m3-radio:checked {
+    border: 2px solid var(--md-sys-color-primary); }
+  input[type="radio"].m3.m3-radio:checked::after {
+    background-color: var(--md-sys-color-primary); }
+  input[type="radio"].m3.m3-radio:checked:disabled {
+    border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  input[type="radio"].m3.m3-radio:checked:disabled::after {
+    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); }
+  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); }
+  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); }
+    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); }
+  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); }
+  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); }
+    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); }
 
 /*# sourceMappingURL=radio.css.map */
diff --git a/src/styles/radio.css.map b/src/styles/radio.css.map
index 4dffd1e..0aa9170 100644
--- a/src/styles/radio.css.map
+++ b/src/styles/radio.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["radio.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;ECDI;EACA;EACA;EACA;EACA;;ADDA;ECIA;EACA;EACA;EACA;EACA;;;ADLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI","file":"radio.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "AAEA,uBAAuB;ECDnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,YAAY,EAAE,CAAC;EDDf,sDAAgC;ICIhC,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,OAAO;IACrB,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,gDAA+C;;ADL/D,+BAA+B;EAC3B,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,YAAY,EAAE,OAAO;EACrB,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,gDAAgD;EACxD,UAAU,EAAE,gDAA+C;EAE3D,sCAAQ;IACJ,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,GAAG;EAEtB,wCAAU;IACN,MAAM,EAAE,6EAA6E;EAEzF,uCAAS;IACL,MAAM,EAAE,qCAAqC;EAEjD,8CAAgB;IACZ,gBAAgB,EAAE,2BAA2B;EAEjD,gDAAkB;IACd,MAAM,EAAE,6EAA6E;EAEzF,uDAAyB;IACrB,gBAAgB,EAAE,mEAAmE;EAIrF,2FAA8C;IAC1C,gBAAgB,EAAE,+DAA+D;EAErF,wHAA2E;IACvE,gBAAgB,EAAE,gEAAgE;IAClF,6JAAsC;MAClC,gBAAgB,EAAE,mEAAmE;EAGzF,mFAAgC;IAC5B,gBAAgB,EAAE,kEAAkE;EAE5F,oFAAuC;IACnC,gBAAgB,EAAE,mEAAmE;IACrF,yHAAsC;MAClC,gBAAgB,EAAE,gEAAgE",
+"sources": ["radio.sass","mixins/m3-mixins.sass"],
+"names": [],
+"file": "radio.css"
+}
diff --git a/src/styles/text-field.css b/src/styles/text-field.css
index 954615a..4d45226 100644
--- a/src/styles/text-field.css
+++ b/src/styles/text-field.css
@@ -4,167 +4,163 @@ div.m3.m3-text-field {
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
-  margin: 0;
-}
-div.m3.m3-text-field span.m3-icon.icon-before {
-  align-self: start;
-}
-div.m3.m3-text-field + span.m3-text-field-supporting-text {
-  display: flex;
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-  color: var(--md-sys-color-on-surface-variant);
-  margin: 0 16px;
-}
-div.m3.m3-text-field > label {
-  padding-inline: 4px;
-  pointer-events: none;
-  transform: translate(12px, 0);
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  color: var(--md-sys-color-on-surface-variant);
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-large-font-size);
-  position: absolute;
-}
-div.m3.m3-text-field > input {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  color: var(--md-sys-color-on-surface);
-  line-height: var(--md-sys-typescale-body-large-line-height);
-  font-size: var(--md-sys-typescale-body-large-font-size);
-  background-color: transparent;
-  border: none;
-}
-div.m3.m3-text-field > span.m3-icon {
-  position: absolute;
-  align-self: end;
-  margin: 12px;
-  width: 24px;
-  line-height: 24px;
-  font-size: 24px;
-  display: inherit;
-  align-items: center;
-  justify-content: inherit;
-  cursor: pointer;
-  color: var(--md-sys-color-on-surface-variant);
-  font-family: Material-Symbols-Outlined-Regular, serif;
-}
-div.m3.m3-text-field > span.m3-text-field-state-layer {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  position: absolute;
-}
-div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
-  outline: none;
-  caret-color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled {
-  contain: content;
-  border-radius: 4px 4px 0 0;
-}
-div.m3.m3-text-field.filled > label.used {
-  transform: translate(12px, -12px);
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-}
-div.m3.m3-text-field.filled > input:required:user-invalid {
-  caret-color: var(--md-sys-color-error);
-  box-shadow: inset 0 -2px 0 var(--md-sys-color-error);
-}
-div.m3.m3-text-field.filled:has(input:required:user-invalid) > *, div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-  color: var(--md-sys-color-error);
-}
-div.m3.m3-text-field.filled > input:focus-visible {
-  outline-offset: 2px;
-  box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled > input:focus-visible + label {
-  color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.filled:has(input:disabled), div.m3.m3-text-field.filled:has(input:disabled) + span.m3-text-field-supporting-text {
-  opacity: 38%;
-}
-div.m3.m3-text-field.filled > input {
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
-  background-color: var(--md-sys-color-surface-container-highest);
-  box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
-}
-div.m3.m3-text-field.filled > input.with-after-icon {
-  padding: 24px 48px 8px 16px;
-}
-div.m3.m3-text-field.filled > input.with-before-icon {
-  padding: 24px 16px 8px 48px;
-}
-div.m3.m3-text-field.filled > input.with-before-icon + label {
-  margin-left: 32px;
-}
-div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
-  padding: 24px 16px 8px;
-}
-div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
-  padding: 24px 48px 8px 48px;
-}
-div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
-}
-div.m3.m3-text-field.outlined {
-  border-radius: 4px;
-}
-div.m3.m3-text-field.outlined > label.used {
-  background-color: var(--md-sys-color-surface);
-  transform: translate(12px, -27px) !important;
-  line-height: var(--md-sys-typescale-body-small-line-height);
-  font-size: var(--md-sys-typescale-body-small-font-size);
-}
-div.m3.m3-text-field.outlined > input:required:user-invalid {
-  caret-color: var(--md-sys-color-error);
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-error);
-}
-div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *, div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
-  color: var(--md-sys-color-error);
-}
-div.m3.m3-text-field.outlined > input:focus-visible {
-  outline-offset: -2px;
-  outline: 2px solid var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.outlined > input:focus-visible + label {
-  color: var(--md-sys-color-primary);
-}
-div.m3.m3-text-field.outlined:has(input:disabled), div.m3.m3-text-field.outlined:has(input:disabled) + span.m3-text-field-supporting-text {
-  opacity: 38%;
-}
-div.m3.m3-text-field.outlined > input {
-  box-sizing: border-box;
-  border-radius: 4px;
-  outline-offset: -1px;
-  outline: 1px solid var(--md-sys-color-outline);
-}
-div.m3.m3-text-field.outlined > input.with-after-icon {
-  padding: 16px 48px 16px 16px;
-}
-div.m3.m3-text-field.outlined > input.with-before-icon {
-  padding: 16px 16px 16px 48px;
-}
-div.m3.m3-text-field.outlined > input.with-before-icon + label {
-  transform: translate(48px, 0);
-}
-div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
-  padding: 16px;
-}
-div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
-  padding: 16px 48px;
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible) {
-  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible):has(input:not(div.m3.m3-text-field.outlined:hover:not(:focus-visible):user-invalid, :disabled, :focus-visible)) > label {
-  color: var(--md-sys-color-on-surface);
-}
-div.m3.m3-text-field.outlined:hover:not(:focus-visible) > input:not(:user-invalid, :disabled, :focus-visible) {
-  outline-color: var(--md-sys-color-on-surface) !important;
-}
+  margin: 0; }
+  div.m3.m3-text-field span.m3-icon.icon-before {
+    align-self: start; }
+  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    font-size: var(--md-sys-typescale-body-large-font-size); }
+  div.m3.m3-text-field + span.m3-text-field-supporting-text {
+    display: flex;
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    font-size: var(--md-sys-typescale-body-small-font-size);
+    color: var(--md-sys-color-on-surface-variant);
+    margin: 4px 16px 2px 16px; }
+  div.m3.m3-text-field > label {
+    padding-inline: 4px;
+    pointer-events: none;
+    transform: translate(16px, 0);
+    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+    position: absolute; }
+  div.m3.m3-text-field > input {
+    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+    background-color: transparent;
+    border: none; }
+  div.m3.m3-text-field > span.m3-icon {
+    position: absolute;
+    align-self: end;
+    margin: 12px;
+    width: 24px;
+    line-height: 24px;
+    font-size: 24px;
+    display: inherit;
+    align-items: center;
+    justify-content: inherit;
+    cursor: pointer;
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: Material-Symbols-Outlined-Regular, serif; }
+  div.m3.m3-text-field > span.m3-text-field-state-layer {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    position: absolute; }
+  div.m3.m3-text-field > input, div.m3.m3-text-field > label {
+    color: var(--md-sys-color-on-surface); }
+  div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
+    color: var(--md-sys-color-on-surface-variant); }
+  div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
+    outline: none;
+    caret-color: var(--md-sys-color-primary); }
+  div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
+    opacity: 38%; }
+  div.m3.m3-text-field.filled {
+    contain: content;
+    border-radius: 4px 4px 0 0; }
+    div.m3.m3-text-field.filled > input {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      border-radius: 4px 4px 0 0;
+      background-color: var(--md-sys-color-surface-container-highest);
+      box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); }
+      div.m3.m3-text-field.filled > input.with-after-icon {
+        padding: 24px 48px 8px 16px; }
+      div.m3.m3-text-field.filled > input.with-before-icon {
+        padding: 24px 16px 8px 48px; }
+      div.m3.m3-text-field.filled > input.with-before-icon + label {
+        margin-left: 32px; }
+      div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
+        padding: 24px 16px 8px; }
+      div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
+        padding: 24px 48px 8px 48px; }
+    div.m3.m3-text-field.filled > label.raised {
+      transform: translate(12px, -12px);
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      font-size: var(--md-sys-typescale-body-small-font-size); }
+    div.m3.m3-text-field.filled > input:required:user-invalid {
+      caret-color: var(--md-sys-color-error); }
+      div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
+        box-shadow: inset 0 -3px 0 var(--md-sys-color-error); }
+      div.m3.m3-text-field.filled > input:required:user-invalid {
+        box-shadow: inset 0 -1px 0 var(--md-sys-color-error); }
+    div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
+      color: var(--md-sys-color-error); }
+    div.m3.m3-text-field.filled > input:focus-visible {
+      outline-offset: 3px;
+      box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
+    div.m3.m3-text-field.filled > input:focus-visible + label {
+      color: var(--md-sys-color-primary); }
+    div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
+      transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+      background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
+  div.m3.m3-text-field.outlined > fieldset {
+    margin: 0;
+    position: absolute;
+    border-radius: 4px;
+    pointer-events: none;
+    padding-inline: 12px;
+    border: 1px solid var(--md-sys-color-outline);
+    inset: -7.5px 0px 0px 0px;
+    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); }
+    div.m3.m3-text-field.outlined > fieldset > legend > span {
+      width: 100%; }
+    div.m3.m3-text-field.outlined > fieldset > legend {
+      opacity: 0;
+      width: 0;
+      padding: 0;
+      pointer-events: none;
+      border: 0 solid transparent;
+      transition: 0.05s cubic-bezier(0.2, 0, 0, 1); }
+    div.m3.m3-text-field.outlined > fieldset > legend.raised {
+      border-inline-width: 6px;
+      border-style: solid;
+      border-color: transparent;
+      width: auto;
+      visibility: visible; }
+  div.m3.m3-text-field.outlined > input {
+    box-sizing: border-box;
+    border-radius: 4px; }
+    div.m3.m3-text-field.outlined > input.with-after-icon {
+      padding: 16px 48px 16px 16px; }
+    div.m3.m3-text-field.outlined > input.with-before-icon {
+      padding: 16px 16px 16px 48px; }
+    div.m3.m3-text-field.outlined > input.with-before-icon + label {
+      transform: translate(48px, 0); }
+    div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
+      padding: 16px; }
+    div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
+      padding: 16px 48px; }
+  div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
+    border: 3px solid var(--md-sys-color-primary); }
+  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-inline-width: 5.5px;
+    border-style: solid;
+    border-color: transparent; }
+  div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-inline-width: 7.5px;
+    border-style: solid;
+    border-color: transparent; }
+  div.m3.m3-text-field.outlined > input:focus-visible + label {
+    color: var(--md-sys-color-primary); }
+  div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    font-size: var(--md-sys-typescale-body-small-font-size); }
+  div.m3.m3-text-field.outlined > label.raised {
+    transform: translate(16px, -27px) !important; }
+  div.m3.m3-text-field.outlined > input:required:user-invalid {
+    caret-color: var(--md-sys-color-error); }
+  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
+    color: var(--md-sys-color-error); }
+  div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
+    border: 3px solid var(--md-sys-color-error); }
+  div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
+    border: 1px solid var(--md-sys-color-error); }
+  div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
+    transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+    border-color: var(--md-sys-color-on-surface); }
 
 /*# sourceMappingURL=text-field.css.map */
diff --git a/src/styles/text-field.css.map b/src/styles/text-field.css.map
index d6b9fbc..1275b9a 100644
--- a/src/styles/text-field.css.map
+++ b/src/styles/text-field.css.map
@@ -1 +1,7 @@
-{"version":3,"sourceRoot":"","sources":["text-field.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI","file":"text-field.css"}
\ No newline at end of file
+{
+"version": 3,
+"mappings": "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",
+"sources": ["text-field.sass"],
+"names": [],
+"file": "text-field.css"
+}
diff --git a/src/styles/text-field.sass b/src/styles/text-field.sass
index 20ad012..41d438b 100644
--- a/src/styles/text-field.sass
+++ b/src/styles/text-field.sass
@@ -9,28 +9,26 @@ div.m3.m3-text-field
     span.m3-icon.icon-before
         align-self: start
 
+    &:is(.filled, .outlined) > input::placeholder, & > input, & > label
+        line-height: var(--md-sys-typescale-body-large-line-height)
+        font-size: var(--md-sys-typescale-body-large-font-size)
+
     & + span.m3-text-field-supporting-text
         display: flex
-        line-height: var(--md-sys-typescale-body-large-line-height)
+        line-height: var(--md-sys-typescale-body-small-line-height)
         font-size: var(--md-sys-typescale-body-small-font-size)
         color: var(--md-sys-color-on-surface-variant)
-        margin: 0 16px
+        margin: 4px 16px 2px 16px
 
     & > label
         padding-inline: 4px
         pointer-events: none
-        transform: translate(12px, 0)
+        transform: translate(16px, 0)
         transition: .2s cubic-bezier(0.2, 0, 0, 1)
-        color: var(--md-sys-color-on-surface-variant)
-        line-height: var(--md-sys-typescale-body-large-line-height)
-        font-size: var(--md-sys-typescale-body-large-font-size)
         position: absolute
 
     & > input
         transition: .2s cubic-bezier(0.2, 0, 0, 1)
-        color: var(--md-sys-color-on-surface)
-        line-height: var(--md-sys-typescale-body-large-line-height)
-        font-size: var(--md-sys-typescale-body-large-font-size)
         background-color: transparent
         border: none
 
@@ -54,38 +52,24 @@ div.m3.m3-text-field
         pointer-events: none
         position: absolute
 
+    & > input, & > label
+        color: var(--md-sys-color-on-surface)
+
+    &:is(.filled, .outlined) > input::placeholder
+        color: var(--md-sys-color-on-surface-variant)
+
     &:is(.filled, .outlined) > input:focus-visible
         outline: none
         caret-color: var(--md-sys-color-primary)
 
+    &:is(.filled, .outlined):has(input:disabled)
+        & > *, & + span.m3-text-field-supporting-text
+            opacity: 38%
+
     &.filled
         contain: content
         border-radius: 4px 4px 0 0
 
-        & > label.used
-            transform: translate(12px, -12px)
-            line-height: var(--md-sys-typescale-body-small-line-height)
-            font-size: var(--md-sys-typescale-body-small-font-size)
-
-        & > input:required:user-invalid
-            caret-color: var(--md-sys-color-error)
-            box-shadow: inset 0 -2px 0 var(--md-sys-color-error)
-
-        &:has(input:required:user-invalid) > *,
-        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
-            color: var(--md-sys-color-error)
-
-        & > input:focus-visible
-            outline-offset: 2px
-            box-shadow: inset 0 -2px 0 var(--md-sys-color-primary)
-
-        & > input:focus-visible + label
-            color: var(--md-sys-color-primary)
-
-        &:has(input:disabled),
-        &:has(input:disabled) + span.m3-text-field-supporting-text
-            opacity: 38%
-
         & > input
             &.with-after-icon
                 padding: 24px 48px 8px 16px
@@ -102,44 +86,70 @@ div.m3.m3-text-field
             &.with-after-icon.with-before-icon
                 padding: 24px 48px 8px 48px
 
+            display: inline-flex
+            align-items: center
             box-sizing: border-box
             border-radius: 4px 4px 0 0
             background-color: var(--md-sys-color-surface-container-highest)
             box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
 
+        & > label.raised
+            transform: translate(12px, -12px)
+            line-height: var(--md-sys-typescale-body-small-line-height)
+            font-size: var(--md-sys-typescale-body-small-font-size)
+
+        & > input:required:user-invalid
+            caret-color: var(--md-sys-color-error)
+
+            &:focus-visible
+                box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
+            &
+                box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
+
+        &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
+        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
+            color: var(--md-sys-color-error)
+
+        & > input:focus-visible
+            outline-offset: 3px
+            box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
+
+        & > input:focus-visible + label
+            color: var(--md-sys-color-primary)
+
         &:hover
             & > input:not(:disabled) ~ span.m3-text-field-state-layer
                 transition: .2s cubic-bezier(0.2, 0, 0, 1)
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
 
     &.outlined
-        border-radius: 4px
+        & > fieldset
+            margin: 0
+            position: absolute
+            border-radius: 4px
+            pointer-events: none
+            padding-inline: 12px
+            border: 1px solid var(--md-sys-color-outline)
+            inset: -7.5px 0px 0px 0px
+            transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
-        & > label.used
-            background-color: var(--md-sys-color-surface)
-            transform: translate(12px, -27px) !important
-            line-height: var(--md-sys-typescale-body-small-line-height)
-            font-size: var(--md-sys-typescale-body-small-font-size)
+            & > legend > span
+                width: 100%
 
-        & > input:required:user-invalid
-            caret-color: var(--md-sys-color-error)
-            outline-offset: -2px
-            outline: 2px solid var(--md-sys-color-error)
+            & > legend
+                opacity: 0
+                width: 0
+                padding: 0
+                pointer-events: none
+                border: 0 solid transparent
+                transition: .05s cubic-bezier(0.2, 0, 0, 1)
 
-        &:has(input:required:user-invalid) > *,
-        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
-            color: var(--md-sys-color-error)
-
-        & > input:focus-visible
-            outline-offset: -2px
-            outline: 2px solid var(--md-sys-color-primary)
-
-        & > input:focus-visible + label
-            color: var(--md-sys-color-primary)
-
-        &:has(input:disabled),
-        &:has(input:disabled) + span.m3-text-field-supporting-text
-            opacity: 38%
+            & > legend.raised
+                border-inline-width: 6px
+                border-style: solid
+                border-color: transparent
+                width: auto
+                visibility: visible
 
         & > input
             &.with-after-icon
@@ -159,15 +169,48 @@ div.m3.m3-text-field
 
             box-sizing: border-box
             border-radius: 4px
-            outline-offset: -1px
-            outline: 1px solid var(--md-sys-color-outline)
 
-        &:hover:not(:focus-visible)
-            transition: .2s cubic-bezier(0.2, 0, 0, 1)
+        &:has(input:focus-visible) > fieldset
+            border: 3px solid var(--md-sys-color-primary)
 
-            &:has(input:not(&:user-invalid,:disabled,:focus-visible)) > label
-                color: var(--md-sys-color-on-surface)
+        &:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
+            border-top-width: 0
+            border-bottom-width: 0
+            border-inline-width: 5.5px
+            border-style: solid
+            border-color: transparent
 
-            & > input:not(:user-invalid,:disabled,:focus-visible)
-                outline-color: var(--md-sys-color-on-surface) !important
+        &:not(&:has(input:focus-visible)):has(label.raised) > fieldset > legend
+            border-top-width: 0
+            border-bottom-width: 0
+            border-inline-width: 7.5px
+            border-style: solid
+            border-color: transparent
 
+        & > input:focus-visible + label
+            color: var(--md-sys-color-primary)
+
+        & > label.raised, & > fieldset > *
+            line-height: var(--md-sys-typescale-body-small-line-height)
+            font-size: var(--md-sys-typescale-body-small-font-size)
+
+        & > label.raised
+            transform: translate(16px, -27px) !important
+
+        & > input:required:user-invalid
+            caret-color: var(--md-sys-color-error)
+
+        &:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
+        &:has(input:required:user-invalid) + span.m3-text-field-supporting-text
+            color: var(--md-sys-color-error)
+
+        &:has(input:required:user-invalid) > fieldset
+            border: 3px solid var(--md-sys-color-error)
+
+        &:has(input:required:user-invalid:not(:focus-visible)) > fieldset
+            border: 1px solid var(--md-sys-color-error)
+
+        &:hover
+            &:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
+                transition: .2s cubic-bezier(0.2, 0, 0, 1)
+                border-color: var(--md-sys-color-on-surface)