@fairgarden/design 0.1.0-alpha.0

package/components/Card/card.module.css

@@ -0,0 +1,479 @@
+/*
+ * Card (§12.2). The root `base` is the frame: it clips to the radius and is
+ * the inline-size container `card`. `face` is a nested Ground (white on a
+ * page ground, a paper light island inside a field or the night band) that
+ * paints the fill and carries the edge in the --role-edge it publishes:
+ * --primary10 on a page ground, --primary12 as a light island [D178, D179].
+ * The face fills the frame, so a grid row's cards end together and the
+ * action row is pinned to the bottom (§12.3). Colors are role variables only.
+ *
+ * Local dimensions (never colors):
+ *   --card-edge        faced edge width; 1 → 2 px on press or a checked choice
+ *   --card-edge-start  block edge, top and start (--ds-stroke-3)
+ *   --card-edge-end    block edge, bottom and end (--ds-stroke-8)
+ *   --card-padding     face padding by container / viewport tier
+ *   --card-inset       padding minus any edge growth, so layout holds
+ *   --card-frame       the edge-state hook: a composing module sets a width
+ *                      (Pricing: --ds-stroke-3) to draw the outer scope's
+ *                      --primary12 frame inset over the face's edge; 0 by
+ *                      default
+ *
+ * The entry card [D185] is a white face with a static --border-size-2
+ * --primary12 edge and --ds-radius-8: the square image flush to its start
+ * edge and as tall as the card, the category and title link beside it.
+ */
+
+/* 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. */
+.kicker {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.meta {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.body {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative; /* the stretched title link's positioned ancestor */
+    container: card / inline-size;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+  }
+
+  /*
+   * The edge-state hook's frame: the outer scope's --primary12 at
+   * --card-frame, inset over the face's edge (§12.9). A line, not a
+   * shadow; invisible at the default 0.
+   */
+  .base::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border: var(--card-frame, 0px) solid var(--primary12);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  /* `.base .face` outranks the composed Ground's own `display: block` and edge. */
+  .base .face {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--ds-space-12);
+    min-inline-size: 0;
+    border: 0 solid var(--role-edge);
+    color: var(--primary12);
+  }
+
+  /* The lead card's text column: part of the stacked face until the lead goes horizontal. */
+  .leadBody {
+    display: contents;
+  }
+
+  .media {
+    align-self: stretch;
+    margin: 0;
+    aspect-ratio: var(--ds-ratio-photo);
+    border-radius: var(--ds-radius-conditional-8);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .media > * {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .kicker {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .title {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .meta {
+    margin: 0;
+  }
+
+  .body {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /*
+   * Actions sit above the stretched hit area as their own tab stops (§12.1),
+   * pinned to the card's bottom (§12.3). The row itself lets the card link
+   * through; its controls take the pointer.
+   */
+  .action {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2);
+    margin-block-start: auto;
+    pointer-events: none;
+  }
+
+  .action > * {
+    pointer-events: auto;
+  }
+
+  /* The option-card indicator (§10.7): a control of its own, above the stretched link. */
+  .choice {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  /* Stack guard (§1.11.11 rule 5): viewport fallback, then the card container. */
+  @media (max-width: 359.98px) {
+    .action {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  @container card (width < 360px) {
+    .action {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}
+
+@layer variants {
+  /* Editorial rhythm: media → 16 → title → 12 → body → 24 → action. */
+  .editorial .media {
+    margin-block-end: calc(var(--size-px-3) - var(--ds-space-12));
+  }
+
+  /* The 24 px minimum above the pinned action is padding, so the auto margin still pins it. */
+  .editorial .action {
+    padding-block-start: calc(var(--size-px-5) - var(--ds-space-12));
+  }
+
+  /* Faced: the face draws a --border-size-1 edge in --role-edge [D178, D179]. */
+  .faced {
+    border-radius: var(--ds-radius-conditional-8);
+    overflow: hidden;
+    overflow: clip; /* the face and a flush photo follow the frame's curve */
+  }
+
+  .faced .face {
+    --card-edge: var(--border-size-1);
+    --card-padding: var(--size-px-3);
+    --card-inset: calc(var(--card-padding) + var(--border-size-1) - var(--card-edge));
+    padding: var(--card-inset);
+    border: var(--card-edge) solid var(--role-edge);
+    border-radius: inherit;
+  }
+
+  /* A leading photo runs flush to the frame; its corners square off with it. */
+  .faced .media:first-child {
+    margin-block-start: calc(-1 * var(--card-inset));
+    margin-inline: calc(-1 * var(--card-inset));
+    border-radius: 0;
+  }
+
+  /* Block edge [D20, D174]: featured cards only, one family per page, 1–3 cards; drawn in --role-edge [D178]. */
+  .block {
+    border-radius: var(--ds-radius-conditional-20);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Centered stack; padding ≥ radius. Rhythm: photo → 12 → title → 16 → … → action → 12 → edge. */
+  .block .face {
+    --card-padding: var(--size-px-4);
+    --card-inset: var(--card-padding);
+    --card-edge-start: var(--ds-stroke-3);
+    --card-edge-end: var(--ds-stroke-8);
+    border-style: solid;
+    border-color: var(--role-edge);
+    border-width: var(--card-edge-start) var(--card-edge-end) var(--card-edge-end)
+      var(--card-edge-start);
+    border-radius: inherit;
+    padding: var(--card-inset);
+    gap: var(--size-px-3);
+    align-items: center;
+    text-align: center;
+  }
+
+  .block .media {
+    aspect-ratio: var(--ratio-widescreen);
+    border-radius: calc(var(--ds-radius-20) - var(--size-px-2)); /* nested rule [D40] */
+    margin-block-end: calc(var(--ds-space-12) - var(--size-px-3));
+  }
+
+  .block .media:first-child {
+    margin-block-start: calc(var(--size-px-2) - var(--card-inset));
+    margin-inline: calc(var(--size-px-2) - var(--card-inset));
+  }
+
+  .block .action {
+    justify-content: center;
+  }
+
+  .block .action:last-child {
+    margin-block-end: calc(var(--ds-space-12) - var(--card-inset));
+  }
+
+  /*
+   * Entry [D185]: compact and horizontal at every width. The face draws the
+   * static --border-size-2 --primary12 edge and clips its content to the
+   * inner curve; the square image runs flush down the start edge, as tall
+   * as the card; category → --size-px-2 → title, centred beside it.
+   */
+  .entry {
+    border-radius: var(--ds-radius-8);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .entry .face {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+    padding: 0;
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: inherit;
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .entry .media {
+    flex: none;
+    inline-size: var(--size-px-11);
+    aspect-ratio: var(--ratio-square);
+    border-radius: 0;
+  }
+
+  .entry .entryBody {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+    padding: var(--size-px-3);
+  }
+
+  /* Padding steps: viewport fallback first (§12.2 Tokens)… */
+  @media (min-width: 768px) {
+    .faced .face,
+    .block .face {
+      --card-padding: var(--size-px-5);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .faced .face,
+    .block .face {
+      --card-padding: var(--size-px-7);
+    }
+  }
+
+  /*
+   * Lead (editorial): horizontal, media 5 columns and text 7, from 944 px of
+   * the card-grid container; viewport fallback --lg-n-above (§12.2, §12.3).
+   * The media keeps its photo ratio at the top of its column.
+   */
+  @media (min-width: 1024px) {
+    .lead .face {
+      display: grid;
+      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+      align-items: start;
+      column-gap: var(--ds-space-margin);
+    }
+
+    .lead .leadBody {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-12);
+      align-self: stretch;
+      min-inline-size: 0;
+    }
+
+    .lead .media {
+      margin-block-end: 0;
+    }
+  }
+
+  /* …then the card-grid container (§12.3) refines it at 608 / 944 px (§5.10.2). */
+  @container card-grid (width < 608px) {
+    .faced .face {
+      --card-padding: var(--size-px-3);
+    }
+
+    .block .face {
+      --card-padding: var(--size-px-4);
+    }
+  }
+
+  @container card-grid (608px <= width < 944px) {
+    .faced .face,
+    .block .face {
+      --card-padding: var(--size-px-5);
+    }
+  }
+
+  @container card-grid (width >= 944px) {
+    .faced .face,
+    .block .face {
+      --card-padding: var(--size-px-7);
+    }
+  }
+
+  @container card-grid (width < 944px) {
+    .lead .face {
+      display: flex;
+    }
+
+    .lead .leadBody {
+      display: contents;
+    }
+
+    .lead .media {
+      margin-block-end: calc(var(--size-px-3) - var(--ds-space-12));
+    }
+  }
+
+  @container card-grid (width >= 944px) {
+    .lead .face {
+      display: grid;
+      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+      align-items: start;
+      column-gap: var(--ds-space-margin);
+    }
+
+    .lead .leadBody {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ds-space-12);
+      align-self: stretch;
+      min-inline-size: 0;
+    }
+
+    .lead .media {
+      margin-block-end: 0;
+    }
+  }
+}
+
+@layer compounds {
+  /*
+   * Faced lead, horizontal: the flush photo runs down the start edge, top to
+   * bottom, filling its column's height; the frame squares it off.
+   */
+  @media (min-width: 1024px) {
+    .facedLead .media:first-child {
+      align-self: stretch;
+      margin-block: calc(-1 * var(--card-inset));
+      margin-inline: calc(-1 * var(--card-inset)) 0;
+      aspect-ratio: auto;
+    }
+  }
+
+  @container card-grid (width < 944px) {
+    .facedLead .media:first-child {
+      align-self: stretch;
+      margin-block: calc(-1 * var(--card-inset)) calc(var(--size-px-3) - var(--ds-space-12));
+      margin-inline: calc(-1 * var(--card-inset));
+      aspect-ratio: var(--ds-ratio-photo);
+    }
+  }
+
+  @container card-grid (width >= 944px) {
+    .facedLead .media:first-child {
+      align-self: stretch;
+      margin-block: calc(-1 * var(--card-inset));
+      margin-inline: calc(-1 * var(--card-inset)) 0;
+      aspect-ratio: auto;
+    }
+  }
+}
+
+@layer states {
+  /* The item's focus ring sits outside the frame, keyboard only (§12.1) [D45];
+     it replaces the title link's own ring. */
+  .base .titleLink:focus-visible {
+    outline: none;
+  }
+
+  .base:has(.titleLink:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Pressed: the faced edge steps to --border-size-2 in --primary12; --card-inset holds the layout. */
+  .faced:has(.titleLink:active) .face {
+    --card-edge: var(--border-size-2);
+    border-color: var(--primary12);
+  }
+
+  /* An option card's checked choice: --border-size-2 in --role-select-edge (§10.7) [D15]. */
+  .base:has(.choice [data-checked]) .face {
+    --card-edge: var(--border-size-2);
+    border-color: var(--role-select-edge);
+  }
+
+  /*
+   * Unavailable [D16]: a line-dotted-fine edge in --role-disabled-edge
+   * (--primary12 on the one-ink grounds [D85]), title and body --role-muted,
+   * the action removed. The photo is untouched; never opacity. Bare cards
+   * keep no edge (their face's border width stays 0).
+   */
+  .disabled .face,
+  .base:has(.choice [data-disabled]) .face {
+    --card-edge: var(--ds-dot-fine);
+    --card-edge-start: var(--ds-dot-fine);
+    --card-edge-end: var(--ds-dot-fine);
+    border-style: dotted;
+    border-color: var(--role-disabled-edge);
+  }
+
+  .disabled .title,
+  .disabled .body,
+  .base:has(.choice [data-disabled]) .title,
+  .base:has(.choice [data-disabled]) .body {
+    color: var(--role-muted);
+  }
+
+  .disabled .action {
+    display: none;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Keep each card whole; faces drop and edges print through the global remap. */
+    .base {
+      break-inside: avoid;
+    }
+
+    /* The entry card's square image prints grayscale inside its frame. */
+    .entry .media {
+      filter: grayscale(1);
+    }
+  }
+}

package/components/Card/index.d.ts

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

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

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

package/components/Card/index.js

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

package/components/Card/index.js.map

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

package/components/CardGrid/CardGrid.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 LinkProps } from '../Link';
+import { type SectionHeaderProps } from '../SectionHeader';
+export declare const cardGrid: (props?: ({
+    kind?: "block" | "compact" | "editorial" | "lead" | 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 CardGridVariants = VariantProps<typeof cardGrid>;
+/** The four grid builds (§12.3). */
+export type CardGridKind = 'editorial' | 'compact' | 'block' | 'lead';
+/** Props for CardGrid: `section` props, `render`, the kind and the color axes. */
+export type CardGridProps = useRender.ComponentProps<'section'> & {
+    /**
+     * Required. `editorial`: articles and programs, 1 → 2 → 3 columns.
+     * `compact`: species, products and team, 1 → 2 → 4 columns. `block`: the
+     * block-edge featured cards (1–3 per page, one card family), 1 → 2 → 3
+     * columns with extra clearance for the heavy edge. `lead`: one lead card
+     * across the grid, followed by §12.11 index rows.
+     */
+    kind: CardGridKind;
+    /**
+     * Primary Radix scale: the count and footer link text. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: CardGridVariants['primary'];
+    /**
+     * Secondary Radix scale: the footer link's underline and chevron
+     * (`--role-accent`, `--role-glyph`). Never defaulted.
+     */
+    secondary?: CardGridVariants['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 `CardGridHeader` yourself.
+     */
+    header?: React.ReactNode | SectionHeaderProps;
+};
+/**
+ * The card grid module: an optional header (`header`, or a composed
+ * `CardGridHeader` holding the §11.8 section header), an optional
+ * `CardGridToolbar` and `CardGridCount`, the
+ * `CardGridList` of `CardGridItem`s (one `Card` each), and an optional
+ * `CardGridFooter` with a `CardGridFooterLink` ("See all ›"). Never mix
+ * card kinds in one grid, and never scroll it horizontally (use §12.4).
+ */
+export declare function CardGrid(props: CardGridProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridHeader: `header` props and `render`. */
+export type CardGridHeaderProps = useRender.ComponentProps<'header'>;
+/**
+ * The module header slot: holds the §11.8 `SectionHeader` (eyebrow +
+ * hairline for explore grids; CardGrid's `header` prop fills it for you).
+ * Sits `--size-px-5` above the grid and stays with the first row in print.
+ */
+export declare function CardGridHeader(props: CardGridHeaderProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridToolbar: `div` props and `render`. */
+export type CardGridToolbarProps = useRender.ComponentProps<'div'>;
+/**
+ * The filter and sort bar: filter chips (§9.4) and a sort Select (§10.5),
+ * wrapping onto more lines as needed. Hidden in print.
+ */
+export declare function CardGridToolbar(props: CardGridToolbarProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridCount: paragraph props and `render`. */
+export type CardGridCountProps = useRender.ComponentProps<'p'>;
+/**
+ * The result count of a filtered grid ("12 events"), a polite live region
+ * in `--primary12`. Keep it mounted and change its text, so the change is
+ * announced.
+ */
+export declare function CardGridCount(props: CardGridCountProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridList: list props and `render`. */
+export type CardGridListProps = useRender.ComponentProps<'ul'>;
+/**
+ * The grid itself, a `ul` whose columns follow the `card-grid` container
+ * (auto-fit without container-query support). Rows keep equal heights and
+ * print 2-up, each row whole.
+ */
+export declare function CardGridList(props: CardGridListProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridItem: list-item props and `render`. */
+export type CardGridItemProps = useRender.ComponentProps<'li'>;
+/** One cell: holds one `Card`, stretched to the row's height. */
+export declare function CardGridItem(props: CardGridItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridFooter: `div` props and `render`. */
+export type CardGridFooterProps = useRender.ComponentProps<'div'>;
+/** The module footer, `--size-px-7` below the grid: a `CardGridFooterLink` or §9.9 pagination. */
+export declare function CardGridFooter(props: CardGridFooterProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardGridFooterLink: Link props except `kind`, which is always `standalone`. */
+export type CardGridFooterLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * "See all ›": the standalone Link (§9.3), `type-label` caps authored in
+ * sentence case, with its chevron in `--role-glyph`. The Link owns every
+ * state, so hover follows the central link model.
+ */
+export declare function CardGridFooterLink(props: CardGridFooterLinkProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CardGrid.d.ts.map

package/components/CardGrid/CardGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../src/components/CardGrid/CardGrid.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,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAmCzE,eAAO,MAAM,QAAQ;;;;8EAYnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,oCAAoC;AACpC,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAErE,kFAAkF;AAClF,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IAChE;;;;;;OAMG;IACH,IAAI,EAAE,YAAY,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAA;CAC9C,CAAA;AAaD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,0EAmC5C;AAED,6DAA6D;AAC7D,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AAEpE;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,0EAQxD;AAED,2DAA2D;AAC3D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAElE;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAQ1D;AAED,6DAA6D;AAC7D,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE9D;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,0EAWtD;AAED,uDAAuD;AACvD,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAE9D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,0EAQpD;AAED,4DAA4D;AAC5D,MAAM,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAE9D,iEAAiE;AACjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,0EAQpD;AAED,0DAA0D;AAC1D,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAEjE,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,0EAQxD;AAED,4FAA4F;AAC5F,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAEhE"}