.editorconfig

@@ -1,8 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-insert_final_newline = true

.eslintignore

@@ -1 +0,0 @@
-build/

.eslintrc.js

@@ -0,0 +1,95 @@
+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',
+        },
+    },
+};

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./node_modules/gts/"
-}

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

.idea/jsLinters/eslint.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <option name="fix-on-save" value="true" />
+  </component>
+</project>

.idea/modules.xml

@@ -2,7 +2,7 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" filepath="$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/google-material-you-ui.iml" filepath="$PROJECT_DIR$/.idea/google-material-you-ui.iml" />
     </modules>
   </component>
 </project>

.prettierrc.js

@@ -1,3 +1,7 @@
 module.exports = {
-  ...require('gts/.prettierrc.json')
+    arrowParens: 'avoid',
-}
+    singleQuote: true,
+    trailingComma: 'all',
+    tabWidth: 4,
+    endOfLine: 'auto',
+};

README.md

@@ -1,5 +1,7 @@
 # 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
@@ -29,12 +31,19 @@ This repository is including and will be including components, enumerates in tab
 - [ ] Bottom app bars
       ~~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)

app/components/buttons.tsx

@@ -8,7 +8,7 @@ export default function Buttons() {
 
     const callback = useCallback(
         () => setState(prevState => prevState + 1),
-        [state]
+        [state],
     );
 
     return (
@@ -26,13 +26,13 @@ export default function Buttons() {
                         }}
                     >
                         <Button
-                            variant={'filled'}
-                            onClick={callback}
                             centralRipple
+                            onClick={callback}
+                            variant={'filled'}
                         >
                             Label + {state}
                         </Button>
-                        <Button variant={'elevated'} />
+                        <Button variant={'outlined'}>Label</Button>
                         <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 variant={'filled'} icon={'add'}>
+                        <Button icon={'add'} variant={'filled'}>
                             Label
                         </Button>
-                        <Button variant={'outlined'} icon={'add'}>
+                        <Button icon={'add'} variant={'outlined'}>
                             Label
                         </Button>
-                        <Button variant={'tonal'} icon={'add'}>
+                        <Button icon={'add'} variant={'tonal'}>
                             Label
                         </Button>
-                        <Button variant={'elevated'} icon={'add'}>
+                        <Button icon={'add'} variant={'elevated'}>
                             Label
                         </Button>
-                        <Button variant={'text'} icon={'add'}>
+                        <Button icon={'add'} variant={'text'}>
                             Label
                         </Button>
                     </div>

app/components/checkboxes.tsx

@@ -38,7 +38,7 @@ export default function Checkboxes() {
                         <h2> Disabled </h2>
                         <div style={{ display: 'flex', gap: '2em' }}>
                             <Checkbox disabled />
-                            <Checkbox disabled defaultChecked />
+                            <Checkbox defaultChecked disabled />
                         </div>
                     </div>
                 </div>
@@ -59,8 +59,8 @@ export default function Checkboxes() {
                             }}
                         >
                             <Checkbox required />
-                            <Checkbox required defaultChecked />
+                            <Checkbox defaultChecked required />
-                            <Checkbox required indeterminate={true} />
+                            <Checkbox indeterminate={true} required />
                         </div>
                         <div
                             style={{
@@ -69,16 +69,16 @@ export default function Checkboxes() {
                                 flexDirection: 'row',
                             }}
                         >
-                            <Checkbox required className={'m3-error'} />
+                            <Checkbox className={'m3-error'} required />
                             <Checkbox
-                                required
-                                defaultChecked
                                 className={'m3-error'}
+                                defaultChecked
+                                required
                             />
                             <Checkbox
-                                required
-                                indeterminate={true}
                                 className={'m3-error'}
+                                indeterminate={true}
+                                required
                             />
                         </div>
                         <Button type={'submit'}>Send</Button>

app/components/fabs.tsx

@@ -19,103 +19,103 @@ export default function Fabs() {
                             <h2> Small </h2>
                             <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
-                                    variant={'tertiary'}
-                                    size={'small'}
-                                    icon={'edit'}
                                     elevated
+                                    icon={'edit'}
+                                    size={'small'}
+                                    variant={'tertiary'}
                                 />
                             </div>
                         </div>
                         <div>
                             <h2> Default </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB icon={'edit'} elevated />
+                                <FAB elevated icon={'edit'} />
                                 <FAB
+                                    elevated
+                                    icon={'edit'}
                                     variant={'primary'}
-                                    icon={'edit'}
-                                    elevated
                                 />
                                 <FAB
+                                    elevated
+                                    icon={'edit'}
                                     variant={'secondary'}
-                                    icon={'edit'}
-                                    elevated
                                 />
                                 <FAB
-                                    variant={'tertiary'}
-                                    icon={'edit'}
                                     elevated
+                                    icon={'edit'}
+                                    variant={'tertiary'}
                                 />
                             </div>
                         </div>
                         <div>
                             <h2> Large </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB size={'large'} icon={'edit'} />
+                                <FAB elevated icon={'edit'} size={'large'} />
                                 <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
-                                    variant={'tertiary'}
-                                    size={'large'}
-                                    icon={'edit'}
                                     elevated
+                                    icon={'edit'}
+                                    size={'large'}
+                                    variant={'tertiary'}
                                 />
                             </div>
                         </div>
                         <div>
                             <h2> Extended </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB size={'extended'} icon={'edit'} elevated>
+                                <FAB elevated icon={'edit'} size={'extended'}>
                                     <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
-                                    variant={'tertiary'}
-                                    size={'extended'}
-                                    icon={'edit'}
                                     elevated
+                                    icon={'edit'}
+                                    size={'extended'}
+                                    variant={'tertiary'}
                                 >
                                     <span className={'label-large'}>Label</span>
                                 </FAB>
@@ -136,20 +136,21 @@ export default function Fabs() {
                         <div>
                             <h2> Small </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
+                                <FAB icon={'edit'} size={'small'} />
                                 <FAB
-                                    size={'small'}
                                     icon={'edit'}
+                                    size={'small'}
                                     variant={'primary'}
                                 />
                                 <FAB
-                                    variant={'secondary'}
-                                    size={'small'}
                                     icon={'edit'}
+                                    size={'small'}
+                                    variant={'secondary'}
                                 />
                                 <FAB
-                                    variant={'tertiary'}
-                                    size={'small'}
                                     icon={'edit'}
+                                    size={'small'}
+                                    variant={'tertiary'}
                                 />
                             </div>
                         </div>
@@ -157,56 +158,56 @@ export default function Fabs() {
                             <h2> Default </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
                                 <FAB icon={'edit'} />
-                                <FAB variant={'primary'} icon={'edit'} />
+                                <FAB icon={'edit'} variant={'primary'} />
-                                <FAB variant={'secondary'} icon={'edit'} />
+                                <FAB icon={'edit'} variant={'secondary'} />
-                                <FAB variant={'tertiary'} icon={'edit'} />
+                                <FAB icon={'edit'} variant={'tertiary'} />
                             </div>
                         </div>
                         <div>
                             <h2> Large </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB size={'large'} icon={'edit'} />
+                                <FAB icon={'edit'} size={'large'} />
                                 <FAB
+                                    icon={'edit'}
+                                    size={'large'}
                                     variant={'primary'}
-                                    size={'large'}
-                                    icon={'edit'}
                                 />
                                 <FAB
+                                    icon={'edit'}
+                                    size={'large'}
                                     variant={'secondary'}
-                                    size={'large'}
-                                    icon={'edit'}
                                 />
                                 <FAB
-                                    variant={'tertiary'}
-                                    size={'large'}
                                     icon={'edit'}
+                                    size={'large'}
+                                    variant={'tertiary'}
                                 />
                             </div>
                         </div>
                         <div>
                             <h2> Extended </h2>
                             <div style={{ display: 'flex', gap: '2em' }}>
-                                <FAB size={'extended'} icon={'edit'}>
+                                <FAB icon={'edit'} size={'extended'}>
                                     <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
-                                    variant={'tertiary'}
-                                    size={'extended'}
                                     icon={'edit'}
+                                    size={'extended'}
+                                    variant={'tertiary'}
                                 >
                                     <span className={'label-large'}>Label</span>
                                 </FAB>

app/components/icon-buttons.tsx

@@ -17,7 +17,7 @@ function IconButtons() {
                             gap: '0.5em',
                         }}
                     >
-                        <IconButton icon={'settings'} centralRipple />
+                        <IconButton centralRipple icon={'settings'} />
                         <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 icon={'settings'} disabled />
+                        <IconButton disabled icon={'settings'} />
                         <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'}
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
                         />
                         <IconButton
                             icon={'settings'}
-                            variant={'outlined'}
                             toggled={{
                                 selected: 'settings',
                                 unselected: 'settings',
                             }}
+                            variant={'outlined'}
                         />
                     </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'}
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
-                            disabled
                         />
                         <IconButton
+                            disabled
                             icon={'settings'}
-                            variant={'outlined'}
                             toggled={{
                                 selected: 'settings',
                                 unselected: 'settings',
                             }}
-                            disabled
+                            variant={'outlined'}
                         />
                     </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'}
-                            toggled={{
-                                selected: 'settings',
-                                unselected: 'settings',
-                            }}
-                            disabled
-                            selected
                         />
                         <IconButton
+                            disabled
                             icon={'settings'}
-                            variant={'outlined'}
+                            selected
                             toggled={{
                                 selected: 'settings',
                                 unselected: 'settings',
                             }}
-                            disabled
+                            variant={'outlined'}
-                            selected
                         />
                     </div>
                 </div>

app/components/radios.tsx

@@ -25,7 +25,7 @@ export default function Radios() {
                     <h2> Disabled </h2>
                     <div style={{ display: 'flex', gap: '2em' }}>
                         <Radio disabled />
-                        <Radio disabled defaultChecked />
+                        <Radio defaultChecked disabled />
                     </div>
                 </div>
             </div>

app/components/switches.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { Switch } from '../../src/primitive-components/material-you-components';
 
@@ -27,7 +29,7 @@ export default function Switches() {
                         <div>
                             <h2> Disabled </h2>
                             <Switch disabled />
-                            <Switch disabled defaultChecked />
+                            <Switch defaultChecked disabled />
                         </div>
                     </div>
                 </div>
@@ -49,7 +51,7 @@ export default function Switches() {
                         <div>
                             <h2> Disabled </h2>
                             <Switch disabled icon />
-                            <Switch disabled defaultChecked icon />
+                            <Switch defaultChecked disabled icon />
                         </div>
                     </div>
                 </div>
@@ -65,13 +67,13 @@ export default function Switches() {
                     >
                         <div>
                             <h2> Default </h2>
-                            <Switch selected icon />
+                            <Switch icon selected />
-                            <Switch selected defaultChecked icon />
+                            <Switch defaultChecked icon selected />
                         </div>
                         <div>
                             <h2> Disabled </h2>
-                            <Switch selected disabled icon />
+                            <Switch disabled icon selected />
-                            <Switch selected disabled defaultChecked icon />
+                            <Switch defaultChecked disabled icon selected />
                         </div>
                     </div>
                 </div>

app/layout.tsx

@@ -1,6 +1,4 @@
 import '../src/styles/generics.css';
-import '../src/styles/button.css';
-import '../src/styles/ripple.css';
 import { Metadata, Viewport } from 'next';
 
 export const metadata: Metadata = {
@@ -15,7 +13,11 @@ 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>

package.json

@@ -4,27 +4,38 @@
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "gts lint",
+    "lint": "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",
-    "gts": "^5.2.0",
+    "@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",
     "typescript": "~5.2.0"
   }
 }

src/index.ts

@@ -1,33 +0,0 @@
-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

src/primitive-components/badge/badge.tsx

@@ -1,28 +1,23 @@
-import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
+import { BadgeProps } from './badges.types';
 import { bool, number, string } from 'prop-types';
+import React, { forwardRef } from 'react';
 
-interface BadgeProps extends PropsWithChildren<any> {
+const Badge = forwardRef<SVGSVGElement, BadgeProps>(function Badge(
-    disableValue?: boolean;
+    { disableValue = false, ...props },
-}
+    ref,
-
+) {
-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)
+            disableValue || (!props.children ?? true) ? 'disable-value' : '';
-                    ? 'disable-value'
-                    : '';
 
     return (
         <svg
             {...props}
+            className={`m3 m3-badge ${'' ?? props.className}${disableValueClassName}`.trimEnd()}
             ref={ref}
             width={`${digitLength}px`}
-                className={`m3 m3-badge ${
-                    '' ?? props.className
-                }${disableValueClassName}`.trimEnd()}
         >
             {props.children && (
                 <text x={'50%'} y={'50%'}>
@@ -31,8 +26,7 @@ const Badge = forwardRef(
             )}
         </svg>
     );
-    }
+});
-);
 
 Badge.propTypes = {
     children: number,

src/primitive-components/badge/badges.types.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export interface BadgeProps extends PropsWithChildren<any> {
+    disableValue?: boolean;
+}

src/primitive-components/button-layout/button-layout.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { RippleArea } from '../ripple/ripple-area';
+import { IRippleProps } from '../ripple/ripple.types';
+import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import React, {
     forwardRef,
     PropsWithChildren,
@@ -8,17 +10,11 @@ import React, {
     useRef,
     useState,
 } from 'react';
-import useRippleEffect from '../ripple/hooks/useRippleEffect';
-import {IRippleProps} from '../ripple/ripple.types';
 
-const ButtonLayout = forwardRef(
+const ButtonLayout = forwardRef<
-    (
+    HTMLButtonElement,
-        {
+    PropsWithChildren<any> & IRippleProps
-            centralRipple = false,
+>(function ButtonBase({ centralRipple = false, ...props }, ref) {
-            ...props
-        }: PropsWithChildren<any> & IRippleProps,
-        ref
-    ) => {
     const [isActive, setIsActive] = useState<boolean>(false),
         ripplesRef = useRef(null),
         buttonId = useId(),
@@ -34,20 +30,19 @@ const ButtonLayout = forwardRef(
         <button
             {...props}
             {...events}
-                ref={ref}
-                id={buttonId}
             className={classes}
             disabled={disabled}
+            id={buttonId}
+            ref={ref}
         >
             {props.children}
             <RippleArea
-                    ref={ripplesRef}
-                    central={centralRipple}
                 callback={setIsActive}
+                central={centralRipple}
+                ref={ripplesRef}
             />
         </button>
     );
-    }
+});
-);
 
 export { ButtonLayout };

src/primitive-components/button-layout/button.types.ts

@@ -1,11 +1,11 @@
 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';
 }

src/primitive-components/button/button.tsx

@@ -1,34 +1,33 @@
+'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 { ButtonMainProps } from '../button-layout/button.types';
 
 /**
  * Button component
  ** description
  */
 
-export const Button = forwardRef(
+export const Button = forwardRef<
+    HTMLButtonElement,
+    ButtonMainProps & IRippleProps
+>(
     (
-        {
+        { centralRipple = false, variant, disabled = false, icon, ...props },
-            centralRipple = false,
+        ref,
-            variant,
-            disabled,
-            icon,
-            ...props
-        }: buttonMainProps & IRippleProps,
-        ref
     ) => (
         <ButtonLayout
             {...props}
-            ref={ref}
-            disabled={disabled}
             centralRipple={centralRipple}
+            disabled={disabled}
+            ref={ref}
             variant={variant ? variant : 'filled'}
         >
             {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
             <span className={'label-large'}>{props.children}</span>
         </ButtonLayout>
-    )
+    ),
 );

src/primitive-components/checkbox-layout/check-box-layout.tsx

@@ -1,13 +1,17 @@
 'use client';
 
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+} from 'react';
 import { CheckboxLayoutProps } from './checkbox-layout.types';
 
-export const CheckBoxLayout = forwardRef(
+export const CheckBoxLayout = forwardRef(function CheckBoxBase(
-    (
     { indeterminate, typeInput, type, ...props }: CheckboxLayoutProps,
-        ref
+    ref,
-    ): JSX.Element => {
+): JSX.Element {
     const checkboxRef = useRef<any>(null);
 
     useEffect(() => {
@@ -27,9 +31,8 @@ export const CheckBoxLayout = forwardRef(
         <input
             ref={checkboxRef}
             {...props}
-                type={type}
             className={classes.trimEnd()}
+            type={type}
         />
     );
-    }
+});
-);

src/primitive-components/checkbox/checkbox.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 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 {
     forwardRef,
+    PropsWithChildren,
     useEffect,
     useImperativeHandle,
     useRef,
@@ -15,17 +18,18 @@ import {
  ** description
  */
 
-export const Checkbox = forwardRef(
+export const Checkbox = forwardRef<
-    ({centralRipple, ...props}: any & IRippleProps, ref) => {
+    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);
 
-        const classes = `m3 m3-checkbox-label ${
+    const classes =
-            isActive === true ? 'visible' : ''
+        `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
-        }`.trimEnd();
     const indeterminate = (props.indeterminate === true).toString();
 
     useImperativeHandle(ref, () => checkboxRef.current);
@@ -38,19 +42,18 @@ export const Checkbox = forwardRef(
         <label {...events} className={classes}>
             <CheckBoxLayout
                 {...props}
-                    ref={checkboxRef}
                 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}
-                    central={centralRipple}
-                    callback={setIsActive}
             />
             {props.children}
         </label>
     );
-    }
+});
-);

src/primitive-components/divider/divider.tsx

@@ -1,25 +1,18 @@
-import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
+import React, { forwardRef, PropsWithChildren } from 'react';
 
 interface DividerProps extends PropsWithChildren<any> {
     orientation?: 'vertical' | 'horizontal';
     variant?: 'full-width' | 'inset' | 'middle-inset';
 }
 
-const Divider = forwardRef(
+const Divider = forwardRef<HTMLHRElement, DividerProps>(
-    (
+    ({ orientation, variant, ...props }, ref) => (
-        {orientation, variant, ...props}: DividerProps,
-        ref: ForwardedRef<any>
-    ) => {
-        return (
         <hr
             {...props}
+            className={`m3 m3-divider ${orientation ?? 'horizontal'} ${variant ?? 'full-width'}`.trimEnd()}
             ref={ref}
-                className={`m3 m3-divider ${orientation ?? 'horizontal'} ${
-                    variant ?? 'full-width'
-                }`.trimEnd()}
         />
-        );
+    ),
-    }
 );
 
 export { Divider };

src/primitive-components/fab/fab.tsx

@@ -1,8 +1,10 @@
+'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 {IRippleProps} from '../ripple/ripple.types';
-import {Icon} from '../material-you-components';
 
 /**
  * FABs component
@@ -16,7 +18,7 @@ const sizes = {
     extended: 24,
 };
 
-export const FAB = forwardRef(
+export const FAB = forwardRef<HTMLButtonElement, FABMainProps & IRippleProps>(
     (
         {
             variant,
@@ -26,17 +28,16 @@ export const FAB = forwardRef(
             size = 'default',
             elevated,
             ...props
-        }: FABMainProps & IRippleProps,
+        },
-        ref
+        ref,
     ) => (
         <ButtonLayout
             {...props}
-            ref={ref}
             centralRipple={centralRipple}
+            className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
+            disabled={disabled}
+            ref={ref}
             variant={variant ? variant : 'surface'}
-            className={`m3-fab m3-${size}-fab ${
-                !(elevated ?? false) && 'without-elevation'
-            }`}
         >
             <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                 {icon}
@@ -47,5 +48,5 @@ export const FAB = forwardRef(
                 <></>
             )}
         </ButtonLayout>
-    )
+    ),
 );

src/primitive-components/icon-button/icon-button.tsx

@@ -1,5 +1,10 @@
+'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 { IconButtonMainProps } from '../button-layout/button.types';
 import {
     forwardRef,
     useCallback,
@@ -7,15 +12,16 @@ 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(
+export const IconButton = forwardRef<
+    HTMLButtonElement,
+    IconButtonMainProps & IRippleProps
+>(
     (
         {
             icon,
@@ -25,11 +31,11 @@ export const IconButton = forwardRef(
             toggled = false,
             centralRipple,
             ...props
-        }: iconButtonMainProps & IRippleProps,
+        },
-        ref
+        ref,
     ) => {
-        const [toggleIcon, setToggleIcon] = useState<any>({
+        const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
-            state: selected === true ? 'selected' : 'unselected',
+            state: selected == true ? 'selected' : 'unselected',
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
@@ -44,35 +50,37 @@ 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');
+                } else {
+                    toggle('selected', toggled.selected ?? 'add_circle');
+                }
+            }
+            if (props.onClick) {
+                props.onClick();
             }
-            if (props.onClick) props.onClick();
         }, [toggleIcon]);
 
-        useImperativeHandle(ref, () => buttonRef);
+        useImperativeHandle(ref, () => buttonRef.current);
 
         return (
             <ButtonLayout
                 {...props}
-                ref={buttonRef}
-                onClick={callback}
                 centralRipple={centralRipple}
+                className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
                 disabled={disabled}
-                className={`m3-icon-button ${toggleIcon.state} ${
+                onClick={callback}
-                    toggled ? 'toggled' : ''
+                ref={buttonRef}
-                }`.trimEnd()}
                 variant={variant ? variant : 'default'}
             >
                 <Icon
-                    svgSize={40}
-                    iconSize={28}
                     fill={toggleIcon.state === 'selected' ? 1 : 0}
+                    iconSize={28}
+                    svgSize={40}
                 >
                     {toggled ? toggleIcon.icon : icon ? icon : undefined}
                 </Icon>
             </ButtonLayout>
         );
-    }
+    },
 );

src/primitive-components/icon-button/icon-button.types.ts

@@ -0,0 +1,4 @@
+export type toggleIconType = {
+    state: string;
+    icon: string;
+};

src/primitive-components/icon/icon.tsx

@@ -1,9 +1,8 @@
-import React, {ForwardedRef, forwardRef} from 'react';
 import { IconProps } from './icon.types';
 import { bool, number, string } from 'prop-types';
+import React, { ForwardedRef, forwardRef } from 'react';
 
-const Icon = forwardRef(
+const Icon = forwardRef(function Icon(
-    (
     {
         grade = 0,
         weight = 500,
@@ -14,26 +13,22 @@ const Icon = forwardRef(
         type = 'outlined',
         ...props
     }: IconProps,
-        ref: ForwardedRef<any>
+    ref: ForwardedRef<any>,
-    ) => {
+) {
     const fontVariation = {
-            fontVariationSettings: `'FILL' ${
+        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
-                fill ? 1 : 0
-            }, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
     };
 
     return (
         <svg
             {...props}
-                ref={ref}
             className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
-                width={svgSize}
             height={svgSize}
+            ref={ref}
+            width={svgSize}
         >
             <text
-                    className={`m3-${
+                className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
-                        type[0].toUpperCase() + type.slice(1)
-                    } m3-size-${iconSize}px`}
                 style={fontVariation}
                 x={'50%'}
                 y={'50%'}
@@ -42,8 +37,7 @@ const Icon = forwardRef(
             </text>
         </svg>
     );
-    }
+});
-);
 
 Icon.propTypes = {
     fill: bool,

src/primitive-components/radio/radio.tsx

@@ -1,36 +1,38 @@
+'use client';
+
 import { RippleArea } from '../ripple/ripple-area';
-import {forwardRef, useRef, useState} from 'react';
+import { IRippleProps } from '../ripple/ripple.types';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import {IRippleProps} from '../ripple/ripple.types';
+import { forwardRef, PropsWithChildren, useRef, useState } from 'react';
 
 /**
  * Radio component
  ** description
  */
 
-export const Radio = forwardRef(
+export const Radio = forwardRef<
-    ({centralRipple, ...props}: any & IRippleProps, ref) => {
+    HTMLInputElement,
+    PropsWithChildren<HTMLElement> & IRippleProps
+>(({ centralRipple, ...props }, ref) => {
     const [isActive, setIsActive] = useState<boolean>(false),
         ripplesRef = useRef(null),
         events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes = `m3 m3-radio-label ${
+    const classes =
-            isActive === true ? 'visible' : ''
+        `m3 m3-radio-label ${isActive === true ? 'visible' : ''}`.trimEnd();
-        }`.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}
-                    central={centralRipple}
-                    callback={setIsActive}
             />
             {props.children}
         </label>
     );
-    }
+});
-);

src/primitive-components/ripple/hooks/useRippleEffect.ts

@@ -12,30 +12,18 @@ interface RippleEventHandlers {
     onTouchStart: React.TouchEventHandler;
 }
 
-export type EventHandlerType<T> =
+const UseRippleEffect = (ref, callback): undefined | RippleEventHandlers => {
-    | 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;
 

src/primitive-components/ripple/ripple-area.tsx

@@ -1,22 +1,24 @@
 'use client';
 
 import React, {
-    useId,
-    useRef,
-    useState,
     forwardRef,
     useCallback,
+    useId,
     useImperativeHandle,
+    useRef,
+    useState,
 } from 'react';
 import { Ripple } from './ripple';
 import { Ripples } from './ripple';
 import { RippleAreaProps } from './ripple.types';
 
-const TIMEOUT = 550;
+const TIMEOUT: number = 550;
 const rippleAreaContext = React.createContext(false);
 
-const RippleArea = forwardRef(
+const RippleArea = forwardRef(function RippleArea(
-    ({central = false, callback, ...props}: RippleAreaProps, ref) => {
+    { central = false, callback, ...props }: RippleAreaProps,
+    ref,
+) {
     const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
         rippleDomain = useRef<any>(null),
         clicked = useRef<boolean>(false),
@@ -50,53 +52,50 @@ const RippleArea = forwardRef(
                 rippleSizeX: number =
                     Math.max(
                         Math.abs(rippleDomainChar.width - rippleX),
-                            rippleX
+                        rippleX,
                     ) *
                         2 +
                     2,
                 rippleSizeY: number =
                     Math.max(
                         Math.abs(rippleDomainChar.height - rippleY),
-                            rippleY
+                        rippleY,
                     ) *
                         2 +
                     2,
-                    rippleS: number =
+                rippleS: number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
-                        (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
 
             setRipples((prevRipples: Array<JSX.Element>) => {
                 if (prevRipples.length === 0) {
                     return [
                         <Ripple
-                                rippleX={rippleX}
-                                rippleY={rippleY}
-                                rippleS={rippleS}
                             key={uniqueKey.current}
                             lifetime={TIMEOUT}
+                            rippleS={rippleS}
+                            rippleX={rippleX}
+                            rippleY={rippleY}
                         />,
                     ];
-                    } else {
+                }
                 const old = [...prevRipples];
                 old.push(
                     <Ripple
-                                rippleX={rippleX}
-                                rippleY={rippleY}
-                                rippleS={rippleS}
                         key={uniqueKey.current}
                         lifetime={TIMEOUT}
-                            />
+                        rippleS={rippleS}
+                        rippleX={rippleX}
+                        rippleY={rippleY}
+                    />,
                 );
                 return old;
-                    }
             });
 
             uniqueKey.current += 1;
         },
-            []
+        [],
     );
 
-        const stop = useCallback(
+    const stop = useCallback((_event: any, cb: (state: boolean) => void) => {
-            (_event: any, cb: (state: boolean) => void) => {
         clicked.current = false;
         cb(clicked.current);
 
@@ -108,9 +107,7 @@ const RippleArea = forwardRef(
             }
             return prevRipples;
         });
-            },
+    }, []);
-            []
-        );
 
     useImperativeHandle(
         ref,
@@ -118,8 +115,9 @@ const RippleArea = forwardRef(
             start,
             stop,
         }),
-            [start, stop]
+        [start, stop],
     );
+
     return (
         <span className={classes} id={uniqueId} ref={rippleDomain}>
             <rippleAreaContext.Provider value={clicked.current}>
@@ -127,7 +125,6 @@ const RippleArea = forwardRef(
             </rippleAreaContext.Provider>
         </span>
     );
-    }
+});
-);
 
 export { rippleAreaContext, RippleArea };

src/primitive-components/ripple/ripple.tsx

@@ -5,18 +5,21 @@ 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((props: any, ref: ForwardedRef<any>) => {
+const Ripples = forwardRef(function Ripples(
+    props: any,
+    ref: ForwardedRef<any>,
+) {
     const [ripples, setRipples] = useState({});
     const firstRender = useRef<boolean>(true);
     const [pending, startTransition] = useTransition();
@@ -41,7 +44,7 @@ const Ripples = forwardRef((props: any, ref: ForwardedRef<any>) => {
                     firstRender.current = false;
                 } else {
                     setRipples(
-                        RippleEffectBuild(props.children, LifetimeEnd, ripples)
+                        RippleEffectBuild(props.children, LifetimeEnd, ripples),
                     );
                 }
             });
@@ -51,7 +54,10 @@ const Ripples = forwardRef((props: any, ref: ForwardedRef<any>) => {
     return <>{Object.values(ripples)}</>;
 });
 
-const Ripple = forwardRef((props: rippleProps, ref: ForwardedRef<any>) => {
+const Ripple = forwardRef(function Ripple(
+    props: rippleProps,
+    ref: ForwardedRef<any>,
+) {
     const { rippleX, rippleY, rippleS, endLifetime, lifetime } = props;
 
     const clicked = useContext<boolean>(rippleAreaContext);

src/primitive-components/ripple/ripple.types.ts

@@ -1,6 +1,6 @@
-import {Dispatch, SetStateAction, PropsWithChildren} from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
-export interface IRippleProps {
+export interface IRippleProps extends PropsWithChildren<any> {
     centralRipple?: boolean;
 }
 
@@ -13,7 +13,9 @@ export type rippleProps = {
     rippleX: number;
     rippleY: number;
     rippleS: number;
-    endLifetime?: any;
+    endLifetime?: () => void;
     lifetime: number;
     key?: number;
 };
+
+import { PropsWithChildren } from 'react';

src/primitive-components/ripple/utils/array-convert-to-obj.ts

@@ -3,13 +3,13 @@ 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),
-            }))
+            })),
     );
 }

src/primitive-components/ripple/utils/ripple-effect-builder.ts

@@ -1,27 +1,26 @@
-import isEmpty from './utils';
-import {cloneElement, ReactElement} from 'react';
 import ArrayConvertToObj from './array-convert-to-obj';
+import { cloneElement, ReactElement } from 'react';
+import isEmpty from './utils';
 
 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]),
@@ -30,5 +29,6 @@ export default function RippleEffectBuild(
             }
             break;
     }
+
     return preparedRipples;
 }

src/primitive-components/ripple/utils/utils.ts

@@ -1,4 +1,6 @@
 export default function isEmpty(obj: Object): boolean {
-    for (const _i in obj) return false;
+    for (const _i in obj) {
+        return false;
+    }
     return true;
 }

src/primitive-components/switch/switch.tsx

@@ -1,5 +1,7 @@
-import React, {ForwardedRef, forwardRef} from 'react';
+'use client';
-import {switchMainProps} from './switch.types';
+
+import React, { forwardRef } from 'react';
+import { SwitchMainProps } from './switch.types';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
 
 /**
@@ -7,18 +9,14 @@ import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
  ** description
  */
 
-export const Switch = forwardRef(
+export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
-    (
+    ({ icon, disabled, selected = false, ...props }, ref) => (
-        {icon, disabled, selected = false, ...props}: switchMainProps,
+        <div className={'m3 m3-switch-exp'} ref={ref}>
-        ref: ForwardedRef<HTMLInputElement>
-    ) => (
-        <div className={'m3 m3-switch-exp'}>
             <CheckBoxLayout
                 {...props}
-                ref={ref}
-                type={'checkbox'}
-                disabled={disabled}
                 className={`m3 ${props.className ?? ''}`.trimEnd()}
+                disabled={disabled}
+                type={'checkbox'}
             />
             <svg>
                 <rect className={'m3 m3-switch-track'} />
@@ -34,5 +32,5 @@ export const Switch = forwardRef(
                 </g>
             </svg>
         </div>
-    )
+    ),
 );

src/primitive-components/switch/switch.types.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 
-export interface switchMainProps extends PropsWithChildren<any> {
+export interface SwitchMainProps extends PropsWithChildren<any> {
     disabled?: boolean;
     icon?: boolean;
     selected?: boolean;

src/primitive-components/text-field/text-field.tsx

@@ -1,26 +1,34 @@
 'use client';
 
-import React, {useState} from 'react';
+import React, { forwardRef, useState } from 'react';
 import { bool, string } from 'prop-types';
 import { type TextFieldInterface } from './text-field.types';
 
-export function TextField({
+export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
+    (
+        {
             variant = 'filled',
             withAfterIcon,
             withBeforeIcon,
             supportingText,
             ...props
-}: TextFieldInterface) {
+        },
-    const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
+        ref,
+    ) => {
+        const [raised, setRaised] = useState<boolean>(
+            props.placeholder ?? false,
+        );
 
-    const callback = (e: any) => {
+        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);
+            } else if (e.type === 'focus') {
+                setRaised(true);
+            }
         };
 
         const iconStyles =
@@ -48,15 +56,20 @@ export function TextField({
                         </span>
                     )}
                     <input
+                        ref={ref}
                         {...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);
+                            if (props.onBlur) {
+                                props.onBlur(event);
+                            }
+                        }}
+                        onFocus={event => {
+                            callback(event);
+                            if (props.onFocus) {
+                                props.onFocus(event);
+                            }
                         }}
                     />
                     <label className={raised ? 'raised' : ''}>
@@ -69,14 +82,15 @@ export function TextField({
                         </span>
                     )}
                 </div>
-            {supportingText && (
+                {supportingText !== '' && (
                     <span className={'m3-text-field-supporting-text'}>
                         {supportingText}
                     </span>
                 )}
             </span>
         );
-}
+    },
+);
 
 TextField.propTypes = {
     children: string,

src/styles/button.css

@@ -1,5 +1,8 @@
 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);
@@ -22,7 +25,8 @@ 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);
 }
@@ -44,7 +48,9 @@ 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);
 }
@@ -59,7 +65,10 @@ 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;
@@ -68,65 +77,130 @@ 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 {
+button:not(.m3-fab, .m3-icon-button).filled
-  background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+  > .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 {
+button:not(.m3-fab, .m3-icon-button):focus-visible:is(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+    .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 {
+button:not(.m3-fab, .m3-icon-button):hover:is(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+    .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 */

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,67 +37,154 @@ 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 {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
+    :user-invalid:is(:hover, :indeterminate:hover),
+    .m3.m3-error:hover
+  )
+  + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-error) 8%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
+    :user-invalid:is(:active, :indeterminate:active),
+    .m3.m3-error:active
+  )
+  + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-error) 12%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
+    :user-invalid:is(:active, :indeterminate:active),
+    .m3.m3-error:active
+  )
+  + span.m3.m3-checkbox-state-layer
+  + span.m3-ripple-domain
+  > .m3.ripple {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-error) 20%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+    :checked:hover,
+    :indeterminate:hover
+  )
+  + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-primary) 8%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+    :checked:active,
+    :indeterminate:active
+  )
+  + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-primary) 12%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
+    :checked:active,
+    :indeterminate:active
+  )
+  + span.m3.m3-checkbox-state-layer
+  + span.m3-ripple-domain
+  > .m3.ripple {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 20%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+  + span.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 8%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  + span.m3.m3-checkbox-state-layer {
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 12%,
+    transparent
+  );
 }
-input[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {
+input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
+  + 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 */

src/styles/divider.css

@@ -9,7 +9,8 @@ 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 {
@@ -19,7 +20,8 @@ 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 {

src/styles/elevation.css

@@ -1,21 +1,31 @@
 .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 */

src/styles/fabs.css

@@ -1,5 +1,8 @@
 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;
@@ -16,7 +19,10 @@ 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;
@@ -30,7 +36,9 @@ 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);
@@ -43,39 +51,57 @@ 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;
@@ -105,35 +131,81 @@ 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 {
+button.m3.m3-fab:not(.without-elevation):is(
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
+    .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 {
+button.m3.m3-fab:not(.without-elevation):is(
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
+    .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 */

src/styles/font/README.md

@@ -6,23 +6,32 @@ 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"
+<link
-      rel="stylesheet">
+  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"
+<link
-      rel="stylesheet">
+  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"
+<link
-      rel="stylesheet">
+  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"
+<link
-      rel="stylesheet">
+  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"
+<link
-      rel="stylesheet">
+  href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
+  rel="stylesheet"
+/>
 ```
-

src/styles/fonts.css

@@ -1,17 +1,20 @@
 @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;

src/styles/icon-button.css

@@ -1,5 +1,8 @@
 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;
@@ -13,7 +16,10 @@ 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%;
@@ -22,14 +28,24 @@ 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 {
+button.m3.m3-icon-button.default:disabled,
-  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+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 {
@@ -51,13 +67,18 @@ 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);
@@ -65,70 +86,183 @@ 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);
+  border: 1px solid
-  fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
+    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 {
+button.m3.m3-icon-button.filled:not(:disabled)
-  background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
+  > .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 {
+button.m3.m3-icon-button.filled:not(:disabled).toggled
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+  > .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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+  > .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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+    .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 {
+button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
-  background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
+    .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 {
+button.m3.m3-icon-button.tonal:not(:disabled)
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+  > .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 {
+button.m3.m3-icon-button.tonal:not(:disabled).toggled
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+  > .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 {
+button.m3.m3-icon-button:hover:not(:disabled).filled::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.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 {
+button.m3.m3-icon-button:hover:not(:disabled).tonal::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.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 {
+button.m3.m3-icon-button:focus-visible:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
+    .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 {
+button.m3.m3-icon-button:focus-visible:not(:disabled).filled::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.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 {
+button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::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.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 */

src/styles/mixins/m3-mixins.css

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

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,44 +26,90 @@ 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 {
+input[type="radio"].m3.m3-radio:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  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 {
+input[type="radio"].m3.m3-radio:checked:disabled {
-  border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  border: 2px solid
+    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-input[type=radio].m3.m3-radio:checked:disabled::after {
+input[type="radio"].m3.m3-radio:checked:disabled::after {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: color-mix(
+    in srgb,
+    var(--md-sys-color-on-surface) 38%,
+    transparent
+  );
 }
-input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  + 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 {
+input[type="radio"].m3.m3-radio:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+    :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 {
+input[type="radio"].m3.m3-radio:not(:disabled):is(
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
+    :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 {
+input[type="radio"].m3.m3-radio:not(:disabled):hover
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+  + 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 {
+input[type="radio"].m3.m3-radio:not(:disabled):active
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  + 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 {
+input[type="radio"].m3.m3-radio:not(:disabled):active
-  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
+  + 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 */

src/styles/ripple.css

@@ -18,7 +18,11 @@
   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;

src/styles/swtich.css

@@ -21,7 +21,8 @@ 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;
@@ -53,72 +54,136 @@ 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;
 }
@@ -131,17 +196,28 @@ 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);
 }

src/styles/text-field.css

@@ -9,7 +9,9 @@ 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);
 }
@@ -52,7 +54,8 @@ 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 {
@@ -62,7 +65,9 @@ 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 {
@@ -106,7 +111,10 @@ 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 {
@@ -116,9 +124,15 @@ 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;
@@ -170,14 +184,22 @@ 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;
@@ -187,7 +209,8 @@ div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-
 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);
 }
@@ -197,16 +220,30 @@ 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);
 }

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.50px;
+  --md-sys-typescale-body-large-letter-spacing: 0.5px;
   /* 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.40px;
+  --md-sys-typescale-body-small-letter-spacing: 0.4px;
   /* label - large */
   --md-sys-typescale-label-large-font-family-name: Roboto;
   --md-sys-typescale-label-large-font-family-style: Medium;
   --md-sys-typescale-label-large-font-weight: 500;
   --md-sys-typescale-label-large-font-size: 14px;
   --md-sys-typescale-label-large-line-height: 20px;
-  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  --md-sys-typescale-label-large-letter-spacing: 0.1px;
   /* label - medium */
   --md-sys-typescale-label-medium-font-family-name: Roboto;
   --md-sys-typescale-label-medium-font-family-style: Medium;
   --md-sys-typescale-label-medium-font-weight: 500;
   --md-sys-typescale-label-medium-font-size: 12px;
   --md-sys-typescale-label-medium-line-height: 16px;
-  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.5px;
   /* label - small */
   --md-sys-typescale-label-small-font-family-name: Roboto;
   --md-sys-typescale-label-small-font-family-style: Medium;
   --md-sys-typescale-label-small-font-weight: 500;
   --md-sys-typescale-label-small-font-size: 11px;
   --md-sys-typescale-label-small-line-height: 16px;
-  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  --md-sys-typescale-label-small-letter-spacing: 0.5px;
   /* 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.10px;
+  --md-sys-typescale-title-small-letter-spacing: 0.1px;
 }

tsconfig.json

@@ -1,18 +1,23 @@
 {
-  "extends": "./node_modules/gts/tsconfig-google.json",
   "compilerOptions": {
-    "rootDir": ".",
+    "target": "es5",
-    "outDir": "build",
+    "lib": [
-    "allowSyntheticDefaultImports": true,
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "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"
@@ -20,8 +25,12 @@
     ]
   },
   "include": [
-    "src/**/*.ts",
+    "next-env.d.ts",
-    "test/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
     ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }