@fairgarden/design 0.1.0-alpha.0

package/components/Progress/Progress.js

@@ -0,0 +1,129 @@
+'use client';
+import * as React from 'react';
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { cva } from 'class-variance-authority';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusScales } from '../../utils/StatusGlyph';
+import styles from './progress.module.css';
+/*
+ * Progress (§10.18; what it draws, §8.9): task completion — uploads, step
+ * position in a form, reading or quiz progress.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: progress.module.css; CVA function `progress`.
+ * - Axes: `kind` → bar | steps | ring | rail → `bar`, `steps`, `kindRing`
+ *   (axis-prefixed: `ring` is also a part), `rail` (constructions per §8.9
+ *   and §10.19) [D155]; `primary`, `secondary` → scales module classes (both;
+ *   `secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: kind bar; color axes none [D133].
+ * - Color fallback: inherits the scope. The `status` part takes the status
+ *   scale of its `status` as its secondary.
+ * - States: Root `data-progressing` → rest; `data-complete` → "Done" with
+ *   the success `status` part; `data-indeterminate` → the track in
+ *   `line-dashed`, no indicator, the dashes advancing only under
+ *   --motionOK. No hover state.
+ * - Parts: base, label, value, readout, track, indicator, dashes, cell
+ *   (cellFilled), ring, ringTrack, ringArc, status (its own CVA function
+ *   `progressStatus`: `status` → success | warning | danger), statusGlyph,
+ *   statusText.
+ * - Scope: none.
+ * - Container: none; inherits its context. Inside a `MeterPanel` (the
+ *   `meter-panel` container) label | track | value share one row from
+ *   768 px of the panel; baseline without support: label and value above a
+ *   full-width track, rows from --md-n-above.
+ */
+export const progress = cva(styles.base, {
+    variants: {
+        kind: {
+            bar: styles.bar,
+            steps: styles.steps,
+            ring: styles.kindRing,
+            rail: styles.rail,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'bar',
+    },
+});
+/** The status part: a §1.5.4 glyph plus a word, in the status scale [D129]. */
+export const progressStatus = cva(styles.status, {
+    variants: {
+        status: {
+            success: styles.success,
+            warning: styles.warning,
+            danger: styles.danger,
+        },
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A Base UI Progress drawn in ink only: every part is `--primary12` on the
+ * ground, and the value is always shown in text, because the fill vanishes
+ * in print. `value={null}` is indeterminate: a dashed track with "Loading…";
+ * show it only after 1 s. Progress is hidden in print, except `steps`,
+ * which prints its text.
+ */
+export function Progress(props) {
+    const { kind, primary, secondary, label, formatValue, status, statusText, completeLabel = 'Done', indeterminateLabel = 'Loading…', getAriaValueText, className, value, min = 0, max = 100, ...rest } = props;
+    const scope = useScopeAttributes();
+    const statusId = React.useId();
+    const resolvedKind = kind ?? 'bar';
+    const indeterminate = value == null || !Number.isFinite(value);
+    const complete = !indeterminate && value >= max;
+    const resolvedStatus = status ?? (complete ? 'success' : undefined);
+    const resolvedStatusText = status ? statusText : complete ? completeLabel : undefined;
+    const fraction = indeterminate ? 0 : clamp((value - min) / (max - min || 1));
+    const variants = { kind, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => progress({ ...variants, className: extra }));
+    const stepsText = (current) => `${current ?? 0} of ${max - min}`;
+    const ariaValueText = getAriaValueText ??
+        (resolvedKind === 'steps'
+            ? (_formatted, current) => stepsText(current)
+            : undefined);
+    let track;
+    if (resolvedKind === 'ring') {
+        track = (React.createElement("svg", { className: styles.ring, viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false" },
+            React.createElement("circle", { className: styles.ringTrack, cx: "10", cy: "10", r: "9" }),
+            indeterminate ? null : (React.createElement("circle", { className: styles.ringArc, cx: "10", cy: "10", r: "9", pathLength: 100, strokeDasharray: `${fraction * 100} 100`, transform: "rotate(-90 10 10)" }))));
+    }
+    else if (resolvedKind === 'steps') {
+        const count = Math.max(0, Math.round(max - min));
+        const filled = Math.round(fraction * count);
+        track = (React.createElement(BaseProgress.Track, { className: styles.track }, Array.from({ length: count }, (_, index) => (React.createElement("span", { key: index, className: index < filled ? `${styles.cell} ${styles.cellFilled}` : styles.cell })))));
+    }
+    else {
+        track = (React.createElement(BaseProgress.Track, { className: styles.track },
+            React.createElement(BaseProgress.Indicator, { className: styles.indicator }),
+            React.createElement("svg", { className: styles.dashes, "aria-hidden": "true", focusable: "false" },
+                React.createElement("line", { className: styles.dashLine, x1: "0", y1: "50%", x2: "100%", y2: "50%" }))));
+    }
+    return (React.createElement(BaseProgress.Root, { ...rest, ...scope, value: value, min: min, max: max, getAriaValueText: ariaValueText, "aria-describedby": resolvedStatus ? statusId : rest['aria-describedby'], className: resolvedClassName },
+        label == null ? null : React.createElement(BaseProgress.Label, { className: styles.label }, label),
+        track,
+        React.createElement("span", { className: styles.readout },
+            React.createElement(BaseProgress.Value, { className: styles.value }, (formatted, current) => {
+                if (current == null || formatted == null)
+                    return indeterminateLabel;
+                if (formatValue)
+                    return formatValue(formatted, current);
+                return resolvedKind === 'steps' ? stepsText(current) : formatted;
+            }),
+            resolvedStatus ? (React.createElement(ProgressStatusPart, { id: statusId, status: resolvedStatus }, resolvedStatusText)) : null)));
+}
+function ProgressStatusPart(props) {
+    const { id, status, children } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement("span", { ...scope, id: id, className: progressStatus({ status, secondary: statusScales[status] }) },
+        React.createElement(StatusGlyph, { status: status, label: null, className: styles.statusGlyph }),
+        children == null ? null : React.createElement("span", { className: styles.statusText }, children)));
+}
+function clamp(fraction) {
+    return Math.min(1, Math.max(0, fraction));
+}
+//# sourceMappingURL=Progress.js.map

package/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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"}

package/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Progress';
+//# sourceMappingURL=index.d.ts.map

package/components/Progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/Progress/index.js

@@ -0,0 +1,2 @@
+export * from './Progress';
+//# sourceMappingURL=index.js.map

package/components/Progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/components/Progress/progress.module.css

@@ -0,0 +1,280 @@
+/*
+ * Progress (§10.18; constructions §8.9). CVA functions `progress` and
+ * `progressStatus`. Ink only: track edge, indicator, cells, label and value
+ * are --primary12 on the ground; no part uses the secondary, so progress
+ * never reads as a chart series. Status glyphs take --role-status of their
+ * own status scale. Colors are role variables only; no opacity, no shimmer.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.dashLine {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+@keyframes dashAdvance {
+  to {
+    stroke-dashoffset: calc(-1 * (var(--ds-dash) + var(--ds-dash-gap)));
+  }
+}
+
+@layer base {
+  /* Label and value above a full-width track (§8.9 responsive baseline). */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label readout'
+      'track track';
+    align-items: baseline;
+    gap: var(--size-px-1) var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  .readout {
+    grid-area: readout;
+    justify-self: end;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--size-px-1) var(--size-px-2);
+  }
+
+  .value {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
+  .track {
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    box-sizing: content-box;
+    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
+    border: var(--border-size-1) solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* The indicator's height is Base UI's inline `inherit`: the track's content height. */
+  .indicator {
+    display: block;
+    background-color: var(--primary12);
+  }
+
+  .dashes {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    stroke: var(--primary12);
+  }
+
+  /* Segmented: outlined --ds-space-12 cells, --border-size-1, 2 px apart; filled cells solid. */
+  .cell {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--ds-space-12);
+    block-size: var(--ds-space-12);
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .cellFilled {
+    background-color: var(--primary12);
+  }
+
+  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
+  .ring {
+    grid-area: track;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    overflow: visible;
+  }
+
+  .ringTrack,
+  .ringArc {
+    fill: none;
+    stroke-width: var(--border-size-2);
+  }
+
+  .ringTrack {
+    stroke: var(--role-hairline);
+  }
+
+  .ringArc {
+    stroke: var(--primary12);
+  }
+
+  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .success,
+  .warning,
+  .danger {
+    color: var(--primary12);
+  }
+
+  .statusGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .statusText {
+    color: var(--primary12);
+  }
+
+  @media (forced-colors: active) {
+    .indicator,
+    .cellFilled {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .ringArc {
+      forced-color-adjust: none;
+      stroke: CanvasText;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  .steps .track {
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--border-size-2);
+    block-size: auto;
+    border-width: 0;
+  }
+
+  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
+  .kindRing {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    grid-template-areas: 'label track readout';
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--size-px-2);
+  }
+
+  /* Rail (§10.19): a --border-size-2 --role-hairline line, the position in --primary12. */
+  .rail .track {
+    block-size: var(--border-size-2);
+    border-width: 0;
+    background-color: var(--role-hairline);
+  }
+
+  /* Viewport fallback: label | track | value in one row from --md-n-above… */
+  @media (min-width: 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas: 'label track readout';
+    }
+  }
+
+  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
+  @container meter-panel (width < 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track';
+    }
+  }
+
+  @container meter-panel (width >= 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
+      grid-template-areas: 'label track readout';
+    }
+  }
+}
+
+@layer states {
+  /* Indeterminate: the track in line-dashed (provisional [D66]), no indicator; "Loading…" beside it. */
+  .base[data-indeterminate] .track {
+    padding-block: var(--border-size-1);
+    border-width: 0;
+  }
+
+  .base[data-indeterminate] .indicator {
+    display: none;
+  }
+
+  .base[data-indeterminate] .dashes {
+    display: block;
+  }
+
+  /* The dashes advance slowly, and only under --motionOK; never shimmer, pulse or opacity (§10.20). */
+  @media (prefers-reduced-motion: no-preference) {
+    .base[data-indeterminate] .dashLine {
+      animation: dashAdvance calc(var(--ds-duration-disclosure) * 6) linear infinite;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Progress is hidden in print, except steps, which print their "2 of 4" text (§10.18). */
+    .base {
+      display: none;
+    }
+
+    .steps {
+      display: grid;
+    }
+
+    .steps .track {
+      display: none;
+    }
+  }
+}

package/components/Quote/Quote.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type AvatarProps } from '../Avatar';
+export declare const quote: (props?: ({
+    kind?: "block" | "band" | "framed" | "pull" | "epigraph" | null | undefined;
+    duplicate?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type QuoteVariants = VariantProps<typeof quote>;
+/** The five quote builds (§12.8). */
+export type QuoteKind = 'band' | 'framed' | 'pull' | 'block' | 'epigraph';
+type QuoteKindProps = {
+    /** A pull quote: `type-quote` followed by a short rule, no attribution. */
+    kind: 'pull';
+    /**
+     * The pull quote repeats text from the article: it renders as an
+     * `aside` hidden from assistive technology and is hidden in print
+     * [D174]. Default `false`: a pull quote with unique text is a `figure`
+     * and prints.
+     */
+    duplicate?: boolean;
+} | {
+    /**
+     * `band`: a centered testimonial alone on a light or saturated ground.
+     * `framed`: a testimonial in a `--border-size-2` outline with a heavy
+     * open-quote glyph. `block`: a quoted passage in `type-body` behind a
+     * `--ds-stroke-3` left rule. `epigraph`: 1–2 lines of display bold
+     * italic at a drawing's corner, with no quote marks.
+     */
+    kind: Exclude<QuoteKind, 'pull'>;
+    /** Pull quotes only. */
+    duplicate?: never;
+};
+/** Props for Quote: `figure` props, `render`, the kind (and `duplicate`) and the color axes. */
+export type QuoteProps = useRender.ComponentProps<'figure'> & QuoteKindProps & {
+    /**
+     * Primary Radix scale: text, mark, rules, frame and attribution. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: QuoteVariants['primary'];
+    /**
+     * Secondary Radix scale: only a linked source's underline
+     * (`--role-accent`). Never defaulted.
+     */
+    secondary?: QuoteVariants['secondary'];
+};
+/**
+ * The quote: a `figure` holding `QuoteText` (the `blockquote`) and, for
+ * testimonials, a `QuoteAttribution` (`figcaption`) with `QuoteName`,
+ * `QuoteRole`, an optional `QuotePortrait` and an optional `QuoteSource`.
+ * Keep band and framed testimonials to 40 words; never put quotes in a
+ * carousel.
+ */
+export declare function Quote(props: QuoteProps): React.JSX.Element;
+/** Props for QuoteText: `blockquote` props and `render`. */
+export type QuoteTextProps = useRender.ComponentProps<'blockquote'>;
+/**
+ * The quoted words, a `blockquote` (pass `cite` for a source URL):
+ * `type-quote` for band, framed and pull; `type-body` behind the left rule
+ * for block; display bold italic for epigraph. Curly quotes only; pull
+ * quotes hang their punctuation. A pull quote closes with its short rule.
+ */
+export declare function QuoteText(props: QuoteTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteAttribution: `figcaption` props and `render`. */
+export type QuoteAttributionProps = useRender.ComponentProps<'figcaption'>;
+/**
+ * Who said it, `--size-px-5` below the quote: `QuotePortrait`, then
+ * `QuoteName` over `QuoteRole` (a line break, never a pipe), then an
+ * optional `QuoteSource`.
+ */
+export declare function QuoteAttribution(props: QuoteAttributionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteName: `span` props and `render`. */
+export type QuoteNameProps = useRender.ComponentProps<'span'>;
+/** The person's name: `type-label` caps in `--primary12`, on its own line. */
+export declare function QuoteName(props: QuoteNameProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuoteRole: `span` props and `render`. */
+export type QuoteRoleProps = useRender.ComponentProps<'span'>;
+/** Role or affiliation under the name: `type-caption` in `--primary12`. */
+export declare function QuoteRole(props: QuoteRoleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for QuotePortrait: Avatar props; `size` defaults to `md`. */
+export type QuotePortraitProps = AvatarProps;
+/**
+ * The portrait: an Avatar at 40 px (`md`) with its `--role-rule` ring,
+ * taking the quote's `primary` and `secondary` unless given its own. Compose
+ * `AvatarImage` (empty alt, since the name is adjacent) and
+ * `AvatarFallback` inside. Prints grayscale, at most 20 mm.
+ */
+export declare function QuotePortrait(props: QuotePortraitProps): React.JSX.Element;
+/** Props for QuoteSource: `cite` props and `render`. */
+export type QuoteSourceProps = useRender.ComponentProps<'cite'>;
+/**
+ * The source title in a `cite` (`type-caption`, upright). Link it with a
+ * `Link` inside, which owns the `--role-accent` underline and its states.
+ */
+export declare function QuoteSource(props: QuoteSourceProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Quote.d.ts.map

package/components/Quote/Quote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../src/components/Quote/Quote.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAoCpD,eAAO,MAAM,KAAK;;;;;8EAmBhB,CAAA;AAEF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,qCAAqC;AACrC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;AAezE,KAAK,cAAc,GACf;IACE,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GACD;IACE;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IAChC,wBAAwB;IACxB,SAAS,CAAC,EAAE,KAAK,CAAA;CAClB,CAAA;AAEL,gGAAgG;AAChG,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,GACzD,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBA4CtC;AAED,4DAA4D;AAC5D,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;AAEnE;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAoB9C;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;AAE1E;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,0EAQ5D;AAED,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE7D,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE7D,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,0EAQ9C;AAED,sEAAsE;AACtE,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAYtD;AAED,wDAAwD;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAE/D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,0EAQlD"}