@fairgarden/design 0.1.0-alpha.0

package/components/Profile/Profile.js

@@ -0,0 +1,230 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Avatar } from '../Avatar';
+import { Link } from '../Link';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './profile.module.css';
+/*
+ * Profile & Team (§12.15): people and organizations (authors, staff,
+ * partner land trusts, speakers). Avatar (§10.12) holds byline, author and
+ * bio portraits; team photos are plain `img` figures. Species use §12.2 and
+ * testimonials §12.8.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: profile.module.css; CVA function `profile`.
+ * - Axes: `kind` → byline | author | bio | team → `kindByline`, `author`,
+ *   `kindBio`, `team` (axis-prefixed: `byline` and `bio` are also parts);
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: none (`kind` is required); color axes: none.
+ * - Color fallback: inherits the scope, and passes both props to the Avatar.
+ * - States: Avatar swaps Image and Fallback by its loading status, with no
+ *   styling attribute; the name and social links are Links (§9.3), which own
+ *   their hover and press; `member:has(nameLink:focus-visible)` (or the
+ *   root's) → the ring around the item.
+ * - Parts: base, portrait (Avatar Root: the module passes the §10.12 size
+ *   per kind: byline sm, author md, bio lg stepping to the xl diameter from
+ *   768 px of container), portraitImage / initials (AvatarImage /
+ *   AvatarFallback, composed by the consumer), teamPhoto, details (the bio
+ *   row's text column), name, nameLink, role, bio, links, byline (the
+ *   byline kind's root), date, teamList (the team grid; `team` is the kind's
+ *   class) and member.
+ * - Scope: none in this module; the initials face is the Avatar's own.
+ * - Container: `base` is the inline-size container `profile`; the team list
+ *   and the bio row query it. Baseline without support: team cells in a
+ *   grid auto-fit with minmax tracks at the 152 px compact minimum, capped
+ *   at 5 (1-up at --xs-n-below); the bio row as two columns that wrap
+ *   (flex-wrap) to a stack when portrait and text no longer fit; byline and
+ *   author block need no reflow. Thresholds (§5.10.2): below 360 the bio
+ *   row stacks and team 1-up; 2-up from 360; 4-up and the xl portrait from
+ *   768; up to 5-up from 1024 [D163].
+ */
+export const profile = cva(styles.base, {
+    variants: {
+        kind: {
+            byline: styles.kindByline,
+            author: styles.author,
+            bio: styles.kindBio,
+            team: styles.team,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+const ProfileContext = React.createContext({
+    kind: 'author',
+    primary: undefined,
+    secondary: undefined,
+});
+ProfileContext.displayName = 'ProfileContext';
+/** The §10.12 Avatar size the module passes per kind (§12.15 Tokens). */
+const portraitSizes = {
+    byline: 'sm',
+    author: 'md',
+    bio: 'lg',
+};
+/**
+ * The profile module. A byline holds `ProfilePortrait`, `ProfileName` and
+ * `ProfileDate`; an author block `ProfilePortrait`, `ProfileName`,
+ * `ProfileBio`; a bio row `ProfilePortrait` and `ProfileDetails` (name,
+ * role, bio, links); a team `ProfileTeam` of `ProfileMember`s, each with a
+ * `ProfileTeamPhoto`, `ProfileName` and `ProfileRole`. Use real portraits
+ * or initials; never overlay names on photos, never dim former members.
+ */
+export function Profile(props) {
+    const { render, ref, className, kind, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const context = React.useMemo(() => ({ kind, primary: primary ?? undefined, secondary: secondary ?? undefined }), [kind, primary, secondary]);
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: profile({ kind, primary, secondary, className }),
+        }, rest),
+    });
+    return React.createElement(ProfileContext.Provider, { value: context }, element);
+}
+/**
+ * The portrait: an Avatar sized by the kind (byline 32 px, author 40 px,
+ * bio 64 px stepping to 128 px from 768 px of container), with its ring per
+ * §10.12, taking the module's `primary` and `secondary` unless given its
+ * own. Compose `AvatarImage` (empty alt where the name is adjacent) and
+ * `AvatarFallback` (1–2 initials) inside; the fallback keeps the spacing.
+ */
+export function ProfilePortrait(props) {
+    const { size, primary, secondary, className, ...rest } = props;
+    const context = React.useContext(ProfileContext);
+    const resolvedSize = size ?? (context.kind === 'team' ? 'lg' : portraitSizes[context.kind]);
+    return (React.createElement(Avatar, { ...rest, size: resolvedSize, primary: primary ?? context.primary, secondary: secondary ?? context.secondary, className: resolveClassName(className, (extra) => cx(styles.portrait, extra)) }));
+}
+/**
+ * A team member's photo: a plain `img`, square at the cell's full width,
+ * `--ds-radius-8`, framed in a `--border-size-1` `--role-hairline` line.
+ * Give it empty alt when the name follows.
+ */
+export function ProfileTeamPhoto(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'img',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.teamPhoto, className) }, rest),
+    });
+}
+/** The bio row's text column beside the portrait: name, role, bio and links. */
+export function ProfileDetails(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.details, className) }, rest),
+    });
+}
+/**
+ * The name in `--primary12`: `type-itemhead` for the author block, bio row
+ * and team, `type-body-ui` at `--font-weight-6` in a byline ("By Name").
+ * Renders `<h3>`, or `<span>` in a byline. Wrap a `ProfileNameLink` inside
+ * to link the profile.
+ */
+export function ProfileName(props) {
+    const { render, ref, className, ...rest } = props;
+    const { kind } = React.useContext(ProfileContext);
+    const isByline = kind === 'byline';
+    return useRender({
+        defaultTagName: isByline ? 'span' : 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(isByline ? styles.nameUi : styles.name, className) }, rest),
+    });
+}
+/**
+ * The profile's one link, inside `ProfileName`: a §9.3 title Link whose hit
+ * area stretches over the member (or the whole profile). Hover, focus and
+ * press underline the name; the item draws the focus ring.
+ */
+export function ProfileNameLink(props) {
+    const { className, ...rest } = props;
+    return React.createElement(Link, { ...rest, kind: "title", className: cx(styles.nameLink, className) });
+}
+/**
+ * Role or affiliation: `type-label` caps in `--primary12`. Former members
+ * say so in words ("Former board chair"); never dim them.
+ */
+export function ProfileRole(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.role, className) }, rest),
+    });
+}
+/** A short bio or description, 3–5 lines of `type-body-ui` in `--primary12`; prints in full. */
+export function ProfileBio(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.bio, className) }, rest),
+    });
+}
+/**
+ * Social and contact links, a `ul` of `li > Link`: text links with the
+ * `--role-accent` underline, or inline-tier icons. They sit above a
+ * stretched name link as their own tab stops. In print, write handles in
+ * text; icon-only links are omitted.
+ */
+export function ProfileLinks(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.links, className) }, rest),
+    });
+}
+/** The byline date, after a "·" separator: `type-caption` in `--primary12`. Pass `dateTime`. */
+export function ProfileDate(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'time',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.date, className) }, rest),
+    });
+}
+/**
+ * The team grid: 1-up below 360 px of container, 2-up from 360, 4-up from
+ * 768, up to 5-up from 1024 (auto-fit at 152 px without container-query
+ * support). Prints 3-up.
+ */
+export function ProfileTeam(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.teamList, className) }, rest),
+    });
+}
+/** One team member: photo → name → role. A `ProfileNameLink` links the whole cell. */
+export function ProfileMember(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.member, className) }, rest),
+    });
+}
+//# sourceMappingURL=Profile.js.map

package/components/Profile/Profile.js.map

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

package/components/Profile/index.d.ts

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

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

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

package/components/Profile/index.js

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

package/components/Profile/index.js.map

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

package/components/Profile/profile.module.css

@@ -0,0 +1,272 @@
+/*
+ * Profile & Team (§12.15). The root `base` is the inline-size container
+ * `profile`; the team list and the bio row query it. Parts: base (the
+ * byline, author block or bio row itself), portrait (an Avatar, styled by
+ * §10.12), teamPhoto, details, name (`nameUi` in a byline), nameLink (a
+ * title Link), role, bio, links, date, teamList, member. Colors are role
+ * variables only; local custom properties carry dimensions only:
+ *   --profile-gap   the team gutter (= --ds-space-margin) [D42]
+ */
+
+/* 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. */
+.name {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.nameUi {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.role {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.bio {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.date {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --profile-gap: var(--ds-space-margin);
+
+    position: relative; /* a stretched name link covers the whole profile */
+    container: profile / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .name,
+  .nameUi,
+  .role,
+  .bio {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .date {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Social and contact links sit above a stretched name link, as their own tab stops. */
+  .links {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2) var(--ds-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-12);
+    min-inline-size: 0;
+  }
+
+  /* Team photo: square at the cell's width, the species-card frame (§12.2). */
+  .teamPhoto {
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    aspect-ratio: var(--ratio-square);
+    object-fit: cover;
+    border: var(--border-size-1) solid var(--role-hairline);
+    border-radius: var(--ds-radius-8);
+  }
+
+  /* Team baseline (§1.11.11): auto-fit at the 152 px compact minimum, capped at 5. */
+  .teamList {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(152px, calc((100% - 4 * var(--profile-gap)) / 5))), 1fr)
+    );
+    gap: var(--size-px-7) var(--profile-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .member {
+    position: relative; /* the stretched name link's positioned ancestor */
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .member .teamPhoto {
+    margin-block-end: var(--size-px-1);
+  }
+
+  @media (max-width: 359.98px) {
+    .teamList {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Container (§5.10.2): 1-up below 360 px, 2-up from 360, 4-up from 768, up to 5 from 1024. */
+  @container profile (width < 360px) {
+    .teamList {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container profile (360px <= width < 768px) {
+    .teamList {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container profile (768px <= width < 1024px) {
+    .teamList {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  @container profile (width >= 1024px) {
+    .teamList {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(calc((100% - 4 * var(--profile-gap)) / 5), 1fr)
+      );
+    }
+  }
+}
+
+@layer variants {
+  /* Team: the root hosts the grid; each member is its own link anchor. */
+  .team {
+    display: block;
+  }
+
+  /* Byline (LTA): inline, portrait · "By Name" · date, one line where it fits. */
+  .kindByline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .nameUi {
+    font-weight: var(--font-weight-6);
+  }
+
+  .kindByline .date::before {
+    content: '\00B7';
+    content: '\00B7' / '';
+    margin-inline-end: var(--size-px-2);
+  }
+
+  /* Author block (LTA): portrait → 24 → serif name → 24 → description, stacked. */
+  .author {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--size-px-5);
+  }
+
+  /*
+   * Bio row (Brad Frost): portrait at the start, text beside it, even on
+   * phones; the pair wraps to a stack when the text column would drop under
+   * its minimum, and always below 360 px of container.
+   */
+  .kindBio {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--size-px-5);
+  }
+
+  .kindBio .details {
+    flex: 1 1 var(--size-px-12);
+  }
+
+  /* The bio portrait steps from 64 px to the 128 px xl diameter (fixed steps, never fluid). */
+  @media (min-width: 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--ds-size-avatar-xl);
+      --avatar-initials: var(--ds-font-size-display);
+    }
+  }
+
+  @container profile (width < 360px) {
+    .kindBio .details {
+      flex-basis: 100%;
+    }
+  }
+
+  @container profile (width < 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--size-px-9);
+      --avatar-initials: var(--font-size-4);
+    }
+  }
+
+  @container profile (width >= 768px) {
+    .kindBio .portrait {
+      --avatar-size: var(--ds-size-avatar-xl);
+      --avatar-initials: var(--ds-font-size-display);
+    }
+  }
+}
+
+@layer states {
+  /* A linked profile's ring sits around the item, keyboard only [D45]; it replaces the link's own. */
+  .base .nameLink:focus-visible {
+    outline: none;
+  }
+
+  .member:has(.nameLink:focus-visible),
+  .author:has(.nameLink:focus-visible),
+  .kindBio:has(.nameLink:focus-visible),
+  .kindByline:has(.nameLink:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Team grids print 3-up; portraits at most 20 mm; photos grayscale in their frame; bios in full. */
+    .base {
+      --profile-gap: var(--size-px-5);
+    }
+
+    .author,
+    .kindBio,
+    .kindByline {
+      break-inside: avoid;
+    }
+
+    .teamList {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .member {
+      break-inside: avoid;
+    }
+
+    .teamPhoto {
+      max-block-size: var(--ds-print-figure-max);
+      filter: grayscale(1);
+    }
+
+    .kindBio .portrait {
+      --avatar-size: var(--size-px-9);
+      --avatar-initials: var(--font-size-4);
+    }
+  }
+}

package/components/Progress/Progress.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { type VariantProps } from 'class-variance-authority';
+export declare const progress: (props?: ({
+    kind?: "bar" | "rail" | "steps" | "ring" | 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;
+/** The status part: a §1.5.4 glyph plus a word, in the status scale [D129]. */
+export declare const progressStatus: (props?: ({
+    status?: "warning" | "success" | "danger" | 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 ProgressVariants = VariantProps<typeof progress>;
+/** A status beside the value: complete (`success`), near a limit (`warning`), failed or over (`danger`). */
+export type ProgressStatus = 'success' | 'warning' | 'danger';
+/** Props for Progress: Base UI Progress Root props plus the kind and color axes, the label and the status. */
+export type ProgressProps = Omit<BaseProgress.Root.Props, 'children'> & {
+    /**
+     * `bar` (default): an outlined 8 px track with a solid indicator; label
+     * left, value right. `steps`: one outlined 12 px cell per step
+     * (`max` − `min` cells), "2 of 4". `ring`: a 2 px arc beside its value.
+     * `rail`: the 2 px carousel position rail.
+     */
+    kind?: ProgressVariants['kind'];
+    /**
+     * Primary Radix scale: track, indicator, label and value. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: ProgressVariants['primary'];
+    /** Secondary Radix scale: unused; status glyphs take their own scale. Never defaulted. */
+    secondary?: ProgressVariants['secondary'];
+    /** The label, in caps (`type-label`); author it in sentence case. */
+    label?: React.ReactNode;
+    /**
+     * Formats the visible value (`type-data`): "62%", "3 of 5", "4.2 of 10
+     * GB". Default: the Base UI formatted value (a percentage), or "n of N"
+     * for `steps`.
+     */
+    formatValue?: (formattedValue: string, value: number) => React.ReactNode;
+    /**
+     * The status part beside the value. Complete progress shows `success`
+     * with `completeLabel` unless you pass another status. A threshold is
+     * always a glyph plus a word, never an indicator color swap.
+     */
+    status?: ProgressStatus;
+    /** The status word: "Upload failed. Retry", "Near limit". A Retry button goes beside it. */
+    statusText?: React.ReactNode;
+    /** The word shown at completion. Default "Done". */
+    completeLabel?: React.ReactNode;
+    /** The words beside an indeterminate track (`value={null}`). Default "Loading…". */
+    indeterminateLabel?: React.ReactNode;
+};
+/**
+ * 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 declare function Progress(props: ProgressProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAoCjE,eAAO,MAAM,QAAQ;;;;8EAenB,CAAA;AAEF,+EAA+E;AAC/E,eAAO,MAAM,cAAc;;;8EASzB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,4GAA4G;AAC5G,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE7D,8GAA8G;AAC9G,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IACtE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,0FAA0F;IAC1F,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACzC,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,oDAAoD;IACpD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA+G5C"}