ADDED: Card sub-components

TODO: Complete styles for card sub-components and section button

app/page.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import testImage1 from './test-images/test-image-1.jpg';
 import { Card } from '../src/primitive-components/card/card';
+import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
 import { Button } from '../src/primitive-components/button-components/button/button';
-
-const cardStyles = { width: '256px', aspectRatio: 1 };
+import { CardHeader } from '../src/primitive-components/card/card-header';
+import { CardBody } from '../src/primitive-components/card/card-body';
+import { CardFooter } from '../src/primitive-components/card/card-footer';
 
 export default function Page() {
     return (
@@ -17,17 +20,36 @@ export default function Page() {
                     padding: '8px',
                 }}
             >
-                <div style={{ display: 'flex', gap: '8px' }}>
-                    <Card style={cardStyles} variant={'filled'}>
-                        <CardActionArea>
+                <div style={{ display: 'flex', gap: '8px', maxWidth: 512 }}>
+                    <Card variant={'outlined'}>
+                        <CardHeader>
                             <h1>Header</h1>
+                        </CardHeader>
+                        <CardActionArea>
+                            <CardMedia src={testImage1.src} type={'img'} />
+                            <CardBody>
+                                <h4>
+                                    <strong>Sub-header</strong>
+                                </h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consecrate
+                                    adipiscing elit, sed do eiusmod tempor
+                                    incididunt ut labore et dolore magna aliqua.
+                                    Ut enim ad minim veniam, quis nostrud
+                                    exercitation ullamco laboris nisi ut aliquip
+                                    ex ea commodo consequat. Duis aute irure
+                                    dolor in reprehenderit in voluptate velit
+                                    esse cillum dolore eu fugiat nulla pariatur.
+                                    Excepteur sint occaecat cupidatat non
+                                    proident, sunt in culpa qui officia deserunt
+                                    mollit anim id est laborum.
+                                </p>
+                            </CardBody>
                         </CardActionArea>
-                        <div>
+                        <CardFooter>
                             <Button>label</Button>
-                        </div>
+                        </CardFooter>
                     </Card>
-                    <Card style={cardStyles} variant={'outlined'} />
-                    <Card style={cardStyles} variant={'elevated'} />
                 </div>
             </div>
         </main>

next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: '**',
+            },
+        ],
+    },
+};

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

@@ -13,14 +13,14 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
             buttonId = useId(),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes =
+        const extraClassStyles =
             `m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
 
         return (
             <button
                 {...props}
                 {...events}
-                className={classes}
+                className={extraClassStyles}
                 disabled={props.disabled}
                 id={buttonId}
                 ref={ref}

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

@@ -30,11 +30,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
-        const classes = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
+        const extraClassStyles = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
 
-        const toggle = (classes: string, icon: string) => {
+        const toggle = (extraClassStyles: string, icon: string) => {
             setToggleIcon({
-                state: classes,
+                state: extraClassStyles,
                 icon: icon,
             });
         };
@@ -60,7 +60,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             <ButtonLayout
                 {...props}
                 centralRipple={centralRipple}
-                className={classes}
+                className={extraClassStyles}
                 disabled={disabled}
                 onClick={callback}
                 ref={buttonRef}

src/primitive-components/card/card-action-area.tsx

@@ -14,14 +14,14 @@ export const CardActionArea = forwardRef<HTMLDivElement, CardActionAreaProps>(
             setIsActive,
             ripples,
         );
-        const classes =
+        const extraClassStyles =
             `m3 m3-card-action-area${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
 
         return (
             <div
                 {...props}
                 {...CardActionAreaEvents}
-                className={classes}
+                className={extraClassStyles}
                 ref={ref}
             >
                 <div className={'m3 m3-card-action-area-content'}>

src/primitive-components/card/card-actions.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export function CardActions(props) {
-    return (
-        <div></div>
-    );
-}

src/primitive-components/card/card-body.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+
+export const CardBody = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
+    (props, ref) => {
+        const extraClassStyles =
+            `m3 m3-card-body ${props.className ?? ''}`.trimEnd();
+
+        return (
+            <section {...props} className={extraClassStyles} ref={ref}>
+                {props.children}
+            </section>
+        );
+    },
+);

src/primitive-components/card/card-content.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export function CardContent(props) {
-    return (
-        <div></div>
-    );
-}

src/primitive-components/card/card-footer.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+
+export const CardFooter = forwardRef<
+    HTMLDivElement,
+    HTMLAttributes<HTMLDivElement>
+>((props, ref) => {
+    const extraClassStyles =
+        `m3 m3-card-footer ${props.className ?? ''}`.trimEnd();
+
+    return (
+        <div {...props} className={extraClassStyles} ref={ref}>
+            {props.children}
+        </div>
+    );
+});

src/primitive-components/card/card-header.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { forwardRef, HTMLAttributes } from 'react';
+
+export const CardHeader = forwardRef<
+    HTMLHeadElement,
+    HTMLAttributes<HTMLHeadElement>
+>((props, ref) => {
+    const extraClassStyles =
+        `m3 m3-card-header ${props.className ?? ''}`.trimEnd();
 
-export function CardHeader(props) {
     return (
-        <div></div>
+        <header {...props} className={extraClassStyles} ref={ref}>
+            {props.children}
+        </header>
     );
-}
+});

src/primitive-components/card/card-media.tsx

@@ -1,33 +1,19 @@
-import Image from 'next/image';
-import React, { forwardRef } from 'react';
+import { createElement, forwardRef } from 'react';
 import { CardMediaProps, CardMediaType } from './card.types';
 
 export const CardMedia = forwardRef<CardMediaType, CardMediaProps>(
-    (
-        {
-            alt,
-            src,
-            type,
-            quality = 80,
-            rounded = true,
-            preview = true,
-            className = '',
-            ...props
-        },
-        ref,
-    ) => {
-        const classes =
-            `m3 m3-card-media${rounded ? ' m3-rounded' : ''}${preview ? ' m3-preview' : ''} ${className}`.trimEnd();
+    ({ type, rounded = true, className = '', ...props }, ref) => {
+        const extraClassStyles =
+            `m3 m3-card-media${rounded ? ' m3-rounded' : ''} ${className}`.trimEnd();
 
-        switch (type) {
-            case 'img':
-                return <Image alt={alt} quality={quality} src={src} />;
-            default:
-                return React.createElement(type, {
-                    ...props,
-                    className: classes,
-                    ref: ref,
-                });
-        }
+        return createElement(
+            type,
+            {
+                ...props,
+                className: extraClassStyles,
+                ref: ref,
+            },
+            props.children,
+        );
     },
 );

src/primitive-components/card/card.tsx

@@ -4,12 +4,12 @@ import { Container } from '../container/container';
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
     ({ variant = 'filled', ...props }, ref) => {
-        const classes = `m3-card m3-card-${variant} ${props.className ?? ''}`;
+        const extraClassStyles = `m3-card m3-card-${variant} ${props.className ?? ''}`;
 
         return (
             <Container
                 {...props}
-                className={classes}
+                className={extraClassStyles}
                 ref={ref}
                 variant={variant}
             >

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

@@ -1,26 +1,22 @@
-import { HTMLAttributes } from 'react';
+import { HTMLProps } from 'react';
 import { ContainerProps } from '../container/container.types';
 import { RipplePropsForComponents } from '../ripple/ripple.types';
 
+export interface CardProps extends ContainerProps {}
+
 export interface CardActionAreaProps
     extends RipplePropsForComponents<HTMLDivElement> {
     ripples?: boolean;
 }
 
-export interface CardProps extends ContainerProps {}
-
-export interface CardMediaProps extends HTMLAttributes<CardMediaType> {
-    alt: string;
-    src: string;
-    quality?: number;
+export interface CardMediaProps extends HTMLProps<CardMediaType> {
     rounded?: boolean;
-    preview?: boolean;
     type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
 }
 
-export type CardMediaType = HTMLImageElement &
-    HTMLVideoElement &
-    HTMLPictureElement &
-    HTMLMediaElement &
-    HTMLIFrameElement &
-    HTMLAudioElement;
+export type CardMediaType =
+    | HTMLImageElement
+    | HTMLVideoElement
+    | HTMLPictureElement
+    | HTMLIFrameElement
+    | HTMLAudioElement;

src/primitive-components/container/container.tsx

@@ -3,11 +3,11 @@ import { ContainerProps } from './container.types';
 
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
     ({ variant = 'filled', ...props }, ref) => {
-        const classes =
+        const extraClassStyles =
             `m3 m3-container m3-container-${variant} ${props.className ?? ''}`.trimEnd();
 
         return (
-            <div {...props} className={classes} ref={ref}>
+            <div {...props} className={extraClassStyles} ref={ref}>
                 {props.children}
             </div>
         );

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

@@ -21,7 +21,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
 
         const classesType = typeInput || type;
 
-        const classes =
+        const extraClassStyles =
             props.className !== undefined
                 ? `m3 m3-${type} ${props.className}`
                 : `m3 m3-${classesType}`;
@@ -30,7 +30,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
             <input
                 ref={checkboxRef}
                 {...props}
-                className={classes.trimEnd()}
+                className={extraClassStyles.trimEnd()}
                 type={type}
             />
         );

src/primitive-components/input-components/checkbox/checkbox.tsx

@@ -26,7 +26,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             checkboxRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes =
+        const extraClassStyles =
             `m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         useImperativeHandle(ref, () => checkboxRef.current);
@@ -36,7 +36,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         }, [checkboxRef.current?.checked]);
 
         return (
-            <label {...events} className={classes}>
+            <label {...events} className={extraClassStyles}>
                 <CheckBoxLayout
                     {...props}
                     indeterminate={props.indeterminate}

src/primitive-components/input-components/radio/radio.tsx

@@ -18,11 +18,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             ripplesRef = useRef(null),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes =
+        const extraClassStyles =
             `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
 
         return (
-            <div {...events} className={classes}>
+            <div {...events} className={extraClassStyles}>
                 <CheckBoxLayout {...props} ref={ref} type={'radio'} />
                 <span className={'m3 m3-radio-state-layer'} />
                 <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>

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

@@ -24,7 +24,7 @@ const RippleArea = forwardRef(
             uniqueKey = useRef<number>(0),
             uniqueId = useId();
 
-        const classes = props.className
+        const extraClassStyles = props.className
             ? `m3 m3-ripple-domain ${props.className}`.trimEnd()
             : 'm3 m3-ripple-domain';
 
@@ -121,7 +121,7 @@ const RippleArea = forwardRef(
         );
 
         return (
-            <span className={classes} id={uniqueId} ref={rippleDomain}>
+            <span className={extraClassStyles} id={uniqueId} ref={rippleDomain}>
                 <rippleAreaContext.Provider value={clicked.current}>
                     <Ripples>{ripples}</Ripples>
                 </rippleAreaContext.Provider>

src/styles/card.sass

@@ -1,8 +1,28 @@
 @import 'mixins/m3-mixins'
 
-div.m3.m3-card-action-area
+$padding: 16px
+
+.m3:not(:first-child):is(.m3-card)
+    padding: $padding
+
+:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body).m3
+    padding: $padding
+    display: block
+    box-sizing: border-box
+
+.m3.m3-card-media
+    &.m3-rounded
+        border-radius: 12px
+
     width: 100%
     height: 100%
+    display: block
+    contain: content
+    position: relative
+    box-sizing: border-box
+
+div.m3.m3-card-action-area
+    display: block
     cursor: pointer
     contain: content
     position: relative
@@ -10,9 +30,12 @@ div.m3.m3-card-action-area
     transition: box-shadow .2s cubic-bezier(0.2, 0, 0, 1)
 
     & > div.m3.m3-card-action-area-content
-        position: absolute
+        top: 0
+        width: 100%
+        position: relative
 
-    & > span.m3.m3-card-state-layer
+    & > span.m3:is(.m3-card-state-layer, .m3-ripple-domain)
+        top: 0
         width: 100%
         height: 100%
         position: absolute

src/styles/generics.css.map

@@ -1,7 +1 @@
-{
-"version": 3,
-"mappings": "AAmBQ,gCAAqB;AACrB,uCAA4B;AAC5B,2CAAgC;AAChC,8DAAqD;AACrD,gEAAuD;ACrB/D,0BAA0B;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,OAAO;EAChB,QAAQ,EAAE,QAAQ;EAClB,aAAa,EAAE,OAAO;EACtB,UAAU,EAAE,0CAAyC;EAErD,+DAAsC;IAClC,QAAQ,EAAE,QAAQ;EAEtB,wDAA+B;IAC3B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,gDAA+C;EAG3D,8DAA+B;IAC3B,gBAAgB,EAAE,kEAAkE;EAGxF,qGAA+B;IAC3B,gBAAgB,EAAE,mEAAmE;EAGzF,uHAAwC;ICWxC,UAAU,EAAE,iEAAkE;EDR9E,iGAAkB;ICclB,UAAU,EAAE,iEAAkE;EDV9E,wEAAwC;ICJxC,UAAU,EAAE,eAAe;EDO3B,kDAAkB;ICDlB,UAAU,EAAE,4EAA6E;EDKrF,oIAA+B;IAC3B,gBAAgB,EAAE,mEAAmE;EAE7F,+DAA+B;IAC3B,gBAAgB,EAAE,WAAW;EAEjC,yEAAyC;IACrC,gBAAgB,EAAE,mEAAmE;;AE9C7F,yBAAQ;EACJ,kBAAkB,EAAE,OAAO;EAC3B,WAAW,EAAE,MAAM;AAGnB,sCAAyB;EACrB,KAAK,EATZ,IAAI;EAUG,YAAY,EAAE,CAAC;EACf,WAAW,EAXlB,IAAI;EAYG,SAAS,EAZhB,IAAI;AAQD,sCAAyB;EACrB,KAAK,EATN,IAAI;EAUH,YAAY,EAAE,CAAC;EACf,WAAW,EAXZ,IAAI;EAYH,SAAS,EAZV,IAAI;AAQP,sCAAyB;EACrB,KAAK,EATA,IAAI;EAUT,YAAY,EAAE,CAAC;EACf,WAAW,EAXN,IAAI;EAYT,SAAS,EAZJ,IAAI;AAQb,sCAAyB;EACrB,KAAK,EATM,IAAI;EAUf,YAAY,EAAE,CAAC;EACf,WAAW,EAXA,IAAI;EAYf,SAAS,EAZE,IAAI;AAQnB,sCAAyB;EACrB,KAAK,EATY,IAAI;EAUrB,YAAY,EAAE,CAAC;EACf,WAAW,EAXM,IAAI;EAYrB,SAAS,EAZQ,IAAI;AAQzB,sCAAyB;EACrB,KAAK,EATkB,IAAI;EAU3B,YAAY,EAAE,CAAC;EACf,WAAW,EAXY,IAAI;EAY3B,SAAS,EAZc,IAAI;AAQ/B,sCAAyB;EACrB,KAAK,EATwB,IAAI;EAUjC,YAAY,EAAE,CAAC;EACf,WAAW,EAXkB,IAAI;EAYjC,SAAS,EAZoB,IAAI;AAQrC,sCAAyB;EACrB,KAAK,EAT8B,IAAI;EAUvC,YAAY,EAAE,CAAC;EACf,WAAW,EAXwB,IAAI;EAYvC,SAAS,EAZ0B,IAAI;AAQ3C,sCAAyB;EACrB,KAAK,EAToC,IAAI;EAU7C,YAAY,EAAE,CAAC;EACf,WAAW,EAX8B,IAAI;EAY7C,SAAS,EAZgC,IAAI;AAejD,qCAAoB;EAChB,WAAW,EAAE,iCAAiC;AADlD,oCAAoB;EAChB,WAAW,EAAE,gCAAiC;AADlD,kCAAoB;EAChB,WAAW,EAAE,8BAAiC;;ACjB1D,eAAe;EACX,QAAQ,EAAE,QAAQ;EAClB,gBAAgB,EAAE,yBAAyB;EAC3C,6BAAe;IACX,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,aAAa,EAAE,GAAG;IAClB,oCAAQ;MACJ,OAAO,EAAE,IAAI;EACrB,eAAC;IACG,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,IAAI;EAEhB,sBAAQ;IACJ,IAAI,EAAE,4BAA4B;IAClC,SAAS,EAAE,6CAA6C;IACxD,WAAW,EAAE,+CAA+C;IAC5D,WAAW,EAAE,+CAA+C;IAC5D,mBAAmB,EAAE,IAAI;IACzB,kBAAkB,EAAE,OAAO;IAC3B,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,MAAM;;;ECpBvB,WAAW,EAAE,gCAAwC;EACrD,GAAG,EAAE,6DAAqE;EAC1E,GAAG,EAAE,+EAAuF;;EAF5F,WAAW,EAAE,iCAAwC;EACrD,GAAG,EAAE,8DAAqE;EAC1E,GAAG,EAAE,gFAAuF;;EAF5F,WAAW,EAAE,8BAAwC;EACrD,GAAG,EAAE,2DAAqE;EAC1E,GAAG,EAAE,6EAAuF;;EAM5F,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC;;EAHtC,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,OAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,gCAAiC;;EAHtC,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,+BAAiC;;EAHtC,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,IAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,6BAAiC;;EAHtC,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,KAAQ;EACxB,WAAW,EAAE,GAAU;EACvB,GAAG,EAAE,8BAAiC;ACf9C,oBAAoB;EAClB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,EAAE;EACX,cAAc,EAAE,IAAI;;AAEtB,UAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,EAAE;EACX,YAAY,EAAE,CAAC;EACf,aAAa,EAAE,GAAG;EAClB,cAAc,EAAE,yBAAyB;EACzC,yBAAyB,EAAE,4BAA4B;EACvD,kBAAkB,EAAE,KAAI;EACxB,UAAU,EAAE,yEAAwE;EAEpF,kBAAS;IACP,OAAO,EAAE,YAAY;;;;IAIrB,SAAS,EAAE,gBAAgB;;IAE3B,SAAS,EAAE,gBAAgB;AC5B/B,gBAAgB;EACZ,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,+CAA+C;EACxD,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EAET,yBAAU;IACN,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,WAAW;IAEzB,+BAAO;MACH,mBAAmB,EAAE,IAAI;IAE7B,sCAAc;MACV,aAAa,EAAE,IAAI;EAG3B,2BAAY;IACR,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,aAAa;IAE3B,iCAAO;MACH,mBAAmB,EAAE,IAAI;IAE7B,wCAAc;MACV,aAAa,EAAE,IAAI;;ACvB/B,mBAAmB;EACf,OAAO,EAAE,KAAK;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,OAAO;EAChB,UAAU,EAAE,0CAAyC;EAErD,uCAAqB;IACjB,gBAAgB,EAAE,6CAA6C;EAEnE,yCAAuB;IACnB,gBAAgB,EAAE,2BAA2B;IAC7C,cAAc,EAAE,IAAI;IACpB,OAAO,EAAE,6CAA6C;EAE1D,yCAAuB;INuBnB,UAAU,EAAE,iEAAkE;IMrB9E,gBAAgB,EAAE,yCAAyC;;ACnBnE,gBAAgB;EACZ,UAAU,EAAE,wEAAuE;EAEnF,+BAAgB;IACZ,WAAW,EAAE,6CAA6C;EAE9D,mBAAI;IACA,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,IAAI;IACZ,GAAG,EAAE,IAAI;EAEb,wBAAS;IPkDT,UAAU,EAAE,wEAAuE;IACnF,OAAO,EAAE,EAAE;IACX,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;EOtDrB,wBAAS;IPGT,gBAAgB,EAAE,0CAAc;IAChC,KAAK,EAAE,2BAAW;IAHlB,gDAAyB;MA+BrB,UAAU,EAAE,iEAAkE;IA3BlF,0CAAmB;MACf,IAAI,EAAE,2BAAW;IACrB,4DAAqC;MACjC,UAAU,EAAE,gEAAgD;EOLhE,wBAAS;IPAT,gBAAgB,EAAE,qCAAc;IAChC,KAAK,EAAE,wCAAW;IAHlB,gDAAyB;MA+BrB,UAAU,EAAE,iEAAkE;IA3BlF,0CAAmB;MACf,IAAI,EAAE,wCAAW;IACrB,4DAAqC;MACjC,UAAU,EAAE,6EAAgD;EOFhE,0BAAW;IPHX,gBAAgB,EAAE,uCAAc;IAChC,KAAK,EAAE,0CAAW;IAHlB,kDAAyB;MA+BrB,UAAU,EAAE,iEAAkE;IA3BlF,4CAAmB;MACf,IAAI,EAAE,0CAAW;IACrB,8DAAqC;MACjC,UAAU,EAAE,+EAAgD;EOChE,yBAAU;IPNV,gBAAgLine truncated
-"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","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],
-"names": [],
-"file": "generics.css"
-}
+{"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","input-styles/radio.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass"],"names":[],"mappings":"AAmBQ;AACA;AACA;AACA;AACA;ACnBR;EACI,SAHM;;;AAKV;EACI,SANM;EAON;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;EACA;;AARA;EACI;;;AASR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECZA;;ADeA;ECTA;;ADaA;EC3BA;;AD8BA;ECxBA;;AD4BI;EACI;;AAER;EACI;;AAEJ;EACI;;;AErER;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;IA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ACA;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;EZCI;EACA;EACA;EACA;EACA;EYHA;EACA;;AACA;EZIA;EACA;EACA;EACA;EACA;;;AYLJ;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;;;ACpGLine truncated