@fairgarden/design 0.1.0-alpha.0

package/components/FAQ/FAQ.js

@@ -0,0 +1,146 @@
+'use client';
+import * as React from 'react';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { DisclosureGlyph } from '../Collapsible';
+import { Icon } from '../Icon';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './faq.module.css';
+/*
+ * FAQ (§12.5): 4–15 independent question-and-answer pairs that readers scan.
+ * Built on the Base UI Accordion in the §10.13 Ruled form (LTA disclosure
+ * glyph) with the Strong top rule; motion follows §10.13.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: faq.module.css; CVA function `faq`.
+ * - Axes: `kind` → ruled | keyed | split; `barred` → `barred` (the open bar
+ *   on open items); `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind ruled, barred false; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: Trigger `data-panel-open` → glyph direction and color, and
+ *   `openBar` under `barred`; Panel `data-starting-style` /
+ *   `data-ending-style` → the §10.13 clip reveal, never opacity [D91];
+ *   `:hover` (not disabled) on `trigger` → the bare-text underline on the
+ *   question (--role-accent at --border-size-2, offset --size-px-1)
+ *   [D181]; `:focus-visible` on `trigger` → the ring. No disabled
+ *   state.
+ * - Parts: base, header, title, intro, list (Accordion Root), item (Item),
+ *   heading (Header), trigger (Trigger), icon (keyed), question, glyph,
+ *   openBar, panel (Panel), answer, contact.
+ * - Scope: none.
+ * - Container: none. The list does not reflow; `split` is a page-grid
+ *   placement on viewport media (--lg-n-above) [D163].
+ */
+export const faq = cva(styles.base, {
+    variants: {
+        kind: {
+            ruled: styles.ruled,
+            keyed: styles.keyed,
+            split: styles.split,
+        },
+        barred: {
+            true: styles.barred,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'ruled',
+        barred: false,
+    },
+});
+/**
+ * The FAQ module: `FAQHeader` (with `FAQTitle` and an optional `FAQIntro`),
+ * `FAQList` holding `FAQItem`s, and an optional closing `FAQContact`. Place
+ * it on light or deep grounds; on saturated grounds keep to five items with
+ * answers of 40 words or fewer. Every answer prints expanded.
+ */
+export function FAQ(props) {
+    const { render, ref, className, kind, barred, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    return useRender({
+        defaultTagName: 'section',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: faq({ kind, barred, primary, secondary, className }),
+        }, rest),
+    });
+}
+/** The module header: the chapter-stack title, then the optional intro (§3.5 Recipe A). */
+export function FAQHeader(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'header',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.header, className) }, rest),
+    });
+}
+/** The section head: `type-h2` in `--role-heading`. Renders `<h2>`. */
+export function FAQTitle(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'h2',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.title, className) }, rest),
+    });
+}
+/** An optional lede under the title, within `--ds-measure-reading`. */
+export function FAQIntro(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.intro, className) }, rest),
+    });
+}
+/** The optional closing contact line, e.g. "Still stuck? Write to us." with a Link. */
+export function FAQContact(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.contact, className) }, rest),
+    });
+}
+/**
+ * The item list, a Base UI Accordion Root. Several items may be open at once
+ * (`multiple`, default `true`); closed answers stay in the DOM
+ * (`hiddenUntilFound`, default `true`) for find-in-page and print. Never
+ * open items by hover.
+ */
+export function FAQList(props) {
+    const { className, multiple = true, hiddenUntilFound = true, ...rest } = props;
+    return (React.createElement(BaseAccordion.Root, { ...rest, multiple: multiple, hiddenUntilFound: hiddenUntilFound, className: resolveClassName(className, (extra) => cx(styles.list, extra)) }));
+}
+/**
+ * One question and its answer. The question is an `h3` wrapping the trigger;
+ * the disclosure glyph trails it, top-aligned to its first line. The answer
+ * is `type-body`, within `--ds-measure-reading`. FAQ items are never
+ * disabled.
+ */
+export function FAQItem(props) {
+    const { question, icon, panelProps, className, children, ...rest } = props;
+    const { className: panelClassName, ...panelRest } = panelProps ?? {};
+    return (React.createElement(BaseAccordion.Item, { ...rest, className: resolveClassName(className, (extra) => cx(styles.item, extra)) },
+        React.createElement(BaseAccordion.Header, { className: styles.heading },
+            React.createElement(BaseAccordion.Trigger, { className: styles.trigger },
+                React.createElement("span", { className: styles.openBar, "aria-hidden": "true" }),
+                icon ? React.createElement(Icon, { name: icon, size: "block", className: styles.icon }) : null,
+                React.createElement("span", { className: styles.question }, question),
+                React.createElement(DisclosureGlyph, { size: "row", className: styles.glyph }))),
+        React.createElement(BaseAccordion.Panel, { ...panelRest, className: resolveClassName(panelClassName, (extra) => cx(styles.panel, extra)) },
+            React.createElement("div", { className: styles.answer }, children))));
+}
+//# sourceMappingURL=FAQ.js.map

package/components/FAQ/FAQ.js.map

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

package/components/FAQ/faq.module.css

@@ -0,0 +1,277 @@
+/*
+ * FAQ (§12.5): the §10.13 Ruled accordion with the Strong top rule, set as a
+ * content module. Parts: `base` (the section), `header`, `title`, `intro`,
+ * `list` (Accordion Root), `item`, `heading` (the h3), `trigger` (the row),
+ * `icon` (keyed only), `question`, `glyph` (the LTA disclosure glyph, drawn
+ * by the Collapsible module), `openBar`, `panel`, `answer`, `contact`.
+ * Dense module: line semantics only, never a fill on the open item. 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 trigger carries the
+ * question's type role so the glyph can align to its first line (1lh). */
+.title {
+  composes: typeH2 from '../../utils/type.module.css';
+}
+
+.intro {
+  composes: typeLead from '../../utils/type.module.css';
+}
+
+.trigger {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.answer {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.contact {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --faq-bar-inset: 0px;
+
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Chapter stack (§3.5 Recipe A): H2, then --ds-space-stack to the first rule. */
+  .header {
+    display: grid;
+    gap: var(--size-px-5);
+    margin-block-end: var(--ds-space-stack);
+  }
+
+  /* Section head in --role-heading; the item heads below are --primary12 [D60]. */
+  .title {
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  .intro {
+    margin: 0;
+    max-inline-size: var(--ds-measure-reading);
+    color: var(--primary12);
+  }
+
+  .list {
+    margin: 0;
+  }
+
+  /* Rules: the first is the Strong top (--border-size-2 --primary12); the rest --role-rule, closing after the last. */
+  .item {
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-rule);
+  }
+
+  .item:first-child {
+    border-block-start-width: var(--border-size-2);
+    border-block-start-color: var(--primary12);
+  }
+
+  .item:last-child {
+    border-block-end-width: var(--border-size-1);
+  }
+
+  .heading {
+    margin: 0;
+  }
+
+  /* The row: ≥ --ds-size-control-xl tall, --size-px-3 vertical padding. */
+  .trigger {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--ds-size-control-xl);
+    margin: 0;
+    padding-block: var(--size-px-3);
+    padding-inline: var(--faq-bar-inset) 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .question {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-wrap: balance;
+    /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* Trailing, top-aligned to the question's first line; it swaps direction, never rotates [D109]. */
+  .glyph {
+    flex: none;
+    margin-block: calc((1lh - var(--size-px-4)) / 2);
+  }
+
+  /* The optional open bar: a --ds-stroke-3 line at the row's start edge, shown under `barred`. */
+  .openBar {
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+  }
+
+  /* The §10.13 clip reveal [D91]: the panel's edge wipes open; never a fade. */
+  .panel {
+    block-size: var(--accordion-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Answers: text serif within the reading measure; --ds-space-12 below the question, --size-px-5 below. */
+  .answer {
+    max-inline-size: var(--ds-measure-reading);
+    padding-block: 0 var(--size-px-5);
+    padding-inline-start: var(--faq-bar-inset);
+    color: var(--primary12);
+  }
+
+  .contact {
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    /* Hover transition [D181]: --ds-duration-quick, --ease-out-3. */
+    .question {
+      transition-property: text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Ruled (default) and split rows are bare: no leading icon. */
+  .ruled .icon,
+  .split .icon {
+    display: none;
+  }
+
+  /* Keyed detail: a leading block icon per row; answers indent to the question column. */
+  .keyed .icon {
+    margin-block: calc((1lh - var(--ds-size-icon-block)) / 2);
+    color: var(--primary12);
+  }
+
+  .keyed .answer {
+    padding-inline-start: calc(var(--faq-bar-inset) + var(--ds-size-icon-block) + var(--size-px-3));
+  }
+
+  /* Barred: every row keeps the bar's inset, so questions stay aligned open or closed. */
+  .barred {
+    --faq-bar-inset: var(--ds-space-12);
+  }
+
+  /* Split (§12.5): a page-grid placement from --lg-n-above, header in 4 of 12 columns, the list in 8. */
+  @media (min-width: 1024px) {
+    .split {
+      display: grid;
+      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+      column-gap: var(--ds-space-margin);
+      align-items: start;
+    }
+
+    .split .header {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      margin-block-end: 0;
+    }
+
+    .split .list,
+    .split .contact {
+      grid-column: 2;
+    }
+  }
+}
+
+@layer states {
+  /* Expanded: the question-to-answer gap closes to --ds-space-12. */
+  .trigger[data-panel-open] {
+    padding-block-end: var(--ds-space-12);
+  }
+
+  .barred .trigger[data-panel-open] .openBar {
+    display: block;
+  }
+
+  /*
+   * Hover: the question takes the bare-text underline, --role-accent at
+   * --border-size-2, offset --size-px-1; the glyph does not change
+   * (§12.5, §10.13) [D109, D181].
+   */
+  .trigger:not([data-disabled]):hover .question {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: the ring around the row, inset --border-size-2 from the rules. */
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-2 * var(--border-size-2));
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* All answers print expanded; glyphs and the open bar hide; each pair stays together (§12.5). */
+    .glyph,
+    .openBar,
+    .barred .trigger[data-panel-open] .openBar {
+      display: none;
+    }
+
+    .item {
+      break-inside: avoid;
+    }
+
+    .trigger,
+    .trigger[data-panel-open] {
+      min-block-size: 0;
+      padding-block-end: var(--ds-space-12);
+    }
+
+    .panel,
+    .panel[data-starting-style],
+    .panel[data-ending-style] {
+      block-size: auto;
+      overflow: visible;
+    }
+
+    .panel[hidden] {
+      display: block;
+      content-visibility: visible;
+    }
+  }
+}

package/components/FAQ/index.d.ts

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

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

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

package/components/FAQ/index.js

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

package/components/FAQ/index.js.map

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

package/components/FeatureGrid/FeatureGrid.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from '../Link';
+import { type SectionHeaderProps } from '../SectionHeader';
+export declare const featureGrid: (props?: ({
+    kind?: "icon" | "framed" | "numbered" | "rule-topped" | "glossary" | 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 FeatureGridVariants = VariantProps<typeof featureGrid>;
+/** The five cell constructions (§12.6). */
+export type FeatureGridKind = 'icon' | 'numbered' | 'rule-topped' | 'framed' | 'glossary';
+/** Props for FeatureGrid: `section` props, `render`, the kind and the color axes. */
+export type FeatureGridProps = useRender.ComponentProps<'section'> & {
+    /**
+     * `icon` (default): block icon → serif heading → body, whitespace only.
+     * `numbered`: a zero-padded numeral in a 56 px outline circle, cells
+     * separated by inset rules (vertical rules once they sit in a row).
+     * `rule-topped`: each cell opens with a `--role-hairline` rule.
+     * `framed`: 2 × 2 inside one faced frame. `glossary`: small drawings with
+     * caps captions, no rules.
+     */
+    kind?: FeatureGridKind;
+    /**
+     * Primary Radix scale: numerals, headings, text, rules and the frame.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: FeatureGridVariants['primary'];
+    /**
+     * Secondary Radix scale: the block icons (`--role-accent`) and the title
+     * links' underline. Never defaulted.
+     */
+    secondary?: FeatureGridVariants['secondary'];
+    /**
+     * The module header (§11.8), rendered in the header slot before the
+     * children: a `SectionHeader` props object (the section is then labelled
+     * by its heading), or any node, such as a `SectionHeader` element. Omit it
+     * to compose `FeatureGridHeader` yourself.
+     */
+    header?: React.ReactNode | SectionHeaderProps;
+};
+/**
+ * The feature grid module: an optional header (`header`, or a composed
+ * `FeatureGridHeader`), then a `FeatureGridList` of 2–6 `FeatureGridCell`s. Each cell holds one leader
+ * (`FeatureGridIcon` or `FeatureGridDrawing`; numbered cells draw their own
+ * numeral), a `FeatureGridHeading` (optionally wrapping a `FeatureGridLink`)
+ * and a `FeatureGridBody`. Use one leader type per grid, never mixed.
+ */
+export declare function FeatureGrid(props: FeatureGridProps): React.JSX.Element;
+/** Props for FeatureGridHeader: `header` props and `render`. */
+export type FeatureGridHeaderProps = useRender.ComponentProps<'header'>;
+/**
+ * The module header slot: holds the §11.8 `SectionHeader` (FeatureGrid's
+ * `header` prop fills it for you); stays with the first cells in print.
+ */
+export declare function FeatureGridHeader(props: FeatureGridHeaderProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridList: list props and `render`. */
+export type FeatureGridListProps = useRender.ComponentProps<'ul'>;
+/**
+ * The cells' grid: a `ul`, or an `ol` for the numbered kind, whose order the
+ * numerals carry. In the framed kind it sits inside the faced frame.
+ */
+export declare function FeatureGridList(props: FeatureGridListProps): React.JSX.Element;
+/** Props for FeatureGridCell: list-item props and `render`. */
+export type FeatureGridCellProps = useRender.ComponentProps<'li'>;
+/**
+ * One benefit: leader → heading → body. Numbered cells draw their
+ * zero-padded numeral ("01") first, from the list order. A cell with a
+ * `FeatureGridLink` is linked as a whole.
+ */
+export declare function FeatureGridCell(props: FeatureGridCellProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridIcon: `span` props and `render`. */
+export type FeatureGridIconProps = useRender.ComponentProps<'span'>;
+/**
+ * The block-icon leader: put an `<Icon size="block" … />` (Material Symbols
+ * Rounded, FILL 0) inside. It fills in `--role-accent`, which resolves to
+ * `--primary12` on saturated grounds. Never put a colored tile behind it.
+ */
+export declare function FeatureGridIcon(props: FeatureGridIconProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridDrawing: `span` props and `render`. */
+export type FeatureGridDrawingProps = useRender.ComponentProps<'span'>;
+/**
+ * The glossary leader: a small geometric drawing (inline SVG, spot size
+ * `--size-px-9`) in `--primary12`. Fixed size; it never scales.
+ */
+export declare function FeatureGridDrawing(props: FeatureGridDrawingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridHeading: heading props and `render` (default `<h3>`). */
+export type FeatureGridHeadingProps = useRender.ComponentProps<'h3'>;
+/**
+ * The cell's heading: `type-itemhead` in `--primary12`; in the glossary kind
+ * a `type-label` caps caption. Renders `<h3>`.
+ */
+export declare function FeatureGridHeading(props: FeatureGridHeadingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridLink: Link props except `kind`, which is always `title`. */
+export type FeatureGridLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * The cell's one link, inside `FeatureGridHeading`: a §9.3 title Link whose
+ * hit area stretches over the cell. Hover, focus and press underline the
+ * heading; the cell draws the focus ring.
+ */
+export declare function FeatureGridLink(props: FeatureGridLinkProps): React.JSX.Element;
+/** Props for FeatureGridBody: `div` props and `render`. */
+export type FeatureGridBodyProps = useRender.ComponentProps<'div'>;
+/** A sentence or two of `type-body-ui` in `--primary12`. */
+export declare function FeatureGridBody(props: FeatureGridBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=FeatureGrid.d.ts.map

package/components/FeatureGrid/FeatureGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureGrid.d.ts","sourceRoot":"","sources":["../../src/components/FeatureGrid/FeatureGrid.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;AAGjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AA2CzE,eAAO,MAAM,WAAW;;;;8EAgBtB,CAAA;AAEF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA;AAE3D,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAA;AAezF,qFAAqF;AACrF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnE;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAC5C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAA;CAC9C,CAAA;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAkDlD;AAED,gEAAgE;AAChE,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AAEvE;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,0EAQ9D;AAED,0DAA0D;AAC1D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjE;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAe1D;AAED,+DAA+D;AAC/D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAoB1D;AAED,4DAA4D;AAC5D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAEnE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAQ1D;AAED,+DAA+D;AAC/D,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAEtE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,0EAWhE;AAED,iFAAiF;AACjF,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEpE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,0EAYhE;AAED,oFAAoF;AACpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAE1D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAG1D;AAED,2DAA2D;AAC3D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAElE,4DAA4D;AAC5D,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAQ1D"}