69 changed files with 2818 additions and 5055 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1 @@
+build/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,95 +0,0 @@
-const prettierConfig = require('./.prettierrc.js');
-
-module.exports = {
-    env: {
-        browser: true,
-        commonjs: true,
-        es2021: true,
-        node: true,
-    },
-    extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        'plugin:react-hooks/recommended',
-        'plugin:prettier/recommended',
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
-        'next/core-web-vitals',
-    ],
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true,
-        },
-        ecmaVersion: 12,
-        sourceType: 'module',
-    },
-    plugins: ['react'],
-    rules: {
-        // Possible errors
-        'no-console': 'warn',
-        // Best practices
-        'dot-notation': 'error',
-        'no-else-return': 'error',
-        'no-floating-decimal': 'error',
-        'no-sequences': 'error',
-        // Stylistic
-        'array-bracket-spacing': 'error',
-        'computed-property-spacing': ['error', 'never'],
-        curly: 'error',
-        'no-lonely-if': 'error',
-        'no-unneeded-ternary': 'error',
-        'one-var-declaration-per-line': 'error',
-        quotes: [
-            'error',
-            'single',
-            {
-                allowTemplateLiterals: false,
-                avoidEscape: true,
-            },
-        ],
-        // ES6
-        'array-callback-return': 'off',
-        'prefer-const': 'error',
-        // Imports
-        'import/prefer-default-export': 'off',
-        'sort-imports': [
-            'error',
-            {
-                ignoreCase: true,
-                ignoreDeclarationSort: true,
-            },
-        ],
-        'no-unused-expressions': 'off',
-        'no-prototype-builtins': 'off',
-        // REACT
-        'react/jsx-uses-react': 'off',
-        'react/react-in-jsx-scope': 'off',
-        'jsx-a11y/href-no-hash': [0],
-        'react/display-name': 0,
-        'react/no-deprecated': 'error',
-        'react/no-unsafe': [
-            'error',
-            {
-                checkAliases: true,
-            },
-        ],
-        'react/jsx-sort-props': [
-            'error',
-            {
-                ignoreCase: true,
-            },
-        ],
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 0,
-        // Prettier
-        // eslint looks for the prettier config at the top level of the package/app
-        // but the config lives in the `config/` directory. Passing the config here
-        // to get around this.
-        'prettier/prettier': ['error', prettierConfig],
-    },
-    settings: {
-        react: {
-            version: 'detect',
-        },
-    },
-};
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/gts/"
+}
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>
--- a/.idea/google-material-you-ui.iml
+++ b/.idea/google-material-you-ui.iml
--- a/.idea/jsLinters/eslint.xml
+++ b/.idea/jsLinters/eslint.xml
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -2,7 +2,7 @@
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/google-material-you-ui.iml" filepath="$PROJECT_DIR$/.idea/google-material-you-ui.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" filepath="$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" />
    </modules>
  </component>
 </project>
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -1,7 +1,3 @@
 module.exports = {
-    arrowParens: 'avoid',
-    singleQuote: true,
-    trailingComma: 'all',
-    tabWidth: 4,
-    endOfLine: 'auto',
-};
+  ...require('gts/.prettierrc.json')
+}
--- a/README.md
+++ b/README.md
@ -1,13 +1,11 @@
 # React/Next.js Material You UI kit (pre-alpha)
-
 This repository is including and will be including components, enumerates in table:
-
 - [x] Buttons
-  - [x] Default
-  - [x] Icon
-  - [x] FAB
-  - [x] Radio
-  - [ ] Segmented
+    - [x] Default
+    - [x] Icon
+    - [x] FAB
+    - [x] Radio
+    - [ ] Segmented
 - [x] Checkbox
 - [x] Text fields
 - [x] Switches
@ -21,29 +19,22 @@ This repository is including and will be including components, enumerates in tab
 - [ ] Cards
 - [ ] Menus
 - [ ] Navigation
-  - [ ] Bars
-  - [ ] Drawer
-  - [ ] Rail
+    - [ ] Bars
+    - [ ] Drawer
+    - [ ] Rail
 - [ ] Sliders
 - [ ] Snackbar
 - [ ] Tabs
 - [ ] Bottom sheets
 - [ ] Bottom app bars
-      ~~and including preview page for test.~~
-      Preview page on stage WIP.
-
+  ~~and including preview page for test.~~
+  Preview page on stage WIP.
 # Status
-
 Nowadays, this UI kit have base kinds of components and you could make everything. For example - general forms (without select field and etc.)
-
 # Roadmap
-
 1. Full implementation components;
 2. Release NPM package;
 3. Custom theaming.
-
 ## Did you find the bug? Make sure to [leave an issue](https://github.com/doryan04/DSS/issues/new) in case of any problems.
-
 ## If you want help to the project, please, advise your idea in Pull request and don't forget [send issue](https://github.com/doryan04/DSS/issues/new)
-
 ### Check out actual news on Telegram. [https://t.me/doryanProjects](https://t.me/doryanProjects)
--- a/app/components/badges.tsx
+++ b/app/components/badges.tsx
@ -1,12 +1,12 @@
 import React from 'react';
-import { Badge } from '../../src/primitive-components/badge/badge';
-import { Divider } from '../../src/primitive-components/divider/divider';
+import {Badge} from '../../src/primitive-components/badge/badge';
+import {Divider} from '../../src/primitive-components/divider/divider';

 export default function Badges() {
    return (
        <div
            className={'m3 m3-wrapper'}
-            style={{ display: 'flex', flexDirection: 'row' }}
+            style={{display: 'flex', flexDirection: 'row'}}
        >
            <div>
                <div
--- a/app/components/buttons.tsx
+++ b/app/components/buttons.tsx
@ -1,20 +1,20 @@
 'use client';

-import React, { useCallback, useState } from 'react';
-import { Button } from '../../src/primitive-components/material-you-components';
+import React, {useCallback, useState} from 'react';
+import {Button} from '../../src/primitive-components/material-you-components';

 export default function Buttons() {
    const [state, setState] = useState(1);

    const callback = useCallback(
        () => setState(prevState => prevState + 1),
-        [state],
+        [state]
    );

    return (
        <div className={'m3 m3-wrapper'}>
            <h1> Buttons </h1>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+            <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
                <div>
                    <h2> Default buttons </h2>
                    <div
@ -26,13 +26,13 @@ export default function Buttons() {
                        }}
                    >
                        <Button
-                            centralRipple
-                            onClick={callback}
                            variant={'filled'}
+                            onClick={callback}
+                            centralRipple
                        >
                            Label + {state}
                        </Button>
-                        <Button variant={'outlined'}>Label</Button>
+                        <Button variant={'elevated'} />
                        <Button variant={'tonal'}>Label</Button>
                        <Button variant={'elevated'}>Label</Button>
                        <Button variant={'text'}>Label</Button>
@ -48,19 +48,19 @@ export default function Buttons() {
                            gap: '0.5em',
                        }}
                    >
-                        <Button icon={'add'} variant={'filled'}>
+                        <Button variant={'filled'} icon={'add'}>
                            Label
                        </Button>
-                        <Button icon={'add'} variant={'outlined'}>
+                        <Button variant={'outlined'} icon={'add'}>
                            Label
                        </Button>
-                        <Button icon={'add'} variant={'tonal'}>
+                        <Button variant={'tonal'} icon={'add'}>
                            Label
                        </Button>
-                        <Button icon={'add'} variant={'elevated'}>
+                        <Button variant={'elevated'} icon={'add'}>
                            Label
                        </Button>
-                        <Button icon={'add'} variant={'text'}>
+                        <Button variant={'text'} icon={'add'}>
                            Label
                        </Button>
                    </div>
--- a/app/components/checkboxes.tsx
+++ b/app/components/checkboxes.tsx
@ -28,7 +28,7 @@ export default function Checkboxes() {
                >
                    <div>
                        <h2> Default </h2>
-                        <div style={{ display: 'flex', gap: '2em' }}>
+                        <div style={{display: 'flex', gap: '2em'}}>
                            <Checkbox centralRipple />
                            <Checkbox defaultChecked />
                            <Checkbox indeterminate={true} />
@ -36,9 +36,9 @@ export default function Checkboxes() {
                    </div>
                    <div>
                        <h2> Disabled </h2>
-                        <div style={{ display: 'flex', gap: '2em' }}>
+                        <div style={{display: 'flex', gap: '2em'}}>
                            <Checkbox disabled />
-                            <Checkbox defaultChecked disabled />
+                            <Checkbox disabled defaultChecked />
                        </div>
                    </div>
                </div>
@ -59,8 +59,8 @@ export default function Checkboxes() {
                            }}
                        >
                            <Checkbox required />
-                            <Checkbox defaultChecked required />
-                            <Checkbox indeterminate={true} required />
+                            <Checkbox required defaultChecked />
+                            <Checkbox required indeterminate={true} />
                        </div>
                        <div
                            style={{
@ -69,16 +69,16 @@ export default function Checkboxes() {
                                flexDirection: 'row',
                            }}
                        >
-                            <Checkbox className={'m3-error'} required />
+                            <Checkbox required className={'m3-error'} />
                            <Checkbox
-                                className={'m3-error'}
-                                defaultChecked
                                required
+                                defaultChecked
+                                className={'m3-error'}
                            />
                            <Checkbox
-                                className={'m3-error'}
-                                indeterminate={true}
                                required
+                                indeterminate={true}
+                                className={'m3-error'}
                            />
                        </div>
                        <Button type={'submit'}>Send</Button>
--- a/app/components/fabs.tsx
+++ b/app/components/fabs.tsx
@ -1,10 +1,10 @@
 import React from 'react';
-import { FAB } from '../../src/primitive-components/material-you-components';
+import {FAB} from '../../src/primitive-components/material-you-components';

 export default function Fabs() {
    return (
        <div className={'m3 m3-wrapper'}>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+            <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
                <div>
                    <h1> FABs with elevation</h1>
                    <div
@ -17,105 +17,105 @@ export default function Fabs() {
                    >
                        <div>
                            <h2> Small </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
+                            <div style={{display: 'flex', gap: '2em'}}>
                                <FAB
+                                    size={'small'}
+                                    icon={'edit'}
+                                    elevated
                                    centralRipple
-                                    elevated
-                                    icon={'edit'}
-                                    size={'small'}
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'small'}
                                    variant={'primary'}
+                                    size={'small'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'small'}
                                    variant={'secondary'}
+                                    size={'small'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'small'}
                                    variant={'tertiary'}
+                                    size={'small'}
+                                    icon={'edit'}
+                                    elevated
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB elevated icon={'edit'} />
+                            <div style={{display: 'flex', gap: '2em'}}>
+                                <FAB icon={'edit'} elevated />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
                                    variant={'primary'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
                                    variant={'secondary'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
                                    variant={'tertiary'}
+                                    icon={'edit'}
+                                    elevated
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB elevated icon={'edit'} size={'large'} />
+                            <div style={{display: 'flex', gap: '2em'}}>
+                                <FAB size={'large'} icon={'edit'} />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'primary'}
+                                    size={'large'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'secondary'}
+                                    size={'large'}
+                                    icon={'edit'}
+                                    elevated
                                />
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'tertiary'}
+                                    size={'large'}
+                                    icon={'edit'}
+                                    elevated
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB elevated icon={'edit'} size={'extended'}>
+                            <div style={{display: 'flex', gap: '2em'}}>
+                                <FAB size={'extended'} icon={'edit'} elevated>
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'primary'}
+                                    size={'extended'}
+                                    icon={'edit'}
+                                    elevated
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'secondary'}
+                                    size={'extended'}
+                                    icon={'edit'}
+                                    elevated
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    elevated
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'tertiary'}
+                                    size={'extended'}
+                                    icon={'edit'}
+                                    elevated
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
@ -135,79 +135,78 @@ export default function Fabs() {
                    >
                        <div>
                            <h2> Small </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB icon={'edit'} size={'small'} />
+                            <div style={{display: 'flex', gap: '2em'}}>
                                <FAB
-                                    icon={'edit'}
                                    size={'small'}
+                                    icon={'edit'}
                                    variant={'primary'}
                                />
                                <FAB
-                                    icon={'edit'}
-                                    size={'small'}
                                    variant={'secondary'}
+                                    size={'small'}
+                                    icon={'edit'}
                                />
                                <FAB
-                                    icon={'edit'}
-                                    size={'small'}
                                    variant={'tertiary'}
+                                    size={'small'}
+                                    icon={'edit'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Default </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
+                            <div style={{display: 'flex', gap: '2em'}}>
                                <FAB icon={'edit'} />
-                                <FAB icon={'edit'} variant={'primary'} />
-                                <FAB icon={'edit'} variant={'secondary'} />
-                                <FAB icon={'edit'} variant={'tertiary'} />
+                                <FAB variant={'primary'} icon={'edit'} />
+                                <FAB variant={'secondary'} icon={'edit'} />
+                                <FAB variant={'tertiary'} icon={'edit'} />
                            </div>
                        </div>
                        <div>
                            <h2> Large </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB icon={'edit'} size={'large'} />
+                            <div style={{display: 'flex', gap: '2em'}}>
+                                <FAB size={'large'} icon={'edit'} />
                                <FAB
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'primary'}
+                                    size={'large'}
+                                    icon={'edit'}
                                />
                                <FAB
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'secondary'}
+                                    size={'large'}
+                                    icon={'edit'}
                                />
                                <FAB
-                                    icon={'edit'}
-                                    size={'large'}
                                    variant={'tertiary'}
+                                    size={'large'}
+                                    icon={'edit'}
                                />
                            </div>
                        </div>
                        <div>
                            <h2> Extended </h2>
-                            <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB icon={'edit'} size={'extended'}>
+                            <div style={{display: 'flex', gap: '2em'}}>
+                                <FAB size={'extended'} icon={'edit'}>
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'primary'}
+                                    size={'extended'}
+                                    icon={'edit'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'secondary'}
+                                    size={'extended'}
+                                    icon={'edit'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
                                <FAB
-                                    icon={'edit'}
-                                    size={'extended'}
                                    variant={'tertiary'}
+                                    size={'extended'}
+                                    icon={'edit'}
                                >
                                    <span className={'label-large'}>Label</span>
                                </FAB>
--- a/app/components/icon-buttons.tsx
+++ b/app/components/icon-buttons.tsx
@ -1,13 +1,13 @@
 'use client';

 import React from 'react';
-import { IconButton } from '../../src/primitive-components/material-you-components';
+import {IconButton} from '../../src/primitive-components/material-you-components';

 function IconButtons() {
    return (
        <div className={'m3 m3-wrapper'}>
            <h1> Icon buttons </h1>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+            <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
                <div>
                    <h2> Default buttons </h2>
                    <div
@ -17,7 +17,7 @@ function IconButtons() {
                            gap: '0.5em',
                        }}
                    >
-                        <IconButton centralRipple icon={'settings'} />
+                        <IconButton icon={'settings'} centralRipple />
                        <IconButton icon={'settings'} variant={'filled'} />
                        <IconButton icon={'settings'} variant={'tonal'} />
                        <IconButton icon={'settings'} variant={'outlined'} />
@ -30,21 +30,21 @@ function IconButtons() {
                            gap: '0.5em',
                        }}
                    >
-                        <IconButton disabled icon={'settings'} />
+                        <IconButton icon={'settings'} disabled />
                        <IconButton
-                            disabled
                            icon={'settings'}
                            variant={'filled'}
+                            disabled
                        />
                        <IconButton
-                            disabled
                            icon={'settings'}
                            variant={'tonal'}
+                            disabled
                        />
                        <IconButton
-                            disabled
                            icon={'settings'}
                            variant={'outlined'}
+                            disabled
                        />
                    </div>
                </div>
@ -66,27 +66,27 @@ function IconButtons() {
                        />
                        <IconButton
                            icon={'settings'}
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
                            variant={'filled'}
-                        />
-                        <IconButton
-                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'tonal'}
-                        />
-                        <IconButton
-                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'outlined'}
+                            toggled={{
+                                selected: 'settings',
+                                unselected: 'settings',
+                            }}
                        />
                    </div>
                    <h2> Disabled toggle buttons </h2>
@ -98,39 +98,39 @@ function IconButtons() {
                        }}
                    >
                        <IconButton
-                            disabled
                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
                        />
                        <IconButton
-                            disabled
                            icon={'settings'}
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
                            variant={'filled'}
-                        />
-                        <IconButton
-                            disabled
-                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'tonal'}
-                        />
-                        <IconButton
-                            disabled
-                            icon={'settings'}
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'outlined'}
+                            toggled={{
+                                selected: 'settings',
+                                unselected: 'settings',
+                            }}
+                            disabled
                        />
                    </div>
                    <h2> Disabled selected toggle buttons </h2>
@ -142,43 +142,43 @@ function IconButtons() {
                        }}
                    >
                        <IconButton
-                            disabled
                            icon={'settings'}
-                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
+                            selected
                        />
                        <IconButton
-                            disabled
                            icon={'settings'}
-                            selected
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
                            variant={'filled'}
-                        />
-                        <IconButton
-                            disabled
-                            icon={'settings'}
-                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
+                            selected
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'tonal'}
-                        />
-                        <IconButton
-                            disabled
-                            icon={'settings'}
-                            selected
                            toggled={{
                                selected: 'settings',
                                unselected: 'settings',
                            }}
+                            disabled
+                            selected
+                        />
+                        <IconButton
+                            icon={'settings'}
                            variant={'outlined'}
+                            toggled={{
+                                selected: 'settings',
+                                unselected: 'settings',
+                            }}
+                            disabled
+                            selected
                        />
                    </div>
                </div>
--- a/app/components/radios.tsx
+++ b/app/components/radios.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Radio } from '../../src/primitive-components/material-you-components';
+import {Radio} from '../../src/primitive-components/material-you-components';

 export default function Radios() {
    return (
@ -16,16 +16,16 @@ export default function Radios() {
            >
                <div>
                    <h2> Default </h2>
-                    <div style={{ display: 'flex', gap: '2em' }}>
+                    <div style={{display: 'flex', gap: '2em'}}>
                        <Radio centralRipple />
                        <Radio defaultChecked />
                    </div>
                </div>
                <div>
                    <h2> Disabled </h2>
-                    <div style={{ display: 'flex', gap: '2em' }}>
+                    <div style={{display: 'flex', gap: '2em'}}>
                        <Radio disabled />
-                        <Radio defaultChecked disabled />
+                        <Radio disabled defaultChecked />
                    </div>
                </div>
            </div>
--- a/app/components/switches.tsx
+++ b/app/components/switches.tsx
@ -1,18 +1,16 @@
-'use client';
-
 import React from 'react';
-import { Switch } from '../../src/primitive-components/material-you-components';
+import {Switch} from '../../src/primitive-components/material-you-components';

 export default function Switches() {
    return (
        <div
            className={'m3 m3-wrapper'}
-            style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
+            style={{display: 'flex', flexDirection: 'column', gap: '1.5em'}}
        >
            <h1> Switches </h1>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <h2 style={{ margin: 0 }}> Without icon </h2>
+            <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <h2 style={{margin: 0}}> Without icon </h2>
                    <div
                        style={{
                            display: 'flex',
@ -29,12 +27,12 @@ export default function Switches() {
                        <div>
                            <h2> Disabled </h2>
                            <Switch disabled />
-                            <Switch defaultChecked disabled />
+                            <Switch disabled defaultChecked />
                        </div>
                    </div>
                </div>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <h2 style={{ margin: 0 }}> With icon (both)</h2>
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <h2 style={{margin: 0}}> With icon (both)</h2>
                    <div
                        style={{
                            display: 'flex',
@ -51,12 +49,12 @@ export default function Switches() {
                        <div>
                            <h2> Disabled </h2>
                            <Switch disabled icon />
-                            <Switch defaultChecked disabled icon />
+                            <Switch disabled defaultChecked icon />
                        </div>
                    </div>
                </div>
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <h2 style={{ margin: 0 }}> With icon (selected)</h2>
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <h2 style={{margin: 0}}> With icon (selected)</h2>
                    <div
                        style={{
                            display: 'flex',
@ -67,13 +65,13 @@ export default function Switches() {
                    >
                        <div>
                            <h2> Default </h2>
-                            <Switch icon selected />
-                            <Switch defaultChecked icon selected />
+                            <Switch selected icon />
+                            <Switch selected defaultChecked icon />
                        </div>
                        <div>
                            <h2> Disabled </h2>
-                            <Switch disabled icon selected />
-                            <Switch defaultChecked disabled icon selected />
+                            <Switch selected disabled icon />
+                            <Switch selected disabled defaultChecked icon />
                        </div>
                    </div>
                </div>
--- a/app/components/text-fields.tsx
+++ b/app/components/text-fields.tsx
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,5 +1,7 @@
 import '../src/styles/generics.css';
-import { Metadata, Viewport } from 'next';
+import '../src/styles/button.css';
+import '../src/styles/ripple.css';
+import {Metadata, Viewport} from 'next';

 export const metadata: Metadata = {
    title: 'Create Next App',
@ -13,11 +15,7 @@ export const viewport: Viewport = {
    userScalable: false,
 };

-export default function RootLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
    return (
        <html lang="en">
            <body>{children}</body>
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import {Fragment} from 'react';
 import Fabs from './components/fabs';
 import Badges from './components/badges';
 import IconButtons from './components/icon-buttons';
@ -6,7 +6,7 @@ import Buttons from './components/buttons';
 import Switches from './components/switches';
 import Checkboxes from './components/checkboxes';
 import Radios from './components/radios';
-import { TextFields } from './components/text-fields';
+import {TextFields} from './components/text-fields';

 export default function Page() {
    return (
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,38 +4,27 @@
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
-    "lint": "lint",
+    "lint": "gts lint",
+    "clean": "gts clean",
    "compile": "tsc",
+    "fix": "gts fix",
    "prepare": "npm run compile",
    "pretest": "npm run compile",
    "posttest": "npm run lint"
  },
  "dependencies": {
-    "eslint-plugin-prettier": "^5.1.3",
    "install": "^0.13.0",
    "next": "latest",
+    "npm": "^10.4.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@next/eslint-plugin-next": "^14.1.0",
    "@types/node": "20.8.2",
    "@types/react": "18.2.33",
    "@types/react-dom": "18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.1.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "i": "^0.3.7",
-    "npm": "^10.4.0",
-    "prettier": "3.2.4",
+    "gts": "^5.2.0",
    "typescript": "~5.2.0"
  }
 }
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,33 @@
+console.log('Try npm run lint/fix!');
+
+const longString =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';
+
+const trailing = 'Semicolon';
+
+const why = {am: 'I tabbed?'};
+
+const iWish = "I didn't have a trailing space...";
+
+const sicilian = true;
+
+const vizzini = sicilian ? !sicilian : sicilian;
+
+const re = /foo {3}bar/;
+
+export function doSomeStuff(
+    withThis: string,
+    andThat: string,
+    andThose: string[]
+) {
+    //function on one line
+    if (!andThose.length) {
+        return false;
+    }
+    console.log(withThis);
+    console.log(andThat);
+    console.dir(andThose);
+    console.log(longString, trailing, why, iWish, vizzini, re);
+    return;
+}
+// TODO: more examples
--- a/src/primitive-components/badge/badge.tsx
+++ b/src/primitive-components/badge/badge.tsx
@ -1,32 +1,38 @@
-import { BadgeProps } from './badges.types';
-import { bool, number, string } from 'prop-types';
-import React, { forwardRef } from 'react';
+import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
+import {bool, number, string} from 'prop-types';

-const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
-    { disableValue = false, ...props },
-    ref,
-) {
-    const digitLength = props.children
-            ? 16 + (props.children.length - 1) * 6
-            : 6,
-        disableValueClassName =
-            disableValue || (!props.children ?? true) ? 'disable-value' : '';
+interface BadgeProps extends PropsWithChildren<any> {
+    disableValue?: boolean;
+}

-    return (
-        <svg
-            {...props}
-            className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
-            ref={ref}
-            width={`${digitLength}px`}
-        >
-            {props.children && (
-                <text x={'50%'} y={'50%'}>
-                    {props.children}
-                </text>
-            )}
-        </svg>
-    );
-});
+const Badge = forwardRef(
+    ({disableValue = false, ...props}: BadgeProps, ref: ForwardedRef<any>) => {
+        const digitLength = props.children
+                ? 16 + (props.children.length - 1) * 6
+                : 6,
+            disableValueClassName =
+                disableValue || (!props.children ?? true)
+                    ? 'disable-value'
+                    : '';
+
+        return (
+            <svg
+                {...props}
+                ref={ref}
+                width={`${digitLength}px`}
+                className={`m3 m3-badge ${
+                    '' ?? props.className
+                }${disableValueClassName}`.trimEnd()}
+            >
+                {props.children && (
+                    <text x={'50%'} y={'50%'}>
+                        {props.children}
+                    </text>
+                )}
+            </svg>
+        );
+    }
+);

 Badge.propTypes = {
    children: number,
@ -34,4 +40,4 @@ Badge.propTypes = {
    disableValue: bool,
 };

-export { Badge };
+export {Badge};
--- a/src/primitive-components/badge/badges.types.ts
+++ b/src/primitive-components/badge/badges.types.ts
@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-export interface BadgeProps extends PropsWithChildren<any> {
-    disableValue?: boolean;
-}
--- a/src/primitive-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-layout/button-layout.tsx
@ -1,8 +1,6 @@
 'use client';

-import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import {RippleArea} from '../ripple/ripple-area';
 import React, {
    forwardRef,
    PropsWithChildren,
@ -10,39 +8,46 @@ import React, {
    useRef,
    useState,
 } from 'react';
+import useRippleEffect from '../ripple/hooks/useRippleEffect';
+import {IRippleProps} from '../ripple/ripple.types';

-const ButtonLayout = forwardRef<
-    HTMLButtonElement,
-    PropsWithChildren<any> & IRippleProps
->(function ButtonBase({ centralRipple = false, ...props }, ref) {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        ripplesRef = useRef(null),
-        buttonId = useId(),
-        events = useRippleEffect(ripplesRef, setIsActive);
+const ButtonLayout = forwardRef(
+    (
+        {
+            centralRipple = false,
+            ...props
+        }: PropsWithChildren<any> & IRippleProps,
+        ref
+    ) => {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            ripplesRef = useRef(null),
+            buttonId = useId(),
+            events = useRippleEffect(ripplesRef, setIsActive);

-    const { variant, disabled, className } = props;
+        const {variant, disabled, className} = props;

-    const classes = className
-        ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
-        : `m3 ${variant}${isActive ? ' is-active' : ''}`;
+        const classes = className
+            ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
+            : `m3 ${variant}${isActive ? ' is-active' : ''}`;

-    return (
-        <button
-            {...props}
-            {...events}
-            className={classes}
-            disabled={disabled}
-            id={buttonId}
-            ref={ref}
-        >
-            {props.children}
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                ref={ripplesRef}
-            />
-        </button>
-    );
-});
+        return (
+            <button
+                {...props}
+                {...events}
+                ref={ref}
+                id={buttonId}
+                className={classes}
+                disabled={disabled}
+            >
+                {props.children}
+                <RippleArea
+                    ref={ripplesRef}
+                    central={centralRipple}
+                    callback={setIsActive}
+                />
+            </button>
+        );
+    }
+);

-export { ButtonLayout };
+export {ButtonLayout};
--- a/src/primitive-components/button-layout/button.types.ts
+++ b/src/primitive-components/button-layout/button.types.ts
@ -1,11 +1,11 @@
-import { PropsWithChildren } from 'react';
+import {PropsWithChildren} from 'react';

-type ToggleButtonType = {
+type toggleButtonType = {
    selected: string;
    unselected: string;
 };

-export interface ButtonMainProps extends PropsWithChildren<any> {
+export interface buttonMainProps extends PropsWithChildren<any> {
    disabled?: boolean;
    variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
 }
@ -17,9 +17,9 @@ export interface FABMainProps extends PropsWithChildren<any> {
    variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
 }

-export interface IconButtonMainProps extends PropsWithChildren<any> {
+export interface iconButtonMainProps extends PropsWithChildren<any> {
    icon: string;
-    toggled?: false | ToggleButtonType;
+    toggled?: false | toggleButtonType;
    disabled?: boolean;
    variant?: 'default' | 'filled' | 'tonal' | 'outlined';
 }
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button/button.tsx
@ -1,33 +1,34 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { Icon } from '../material-you-components';
-import { IRippleProps } from '../ripple/ripple.types';
-import { ButtonLayout } from '../button-layout/button-layout';
-import { ButtonMainProps } from '../button-layout/button.types';
+import {forwardRef} from 'react';
+import {Icon} from '../material-you-components';
+import {IRippleProps} from '../ripple/ripple.types';
+import {ButtonLayout} from '../button-layout/button-layout';
+import {buttonMainProps} from '../button-layout/button.types';

 /**
 * Button component
 ** description
 */

-export const Button = forwardRef<
-    HTMLButtonElement,
-    ButtonMainProps & IRippleProps
->(
+export const Button = forwardRef(
    (
-        { centralRipple = false, variant, disabled = false, icon, ...props },
-        ref,
+        {
+            centralRipple = false,
+            variant,
+            disabled,
+            icon,
+            ...props
+        }: buttonMainProps & IRippleProps,
+        ref
    ) => (
        <ButtonLayout
            {...props}
-            centralRipple={centralRipple}
-            disabled={disabled}
            ref={ref}
+            disabled={disabled}
+            centralRipple={centralRipple}
            variant={variant ? variant : 'filled'}
        >
            {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
            <span className={'label-large'}>{props.children}</span>
        </ButtonLayout>
-    ),
+    )
 );
--- a/src/primitive-components/checkbox-layout/check-box-layout.tsx
+++ b/src/primitive-components/checkbox-layout/check-box-layout.tsx
@ -1,38 +1,35 @@
 'use client';

-import React, {
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-} from 'react';
-import { CheckboxLayoutProps } from './checkbox-layout.types';
+import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import {CheckboxLayoutProps} from './checkbox-layout.types';

-export const CheckBoxLayout = forwardRef(function CheckBoxBase(
-    { indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
-    ref,
-): JSX.Element {
-    const checkboxRef = useRef<any>(null);
+export const CheckBoxLayout = forwardRef(
+    (
+        {indeterminate, typeInput, type, ...props}: CheckboxLayoutProps,
+        ref
+    ): JSX.Element => {
+        const checkboxRef = useRef<any>(null);

-    useEffect(() => {
-        checkboxRef.current.indeterminate = indeterminate === true;
-    }, []);
+        useEffect(() => {
+            checkboxRef.current.indeterminate = indeterminate === true;
+        }, []);

-    useImperativeHandle(ref, () => checkboxRef.current);
+        useImperativeHandle(ref, () => checkboxRef.current);

-    const classesType = typeInput || type;
+        const classesType = typeInput || type;

-    const classes =
-        props.className !== undefined
-            ? `m3 m3-${type} ${props.className}`
-            : `m3 m3-${classesType}`;
+        const classes =
+            props.className !== undefined
+                ? `m3 m3-${type} ${props.className}`
+                : `m3 m3-${classesType}`;

-    return (
-        <input
-            ref={checkboxRef}
-            {...props}
-            className={classes.trimEnd()}
-            type={type}
-        />
-    );
-});
+        return (
+            <input
+                ref={checkboxRef}
+                {...props}
+                type={type}
+                className={classes.trimEnd()}
+            />
+        );
+    }
+);
--- a/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
+++ b/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import {PropsWithChildren} from 'react';

 export interface CheckboxLayoutProps extends PropsWithChildren<any> {
    indeterminate?: boolean;
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/checkbox/checkbox.tsx
@ -1,12 +1,9 @@
-'use client';
-
-import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
+import {RippleArea} from '../ripple/ripple-area';
+import {IRippleProps} from '../ripple/ripple.types';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
 import {
    forwardRef,
-    PropsWithChildren,
    useEffect,
    useImperativeHandle,
    useRef,
@ -18,42 +15,42 @@ import {
 ** description
 */

-export const Checkbox = forwardRef<
-    HTMLInputElement,
-    PropsWithChildren<any> & IRippleProps
->(({ centralRipple, ...props }, ref) => {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        [checked, setChecked] = useState<boolean>(props.checked ?? false),
-        ripplesRef = useRef(null),
-        checkboxRef = useRef(null),
-        events = useRippleEffect(ripplesRef, setIsActive);
+export const Checkbox = forwardRef(
+    ({centralRipple, ...props}: any & IRippleProps, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            [checked, setChecked] = useState<boolean>(props.checked ?? false),
+            ripplesRef = useRef(null),
+            checkboxRef = useRef(null),
+            events = useRippleEffect(ripplesRef, setIsActive);

-    const classes =
-        `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
-    const indeterminate = (props.indeterminate === true).toString();
+        const classes = `m3 m3-checkbox-label ${
+            isActive === true ? 'visible' : ''
+        }`.trimEnd();
+        const indeterminate = (props.indeterminate === true).toString();

-    useImperativeHandle(ref, () => checkboxRef.current);
+        useImperativeHandle(ref, () => checkboxRef.current);

-    useEffect(() => {
-        setChecked(!checked);
-    }, [checkboxRef.current?.checked]);
+        useEffect(() => {
+            setChecked(!checked);
+        }, [checkboxRef.current?.checked]);

-    return (
-        <label {...events} className={classes}>
-            <CheckBoxLayout
-                {...props}
-                indeterminate={indeterminate}
-                ref={checkboxRef}
-                type={'checkbox'}
-            />
-            <span className={'m3 m3-checkbox-state-layer'} />
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                className={'m3-checkbox-ripple-layer'}
-                ref={ripplesRef}
-            />
-            {props.children}
-        </label>
-    );
-});
+        return (
+            <label {...events} className={classes}>
+                <CheckBoxLayout
+                    {...props}
+                    ref={checkboxRef}
+                    indeterminate={indeterminate}
+                    type={'checkbox'}
+                />
+                <span className={'m3 m3-checkbox-state-layer'} />
+                <RippleArea
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                    central={centralRipple}
+                    callback={setIsActive}
+                />
+                {props.children}
+            </label>
+        );
+    }
+);
--- a/src/primitive-components/divider/divider.tsx
+++ b/src/primitive-components/divider/divider.tsx
@ -1,18 +1,25 @@
-import React, { forwardRef, PropsWithChildren } from 'react';
+import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';

 interface DividerProps extends PropsWithChildren<any> {
    orientation?: 'vertical' | 'horizontal';
    variant?: 'full-width' | 'inset' | 'middle-inset';
 }

-const Divider = forwardRef<HTMLHRElement, DividerProps>(
-    ({ orientation, variant, ...props }, ref) => (
-        <hr
-            {...props}
-            className={`m3 m3-divider ${orientation ?? 'horizontal'} ${variant ?? 'full-width'}`.trimEnd()}
-            ref={ref}
-        />
-    ),
+const Divider = forwardRef(
+    (
+        {orientation, variant, ...props}: DividerProps,
+        ref: ForwardedRef<any>
+    ) => {
+        return (
+            <hr
+                {...props}
+                ref={ref}
+                className={`m3 m3-divider ${orientation ?? 'horizontal'} ${
+                    variant ?? 'full-width'
+                }`.trimEnd()}
+            />
+        );
+    }
 );

-export { Divider };
+export {Divider};
--- a/src/primitive-components/fab/fab.tsx
+++ b/src/primitive-components/fab/fab.tsx
@ -1,10 +1,8 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { Icon } from '../material-you-components';
-import { IRippleProps } from '../ripple/ripple.types';
-import { FABMainProps } from '../button-layout/button.types';
-import { ButtonLayout } from '../button-layout/button-layout';
+import {forwardRef} from 'react';
+import {FABMainProps} from '../button-layout/button.types';
+import {ButtonLayout} from '../button-layout/button-layout';
+import {IRippleProps} from '../ripple/ripple.types';
+import {Icon} from '../material-you-components';

 /**
 * FABs component
@ -18,7 +16,7 @@ const sizes = {
    extended: 24,
 };

-export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
+export const FAB = forwardRef(
    (
        {
            variant,
@ -28,16 +26,17 @@ export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
            size = 'default',
            elevated,
            ...props
-        },
-        ref,
+        }: FABMainProps & IRippleProps,
+        ref
    ) => (
        <ButtonLayout
            {...props}
-            centralRipple={centralRipple}
-            className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
-            disabled={disabled}
            ref={ref}
+            centralRipple={centralRipple}
            variant={variant ? variant : 'surface'}
+            className={`m3-fab m3-${size}-fab ${
+                !(elevated ?? false) && 'without-elevation'
+            }`}
        >
            <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                {icon}
@ -48,5 +47,5 @@ export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
                <></>
            )}
        </ButtonLayout>
-    ),
+    )
 );
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/icon-button/icon-button.tsx
@ -1,10 +1,5 @@
-'use client';
-
-import { Icon } from '../material-you-components';
-import { toggleIconType } from './icon-button.types';
-import { IRippleProps } from '../ripple/ripple.types';
-import { ButtonLayout } from '../button-layout/button-layout';
-import { IconButtonMainProps } from '../button-layout/button.types';
+import {ButtonLayout} from '../button-layout/button-layout';
+import {iconButtonMainProps} from '../button-layout/button.types';
 import {
    forwardRef,
    useCallback,
@ -12,16 +7,15 @@ import {
    useRef,
    useState,
 } from 'react';
+import {IRippleProps} from '../ripple/ripple.types';
+import {Icon} from '../material-you-components';

 /**
 * Icon button-layout component
 ** description
 */

-export const IconButton = forwardRef<
-    HTMLButtonElement,
-    IconButtonMainProps & IRippleProps
->(
+export const IconButton = forwardRef(
    (
        {
            icon,
@ -31,11 +25,11 @@ export const IconButton = forwardRef<
            toggled = false,
            centralRipple,
            ...props
-        },
-        ref,
+        }: iconButtonMainProps & IRippleProps,
+        ref
    ) => {
-        const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
-            state: selected == true ? 'selected' : 'unselected',
+        const [toggleIcon, setToggleIcon] = useState<any>({
+            state: selected === true ? 'selected' : 'unselected',
            icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
        });

@ -50,37 +44,35 @@ export const IconButton = forwardRef<

        const callback = useCallback(() => {
            if (toggled) {
-                if (toggleIcon.state === 'selected') {
+                if (toggleIcon.state === 'selected')
                    toggle('', toggled.unselected ?? 'add_circle');
-                } else {
-                    toggle('selected', toggled.selected ?? 'add_circle');
-                }
-            }
-            if (props.onClick) {
-                props.onClick();
+                else toggle('selected', toggled.selected ?? 'add_circle');
            }
+            if (props.onClick) props.onClick();
        }, [toggleIcon]);

-        useImperativeHandle(ref, () => buttonRef.current);
+        useImperativeHandle(ref, () => buttonRef);

        return (
            <ButtonLayout
                {...props}
-                centralRipple={centralRipple}
-                className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
-                disabled={disabled}
-                onClick={callback}
                ref={buttonRef}
+                onClick={callback}
+                centralRipple={centralRipple}
+                disabled={disabled}
+                className={`m3-icon-button ${toggleIcon.state} ${
+                    toggled ? 'toggled' : ''
+                }`.trimEnd()}
                variant={variant ? variant : 'default'}
            >
                <Icon
-                    fill={toggleIcon.state === 'selected' ? 1 : 0}
-                    iconSize={28}
                    svgSize={40}
+                    iconSize={28}
+                    fill={toggleIcon.state === 'selected' ? 1 : 0}
                >
                    {toggled ? toggleIcon.icon : icon ? icon : undefined}
                </Icon>
            </ButtonLayout>
        );
-    },
+    }
 );
--- a/src/primitive-components/icon-button/icon-button.types.ts
+++ b/src/primitive-components/icon-button/icon-button.types.ts
@ -1,4 +0,0 @@
-export type toggleIconType = {
-    state: string;
-    icon: string;
-};
--- a/src/primitive-components/icon/icon.tsx
+++ b/src/primitive-components/icon/icon.tsx
@ -1,43 +1,49 @@
-import { IconProps } from './icon.types';
-import { bool, number, string } from 'prop-types';
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, {ForwardedRef, forwardRef} from 'react';
+import {IconProps} from './icon.types';
+import {bool, number, string} from 'prop-types';

-const Icon = forwardRef(function Icon(
-    {
-        grade = 0,
-        weight = 500,
-        svgSize = 20,
-        fill = false,
-        iconSize = 20,
-        opticalSize = 24,
-        type = 'outlined',
-        ...props
-    }: IconProps,
-    ref: ForwardedRef<any>,
-) {
-    const fontVariation = {
-        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
-    };
+const Icon = forwardRef(
+    (
+        {
+            grade = 0,
+            weight = 500,
+            svgSize = 20,
+            fill = false,
+            iconSize = 20,
+            opticalSize = 24,
+            type = 'outlined',
+            ...props
+        }: IconProps,
+        ref: ForwardedRef<any>
+    ) => {
+        const fontVariation = {
+            fontVariationSettings: `'FILL' ${
+                fill ? 1 : 0
+            }, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
+        };

-    return (
-        <svg
-            {...props}
-            className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
-            height={svgSize}
-            ref={ref}
-            width={svgSize}
-        >
-            <text
-                className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
-                style={fontVariation}
-                x={'50%'}
-                y={'50%'}
+        return (
+            <svg
+                {...props}
+                ref={ref}
+                className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
+                width={svgSize}
+                height={svgSize}
            >
-                {props.children ?? 'add_circle'}
-            </text>
-        </svg>
-    );
-});
+                <text
+                    className={`m3-${
+                        type[0].toUpperCase() + type.slice(1)
+                    } m3-size-${iconSize}px`}
+                    style={fontVariation}
+                    x={'50%'}
+                    y={'50%'}
+                >
+                    {props.children ?? 'add_circle'}
+                </text>
+            </svg>
+        );
+    }
+);

 Icon.propTypes = {
    fill: bool,
@ -50,4 +56,4 @@ Icon.propTypes = {
    opticalSize: number,
 };

-export { Icon };
+export {Icon};
--- a/src/primitive-components/icon/icon.types.ts
+++ b/src/primitive-components/icon/icon.types.ts
@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import {PropsWithChildren} from 'react';

 export interface IconProps extends PropsWithChildren<any> {
    fill?: boolean;
--- a/src/primitive-components/material-you-components.tsx
+++ b/src/primitive-components/material-you-components.tsx
@ -1,13 +1,13 @@
-export { FAB } from './fab/fab';
-export { Icon } from './icon/icon';
-export { Radio } from './radio/radio';
-export { Badge } from './badge/badge';
-export { Switch } from './switch/switch';
-export { Button } from './button/button';
-export { Divider } from './divider/divider';
-export { Checkbox } from './checkbox/checkbox';
-export { RippleArea } from './ripple/ripple-area';
-export { Ripples, Ripple } from './ripple/ripple';
-export { TextField } from './text-field/text-field';
-export { IconButton } from './icon-button/icon-button';
-export { ButtonLayout } from './button-layout/button-layout';
+export {FAB} from './fab/fab';
+export {Icon} from './icon/icon';
+export {Radio} from './radio/radio';
+export {Badge} from './badge/badge';
+export {Switch} from './switch/switch';
+export {Button} from './button/button';
+export {Divider} from './divider/divider';
+export {Checkbox} from './checkbox/checkbox';
+export {RippleArea} from './ripple/ripple-area';
+export {Ripples, Ripple} from './ripple/ripple';
+export {TextField} from './text-field/text-field';
+export {IconButton} from './icon-button/icon-button';
+export {ButtonLayout} from './button-layout/button-layout';
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@ -1,38 +1,36 @@
-'use client';
-
-import { RippleArea } from '../ripple/ripple-area';
-import { IRippleProps } from '../ripple/ripple.types';
+import {RippleArea} from '../ripple/ripple-area';
+import {forwardRef, useRef, useState} from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
+import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
+import {IRippleProps} from '../ripple/ripple.types';

 /**
 * Radio component
 ** description
 */

-export const Radio = forwardRef<
-    HTMLInputElement,
-    PropsWithChildren<HTMLElement> & IRippleProps
->(({ centralRipple, ...props }, ref) => {
-    const [isActive, setIsActive] = useState<boolean>(false),
-        ripplesRef = useRef(null),
-        events = useRippleEffect(ripplesRef, setIsActive);
+export const Radio = forwardRef(
+    ({centralRipple, ...props}: any & IRippleProps, ref) => {
+        const [isActive, setIsActive] = useState<boolean>(false),
+            ripplesRef = useRef(null),
+            events = useRippleEffect(ripplesRef, setIsActive);

-    const classes =
-        `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
+        const classes = `m3 m3-radio-label ${
+            isActive === true ? 'visible' : ''
+        }`.trimEnd();

-    return (
-        <label {...events} className={classes}>
-            <CheckBoxLayout {...props} ref={ref} type={'radio'} />
-            <span className={'m3 m3-radio-state-layer'} />
-            <RippleArea
-                callback={setIsActive}
-                central={centralRipple}
-                className={'m3-checkbox-ripple-layer'}
-                ref={ripplesRef}
-            />
-            {props.children}
-        </label>
-    );
-});
+        return (
+            <label {...events} className={classes}>
+                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                <span className={'m3 m3-radio-state-layer'} />
+                <RippleArea
+                    className={'m3-checkbox-ripple-layer'}
+                    ref={ripplesRef}
+                    central={centralRipple}
+                    callback={setIsActive}
+                />
+                {props.children}
+            </label>
+        );
+    }
+);
--- a/src/primitive-components/ripple/hooks/useRippleEffect.ts
+++ b/src/primitive-components/ripple/hooks/useRippleEffect.ts
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';

 interface RippleEventHandlers {
    onBlur: React.FocusEventHandler;
@ -12,20 +12,32 @@ interface RippleEventHandlers {
    onTouchStart: React.TouchEventHandler;
 }

-const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
+export type EventHandlerType<T> =
+    | React.FocusEvent<T>
+    | React.DragEvent<T>
+    | React.MouseEvent<T>
+    | React.TouchEvent<T>;
+
+interface RefImperativeType {
+    current: {
+        start: (event: EventHandlerType<Element>, callback: () => void) => void;
+        stop: (event: EventHandlerType<Element>, callback: () => void) => void;
+    };
+}
+
+const UseRippleEffect = (
+    ref: RefImperativeType,
+    callback: () => void
+): undefined | RippleEventHandlers => {
    const [mounted, setMounted] = useState<boolean>(false);

    useEffect(() => {
-        if (!mounted) {
-            setMounted(true);
-        }
+        if (!mounted) setMounted(true);
    });

-    if (!mounted) {
-        return;
-    }
+    if (!mounted) return;

-    const { start, stop } = ref.current;
+    const {start, stop} = ref.current;

    return {
        onBlur: event => stop(event, callback),
--- a/src/primitive-components/ripple/ripple-area.tsx
+++ b/src/primitive-components/ripple/ripple-area.tsx
@ -1,130 +1,133 @@
 'use client';

 import React, {
-    forwardRef,
-    useCallback,
    useId,
-    useImperativeHandle,
    useRef,
    useState,
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
 } from 'react';
-import { Ripple } from './ripple';
-import { Ripples } from './ripple';
-import { RippleAreaProps } from './ripple.types';
+import {Ripple} from './ripple';
+import {Ripples} from './ripple';
+import {RippleAreaProps} from './ripple.types';

-const TIMEOUT: number = 550;
+const TIMEOUT = 550;
 const rippleAreaContext = React.createContext(false);

-const RippleArea = forwardRef(function RippleArea(
-    { central = false, callback, ...props }: RippleAreaProps,
-    ref,
-) {
-    const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
-        rippleDomain = useRef<any>(null),
-        clicked = useRef<boolean>(false),
-        uniqueKey = useRef<number>(0),
-        uniqueId = useId();
+const RippleArea = forwardRef(
+    ({central = false, callback, ...props}: RippleAreaProps, ref) => {
+        const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
+            rippleDomain = useRef<any>(null),
+            clicked = useRef<boolean>(false),
+            uniqueKey = useRef<number>(0),
+            uniqueId = useId();

-    const classes = props.className
-        ? `m3 m3-ripple-domain ${props.className}`.trimEnd()
-        : 'm3 m3-ripple-domain';
+        const classes = props.className
+            ? `m3 m3-ripple-domain ${props.className}`.trimEnd()
+            : 'm3 m3-ripple-domain';

-    const start = useCallback(
-        (event: any, cb: (state: boolean) => void): void => {
-            clicked.current = true;
-            cb(clicked.current);
+        const start = useCallback(
+            (event: any, cb: (state: boolean) => void): void => {
+                clicked.current = true;
+                cb(clicked.current);

-            const rippleDomainChar = rippleDomain.current
-                ? rippleDomain.current.getBoundingClientRect()
-                : {
-                      width: 0,
-                      height: 0,
-                      left: 0,
-                      top: 0,
-                  };
+                const rippleDomainChar = rippleDomain.current
+                    ? rippleDomain.current.getBoundingClientRect()
+                    : {
+                          width: 0,
+                          height: 0,
+                          left: 0,
+                          top: 0,
+                      };

-            const rippleX: number = !central
-                    ? event.clientX - rippleDomainChar.left
-                    : rippleDomainChar.width / 2,
-                rippleY: number = !central
-                    ? event.clientY - rippleDomainChar.top
-                    : rippleDomainChar.height / 2,
-                rippleSizeX: number =
-                    Math.max(
-                        Math.abs(rippleDomainChar.width - rippleX),
-                        rippleX,
-                    ) *
-                        2 +
-                    2,
-                rippleSizeY: number =
-                    Math.max(
-                        Math.abs(rippleDomainChar.height - rippleY),
-                        rippleY,
-                    ) *
-                        2 +
-                    2,
-                rippleS: number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
+                const rippleX: number = !central
+                        ? event.clientX - rippleDomainChar.left
+                        : rippleDomainChar.width / 2,
+                    rippleY: number = !central
+                        ? event.clientY - rippleDomainChar.top
+                        : rippleDomainChar.height / 2,
+                    rippleSizeX: number =
+                        Math.max(
+                            Math.abs(rippleDomainChar.width - rippleX),
+                            rippleX
+                        ) *
+                            2 +
+                        2,
+                    rippleSizeY: number =
+                        Math.max(
+                            Math.abs(rippleDomainChar.height - rippleY),
+                            rippleY
+                        ) *
+                            2 +
+                        2,
+                    rippleS: number =
+                        (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;

-            setRipples((prevRipples: Array<JSX.Element>) => {
-                if (prevRipples.length === 0) {
-                    return [
-                        <Ripple
-                            key={uniqueKey.current}
-                            lifetime={TIMEOUT}
-                            rippleS={rippleS}
-                            rippleX={rippleX}
-                            rippleY={rippleY}
-                        />,
-                    ];
-                }
-                const old = [...prevRipples];
-                old.push(
-                    <Ripple
-                        key={uniqueKey.current}
-                        lifetime={TIMEOUT}
-                        rippleS={rippleS}
-                        rippleX={rippleX}
-                        rippleY={rippleY}
-                    />,
-                );
-                return old;
-            });
+                setRipples((prevRipples: Array<JSX.Element>) => {
+                    if (prevRipples.length === 0) {
+                        return [
+                            <Ripple
+                                rippleX={rippleX}
+                                rippleY={rippleY}
+                                rippleS={rippleS}
+                                key={uniqueKey.current}
+                                lifetime={TIMEOUT}
+                            />,
+                        ];
+                    } else {
+                        const old = [...prevRipples];
+                        old.push(
+                            <Ripple
+                                rippleX={rippleX}
+                                rippleY={rippleY}
+                                rippleS={rippleS}
+                                key={uniqueKey.current}
+                                lifetime={TIMEOUT}
+                            />
+                        );
+                        return old;
+                    }
+                });

-            uniqueKey.current += 1;
-        },
-        [],
-    );
+                uniqueKey.current += 1;
+            },
+            []
+        );

-    const stop = useCallback((_event: any, cb: (state: boolean) => void) => {
-        clicked.current = false;
-        cb(clicked.current);
+        const stop = useCallback(
+            (_event: any, cb: (state: boolean) => void) => {
+                clicked.current = false;
+                cb(clicked.current);

-        setRipples((prevRipples: Array<JSX.Element>) => {
-            if (prevRipples.length > 0) {
-                const old = [...prevRipples];
-                old.shift();
-                return old;
-            }
-            return prevRipples;
-        });
-    }, []);
+                setRipples((prevRipples: Array<JSX.Element>) => {
+                    if (prevRipples.length > 0) {
+                        const old = [...prevRipples];
+                        old.shift();
+                        return old;
+                    }
+                    return prevRipples;
+                });
+            },
+            []
+        );

-    useImperativeHandle(
-        ref,
-        () => ({
-            start,
-            stop,
-        }),
-        [start, stop],
-    );
+        useImperativeHandle(
+            ref,
+            () => ({
+                start,
+                stop,
+            }),
+            [start, stop]
+        );
+        return (
+            <span className={classes} id={uniqueId} ref={rippleDomain}>
+                <rippleAreaContext.Provider value={clicked.current}>
+                    <Ripples>{ripples}</Ripples>
+                </rippleAreaContext.Provider>
+            </span>
+        );
+    }
+);

-    return (
-        <span className={classes} id={uniqueId} ref={rippleDomain}>
-            <rippleAreaContext.Provider value={clicked.current}>
-                <Ripples>{ripples}</Ripples>
-            </rippleAreaContext.Provider>
-        </span>
-    );
-});
-
-export { rippleAreaContext, RippleArea };
+export {rippleAreaContext, RippleArea};
--- a/src/primitive-components/ripple/ripple.tsx
+++ b/src/primitive-components/ripple/ripple.tsx
@ -1,25 +1,22 @@
 'use client';

 import isEmpty from './utils/utils';
-import { rippleProps } from './ripple.types';
-import { rippleAreaContext } from './ripple-area';
+import {rippleProps} from './ripple.types';
+import {rippleAreaContext} from './ripple-area';
 import RippleEffectBuild from './utils/ripple-effect-builder';
 import React, {
-    ForwardedRef,
-    forwardRef,
-    JSX,
-    useCallback,
-    useContext,
-    useEffect,
    useRef,
    useState,
+    useEffect,
+    forwardRef,
+    useContext,
+    useCallback,
+    ForwardedRef,
    useTransition,
+    JSX,
 } from 'react';

-const Ripples = forwardRef(function Ripples(
-    props: any,
-    ref: ForwardedRef<any>,
-) {
+const Ripples = forwardRef((props: any, ref: ForwardedRef<any>) => {
    const [ripples, setRipples] = useState({});
    const firstRender = useRef<boolean>(true);
    const [pending, startTransition] = useTransition();
@ -30,7 +27,7 @@ const Ripples = forwardRef(function Ripples(
        }

        setRipples(state => {
-            const children = { ...state };
+            const children = {...state};
            delete children[child.key];
            return children;
        });
@ -44,7 +41,7 @@ const Ripples = forwardRef(function Ripples(
                    firstRender.current = false;
                } else {
                    setRipples(
-                        RippleEffectBuild(props.children, LifetimeEnd, ripples),
+                        RippleEffectBuild(props.children, LifetimeEnd, ripples)
                    );
                }
            });
@ -54,11 +51,8 @@ const Ripples = forwardRef(function Ripples(
    return <>{Object.values(ripples)}</>;
 });

-const Ripple = forwardRef(function Ripple(
-    props: rippleProps,
-    ref: ForwardedRef<any>,
-) {
-    const { rippleX, rippleY, rippleS, endLifetime, lifetime } = props;
+const Ripple = forwardRef((props: rippleProps, ref: ForwardedRef<any>) => {
+    const {rippleX, rippleY, rippleS, endLifetime, lifetime} = props;

    const clicked = useContext<boolean>(rippleAreaContext);
    const [classes, setClasses] = useState<string>('m3 ripple visible');
@ -83,4 +77,4 @@ const Ripple = forwardRef(function Ripple(
    );
 });

-export { Ripple, Ripples };
+export {Ripple, Ripples};
--- a/src/primitive-components/ripple/ripple.types.ts
+++ b/src/primitive-components/ripple/ripple.types.ts
@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from 'react';
+import {Dispatch, SetStateAction, PropsWithChildren} from 'react';

-export interface IRippleProps extends PropsWithChildren<any> {
+export interface IRippleProps {
    centralRipple?: boolean;
 }

@ -13,9 +13,7 @@ export type rippleProps = {
    rippleX: number;
    rippleY: number;
    rippleS: number;
-    endLifetime?: () => void;
+    endLifetime?: any;
    lifetime: number;
    key?: number;
 };
-
-import { PropsWithChildren } from 'react';
--- a/src/primitive-components/ripple/utils/array-convert-to-obj.ts
+++ b/src/primitive-components/ripple/utils/array-convert-to-obj.ts
@ -1,15 +1,15 @@
-import { cloneElement, ReactElement } from 'react';
+import {cloneElement, ReactElement} from 'react';

 export default function ArrayConvertToObj(
    obj: Object,
    nextChildren: ReactElement[],
-    callback: (child: any) => void,
+    callback: (child: any) => void
 ): void {
    Object.values(nextChildren).forEach(
        (child: JSX.Element) =>
            (obj[child.key] = cloneElement(child, {
                ...child.props,
                endLifetime: callback.bind(null, child),
-            })),
+            }))
    );
 }
--- a/src/primitive-components/ripple/utils/ripple-effect-builder.ts
+++ b/src/primitive-components/ripple/utils/ripple-effect-builder.ts
@ -1,26 +1,27 @@
-import ArrayConvertToObj from './array-convert-to-obj';
-import { cloneElement, ReactElement } from 'react';
 import isEmpty from './utils';
+import {cloneElement, ReactElement} from 'react';
+import ArrayConvertToObj from './array-convert-to-obj';

 export default function RippleEffectBuild(
    nextRipples: ReactElement[],
    callback: (child: any) => void,
-    prevRipples?: any | null,
+    prevRipples?: any | null
 ) {
+    const next: object = {};
    const empty: boolean = isEmpty(prevRipples);
    const preparedRipples: object = empty ? {} : prevRipples;

+    console.log(preparedRipples);
+
    switch (empty) {
        case true:
            ArrayConvertToObj(preparedRipples, nextRipples, callback);
            break;

        case false:
-            // eslint-disable-next-line no-case-declarations
-            const next: object = {};
            ArrayConvertToObj(next, nextRipples, callback);
            for (const rippleKey of Object.keys(next)) {
-                if (preparedRipples[rippleKey] == undefined) {
+                if (preparedRipples[rippleKey] === undefined) {
                    preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
                        ...next[rippleKey].props,
                        endLifetime: callback.bind(null, next[rippleKey]),
@ -29,6 +30,5 @@ export default function RippleEffectBuild(
            }
            break;
    }
-
    return preparedRipples;
 }
--- a/src/primitive-components/ripple/utils/utils.ts
+++ b/src/primitive-components/ripple/utils/utils.ts
@ -1,6 +1,4 @@
 export default function isEmpty(obj: Object): boolean {
-    for (const _i in obj) {
-        return false;
-    }
+    for (const _i in obj) return false;
    return true;
 }
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@ -1,22 +1,24 @@
-'use client';
-
-import React, { forwardRef } from 'react';
-import { SwitchMainProps } from './switch.types';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import React, {ForwardedRef, forwardRef} from 'react';
+import {switchMainProps} from './switch.types';
+import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';

 /**
 * Switch component
 ** description
 */

-export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
-    ({ icon, disabled, selected = false, ...props }, ref) => (
-        <div className={'m3 m3-switch-exp'} ref={ref}>
+export const Switch = forwardRef(
+    (
+        {icon, disabled, selected = false, ...props}: switchMainProps,
+        ref: ForwardedRef<HTMLInputElement>
+    ) => (
+        <div className={'m3 m3-switch-exp'}>
            <CheckBoxLayout
                {...props}
-                className={`m3 ${props.className ?? ''}`.trimEnd()}
-                disabled={disabled}
+                ref={ref}
                type={'checkbox'}
+                disabled={disabled}
+                className={`m3 ${props.className ?? ''}`.trimEnd()}
            />
            <svg>
                <rect className={'m3 m3-switch-track'} />
@ -32,5 +34,5 @@ export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
                </g>
            </svg>
        </div>
-    ),
+    )
 );
--- a/src/primitive-components/switch/switch.types.ts
+++ b/src/primitive-components/switch/switch.types.ts
@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import {PropsWithChildren} from 'react';

-export interface SwitchMainProps extends PropsWithChildren<any> {
+export interface switchMainProps extends PropsWithChildren<any> {
    disabled?: boolean;
    icon?: boolean;
    selected?: boolean;
--- a/src/primitive-components/text-field/text-field.tsx
+++ b/src/primitive-components/text-field/text-field.tsx
@ -1,96 +1,82 @@
 'use client';

-import React, { forwardRef, useState } from 'react';
-import { bool, string } from 'prop-types';
-import { type TextFieldInterface } from './text-field.types';
+import React, {useState} from 'react';
+import {bool, string} from 'prop-types';
+import {type TextFieldInterface} from './text-field.types';

-export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
-    (
-        {
-            variant = 'filled',
-            withAfterIcon,
-            withBeforeIcon,
-            supportingText,
-            ...props
-        },
-        ref,
-    ) => {
-        const [raised, setRaised] = useState<boolean>(
-            props.placeholder ?? false,
-        );
+export function TextField({
+    variant = 'filled',
+    withAfterIcon,
+    withBeforeIcon,
+    supportingText,
+    ...props
+}: TextFieldInterface) {
+    const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);

-        const callback = (e: any): void => {
-            if (
-                e.type === 'blur' &&
-                e.target.value.length === 0 &&
-                !props.placeholder
-            ) {
-                setRaised(false);
-            } else if (e.type === 'focus') {
-                setRaised(true);
-            }
-        };
+    const callback = (e: any) => {
+        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'
-                : withBeforeIcon
-                  ? 'with-before-icon'
-                  : withAfterIcon
-                    ? 'with-after-icon'
-                    : '';
+    const iconStyles =
+        withBeforeIcon && withAfterIcon
+            ? 'with-before-icon with-after-icon'
+            : withBeforeIcon
+            ? 'with-before-icon'
+            : withAfterIcon
+            ? 'with-after-icon'
+            : '';

-        return (
-            <span>
-                <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
-                    {variant === 'outlined' && (
-                        <fieldset>
-                            <legend className={raised && 'raised'}>
-                                <span>Label</span>
-                            </legend>
-                        </fieldset>
-                    )}
-                    {withBeforeIcon && (
-                        <span className={'m3-icon icon-before'}>
-                            {withBeforeIcon && 'search'}
-                        </span>
-                    )}
-                    <input
-                        ref={ref}
-                        {...props}
-                        className={`${props.className ?? ''} ${iconStyles}`.trim()}
-                        onBlur={event => {
-                            callback(event);
-                            if (props.onBlur) {
-                                props.onBlur(event);
-                            }
-                        }}
-                        onFocus={event => {
-                            callback(event);
-                            if (props.onFocus) {
-                                props.onFocus(event);
-                            }
-                        }}
-                    />
-                    <label className={raised ? 'raised' : ''}>
-                        {props.children ?? 'Label'}
-                    </label>
-                    <span className={'m3-text-field-state-layer'} />
-                    {withAfterIcon && (
-                        <span className={'m3-icon'}>
-                            {withAfterIcon && 'cancel'}
-                        </span>
-                    )}
-                </div>
-                {supportingText !== '' && (
-                    <span className={'m3-text-field-supporting-text'}>
-                        {supportingText}
+    return (
+        <span>
+            <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
+                {variant === 'outlined' && (
+                    <fieldset>
+                        <legend className={raised && 'raised'}>
+                            <span>Label</span>
+                        </legend>
+                    </fieldset>
+                )}
+                {withBeforeIcon && (
+                    <span className={'m3-icon icon-before'}>
+                        {withBeforeIcon && 'search'}
                    </span>
                )}
-            </span>
-        );
-    },
-);
+                <input
+                    {...props}
+                    className={`${props.className ?? ''} ${iconStyles}`.trim()}
+                    onFocus={event => {
+                        callback(event);
+                        if (props.onFocus) props.onFocus(event);
+                    }}
+                    onBlur={event => {
+                        callback(event);
+                        if (props.onBlur) props.onBlur(event);
+                    }}
+                />
+                <label className={raised ? 'raised' : ''}>
+                    {props.children ?? 'Label'}
+                </label>
+                <span className={'m3-text-field-state-layer'} />
+                {withAfterIcon && (
+                    <span className={'m3-icon'}>
+                        {withAfterIcon && 'cancel'}
+                    </span>
+                )}
+            </div>
+            {supportingText && (
+                <span className={'m3-text-field-supporting-text'}>
+                    {supportingText}
+                </span>
+            )}
+        </span>
+    );
+}

 TextField.propTypes = {
    children: string,
--- a/src/primitive-components/text-field/text-field.types.ts
+++ b/src/primitive-components/text-field/text-field.types.ts
@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import {PropsWithChildren} from 'react';

 export interface TextFieldInterface extends PropsWithChildren<any> {
    variant: 'filled' | 'outlined';
--- a/src/styles/button.css
+++ b/src/styles/button.css
@ -1,8 +1,5 @@
 button:not(.m3-fab, .m3-icon-button) {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
@ -25,8 +22,7 @@ button:not(.m3-fab, .m3-icon-button).m3 {
 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 > svg.m3-svg-icon {
+button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
  color: var(--md-sys-color-on-primary);
  fill: var(--md-sys-color-on-primary);
 }
@ -48,9 +44,7 @@ button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
  fill: 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);
+  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);
  color: var(--md-sys-color-primary);
 }
@ -65,10 +59,7 @@ button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
  fill: 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;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  content: "";
  top: 0;
  bottom: 0;
@ -77,130 +68,65 @@ button:not(.m3-fab, .m3-icon-button)::before {
  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).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 {
+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
-  );
+  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;
+  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
-  );
+  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
-  );
+  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: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
-  );
+  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);
+  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);
+  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
-  );
+  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: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
-  );
+  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
-  ) {
+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
-  );
+  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 {
-  outline: 1px solid
-    color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+  outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
 }

 /*# sourceMappingURL=button.css.map */
--- a/src/styles/checkbox.css
+++ b/src/styles/checkbox.css
@ -22,7 +22,7 @@ span.m3.m3-checkbox-ripple-layer {
  height: 2.5rem;
 }

-input[type="checkbox"].m3.m3-checkbox {
+input[type=checkbox].m3.m3-checkbox {
  appearance: none;
  display: flex;
  align-items: center;
@ -37,154 +37,67 @@ input[type="checkbox"].m3.m3-checkbox {
  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-input[type="checkbox"].m3.m3-checkbox:is(
-    :user-invalid:is(:checked, :indeterminate),
-    .m3.m3-error:is(:checked, :indeterminate)
-  ) {
+input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
  outline-color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-error);
 }
-input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
+input[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
  outline-color: var(--md-sys-color-error);
 }
-input[type="checkbox"].m3.m3-checkbox:is(
-    :checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      ),
-    :indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
-        .m3.m3-error,
-        :disabled
-      )
-  ) {
+input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
  outline-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
 }
-input[type="checkbox"].m3.m3-checkbox:disabled:is(
-    :hover,
-    input[type="checkbox"].m3.m3-checkbox:disabled
-  ) {
+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
-  ) {
+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 {
+input[type=checkbox].m3.m3-checkbox::after {
  line-height: 1.125rem;
  font-family: Material-Symbols-Outlined-Regular, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--md-sys-color-on-primary);
 }
-input[type="checkbox"].m3.m3-checkbox:checked::after {
+input[type=checkbox].m3.m3-checkbox:checked::after {
  content: "done";
 }
-input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
+input[type=checkbox].m3.m3-checkbox:indeterminate::after {
  content: "check_indeterminate_small";
 }
-input[type="checkbox"].m3.m3-checkbox:hover {
+input[type=checkbox].m3.m3-checkbox:hover {
  outline-color: 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(: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 {
+  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(: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: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 {
+  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):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):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 {
+  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
-  );
+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 */
--- a/src/styles/divider.css
+++ b/src/styles/divider.css
@ -9,8 +9,7 @@ hr.m3.m3-divider {
 hr.m3.m3-divider.vertical {
  writing-mode: tb-rl;
 }
-hr.m3.m3-divider.vertical,
-hr.m3.m3-divider.vertical.full-width {
+hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
  height: 100%;
 }
 hr.m3.m3-divider.vertical.inset {
@ -20,8 +19,7 @@ hr.m3.m3-divider.vertical.inset {
 hr.m3.m3-divider.vertical.middle-inset {
  height: calc(100% - 32px);
 }
-hr.m3.m3-divider.horizontal,
-hr.m3.m3-divider.horizontal.full-width {
+hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
  width: 100%;
 }
 hr.m3.m3-divider.horizontal.inset {
--- a/src/styles/elevation.css
+++ b/src/styles/elevation.css
@ -1,31 +1,21 @@
 .elevation-1 {
-  box-shadow:
-    0 1px 3px 1px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }

 .elevation-2 {
-  box-shadow:
-    0 2px 6px 2px rgba(0, 0, 0, 0.15),
-    0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }

 .elevation-3 {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }

 .elevation-4 {
-  box-shadow:
-    0 2px 3px 0 rgba(0, 0, 0, 0.3),
-    0 6px 10px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
 }

 .elevation-5 {
-  box-shadow:
-    0 4px 4px 0 rgba(0, 0, 0, 0.3),
-    0 8px 12px 6px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
 }

 /*# sourceMappingURL=elevation.css.map */
--- a/src/styles/fabs.css
+++ b/src/styles/fabs.css
@ -1,8 +1,5 @@
 button.m3.m3-fab {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  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;
@ -19,10 +16,7 @@ button.m3.m3-fab.m3 {
  gap: 12px;
 }
 button.m3.m3-fab::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  content: "";
  top: 0;
  bottom: 0;
@ -36,9 +30,7 @@ button.m3.m3-fab.surface {
  color: var(--md-sys-color-primary);
 }
 button.m3.m3-fab.surface:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.surface > svg.m3-svg-icon {
  fill: var(--md-sys-color-primary);
@ -51,57 +43,39 @@ button.m3.m3-fab.primary {
  color: var(--md-sys-color-on-primary-container);
 }
 button.m3.m3-fab.primary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.primary > svg.m3-svg-icon {
  fill: 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
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
 }
 button.m3.m3-fab.secondary {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
 }
 button.m3.m3-fab.secondary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.secondary > svg.m3-svg-icon {
  fill: 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
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
 button.m3.m3-fab.tertiary {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
 }
 button.m3.m3-fab.tertiary:not(.without-elevation) {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.3),
-    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 button.m3.m3-fab.tertiary > svg.m3-svg-icon {
  fill: 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
-  );
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }
 button.m3.m3-fab.m3-small-fab {
  width: 40px;
@ -131,81 +105,35 @@ button.m3.m3-fab.m3-extended-fab {
  padding: 19px;
  font-size: 24px;
 }
-button.m3.m3-fab:not(.without-elevation):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:not(.without-elevation):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:not(.without-elevation):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:not(.without-elevation):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
-  );
+  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
-  );
+  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
-  );
+  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
-  );
+  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
-  );
+  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
-  );
+  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
-  );
+  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
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
 }

 /*# sourceMappingURL=fabs.css.map */
--- a/src/styles/font/README.md
+++ b/src/styles/font/README.md
@ -6,32 +6,23 @@ The recommended way to use the Material Icons font is by linking to the web font

 ```html
 <!-- https://material.io/resources/icons/?style=baseline -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
+      rel="stylesheet">

 <!-- https://material.io/resources/icons/?style=outline -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
+      rel="stylesheet">

 <!-- https://material.io/resources/icons/?style=round -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
+      rel="stylesheet">

 <!-- https://material.io/resources/icons/?style=sharp -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
+      rel="stylesheet">

 <!-- https://material.io/resources/icons/?style=twotone -->
-<link
-  href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
+      rel="stylesheet">
 ```
+
--- a/src/styles/fonts.css
+++ b/src/styles/fonts.css
@ -1,20 +1,17 @@
@font-face {
  font-family: Material-Symbols-Rounded-Regular;
  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
+  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
@font-face {
  font-family: Material-Symbols-Outlined-Regular;
  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
-  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
+  src: url("./font/MaterialSymbolsOutlined[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;
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
--- a/src/styles/icon-button.css
+++ b/src/styles/icon-button.css
@ -1,8 +1,5 @@
 button.m3.m3-icon-button {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  contain: content;
  border-radius: 50%;
  position: relative;
@ -16,10 +13,7 @@ button.m3.m3-icon-button {
  padding: 0;
 }
 button.m3.m3-icon-button::before {
-  transition:
-    background-color,
-    box-shadow,
-    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  content: "";
  width: 100%;
  height: 100%;
@ -28,24 +22,14 @@ button.m3.m3-icon-button::before {
 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;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
 }
 button.m3.m3-icon-button.default {
  fill: 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 {
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
+button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
+  fill: 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 {
@ -67,18 +51,13 @@ button.m3.m3-icon-button.tonal.toggled {
  fill: 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 {
+button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
  fill: 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 {
  fill: 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
-  );
+  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);
@ -86,183 +65,70 @@ button.m3.m3-icon-button.outlined {
  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);
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-on-surface-variant) 38%,
-    transparent
-  );
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
+  fill: 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);
+  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
  fill: 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
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 button.m3.m3-icon-button.outlined.selected.toggled {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: var(--md-sys-color-inverse-surface);
  fill: 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) > .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.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) > .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(.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: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) > .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.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
-  );
+  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::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
-  );
+  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::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
-  );
+  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):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::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
-  );
+  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::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
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
 }

 /*# sourceMappingURL=icon-button.css.map */
--- a/src/styles/mixins/m3-mixins.css
+++ b/src/styles/mixins/m3-mixins.css
@ -1 +1,3 @@
+
+
 /*# sourceMappingURL=m3-mixins.css.map */
--- a/src/styles/radio.css
+++ b/src/styles/radio.css
@ -13,7 +13,7 @@ label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
  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;
@ -26,90 +26,44 @@ input[type="radio"].m3.m3-radio {
  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 {
+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:disabled {
+  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-input[type="radio"].m3.m3-radio:checked {
+input[type=radio].m3.m3-radio:checked {
  border: 2px solid var(--md-sys-color-primary);
 }
-input[type="radio"].m3.m3-radio:checked::after {
+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 {
+  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: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):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 {
+  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):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):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 {
+  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
-  );
+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 */
--- a/src/styles/ripple.css
+++ b/src/styles/ripple.css
@ -18,11 +18,7 @@
  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);
+  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .m3.ripple.visible {
  opacity: 1 !important;
--- a/src/styles/swtich.css
+++ b/src/styles/swtich.css
@ -21,8 +21,7 @@ div.m3.m3-switch-exp > svg > g > text {
  font-family: Material-Symbols-Outlined-Regular;
  font-size: 20px;
 }
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
-div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cy: 50%;
  cx: 16px;
@ -54,136 +53,72 @@ div.m3.m3-switch-exp > input.m3 {
 div.m3.m3-switch-exp > input.m3:disabled {
  cursor: not-allowed;
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:checked, :disabled)
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-outline);
 }
 div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
  transform: translate(50%, 81%);
 }
-div.m3.m3-switch-exp
-  > input.m3:checked:not(:disabled)
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:disabled)
-  + svg
-  > g
-  > text.m3.m3-icon-unchecked {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
  fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:disabled)
-  + svg
-  > g
-  > text.m3.m3-icon-checked {
+div.m3.m3-switch-exp > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
  fill: var(--md-sys-color-on-primary-container);
 }
-div.m3.m3-switch-exp
-  > input.m3:checked:disabled
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-surface);
 }
-div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler,
-div.m3.m3-switch-exp
-  > input.m3
-  + svg:has(text.m3.m3-icon-unchecked)
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch-exp > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
  r: 12px;
 }
 div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
  opacity: 0;
 }
-div.m3.m3-switch-exp
-  > input.m3:checked
-  + svg
-  > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
  cx: calc(100% - 16px);
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:checked)
-  + svg
-  > g
-  > text.m3.m3-icon-checked {
+div.m3.m3-switch-exp > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
  opacity: 0;
 }
-div.m3.m3-switch-exp
-  > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:checked,
-    div.m3.m3-switch-exp > input.m3
-  ):not(:disabled):active
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:checked, div.m3.m3-switch-exp > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
  r: 14px;
 }
-div.m3.m3-switch-exp
-  > input.m3:not(:checked):disabled
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 38%;
 }
-div.m3.m3-switch-exp
-  > input.m3:hover:not(:disabled):checked
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-primary-container);
 }
-div.m3.m3-switch-exp
-  > input.m3:hover:not(:disabled):checked
-  + svg
-  > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 8%;
 }
-div.m3.m3-switch-exp
-  > input.m3:hover:not(:disabled):not(:checked)
-  + svg
-  > circle.m3.m3-switch-handler {
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-switch-exp
-  > input.m3:hover:not(:disabled):not(:checked)
-  + svg
-  > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch-exp > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 8%;
 }
-div.m3.m3-switch-exp
-  > input.m3:active:not(:disabled):checked
-  + svg
-  > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 12%;
 }
-div.m3.m3-switch-exp
-  > input.m3:active:not(:disabled):not(:checked)
-  + svg
-  > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch-exp > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 12%;
 }
-div.m3.m3-switch-exp
-  > input.m3:is(:checked, :checked:disabled)
-  + svg
-  > rect.m3.m3-switch-track {
+div.m3.m3-switch-exp > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
  rx: 16px;
  width: 52px;
  height: 32px;
  stroke-width: 0;
 }
-div.m3.m3-switch-exp
-  > input.m3:is(
-    div.m3.m3-switch-exp > input.m3:not(:checked),
-    div.m3.m3-switch-exp > input.m3:not(:checked):disabled
-  )
-  + svg
-  > rect.m3.m3-switch-track {
+div.m3.m3-switch-exp > input.m3:is(div.m3.m3-switch-exp > input.m3:not(:checked), div.m3.m3-switch-exp > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
  x: 1px;
  y: 1px;
 }
@ -196,28 +131,17 @@ div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
  fill: var(--md-sys-color-primary);
 }
 div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-surface-container-highest) 38%,
-    transparent
-  );
+  fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
 }
 div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-  fill: color-mix(
-    in srgb,
-    var(--md-sys-color-surface-variant) 12%,
-    transparent
-  );
+  fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
 }
 div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
  transform: translateX(38.5%);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-div.m3.m3-switch-exp
-  > input.m3:checked:disabled
-  + svg
-  > rect.m3.m3-switch-track {
+div.m3.m3-switch-exp > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
--- a/src/styles/text-field.css
+++ b/src/styles/text-field.css
@ -9,9 +9,7 @@ div.m3.m3-text-field {
 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 {
+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);
 }
@ -54,8 +52,7 @@ div.m3.m3-text-field > span.m3-text-field-state-layer {
  pointer-events: none;
  position: absolute;
 }
-div.m3.m3-text-field > input,
-div.m3.m3-text-field > label {
+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 {
@ -65,9 +62,7 @@ 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 {
+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 {
@ -111,10 +106,7 @@ div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
 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 {
+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 {
@ -124,15 +116,9 @@ div.m3.m3-text-field.filled > input:focus-visible {
 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 {
+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
-  );
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
 div.m3.m3-text-field.outlined > fieldset {
  margin: 0;
@ -184,22 +170,14 @@ div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
 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 {
+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 {
+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;
@ -209,8 +187,7 @@ div.m3.m3-text-field.outlined:not(
 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 > * {
+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);
 }
@ -220,30 +197,16 @@ div.m3.m3-text-field.outlined > label.raised {
 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 {
+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 {
+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 {
+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);
 }
--- a/src/styles/themes/theme.dark.css
+++ b/src/styles/themes/theme.dark.css
@ -1,51 +1,51 @@
 :root {
-  --md-sys-color-primary: rgb(227 183 244);
-  --md-sys-color-surface-tint: rgb(227 183 244);
-  --md-sys-color-on-primary: rgb(67 34 84);
-  --md-sys-color-primary-container: rgb(92 57 108);
-  --md-sys-color-on-primary-container: rgb(246 217 255);
-  --md-sys-color-secondary: rgb(212 192 216);
-  --md-sys-color-on-secondary: rgb(57 44 62);
-  --md-sys-color-secondary-container: rgb(80 66 85);
-  --md-sys-color-on-secondary-container: rgb(240 220 244);
-  --md-sys-color-tertiary: rgb(245 183 182);
-  --md-sys-color-on-tertiary: rgb(76 37 37);
-  --md-sys-color-tertiary-container: rgb(102 59 59);
-  --md-sys-color-on-tertiary-container: rgb(255 218 217);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(22 18 23);
-  --md-sys-color-on-background: rgb(233 224 231);
-  --md-sys-color-surface: rgb(22 18 23);
-  --md-sys-color-on-surface: rgb(233 224 231);
-  --md-sys-color-surface-variant: rgb(76 68 77);
-  --md-sys-color-on-surface-variant: rgb(206 195 206);
-  --md-sys-color-outline: rgb(151 142 151);
-  --md-sys-color-outline-variant: rgb(76 68 77);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(233 224 231);
-  --md-sys-color-inverse-on-surface: rgb(52 47 52);
-  --md-sys-color-inverse-primary: rgb(117 80 134);
-  --md-sys-color-primary-fixed: rgb(246 217 255);
-  --md-sys-color-on-primary-fixed: rgb(45 11 62);
-  --md-sys-color-primary-fixed-dim: rgb(227 183 244);
-  --md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
-  --md-sys-color-secondary-fixed: rgb(240 220 244);
-  --md-sys-color-on-secondary-fixed: rgb(35 23 40);
-  --md-sys-color-secondary-fixed-dim: rgb(212 192 216);
-  --md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
-  --md-sys-color-tertiary-fixed: rgb(255 218 217);
-  --md-sys-color-on-tertiary-fixed: rgb(51 17 18);
-  --md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
-  --md-sys-color-surface-dim: rgb(22 18 23);
-  --md-sys-color-surface-bright: rgb(61 55 61);
-  --md-sys-color-surface-container-lowest: rgb(17 13 18);
-  --md-sys-color-surface-container-low: rgb(30 26 31);
-  --md-sys-color-surface-container: rgb(35 30 35);
-  --md-sys-color-surface-container-high: rgb(45 40 46);
-  --md-sys-color-surface-container-highest: rgb(56 51 57);
-}
+    --md-sys-color-primary: rgb(227 183 244);
+    --md-sys-color-surface-tint: rgb(227 183 244);
+    --md-sys-color-on-primary: rgb(67 34 84);
+    --md-sys-color-primary-container: rgb(92 57 108);
+    --md-sys-color-on-primary-container: rgb(246 217 255);
+    --md-sys-color-secondary: rgb(212 192 216);
+    --md-sys-color-on-secondary: rgb(57 44 62);
+    --md-sys-color-secondary-container: rgb(80 66 85);
+    --md-sys-color-on-secondary-container: rgb(240 220 244);
+    --md-sys-color-tertiary: rgb(245 183 182);
+    --md-sys-color-on-tertiary: rgb(76 37 37);
+    --md-sys-color-tertiary-container: rgb(102 59 59);
+    --md-sys-color-on-tertiary-container: rgb(255 218 217);
+    --md-sys-color-error: rgb(255 180 171);
+    --md-sys-color-on-error: rgb(105 0 5);
+    --md-sys-color-error-container: rgb(147 0 10);
+    --md-sys-color-on-error-container: rgb(255 218 214);
+    --md-sys-color-background: rgb(22 18 23);
+    --md-sys-color-on-background: rgb(233 224 231);
+    --md-sys-color-surface: rgb(22 18 23);
+    --md-sys-color-on-surface: rgb(233 224 231);
+    --md-sys-color-surface-variant: rgb(76 68 77);
+    --md-sys-color-on-surface-variant: rgb(206 195 206);
+    --md-sys-color-outline: rgb(151 142 151);
+    --md-sys-color-outline-variant: rgb(76 68 77);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(233 224 231);
+    --md-sys-color-inverse-on-surface: rgb(52 47 52);
+    --md-sys-color-inverse-primary: rgb(117 80 134);
+    --md-sys-color-primary-fixed: rgb(246 217 255);
+    --md-sys-color-on-primary-fixed: rgb(45 11 62);
+    --md-sys-color-primary-fixed-dim: rgb(227 183 244);
+    --md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
+    --md-sys-color-secondary-fixed: rgb(240 220 244);
+    --md-sys-color-on-secondary-fixed: rgb(35 23 40);
+    --md-sys-color-secondary-fixed-dim: rgb(212 192 216);
+    --md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
+    --md-sys-color-tertiary-fixed: rgb(255 218 217);
+    --md-sys-color-on-tertiary-fixed: rgb(51 17 18);
+    --md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
+    --md-sys-color-surface-dim: rgb(22 18 23);
+    --md-sys-color-surface-bright: rgb(61 55 61);
+    --md-sys-color-surface-container-lowest: rgb(17 13 18);
+    --md-sys-color-surface-container-low: rgb(30 26 31);
+    --md-sys-color-surface-container: rgb(35 30 35);
+    --md-sys-color-surface-container-high: rgb(45 40 46);
+    --md-sys-color-surface-container-highest: rgb(56 51 57);
+}
--- a/src/styles/themes/theme.light.css
+++ b/src/styles/themes/theme.light.css
@ -1,51 +1,51 @@
 :root {
-  --md-sys-color-primary: rgb(117 80 134);
-  --md-sys-color-surface-tint: rgb(117 80 134);
-  --md-sys-color-on-primary: rgb(255 255 255);
-  --md-sys-color-primary-container: rgb(246 217 255);
-  --md-sys-color-on-primary-container: rgb(45 11 62);
-  --md-sys-color-secondary: rgb(104 89 109);
-  --md-sys-color-on-secondary: rgb(255 255 255);
-  --md-sys-color-secondary-container: rgb(240 220 244);
-  --md-sys-color-on-secondary-container: rgb(35 23 40);
-  --md-sys-color-tertiary: rgb(129 82 81);
-  --md-sys-color-on-tertiary: rgb(255 255 255);
-  --md-sys-color-tertiary-container: rgb(255 218 217);
-  --md-sys-color-on-tertiary-container: rgb(51 17 18);
-  --md-sys-color-error: rgb(186 26 26);
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 214);
-  --md-sys-color-on-error-container: rgb(65 0 2);
-  --md-sys-color-background: rgb(255 247 252);
-  --md-sys-color-on-background: rgb(30 26 31);
-  --md-sys-color-surface: rgb(255 247 252);
-  --md-sys-color-on-surface: rgb(30 26 31);
-  --md-sys-color-surface-variant: rgb(235 223 234);
-  --md-sys-color-on-surface-variant: rgb(76 68 77);
-  --md-sys-color-outline: rgb(125 116 126);
-  --md-sys-color-outline-variant: rgb(206 195 206);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(52 47 52);
-  --md-sys-color-inverse-on-surface: rgb(248 238 246);
-  --md-sys-color-inverse-primary: rgb(227 183 244);
-  --md-sys-color-primary-fixed: rgb(246 217 255);
-  --md-sys-color-on-primary-fixed: rgb(45 11 62);
-  --md-sys-color-primary-fixed-dim: rgb(227 183 244);
-  --md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
-  --md-sys-color-secondary-fixed: rgb(240 220 244);
-  --md-sys-color-on-secondary-fixed: rgb(35 23 40);
-  --md-sys-color-secondary-fixed-dim: rgb(212 192 216);
-  --md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
-  --md-sys-color-tertiary-fixed: rgb(255 218 217);
-  --md-sys-color-on-tertiary-fixed: rgb(51 17 18);
-  --md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
-  --md-sys-color-surface-dim: rgb(225 215 223);
-  --md-sys-color-surface-bright: rgb(255 247 252);
-  --md-sys-color-surface-container-lowest: rgb(255 255 255);
-  --md-sys-color-surface-container-low: rgb(251 241 248);
-  --md-sys-color-surface-container: rgb(245 235 243);
-  --md-sys-color-surface-container-high: rgb(239 229 237);
-  --md-sys-color-surface-container-highest: rgb(233 224 231);
+    --md-sys-color-primary: rgb(117 80 134);
+    --md-sys-color-surface-tint: rgb(117 80 134);
+    --md-sys-color-on-primary: rgb(255 255 255);
+    --md-sys-color-primary-container: rgb(246 217 255);
+    --md-sys-color-on-primary-container: rgb(45 11 62);
+    --md-sys-color-secondary: rgb(104 89 109);
+    --md-sys-color-on-secondary: rgb(255 255 255);
+    --md-sys-color-secondary-container: rgb(240 220 244);
+    --md-sys-color-on-secondary-container: rgb(35 23 40);
+    --md-sys-color-tertiary: rgb(129 82 81);
+    --md-sys-color-on-tertiary: rgb(255 255 255);
+    --md-sys-color-tertiary-container: rgb(255 218 217);
+    --md-sys-color-on-tertiary-container: rgb(51 17 18);
+    --md-sys-color-error: rgb(186 26 26);
+    --md-sys-color-on-error: rgb(255 255 255);
+    --md-sys-color-error-container: rgb(255 218 214);
+    --md-sys-color-on-error-container: rgb(65 0 2);
+    --md-sys-color-background: rgb(255 247 252);
+    --md-sys-color-on-background: rgb(30 26 31);
+    --md-sys-color-surface: rgb(255 247 252);
+    --md-sys-color-on-surface: rgb(30 26 31);
+    --md-sys-color-surface-variant: rgb(235 223 234);
+    --md-sys-color-on-surface-variant: rgb(76 68 77);
+    --md-sys-color-outline: rgb(125 116 126);
+    --md-sys-color-outline-variant: rgb(206 195 206);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(52 47 52);
+    --md-sys-color-inverse-on-surface: rgb(248 238 246);
+    --md-sys-color-inverse-primary: rgb(227 183 244);
+    --md-sys-color-primary-fixed: rgb(246 217 255);
+    --md-sys-color-on-primary-fixed: rgb(45 11 62);
+    --md-sys-color-primary-fixed-dim: rgb(227 183 244);
+    --md-sys-color-on-primary-fixed-variant: rgb(92 57 108);
+    --md-sys-color-secondary-fixed: rgb(240 220 244);
+    --md-sys-color-on-secondary-fixed: rgb(35 23 40);
+    --md-sys-color-secondary-fixed-dim: rgb(212 192 216);
+    --md-sys-color-on-secondary-fixed-variant: rgb(80 66 85);
+    --md-sys-color-tertiary-fixed: rgb(255 218 217);
+    --md-sys-color-on-tertiary-fixed: rgb(51 17 18);
+    --md-sys-color-tertiary-fixed-dim: rgb(245 183 182);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(102 59 59);
+    --md-sys-color-surface-dim: rgb(225 215 223);
+    --md-sys-color-surface-bright: rgb(255 247 252);
+    --md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --md-sys-color-surface-container-low: rgb(251 241 248);
+    --md-sys-color-surface-container: rgb(245 235 243);
+    --md-sys-color-surface-container-high: rgb(239 229 237);
+    --md-sys-color-surface-container-highest: rgb(233 224 231);
 }
--- a/src/styles/themes/tokens.css
+++ b/src/styles/themes/tokens.css
@ -47,7 +47,7 @@
  --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.5px;
+  --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;
@ -61,28 +61,28 @@
  --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.4px;
+  --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.1px;
+  --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.5px;
+  --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.5px;
+  --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;
@ -103,5 +103,5 @@
  --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.1px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
 }
--- a/src/styles/themes/typography.module.css
+++ b/src/styles/themes/typography.module.css
@ -1,4 +1,4 @@
-.display-large {
+.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);
@ -8,7 +8,7 @@
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
 }
-.display-medium {
+.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);
@ -18,7 +18,7 @@
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
 }
-.display-small {
+.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);
@ -28,7 +28,7 @@
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
 }
-.headline-large {
+.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);
@ -38,7 +38,7 @@
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
 }
-.headline-medium {
+.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);
@ -48,7 +48,7 @@
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
 }
-.headline-small {
+.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);
@ -58,7 +58,7 @@
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
 }
-.body-large {
+.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);
@ -68,7 +68,7 @@
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 }
-.body-medium {
+.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);
@ -78,7 +78,7 @@
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
 }
-.body-small {
+.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);
@ -88,7 +88,7 @@
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
 }
-.label-large {
+.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);
@ -98,7 +98,7 @@
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 }
-.label-medium {
+.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);
@ -108,7 +108,7 @@
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
 }
-.label-small {
+.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);
@ -118,7 +118,7 @@
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
 }
-.title-large {
+.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);
@ -128,7 +128,7 @@
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
 }
-.title-medium {
+.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);
@ -138,7 +138,7 @@
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 }
-.title-small {
+.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);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,23 +1,18 @@
 {
+  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "rootDir": ".",
+    "outDir": "build",
+    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
+    "incremental": true,
    "esModuleInterop": true,
-    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
-    "incremental": true,
    "plugins": [
      {
        "name": "next"
@ -25,12 +20,8 @@
    ]
  },
  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
+    "src/**/*.ts",
+    "test/**/*.ts",
    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
  ]
 }