diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 044bb3c..cf3a36f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,33 +4,30 @@
-
-
+
+
+
+
+
-
-
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
-
-
-
-
+
@@ -40,9 +37,9 @@
-
+
@@ -196,31 +193,8 @@
-
-
-
-
- 1704526612167
-
-
-
- 1704526612167
-
-
-
- 1704526646792
-
-
-
- 1704526646792
-
-
-
- 1704526658894
-
-
-
- 1704526658894
+
+
@@ -590,7 +564,31 @@
1706461783505
-
+
+
+ 1706560991099
+
+
+
+ 1706560991099
+
+
+
+ 1706561005869
+
+
+
+ 1706561005869
+
+
+
+ 1706562164219
+
+
+
+ 1706562164219
+
+
@@ -608,7 +606,6 @@
-
@@ -633,6 +630,7 @@
-
+
+
\ No newline at end of file
diff --git a/app/components/buttons.tsx b/app/components/buttons.tsx
index 99d04d2..7816922 100644
--- a/app/components/buttons.tsx
+++ b/app/components/buttons.tsx
@@ -2,7 +2,6 @@
import React, {useCallback, useState} from 'react';
import {Button} from "../../src/primitive-components/material-you-components";
-import axios from "axios";
export default function Buttons() {
@@ -19,7 +18,7 @@ export default function Buttons() {
Default buttons
-
+
Label + {state}
diff --git a/app/components/checkboxes.tsx b/app/components/checkboxes.tsx
index e59bff6..6e0687d 100644
--- a/app/components/checkboxes.tsx
+++ b/app/components/checkboxes.tsx
@@ -12,7 +12,7 @@ export default function Checkboxes() {
Default
-
+
diff --git a/app/components/fabs.tsx b/app/components/fabs.tsx
index 3ec86de..6b94cf4 100644
--- a/app/components/fabs.tsx
+++ b/app/components/fabs.tsx
@@ -13,7 +13,8 @@ export default function Fabs() {
+ elevated
+ centralRipple/>
Default buttons
-
+
diff --git a/app/components/radios.tsx b/app/components/radios.tsx
index 75e5232..8dc6879 100644
--- a/app/components/radios.tsx
+++ b/app/components/radios.tsx
@@ -9,7 +9,7 @@ export default function Radios() {
diff --git a/app/page.tsx b/app/page.tsx
index 741f92d..2176025 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,12 @@
import {Fragment} from "react";
import Fabs from "./components/fabs";
import Badges from "./components/badges";
+import IconButtons from "./components/icon-buttons";
+import Buttons from "./components/buttons";
+import Switches from "./components/switches";
+import Checkboxes from "./components/checkboxes";
+import Radios from "./components/radios";
+import {TextFields} from "./components/text-fields";
export default function Page() {
return(
@@ -21,6 +27,12 @@ export default function Page() {
justifyContent: "center",
alignItems: "center"
}}>
+
+
+
+
+
+
diff --git a/src/primitive-components/button-skeleton/button-skeleton.tsx b/src/primitive-components/button-skeleton/button-layout.tsx
similarity index 74%
rename from src/primitive-components/button-skeleton/button-skeleton.tsx
rename to src/primitive-components/button-skeleton/button-layout.tsx
index 7340e64..c7d6f9c 100644
--- a/src/primitive-components/button-skeleton/button-skeleton.tsx
+++ b/src/primitive-components/button-skeleton/button-layout.tsx
@@ -1,12 +1,13 @@
"use client"
import {RippleArea} from "../ripple/ripple-area";
-import React, {forwardRef, useId, useRef, useState} from "react";
+import React, {forwardRef, PropsWithChildren, useId, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
+import {IRippleProps} from "../ripple/ripple.types";
-const ButtonSkeleton = forwardRef(
+const ButtonLayout = forwardRef(
- function ButtonBase(props : any, ref){
+ function ButtonBase({centralRipple = false, ...props} : PropsWithChildren & IRippleProps, ref){
const [isActive, setIsActive] = useState(false),
ripplesRef = useRef(null),
@@ -32,6 +33,7 @@ const ButtonSkeleton = forwardRef(
disabled={disabled}>
{props.children}
)
@@ -40,4 +42,4 @@ const ButtonSkeleton = forwardRef(
)
-export {ButtonSkeleton};
\ No newline at end of file
+export {ButtonLayout};
\ No newline at end of file
diff --git a/src/primitive-components/button/button.tsx b/src/primitive-components/button/button.tsx
index 26f97b8..9cea681 100644
--- a/src/primitive-components/button/button.tsx
+++ b/src/primitive-components/button/button.tsx
@@ -1,6 +1,7 @@
import {forwardRef} from "react";
import {buttonMainProps} from "../button-skeleton/button.types";
-import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
+import {ButtonLayout} from "../button-skeleton/button-layout";
+import {IRippleProps} from "../ripple/ripple.types";
/**
* Button component
@@ -9,22 +10,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
export const Button = forwardRef(
- (props : buttonMainProps, ref) => (
-
+ ({centralRipple = false, variant, disabled, icon, ...props} : buttonMainProps & IRippleProps, ref) => (
+
{
- props.icon ?
+ icon ?
- {props.icon}
+ {icon}
: <>>
}
{props.children}
-
+
)
)
\ No newline at end of file
diff --git a/src/primitive-components/checkbox/checkbox.tsx b/src/primitive-components/checkbox/checkbox.tsx
index 7258e2b..2a1a6e5 100644
--- a/src/primitive-components/checkbox/checkbox.tsx
+++ b/src/primitive-components/checkbox/checkbox.tsx
@@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
+import {IRippleProps} from "../ripple/ripple.types";
/**
* Checkbox component
@@ -9,7 +10,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
*/
export const Checkbox = forwardRef(
- (props : any, ref) => {
+ ({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState(false),
ripplesRef = useRef(null),
@@ -28,6 +29,7 @@ export const Checkbox = forwardRef(
{props.children}
diff --git a/src/primitive-components/fab/fab.tsx b/src/primitive-components/fab/fab.tsx
index b0da69a..09470b3 100644
--- a/src/primitive-components/fab/fab.tsx
+++ b/src/primitive-components/fab/fab.tsx
@@ -1,6 +1,7 @@
import {forwardRef} from "react";
import {FABMainProps} from "../button-skeleton/button.types";
-import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
+import {ButtonLayout} from "../button-skeleton/button-layout";
+import {IRippleProps} from "../ripple/ripple.types";
/**
* FABs component
@@ -8,22 +9,23 @@ import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
*/
export const FAB = forwardRef(
- (props : FABMainProps, ref) => (
-
+ ({variant, disabled, icon, centralRipple = false, size, elevated, ...props} : FABMainProps & IRippleProps, ref) => (
+
- {props.icon}
+ {icon}
{
- props.size === "extended" ? (
+ size === "extended" ? (
{props.children}
)
: <>>
}
-
+
)
);
\ No newline at end of file
diff --git a/src/primitive-components/icon-button/icon-button.tsx b/src/primitive-components/icon-button/icon-button.tsx
index b05df37..63c2009 100644
--- a/src/primitive-components/icon-button/icon-button.tsx
+++ b/src/primitive-components/icon-button/icon-button.tsx
@@ -1,6 +1,7 @@
-import {ButtonSkeleton} from "../button-skeleton/button-skeleton";
+import {ButtonLayout} from "../button-skeleton/button-layout";
import {iconButtonMainProps} from "../button-skeleton/button.types";
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
+import {IRippleProps} from "../ripple/ripple.types";
/**
* Icon button-skeleton component
@@ -9,7 +10,7 @@ import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "re
export const IconButton = forwardRef(
- ({icon, variant, disabled, selected = false, toggled = false, ...props} : iconButtonMainProps, ref) => {
+ ({icon, variant, disabled, selected = false, toggled = false, centralRipple, ...props} : iconButtonMainProps & IRippleProps, ref) => {
const [toggleIcon, setToggleIcon] = useState({
state : selected == true ? "selected" : "unselected",
@@ -36,18 +37,19 @@ export const IconButton = forwardRef(
useImperativeHandle(ref, () => buttonRef);
return (
-
+
{
toggled ? toggleIcon.icon : icon ? icon : <>>
}
-
+
)
}
diff --git a/src/primitive-components/material-you-components.tsx b/src/primitive-components/material-you-components.tsx
index 217babb..3446944 100644
--- a/src/primitive-components/material-you-components.tsx
+++ b/src/primitive-components/material-you-components.tsx
@@ -11,4 +11,4 @@ export {RippleArea} from "./ripple/ripple-area";
export {Ripples, Ripple} from "./ripple/ripple";
export {TextField} from "./text-field/text-field";
export {IconButton} from "./icon-button/icon-button";
-export {ButtonSkeleton} from "./button-skeleton/button-skeleton";
+export {ButtonLayout} from "./button-skeleton/button-layout";
diff --git a/src/primitive-components/radio/radio.tsx b/src/primitive-components/radio/radio.tsx
index 8c183cb..fad436b 100644
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@@ -2,6 +2,7 @@ import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
+import {IRippleProps} from "../ripple/ripple.types";
/**
* Radio component
@@ -10,7 +11,7 @@ import {CheckBoxSkeleton} from "../checkbox-skeleton/check-box-skeleton";
export const Radio = forwardRef(
- (props : any, ref) => {
+ ({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState(false),
ripplesRef = useRef(null),
@@ -27,6 +28,7 @@ export const Radio = forwardRef(
{props.children}
diff --git a/src/primitive-components/ripple/ripple-area.tsx b/src/primitive-components/ripple/ripple-area.tsx
index 2b09703..449dc7e 100644
--- a/src/primitive-components/ripple/ripple-area.tsx
+++ b/src/primitive-components/ripple/ripple-area.tsx
@@ -17,7 +17,7 @@ const rippleAreaContext = React.createContext(false);
const RippleArea = forwardRef(
- function RippleArea(props : RippleAreaProps, ref) {
+ function RippleArea({central = false, callback, ...props} : RippleAreaProps, ref) {
const [ripples, setRipples] = useState>([]),
rippleDomain = useRef(null),
@@ -41,8 +41,8 @@ const RippleArea = forwardRef(
top: 0,
}
- let rippleX : number = event.clientX - rippleDomainChar.left,
- rippleY : number = event.clientY - rippleDomainChar.top,
+ let rippleX : number = !central ? event.clientX - rippleDomainChar.left : rippleDomainChar.width / 2,
+ rippleY : number = !central ? event.clientY - rippleDomainChar.top : rippleDomainChar.height / 2,
rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2,
rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2,
rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx
index 9c94480..d60fe37 100644
--- a/src/primitive-components/ripple/ripple.tsx
+++ b/src/primitive-components/ripple/ripple.tsx
@@ -1,17 +1,26 @@
"use client"
-import React, {useCallback, useContext, useEffect, useRef, useState, useTransition} from 'react';
-import RippleEffectBuild from "./utils/ripple-effect-builder";
-import {rippleAreaContext} from "./ripple-area";
-import {rippleProps} from "./ripple.types";
import isEmpty from "./utils/utils";
+import {rippleProps} from "./ripple.types";
+import {rippleAreaContext} from "./ripple-area";
+import RippleEffectBuild from "./utils/ripple-effect-builder";
+import React, {
+ useRef,
+ useState,
+ useEffect,
+ forwardRef,
+ useContext,
+ useCallback,
+ ForwardedRef,
+ useTransition, JSX
+} from 'react';
-function Ripples(props : any){
+const Ripples = forwardRef(function Ripples(props : any, ref : ForwardedRef){
const [ripples, setRipples] = useState({});
const firstRender = useRef(true);
const [pending, startTransition] = useTransition();
- const LifetimeEnd = useCallback((child) => {
+ const LifetimeEnd = useCallback((child : JSX.Element) => {
if (child.props.endLifetime) {
child.props.endLifetime();
@@ -46,9 +55,9 @@ function Ripples(props : any){
>
)
-}
+})
-function Ripple(props : rippleProps) {
+const Ripple = forwardRef(function Ripple(props : rippleProps, ref : ForwardedRef) {
const {
rippleX,
@@ -79,6 +88,6 @@ function Ripple(props : rippleProps) {
}/>
);
-}
+})
export {Ripple, Ripples};
diff --git a/src/primitive-components/ripple/ripple.types.ts b/src/primitive-components/ripple/ripple.types.ts
index d36083f..4e26fdd 100644
--- a/src/primitive-components/ripple/ripple.types.ts
+++ b/src/primitive-components/ripple/ripple.types.ts
@@ -1,8 +1,12 @@
-import React, {ComponentProps, Dispatch, SetStateAction} from "react";
+import {Dispatch, SetStateAction} from "react";
-export interface RippleAreaProps extends ComponentProps {
- ref : React.ForwardedRef,
+export interface IRippleProps {
+ centralRipple? : boolean
+}
+
+export interface RippleAreaProps extends PropsWithChildren{
callback : Dispatch>,
+ central? : boolean,
}
export type rippleProps = {
@@ -12,4 +16,6 @@ export type rippleProps = {
endLifetime? : any,
lifetime : number,
key? : number,
-}
\ No newline at end of file
+}
+
+import {PropsWithChildren} from "react";
\ No newline at end of file
diff --git a/src/styles/button.css b/src/styles/button.css
index 5f3982a..79705ec 100644
--- a/src/styles/button.css
+++ b/src/styles/button.css
@@ -1,11 +1,16 @@
button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+ font-family: var(--md-sys-typescale-label-large-font-family-name);
+ font-size: var(--md-sys-typescale-label-large-font-size);
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ box-sizing: border-box;
}
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
- font-weight: 500;
- font-size: 18px;
- line-height: 18px;
+ font-size: 14pt;
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
+ line-height: var(--md-sys-typescale-label-large-line-height);
}
button:not(.m3-fab, .m3-icon-button).m3 {
contain: content;
@@ -27,7 +32,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button
color: var(--md-sys-color-on-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined {
- border: 1px solid var(--md-sys-color-outline) !important;
+ outline-offset: -1px;
+ outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
@@ -121,7 +127,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
- border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+ outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
/*# sourceMappingURL=button.css.map */
diff --git a/src/styles/button.css.map b/src/styles/button.css.map
index 1715567..ff65d4c 100644
--- a/src/styles/button.css.map
+++ b/src/styles/button.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECFI;EDIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECnCA;;ADsCA;EChCA;;ADmCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EClDA;;ADqDA;EC/CA;;ADkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["button.sass","mixins/m3-mixins.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;ECRI;EDUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;ECQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ECzCA;;AD4CA;ECtCA;;ADyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ECxDA;;AD2DA;ECrDA;;ADwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"button.css"}
\ No newline at end of file
diff --git a/src/styles/button.sass b/src/styles/button.sass
index 27e0fa8..a462726 100644
--- a/src/styles/button.sass
+++ b/src/styles/button.sass
@@ -2,12 +2,17 @@
button:not(.m3-fab, .m3-icon-button)
transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
+ font-family: var(--md-sys-typescale-label-large-font-family-name)
+ font-size: var(--md-sys-typescale-label-large-font-size)
+ font-weight: var(--md-sys-typescale-label-large-font-weight)
+ line-height: var(--md-sys-typescale-label-large-line-height)
+ box-sizing: border-box
& > span.m3-icon
font-family: Material-Symbols-Outlined-Regular, sans-serif
- font-weight: 500
- font-size: 18px
- line-height: 18px
+ font-size: 14pt
+ font-weight: var(--md-sys-typescale-label-large-font-weight)
+ line-height: var(--md-sys-typescale-label-large-line-height)
&.m3
contain: content
@@ -28,7 +33,8 @@ button:not(.m3-fab, .m3-icon-button)
color: var(--md-sys-color-on-primary)
&.outlined
- border: 1px solid var(--md-sys-color-outline) !important
+ outline-offset: -1px
+ outline: 1px solid var(--md-sys-color-outline) !important
background-color: #00000000
&, & > span.m3-icon
color: var(--md-sys-color-primary)
@@ -115,4 +121,4 @@ button:not(.m3-fab, .m3-icon-button)
box-shadow: none
&.outlined
- border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
+ outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important
diff --git a/src/styles/generics.css b/src/styles/generics.css
index 99df848..9c5b05d 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -308,12 +308,17 @@ svg.m3.m3-badge > text {
}
button:not(.m3-fab, .m3-icon-button) {
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
+ font-family: var(--md-sys-typescale-label-large-font-family-name);
+ font-size: var(--md-sys-typescale-label-large-font-size);
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
+ line-height: var(--md-sys-typescale-label-large-line-height);
+ box-sizing: border-box;
}
button:not(.m3-fab, .m3-icon-button) > span.m3-icon {
font-family: Material-Symbols-Outlined-Regular, sans-serif;
- font-weight: 500;
- font-size: 18px;
- line-height: 18px;
+ font-size: 14pt;
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
+ line-height: var(--md-sys-typescale-label-large-line-height);
}
button:not(.m3-fab, .m3-icon-button).m3 {
contain: content;
@@ -335,7 +340,8 @@ button:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button
color: var(--md-sys-color-on-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined {
- border: 1px solid var(--md-sys-color-outline) !important;
+ outline-offset: -1px;
+ outline: 1px solid var(--md-sys-color-outline) !important;
background-color: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {
@@ -429,7 +435,7 @@ button:not(.m3-fab, .m3-icon-button):disabled.elevated {
box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
- border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
+ outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}
.m3.m3-ripple-domain {
@@ -1103,10 +1109,13 @@ html {
}
.m3.m3-wrapper {
+ width: 100%;
background-color: var(--md-sys-color-surface);
border-radius: 25px;
padding: 25px;
- width: max-content;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
height: min-content;
}
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index afb9645..d491086 100644
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJFI;EIIA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJcA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIlBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJnCA;;AIsCA;EJhCA;;AImCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJlDA;;AIqDA;EJ/CA;;AIkDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;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;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;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;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","badge.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","divider.sass","checkbox.sass","text-field.sass","icon-button.sass"],"names":[],"mappings":"AAWQ;AACA;AACA;AACA;AACA;ACbR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC+CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnDA;ECCA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADFJ;ECFA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADCJ;ECLA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADIJ;ECRA;;AAFA;EA8BI;;AA3BJ;EACI;;AACJ;EACI;;ADOJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECOI;;ADJJ;ECJI;;ADQA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxBR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EJRI;EIUA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EJQA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AIZA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EJzCA;;AI4CA;EJtCA;;AIyCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EJxDA;;AI2DA;EJrDA;;AIwDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC3HZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;ACpIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AACA;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;AAGJ;EACI;;AACJ;EACI;EACA;;AACJ;EACI;;;ACvBZ;ERDI;EACA;EACA;EACA;EACA;;AQDA;ERIA;EACA;EACA;EACA;EACA;;;AQLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;;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;;;ACrNhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;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;;;AZ/HZ;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;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 ebff8a0..6e37c2e 100644
--- a/src/styles/generics.sass
+++ b/src/styles/generics.sass
@@ -24,9 +24,12 @@ html
user-select: none
.m3.m3-wrapper
+ width: 100%
background-color: var(--md-sys-color-surface)
border-radius: 25px
padding: 25px
- width: max-content
+ display: flex
+ align-items: center
+ flex-direction: column
height: min-content