ADDED: Card sub-components

TODO: Complete styles for card sub-components and section button
2025-04-03 11:30:03 +04:00
1 parent a942d22151
commit 9ee845fbba
@@ -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>
@@ -0,0 +1,10 @@
+module.exports = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: '**',
+            },
+        ],
+    },
+};
@@ -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}
@@ -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}
@@ -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'}>
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export function CardActions(props) {
-    return (
-        <div></div>
-    );
-}
@@ -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>
+        );
+    },
+);
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export function CardContent(props) {
-    return (
-        <div></div>
-    );
-}
@@ -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>
+    );
+});
@@ -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>
    );
-}
+});
@@ -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,
+        );
    },
 );
@@ -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}
            >
@@ -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;
@@ -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>
        );
@@ -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}
            />
        );
@@ -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}
@@ -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'}>
@@ -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>
@@ -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
@@ -1,7 +1 @@
-{
-"version": 3,
-"mappings": "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 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;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;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;ERNI;EQQA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEA;EACI;;AAER;ERMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AQVA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;ER3CA;;AQ8CA;ERxCA;;AQ2CA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;ER1DA;;AQ6DA;ERvDA;;AQ0DA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AC9HZ;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;;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;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