diff --git a/app/page.tsx b/app/page.tsx
index f172209..755d183 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,13 +5,11 @@ 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';
import { CardHeader } from '../src/primitive-components/card/card-header';
+import { SegmentedButtons } from '../src/primitive-components/components';
+import { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
-import { Typography } from '../src/primitive-components/typography/typography';
-import {
- ButtonLayout,
- SegmentedButtons,
-} from '../src/primitive-components/components';
+import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
export default function Page() {
return (
@@ -50,11 +48,21 @@ export default function Page() {
</CardActionArea>
<CardFooter>
<div className={'flex flex-row gap-3'}>
- <Button>label</Button>
+ <Button icon={'add'}>Label 1</Button>
+ <Button icon={'add'} iconPlace={'right'}>
+ Label 2
+ </Button>
<SegmentedButtons>
- <ButtonLayout>Label 1</ButtonLayout>
- <ButtonLayout>Label 2</ButtonLayout>
- <ButtonLayout>Label 3</ButtonLayout>
+ <SegmentButton icon={'add'}>
+ Label 1
+ </SegmentButton>
+ <SegmentButton
+ icon={'add'}
+ iconPlace={'right'}
+ >
+ Label 2
+ </SegmentButton>
+ <SegmentButton>Label 3</SegmentButton>
</SegmentedButtons>
</div>
</CardFooter>
diff --git a/src/primitive-components/button-components/button-layout/button-layout.tsx b/src/primitive-components/button-components/button-layout/button-layout.tsx
index 5d976df..19a28fa 100644
--- a/src/primitive-components/button-components/button-layout/button-layout.tsx
+++ b/src/primitive-components/button-components/button-layout/button-layout.tsx
@@ -1,6 +1,6 @@
'use client';
-import { bool, string } from 'prop-types';
+import { bool } from 'prop-types';
import { RippleEffect } from '../../ripple/ripple-effect';
import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
@@ -37,6 +37,5 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
);
ButtonLayout.propTypes = {
- children: string,
centralRipple: bool,
};
diff --git a/src/primitive-components/button-components/button/button.tsx b/src/primitive-components/button-components/button/button.tsx
index f2949cb..6bd73d6 100644
--- a/src/primitive-components/button-components/button/button.tsx
+++ b/src/primitive-components/button-components/button/button.tsx
@@ -1,10 +1,10 @@
'use client';
import { forwardRef } from 'react';
-import { Icon } from '../../components';
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';
/**
* Button component
@@ -14,10 +14,11 @@ import { ButtonLayout } from '../button-layout/button-layout';
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
- icon,
+ icon = undefined,
className = '',
disabled = false,
variant = 'filled',
+ iconPlace = 'left',
centralRipple = false,
...props
},
@@ -30,8 +31,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
disabled={disabled}
ref={ref}
>
- {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
- <span className={'label-large'}>{props.children}</span>
+ <IconWrapper icon={icon} iconPlace={iconPlace}>
+ <span className={'label-large'}>{props.children}</span>
+ </IconWrapper>
</ButtonLayout>
),
);
diff --git a/src/primitive-components/button-components/button/button.types.ts b/src/primitive-components/button-components/button/button.types.ts
index e764a3e..14b992e 100644
--- a/src/primitive-components/button-components/button/button.types.ts
+++ b/src/primitive-components/button-components/button/button.types.ts
@@ -6,6 +6,7 @@ export interface ButtonMainProps {
children?: string;
disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
+ iconPlace?: 'left' | 'right';
}
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &
diff --git a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
index afb8bae..479e6ef 100644
--- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
+++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
@@ -1,29 +1,51 @@
-import React, { cloneElement, forwardRef, ReactElement } from 'react';
-import { SegmentedButtonProps } from './segmented-buttons.types';
+import React, { forwardRef } from 'react';
+import {
+ SegmentedButton,
+ SegmentedButtonsProps,
+} from './segmented-buttons.types';
+import { string } from 'prop-types';
+import { ButtonLayout } from '../../components';
+import { ButtonLayoutProps } from '../button-layout/button-layout.types';
+import { IconWrapper } from '../../icon/icon-wrapper';
+
+export const SegmentButton = forwardRef<
+ HTMLButtonElement,
+ ButtonLayoutProps & SegmentedButton
+>(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
+ const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
+ return (
+ <ButtonLayout
+ {...props}
+ centralRipple={centralRipple}
+ className={classes}
+ ref={ref}
+ >
+ <IconWrapper icon={icon} iconPlace={iconPlace}>
+ {props.children}
+ </IconWrapper>
+ <span className={'m3 m3-button-segment-state-layer'} />
+ </ButtonLayout>
+ );
+});
+
+SegmentButton.propTypes = {
+ children: string,
+};
export const SegmentedButtons = forwardRef<
HTMLDivElement,
- SegmentedButtonProps
+ SegmentedButtonsProps
>(({ children, ...props }, ref) => {
if (children.length <= 1) {
throw 'You must build segmented button with 2 or more buttton';
}
- const buttons = children.map((button: ReactElement, index) => {
- const classes =
- `m3-button-segment ${button.props.className ?? ''}`.trimEnd();
- return cloneElement(button, {
- className: classes,
- key: index,
- });
- });
-
return (
<div
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
ref={ref}
>
- {buttons}
+ {children}
</div>
);
});
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 8912c4a..87447cf 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,8 +1,14 @@
import { HTMLAttributes, ReactElement } from 'react';
+import { IconWrapperProps } from '../../icon/icon.types';
-export interface SegmentedButton {
+export type SegmentedButton = IconWrapperProps & {
+ icon?: string;
+ centralRipple?: boolean;
+};
+
+export interface SegmentedButtons {
children?: ReactElement<HTMLButtonElement>[];
}
-export type SegmentedButtonProps = SegmentedButton &
+export type SegmentedButtonsProps = SegmentedButtons &
HTMLAttributes<HTMLDivElement>;
diff --git a/src/primitive-components/components.tsx b/src/primitive-components/components.tsx
index a34cdeb..16062c7 100644
--- a/src/primitive-components/components.tsx
+++ b/src/primitive-components/components.tsx
@@ -3,9 +3,9 @@ export { Icon } from './icon/icon';
export { Badge } from './badge/badge';
export { Ripple } from './ripple/ripple';
export { Divider } from './divider/divider';
+export { FAB } from './button-components/fab/fab';
export { Container } from './container/container';
export { RippleEffect } from './ripple/ripple-effect';
-export { FAB } from './button-components/fab/fab';
export { Radio } from './input-components/radio/radio';
export { Switch } from './input-components/switch/switch';
export { Button } from './button-components/button/button';
diff --git a/src/primitive-components/icon/icon-wrapper.tsx b/src/primitive-components/icon/icon-wrapper.tsx
new file mode 100644
index 0000000..f17af13
--- /dev/null
+++ b/src/primitive-components/icon/icon-wrapper.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from './icon';
+import { IconWrapperProps } from './icon.types';
+
+export function IconWrapper({
+ children,
+ icon,
+ iconPlace,
+ ...props
+}: IconWrapperProps) {
+ return (
+ <>
+ {icon && iconPlace === 'left' && <Icon {...props}>{icon}</Icon>}
+ {children}
+ {icon && iconPlace === 'right' && <Icon {...props}>{icon}</Icon>}
+ </>
+ );
+}
diff --git a/src/primitive-components/icon/icon.types.ts b/src/primitive-components/icon/icon.types.ts
index 4121579..9f26de1 100644
--- a/src/primitive-components/icon/icon.types.ts
+++ b/src/primitive-components/icon/icon.types.ts
@@ -1,12 +1,26 @@
-import { SVGProps } from 'react';
+import { PropsWithChildren, SVGProps } from 'react';
-export interface IconProps extends SVGProps<SVGSVGElement> {
+export interface IconPlacement {
+ iconPlace?: 'left' | 'right';
+}
+
+export interface GeneralIconProps {
grade?: number;
svgSize?: number;
fillIcon?: 0 | 1;
iconSize?: number;
opticalSize?: number;
- children?: string | undefined;
type?: 'outlined' | 'rounded' | 'sharp';
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
}
+
+export type IconWrapperProps = IconPlacement &
+ GeneralIconProps &
+ PropsWithChildren & {
+ icon?: string;
+ };
+
+export type IconProps = SVGProps<SVGSVGElement> &
+ GeneralIconProps & {
+ children?: string | undefined;
+ };
diff --git a/src/primitive-components/ripple/ripple.types.ts b/src/primitive-components/ripple/ripple.types.ts
index c27d50d..e4c40b6 100644
--- a/src/primitive-components/ripple/ripple.types.ts
+++ b/src/primitive-components/ripple/ripple.types.ts
@@ -30,7 +30,7 @@ export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
}
export interface RippleAreaProps extends HTMLAttributes<HTMLElement> {
- callback: Dispatch<SetStateAction<boolean>>;
+ callback?: Dispatch<SetStateAction<boolean>>;
central?: boolean;
}
diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass
index b1a6a99..68c872a 100644
--- a/src/styles/button-styles/button.sass
+++ b/src/styles/button-styles/button.sass
@@ -1,7 +1,9 @@
button:not(.m3-fab, .m3-icon-button)
width: min-content
height: min-content
+ max-height: 40px
box-sizing: border-box
+ white-space: nowrap
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)
diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass
index 2a042dc..3e57a59 100644
--- a/src/styles/button-styles/segmented-button.sass
+++ b/src/styles/button-styles/segmented-button.sass
@@ -1,7 +1,6 @@
div.m3.m3-segmented-buttons
display: flex
flex-direction: row
- outline-offset: -1px
width: min-content
border-radius: 20px
@@ -20,4 +19,24 @@ div.m3.m3-segmented-buttons
border-radius: 20px 0 0 20px
&:last-child
- border-radius: 0 20px 20px 0
\ No newline at end of file
+ border-radius: 0 20px 20px 0
+
+ & > span.m3.m3-button-segment-state-layer
+ position: absolute
+ width: 100%
+ height: 100%
+
+ & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
+ transition: .2s cubic-bezier(0.2, 0, 0, 1)
+
+ &:hover
+ & > span.m3.m3-button-segment-state-layer
+ background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
+
+ &:is(&:active, &:focus-visible)
+ & > 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 834c730..1d55299 100644
--- a/src/styles/card.sass
+++ b/src/styles/card.sass
@@ -80,8 +80,5 @@ div.m3.m3-card-action-area
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
- & > span.m3.m3-card-state-layer
- background-color: 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/generics.css b/src/styles/generics.css
index f5dc8d3..1f05e19 100644
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@@ -71,9 +71,6 @@ 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-card-state-layer {
- background-color: 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);
}
@@ -449,7 +446,9 @@ button.m3.m3-fab:focus-visible.tertiary::before {
button:not(.m3-fab, .m3-icon-button) {
width: min-content;
height: min-content;
+ max-height: 40px;
box-sizing: border-box;
+ white-space: nowrap;
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);
@@ -715,7 +714,6 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
div.m3.m3-segmented-buttons {
display: flex;
flex-direction: row;
- outline-offset: -1px;
width: min-content;
border-radius: 20px;
}
@@ -736,6 +734,23 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0;
}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
+ transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
+ background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+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 {
width: 20px;
diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map
index a5b84fd..8654814 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/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAoBQ;AACA;AACA;AACA;AACA;ACbJ;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;;AAEJ;EACI;;;AElFR;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;;;AA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ACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;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;EbCI;EACA;EACA;EACA;EACA;EaHA;EACA;;AACA;EbIA;EACA;EACA;EACA;EACA;;;AaLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;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;;;ACpGhB;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;;;AhB7LhB;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","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAoBQ;AACA;AACA;AACA;AACA;ACbJ;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;IAC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;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC1FhB;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;EbCI;EACA;EACA;EACA;EACA;EaHA;EACA;;AACA;EbIA;EACA;EACA;EACA;EACA;;;AaLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EAGI;;AAFA;EACI;;AAIJ;EACI;;AAER;EAGI;;AAFA;EACI;;AAGR;EACI;;AAGA;EACI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;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;;;ACpGhB;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;;;AhB7LhB;EACI;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA","file":"generics.css"}
\ No newline at end of file