@fairgarden/design 0.1.0-alpha.0

package/components/AnnouncementBar/AnnouncementBar.js

@@ -0,0 +1,215 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { Icon, iconHost } from '../Icon';
+import { Link } from '../Link';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './announcement-bar.module.css';
+/*
+ * Announcement Bar (§11.4): one short, authored site notice per page (a
+ * closure, a deadline, shipping terms, a policy change). An `aside`
+ * labelled "Announcement" holding a `p` with at most one link, an optional
+ * countdown in `time` and an optional dismiss Button. It is not a Toast.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: announcement-bar.module.css; CVA function `announcementBar`.
+ * - Axes: `kind` → bar | field → `bar`, `field` [D180]: a full-bleed
+ *   page-ground bar, or a full-container field; `voice` → standard | mono |
+ *   dual → `standard`, `mono`, `dual`; `record` → `record` (a notice of
+ *   record: prints); `ruled` → `ruled` (the required bottom rule: always
+ *   on with `kind: bar`, excluded with `kind: field`, whose --primary12
+ *   edge does that job); `primary`, `secondary` → scales module classes.
+ *   `interactive` is computed, never a prop: a bar holding a link or the
+ *   dismiss grows to the --ds-size-hit minimum.
+ * - Compound variants: none.
+ * - Defaults: kind bar, voice standard, record false, ruled true; color
+ *   axes: none [D133].
+ * - Color fallback: inherits the bar's own preset (or the page ground when
+ *   the bar names none); on a preset bar `primary` and `secondary` override
+ *   its Ground's scales. Secondary drives only the link underline
+ *   (--role-accent) and its hover ink (--role-link-hover).
+ * - States: on the dismiss (a Base UI Button) `:hover` per §9.2 icon-only
+ *   (the glyph at the next tier's weight, never an added circle) [D181],
+ *   `:active` → the inverse pair, `:focus-visible` → the ring.
+ *   `data-disabled` is never set. Dismissal removes the element and is
+ *   remembered per viewer. The link is a §9.3 Link with its own states.
+ * - Parts: base, container, message, accent (the dual voice's serif
+ *   phrase), link, countdown, cell, unit, dismiss, fieldBar (the field
+ *   kind's Ground); the bottom `rule` is the ruled bar's own border.
+ * - Scope: with `kind: bar`, the root is a `kind="band"` Ground of a page
+ *   ground when `preset` is given (otherwise it inherits the page ground);
+ *   with `kind: field`, a `kind="field"` Ground of a field preset, inset to
+ *   the full width of --ds-container-content, with its radius and its
+ *   --primary12 edge [D178, D180].
+ * - Container: none: it inherits its context and never reflows as a
+ *   module; the responsive rules are viewport rules [D163].
+ */
+export const announcementBar = cva(styles.base, {
+    variants: {
+        kind: {
+            bar: styles.bar,
+            field: styles.field,
+        },
+        voice: {
+            standard: styles.standard,
+            mono: styles.mono,
+            dual: styles.dual,
+        },
+        record: {
+            true: styles.record,
+        },
+        ruled: {
+            true: styles.ruled,
+        },
+        // Computed: a link or the dismiss raises the minimum height to --ds-size-hit.
+        interactive: {
+            true: styles.interactive,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'bar',
+        voice: 'standard',
+        record: false,
+        ruled: true,
+    },
+});
+const STORAGE_PREFIX = 'fg-announcement-dismissed:';
+function readDismissed(key) {
+    if (!key)
+        return false;
+    try {
+        return window.localStorage.getItem(STORAGE_PREFIX + key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeDismissed(key) {
+    if (!key)
+        return;
+    try {
+        window.localStorage.setItem(STORAGE_PREFIX + key, '1');
+    }
+    catch {
+        // Storage may be unavailable (private window, blocked site data); the bar still goes.
+    }
+}
+function toDate(value) {
+    return value instanceof Date ? value : new Date(value);
+}
+const pad = (value) => String(value).padStart(2, '0');
+/** Remaining whole days, hours and minutes to `end`, or null once it has passed. */
+function remaining(end, now) {
+    const total = Math.floor((end.getTime() - now) / 60000);
+    if (total <= 0)
+        return null;
+    return {
+        days: Math.floor(total / 1440),
+        hours: Math.floor((total % 1440) / 60),
+        minutes: total % 60,
+    };
+}
+function Countdown({ countdown }) {
+    const { expired, locale = 'en-GB', units = ['d', 'h', 'min'] } = countdown;
+    const end = toDate(countdown.end);
+    // Server rendering cannot know "now": the digits fill in after mount.
+    const [now, setNow] = React.useState(null);
+    React.useEffect(() => {
+        setNow(Date.now());
+        // One update a minute: digits never flip or pulse, and the polite
+        // region announces at most once a minute.
+        const timer = window.setInterval(() => setNow(Date.now()), 60000);
+        return () => window.clearInterval(timer);
+    }, []);
+    // Formatted in the reader's time zone, so only once mounted (print comes later).
+    const endLabel = countdown.endLabel ??
+        (now == null
+            ? null
+            : `Ends ${new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(end)}`);
+    const left = now == null ? undefined : remaining(end, now);
+    if (left === null) {
+        return React.createElement("span", { className: styles.countdown }, expired);
+    }
+    const cells = [
+        [left?.days, units[0]],
+        [left?.hours, units[1]],
+        [left?.minutes, units[2]],
+    ];
+    const spoken = left == null
+        ? ''
+        : `${left.days} ${units[0]}, ${left.hours} ${units[1]}, ${left.minutes} ${units[2]} left`;
+    return (React.createElement("time", { className: styles.countdown, dateTime: end.toISOString() },
+        React.createElement("span", { className: styles.cells, "aria-hidden": "true" }, cells.map(([value, unit]) => (React.createElement("span", { key: unit, className: styles.cellGroup },
+            React.createElement("span", { className: styles.cell }, value == null ? '––' : pad(value)),
+            React.createElement("span", { className: styles.unit }, unit))))),
+        React.createElement("span", { className: styles.visuallyHidden, "aria-live": "polite" }, spoken),
+        React.createElement("span", { className: styles.endDate }, endLabel)));
+}
+/**
+ * The announcement bar. Never sticky, never rotating, never truncated with
+ * an ellipsis; it scrolls away with the page. Hidden in print unless it is
+ * a `record`, whose countdown prints its end date.
+ */
+export function AnnouncementBar(props) {
+    const { kind, preset, ruled: _ruled, voice, record, link, countdown, dismissible, dismissLabel = 'Dismiss announcement', storageKey, onDismiss, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'bar';
+    const [dismissed, setDismissed] = React.useState(false);
+    React.useEffect(() => {
+        if (readDismissed(storageKey))
+            setDismissed(true);
+    }, [storageKey]);
+    if (dismissed)
+        return null;
+    const dismiss = () => {
+        writeDismissed(storageKey);
+        setDismissed(true);
+        onDismiss?.();
+    };
+    const variants = {
+        kind: resolvedKind,
+        voice,
+        record,
+        ruled: resolvedKind === 'bar',
+        interactive: link != null || dismissible === true,
+        className,
+    };
+    const classes = announcementBar({ ...variants, primary, secondary });
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement("p", { className: styles.message },
+            children,
+            link ? (React.createElement(React.Fragment, null,
+                ' ',
+                React.createElement(Link, { href: link.href, className: styles.link }, link.label))) : null),
+        countdown ? React.createElement(Countdown, { countdown: countdown }) : null,
+        dismissible ? (React.createElement(BaseButton, { className: `${styles.dismiss} ${iconHost}`, "aria-label": dismissLabel, onClick: dismiss },
+            React.createElement(Icon, { name: "close", weight: "interactive" }))) : null));
+    const aside = { ...rest, 'aria-label': rest['aria-label'] ?? 'Announcement' };
+    if (resolvedKind === 'field') {
+        return (React.createElement("aside", { ...aside, ...scope, className: classes },
+            React.createElement("div", { className: styles.container },
+                React.createElement(Ground, { kind: "field", preset: preset ?? 'forest', render: React.createElement("div", null), className: styles.fieldBar }, content))));
+    }
+    const inner = React.createElement("div", { className: styles.container }, content);
+    if (preset) {
+        return (React.createElement(Ground, { ...aside, kind: "band", preset: preset, 
+            // The color props override the preset on the Ground itself.
+            primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("aside", null), className: announcementBar(variants) }, inner));
+    }
+    return (React.createElement("aside", { ...aside, ...scope, className: classes }, inner));
+}
+/**
+ * The dual voice's one serif caps phrase, set inside the message at the
+ * run's cap height (Rocco's two-voice bar). Use it once, with `voice="dual"`.
+ */
+export function AnnouncementBarAccent(props) {
+    const { className, ...rest } = props;
+    return React.createElement("span", { ...rest, className: className ? `${styles.accent} ${className}` : styles.accent });
+}
+//# sourceMappingURL=AnnouncementBar.js.map

package/components/AnnouncementBar/AnnouncementBar.js.map

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

package/components/AnnouncementBar/announcement-bar.module.css

@@ -0,0 +1,271 @@
+/*
+ * Announcement Bar (§11.4). CVA function `announcementBar`.
+ * Color roles (§11.4): the bar's preset ground (Ground paints it); field
+ * edge --role-edge (the field's --primary12, drawn by Ground); message
+ * --primary12; link: the §9.3 body link (--primary12, --role-accent
+ * underline, --role-link-hover on hover); countdown cells --role-rule
+ * edge with --primary12 digits; dismiss glyph --primary12, pressed the
+ * inverse pair; bottom rule --role-rule. Colors are role variables only;
+ * local custom properties carry dimensions only.
+ */
+
+/* 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. */
+/* The voice is the bar's type role, inherited by the message and link. */
+.standard,
+.dual {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.mono {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.cell {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.endDate {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --announcement-min: var(--ds-size-bar-utility);
+
+    display: block;
+    color: var(--primary12);
+  }
+
+  /*
+   * One row inside the page margins: the message centered and growing, the
+   * countdown after it, the dismiss at the end; --size-px-2 vertical
+   * padding; 36 px tall for text alone, 44 px with a link or the dismiss.
+   */
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2) var(--size-px-3);
+    box-sizing: content-box;
+    max-inline-size: var(--ds-container-content);
+    margin-inline: auto;
+    padding-inline: var(--ds-space-margin);
+  }
+
+  .message {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+    text-align: center;
+    overflow-wrap: break-word;
+  }
+
+  .link {
+    white-space: nowrap;
+  }
+
+  /* Countdown: boxed tabular digits, never flipping; each cell ≥ 2.5ch. */
+  .countdown {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--primary12);
+  }
+
+  .cells {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .cellGroup {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--size-px-1);
+  }
+
+  .cell {
+    box-sizing: border-box;
+    min-inline-size: 2.5ch;
+    padding: 0 var(--size-px-1);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    color: var(--primary12);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .unit {
+    color: var(--primary12);
+  }
+
+  .endDate {
+    display: none;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The accent phrase stays in caps whatever its voice. */
+  .accent {
+    text-transform: uppercase;
+  }
+
+  /* Dismiss: the close glyph (inline tier) in a --ds-size-hit target; no circle [D181]. */
+  .dismiss {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    margin: 0;
+    /* The glyph, not its target, meets the container edge (from --lg-n-above, the container's own edge). */
+    margin-inline-end: calc((var(--ds-size-hit) - var(--size-px-3)) / -2);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .dismiss {
+      transition-property: color, background-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* ≤ 2 lines at base; one line from --md-n-above (authored short). */
+  @media (min-width: 768px) {
+    .message {
+      text-wrap: balance;
+    }
+  }
+}
+
+@layer variants {
+  /* Page-ground bar: --size-px-2 vertical padding, 36 / 44 px minimum. */
+  .bar .container {
+    box-sizing: border-box;
+    min-block-size: var(--announcement-min);
+    padding-block: var(--size-px-2);
+  }
+
+  /* The required bottom rule: --border-size-1, full-bleed, the bar's --role-rule [D179]. */
+  .ruled {
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /*
+   * Field bar [D180]: the strip keeps --size-px-2 of page ground above and
+   * below; the field spans the container with Ground's --ds-radius-8 and
+   * --primary12 edge, and the row inside it.
+   */
+  .field .container {
+    padding-block: var(--size-px-2);
+  }
+
+  .fieldBar {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2) var(--size-px-3);
+    box-sizing: border-box;
+    min-block-size: var(--announcement-min);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--size-px-3);
+  }
+
+  .interactive {
+    --announcement-min: var(--ds-size-hit);
+  }
+
+  /* Mono: type-data set in caps for dated or technical notices ("CLOSED 24–26 DEC"). */
+  .mono {
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+  }
+
+  /*
+   * Dual: the caps run keeps its UI face; the one accent phrase switches to
+   * the text serif, untracked, at the run's size (cap heights within ≈ 5%).
+   */
+  .dual .accent {
+    font-family: var(--ds-font-text);
+    font-weight: var(--font-weight-6);
+    letter-spacing: 0;
+  }
+}
+
+@layer states {
+  .dismiss:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Hover: the glyph's next tier weight comes from iconHost (§9.2 icon-only); forced colors add an outline [D181]. */
+  @media (forced-colors: active) {
+    .dismiss:hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: calc(-1 * var(--border-size-2));
+    }
+  }
+
+  /* Pressed: the inverse pair. */
+  .dismiss:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden by default (§11.4). */
+    .base {
+      display: none;
+    }
+
+    /*
+     * A notice of record prints once, black on white between two 0.75 pt
+     * rules; its link prints its short URL (the Link's own print rule).
+     */
+    .record {
+      display: block;
+      margin-block-end: var(--size-px-3);
+      border-block: var(--border-size-1) solid var(--primary12);
+      break-inside: avoid;
+    }
+
+    .fieldBar {
+      border: 0;
+      padding-inline: 0;
+    }
+
+    .dismiss,
+    .cells {
+      display: none;
+    }
+
+    /* A countdown prints its end date ("Ends 30 Sept 2026"). */
+    .endDate {
+      display: inline;
+    }
+  }
+}

package/components/AnnouncementBar/index.d.ts

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

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

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

package/components/AnnouncementBar/index.js

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

package/components/AnnouncementBar/index.js.map

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

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+export declare const autocomplete: (props?: ({
+    plate?: 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 AutocompleteVariants = VariantProps<typeof autocomplete>;
+/** One suggestion: the text it puts in the input, and optional display words. */
+export type AutocompleteOption = {
+    /** The text the suggestion fills in. */
+    value: string;
+    /** The words shown in the list. Default: `value`. */
+    label?: string;
+    disabled?: boolean;
+};
+/** A titled group of suggestions. */
+export type AutocompleteOptionGroup = {
+    /** The group label, in `type-label` caps. */
+    label: string;
+    items: readonly AutocompleteOption[];
+};
+type AutocompleteItems = readonly AutocompleteOption[] | readonly AutocompleteOptionGroup[];
+type RootProps = Omit<BaseAutocomplete.Root.Props<AutocompleteOption>, 'items' | 'children' | 'itemToStringValue'>;
+/** Props for Autocomplete: Base UI Autocomplete.Root props plus the suggestions, rows and color axes. */
+export type AutocompleteProps = RootProps & {
+    /** The suggestions, or titled groups. Pass `filter={null}` when the server filters them. */
+    items?: AutocompleteItems;
+    /** The input's placeholder, ending in "…"; never the label. */
+    placeholder?: string;
+    /** A leading icon in the box, such as `search` (inline tier). */
+    icon?: IconName;
+    /** Shows the chevron that opens the full list. Default `false`. */
+    showTrigger?: boolean;
+    /** The empty row. Default "No matches for '[query]'". Keep what the user typed. */
+    emptyText?: (query: string) => React.ReactNode;
+    /** Shows the loading row ("Searching…") while suggestions load. */
+    loading?: boolean;
+    /** The loading row's words. Default "Searching…". */
+    loadingText?: React.ReactNode;
+    /** A fetch failure, shown with the danger glyph instead of silently closing. */
+    error?: React.ReactNode;
+    /** The clear ×'s accessible name. Default "Clear". */
+    clearLabel?: string;
+    /** The chevron's accessible name. Default "Show suggestions". */
+    triggerLabel?: string;
+    /** Names the input when no visible label exists. Prefer a `FieldLabel`. */
+    'aria-label'?: string;
+    /** Class names for the box, added after the module's own. */
+    className?: string;
+    /** The box face becomes a nested `white` scope; patterned grounds only (§10.1). */
+    plate?: boolean;
+    /** Primary Radix scale: edge, value, icons and focus ring. Never defaulted [D133]. */
+    primary?: AutocompleteVariants['primary'];
+    /** Secondary Radix scale. Unused at rest; the danger scale while invalid. */
+    secondary?: AutocompleteVariants['secondary'];
+};
+/**
+ * A Base UI Autocomplete inside a `Field`. The input keeps any text: a
+ * suggestion only fills it, and Enter submits the typed text. No row is
+ * highlighted until the arrow keys move.
+ */
+export declare function Autocomplete(props: AutocompleteProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Autocomplete.d.ts.map

package/components/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAgCvD,eAAO,MAAM,YAAY;;;;8EAYvB,CAAA;AAEF,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAE7D,iFAAiF;AACjF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,qCAAqC;AACrC,MAAM,MAAM,uBAAuB,GAAG;IACpC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAA;CACrC,CAAA;AAED,KAAK,iBAAiB,GAAG,SAAS,kBAAkB,EAAE,GAAG,SAAS,uBAAuB,EAAE,CAAA;AAM3F,KAAK,SAAS,GAAG,IAAI,CACnB,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAC/C,OAAO,GAAG,UAAU,GAAG,mBAAmB,CAC3C,CAAA;AAED,yGAAyG;AACzG,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG;IAC1C,4FAA4F;IAC5F,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iEAAiE;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAC9C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,gFAAgF;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sFAAsF;IACtF,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;IACzC,6EAA6E;IAC7E,SAAS,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAA;CAC9C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAwJpD"}