From d94e1b7360e3706fe64164530d93afd79697373f Mon Sep 17 00:00:00 2001 From: doryan04 Date: Mon, 12 Feb 2024 20:11:33 +0400 Subject: [PATCH] TODO: Slider DONE: Segmented buttons --- app/page.tsx | 18 +++-- .../segmented-buttons/segment-button.tsx | 74 +++++++++++++++++++ .../segmented-buttons/segmented-buttons.tsx | 52 +++++-------- .../segmented-buttons.types.ts | 5 +- src/primitive-components/ripple/ripple.tsx | 2 +- src/styles/button-styles/button.sass | 7 ++ .../button-styles/segmented-button.sass | 33 ++++++--- src/styles/generics.css | 44 ++++++++--- src/styles/generics.css.map | 2 +- 9 files changed, 175 insertions(+), 62 deletions(-) create mode 100644 src/primitive-components/button-components/segmented-buttons/segment-button.tsx diff --git a/app/page.tsx b/app/page.tsx index 755d183..ef1a949 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,16 @@ import React from 'react'; import testImage1 from './test-images/test-image-1.jpg'; import { Card } from '../src/primitive-components/card/card'; +import { Checkbox } 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'; 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 { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; +import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button'; +import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; export default function Page() { return ( @@ -23,7 +24,7 @@ export default function Page() { padding: '8px', }} > -
+
Header-3 @@ -52,18 +53,23 @@ export default function Page() { - - + + Label 1 Label 2 Label 3 +
diff --git a/src/primitive-components/button-components/segmented-buttons/segment-button.tsx b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx new file mode 100644 index 0000000..8913e93 --- /dev/null +++ b/src/primitive-components/button-components/segmented-buttons/segment-button.tsx @@ -0,0 +1,74 @@ +'use client'; + +import { string } from 'prop-types'; +import React, { forwardRef, useState } from 'react'; +import { IconWrapper } from '../../icon/icon-wrapper'; +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 +>( + ( + { + icon, + toggled = false, + iconPlace = 'left', + centralRipple = false, + ...props + }, + ref, + ) => { + const { + fillIcon, + grade, + svgSize, + iconSize, + opticalSize, + type, + weight, + } = props; + + const [selectedState, setSelectedState] = useState(false); + const classes = + `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd(); + + const _icon = selectedState && icon; + + return ( + { + if (toggled) { + setSelectedState(state => !state); + } + props.onClick?.apply(this, props.onClick.arguments); + }} + ref={ref} + > + + {props.children} + + + + ); + }, +); + +SegmentButton.propTypes = { + children: string, +}; 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 8e27bbb..9cc1eb9 100644 --- a/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx +++ b/src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx @@ -1,51 +1,33 @@ -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'; +'use client'; -export const SegmentButton = forwardRef< - HTMLButtonElement, - ButtonLayoutProps & SegmentedButton ->(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => { - const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd(); - return ( - - - {props.children} - - - - ); -}); - -SegmentButton.propTypes = { - children: string, -}; +import { SegmentButton } from './segment-button'; +import { SegmentedButtonsProps } from './segmented-buttons.types'; +import React, { cloneElement, forwardRef, ReactElement } from 'react'; export const SegmentedButtons = forwardRef< HTMLDivElement, SegmentedButtonsProps ->(({ children, ...props }, ref) => { +>(({ toggled = false, children, ...props }, ref) => { if (children.length <= 1) { - throw 'You must build segmented button with 2 or more buttton'; + throw 'You must build segmented button with 2 or more button'; } + const SegmentedButtons: Array = children.map( + (Button: ReactElement, index: number) => { + return cloneElement(, { + ...Button.props, + toggled: toggled, + key: index, + }); + }, + ); + return (
- {children} + {SegmentedButtons}
); }); 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 87447cf..8d049e9 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,12 +1,15 @@ import { HTMLAttributes, ReactElement } from 'react'; -import { IconWrapperProps } from '../../icon/icon.types'; +import { IconProps, IconWrapperProps } from '../../icon/icon.types'; export type SegmentedButton = IconWrapperProps & { icon?: string; + toggled?: boolean; centralRipple?: boolean; + children?: string | ReactElement; }; export interface SegmentedButtons { + toggled?: boolean; children?: ReactElement[]; } diff --git a/src/primitive-components/ripple/ripple.tsx b/src/primitive-components/ripple/ripple.tsx index f886872..d03d98c 100644 --- a/src/primitive-components/ripple/ripple.tsx +++ b/src/primitive-components/ripple/ripple.tsx @@ -16,7 +16,7 @@ const Ripple = ({ const rippleDomainContext = useContext(rippleAreaContext); useLayoutEffect(() => { - if (endLifetime !== null && !rippleDomainContext) { + if (endLifetime && !rippleDomainContext) { setClasses('m3 ripple'); setTimeout(() => endLifetime(rippleKey), lifetime); } diff --git a/src/styles/button-styles/button.sass b/src/styles/button-styles/button.sass index 68c872a..534aca2 100644 --- a/src/styles/button-styles/button.sass +++ b/src/styles/button-styles/button.sass @@ -1,3 +1,10 @@ +input[type="button"].test-button + color: white + &:not(:checked) + background-color: green + &:checked + background-color: blue + button:not(.m3-fab, .m3-icon-button) width: min-content height: min-content diff --git a/src/styles/button-styles/segmented-button.sass b/src/styles/button-styles/segmented-button.sass index 040c9d9..c1f0472 100644 --- a/src/styles/button-styles/segmented-button.sass +++ b/src/styles/button-styles/segmented-button.sass @@ -1,31 +1,46 @@ div.m3.m3-segmented-buttons + padding: 0 + height: 40px display: flex flex-direction: row - width: min-content border-radius: 20px + box-sizing: border-box + border-collapse: collapse & > button.m3.m3-button-segment + margin: 0 -0.5px 0 -0.5px + + & > button.m3.m3-button-segment:first-child + border-radius: 20px 0 0 20px + & > button.m3.m3-button-segment:last-child + border-radius: 0 20px 20px 0 + + & > button.m3.m3-button-segment height: 40px - border-radius: 0 + display: flex min-width: 108px width: max-content - box-sizing: border-box + padding-inline: 10px border: 1px solid var(--md-sys-color-outline) + & + border-radius: 0 + background-color: transparent + & > span color: var(--md-sys-color-on-surface) & > svg > text fill: var(--md-sys-color-on-surface) - &:not(:first-child) - margin-left: -1px + &.selected + background-color: var(--md-sys-color-secondary-container) - &:first-child - border-radius: 20px 0 0 20px + &.selected > span + color: var(--md-sys-color-on-secondary-container) - &:last-child - border-radius: 0 20px 20px 0 + &.selected > svg > text + fill: var(--md-sys-color-on-secondary-container) & > span.m3.m3-button-segment-state-layer position: absolute diff --git a/src/styles/generics.css b/src/styles/generics.css index 6f5e3d9..86fcfff 100644 --- a/src/styles/generics.css +++ b/src/styles/generics.css @@ -443,6 +443,16 @@ button.m3.m3-fab:focus-visible.tertiary::before { background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); } +input[type=button].test-button { + color: white; +} +input[type=button].test-button:not(:checked) { + background-color: green; +} +input[type=button].test-button:checked { + background-color: blue; +} + button:not(.m3-fab, .m3-icon-button) { width: min-content; height: min-content; @@ -712,33 +722,49 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before { } div.m3.m3-segmented-buttons { + padding: 0; + height: 40px; display: flex; flex-direction: row; - width: min-content; border-radius: 20px; + box-sizing: border-box; + border-collapse: collapse; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + margin: 0 -0.5px 0 -0.5px; +} +div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child { + border-radius: 20px 0 0 20px; +} +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 { height: 40px; - border-radius: 0; + display: flex; min-width: 108px; width: max-content; - box-sizing: border-box; + padding-inline: 10px; border: 1px solid var(--md-sys-color-outline); } +div.m3.m3-segmented-buttons > button.m3.m3-button-segment { + border-radius: 0; + background-color: transparent; +} div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span { color: var(--md-sys-color-on-surface); } 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:not(:first-child) { - margin-left: -1px; +div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected { + background-color: var(--md-sys-color-secondary-container); } -div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child { - border-radius: 20px 0 0 20px; +div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span { + color: var(--md-sys-color-on-secondary-container); } -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.selected > svg > text { + fill: var(--md-sys-color-on-secondary-container); } div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer { position: absolute; diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map index 724b66a..93f98e7 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;;;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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J;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;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;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;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAGA;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AC9DhB;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;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