@fairgarden/design 0.1.0-0.canary.0

package/page/section-bar/section-bar.module.css

@@ -0,0 +1,615 @@
+/*
+ * Sticky Section Bar (§11.7) [D183, D184]. CVA function `sectionBar` in
+ * SectionBar.tsx. Parts: base (the scoped nav; its end border is the
+ * bottomRule), sentinel, topRule, stack (the Collapsible root), toolbar,
+ * lead, glyph, title, search, breadcrumb (the §9.8 Breadcrumb's root:
+ * its one line, crumbs and states are the Breadcrumb's), jumpTrigger (jumpLabel,
+ * jumpStatic, jumpLive, chevron, jumpIndicator), end, listen, listenCount,
+ * tools, share, tabList (tabItem, tab, tabLabel, toTopItem, toTop: the
+ * arrow_upward icon link), breadcrumbPanel (stairList, stairChevron, stairLink,
+ * stairPlain, stairCurrent, panelTools), jumpPositioner, jumpPanel,
+ * jumpList, jumpItem, visuallyHidden. Colors follow the §11.7 Color roles
+ * table through role variables 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. Wayfinding is caps [D165]. */
+.title {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.stairLink {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.stairPlain {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.stairCurrent {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.tab {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.jumpTrigger {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.jumpItem {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+/* The dock swap: a --fgd-duration-quick clip from the top edge, never tied to scroll. */
+@keyframes dock {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+
+  to {
+    clip-path: inset(0);
+  }
+}
+
+@layer base {
+  /* Opaque, on the covered band's ground; one line, at least --fgd-size-hit. */
+  .base {
+    position: relative;
+    display: block;
+    min-block-size: var(--fgd-size-hit);
+  }
+
+  /* A 1 px line the bar overlaps: a zero-height target at the viewport's
+     top edge can read as outside it and never report leaving. */
+  .sentinel {
+    display: block;
+    block-size: var(--border-size-1);
+    margin-block-end: calc(-1 * var(--border-size-1));
+  }
+
+  /* The optional top rule: --border-size-2 in the brand green, like the strip. */
+  .topRule {
+    display: block;
+    block-size: var(--border-size-2);
+    background-color: var(--secondary9);
+  }
+
+  .stack {
+    display: block;
+  }
+
+  /* The row: --size-px-2-5 sides (tight gutters), capped at the content container from --lg-n-above. */
+  .toolbar {
+    box-sizing: border-box;
+    display: flex;
+    align-items: stretch;
+    gap: var(--size-px-3);
+    inline-size: 100%;
+    min-block-size: var(--fgd-size-hit);
+    margin-inline: auto;
+    padding-inline: var(--size-px-2-5);
+  }
+
+  /* Base: the disclosure glyph and the caps title. */
+  .lead {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  .glyph {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    margin: 0;
+    margin-inline-start: calc(-1 * var(--size-px-2-5));
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* type-label, one line, ellipsis; the full text stays in the accessible name. */
+  .title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--primary12);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .search {
+    display: none;
+  }
+
+  /* The inline breadcrumb (from --md-n-above): the §9.8 Breadcrumb's one
+     line, whose crumbs truncate on a --fgd-size-hit target, never wrap. */
+  .breadcrumb {
+    display: none;
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  /* Jump to: ≤ 30% of the bar (240 px), type-body-ui plus expand_more. */
+  .jumpTrigger {
+    position: relative;
+    display: flex;
+    flex: 0 1 var(--size-px-13);
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+    max-inline-size: 30%;
+    margin: 0;
+    margin-inline-start: auto;
+    padding: 0 var(--size-px-2);
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .jumpLabel {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .jumpLive {
+    display: none;
+  }
+
+  .chevron {
+    color: var(--role-glyph);
+  }
+
+  /* The indicator: --border-size-2 in --role-accent, trigger-wide, flush with the bottom rule. */
+  .jumpIndicator {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: var(--border-size-2);
+    background-color: var(--role-accent);
+    pointer-events: none;
+  }
+
+  .end {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--size-px-3);
+    min-inline-size: 0;
+  }
+
+  /* The guide's listen jump: a standalone body link and its opaque count badge. */
+  .listen {
+    padding-block: var(--size-px-2);
+    white-space: nowrap;
+  }
+
+  .listenCount {
+    margin-inline-start: var(--size-px-2);
+  }
+
+  .tools,
+  .toolsMovable,
+  .share {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .share {
+    display: none;
+  }
+
+  /* The tab strip (from --lg-n-above): equal cells, at least --size-px-12. */
+  .tabList {
+    display: none;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-x: auto;
+  }
+
+  .tabItem {
+    display: flex;
+    flex: 1 1 0;
+    min-inline-size: var(--size-px-12);
+  }
+
+  .toTopItem {
+    display: flex;
+    flex: none;
+  }
+
+  .tab {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 0;
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-3);
+    color: var(--primary12);
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .tabLabel {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* toTop: a --fgd-size-hit square icon link at the strip's start. */
+  .toTop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    color: var(--primary12);
+  }
+
+  /* The staircase (base only): capped at half the viewport, scrolling inside. */
+  .breadcrumbPanel {
+    block-size: var(--collapsible-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .stairList {
+    max-block-size: 50vh;
+    margin: 0;
+    padding-block: 0 var(--size-px-2);
+    padding-inline: calc(var(--size-px-2-5) + var(--fgd-size-hit)) var(--size-px-2-5);
+    overflow-y: auto;
+    list-style: none;
+  }
+
+  .stairChevron {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    inline-size: var(--size-px-5);
+    color: var(--role-muted);
+  }
+
+  .stairLink,
+  .stairPlain,
+  .stairCurrent {
+    color: var(--primary12);
+  }
+
+  .panelTools {
+    display: none;
+  }
+
+  /* The Jump panel: the anchored overlay surface, --size-px-14 wide [D184]. */
+  .jumpPositioner {
+    z-index: var(--layer-3);
+  }
+
+  .jumpPanel {
+    box-sizing: border-box;
+    inline-size: min(var(--size-px-14), 100vw - 2 * var(--fgd-space-margin));
+    max-block-size: min(60vh, var(--available-height));
+    padding-block: var(--size-px-2);
+    overflow-y: auto;
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+  }
+
+  .jumpList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Rows ≥ --fgd-size-control-md in a --fgd-size-hit area; no rest underline [D80]. */
+  .jumpItem {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-block-size: var(--fgd-size-hit);
+    padding: var(--size-px-1) var(--size-px-3);
+    color: var(--primary12);
+    text-decoration: none;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(-1 * var(--border-size-1));
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .breadcrumbPanel {
+      transition: block-size var(--fgd-duration-disclosure) var(--ease-out-3);
+    }
+
+    .jumpPanel {
+      transition: clip-path var(--fgd-duration-disclosure) var(--ease-out-3);
+    }
+
+    .jumpItem,
+    .jumpLabel {
+      transition: color var(--fgd-duration-quick) var(--ease-out-3);
+    }
+  }
+
+  /* Below 360 px the tools move into the staircase panel, keeping one line [D73]. */
+  @media (max-width: 359.98px) {
+    .toolsMovable {
+      display: none;
+    }
+
+    .panelTools {
+      display: flex;
+      align-items: center;
+      gap: var(--size-px-2);
+      padding: 0 var(--size-px-2-5) var(--size-px-2);
+    }
+  }
+
+  /* From --md-n-above: the inline breadcrumb and the live Jump label [D184]. */
+  @media (min-width: 768px) {
+    .lead,
+    .breadcrumbPanel {
+      display: none;
+    }
+
+    .breadcrumb {
+      display: flex;
+      flex: 1 1 auto;
+    }
+
+    .jumpStatic {
+      display: none;
+    }
+
+    .jumpLive {
+      display: inline;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .toolbar {
+      max-inline-size: calc(var(--fgd-container-content) + 2 * var(--size-px-2-5));
+    }
+  }
+
+  /* Share tools may join from --xl-n-above [D184]. */
+  @media (min-width: 1440px) {
+    .share {
+      display: flex;
+    }
+  }
+}
+
+@layer variants {
+  /* The bottom rule: the band's end border, --border-size-1 in --role-rule (no shadow [D19]). */
+  .base {
+    border-block-end-color: var(--role-rule);
+  }
+
+  /* Capped: the top rule stands at the edge in place of the band's hidden top seam. */
+  .capped {
+    border-block-start-width: 0;
+  }
+
+  /* Section: never the tab strip. */
+  .section .tabList {
+    display: none;
+  }
+
+  /* Guide at base: the end group lets Jump to and listen join the row, so
+     Jump to keeps its 30% of the bar beside the title. */
+  .guide .end {
+    display: contents;
+  }
+
+  /* Guide (from --md-n-above): search at the start, the breadcrumb centred
+     between equal start and end groups, Jump to and the tools at the end. */
+  @media (min-width: 768px) {
+    .guide .search {
+      display: flex;
+      flex: 1 1 0;
+      align-items: center;
+      min-inline-size: 0;
+    }
+
+    .guide .search > * {
+      flex: 0 1 var(--size-px-13);
+      min-inline-size: 0;
+    }
+
+    .guide .breadcrumb {
+      flex: 0 1 auto;
+      justify-content: center;
+    }
+
+    .guide .end {
+      display: flex;
+      flex: 1 1 0;
+      align-self: stretch;
+      justify-content: flex-end;
+    }
+
+    /* Full height, so its indicator stays flush with the bottom rule; up to
+       --size-px-13 of the end group (at most 30% of the bar, since the group
+       is under half of it past the centred breadcrumb). */
+    .guide .jumpTrigger {
+      align-self: stretch;
+      max-inline-size: none;
+      margin-inline-start: 0;
+    }
+  }
+
+  /* Tabs (from --lg-n-above, ≤ 6 sections): the strip replaces the breadcrumb row and Jump to. */
+  @media (min-width: 1024px) {
+    .tabs .breadcrumb,
+    .tabs .jumpTrigger {
+      display: none;
+    }
+
+    .tabs .tabList {
+      display: flex;
+    }
+  }
+
+  /* Docked: the top edge's one sticky bar, opaque, on --layer-2 [D89, D183]. */
+  .docked {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--layer-2);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .docked {
+      animation: dock var(--fgd-duration-quick) var(--ease-out-3);
+    }
+  }
+}
+
+@layer states {
+  /* Glyph hover: the next tier's weight (§10.1 icon states) [D181]. */
+  .glyph:hover svg {
+    stroke-width: var(--border-size-1-5);
+  }
+
+  /* Jump trigger hover: the label takes the link hover ink; the indicator keeps its weight [D181]. */
+  .jumpTrigger:hover .jumpLabel {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--fgd-link-hover-line);
+  }
+
+  .jumpTrigger[data-popup-open] .chevron {
+    rotate: 180deg;
+  }
+
+  .jumpTrigger[data-popup-open] .jumpIndicator {
+    block-size: var(--border-size-2-25);
+  }
+
+  /* Jump item hover: --role-link-hover only; underlined where it is --primary12 [D181]. */
+  .jumpItem:hover {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--fgd-link-hover-line);
+  }
+
+  .stairLink:hover {
+    color: var(--role-link-hover);
+  }
+
+  /* The staircase's current row: --font-weight-6 (the line's current crumb is the Breadcrumb's, at 7 [D184]). */
+  .stairCurrent[aria-current='page'] {
+    font-weight: var(--font-weight-6);
+  }
+
+  /* Current Jump item: the --border-size-2-25 start bar in --primary12 [D15]. */
+  .jumpItem[aria-current='location']::before {
+    content: '';
+    position: absolute;
+    inset-block: var(--size-px-1);
+    inset-inline-start: 0;
+    inline-size: var(--border-size-2-25);
+    background-color: var(--primary12);
+  }
+
+  /* Tab hover: the bare-text underline [D181]; current: the bar on the bottom rule plus weight. */
+  .tab:not([aria-current='location']):hover .tabLabel {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .tab[aria-current='location'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  .tab[aria-current='location']::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: var(--border-size-2-25);
+    background-color: var(--primary12);
+  }
+
+  .glyph:focus-visible,
+  .jumpTrigger:focus-visible,
+  .toTop:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /* Rings inside a scrolling strip or panel sit inset, so nothing clips them. */
+  .tab:focus-visible,
+  .jumpItem:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: calc(-1 * (var(--fgd-focus-width) + var(--fgd-focus-offset)));
+  }
+
+  .breadcrumbPanel[data-starting-style],
+  .breadcrumbPanel[data-ending-style] {
+    block-size: 0;
+  }
+
+  .jumpPanel[data-starting-style],
+  .jumpPanel[data-ending-style] {
+    clip-path: inset(0 0 100% 0);
+  }
+
+  .jumpPanel[data-instant] {
+    transition: none;
+  }
+
+  /* Forced colors flatten inks, so a color-only hover adds an underline [D181]. */
+  @media (forced-colors: active) {
+    .jumpTrigger:hover .jumpLabel,
+    .jumpItem:hover {
+      text-decoration-line: underline;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden with the Jump label, tabs, toTop, search and listen; the path prints in the masthead. */
+    .base,
+    .sentinel,
+    .jumpPositioner {
+      display: none;
+    }
+  }
+}

package/page/section-divider/SectionDivider.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sectionDivider: (props?: ({
+    kind?: "pause" | "chrome" | "straight" | "seam" | "page-seam" | "hill" | "fringe" | null | undefined;
+    heavy?: boolean | null | undefined;
+    ornament?: "dotted" | "dot" | "star" | 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 SectionDividerVariants = VariantProps<typeof sectionDivider>;
+/** The seven §11.2 builds. */
+export type SectionDividerKind = NonNullable<SectionDividerVariants['kind']>;
+/** The pause ornament: `line-dotted`, `ornament-rule-dot` or `ornament-rule-star` (§4.8.2). */
+export type SectionDividerOrnament = NonNullable<SectionDividerVariants['ornament']>;
+type SectionDividerCommonProps = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
+    /**
+     * Primary Radix scale: the rule, dots and ticks. Never defaulted;
+     * omitted, it inherits the lower band's scope [D133].
+     */
+    primary?: SectionDividerVariants['primary'];
+    /**
+     * Secondary Radix scale: drives only the ornament-rule strokes
+     * (`--role-accent`). Never defaulted.
+     */
+    secondary?: SectionDividerVariants['secondary'];
+};
+type SectionDividerKindProps = {
+    /**
+     * `straight` (default): the hard cut; no element renders, the ground
+     * change is the seam. `seam`: the same-ground `--role-rule` seam.
+     * `page-seam`: the hairline between two different page grounds, in
+     * the lower band's `--role-hairline`, in both modes [D179]. `hill`:
+     * the hill on the night media hero's lower seam, light mode
+     * only [D189]. `fringe`: the hatched fringe on the night band's edge,
+     * light mode only [D172]. `chrome`: a header or footer chrome rule.
+     * `pause`: an ornamental pause inside one band.
+     */
+    kind?: 'straight' | 'seam' | 'page-seam' | 'hill' | 'fringe';
+    heavy?: never;
+    ornament?: never;
+} | {
+    kind: 'chrome';
+    /**
+     * The heavy chrome option (§4.3): `--border-size-2` in `--primary12`,
+     * for technical pages only [D174]. Default `false`.
+     */
+    heavy?: boolean;
+    ornament?: never;
+} | {
+    kind: 'pause';
+    heavy?: never;
+    /**
+     * `dotted` (default): a centered `line-dotted` run in `--role-rule`.
+     * `dot`: rule–dot–rule; `star`: dot-and-star, both in `--role-accent`.
+     */
+    ornament?: SectionDividerOrnament;
+};
+/** Props for SectionDivider: `div` props, the kind with its options, and the color axes. */
+export type SectionDividerProps = SectionDividerCommonProps & SectionDividerKindProps;
+/**
+ * The seam between two bands, or a pause inside one. Render a band seam
+ * (`seam`, `page-seam`, `hill`, `fringe`) as the first child of the lower
+ * band's `<Ground kind="band">`, whose block padding is `--fgd-space-section`
+ * (§11.1): the divider takes that band's colors and sits on its top edge.
+ *
+ * A shaped edge sits only where tone separates the seam: the night band
+ * against a page ground in light mode [D179]. On a dark page it drops for
+ * the night band's straight `--primary12` seam, and in print and forced
+ * colors for a straight rule. Use one shaped edge per page at most.
+ * - `hill`: first child of the page-ground band under the `night` media
+ *   hero. The lower ground rises into the hero as one asymmetric curve,
+ *   4.6% of the width clamped 12–64 px, cresting at 0.667 of the width; no
+ *   rule runs under it [D189]. The amplitude joins the band's top padding.
+ * - `fringe`: first child of the `night` footer (ticks in the night band's
+ *   ink), or of the page-ground band under the `night` media hero (ticks in
+ *   that band's ink), hanging from the seam.
+ */
+export declare function SectionDivider(props: SectionDividerProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=SectionDivider.d.ts.map

package/page/section-divider/SectionDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.d.ts","sourceRoot":"","sources":["../../src/page/section-divider/SectionDivider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA0CjE,eAAO,MAAM,cAAc;;;;;;8EA2BzB,CAAA;AAEF,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAEjE,8BAA8B;AAC9B,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAA;AAE5E,+FAA+F;AAC/F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAA;AAEpF,KAAK,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAA;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAA;CAChD,CAAA;AAED,KAAK,uBAAuB,GACxB;IACE;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAA;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAA;CAClC,CAAA;AAEL,4FAA4F;AAC5F,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,GAAG,uBAAuB,CAAA;AAkDrF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAoExD"}