diff --git a/README.md b/README.md
index 4eebdc3..38f0f87 100644
--- a/README.md
+++ b/README.md
@@ -9,24 +9,25 @@ This repository is including and will be including components, enumerates in tab
   - [x] Icon
   - [x] FAB
   - [X] Radio
-  - [ ] Segmented (WIP)
+  - [X] Segmented
 - [X] Checkbox
 - [x] Text fields
 - [X] Switches
-- [ ] Chips
 - [x] Icon
 - [x] Ripple Effect
 - [X] Dividers
 - [x] Badges
-- [ ] Select field
-- [ ] Bottom sheets
 - [X] Cards
+- [X] Typography
+- [ ] Chips
+- [ ] Select field (WIP)
+- [ ] Bottom sheets
 - [ ] Menus
 - [ ] Navigation
   - [ ] Bars
   - [ ] Drawer
   - [ ] Rail
-- [ ] Sliders
+- [ ] Sliders (WIP)
 - [ ] Snackbar
 - [ ] Tabs
 - [ ] Bottom sheets
diff --git a/app/page.tsx b/app/page.tsx
index d17a745..f09e93d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
-import {Checkbox, Radio} from '../src/primitive-components/components';
+import { Checkbox, IconButton } from '../src/primitive-components/components';
 import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
@@ -9,7 +9,6 @@ import { CardHeader } from '../src/primitive-components/card/card-header';
 import { Typography } from '../src/primitive-components/typography/typography';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
 import { Slider } from '../src/primitive-components/input-components/slider/slider';
-import { Button } from '../src/primitive-components/button-components/button/button';
 import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
 import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
 
@@ -25,15 +24,22 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}>
+                <div
+                    style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
+                >
                     <Card variant={'outlined'}>
                         <CardHeader>
-                            <Typography.h3> Header-3 </Typography.h3>
+                            <Typography role={'headline'} size={'large'}>
+                                Welcome to Material You for Next.js!
+                            </Typography>
+                            <Typography role={'body'} size={'large'}>
+                                {"It's UI kit for fast frontend development!"}
+                            </Typography>
                         </CardHeader>
                         <CardActionArea>
                             <CardMedia src={testImage1.src} type={'img'} />
                             <CardBody>
-                                <p>
+                                <Typography role={'body'} size={'large'}>
                                     Lorem ipsum dolor sit amet, consecrate
                                     adipiscing elit, sed do eiusmod tempor
                                     incididunt ut labore et dolore magna aliqua.
@@ -45,16 +51,20 @@ export default function Page() {
                                     Excepteur sint occaecat cupidatat non
                                     proident, sunt in culpa qui officia deserunt
                                     mollit anim id est laborum.
-                                </p>
+                                </Typography>
                             </CardBody>
                         </CardActionArea>
                         <CardFooter>
                             <div className={'flex flex-row gap-3'}>
-                                <Button icon={'add'}>Label 1</Button>
-                                <Button icon={'add'} iconPlace={'right'}>
-                                    Label 2
-                                </Button>
-                                <SegmentedButtons>
+                                <IconButton
+                                    icon={'add'}
+                                    toggled={{
+                                        selected: 'settings',
+                                        unselected: 'add',
+                                    }}
+                                    variant={'filled'}
+                                />
+                                <SegmentedButtons toggled={true}>
                                     <SegmentButton
                                         fillIcon={1}
                                         icon={'change_history'}
@@ -73,8 +83,13 @@ export default function Page() {
                                     </SegmentButton>
                                 </SegmentedButtons>
                                 <Checkbox />
-                                <Radio />
-                                <Slider />
+                                <Slider
+                                    defaultValue={0}
+                                    max={100}
+                                    min={0}
+                                    options={[0, 10, 20, 100]}
+                                />
+                                <Slider defaultValue={0} max={100} min={0} />
                             </div>
                         </CardFooter>
                     </Card>
diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx
index 6bd73d6..57fc106 100644
--- a/src/primitive-components/button-components/button/button.tsx
+++ b/src/primitive-components/button-components/button/button.tsx
@@ -5,6 +5,7 @@ import { ButtonProps } from './button.types';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
 import { IconWrapper } from '../../icon/icon-wrapper';
+import { Typography } from '../../typography/typography';
 
 /**
  * Button component
@@ -32,7 +33,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             ref={ref}
         >
             <IconWrapper icon={icon} iconPlace={iconPlace}>
-                <span className={'label-large'}>{props.children}</span>
+                <Typography
+                    className={'label-large'}
+                    role={'label'}
+                    size={'large'}
+                >
+                    {props.children}
+                </Typography>
             </IconWrapper>
         </ButtonLayout>
     ),
diff --git a/src/primitive-components/button-components/fab/fab.tsx b/src/primitive-components/button-components/fab/fab.tsx
index 250f045..8e67b83 100644
--- a/src/primitive-components/button-components/fab/fab.tsx
+++ b/src/primitive-components/button-components/fab/fab.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
-import { Icon } from '../../components';
 import { FABProps } from './fab.types';
+import { Icon } from '../../components';
+import React, { forwardRef } from 'react';
 import { bool, oneOf, string } from 'prop-types';
+import { Typography } from '../../typography/typography';
 import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
@@ -21,6 +22,7 @@ const sizes = {
 export const FAB = forwardRef<HTMLButtonElement, FABProps>(
     (
         {
+            children,
             icon = 'edit',
             className = '',
             size = 'default',
@@ -43,7 +45,13 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
                 {icon}
             </Icon>
             {size === 'extended' ? (
-                <span className={'label-large'}>{props.children}</span>
+                <Typography
+                    className={'label-large'}
+                    role={'label'}
+                    size={'large'}
+                >
+                    {children}
+                </Typography>
             ) : (
                 <></>
             )}
diff --git a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
index ed084b6..5497d78 100644
--- a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx
@@ -3,10 +3,8 @@
 import { string } from 'prop-types';
 import React, { forwardRef, useState } from 'react';
 import { IconWrapper } from '../../icon/icon-wrapper';
+import { Typography } from '../../typography/typography';
 import { SegmentedButton } from './segmented-buttons.types';
-import { ButtonLayout } from '../button-layout/button-layout';
-import { ButtonLayoutProps } from '../button-layout/button-layout.types';
-
 export const SegmentButton = forwardRef<
     HTMLButtonElement,
     ButtonLayoutProps & SegmentedButton
@@ -19,6 +17,7 @@ export const SegmentButton = forwardRef<
             weight,
             svgSize,
             fillIcon,
+            children,
             iconSize,
             opticalSize,
             toggled = false,
@@ -58,13 +57,22 @@ export const SegmentButton = forwardRef<
                     type={type}
                     weight={weight}
                 >
-                    <span className={'label-large'}>{props.children}</span>
+                    <Typography
+                        className={'label-large'}
+                        role={'label'}
+                        size={'large'}
+                    >
+                        {children}
+                    </Typography>
                 </IconWrapper>
                 <span className={'m3 m3-button-segment-state-layer'} />
             </ButtonLayout>
         );
     },
 );
+import { ButtonLayout } from '../button-layout/button-layout';
+
+import { ButtonLayoutProps } from '../button-layout/button-layout.types';
 
 SegmentButton.propTypes = {
     children: string,
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
index 8d049e9..c4cadaa 100644
--- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
+++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
@@ -1,11 +1,10 @@
 import { HTMLAttributes, ReactElement } from 'react';
-import { IconProps, IconWrapperProps } from '../../icon/icon.types';
+import { IconWrapperProps } from '../../icon/icon.types';
 
 export type SegmentedButton = IconWrapperProps & {
     icon?: string;
     toggled?: boolean;
     centralRipple?: boolean;
-    children?: string | ReactElement<IconProps>;
 };
 
 export interface SegmentedButtons {
diff --git a/src/primitive-components/icon/icon.types.ts b/src/primitive-components/icon/icon.types.ts
index 9f26de1..8fb0f28 100644
--- a/src/primitive-components/icon/icon.types.ts
+++ b/src/primitive-components/icon/icon.types.ts
@@ -20,7 +20,4 @@ export type IconWrapperProps = IconPlacement &
         icon?: string;
     };
 
-export type IconProps = SVGProps<SVGSVGElement> &
-    GeneralIconProps & {
-        children?: string | undefined;
-    };
+export type IconProps = SVGProps<SVGSVGElement> & GeneralIconProps;
diff --git a/src/primitive-components/input-components/checkbox/checkbox.tsx b/src/primitive-components/input-components/checkbox/checkbox.tsx
index 27f59ad..cd9046a 100644
--- a/src/primitive-components/input-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/input-components/checkbox/checkbox.tsx
@@ -3,8 +3,8 @@
 import { bool } from 'prop-types';
 import { CheckboxProps } from './checkbox.types';
 import { RippleEffect } from '../../ripple/ripple-effect';
-import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import { InputLayout } from '../input-layout/input-layout';
+import useRippleEffect from '../../ripple/hooks/useRippleEffect';
 import {
     forwardRef,
     useEffect,
@@ -51,7 +51,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                     className={'m3-checkbox-ripple-layer'}
                     ref={ripplesRef}
                 />
-                {props.children}
             </div>
         );
     },
diff --git a/src/primitive-components/input-components/input-layout/input-layout.types.ts b/src/primitive-components/input-components/input-layout/input-layout.types.ts
index 4dc77ec..c7131b8 100644
--- a/src/primitive-components/input-components/input-layout/input-layout.types.ts
+++ b/src/primitive-components/input-components/input-layout/input-layout.types.ts
@@ -6,7 +6,3 @@ export interface InputLayoutProps
     typeInput?: string;
     type?: string;
 }
-
-export interface LabelPlacement {
-    labelPlacement?: 'left' | 'right';
-}
diff --git a/src/primitive-components/input-components/slider/slider.tsx b/src/primitive-components/input-components/slider/slider.tsx
index 248dc55..4b18604 100644
--- a/src/primitive-components/input-components/slider/slider.tsx
+++ b/src/primitive-components/input-components/slider/slider.tsx
@@ -1,18 +1,60 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
-import { InputLayout } from '../input-layout/input-layout';
+'use client';
 
-export const Slider = forwardRef<
-    HTMLInputElement,
-    HTMLAttributes<HTMLInputElement>
->((props, ref) => {
-    return (
-        <div className={'m3 m3-slider-container'}>
-            <InputLayout
-                className={props.className}
-                ref={ref}
-                type={'range'}
-                typeInput={'slider'}
-            />
-        </div>
-    );
-});
+import { InputLayout } from '../input-layout/input-layout';
+import React, {
+    ChangeEvent,
+    forwardRef,
+    InputHTMLAttributes,
+    useId,
+    useLayoutEffect,
+    useState,
+} from 'react';
+
+interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
+    options?: number[];
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+    ({ options, ...props }, ref) => {
+        const sliderId = useId();
+        const [isChrome, setIsChrome] = useState<boolean>(false);
+
+        useLayoutEffect(() => {
+            setIsChrome(navigator.userAgent.indexOf('AppleWebKit') != -1);
+        }, []);
+
+        return (
+            <div className={'m3 m3-slider-container'}>
+                <InputLayout
+                    {...props}
+                    className={props.className}
+                    list={sliderId}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                        props.onChange?.apply(this, props?.onChange?.prototype);
+
+                        if (isChrome) {
+                            const fraction =
+                                (parseInt(event.target.value) /
+                                    parseInt(event.target.max)) *
+                                100;
+                            event.target.style.background = `linear-gradient(\
+                            to right, var(--md-sys-color-primary) ${fraction}%, \
+                            var(--md-sys-color-surface-container-highest) ${fraction}%\
+                            )`;
+                        }
+                    }}
+                    ref={ref}
+                    type={'range'}
+                    typeInput={'slider'}
+                />
+                {options && (
+                    <datalist id={sliderId}>
+                        {options.map((option, index) => (
+                            <option key={index} value={option} />
+                        ))}
+                    </datalist>
+                )}
+            </div>
+        );
+    },
+);
diff --git a/src/primitive-components/input-components/switch/switch.tsx b/src/primitive-components/input-components/switch/switch.tsx
index 070d146..855aa9f 100644
--- a/src/primitive-components/input-components/switch/switch.tsx
+++ b/src/primitive-components/input-components/switch/switch.tsx
@@ -4,37 +4,41 @@ import { bool } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { InputLayout } from '../input-layout/input-layout';
-import { LabelPlacement } from '../input-layout/input-layout.types';
 
 /**
  * Switch component
  ** description
  */
 
-export const Switch = forwardRef<
-    HTMLInputElement,
-    SwitchMainProps & LabelPlacement
->(({ icon, selected = false, ...props }, ref) => (
-    <div className={'m3 m3-switch'}>
-        <InputLayout
-            {...props}
-            className={`m3 ${props.className ?? ''}`.trimEnd()}
-            ref={ref}
-            type={'checkbox'}
-        />
-        <svg>
-            <rect className={'m3 m3-switch-track'} />
-            <circle className={'m3 m3-switch-handler'} />
-            <circle className={'m3 m3-switch-handler-state-layer'} />
-            <g>
-                {icon && !selected && (
-                    <text className={'m3 m3-icon-unchecked'}>close</text>
-                )}
-                {icon && <text className={'m3 m3-icon-checked'}>check</text>}
-            </g>
-        </svg>
-    </div>
-));
+export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
+    ({ icon, selected = false, ...props }, ref) => (
+        <>
+            <div className={'m3 m3-switch'}>
+                <InputLayout
+                    {...props}
+                    className={`m3 ${props.className ?? ''}`.trimEnd()}
+                    ref={ref}
+                    type={'checkbox'}
+                />
+                <svg>
+                    <rect className={'m3 m3-switch-track'} />
+                    <circle className={'m3 m3-switch-handler'} />
+                    <circle className={'m3 m3-switch-handler-state-layer'} />
+                    <g>
+                        {icon && !selected && (
+                            <text className={'m3 m3-icon-unchecked'}>
+                                close
+                            </text>
+                        )}
+                        {icon && (
+                            <text className={'m3 m3-icon-checked'}>check</text>
+                        )}
+                    </g>
+                </svg>
+            </div>
+        </>
+    ),
+);
 
 Switch.propTypes = {
     icon: bool,
diff --git a/src/primitive-components/typography/typography.tsx b/src/primitive-components/typography/typography.tsx
index b072768..83142ec 100644
--- a/src/primitive-components/typography/typography.tsx
+++ b/src/primitive-components/typography/typography.tsx
@@ -1,76 +1,25 @@
-import { forwardRef, HTMLAttributes } from 'react';
+import { createElement, forwardRef } from 'react';
+import { getTypographyRole } from './utils/get-typography-role';
+import {
+    TypographyProps,
+    Typography as TypographyTargetRef,
+} from './typography.types';
 
-export const Typography = {
-    h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h1
-                    className={`m3 m3-typography display-hero ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h1>
-            );
-        },
-    ),
-    h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h2
-                    className={`m3 m3-typography display-large ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h2>
-            );
-        },
-    ),
-    h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h3
-                    className={`m3 m3-typography headline-medium ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h3>
-            );
-        },
-    ),
-    h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h4
-                    className={`m3 m3-typography headline-small ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h4>
-            );
-        },
-    ),
-    h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h5
-                    className={`m3 m3-typography title-medium ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h5>
-            );
-        },
-    ),
-    h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-        (props, ref) => {
-            return (
-                <h6
-                    className={`m3 m3-typography title-small ${props.className}`}
-                    ref={ref}
-                >
-                    {props.children}
-                </h6>
-            );
-        },
-    ),
-};
+export const Typography = forwardRef<TypographyTargetRef, TypographyProps>(
+    ({ size, role, children, ...props }, ref) => {
+        const typeElement = getTypographyRole(role, size);
+
+        const extraClasses =
+            `m3 m3-typography ${size && role ? `${role}-${size}` : ''}`.trimEnd();
+
+        return createElement(
+            typeElement,
+            {
+                ...props,
+                ref: ref,
+                className: extraClasses,
+            },
+            children,
+        );
+    },
+);
diff --git a/src/primitive-components/typography/typography.types.ts b/src/primitive-components/typography/typography.types.ts
new file mode 100644
index 0000000..141479d
--- /dev/null
+++ b/src/primitive-components/typography/typography.types.ts
@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+
+export type Typography =
+    | HTMLLabelElement
+    | HTMLHeadingElement
+    | HTMLSpanElement
+    | HTMLParagraphElement;
+
+export type TypographySize = 'hero' | 'xl' | 'small' | 'medium' | 'large';
+
+export type TypographyRole =
+    | 'display'
+    | 'headline'
+    | 'title'
+    | 'body'
+    | 'label';
+
+export interface TypographyProps extends HTMLAttributes<Typography> {
+    size: TypographySize;
+    role: TypographyRole;
+}
diff --git a/src/primitive-components/typography/utils/get-typography-role.ts b/src/primitive-components/typography/utils/get-typography-role.ts
new file mode 100644
index 0000000..c67a92e
--- /dev/null
+++ b/src/primitive-components/typography/utils/get-typography-role.ts
@@ -0,0 +1,32 @@
+import { TypographyRole, TypographySize } from '../typography.types';
+
+export function getTypographyRole(role: TypographyRole, size: TypographySize) {
+    switch (role) {
+        case 'display':
+            return 'h1';
+        case 'headline':
+            switch (size) {
+                case 'large' || 'hero' || 'xl':
+                    return 'h2';
+                case 'medium':
+                    return 'h3';
+                case 'small':
+                    return 'h4';
+            }
+            break;
+        case 'title':
+            switch (size) {
+                case 'large' || 'hero' || 'xl':
+                    return 'h4';
+                case 'medium':
+                    return 'h5';
+                case 'small':
+                    return 'h6';
+            }
+            break;
+        case 'body':
+            return 'p';
+        case 'label':
+            return 'label';
+    }
+}
diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass
index a23ddfb..a0e18c0 100644
--- a/src/styles/button-styles/segmented-button.sass
+++ b/src/styles/button-styles/segmented-button.sass
@@ -30,6 +30,9 @@ div.m3.m3-segmented-buttons
         & > svg > text
             fill: var(--md-sys-color-on-surface)
 
+        & > span.m3.m3-ripple-domain > span.m3.ripple
+            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
+
         &:disabled
             border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
 
@@ -61,6 +64,3 @@ div.m3.m3-segmented-buttons
             & > span.m3.m3-button-segment-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
 
-        &:active
-            & > span.m3.m3-ripple-domain > span.m3.ripple
-                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
diff --git a/src/styles/card.sass b/src/styles/card.sass
index 1d55299..dd45522 100644
--- a/src/styles/card.sass
+++ b/src/styles/card.sass
@@ -12,17 +12,17 @@ div.m3.m3-card
     & > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child,
     & > .m3-card-media:first-child,
     & > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
-        padding: padding-calculating(false)
         border-radius: 12px !important
+        padding: padding-calculating(false)
 
 div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child
-    padding: padding-calculating(false)
     border-radius: 12px !important
+    padding: padding-calculating(false)
 
 div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
-    padding: padding-calculating(true)
     display: block
     box-sizing: border-box
+    padding: padding-calculating(true)
 
 .m3.m3-card-media
     &.m3-rounded
@@ -40,7 +40,7 @@ div.m3.m3-card-action-area
     contain: content
     position: relative
     border-radius: inherit
-    transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1)
 
     & > div.m3.m3-card-action-area-content
         top: 0
@@ -52,7 +52,9 @@ div.m3.m3-card-action-area
         width: 100%
         height: 100%
         position: absolute
-        transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+    & > .m3.m3-ripple-domain > .m3.ripple
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
     &:hover
         & > span.m3.m3-card-state-layer
@@ -79,6 +81,3 @@ div.m3.m3-card-action-area
         &:not(&:has(span.m3.m3-ripple-domain))
             & > span.m3.m3-card-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
-
-        & > span.m3.m3-ripple-domain > .m3.ripple
-            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
diff --git a/src/styles/fonts.sass b/src/styles/fonts.sass
index 40c7fb8..39606ab 100644
--- a/src/styles/fonts.sass
+++ b/src/styles/fonts.sass
@@ -10,7 +10,7 @@ $weights: ("Thin": 100, "Light": 300, "Regular": 400, "Medium": 500, "Bold": 700
 
 @each $name, $weight in $weights
     @font-face
-        font-family: Roboto
+        font-family: Roboto, sans-serif
         font-face-name: #{$name}
         font-weight: #{$weight}
         src: url("./font/Roboto-#{$name}.ttf")
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 13eef79..dcdd403 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -1,22 +1,19 @@
-@import "./themes/tokens.css";
-@import "./themes/colors.module.css";
-@import "./themes/typography.module.css";
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark);
 @import "./themes/theme.light.css" (prefers-color-scheme: light);
 div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
-  padding: 0px;
   border-radius: 12px !important;
+  padding: 0px;
 }
 
 div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child {
-  padding: 0px;
   border-radius: 12px !important;
+  padding: 0px;
 }
 
 div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 {
-  padding: 16px;
   display: block;
   box-sizing: border-box;
+  padding: 16px;
 }
 
 .m3.m3-card-media {
@@ -36,7 +33,7 @@ div.m3.m3-card-action-area {
   contain: content;
   position: relative;
   border-radius: inherit;
-  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
+  transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 div.m3.m3-card-action-area > div.m3.m3-card-action-area-content {
   top: 0;
@@ -48,7 +45,9 @@ div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
   width: 100%;
   height: 100%;
   position: absolute;
-  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
 div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
@@ -71,67 +70,65 @@ div.m3.m3-card-action-area:active.m3-card-elevated {
 div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
-}
 
 svg.m3.m3-svg-icon > text {
-  alignment-baseline: central;
   text-anchor: middle;
+  dominant-baseline: central;
+  alignment-baseline: central;
 }
 svg.m3.m3-svg-icon > text.m3-size-12px {
   width: 12px;
   aspect-ratio: 1;
-  line-height: 12px;
   font-size: 12px;
+  line-height: 12px;
 }
 svg.m3.m3-svg-icon > text.m3-size-16px {
   width: 16px;
   aspect-ratio: 1;
-  line-height: 16px;
   font-size: 16px;
+  line-height: 16px;
 }
 svg.m3.m3-svg-icon > text.m3-size-20px {
   width: 20px;
   aspect-ratio: 1;
-  line-height: 20px;
   font-size: 20px;
+  line-height: 20px;
 }
 svg.m3.m3-svg-icon > text.m3-size-24px {
   width: 24px;
   aspect-ratio: 1;
-  line-height: 24px;
   font-size: 24px;
+  line-height: 24px;
 }
 svg.m3.m3-svg-icon > text.m3-size-28px {
   width: 28px;
   aspect-ratio: 1;
-  line-height: 28px;
   font-size: 28px;
+  line-height: 28px;
 }
 svg.m3.m3-svg-icon > text.m3-size-32px {
   width: 32px;
   aspect-ratio: 1;
-  line-height: 32px;
   font-size: 32px;
+  line-height: 32px;
 }
 svg.m3.m3-svg-icon > text.m3-size-36px {
   width: 36px;
   aspect-ratio: 1;
-  line-height: 36px;
   font-size: 36px;
+  line-height: 36px;
 }
 svg.m3.m3-svg-icon > text.m3-size-40px {
   width: 40px;
   aspect-ratio: 1;
-  line-height: 40px;
   font-size: 40px;
+  line-height: 40px;
 }
 svg.m3.m3-svg-icon > text.m3-size-48px {
   width: 48px;
   aspect-ratio: 1;
-  line-height: 48px;
   font-size: 48px;
+  line-height: 48px;
 }
 svg.m3.m3-svg-icon > text.m3-Outlined {
   font-family: Material-Symbols-Outlined-Regular;
@@ -189,37 +186,37 @@ svg.m3.m3-badge > text {
   src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Thin;
   font-weight: 100;
   src: url("./font/Roboto-Thin.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Light;
   font-weight: 300;
   src: url("./font/Roboto-Light.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Regular;
   font-weight: 400;
   src: url("./font/Roboto-Regular.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Medium;
   font-weight: 500;
   src: url("./font/Roboto-Medium.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Bold;
   font-weight: 700;
   src: url("./font/Roboto-Bold.ttf");
 }
 @font-face {
-  font-family: Roboto;
+  font-family: Roboto, sans-serif;
   font-face-name: Black;
   font-weight: 900;
   src: url("./font/Roboto-Black.ttf");
@@ -241,10 +238,13 @@ svg.m3.m3-badge > text {
   z-index: 20;
   aspect-ratio: 1;
   border-radius: 50%;
+  animation-duration: 0.55s;
+  animation-iteration-count: 1;
   animation-name: rippleAppearanceAnimation;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.55s;
-  transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.55s;
+  transition-property: opacity, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .m3.ripple.visible {
   opacity: 1 !important;
@@ -305,6 +305,12 @@ div.m3.m3-container.m3-container-elevated {
   background-color: var(--md-sys-color-surface-container-low);
 }
 
+label {
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 button.m3.m3-fab {
   transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
 }
@@ -753,6 +759,9 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
   fill: var(--md-sys-color-on-surface);
 }
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
   border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
 }
@@ -782,9 +791,6 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-but
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active > span.m3.m3-ripple-domain > span.m3.ripple {
-  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
-}
 
 div.m3.m3-radio-container {
   width: 20px;
@@ -793,12 +799,16 @@ div.m3.m3-radio-container {
   display: inline-flex;
   justify-content: center;
 }
+div.m3.m3-radio-container + label.m3.m3-radio-label {
+  margin-inline: 3px;
+}
 div.m3.m3-radio-container > span.m3-checkbox-ripple-layer, div.m3.m3-radio-container span.m3.m3-radio-state-layer {
   z-index: 5;
+  width: 40px;
+  height: 40px;
+  aspect-ratio: 1;
 }
 div.m3.m3-radio-container > span.m3.m3-radio-state-layer {
-  width: 40px;
-  aspect-ratio: 1;
   border-radius: 50%;
   position: absolute;
   pointer-events: none;
@@ -880,71 +890,113 @@ div.m3.m3-slider-container {
   display: flex;
   align-items: center;
 }
+div.m3.m3-slider-container > datalist {
+  display: none;
+}
 
 input[type=range].m3.m3-slider {
   margin: 0;
-  height: 4px;
   appearance: none;
-  overflow: visible;
   border-radius: 2px;
-  margin-inline: 10px;
-  background-color: var(--md-sys-color-surface-container-highest);
+  margin-inline: 8px;
+  background: var(--md-sys-color-surface-container-highest);
+}
+input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) {
+  height: 4px;
+}
+input[type=range].m3.m3-slider:-webkit-any(input[type=range].m3.m3-slider) {
+  background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%);
+}
+input[type=range].m3.m3-slider::-moz-range-track {
+  height: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+}
+input[type=range].m3.m3-slider::-moz-range-progress {
+  height: 4px;
+  overflow: hidden;
+  border-radius: 2px;
+  background-color: var(--md-sys-color-primary);
+}
+input[type=range].m3.m3-slider::-moz-range-thumb {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  width: 20px;
+  height: 20px;
+  appearance: none;
+  border-radius: 50%;
+  box-sizing: border-box;
+  outline: 10px solid transparent;
+  background: var(--md-sys-color-primary);
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+  border: none;
+}
+input[type=range].m3.m3-slider::-moz-range-thumb:hover {
+  outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+input[type=range].m3.m3-slider::-moz-range-thumb:hover:after {
+  content: "1";
+}
+input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
+  outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 input[type=range].m3.m3-slider::-webkit-slider-container {
-  margin-inline: -8px;
+  appearance: none;
+  box-shadow: none;
+  border-radius: 2px;
+  min-block-size: 4px;
+  height: 4px;
+}
+input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
+  height: 20px;
 }
 input[type=range].m3.m3-slider::-webkit-slider-thumb {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   width: 20px;
-  aspect-ratio: 1;
+  height: 20px;
   appearance: none;
-  overflow: visible;
   border-radius: 50%;
   box-sizing: border-box;
   outline: 10px solid transparent;
   background: var(--md-sys-color-primary);
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
-  width: 40px;
-  aspect-ratio: 1;
-  background-color: transparent;
-}
 input[type=range].m3.m3-slider::-webkit-slider-thumb:hover {
   outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
+input[type=range].m3.m3-slider::-webkit-slider-thumb:hover:after {
+  content: "1";
+}
 input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible) {
   outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
 
 div.m3.m3-switch {
-  margin: 4px;
   gap: 20px;
-  box-sizing: content-box;
+  margin: 4px;
+  height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 32px;
+  justify-content: left;
+  box-sizing: content-box;
 }
 div.m3.m3-switch > svg {
-  overflow: visible;
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: 52px;
   height: 32px;
+  overflow: visible;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > g {
   transform: translate(11.5%, 81%);
   transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > g > text {
-  font-family: Material-Symbols-Outlined-Regular;
   font-size: 20px;
+  font-family: Material-Symbols-Outlined-Regular, serif;
 }
 div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
-  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cy: 50%;
   cx: 16px;
+  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
   r: 20px;
@@ -962,13 +1014,13 @@ div.m3.m3-switch > svg > rect.m3.m3-switch-track {
   height: 30px;
 }
 div.m3.m3-switch > input.m3 {
-  cursor: pointer;
-  appearance: none;
-  opacity: 0 !important;
   margin: 0;
   width: 52px;
   height: 32px;
+  cursor: pointer;
+  appearance: none;
   position: absolute;
+  opacity: 0 !important;
 }
 div.m3.m3-switch > input.m3:disabled {
   cursor: not-allowed;
@@ -1007,30 +1059,30 @@ div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-sw
   r: 14px;
 }
 div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 38%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
   fill: var(--md-sys-color-primary-container);
 }
 div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-primary);
   fill-opacity: 8%;
+  fill: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > 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 > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 8%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-primary);
   fill-opacity: 12%;
+  fill: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
-  fill: var(--md-sys-color-on-surface);
   fill-opacity: 12%;
+  fill: var(--md-sys-color-on-surface);
 }
 div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
   rx: 16px;
@@ -1047,8 +1099,8 @@ div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
   fill: var(--md-sys-color-surface-container-highest);
 }
 div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
-  stroke: var(--md-sys-color-primary);
   fill: var(--md-sys-color-primary);
+  stroke: var(--md-sys-color-primary);
 }
 div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
   fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
@@ -1062,28 +1114,27 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
 div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
-  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
   fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
 }
 
 div.m3.m3-checkbox-container {
+  gap: 16px;
+  height: 40px;
   display: flex;
+  aspect-ratio: 1;
   position: relative;
   align-items: center;
   justify-content: center;
-  aspect-ratio: 1;
-  width: 18px;
-  height: 18px;
 }
 div.m3.m3-checkbox-container > span.m3.m3-checkbox-state-layer {
-  position: absolute;
-  width: 2.5rem;
-  aspect-ratio: inherit;
+  width: 40px;
+  aspect-ratio: 1;
   border-radius: 50%;
+  position: absolute;
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-
-span.m3.m3-checkbox-ripple-layer {
+div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
   z-index: 20;
   width: 2.5rem;
   height: 2.5rem;
@@ -1093,7 +1144,6 @@ span.m3.m3-checkbox-ripple-layer {
 }
 
 input[type=checkbox].m3.m3-checkbox {
-  margin: 0;
   z-index: 10;
   display: flex;
   width: 1.125rem;
@@ -1107,6 +1157,7 @@ input[type=checkbox].m3.m3-checkbox {
   transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
+  position: absolute;
   color: var(--md-sys-color-on-surface-variant);
   transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
@@ -1132,13 +1183,13 @@ input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox]
   opacity: 38%;
 }
 input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
-  pointer-events: none;
   z-index: 10;
   display: flex;
   font-size: 24px;
   font-weight: 700;
   line-height: 24px;
   align-items: center;
+  pointer-events: none;
   justify-content: center;
   font-family: Material-Symbols-Outlined-Regular, sans-serif;
   font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
@@ -1394,16 +1445,733 @@ div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(
   border-color: var(--md-sys-color-on-surface);
 }
 
+:root {
+  /* display - hero */
+  --md-sys-typescale-display-hero-font-family-name: Roboto;
+  --md-sys-typescale-display-hero-font-family-style: Regular;
+  --md-sys-typescale-display-hero-font-weight: 475;
+  --md-sys-typescale-display-hero-font-size: 112px;
+  --md-sys-typescale-display-hero-line-height: 1;
+  --md-sys-typescale-display-hero-letter-spacing: 0;
+  /* display - xl */
+  --md-sys-typescale-display-xl-font-family-name: Roboto;
+  --md-sys-typescale-display-xl-font-family-style: Regular;
+  --md-sys-typescale-display-xl-font-weight: 475;
+  --md-sys-typescale-display-xl-font-size: 88px;
+  --md-sys-typescale-display-xl-line-height: 96px;
+  --md-sys-typescale-display-xl-letter-spacing: 0;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-weight: 400;
+  --md-sys-typescale-display-large-font-size: 57px;
+  --md-sys-typescale-display-large-line-height: 64px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-weight: 400;
+  --md-sys-typescale-display-medium-font-size: 45px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-weight: 400;
+  --md-sys-typescale-display-small-font-size: 36px;
+  --md-sys-typescale-display-small-line-height: 44px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-weight: 400;
+  --md-sys-typescale-headline-large-font-size: 32px;
+  --md-sys-typescale-headline-large-line-height: 40px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-weight: 400;
+  --md-sys-typescale-headline-medium-font-size: 28px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-weight: 400;
+  --md-sys-typescale-headline-small-font-size: 24px;
+  --md-sys-typescale-headline-small-line-height: 32px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-weight: 400;
+  --md-sys-typescale-title-large-font-size: 22px;
+  --md-sys-typescale-title-large-line-height: 28px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Medium;
+  --md-sys-typescale-title-medium-font-weight: 500;
+  --md-sys-typescale-title-medium-font-size: 16px;
+  --md-sys-typescale-title-medium-line-height: 24px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Medium;
+  --md-sys-typescale-title-small-font-weight: 500;
+  --md-sys-typescale-title-small-font-size: 14px;
+  --md-sys-typescale-title-small-line-height: 20px;
+  --md-sys-typescale-title-small-letter-spacing: 0.1px;
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-weight: 400;
+  --md-sys-typescale-body-large-font-size: 16px;
+  --md-sys-typescale-body-large-line-height: 24px;
+  --md-sys-typescale-body-large-letter-spacing: 0.5px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-weight: 400;
+  --md-sys-typescale-body-medium-font-size: 14px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-weight: 400;
+  --md-sys-typescale-body-small-font-size: 12px;
+  --md-sys-typescale-body-small-line-height: 16px;
+  --md-sys-typescale-body-small-letter-spacing: 0.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.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.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.5px;
+  /* shape - extra large top rounding */
+  --md-sys-shape-extra-large-top-rounding: 28px 28px 0 0;
+  /* shape - extra large rounding */
+  --md-sys-shape-extra-large-rounding: 28px;
+  /* shape - large top rounding */
+  --md-sys-shape-large-top-rounding: 16px 16px 0 0;
+  /* shape - large end rounding */
+  --md-sys-shape-large-end-rounding: 0 16px 16px 0;
+  /* shape - large start rounding */
+  --md-sys-shape-large-start-rounding: 16px 0 0 16px;
+  /* shape - large rounding */
+  --md-sys-shape-large-rounding: 16px;
+  /* shape - medium rounding */
+  --md-sys-shape-medium-rounding: 12px;
+  /* shape - small rounding */
+  --md-sys-shape-small-rounding: 8px;
+  /* shape - extra small top rounding */
+  --md-sys-shape-extra-small-top-rounding: 4px 4px 0 0;
+  /* shape - extra small rounding */
+  --md-sys-shape-extra-small-rounding: 4px;
+}
+
+.primary {
+  background-color: var(--md-sys-color-primary);
+}
+
+.primary-text {
+  color: var(--md-sys-color-primary);
+}
+
+.on-primary {
+  background-color: var(--md-sys-color-on-primary);
+}
+
+.on-primary-text {
+  color: var(--md-sys-color-on-primary);
+}
+
+.primary-container {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.primary-container-text {
+  color: var(--md-sys-color-primary-container);
+}
+
+.on-primary-container {
+  background-color: var(--md-sys-color-on-primary-container);
+}
+
+.on-primary-container-text {
+  color: var(--md-sys-color-on-primary-container);
+}
+
+.primary-fixed {
+  background-color: var(--md-sys-color-primary-fixed);
+}
+
+.primary-fixed-text {
+  color: var(--md-sys-color-primary-fixed);
+}
+
+.on-primary-fixed {
+  background-color: var(--md-sys-color-on-primary-fixed);
+}
+
+.on-primary-fixed-text {
+  color: var(--md-sys-color-on-primary-fixed);
+}
+
+.primary-fixed-dim {
+  background-color: var(--md-sys-color-primary-fixed-dim);
+}
+
+.primary-fixed-dim-text {
+  color: var(--md-sys-color-primary-fixed-dim);
+}
+
+.on-primary-fixed-variant {
+  background-color: var(--md-sys-color-on-primary-fixed-variant);
+}
+
+.on-primary-fixed-variant-text {
+  color: var(--md-sys-color-on-primary-fixed-variant);
+}
+
+.secondary {
+  background-color: var(--md-sys-color-secondary);
+}
+
+.secondary-text {
+  color: var(--md-sys-color-secondary);
+}
+
+.on-secondary {
+  background-color: var(--md-sys-color-on-secondary);
+}
+
+.on-secondary-text {
+  color: var(--md-sys-color-on-secondary);
+}
+
+.secondary-container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+.secondary-container-text {
+  color: var(--md-sys-color-secondary-container);
+}
+
+.on-secondary-container {
+  background-color: var(--md-sys-color-on-secondary-container);
+}
+
+.on-secondary-container-text {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.secondary-fixed {
+  background-color: var(--md-sys-color-secondary-fixed);
+}
+
+.secondary-fixed-text {
+  color: var(--md-sys-color-secondary-fixed);
+}
+
+.on-secondary-fixed {
+  background-color: var(--md-sys-color-on-secondary-fixed);
+}
+
+.on-secondary-fixed-text {
+  color: var(--md-sys-color-on-secondary-fixed);
+}
+
+.secondary-fixed-dim {
+  background-color: var(--md-sys-color-secondary-fixed-dim);
+}
+
+.secondary-fixed-dim-text {
+  color: var(--md-sys-color-secondary-fixed-dim);
+}
+
+.on-secondary-fixed-variant {
+  background-color: var(--md-sys-color-on-secondary-fixed-variant);
+}
+
+.on-secondary-fixed-variant-text {
+  color: var(--md-sys-color-on-secondary-fixed-variant);
+}
+
+.tertiary {
+  background-color: var(--md-sys-color-tertiary);
+}
+
+.tertiary-text {
+  color: var(--md-sys-color-tertiary);
+}
+
+.on-tertiary {
+  background-color: var(--md-sys-color-on-tertiary);
+}
+
+.on-tertiary-text {
+  color: var(--md-sys-color-on-tertiary);
+}
+
+.tertiary-container {
+  background-color: var(--md-sys-color-tertiary-container);
+}
+
+.tertiary-container-text {
+  color: var(--md-sys-color-tertiary-container);
+}
+
+.on-tertiary-container {
+  background-color: var(--md-sys-color-on-tertiary-container);
+}
+
+.on-tertiary-container-text {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+.tertiary-fixed {
+  background-color: var(--md-sys-color-tertiary-fixed);
+}
+
+.tertiary-fixed-text {
+  color: var(--md-sys-color-tertiary-fixed);
+}
+
+.on-tertiary-fixed {
+  background-color: var(--md-sys-color-on-tertiary-fixed);
+}
+
+.on-tertiary-fixed-text {
+  color: var(--md-sys-color-on-tertiary-fixed);
+}
+
+.tertiary-fixed-dim {
+  background-color: var(--md-sys-color-tertiary-fixed-dim);
+}
+
+.tertiary-fixed-dim-text {
+  color: var(--md-sys-color-tertiary-fixed-dim);
+}
+
+.on-tertiary-fixed-variant {
+  background-color: var(--md-sys-color-on-tertiary-fixed-variant);
+}
+
+.on-tertiary-fixed-variant-text {
+  color: var(--md-sys-color-on-tertiary-fixed-variant);
+}
+
+.error {
+  background-color: var(--md-sys-color-error);
+}
+
+.error-text {
+  color: var(--md-sys-color-error);
+}
+
+.error-container {
+  background-color: var(--md-sys-color-error-container);
+}
+
+.error-container-text {
+  color: var(--md-sys-color-error-container);
+}
+
+.on-error {
+  background-color: var(--md-sys-color-on-error);
+}
+
+.on-error-text {
+  color: var(--md-sys-color-on-error);
+}
+
+.on-error-container {
+  background-color: var(--md-sys-color-on-error-container);
+}
+
+.on-error-container-text {
+  color: var(--md-sys-color-on-error-container);
+}
+
+.background {
+  background-color: var(--md-sys-color-background);
+}
+
+.background-text {
+  color: var(--md-sys-color-background);
+}
+
+.on-background {
+  background-color: var(--md-sys-color-on-background);
+}
+
+.on-background-text {
+  color: var(--md-sys-color-on-background);
+}
+
+.outline {
+  background-color: var(--md-sys-color-outline);
+}
+
+.outline-text {
+  color: var(--md-sys-color-outline);
+}
+
+.inverse-on-surface {
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-on-surface-text {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.inverse-surface {
+  background-color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-surface-text {
+  color: var(--md-sys-color-inverse-surface);
+}
+
+.inverse-primary {
+  background-color: var(--md-sys-color-inverse-primary);
+}
+
+.inverse-primary-text {
+  color: var(--md-sys-color-inverse-primary);
+}
+
+.shadow {
+  background-color: var(--md-sys-color-shadow);
+}
+
+.shadow-text {
+  color: var(--md-sys-color-shadow);
+}
+
+.surface-tint {
+  background-color: var(--md-sys-color-surface-tint);
+}
+
+.surface-tint-text {
+  color: var(--md-sys-color-surface-tint);
+}
+
+.outline-variant {
+  background-color: var(--md-sys-color-outline-variant);
+}
+
+.outline-variant-text {
+  color: var(--md-sys-color-outline-variant);
+}
+
+.scrim {
+  background-color: var(--md-sys-color-scrim);
+}
+
+.scrim-text {
+  color: var(--md-sys-color-scrim);
+}
+
+.surface {
+  background-color: var(--md-sys-color-surface);
+}
+
+.surface-text {
+  color: var(--md-sys-color-surface);
+}
+
+.on-surface {
+  background-color: var(--md-sys-color-on-surface);
+}
+
+.on-surface-text {
+  color: var(--md-sys-color-on-surface);
+}
+
+.surface-variant {
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+.surface-variant-text {
+  color: var(--md-sys-color-surface-variant);
+}
+
+.on-surface-variant {
+  background-color: var(--md-sys-color-on-surface-variant);
+}
+
+.on-surface-variant-text {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.surface-container-highest {
+  background-color: var(--md-sys-color-surface-container-highest);
+}
+
+.surface-container-highest-text {
+  color: var(--md-sys-color-surface-container-highest);
+}
+
+.surface-container-high {
+  background-color: var(--md-sys-color-surface-container-high);
+}
+
+.surface-container-high-text {
+  color: var(--md-sys-color-surface-container-high);
+}
+
+.surface-container {
+  background-color: var(--md-sys-color-surface-container);
+}
+
+.surface-container-text {
+  color: var(--md-sys-color-surface-container);
+}
+
+.surface-container-low {
+  background-color: var(--md-sys-color-surface-container-low);
+}
+
+.surface-container-low-text {
+  color: var(--md-sys-color-surface-container-low);
+}
+
+.surface-container-lowest {
+  background-color: var(--md-sys-color-surface-container-lowest);
+}
+
+.surface-container-lowest-text {
+  color: var(--md-sys-color-surface-container-lowest);
+}
+
+.surface-dim {
+  background-color: var(--md-sys-color-surface-dim);
+}
+
+.surface-dim-text {
+  color: var(--md-sys-color-surface-dim);
+}
+
+.surface-bright {
+  background-color: var(--md-sys-color-surface-bright);
+}
+
+.surface-bright-text {
+  color: var(--md-sys-color-surface-bright);
+}
+
+.display-hero {
+  font-family: var(--md-sys-typescale-display-hero-font-family-name);
+  font-style: var(--md-sys-typescale-display-hero-font-family-style);
+  font-weight: var(--md-sys-typescale-display-hero-font-weight);
+  font-size: var(--md-sys-typescale-display-hero-font-size);
+  letter-spacing: var(--md-sys-typescale-display-hero-letter-spacing);
+  line-height: var(--md-sys-typescale-display-hero-line-height);
+  text-transform: var(--md-sys-typescale-display-hero-text-transform);
+  text-decoration: var(--md-sys-typescale-display-hero-text-decoration);
+}
+
+.display-xl {
+  font-family: var(--md-sys-typescale-display-xl-font-family-name);
+  font-style: var(--md-sys-typescale-display-xl-font-family-style);
+  font-weight: var(--md-sys-typescale-display-xl-font-weight);
+  font-size: var(--md-sys-typescale-display-xl-font-size);
+  letter-spacing: var(--md-sys-typescale-display-xl-letter-spacing);
+  line-height: var(--md-sys-typescale-display-xl-line-height);
+  text-transform: var(--md-sys-typescale-display-xl-text-transform);
+  text-decoration: var(--md-sys-typescale-display-xl-text-decoration);
+}
+
+.display-large {
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+}
+
+.display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+}
+
+.display-small {
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+}
+
+.headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+}
+
+.headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+}
+
+.headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+}
+
+.body-large {
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+}
+
+.body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+}
+
+.body-small {
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+}
+
+.label-large {
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+
+.label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+}
+
+.label-small {
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+}
+
+.title-large {
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+}
+
+.title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+}
+
+.title-small {
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+}
+
 html {
   font-family: Roboto, serif;
   color: var(--md-sys-color-on-surface);
   background-color: var(--md-sys-color-surface-container);
 }
 
-.m3 {
-  user-select: none;
-}
-
 .m3.m3-wrapper {
   position: relative;
   display: block;
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index 72527f3..4a76ba9 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAqBQ;AACA;AACA;AACA;AACA;ACdJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;AAER;EACI;;;AE/ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;;ACvBZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;ENuBI;EMrBA;;;ACnBR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EPkDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AOtDA;EPGA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOLJ;EPAA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOFJ;EPHA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOCJ;EPNA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AOIJ;EPjBA,OOkBkC;EPjBlC,QOiBwC;EPhBxC,eOgB4B;EPf5B,SOe8C;EAC1C;;AAEJ;EPrBA,OOsBkC;EPrBlC,QOqBwC;EPpBxC,eOoB4B;EPnB5B,SOmB8C;EAC1C;;AAEJ;EPzBA,OO0BkC;EPzBlC,QOyBwC;EPxBxC,eOwB4B;EPvB5B,SOuB8C;EAC1C;;AAEJ;EP7BA,OO8BkC;EP7BlC,QO6BwC;EP5BxC,eO4B4B;EP3B5B,SO2B8C;EAC1C;;AAEJ;EPUI;;AOPJ;EPDI;;AOKA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9EZ;EACI;;AACA;EACI;;AACJ;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ERfI;EQiBA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERHA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQDA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ERpDA;;AQuDA;ERjDA;;AQoDA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ERnEA;;AQsEA;ERhEA;;AQmEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACvIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACrIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAEA;EACI;;AAEZ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACjEhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EZuBI;EYTA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnBA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AC7BZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC7JhB;EdCI;EACA;EACA;EACA;EACA;EcHA;EACA;;AACA;EdIA;EACA;EACA;EACA;EACA;;;AcLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;ACvGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;AjB5LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","typography.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAyBQ;AACA;ACfJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECzBA;;AD4BA;ECtBA;;AD0BA;ECxCA;;AD2CA;ECrCA;;ADyCI;EACI;;;AE9EZ;EACI;EACA;EACA;;AAGA;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AASJ;EACI,OAVA;EAWA;EACA,WAZA;EAaA,aAbA;;AAgBJ;EACI;;AADJ;EACI;;AADJ;EACI;;;AClBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;ACjCJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAEJ;EACI;;;ACvBZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;ENyBI;EMvBA;;;ACnBR;EACI;EACA;EACA;;;ACHJ;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;ERoDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQxDA;ERKA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AQPJ;EREA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AQJJ;ERDA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AQDJ;ERJA;EACA;;AAHA;EA+BI;;AA3BJ;EACI;;AACJ;EACI;;AQEJ;ERfA,OQgBkC;ERflC,QQewC;ERdxC,eQc4B;ERb5B,SQa8C;EAC1C;;AAEJ;ERnBA,OQoBkC;ERnBlC,QQmBwC;ERlBxC,eQkB4B;ERjB5B,SQiB8C;EAC1C;;AAEJ;ERvBA,OQwBkC;ERvBlC,QQuBwC;ERtBxC,eQsB4B;ERrB5B,SQqB8C;EAC1C;;AAEJ;ER3BA,OQ4BkC;ER3BlC,QQ2BwC;ER1BxC,eQ0B4B;ERzB5B,SQyB8C;EAC1C;;AAEJ;ERYI;;AQTJ;ERCI;;AQGA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9EZ;EACI;;AACA;EACI;;AACJ;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;EACA;;AAEA;EACI;;AAER;ETbI;ESeA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ETDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ASHA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ETlDA;;ASqDA;ET/CA;;ASkDA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ETjEA;;ASoEA;ET9DA;;ASiEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACvIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACrIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAER;EACI;;AAEA;EACI;;AAEA;EACI;;AAEZ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;;AChEhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC9FhB;EACI;EACA;EACA;;AAEA;EACI;;;AAGR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EbSI;EAiDJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;Ea9DI;;Ab6CJ;EAKI;;AAHA;EACI;;AAIR;EACI;;AanDJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EbNI;EAiDJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAjBA;EAKI;;AAHA;EACI;;AAIR;EACI;;;AczFR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AC5JhB;EfCI;EACA;EACA;EACA;EACA;EACA;EACA;;AeJA;EfOA;EACA;EACA;EACA;EACA;;AeRA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EAII;;AAHA;EACI;;AAKJ;EACI;;AAER;EAII;;AAHA;EACI;;AAIR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAER;EACI;;AAEA;EACI;;AAER;EACI;;AAEJ;EACI;;AAEA;EACI;;AAGJ;EACI;;AAER;EACI;;AAEA;EACI;;;ACzGhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;;AAER;EACI;EACA;;AAEA;EAgBI;EACA;EACA;EACA;EACA;EACA;;AApBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AASR;EACI;EACA;EACA;;AAEJ;EACI;;AAEA;EACI;;AACJ;EACI;;AAER;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EAgBI;EACA;;AAhBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKR;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AAGA;EACI;EACA;;;ACvNhB;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;AACA;EACA;;;AC5IF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ArB5IF;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
diff --git a/src/styles/generics.sass b/src/styles/generics.sass
index ad09c77..ef7cceb 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -5,6 +5,7 @@
 @import "ripple"
 @import "divider"
 @import "container"
+@import "typography"
 
 @import "mixins/m3-mixins"
 
@@ -19,9 +20,9 @@
 @import "input-styles/checkbox"
 @import "input-styles/text-field"
 
-@import "./themes/tokens.css"
-@import "./themes/colors.module.css"
-@import "./themes/typography.module.css"
+@import "./themes/tokens"
+@import "./themes/colors.module"
+@import "./themes/typography.module"
 @import "./themes/theme.dark.css" (prefers-color-scheme: dark)
 @import "./themes/theme.light.css" (prefers-color-scheme: light)
 
@@ -30,9 +31,6 @@ html
     color: var(--md-sys-color-on-surface)
     background-color: var(--md-sys-color-surface-container)
 
-.m3
-    user-select: none
-
 .m3.m3-wrapper
     position: relative
     display: block
diff --git a/src/styles/icon.sass b/src/styles/icon.sass
index 8e139cd..a8e6cbf 100644
--- a/src/styles/icon.sass
+++ b/src/styles/icon.sass
@@ -3,15 +3,16 @@ svg.m3.m3-svg-icon
     $types: ["Outlined", "Rounded", "Sharp"]
 
     & > text
-        alignment-baseline: central
         text-anchor: middle
+        dominant-baseline: central
+        alignment-baseline: central
 
     @each $size in $sizes
         & > text.m3-size-#{$size}
             width: $size
             aspect-ratio: 1
-            line-height: $size
             font-size: $size
+            line-height: $size
 
     @each $type in $types
         & > text.m3-#{$type}
diff --git a/src/styles/input-styles/checkbox.sass b/src/styles/input-styles/checkbox.sass
index 921706f..2735b8d 100644
--- a/src/styles/input-styles/checkbox.sass
+++ b/src/styles/input-styles/checkbox.sass
@@ -1,20 +1,18 @@
 div.m3.m3-checkbox-container
-    @include m3-label-mixin
-    width: 18px
-    height: 18px
+    @include m3-checkbox-container-mixin
+
     & > span.m3.m3-checkbox-state-layer
         @include m3-state-layer-mixin
 
-span.m3.m3-checkbox-ripple-layer
-    z-index: 20
-    width: 2.5rem
-    height: 2.5rem
-    contain: content
-    border-radius: 50%
-    position: absolute
+    & > span.m3.m3-checkbox-ripple-layer
+        z-index: 20
+        width: 2.5rem
+        height: 2.5rem
+        contain: content
+        border-radius: 50%
+        position: absolute
 
 input[type="checkbox"].m3.m3-checkbox
-    margin: 0
     z-index: 10
     display: flex
     width: 1.125rem
@@ -28,6 +26,7 @@ input[type="checkbox"].m3.m3-checkbox
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
     & ~ span.m3-checkbox-state
+        position: absolute
         color: var(--md-sys-color-on-surface-variant)
         transition: color .2s cubic-bezier(0.2, 0, 0, 1)
 
@@ -55,13 +54,13 @@ input[type="checkbox"].m3.m3-checkbox
             opacity: 38%
 
     & ~ span.m3-checkbox-state
-        pointer-events: none
         z-index: 10
         display: flex
         font-size: 24px
         font-weight: 700
         line-height: 24px
         align-items: center
+        pointer-events: none
         justify-content: center
         font-family: Material-Symbols-Outlined-Regular, sans-serif
         font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
@@ -83,6 +82,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
 
@@ -91,6 +91,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
 
@@ -100,6 +101,7 @@ input[type="checkbox"].m3.m3-checkbox
 
         &:active ~ span.m3.m3-checkbox-state-layer
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+
             & ~ span.m3-ripple-domain > .m3.ripple
                 background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
 
diff --git a/src/styles/input-styles/radio.sass b/src/styles/input-styles/radio.sass
index e29754e..5dd0e10 100644
--- a/src/styles/input-styles/radio.sass
+++ b/src/styles/input-styles/radio.sass
@@ -5,12 +5,16 @@ div.m3.m3-radio-container
     display: inline-flex
     justify-content: center
 
+    & + label.m3.m3-radio-label
+        margin-inline: 3px
+
     & > span.m3-checkbox-ripple-layer, span.m3.m3-radio-state-layer
         z-index: 5
+        width: 40px
+        height: 40px
+        aspect-ratio: 1
 
     & > span.m3.m3-radio-state-layer
-        width: 40px
-        aspect-ratio: 1
         border-radius: 50%
         position: absolute
         pointer-events: none
diff --git a/src/styles/input-styles/slider.sass b/src/styles/input-styles/slider.sass
index b80a547..708ba9e 100644
--- a/src/styles/input-styles/slider.sass
+++ b/src/styles/input-styles/slider.sass
@@ -3,41 +3,51 @@ div.m3.m3-slider-container
     display: flex
     align-items: center
 
+    & > datalist
+        display: none
+
+
 input[type="range"].m3.m3-slider
     margin: 0
-    height: 4px
     appearance: none
-    overflow: visible
     border-radius: 2px
-    margin-inline: 10px
-    background-color: var(--md-sys-color-surface-container-highest)
+    margin-inline: 8px
+    background: var(--md-sys-color-surface-container-highest)
+
+    &:-moz-any(&)
+        height: 4px
+
+    &:-webkit-any(&)
+        background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
+
+    &::-moz-range-track
+        height: 4px
+        overflow: hidden
+        border-radius: 2px
+
+    &::-moz-range-progress
+        height: 4px
+        overflow: hidden
+        border-radius: 2px
+        background-color: var(--md-sys-color-primary)
+
+    &::-moz-range-thumb
+        @include input-range-thumb-mixin
+
+        border: none
 
     &::-webkit-slider-container
-        margin-inline: -8px
+        appearance: none
+        box-shadow: none
+        border-radius: 2px
+        min-block-size: 4px
+        height: 4px
+
+    &::-webkit-slider-runnable-track
+        height: 20px
 
     &::-webkit-slider-thumb
-        @include elevation-1(false)
-
-        &::after
-            width: 40px
-            aspect-ratio: 1
-            background-color: transparent
-
-        &:hover
-            outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
-
-        &:is(:active, :focus-visible)
-            outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
-
-        width: 20px
-        aspect-ratio: 1
-        appearance: none
-        overflow: visible
-        border-radius: 50%
-        box-sizing: border-box
-        outline: 10px solid transparent
-        background: var(--md-sys-color-primary)
-        transition: .2s cubic-bezier(0.2, 0, 0, 1)
+        @include input-range-thumb-mixin
 
 
 
diff --git a/src/styles/input-styles/swtich.sass b/src/styles/input-styles/swtich.sass
index a149f04..aba49a9 100644
--- a/src/styles/input-styles/swtich.sass
+++ b/src/styles/input-styles/swtich.sass
@@ -1,30 +1,29 @@
 div.m3.m3-switch
-    margin: 4px
     gap: 20px
-    box-sizing: content-box
+    margin: 4px
+    height: 32px
     display: flex
     align-items: center
-    justify-content: center
-    width: 52px
-    height: 32px
+    justify-content: left
+    box-sizing: content-box
 
     & > svg
-        overflow: visible
-        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
         width: 52px
         height: 32px
+        overflow: visible
+        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
 
         & > g
             transform: translate(11.5%, 81%)
             transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
             & > text
-                font-family: Material-Symbols-Outlined-Regular
                 font-size: 20px
+                font-family: Material-Symbols-Outlined-Regular,serif
 
         & > circle.m3.m3-switch-handler-state-layer, & > circle.m3.m3-switch-handler
-            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
             cy: 50%
             cx: 16px
+            transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
 
         & > circle.m3.m3-switch-handler-state-layer
             r: 20px
@@ -42,13 +41,13 @@ div.m3.m3-switch
             height: 30px
 
     & > input.m3
-        cursor: pointer
-        appearance: none
-        opacity: 0 !important
         margin: 0
         width: 52px
         height: 32px
+        cursor: pointer
+        appearance: none
         position: absolute
+        opacity: 0 !important
 
         &:disabled
             cursor: not-allowed
@@ -93,8 +92,8 @@ div.m3.m3-switch
             r: 14px
 
         &:not(:checked):disabled + svg > circle.m3.m3-switch-handler
-            fill: var(--md-sys-color-on-surface)
             fill-opacity: 38%
+            fill: var(--md-sys-color-on-surface)
 
         &:hover:not(:disabled)
             &:checked + svg
@@ -102,25 +101,25 @@ div.m3.m3-switch
                     fill: var(--md-sys-color-primary-container)
 
                 & > circle.m3.m3-switch-handler-state-layer
-                    fill: var(--md-sys-color-primary)
                     fill-opacity: 8%
+                    fill: var(--md-sys-color-primary)
 
             &:not(:checked) + svg
                 & > circle.m3.m3-switch-handler
                     fill: var(--md-sys-color-on-surface-variant)
 
                 & > circle.m3.m3-switch-handler-state-layer
-                    fill: var(--md-sys-color-on-surface)
                     fill-opacity: 8%
+                    fill: var(--md-sys-color-on-surface)
 
         &:active:not(:disabled)
             &:checked + svg > circle.m3.m3-switch-handler-state-layer
-                fill: var(--md-sys-color-primary)
                 fill-opacity: 12%
+                fill: var(--md-sys-color-primary)
 
             &:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
-                fill: var(--md-sys-color-on-surface)
                 fill-opacity: 12%
+                fill: var(--md-sys-color-on-surface)
 
         &:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
             rx: 16px
@@ -137,8 +136,8 @@ div.m3.m3-switch
             fill: var(--md-sys-color-surface-container-highest)
 
         &:checked + svg > rect.m3.m3-switch-track
-            stroke: var(--md-sys-color-primary)
             fill: var(--md-sys-color-primary)
+            stroke: var(--md-sys-color-primary)
 
         &:disabled + svg
             & > g > text.m3
@@ -154,5 +153,5 @@ div.m3.m3-switch
                 fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
 
             & > 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)
\ No newline at end of file
+                fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
+                stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
\ No newline at end of file
diff --git a/src/styles/mixins/m3-mixins.sass b/src/styles/mixins/m3-mixins.sass
index c5ff5b2..f892072 100644
--- a/src/styles/mixins/m3-mixins.sass
+++ b/src/styles/mixins/m3-mixins.sass
@@ -1,15 +1,17 @@
-@mixin m3-label-mixin
+@mixin m3-checkbox-container-mixin
+    gap: 16px
+    height: 40px
     display: flex
+    aspect-ratio: 1
     position: relative
     align-items: center
     justify-content: center
-    aspect-ratio: 1
 
 @mixin m3-state-layer-mixin
-    position: absolute
-    width: 2.5rem
-    aspect-ratio: inherit
+    width: 40px
+    aspect-ratio: 1
     border-radius: 50%
+    position: absolute
     transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
 
 @mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
@@ -73,3 +75,25 @@
     right: 0
     position: absolute
     background: #00000000
+
+@mixin input-range-thumb-mixin
+    @include elevation-1(false)
+
+    &:hover
+
+        &:after
+            content: '1'
+
+        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+
+    &:is(:active, :focus-visible)
+        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+
+    width: 20px
+    height: 20px
+    appearance: none
+    border-radius: 50%
+    box-sizing: border-box
+    outline: 10px solid transparent
+    background: var(--md-sys-color-primary)
+    transition: .2s cubic-bezier(0.2, 0, 0, 1)
diff --git a/src/styles/ripple.sass b/src/styles/ripple.sass
index 2ac8725..d9b540a 100644
--- a/src/styles/ripple.sass
+++ b/src/styles/ripple.sass
@@ -14,10 +14,15 @@
   z-index: 20
   aspect-ratio: 1
   border-radius: 50%
+
+  animation-duration: .55s
+  animation-iteration-count: 1
   animation-name: rippleAppearanceAnimation
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
-  animation-duration: .55s
-  transition: opacity, background, background-color, .55s cubic-bezier(0.4, 0, 0.2, 1)
+
+  transition-duration: .55s
+  transition-property: opacity, background-color
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 
   &.visible
     opacity: 1 !important
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 0000000..ab5b08d
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,5 @@
+:is(h1, h2, h3, h4, h5, h6, code, p, span, pre, label).m3.m3-typography {
+  vertical-align: center;
+}
+
+/*# sourceMappingURL=typography.css.map */
diff --git a/src/styles/typography.css.map b/src/styles/typography.css.map
new file mode 100644
index 0000000..2cde4b2
--- /dev/null
+++ b/src/styles/typography.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["typography.sass"],"names":[],"mappings":"AAAA;EACI","file":"typography.css"}
\ No newline at end of file
diff --git a/src/styles/typography.sass b/src/styles/typography.sass
new file mode 100644
index 0000000..c43c688
--- /dev/null
+++ b/src/styles/typography.sass
@@ -0,0 +1,4 @@
+label
+    white-space: nowrap
+    display: inline-block
+    vertical-align: middle