@astryxdesign/core 0.1.8 → 0.1.9

package/dist/Breadcrumbs/BreadcrumbItem.js

@@ -4,10 +4,16 @@
 
 /**
  * @file BreadcrumbItem.tsx
- * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext
+ * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
+ *   and (for the menu trigger) usePopover + the shared DropdownMenu item API
+ *   (renderDropdownItems, DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
+ * A `menu` prop turns the item's link-styled button into a menu trigger whose
+ * popover reuses DropdownMenu's item pipeline — the same wiring ContextMenu
+ * uses — so menu-item definitions are portable across the menu family.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.doc.mjs
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -15,14 +21,22 @@
  * - /apps/storybook/stories/Breadcrumbs.stories.tsx
  * - /packages/cli/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
-import React, { use, useRef, useEffect } from 'react';
+import React, { use, useCallback, useId, useMemo, useRef, useEffect } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, typeScaleVars, radiusVars } from "../theme/tokens.stylex.js";
 import { BreadcrumbContext } from "./Breadcrumbs.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { getIcon } from "../Icon/globalIconRegistry.js";
+import { usePopover } from "../Popover/usePopover.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
+import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
+import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
 
 // =============================================================================
 // Props
@@ -52,6 +66,13 @@ const itemStyles = {
     $$css: true
   }
 };
+const menuStyles = {
+  popover: {
+    k7Eaqz: "x5w4yej",
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  }
+};
 
 // =============================================================================
 // Component
@@ -79,6 +100,8 @@ export function BreadcrumbItem({
   onClick,
   isCurrent: isCurrentProp,
   startIcon,
+  menu,
+  menuSize,
   xstyle,
   className,
   style,
@@ -95,6 +118,21 @@ export function BreadcrumbItem({
   const contentRef = useRef(null);
   const isCurrent = isCurrentProp === true;
   const isAutoCandidate = isCurrentProp == null;
+  const hasMenu = menu != null;
+  const resolvedMenuSize = menuSize ?? (isSupporting ? 'sm' : 'md');
+
+  // `menu` owns the click interaction; a label can't both navigate/act and
+  // open a menu on the same activation. Warn once so the (ignored) href/onClick
+  // don't silently disappear on the consumer.
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && hasMenu) {
+      if (href != null) {
+        console.warn('BreadcrumbItem: `menu` and `href` are mutually exclusive; `menu` ' + 'takes precedence and `href` is ignored.');
+      } else if (onClick != null) {
+        console.warn('BreadcrumbItem: `menu` and `onClick` are mutually exclusive; ' + '`menu` takes precedence and `onClick` is ignored.');
+      }
+    }
+  }, [hasMenu, href, onClick]);
 
   // Auto-detect: if no sibling has aria-current="page" and this is the last
   // non-separator item, set aria-current on our content element.
@@ -152,7 +190,19 @@ export function BreadcrumbItem({
           className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
         },
         children: ctx.separator
-      }), /*#__PURE__*/_jsx("span", {
+      }), hasMenu ?
+      /*#__PURE__*/
+      // A current crumb can also open a sibling menu — the trigger keeps
+      // both aria-current="page" and aria-haspopup="menu".
+      _jsx(BreadcrumbMenuTrigger, {
+        ref: contentRef,
+        menu: menu,
+        menuSize: resolvedMenuSize,
+        isSupporting: isSupporting,
+        isCurrent: true,
+        label: children,
+        children: content
+      }) : /*#__PURE__*/_jsx("span", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw x1pd3egz x1tgivj0"
@@ -180,7 +230,14 @@ export function BreadcrumbItem({
         className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
       },
       children: ctx.separator
-    }), href != null ? /*#__PURE__*/_jsx(LinkComponent, {
+    }), hasMenu ? /*#__PURE__*/_jsx(BreadcrumbMenuTrigger, {
+      ref: contentRef,
+      menu: menu,
+      menuSize: resolvedMenuSize,
+      isSupporting: isSupporting,
+      label: children,
+      children: content
+    }) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
       ref: contentRef,
       href: href,
       onClick: onClick,
@@ -220,4 +277,149 @@ export function BreadcrumbItem({
     })]
   });
 }
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+// =============================================================================
+// Menu trigger
+// =============================================================================
+
+/**
+ * The link-styled `<button>` trigger + its `role="menu"` popover. Reuses the
+ * DropdownMenu item pipeline (`renderDropdownItems` for arrays, the item
+ * components for children) inside a `useListFocus` container that provides
+ * `DropdownMenuContext` — the same wiring ContextMenu uses — so menu-item
+ * definitions are portable into a breadcrumb with no rewrite.
+ */
+function BreadcrumbMenuTrigger({
+  ref,
+  children,
+  label,
+  menu,
+  menuSize,
+  isSupporting,
+  isCurrent = false
+}) {
+  const menuId = useId();
+  const buttonRef = useRef(null);
+  const popover = usePopover({
+    onHide: useCallback(() => {
+      buttonRef.current?.focus();
+    }, []),
+    hasLightDismiss: true,
+    hasCloseButton: false,
+    hasAutoFocus: false,
+    // The popup's own role="menu" is the exposed semantics; a modal dialog
+    // wrapper would announce an unnamed dialog around the menu.
+    role: 'none'
+  });
+  const closeMenu = useCallback(() => {
+    popover.hide();
+  }, [popover]);
+  const {
+    listRef,
+    handleKeyDown: listNavKeyDown,
+    focusFirst,
+    focusItem
+  } = useListFocus({
+    itemSelector: MENU_ITEM_SELECTOR,
+    wrap: false,
+    onEscape: closeMenu
+  });
+  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll(MENU_ITEM_SELECTOR)) : [], [listRef]);
+  const typeahead = useTypeahead({
+    getItemLabels: () => getMenuItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
+  });
+  const listKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const focused = document.activeElement;
+      if (focused && MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')) {
+        focused.click();
+      }
+      return;
+    }
+    // APG menu-button pattern: Tab closes the menu (items are tabIndex={-1}).
+    if (e.key === 'Tab') {
+      closeMenu();
+      return;
+    }
+    if (typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
+    listNavKeyDown(e);
+  }, [listNavKeyDown, closeMenu, typeahead]);
+  const openAndFocus = useCallback(() => {
+    popover.show();
+    requestAnimationFrame(() => focusFirst());
+  }, [popover, focusFirst]);
+  const handleClick = useCallback(() => {
+    if (popover.isOpen) {
+      popover.hide();
+    } else {
+      openAndFocus();
+    }
+  }, [popover, openAndFocus]);
+  const handleKeyDown = useCallback(e => {
+    if (!popover.isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openAndFocus();
+      }
+    }
+  }, [popover.isOpen, openAndFocus]);
+  const contextValue = useMemo(() => ({
+    closeMenu,
+    menuSize
+  }), [closeMenu, menuSize]);
+  const menuContent = Array.isArray(menu) ? renderDropdownItems(menu) : menu;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("button", {
+      ref: mergeRefs(ref, buttonRef, popover.triggerRef),
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...mergeProps(themeProps('breadcrumb-item-menu-trigger'), {
+        ...popover.triggerProps,
+        'aria-haspopup': 'menu',
+        'aria-controls': menuId,
+        'aria-current': isCurrent ? 'page' : undefined
+      }),
+      ...{
+        0: {
+          className: "x78zum5 x6s0dn4 xzye2dw xu0wf1k x1hl2dhg x4ohgrr x1ypdohk x1717udv x1ghz6dp xln7xf2 xv1l7n4"
+        },
+        1: {
+          className: "x78zum5 x6s0dn4 xzye2dw xu0wf1k x1hl2dhg x4ohgrr x1ypdohk x1717udv x1ghz6dp xln7xf2 xv1l7n4"
+        }
+      }[!!isSupporting << 0],
+      children: [children, /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          className: "x78zum5 x6s0dn4 x2lah0s x141an7d"
+        },
+        children: getIcon('chevronDown')
+      })]
+    }), popover.render(/*#__PURE__*/_jsx("div", {
+      ref: listRef,
+      id: menuId,
+      role: "menu",
+      "aria-label": typeof label === 'string' ? label : undefined,
+      onKeyDown: listKeyDown,
+      ...mergeProps(themeProps('breadcrumb-menu'), {
+        className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xuyqlj2 x1odjw0f x1fcsqxe xgory14 x9epnlk x1n97fys x87ps6o"
+      }),
+      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+        value: contextValue,
+        children: menuContent
+      })
+    }), {
+      placement: 'below',
+      alignment: 'start',
+      xstyle: [menuStyles.popover, layerAnimations.below]
+    })]
+  });
+}
+BreadcrumbMenuTrigger.displayName = 'BreadcrumbMenuTrigger';

package/dist/Breadcrumbs/index.d.ts

@@ -5,4 +5,9 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbsVariant, BreadcrumbsVariantMap, } from './Breadcrumbs';
 export { BreadcrumbItem } from './BreadcrumbItem';
 export type { BreadcrumbItemProps } from './BreadcrumbItem';
+export { DropdownMenuItem as BreadcrumbMenuItem, type DropdownMenuItemProps as BreadcrumbMenuItemProps, } from '../DropdownMenu/DropdownMenuItem';
+export { DropdownMenuCheckboxItem as BreadcrumbMenuCheckboxItem, type DropdownMenuCheckboxItemProps as BreadcrumbMenuCheckboxItemProps, } from '../DropdownMenu/DropdownMenuCheckboxItem';
+export { DropdownMenuRadioGroup as BreadcrumbMenuRadioGroup, type DropdownMenuRadioGroupProps as BreadcrumbMenuRadioGroupProps, } from '../DropdownMenu/DropdownMenuRadioGroup';
+export { DropdownMenuRadioItem as BreadcrumbMenuRadioItem, type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps, } from '../DropdownMenu/DropdownMenuRadioItem';
+export type { DropdownMenuOption as BreadcrumbMenuOption, DropdownMenuItemData as BreadcrumbMenuItemData, DropdownMenuDivider as BreadcrumbMenuDivider, DropdownMenuSection as BreadcrumbMenuSection, } from '../DropdownMenu/DropdownMenu';
 //# sourceMappingURL=index.d.ts.map

package/dist/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAM1D,OAAO,EACL,gBAAgB,IAAI,kBAAkB,EACtC,KAAK,qBAAqB,IAAI,uBAAuB,GACtD,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,wBAAwB,IAAI,0BAA0B,EACtD,KAAK,6BAA6B,IAAI,+BAA+B,GACtE,MAAM,0CAA0C,CAAC;AAClD,OAAO,EACL,sBAAsB,IAAI,wBAAwB,EAClD,KAAK,2BAA2B,IAAI,6BAA6B,GAClE,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,qBAAqB,IAAI,uBAAuB,EAChD,KAAK,0BAA0B,IAAI,4BAA4B,GAChE,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EACV,kBAAkB,IAAI,oBAAoB,EAC1C,oBAAoB,IAAI,sBAAsB,EAC9C,mBAAmB,IAAI,qBAAqB,EAC5C,mBAAmB,IAAI,qBAAqB,GAC7C,MAAM,8BAA8B,CAAC"}

package/dist/Breadcrumbs/index.js

@@ -6,4 +6,12 @@
  * @file Breadcrumbs component barrel export
  */
 export { Breadcrumbs } from "./Breadcrumbs.js";
-export { BreadcrumbItem } from "./BreadcrumbItem.js";
+export { BreadcrumbItem } from "./BreadcrumbItem.js";
+// The breadcrumb `menu` prop reuses the DropdownMenu item API, so the item
+// components are re-exported under `Breadcrumb*` aliases for family coherence
+// and discoverability (mirroring ContextMenu). A consumer's existing
+// DropdownMenu item definitions are portable into a breadcrumb menu verbatim.
+export { DropdownMenuItem as BreadcrumbMenuItem } from "../DropdownMenu/DropdownMenuItem.js";
+export { DropdownMenuCheckboxItem as BreadcrumbMenuCheckboxItem } from "../DropdownMenu/DropdownMenuCheckboxItem.js";
+export { DropdownMenuRadioGroup as BreadcrumbMenuRadioGroup } from "../DropdownMenu/DropdownMenuRadioGroup.js";
+export { DropdownMenuRadioItem as BreadcrumbMenuRadioItem } from "../DropdownMenu/DropdownMenuRadioItem.js";

package/dist/Button/Button.d.ts

@@ -15,7 +15,7 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { SizeValue } from '../utils/types';
+import type { Elevation, SizeValue } from '../utils/types';
 import * as stylex from '@stylexjs/stylex';
 import type { LinkComponentType } from '../Link/types';
 declare const sizeStyles: Readonly<{
@@ -84,6 +84,12 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
      * @default 'md'
      */
     size?: ButtonSize;
+    /**
+     * Resting elevation — the shadow depth the button sits at. Use for floating
+     * buttons (FABs) that hover above content. `none` is the default flat button.
+     * @default 'none'
+     */
+    elevation?: Elevation;
     /**
      * Whether the button is disabled.
      * @default false
@@ -193,7 +199,7 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
  * <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
  * ```
  */
-export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
+export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, elevation, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
 export declare namespace Button {
     var displayName: string;
 }

package/dist/Button/Button.d.ts.map

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

package/dist/Button/Button.js

@@ -21,7 +21,7 @@ import { useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useTooltip } from "../Tooltip/useTooltip.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars, shadowVars } from "../theme/tokens.stylex.js";
 import { Spinner } from "../Spinner/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
@@ -150,6 +150,30 @@ const iconSizeStyles = {
   }
 };
 
+/**
+ * Resting elevation for floating buttons (e.g. a FAB). `none` is the default
+ * flat button; `low`/`med`/`high` map to the shadow token scale. 'none' stays
+ * a literal so it never conflicts with a variant's background layering.
+ */
+const elevationStyles = {
+  none: {
+    kGVxlE: "x1gnnqk1",
+    $$css: true
+  },
+  low: {
+    kGVxlE: "x1i5ehqx",
+    $$css: true
+  },
+  med: {
+    kGVxlE: "x14hfi27",
+    $$css: true
+  },
+  high: {
+    kGVxlE: "x1kcpxr7",
+    $$css: true
+  }
+};
+
 /**
  * Variant styles using backgroundImage for layered colors
  * Pseudo-classes are nested within properties per StyleX recommendation
@@ -338,6 +362,7 @@ export function Button({
   icon,
   isIconOnly = false,
   width,
+  elevation = 'none',
   children,
   endContent,
   tooltip,
@@ -430,7 +455,10 @@ export function Button({
   } : null;
 
   // Shared StyleX props for both button and link rendering
-  const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical), width != null && dynamicStyles.width(width), xstyle);
+  const sharedStylexProps = stylex.props(styles.base, sizeStyles[size], variants[variant], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
+  // Standalone floating buttons only — a grouped button's elevation is owned
+  // by the ButtonGroup so the shared surface lifts as one unit.
+  !buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width), xstyle);
   const sharedMergedProps = mergeProps(themeProps('button', {
     variant,
     size
@@ -505,6 +533,7 @@ export function Button({
       ...ariaLabelProp,
       ...describedByProp,
       ...edgeCompAttr,
+      "aria-busy": isLoadingState || undefined,
       onClick: handleClick,
       children: buttonContent
     });

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -18,6 +18,7 @@
  */
 import { type ReactNode } from 'react';
 import type { ButtonSize } from '../Button';
+import type { Elevation } from '../utils/types';
 import type { BaseProps } from '../BaseProps';
 import type { ButtonGroupOrientation } from './ButtonGroupContext';
 export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
@@ -42,6 +43,13 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
      * @default 'md'
      */
     size?: ButtonSize;
+    /**
+     * Resting elevation for the group. The connected buttons share one surface,
+     * so the shadow sits on the group and lifts them together. Use for a floating
+     * group of actions above content.
+     * @default 'none'
+     */
+    elevation?: Elevation;
     /**
      * Whether all buttons in the group are disabled.
      * @default false
@@ -82,7 +90,7 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
  * </ButtonGroup>
  * ```
  */
-export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled, xstyle, className, style, ref, 'data-testid': testId, onKeyDown, ...props }: ButtonGroupProps): ReactNode;
+export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled, elevation, xstyle, className, style, ref, 'data-testid': testId, onKeyDown, ...props }: ButtonGroupProps): ReactNode;
 export declare namespace ButtonGroup {
     var displayName: string;
 }

package/dist/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAI1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAOjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAuC9B;yBApDe,WAAW"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAOjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAwC9B;yBAtDe,WAAW"}

package/dist/ButtonGroup/ButtonGroup.js

@@ -22,6 +22,8 @@
  */
 import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { SizeProvider, useSize } from "../SizeContext/SizeContext.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
@@ -48,6 +50,32 @@ const styles = {
   }
 };
 
+// Resting elevation for the whole group — the connected buttons share one
+// surface, so the shadow sits on the group wrapper and lifts them as a unit.
+// The wrapper takes the element radius so the shadow follows the group's
+// rounded outer corners rather than a bare rectangle. 'none' is the default.
+const elevationStyles = {
+  none: {
+    kGVxlE: "x1gnnqk1",
+    $$css: true
+  },
+  low: {
+    kGVxlE: "x1i5ehqx",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  med: {
+    kGVxlE: "x14hfi27",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  high: {
+    kGVxlE: "x1kcpxr7",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -88,6 +116,7 @@ export function ButtonGroup({
   orientation = 'horizontal',
   size: sizeProp,
   isDisabled = false,
+  elevation = 'none',
   xstyle,
   className,
   style,
@@ -118,7 +147,7 @@ export function ButtonGroup({
         ...mergeProps(themeProps('button-group', {
           size,
           orientation
-        }), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, xstyle), className, style),
+        }), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, elevationStyles[elevation], xstyle), className, style),
         role: "group",
         "aria-label": label,
         onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),

package/dist/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAiUtD;yBAjUe,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAyUtD;yBAzUe,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -271,6 +271,10 @@ export function Calendar({
     children: [/*#__PURE__*/_jsxs("div", {
       ...stylex.props(calendarStyles.header),
       children: [/*#__PURE__*/_jsx(Button, {
+        ...themeProps('calendar-nav', {
+          nav: 'prev',
+          disabled: !canNavigatePrevious ? 'disabled' : null
+        }),
         label: t('@astryx.calendar.previousMonth'),
         variant: "ghost",
         icon:
@@ -293,6 +297,10 @@ export function Calendar({
         ...stylex.props(calendarStyles.monthYearLabel),
         children: monthYearLabel
       }), /*#__PURE__*/_jsx(Button, {
+        ...themeProps('calendar-nav', {
+          nav: 'next',
+          disabled: !canNavigateNext ? 'disabled' : null
+        }),
         label: t('@astryx.calendar.nextMonth'),
         variant: "ghost",
         icon: /*#__PURE__*/_jsx("span", {
@@ -662,6 +670,15 @@ function DayCell({
     isOutside
   });
   const endpoint = isEndpoint(state);
+
+  // The day's focus-ring treatment, derived once so the reflected `marker`
+  // theme state and the StyleX ring styles below share a single source of
+  // truth. `state.isSelected` is single-select only, so a range endpoint that
+  // is today still qualifies for the today-in-range ring (unchanged prior
+  // behavior).
+  const showsTodayRing = state.isToday && !state.isSelected && !state.isInRange;
+  const showsTodayInRangeRing = state.isToday && !state.isSelected && state.isInRange;
+  const markerState = showsTodayRing ? 'today-only' : showsTodayInRangeRing ? 'today-in-range' : null;
   const rangeRounding = computeRangeRounding(state, {
     prevInRange: neighbors.prevInRange,
     nextInRange: neighbors.nextInRange
@@ -698,8 +715,19 @@ function DayCell({
         selected: endpoint ? 'selected' : null,
         today: state.isToday ? 'today' : null,
         disabled: state.effectivelyDisabled ? 'disabled' : null,
-        'in-range': state.isInRange ? 'in-range' : null
-      }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, state.isToday && !state.isSelected && !state.isInRange && dayCellStyles.dayToday, state.isToday && !state.isSelected && !state.isInRange && dayCellTheme.dayToday, state.isToday && !state.isSelected && state.isInRange && dayCellStyles.dayTodayInRange, state.isToday && !state.isSelected && state.isInRange && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
+        'in-range': state.isInRange ? 'in-range' : null,
+        // `marker` reflects the day's *actual* focus-ring treatment as a
+        // single compound state, so a theme can target exactly the states
+        // the ring is drawn under without needing `:not()` in the theme
+        // key. It is null unless a ring is shown:
+        //   'today-only'     → today, not single-selected, not in a range
+        //   'today-in-range' → today, not single-selected, inside a range
+        // `isSelected` here is single-select only (see computeDayCellState),
+        // so a today range endpoint still shows the today-in-range ring —
+        // `marker` mirrors the StyleX conditions below exactly, preserving
+        // the default rendering.
+        marker: markerState
+      }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
       children: dayNumber
     })]
   });

package/dist/Calendar/dayCellUtils.js

@@ -25,7 +25,7 @@ export function computeDayCellState(input) {
   } = input;
   return {
     effectivelyDisabled: isDisabled || isOutside,
-    isToday: plainDateIsEqual(date, today),
+    isToday: !isOutside && plainDateIsEqual(date, today),
     isSelected: !!(!isOutside && mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
     isInRange: !!(!isOutside && mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
     isRangeStart: !!(!isOutside && mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),

package/dist/Card/Card.d.ts

@@ -11,7 +11,7 @@
  * - /packages/cli/templates/blocks/components/Card/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { SizeValue, SpacingStep } from '../utils/types';
+import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
 import type { BaseProps } from '../BaseProps';
 /**
  * Background color variant for Card.
@@ -78,6 +78,12 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
      * @default 'default'
      */
     variant?: CardVariant;
+    /**
+     * Resting elevation — the shadow depth the card sits at.
+     * `none` is flat; `low`/`med`/`high` map to the shadow token scale.
+     * @default 'none'
+     */
+    elevation?: Elevation;
 }
 /**
  * A card container with border and themed styling.
@@ -113,7 +119,7 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
  * </Card>
  * ```
  */
-export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, elevation, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
 export declare namespace Card {
     var displayName: string;
 }

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2DX;yBAzEe,IAAI"}