@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/dist/Avatar/Avatar.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Avatar.tsx
- * @input Uses React, HTMLAttributes, ReactNode, useState
+ * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
+ *   (Tooltip hook) for the optional name-on-hover tooltip; useTranslator (i18n)
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *
@@ -13,15 +14,20 @@
  * - /packages/core/src/Avatar/index.ts (exports if types change)
  * - /apps/storybook/stories/Avatar.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Avatar/ (showcase blocks)
+ *
+ * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
-import { useMemo, useState } from 'react';
+import { isValidElement, useMemo, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
 import { AvatarSizeContext } from "./AvatarSizeContext.js";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTooltip } from "../Tooltip/useTooltip.js";
+import { useLinkComponent } from "../Link/useLinkComponent.js";
+import { useTranslator } from "../i18n/index.js";
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -35,7 +41,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
 
 /**
@@ -54,7 +60,7 @@ const INITIALS_FONT_SIZE_RATIO = 0.4;
  *
  * Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
  * but the values are larger because avatars align with media rather than
- * glyphs. The tiers match EPS's avatar sizes.
+ * glyphs. The tiers follow the standard avatar size scale.
  */
 
 /**
@@ -95,6 +101,7 @@ const styles = {
     kVAEAm: "x1n2onr6",
     k1xSpc: "x3nfvp2",
     kmuXW: "x2lah0s",
+    kaIpWk: "xjspbzw",
     $$css: true
   },
   content: {
@@ -112,16 +119,39 @@ const styles = {
     kjj79g: "xl56j7k",
     kzqmXN: "xh8yej3",
     kZKoxP: "x5yr21d",
-    kWkggS: "x17x4s8c",
-    kMwMTN: "xv1l7n4",
+    kWkggS: "xelv01g",
+    kMwMTN: "xicfil",
     kMv6JI: "x9ynric",
-    k63SB2: "x1e4wzip",
+    k63SB2: "xi08x9w",
     kP9fke: "xtvhhri",
     $$css: true
   },
   status: {
     kVAEAm: "x10l6tqk",
     $$css: true
+  },
+  focusable: {
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
+  },
+  interactive: {
+    kysU6D: "xjyslct",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kVVagm: "xln7xf2",
+    kybGjl: "x1hl2dhg",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xjspbzw",
+    kMeerF: "x1k57tk5 x784prv",
+    k3XXqK: "x1t137rt x9v5kkp",
+    kjBf7l: "xzunyri",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
   }
 };
 
@@ -148,7 +178,7 @@ const dynamicStyles = {
     "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size)
   }],
   fontSize: size => [_temp, {
-    "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * INITIALS_FONT_SIZE_RATIO)
+    "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`var(--_avatar-fallback-font-size, ${size * INITIALS_FONT_SIZE_RATIO}px)`)
   }],
   statusPosition: size => [_temp2, {
     "--x-bottom": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(size * CIRCLE_EDGE_OFFSET_RATIO),
@@ -200,6 +230,26 @@ function getInitials(name) {
   return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
 }
 
+/**
+ * Reads the accessible status label off the `status` element, when it
+ * exposes one. `AvatarStatusDot`'s `label` prop is the canonical source,
+ * but any custom status element with a string `label` prop participates.
+ *
+ * The avatar root is `role="img"`, which prunes ALL descendant semantics
+ * from the accessibility tree — a label inside the status subtree is never
+ * announced on its own. Composing it into the avatar's own accessible name
+ * is the only way the status reaches assistive tech (WCAG 4.1.2).
+ */
+function getStatusLabel(status) {
+  if (! /*#__PURE__*/isValidElement(status)) {
+    return undefined;
+  }
+  const {
+    label
+  } = status.props;
+  return typeof label === 'string' && label !== '' ? label : undefined;
+}
+
 /**
  * Default person icon SVG for when no image or name is provided
  */
@@ -229,6 +279,10 @@ function DefaultIcon({
  * <Avatar src="/user.jpg" name="John Doe" />
  * <Avatar name="Jane Smith" size="xl" />
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
+ * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
+ * <Avatar name="Jane" tooltip={false} />
+ * <Avatar src="/user.jpg" name="John Doe" href="/users/john" />
+ * <Avatar src="/user.jpg" name="John Doe" onClick={() => openProfile()} />
  * ```
  */
 export function Avatar({
@@ -239,6 +293,12 @@ export function Avatar({
   size = 'md',
   src,
   status,
+  tooltip = true,
+  href,
+  as,
+  target,
+  rel,
+  onClick,
   xstyle,
   className,
   style,
@@ -254,58 +314,185 @@ export function Avatar({
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
 
-  // A meaningful accessible name comes from `alt` or `name`. With neither, the
-  // avatar is decorative — expose it as `presentation`/`aria-hidden` rather than
-  // announcing a meaningless generic "Avatar" (obs-9).
-  const accessibleName = alt || name;
+  // A meaningful accessible name comes from `alt`/`name`, composed with the
+  // status element's `label` when one is present ("Jane Doe, Online") — the
+  // `role="img"` root prunes descendant semantics, so surfacing the label in
+  // the avatar's own name is the only way assistive tech can reach the
+  // status (WCAG 4.1.2). A labelled status alone is also meaningful. With
+  // neither a name nor a labelled status, the avatar is decorative — expose
+  // it as `presentation`/`aria-hidden` rather than announcing a meaningless
+  // generic "Avatar" (obs-9).
+  const t = useTranslator();
+  const nameLabel = alt || name;
+  const statusLabel = getStatusLabel(status);
+  const accessibleName = nameLabel && statusLabel ? t('@astryx.avatar.nameWithStatus', {
+    name: nameLabel,
+    status: statusLabel
+  }) : nameLabel || statusLabel;
   const isDecorative = !accessibleName;
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
-  return /*#__PURE__*/_jsx(AvatarSizeContext, {
-    value: numericSize,
-    children: /*#__PURE__*/_jsxs("div", {
+
+  // Resolve the tooltip content:
+  // - `false`            → no tooltip
+  // - a string           → that string
+  // - `true` / omitted   → the `name` (a whitespace-only name yields nothing)
+  // Note: the *visible* tooltip prefers `name` (not `alt`); the *accessible
+  // name* on the root still uses `alt || name` above, independent of this.
+  const tooltipContent = tooltip === false ? undefined : typeof tooltip === 'string' ? tooltip : name;
+  const trimmedTooltip = tooltipContent?.trim();
+  const showTooltip = trimmedTooltip != null && trimmedTooltip !== '';
+  // Whether the tooltip text is a consumer-authored override (a custom string)
+  // rather than the default name. A custom description is worth wiring to
+  // `aria-describedby` (it adds information, matching Button); the default name
+  // tooltip is visual-only — its text duplicates the root `aria-label`, so
+  // describing it too would double-announce the same name (OQ-4).
+  const isCustomTooltip = typeof tooltip === 'string';
+
+  // Own the name tooltip via the Tooltip hook (the Button pattern), which
+  // returns `describedBy` as a value we choose whether to apply — the only way
+  // to satisfy the per-case aria-describedby rule (default name: none; custom
+  // string: describe) without editing Tooltip. `focusTrigger: 'auto'` shows the
+  // tooltip on keyboard focus once the root is focusable (natively for the
+  // interactive <a>/<button>, or via an explicit tab stop on the static div).
+  const tooltipHook = useTooltip({
+    placement: 'above',
+    isEnabled: showTooltip
+  });
+  // The tooltip ref attaches to whichever root element renders (static or
+  // interactive), so the tooltip works for link/button avatars too.
+  const rootRef = mergeRefs(ref, showTooltip ? tooltipHook.ref : undefined);
+  const describedByProp = showTooltip && isCustomTooltip ? {
+    'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
+  } : null;
+
+  // Element-swap trichotomy, copied from Button: `href` renders a link,
+  // otherwise `onClick` renders a `<button>`, otherwise today's static element
+  // is unchanged (the non-breaking default).
+  const renderAsLink = href != null;
+  const renderAsButton = !renderAsLink && onClick != null;
+  const isInteractive = renderAsLink || renderAsButton;
+  const LinkComponent = useLinkComponent(as);
+
+  // An interactive control with no accessible name is an unacceptable control
+  // name. Warn in the same client-safe way sibling components do (Field,
+  // Timestamp, Popover) — a plain `console.warn`, never gated on `process.env`
+  // (which is not available on the client in this codebase).
+  if (isInteractive && !accessibleName) {
+    console.warn('Avatar: an interactive avatar (with `href` or `onClick`) needs a ' + 'meaningful accessible name. Pass `alt` or `name`.');
+  }
+
+  // The inner visuals are identical across the static and interactive variants.
+  const visualContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
+      children: [showImage && /*#__PURE__*/_jsx("img", {
+        src: src,
+        alt: "",
+        onError: () => setErroredSrc(src),
+        ...{
+          className: "xh8yej3 x5yr21d xl1xv1r"
+        }
+      }), showFallbackImage && /*#__PURE__*/_jsx("img", {
+        src: fallbackSrc,
+        alt: "",
+        onError: () => setErroredFallbackSrc(fallbackSrc),
+        ...{
+          className: "xh8yej3 x5yr21d xl1xv1r"
+        }
+      }), showInitials && /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
+        children: getInitials(name)
+      }), showIcon && /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xelv01g xicfil x9ynric xi08x9w xtvhhri"
+        },
+        children: /*#__PURE__*/_jsx(DefaultIcon, {
+          size: numericSize
+        })
+      })]
+    }), status && /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
+      children: status
+    })]
+  });
+
+  // Shared StyleX + theme props for the root element in every variant. The
+  // group ring/overlap, the interactive focus-visible ring, and the
+  // tooltip tab-stop focus ring all live here so the interactive
+  // `<a>`/`<button>` and the static `<div>` carry the exact same box.
+  const rootStylexProps = mergeProps(themeProps('avatar', {
+    size: resolvedSize
+  }), stylex.props(styles.wrapper, isInteractive && styles.interactive, !isInteractive && showTooltip && !avatarGroup && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style);
+  let rootElement;
+
+  // `props` is typed for the default `<div>` root (its event handlers are
+  // HTMLDivElement-typed). The interactive branches render an `<a>`/`<button>`,
+  // so the passthrough props are re-typed to the generic element here — the
+  // avatar's own handlers (onClick) are declared on HTMLElement and stay typed.
+  const interactivePassthrough = props;
+  if (renderAsLink) {
+    // The rendered link carries the `data-avatar-item` marker so AvatarGroup's
+    // roving focus (which selects on `[data-avatar-item]`, not a tag/role) picks
+    // it up while ignoring nested buttons in a custom status/badge slot.
+    rootElement = /*#__PURE__*/_jsx(LinkComponent, {
+      ...interactivePassthrough,
+      ...describedByProp,
+      ref: rootRef,
+      href: href,
+      target: target,
+      rel: rel,
+      "aria-label": accessibleName,
+      "data-avatar-item": "",
+      "data-testid": testId,
+      onClick: onClick,
+      ...rootStylexProps,
+      children: visualContent
+    });
+  } else if (renderAsButton) {
+    rootElement = /*#__PURE__*/_jsx("button", {
+      ...interactivePassthrough,
+      ...describedByProp,
+      ref: rootRef,
+      type: "button",
+      "aria-label": accessibleName,
+      "data-avatar-item": "",
+      "data-testid": testId,
+      onClick: onClick,
+      ...rootStylexProps,
+      children: visualContent
+    });
+  } else {
+    rootElement = /*#__PURE__*/_jsx("div", {
       ...props,
-      ref: ref,
+      ref: rootRef,
       role: isDecorative ? 'presentation' : 'img',
       "aria-label": isDecorative ? undefined : accessibleName,
-      "aria-hidden": isDecorative || undefined,
+      "aria-hidden": isDecorative || undefined
+      // The root is a div[role="img"], not natively focusable. When a name
+      // tooltip is active, add a tab stop so keyboard users can reveal it
+      // (WCAG 1.4.13 / 2.1.1) — matching Timestamp/Button. Suppressed inside
+      // an AvatarGroup, which owns a single roving tab stop for its members.
+      ,
+      tabIndex: showTooltip && !avatarGroup ? 0 : undefined,
       "data-testid": testId,
-      ...mergeProps(themeProps('avatar', {
-        size: resolvedSize
-      }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
-      children: [/*#__PURE__*/_jsxs("div", {
-        ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
-        children: [showImage && /*#__PURE__*/_jsx("img", {
-          src: src,
-          alt: "",
-          onError: () => setErroredSrc(src),
-          ...{
-            className: "xh8yej3 x5yr21d xl1xv1r"
-          }
-        }), showFallbackImage && /*#__PURE__*/_jsx("img", {
-          src: fallbackSrc,
-          alt: "",
-          onError: () => setErroredFallbackSrc(fallbackSrc),
-          ...{
-            className: "xh8yej3 x5yr21d xl1xv1r"
-          }
-        }), showInitials && /*#__PURE__*/_jsx("div", {
-          ...stylex.props(styles.fallback, dynamicStyles.fontSize(numericSize)),
-          children: getInitials(name)
-        }), showIcon && /*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d x17x4s8c xv1l7n4 x9ynric x1e4wzip xtvhhri"
-          },
-          children: /*#__PURE__*/_jsx(DefaultIcon, {
-            size: numericSize
-          })
-        })]
-      }), status && /*#__PURE__*/_jsx("div", {
-        ...stylex.props(styles.status, dynamicStyles.statusPosition(numericSize)),
-        children: status
-      })]
-    })
+      ...describedByProp,
+      ...rootStylexProps,
+      children: visualContent
+    });
+  }
+  const avatarElement = /*#__PURE__*/_jsx(AvatarSizeContext, {
+    value: numericSize,
+    children: rootElement
+  });
+
+  // Always return the same structure so the avatar keeps its position in the
+  // React tree regardless of the tooltip flag — toggling it must not remount
+  // the avatar subtree (and lose image-load state). The tooltip is a sibling
+  // (no wrapper DOM); the hook's ref is already on the root via `rootRef`.
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [avatarElement, showTooltip ? tooltipHook.renderTooltip(trimmedTooltip) : null]
   });
 }
 Avatar.displayName = 'Avatar';

package/dist/Avatar/AvatarStatusDot.d.ts

@@ -24,6 +24,13 @@ import type { BaseProps } from '../BaseProps';
  *   }
  * }
  * ```
+ *
+ * Custom variants render no background fill, no ink colour, and no built-in
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
+ * a `color` for it to paint with. It should also supply a non-colour mark
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
+ * failure): pass `icon`, or theme a glyph onto the dot via
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
  */
 export interface AvatarStatusDotVariantMap {
     success: true;
@@ -37,12 +44,14 @@ export type AvatarStatusDotVariant = keyof AvatarStatusDotVariantMap;
 export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**
-     * The semantic color variant of the dot.
-     * - `success` — green dot (e.g. online, accepted)
-     * - `neutral` — gray dot (e.g. offline, pending)
-     * - `error` — red dot (e.g. busy, rejected)
+     * The semantic variant of the dot. Each variant pairs a colour with a
+     * distinct built-in shape so status is never conveyed by colour alone
+     * (WCAG 2.1 SC 1.4.1):
+     * - `success` — filled green dot (e.g. online, accepted)
+     * - `neutral` — grey ring (e.g. away, offline, pending)
+     * - `error` — red dot with a minus bar (e.g. busy, do not disturb)
      *
-     * Matches the `variant` convention from `StatusDot`.
+     * Matches the `variant` naming convention from `StatusDot`.
      * @default 'success'
      */
     variant?: AvatarStatusDotVariant;
@@ -50,6 +59,13 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
      * Accessible label for the status dot.
      * Describes the meaning of the indicator for screen readers
      * (e.g. "Online", "Accepted", "John Doe is busy").
+     *
+     * Note: inside an Avatar the dot sits in the avatar's `role="img"`
+     * subtree, where descendant semantics are pruned — the dot is never its
+     * own stop there. Instead, Avatar reads this `label` and composes it into
+     * its own accessible name (e.g. "Jane Doe, Online"), which is how the
+     * status reaches assistive tech (WCAG 4.1.2). Standalone dots (outside an
+     * Avatar) expose `role="img"` with this label directly.
      */
     label?: string;
     /**
@@ -58,6 +74,14 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
      * The icon is automatically sized to fit the dot and hidden
      * at the smallest avatar sizes where there isn't enough room.
      *
+     * A rendered icon replaces the variant's built-in shape glyph, so use a
+     * different icon per status — the same icon on every variant leaves the
+     * statuses distinguishable by colour alone (WCAG 1.4.1). At the smallest
+     * avatar sizes the built-in glyph still shows instead of the icon.
+     * Booleans and empty strings are ignored (safe for `cond && <Icon />`),
+     * but a component that renders nothing still counts as an icon and
+     * suppresses the glyph.
+     *
      * @example
      * ```
      * <AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />
@@ -69,6 +93,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
  * A status indicator dot that automatically scales to match the parent
  * Avatar's size.
  *
+ * Each variant pairs a colour with a distinct built-in shape (filled dot,
+ * ring, minus bar) so status stays distinguishable without colour
+ * perception (WCAG 2.1 SC 1.4.1). Themes can target the shape glyph via
+ * the `astryx-avatar-status-dot-glyph` class and its `data-shape`
+ * attribute.
+ *
  * Must be used inside an Avatar's `status` prop so it can read
  * the avatar size from context.
  *

package/dist/Avatar/AvatarStatusDot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqC5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAkDD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBA6BtB;yBAtCe,eAAe"}
+{"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyCtB;yBAlDe,eAAe"}