silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-4CVDLMD6.js → chunk-D3CHBU46.js}

@@ -1,4 +1,4 @@
-import { ButtonGroupContext } from './chunk-Z4TZAJS3.js';
+import { ButtonGroupContext } from './chunk-5UGHDUMO.js';
 import { cva } from './chunk-FMEIPGUP.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { useMemo } from 'react';
@@ -95,5 +95,5 @@ function ButtonGroup({
 ButtonGroup.displayName = "ButtonGroup";
 
 export { ButtonGroup };
-//# sourceMappingURL=chunk-4CVDLMD6.js.map
-//# sourceMappingURL=chunk-4CVDLMD6.js.map
+//# sourceMappingURL=chunk-D3CHBU46.js.map
+//# sourceMappingURL=chunk-D3CHBU46.js.map

package/dist/{chunk-4CVDLMD6.js.map → chunk-D3CHBU46.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;AAEO,IAAM,oBAAoB,GAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACE,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAW,EAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-4CVDLMD6.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n        // which is display:none but still counts for :last-child) does not\n        // strip the end radius from the last visible button in the group. The\n        // `:not([popover] *)` on the descendant clause keeps these joins from\n        // leaking onto buttons rendered inside a child's popover (menu items).\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        // See the horizontal note above: skip trailing `[popover]` siblings so\n        // the last visible button keeps its bottom radius, and exclude popover\n        // descendants so menu items don't inherit the group joins.\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button/Button';\nimport {buttonGroupRecipe} from './ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from './ButtonGroupContext';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":";;;;;;;AAEO,IAAM,oBAAoB,GAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACE,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAW,EAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-D3CHBU46.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n        // which is display:none but still counts for :last-child) does not\n        // strip the end radius from the last visible button in the group. The\n        // `:not([popover] *)` on the descendant clause keeps these joins from\n        // leaking onto buttons rendered inside a child's popover (menu items).\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        // See the horizontal note above: skip trailing `[popover]` siblings so\n        // the last visible button keeps its bottom radius, and exclude popover\n        // descendants so menu items don't inherit the group joins.\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport type {ButtonSize} from 'components/Button/Button';\nimport {buttonGroupRecipe} from 'components/ButtonGroup/ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from 'components/ButtonGroup/ButtonGroupContext';\nimport {cx} from 'internal/cx';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}

package/dist/{chunk-U6NH54YD.js → chunk-DAO4UXR4.js}

@@ -1,137 +1,161 @@
-import { Button } from './chunk-2LABTS4P.js';
-import { useIsomorphicLayoutEffect } from './chunk-HINS4GY6.js';
+import { useScrollLock } from './chunk-PZHRFASW.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { useIsomorphicLayoutEffect } from './chunk-KEPCKSDE.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { css } from './chunk-OD4DHHZH.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var styles = {
-  dialog: css({
-    position: "fixed",
-    inset: 0,
-    w: "100dvw",
-    h: "100dvh",
-    maxW: "none",
-    maxH: "none",
-    m: 0,
-    p: 0,
-    borderWidth: 0,
-    bg: "transparent",
-    overflow: "hidden",
-    outline: "none",
-    _backdrop: {
-      bg: "overlay.scrim.strong",
-      backdropFilter: "blur(2px)"
-    }
-  }),
-  container: css({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "full",
-    h: "full",
-    p: "8"
-  }),
-  mediaGroup: css({
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    maxW: "full",
-    maxH: "full",
-    minH: 0
-  }),
-  mediaWrap: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    minH: 0,
-    userSelect: "none"
-  }),
-  zoomable: css({ cursor: "zoom-in" }),
-  zoomed: css({ cursor: "grab" }),
-  dragging: css({ cursor: "grabbing" }),
-  image: css({
-    display: "block",
-    maxW: "100%",
-    maxH: "calc(100dvh - 7rem)",
-    objectFit: "contain",
-    pointerEvents: "none",
-    transitionProperty: "transform",
-    transitionDuration: "normal",
-    transitionTimingFunction: "default",
-    "@media (prefers-reduced-motion: reduce)": {
-      transitionDuration: "0ms"
-    }
-  }),
-  imageDragging: css({ transitionProperty: "none" }),
-  video: css({
-    maxW: "100%",
-    maxH: "calc(100dvh - 7rem)",
-    objectFit: "contain",
-    outline: "none"
-  }),
-  caption: css({
-    w: "full",
-    maxW: "min(90dvw, 48rem)",
-    px: "3",
-    pt: "2",
-    color: "fg.onPrimary",
-    fontFamily: "body",
-    fontSize: "lg",
-    lineHeight: "normal",
-    textAlign: "center"
-  }),
-  close: css({
-    position: "absolute",
-    top: "3",
-    right: "3",
-    zIndex: 1
-  }),
-  nav: css({
-    position: "absolute",
-    top: "50%",
-    zIndex: 1,
-    transform: "translateY(-50%)"
-  }),
-  prev: css({ left: "3" }),
-  next: css({ right: "3" }),
-  counter: css({
-    position: "absolute",
-    top: "3",
-    left: "3",
-    zIndex: 1,
-    color: "fg.onPrimary",
-    fontFamily: "body",
-    fontSize: "md"
-  }),
-  controlButton: css({
-    bg: "overlay.scrim",
-    color: "fg.onPrimary",
-    _hover: {
-      bg: "overlay.scrim.strong"
+// src/components/Lightbox/Lightbox.recipe.ts
+var lightboxRecipe = sva({
+  slots: [
+    "dialog",
+    "container",
+    "mediaGroup",
+    "mediaWrap",
+    "image",
+    "video",
+    "caption",
+    "close",
+    "nav",
+    "counter",
+    "controlButton"
+  ],
+  base: {
+    dialog: {
+      position: "fixed",
+      inset: 0,
+      w: "100dvw",
+      h: "100dvh",
+      maxW: "none",
+      maxH: "none",
+      m: 0,
+      p: 0,
+      borderWidth: 0,
+      bg: "transparent",
+      overflow: "hidden",
+      outline: "none",
+      _backdrop: {
+        bg: "overlay.scrim.strong",
+        backdropFilter: "blur(2px)"
+      }
+    },
+    container: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "full",
+      h: "full",
+      p: "8"
+    },
+    mediaGroup: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      maxW: "full",
+      maxH: "full",
+      minH: 0
+    },
+    mediaWrap: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      minH: 0,
+      userSelect: "none"
+    },
+    image: {
+      display: "block",
+      maxW: "100%",
+      maxH: "calc(100dvh - 7rem)",
+      objectFit: "contain",
+      pointerEvents: "none",
+      transitionProperty: "transform",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0ms"
+      }
+    },
+    video: {
+      maxW: "100%",
+      maxH: "calc(100dvh - 7rem)",
+      objectFit: "contain",
+      outline: "none"
+    },
+    caption: {
+      w: "full",
+      maxW: "min(90dvw, 48rem)",
+      px: "3",
+      pt: "2",
+      color: "fg.onPrimary",
+      fontFamily: "body",
+      fontSize: "lg",
+      lineHeight: "normal",
+      textAlign: "center"
+    },
+    close: {
+      position: "absolute",
+      top: "3",
+      right: "3",
+      zIndex: 1
     },
-    _active: {
-      bg: "overlay.scrim.strong"
+    nav: {
+      position: "absolute",
+      top: "50%",
+      zIndex: 1,
+      transform: "translateY(-50%)"
+    },
+    counter: {
+      position: "absolute",
+      top: "3",
+      left: "3",
+      zIndex: 1,
+      color: "fg.onPrimary",
+      fontFamily: "body",
+      fontSize: "md"
+    },
+    controlButton: {
+      bg: "overlay.scrim",
+      color: "fg.onPrimary",
+      _hover: {
+        bg: "overlay.scrim.strong"
+      },
+      _active: {
+        bg: "overlay.scrim.strong"
+      }
     }
-  })
-};
-function useScrollLock(isLocked) {
-  useEffect(() => {
-    if (!isLocked) {
-      return;
+  },
+  variants: {
+    // Media viewport cursor reflects the active zoom/pan interaction. A single
+    // value keeps the precedence deterministic: dragging > zoomed > zoomable.
+    cursor: {
+      default: {},
+      zoomable: { mediaWrap: { cursor: "zoom-in" } },
+      zoomed: { mediaWrap: { cursor: "grab" } },
+      dragging: { mediaWrap: { cursor: "grabbing" } }
+    },
+    // While dragging, drop the transform transition so the image tracks the
+    // pointer exactly instead of easing behind it.
+    isDragging: {
+      true: { image: { transitionProperty: "none" } },
+      false: {}
+    },
+    // Horizontal placement for the prev/next gallery navigation controls.
+    position: {
+      prev: { nav: { left: "3" } },
+      next: { nav: { right: "3" } }
     }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
-  }, [isLocked]);
-}
+  },
+  defaultVariants: {
+    cursor: "default",
+    isDragging: false
+  }
+});
 function isMediaArray(media) {
   return Array.isArray(media);
 }
@@ -170,6 +194,8 @@ function Lightbox({
   const canPrev = isGallery && currentIndex > 0;
   const canNext = isGallery && currentIndex < mediaItems.length - 1;
   const imageTransform = zoom === 1 ? void 0 : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;
+  const cursor = isDragging ? "dragging" : !isVideo && zoom > 1 ? "zoomed" : !isVideo && hasZoom && zoom === 1 ? "zoomable" : "default";
+  const classes = lightboxRecipe({ cursor, isDragging });
   useScrollLock(isOpen);
   const setIndex = useCallback(
     (nextIndex) => {
@@ -250,7 +276,7 @@ function Lightbox({
     "dialog",
     {
       "aria-label": "Media lightbox",
-      className: cx(styles.dialog, className),
+      className: cx(classes.dialog, className),
       "data-testid": dataTestId,
       onCancel: (event) => {
         event.preventDefault();
@@ -272,37 +298,32 @@ function Lightbox({
       },
       ref: mergeRefs(ref, dialogRef),
       style,
-      children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.close, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs("div", { className: classes.container, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.close, children: /* @__PURE__ */ jsx(
           Button,
           {
-            className: styles.controlButton,
+            className: classes.controlButton,
             icon: X,
             isIconOnly: true,
             label: "Close",
             onClick: close
           }
         ) }),
-        canPrev ? /* @__PURE__ */ jsx("div", { className: cx(styles.nav, styles.prev), children: /* @__PURE__ */ jsx(
+        canPrev ? /* @__PURE__ */ jsx("div", { className: lightboxRecipe({ position: "prev" }).nav, children: /* @__PURE__ */ jsx(
           Button,
           {
-            className: styles.controlButton,
+            className: classes.controlButton,
             icon: ChevronLeft,
             isIconOnly: true,
             label: "Previous",
             onClick: goPrev
           }
         ) }) : null,
-        hasMedia ? /* @__PURE__ */ jsxs("div", { className: styles.mediaGroup, children: [
+        hasMedia ? /* @__PURE__ */ jsxs("div", { className: classes.mediaGroup, children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cx(
-                styles.mediaWrap,
-                !isVideo && hasZoom && zoom === 1 ? styles.zoomable : void 0,
-                !isVideo && zoom > 1 ? styles.zoomed : void 0,
-                isDragging ? styles.dragging : void 0
-              ),
+              className: classes.mediaWrap,
               onDoubleClick: () => {
                 if (!hasZoom || isVideo) {
                   return;
@@ -329,7 +350,7 @@ function Lightbox({
                   {
                     "aria-label": currentItem.alt,
                     autoPlay: hasAutoPlay,
-                    className: styles.video,
+                    className: classes.video,
                     controls: true,
                     src: currentItem.src,
                     children: currentItem.captionsSrc != null ? /* @__PURE__ */ jsx(
@@ -346,10 +367,7 @@ function Lightbox({
                 "img",
                 {
                   alt: currentItem.alt,
-                  className: cx(
-                    styles.image,
-                    isDragging ? styles.imageDragging : void 0
-                  ),
+                  className: classes.image,
                   draggable: false,
                   src: currentItem.src,
                   style: { transform: imageTransform }
@@ -357,19 +375,19 @@ function Lightbox({
               )
             }
           ),
-          isReactNode(currentItem.caption) ? /* @__PURE__ */ jsx("div", { className: styles.caption, children: currentItem.caption }) : null
+          isReactNode(currentItem.caption) ? /* @__PURE__ */ jsx("div", { className: classes.caption, children: currentItem.caption }) : null
         ] }) : null,
-        canNext ? /* @__PURE__ */ jsx("div", { className: cx(styles.nav, styles.next), children: /* @__PURE__ */ jsx(
+        canNext ? /* @__PURE__ */ jsx("div", { className: lightboxRecipe({ position: "next" }).nav, children: /* @__PURE__ */ jsx(
           Button,
           {
-            className: styles.controlButton,
+            className: classes.controlButton,
             icon: ChevronRight,
             isIconOnly: true,
             label: "Next",
             onClick: goNext
           }
         ) }) : null,
-        isGallery ? /* @__PURE__ */ jsxs("div", { className: styles.counter, children: [
+        isGallery ? /* @__PURE__ */ jsxs("div", { className: classes.counter, children: [
           currentIndex + 1,
           " / ",
           mediaItems.length
@@ -419,5 +437,5 @@ function useLightbox(options) {
 }
 
 export { Lightbox, useLightbox };
-//# sourceMappingURL=chunk-U6NH54YD.js.map
-//# sourceMappingURL=chunk-U6NH54YD.js.map
+//# sourceMappingURL=chunk-DAO4UXR4.js.map
+//# sourceMappingURL=chunk-DAO4UXR4.js.map

package/dist/chunk-DAO4UXR4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Lightbox/Lightbox.recipe.ts","../src/components/Lightbox/Lightbox.tsx","../src/components/Lightbox/useLightbox.tsx"],"names":["useState","useCallback","useMemo","jsx"],"mappings":"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","file":"chunk-DAO4UXR4.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const lightboxRecipe = sva({\n  slots: [\n    'dialog',\n    'container',\n    'mediaGroup',\n    'mediaWrap',\n    'image',\n    'video',\n    'caption',\n    'close',\n    'nav',\n    'counter',\n    'controlButton',\n  ],\n  base: {\n    dialog: {\n      position: 'fixed',\n      inset: 0,\n      w: '100dvw',\n      h: '100dvh',\n      maxW: 'none',\n      maxH: 'none',\n      m: 0,\n      p: 0,\n      borderWidth: 0,\n      bg: 'transparent',\n      overflow: 'hidden',\n      outline: 'none',\n      _backdrop: {\n        bg: 'overlay.scrim.strong',\n        backdropFilter: 'blur(2px)',\n      },\n    },\n    container: {\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: 'full',\n      h: 'full',\n      p: '8',\n    },\n    mediaGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      maxW: 'full',\n      maxH: 'full',\n      minH: 0,\n    },\n    mediaWrap: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      overflow: 'hidden',\n      minH: 0,\n      userSelect: 'none',\n    },\n    image: {\n      display: 'block',\n      maxW: '100%',\n      maxH: 'calc(100dvh - 7rem)',\n      objectFit: 'contain',\n      pointerEvents: 'none',\n      transitionProperty: 'transform',\n      transitionDuration: 'normal',\n      transitionTimingFunction: 'default',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0ms',\n      },\n    },\n    video: {\n      maxW: '100%',\n      maxH: 'calc(100dvh - 7rem)',\n      objectFit: 'contain',\n      outline: 'none',\n    },\n    caption: {\n      w: 'full',\n      maxW: 'min(90dvw, 48rem)',\n      px: '3',\n      pt: '2',\n      color: 'fg.onPrimary',\n      fontFamily: 'body',\n      fontSize: 'lg',\n      lineHeight: 'normal',\n      textAlign: 'center',\n    },\n    close: {\n      position: 'absolute',\n      top: '3',\n      right: '3',\n      zIndex: 1,\n    },\n    nav: {\n      position: 'absolute',\n      top: '50%',\n      zIndex: 1,\n      transform: 'translateY(-50%)',\n    },\n    counter: {\n      position: 'absolute',\n      top: '3',\n      left: '3',\n      zIndex: 1,\n      color: 'fg.onPrimary',\n      fontFamily: 'body',\n      fontSize: 'md',\n    },\n    controlButton: {\n      bg: 'overlay.scrim',\n      color: 'fg.onPrimary',\n      _hover: {\n        bg: 'overlay.scrim.strong',\n      },\n      _active: {\n        bg: 'overlay.scrim.strong',\n      },\n    },\n  },\n  variants: {\n    // Media viewport cursor reflects the active zoom/pan interaction. A single\n    // value keeps the precedence deterministic: dragging > zoomed > zoomable.\n    cursor: {\n      default: {},\n      zoomable: {mediaWrap: {cursor: 'zoom-in'}},\n      zoomed: {mediaWrap: {cursor: 'grab'}},\n      dragging: {mediaWrap: {cursor: 'grabbing'}},\n    },\n    // While dragging, drop the transform transition so the image tracks the\n    // pointer exactly instead of easing behind it.\n    isDragging: {\n      true: {image: {transitionProperty: 'none'}},\n      false: {},\n    },\n    // Horizontal placement for the prev/next gallery navigation controls.\n    position: {\n      prev: {nav: {left: '3'}},\n      next: {nav: {right: '3'}},\n    },\n  },\n  defaultVariants: {\n    cursor: 'default',\n    isDragging: false,\n  },\n});\n\nexport type LightboxVariants = RecipeVariantProps<typeof lightboxRecipe>;\n","/* eslint-disable jsx-a11y-x/no-noninteractive-element-interactions */\n\nimport {ChevronLeft, ChevronRight, X} from 'lucide-react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {lightboxRecipe} from 'components/Lightbox/Lightbox.recipe';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {mergeRefs} from 'internal/mergeRefs';\nimport {useIsomorphicLayoutEffect} from 'internal/useIsomorphicLayoutEffect';\nimport {useScrollLock} from 'internal/useScrollLock';\n\nexport type LightboxMediaType = 'image' | 'video';\n\nexport interface LightboxMedia {\n  /**\n   * Accessible image alt text, or video label.\n   */\n  alt: string;\n  /**\n   * Optional caption shown below the media.\n   */\n  caption?: ReactNode;\n  /**\n   * Optional WebVTT captions source for video media.\n   */\n  captionsSrc?: string;\n  /**\n   * Media source URL.\n   */\n  src: string;\n  /**\n   * Media type.\n   * @default 'image'\n   */\n  type?: LightboxMediaType;\n}\n\nexport interface LightboxProps {\n  /**\n   * Additional CSS class names applied to the dialog.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the dialog.\n   */\n  'data-testid'?: string;\n  /**\n   * Initial gallery index for uncontrolled usage.\n   * @default 0\n   */\n  defaultIndex?: number;\n  /**\n   * Whether videos autoplay when opened.\n   * @default false\n   */\n  hasAutoPlay?: boolean;\n  /**\n   * Whether images can be double-clicked to zoom.\n   * @default false\n   */\n  hasZoom?: boolean;\n  /**\n   * Controlled gallery index.\n   */\n  index?: number;\n  /**\n   * Whether the lightbox is open.\n   */\n  isOpen: boolean;\n  /**\n   * Media to display.\n   */\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>;\n  /**\n   * Called when gallery index changes.\n   */\n  onIndexChange?: (index: number) => void;\n  /**\n   * Called when the lightbox requests an open-state change.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the dialog element.\n   */\n  ref?: Ref<HTMLDialogElement>;\n  /**\n   * Inline styles applied to the dialog.\n   */\n  style?: CSSProperties;\n}\n\nfunction isMediaArray(\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>,\n): media is ReadonlyArray<LightboxMedia> {\n  return Array.isArray(media);\n}\n\n/**\n * Fullscreen dialog for viewing image or video media, with optional gallery navigation.\n */\nexport function Lightbox({\n  className,\n  'data-testid': dataTestId,\n  defaultIndex = 0,\n  hasAutoPlay = false,\n  hasZoom = false,\n  index: indexFromProps,\n  isOpen,\n  media,\n  onIndexChange,\n  onOpenChange,\n  ref,\n  style,\n}: LightboxProps): React.JSX.Element {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const triggerRef = useRef<Element | null>(null);\n  const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);\n  const [zoom, setZoom] = useState(1);\n  const [pan, setPan] = useState({x: 0, y: 0});\n  const [isDragging, setIsDragging] = useState(false);\n  const dragStartRef = useRef({x: 0, y: 0, panX: 0, panY: 0});\n  const isControlled = indexFromProps !== undefined;\n  const index = isControlled ? indexFromProps : uncontrolledIndex;\n  const mediaItems: ReadonlyArray<LightboxMedia> = useMemo(\n    () => (isMediaArray(media) ? media : [media]),\n    [media],\n  );\n  const currentIndex =\n    mediaItems.length === 0\n      ? 0\n      : Math.min(Math.max(index, 0), mediaItems.length - 1);\n  const currentItem =\n    mediaItems.length === 0 ? undefined : mediaItems[currentIndex];\n  const hasMedia = currentItem != null;\n  const isGallery = mediaItems.length > 1;\n  const isVideo = (currentItem?.type ?? 'image') === 'video';\n  const canPrev = isGallery && currentIndex > 0;\n  const canNext = isGallery && currentIndex < mediaItems.length - 1;\n  const imageTransform =\n    zoom === 1\n      ? undefined\n      : `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`;\n  const cursor = isDragging\n    ? 'dragging'\n    : !isVideo && zoom > 1\n      ? 'zoomed'\n      : !isVideo && hasZoom && zoom === 1\n        ? 'zoomable'\n        : 'default';\n  const classes = lightboxRecipe({cursor, isDragging});\n\n  useScrollLock(isOpen);\n\n  const setIndex = useCallback(\n    (nextIndex: number) => {\n      if (!isControlled) {\n        setUncontrolledIndex(nextIndex);\n      }\n      onIndexChange?.(nextIndex);\n    },\n    [isControlled, onIndexChange],\n  );\n\n  useEffect(() => {\n    // eslint-disable-next-line @eslint-react/set-state-in-effect\n    setZoom(1);\n    // eslint-disable-next-line @eslint-react/set-state-in-effect\n    setPan({x: 0, y: 0});\n  }, [currentIndex, currentItem?.src, isOpen]);\n\n  useEffect(() => {\n    if (!isGallery) {\n      return;\n    }\n\n    for (const nextIndex of [currentIndex - 1, currentIndex + 1]) {\n      if (nextIndex < 0 || nextIndex >= mediaItems.length) {\n        continue;\n      }\n      const item = mediaItems[nextIndex];\n      if (item.type === 'video') {\n        continue;\n      }\n\n      const image = new Image();\n      image.src = item.src;\n    }\n  }, [currentIndex, isGallery, mediaItems]);\n\n  useIsomorphicLayoutEffect(() => {\n    const dialog = dialogRef.current;\n    if (dialog == null) {\n      return;\n    }\n    if (isOpen && !dialog.open) {\n      triggerRef.current = document.activeElement;\n      dialog.showModal();\n    } else if (!isOpen && dialog.open) {\n      dialog.close();\n      if (triggerRef.current instanceof HTMLElement) {\n        triggerRef.current.focus();\n      }\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isDragging) {\n      return;\n    }\n    const handlePointerMove = (event: PointerEvent) => {\n      setPan({\n        x: dragStartRef.current.panX + event.clientX - dragStartRef.current.x,\n        y: dragStartRef.current.panY + event.clientY - dragStartRef.current.y,\n      });\n    };\n    const handlePointerUp = () => setIsDragging(false);\n    window.addEventListener('pointermove', handlePointerMove);\n    window.addEventListener('pointerup', handlePointerUp);\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isDragging]);\n\n  const close = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n  const goPrev = useCallback(() => {\n    if (canPrev) {\n      setIndex(currentIndex - 1);\n    }\n  }, [canPrev, currentIndex, setIndex]);\n  const goNext = useCallback(() => {\n    if (canNext) {\n      setIndex(currentIndex + 1);\n    }\n  }, [canNext, currentIndex, setIndex]);\n\n  return (\n    <dialog\n      aria-label=\"Media lightbox\"\n      className={cx(classes.dialog, className)}\n      data-testid={dataTestId}\n      onCancel={event => {\n        event.preventDefault();\n        close();\n      }}\n      onClick={(event: ReactMouseEvent<HTMLDialogElement>) => {\n        if (event.target === event.currentTarget) {\n          close();\n        }\n      }}\n      onKeyDown={event => {\n        if (event.key === 'ArrowLeft') {\n          event.preventDefault();\n          goPrev();\n        } else if (event.key === 'ArrowRight') {\n          event.preventDefault();\n          goNext();\n        }\n      }}\n      ref={mergeRefs(ref, dialogRef)}\n      style={style}>\n      <div className={classes.container}>\n        <div className={classes.close}>\n          <Button\n            className={classes.controlButton}\n            icon={X}\n            isIconOnly\n            label=\"Close\"\n            onClick={close}\n          />\n        </div>\n        {canPrev ? (\n          <div className={lightboxRecipe({position: 'prev'}).nav}>\n            <Button\n              className={classes.controlButton}\n              icon={ChevronLeft}\n              isIconOnly\n              label=\"Previous\"\n              onClick={goPrev}\n            />\n          </div>\n        ) : null}\n        {hasMedia ? (\n          <div className={classes.mediaGroup}>\n            {/* eslint-disable-next-line jsx-a11y-x/no-static-element-interactions -- media viewport supports image zoom/pan gestures */}\n            <div\n              className={classes.mediaWrap}\n              onDoubleClick={() => {\n                if (!hasZoom || isVideo) {\n                  return;\n                }\n                setZoom(zoom === 1 ? 2 : 1);\n                setPan({x: 0, y: 0});\n              }}\n              onPointerDown={event => {\n                if (!hasZoom || isVideo || zoom <= 1) {\n                  return;\n                }\n                setIsDragging(true);\n                dragStartRef.current = {\n                  x: event.clientX,\n                  y: event.clientY,\n                  panX: pan.x,\n                  panY: pan.y,\n                };\n              }}>\n              {isVideo ? (\n                // eslint-disable-next-line jsx-a11y-x/media-has-caption -- captions are rendered only when callers provide a real WebVTT source\n                <video\n                  aria-label={currentItem.alt}\n                  autoPlay={hasAutoPlay}\n                  className={classes.video}\n                  controls\n                  src={currentItem.src}>\n                  {currentItem.captionsSrc != null ? (\n                    <track\n                      kind=\"captions\"\n                      label=\"Captions\"\n                      src={currentItem.captionsSrc}\n                    />\n                  ) : null}\n                </video>\n              ) : (\n                <img\n                  alt={currentItem.alt}\n                  className={classes.image}\n                  draggable={false}\n                  src={currentItem.src}\n                  style={{transform: imageTransform}}\n                />\n              )}\n            </div>\n            {isReactNode(currentItem.caption) ? (\n              <div className={classes.caption}>{currentItem.caption}</div>\n            ) : null}\n          </div>\n        ) : null}\n        {canNext ? (\n          <div className={lightboxRecipe({position: 'next'}).nav}>\n            <Button\n              className={classes.controlButton}\n              icon={ChevronRight}\n              isIconOnly\n              label=\"Next\"\n              onClick={goNext}\n            />\n          </div>\n        ) : null}\n        {isGallery ? (\n          <div className={classes.counter}>\n            {currentIndex + 1} / {mediaItems.length}\n          </div>\n        ) : null}\n      </div>\n    </dialog>\n  );\n}\n\nLightbox.displayName = 'Lightbox';\n","import {useCallback, useMemo, useState, type ReactNode} from 'react';\nimport {\n  Lightbox,\n  type LightboxMedia,\n  type LightboxProps,\n} from 'components/Lightbox/Lightbox';\n\ntype LightboxOptions = Omit<\n  LightboxProps,\n  | 'defaultIndex'\n  | 'index'\n  | 'isOpen'\n  | 'media'\n  | 'onIndexChange'\n  | 'onOpenChange'\n>;\n\nexport interface UseLightboxOptions extends LightboxOptions {\n  /**\n   * Media to display in the lightbox.\n   */\n  media: LightboxMedia | ReadonlyArray<LightboxMedia>;\n}\n\nexport interface UseLightboxReturn {\n  /**\n   * Close the lightbox.\n   */\n  close: () => void;\n  /**\n   * Render this element in your tree.\n   */\n  element: ReactNode;\n  /**\n   * Returns trigger props that open at the given gallery index.\n   */\n  getTriggerProps: (index: number) => {\n    'aria-haspopup': 'dialog';\n    onClick: () => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    role: 'button';\n    tabIndex: 0;\n  };\n  /**\n   * Current gallery index.\n   */\n  index: number;\n  /**\n   * Whether the lightbox is open.\n   */\n  isOpen: boolean;\n  /**\n   * Open the lightbox, optionally at a specific gallery index.\n   */\n  open: (index?: number) => void;\n  /**\n   * Trigger props that open the first item.\n   */\n  triggerProps: {\n    'aria-haspopup': 'dialog';\n    onClick: () => void;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    role: 'button';\n    tabIndex: 0;\n  };\n}\n\n/**\n * State helper for Lightbox triggers and rendering.\n */\nexport function useLightbox(options: UseLightboxOptions): UseLightboxReturn {\n  const {media, ...lightboxProps} = options;\n  const [isOpen, setIsOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n\n  const open = useCallback((nextIndex = 0) => {\n    setIndex(nextIndex);\n    setIsOpen(true);\n  }, []);\n  const close = useCallback(() => setIsOpen(false), []);\n  const getTriggerProps = useCallback(\n    (nextIndex: number) => ({\n      'aria-haspopup': 'dialog' as const,\n      onClick: () => open(nextIndex),\n      onKeyDown: (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          open(nextIndex);\n        }\n      },\n      role: 'button' as const,\n      tabIndex: 0 as const,\n    }),\n    [open],\n  );\n  const triggerProps = useMemo(() => getTriggerProps(0), [getTriggerProps]);\n  const element = (\n    <Lightbox\n      {...lightboxProps}\n      index={index}\n      isOpen={isOpen}\n      media={media}\n      onIndexChange={setIndex}\n      onOpenChange={setIsOpen}\n    />\n  );\n\n  return {close, element, getTriggerProps, index, isOpen, open, triggerProps};\n}\n"]}

package/dist/{chunk-RDNMAV5B.js → chunk-DE7JLNSO.js}

@@ -265,5 +265,5 @@ function Theme({
 Theme.displayName = "Theme";
 
 export { Theme };
-//# sourceMappingURL=chunk-RDNMAV5B.js.map
-//# sourceMappingURL=chunk-RDNMAV5B.js.map
+//# sourceMappingURL=chunk-DE7JLNSO.js.map
+//# sourceMappingURL=chunk-DE7JLNSO.js.map

package/dist/chunk-DE7JLNSO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Theme/Theme.tsx"],"names":[],"mappings":";;;AAkQA,IAAM,mBAAA,GAGF;AAAA,EACF,EAAA,EAAI,oBAAA;AAAA,EACJ,aAAA,EAAe,iCAAA;AAAA,EACf,YAAA,EAAc,gCAAA;AAAA,EACd,OAAA,EAAS,0BAAA;AAAA,EACT,UAAA,EAAY,6BAAA;AAAA,EACZ,QAAA,EAAU,2BAAA;AAAA,EACV,MAAA,EAAQ,wBAAA;AAAA,EACR,gBAAA,EAAkB,mCAAA;AAAA,EAClB,WAAA,EAAa,6BAAA;AAAA,EACb,iBAAA,EAAmB,oCAAA;AAAA,EACnB,aAAA,EAAe,gCAAA;AAAA,EACf,gBAAA,EAAkB,mCAAA;AAAA,EAClB,EAAA,EAAI,oBAAA;AAAA,EACJ,UAAA,EAAY,6BAAA;AAAA,EACZ,OAAA,EAAS,0BAAA;AAAA,EACT,WAAA,EAAa,+BAAA;AAAA,EACb,OAAA,EAAS,yBAAA;AAAA,EACT,aAAA,EAAe,gCAAA;AAAA,EACf,YAAA,EAAc,+BAAA;AAAA,EACd,aAAA,EAAe,gCAAA;AAAA,EACf,UAAA,EAAY,6BAAA;AAAA,EACZ,QAAA,EAAU,2BAAA;AAAA,EACV,QAAA,EAAU,2BAAA;AAAA,EACV,YAAA,EAAc,+BAAA;AAAA,EACd,SAAA,EAAW,4BAAA;AAAA,EACX,QAAA,EAAU,2BAAA;AAAA,EACV,SAAA,EAAW,4BAAA;AAAA,EACX,QAAA,EAAU,2BAAA;AAAA,EACV,UAAA,EAAY,6BAAA;AAAA,EACZ,QAAA,EAAU,2BAAA;AAAA,EACV,WAAA,EAAa,8BAAA;AAAA,EACb,UAAA,EAAY,6BAAA;AAAA,EACZ,OAAA,EAAS,0BAAA;AAAA,EACT,aAAA,EAAe,gCAAA;AAAA,EACf,WAAA,EAAa,8BAAA;AAAA,EACb,QAAA,EAAU,2BAAA;AAAA,EACV,YAAA,EAAc,+BAAA;AAAA,EACd,WAAA,EAAa,8BAAA;AAAA,EACb,UAAA,EAAY,6BAAA;AAAA,EACZ,YAAA,EAAc,+BAAA;AAAA,EACd,kBAAA,EAAoB,sCAAA;AAAA,EACpB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,aAAA,EAAe,gCAAA;AAAA,EACf,eAAA,EAAiB,kCAAA;AAAA,EACjB,eAAA,EAAiB,kCAAA;AAAA,EACjB,QAAA,EAAU,0BAAA;AAAA,EACV,eAAA,EAAiB,kCAAA;AAAA,EACjB,mBAAA,EAAqB,uCAAA;AAAA,EACrB,qBAAA,EAAuB,0CAAA;AAAA,EACvB,iBAAA,EAAmB,qCAAA;AAAA,EACnB,sBAAA,EAAwB,2CAAA;AAAA,EACxB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,kBAAA,EAAoB,uCAAA;AAAA,EACpB,YAAA,EAAc,gCAAA;AAAA,EACd,eAAA,EAAiB,mCAAA;AAAA,EACjB,iBAAA,EAAmB,sCAAA;AAAA,EACnB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,oBAAA,EAAsB,yCAAA;AAAA,EACtB,mBAAA,EAAqB,uCAAA;AAAA,EACrB,wBAAA,EAA0B,6CAAA;AAAA,EAC1B,eAAA,EAAiB,mCAAA;AAAA,EACjB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,oBAAA,EAAsB,yCAAA;AAAA,EACtB,mBAAA,EAAqB,uCAAA;AAAA,EACrB,wBAAA,EAA0B,6CAAA;AAAA,EAC1B,eAAA,EAAiB,mCAAA;AAAA,EACjB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,oBAAA,EAAsB,yCAAA;AAAA,EACtB,WAAA,EAAa,8BAAA;AAAA,EACb,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,WAAA,EAAa,8BAAA;AAAA,EACb,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,WAAA,EAAa,8BAAA;AAAA,EACb,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,YAAA,EAAc,+BAAA;AAAA,EACd,kBAAA,EAAoB,sCAAA;AAAA,EACpB,cAAA,EAAgB,kCAAA;AAAA,EAChB,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,gCAAA;AAAA,EACf,mBAAA,EAAqB,uCAAA;AAAA,EACrB,eAAA,EAAiB,mCAAA;AAAA,EACjB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,WAAA,EAAa,8BAAA;AAAA,EACb,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,aAAA,EAAe,gCAAA;AAAA,EACf,mBAAA,EAAqB,uCAAA;AAAA,EACrB,eAAA,EAAiB,mCAAA;AAAA,EACjB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,UAAA,EAAY,6BAAA;AAAA,EACZ,gBAAA,EAAkB,oCAAA;AAAA,EAClB,YAAA,EAAc,gCAAA;AAAA,EACd,eAAA,EAAiB,mCAAA;AAAA,EACjB,WAAA,EAAa,8BAAA;AAAA,EACb,iBAAA,EAAmB,qCAAA;AAAA,EACnB,aAAA,EAAe,iCAAA;AAAA,EACf,gBAAA,EAAkB,oCAAA;AAAA,EAClB,aAAA,EAAe,gCAAA;AAAA,EACf,mBAAA,EAAqB,uCAAA;AAAA,EACrB,eAAA,EAAiB,mCAAA;AAAA,EACjB,kBAAA,EAAoB,sCAAA;AAAA,EACpB,KAAA,EAAO,uBAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,eAAA,EAAiB;AACnB,CAAA;AAEA,IAAM,kBAAA,GACJ;AAAA,EACE,IAAA,EAAM,qBAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEF,IAAM,sBAAA,GAGF;AAAA,EACF,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,WAAA,EAAa,kCAAA;AAAA,EACb,MAAA,EAAQ,6BAAA;AAAA,EACR,MAAA,EAAQ,6BAAA;AAAA,EACR,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,oBAAA,GAGF;AAAA,EACF,WAAA,EAAa,6BAAA;AAAA,EACb,WAAA,EAAa,6BAAA;AAAA,EACb,WAAA,EAAa,6BAAA;AAAA,EACb,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,oBAAA,GAGF;AAAA,EACF,KAAA,EAAO,wBAAA;AAAA,EACP,UAAA,EAAY,8BAAA;AAAA,EACZ,YAAA,EAAc,gCAAA;AAAA,EACd,YAAA,EAAc;AAChB,CAAA;AAEA,IAAM,kBAAA,GACJ;AAAA,EACE,WAAA,EAAa,6BAAA;AAAA,EACb,WAAA,EAAa,6BAAA;AAAA,EACb,WAAA,EAAa,6BAAA;AAAA,EACb,MAAA,EAAQ,wBAAA;AAAA,EACR,MAAA,EAAQ,wBAAA;AAAA,EACR,MAAA,EAAQ;AACV,CAAA;AAEF,IAAM,qBAAA,GAGF;AAAA,EACF,WAAA,EAAa,+BAAA;AAAA,EACb,WAAA,EAAa,+BAAA;AAAA,EACb,WAAA,EAAa,+BAAA;AAAA,EACb,WAAA,EAAa,+BAAA;AAAA,EACb,gBAAA,EAAkB,qCAAA;AAAA,EAClB,gBAAA,EAAkB;AACpB,CAAA;AAEA,IAAM,uBAAA,GACJ,yGAAA;AAEF,SAAS,uBAAuB,KAAA,EAAgC;AAC9D,EAAA,MAAM,KAAA,GAAQ,uBAAA,CAAwB,IAAA,CAAK,KAAK,CAAA;AAEhD,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAM,GAAG,WAAA,EAAa,WAAW,CAAA,GAAI,KAAA;AACrC,EAAA,OAAO,CAAA,oBAAA,EAAuB,WAAW,CAAA,CAAA,EAAI,WAAW,CAAA,CAAA,CAAA;AAC1D;AAEA,SAAS,qBACP,KAAA,EACA,MAAA,EACA,SAAA,EACA,YAAA,GAA0C,WAAS,KAAA,EAC7C;AACN,EAAA,IAAI,UAAU,IAAA,EAAM;AAClB,IAAA;AAAA,EACF;AAEA,EAAA,KAAA,MAAW,SAAA,IAAa,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA,EAAmB;AAC9D,IAAA,MAAM,KAAA,GAAQ,OAAO,SAAS,CAAA;AAE9B,IAAA,IAAI,SAAS,IAAA,EAAM;AACjB,MAAA,KAAA,CAAM,SAAA,CAAU,SAAS,CAAC,CAAA,GAAI,aAAa,KAAK,CAAA;AAAA,IAClD;AAAA,EACF;AACF;AAEA,SAAS,gBAAA,CACP,QACA,KAAA,EACe;AACf,EAAA,OAAO;AAAA,IACL,GAAG,qBAAqB,MAAM,CAAA;AAAA,IAC9B,GAAG;AAAA,GACL;AACF;AAEA,SAAS,qBACP,MAAA,EACmB;AACnB,EAAA,MAAM,aAAgC,EAAC;AAEvC,EAAA,oBAAA;AAAA,IACE,UAAA;AAAA,IACA,MAAA,EAAQ,MAAA;AAAA,IACR,mBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,SAAA,EAAW,sBAAsB,CAAA;AAC1E,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,KAAA,EAAO,kBAAkB,CAAA;AAClE,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,KAAA,EAAO,oBAAoB,CAAA;AACpE,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,OAAA,EAAS,oBAAoB,CAAA;AACtE,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,KAAA,EAAO,kBAAkB,CAAA;AAClE,EAAA,oBAAA,CAAqB,UAAA,EAAY,MAAA,EAAQ,OAAA,EAAS,qBAAqB,CAAA;AAEvE,EAAA,OAAO,UAAA;AACT;AAEA,SAAS,uBAAuB,EAAA,EAAoB;AAClD,EAAA,OAAO,CAAA,aAAA,EAAgB,EAAA,CAAG,OAAA,CAAQ,iBAAA,EAAmB,EAAE,CAAC,CAAA,CAAA;AAC1D;AAEA,SAAS,wBAAwB,SAAA,EAAsC;AACrE,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,SAAS,CAAA,CAC5B,GAAA;AAAA,IACC,CAAC,CAAC,IAAA,EAAM,KAAK,MACX,CAAA,EAAG,IAAI,CAAA,EAAA,EAAK,MAAA,CAAO,KAAK,CAAA,CAAE,OAAA,CAAQ,YAAA,EAAc,WAAW,CAAC,CAAA,CAAA;AAAA,GAChE,CACC,KAAK,EAAE,CAAA;AACZ;AAEA,SAAS,cAAA,CACP,SAAA,EACA,MAAA,EACA,IAAA,EACoB;AACpB,EAAA,MAAM,UAAA,GACJ,SAAS,MAAA,GACJ,MAAA,CAAO,QAAQ,MAAA,CAAO,KAAA,GACtB,MAAA,CAAO,KAAA,IAAS,MAAA,CAAO,IAAA;AAE9B,EAAA,IAAI,cAAc,IAAA,EAAM;AACtB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,MAAM,QAAA,GAAW,IAAI,SAAS,CAAA,CAAA;AAC9B,EAAA,MAAM,OAAA,GAAU,GAAG,QAAQ,CAAA,CAAA,EAAI,wBAAwB,oBAAA,CAAqB,UAAU,CAAC,CAAC,CAAA,CAAA,CAAA;AAExF,EAAA,IAAI,IAAA,KAAS,QAAA,IAAY,MAAA,CAAO,IAAA,IAAQ,IAAA,EAAM;AAC5C,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,MAAM,aAAA,GAAgB,uBAAA;AAAA,IACpB,oBAAA,CAAqB,OAAO,IAAI;AAAA,GAClC;AACA,EAAA,MAAM,YAAA,GAAe,CAAA,CAAA,EAAI,SAAS,CAAA,yCAAA,EAA4C,SAAS,CAAA,CAAA;AACvF,EAAA,MAAM,OAAA,GAAU,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,CAAA;AAEhD,EAAA,OAAO,GAAG,OAAO,CAAA,oCAAA,EAAuC,QAAQ,CAAA,CAAA,EAAI,aAAa,KAAK,OAAO,CAAA,CAAA;AAC/F;AAKO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAI,OAAA,GAAU,KAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,IAAA,GAAO,QAAA;AAAA,EACP,GAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkC;AAChC,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,cAAA,GACJ,MAAA,IAAU,IAAA,GAAO,MAAA,GAAY,uBAAuB,OAAO,CAAA;AAC7D,EAAA,MAAM,QAAA,GACJ,UAAU,IAAA,IAAQ,cAAA,IAAkB,OAChC,cAAA,CAAe,cAAA,EAAgB,MAAA,EAAQ,IAAI,CAAA,GAC3C,MAAA;AACN,EAAA,MAAM,UAAA,GAAa,gBAAA,CAAiB,MAAA,EAAQ,KAAK,CAAA;AAEjD,EAAA,OAAO,aAAA;AAAA,IACL,OAAA;AAAA,IACA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,SAAS,CAAA;AAAA,MACvC,aAAA,EAAe,UAAA;AAAA,MACf,YAAA,EAAc,IAAA,KAAS,QAAA,GAAW,MAAA,GAAY,IAAA;AAAA,MAC9C,GAAA;AAAA,MACA,KAAA,EAAO;AAAA,KACT;AAAA,IACA,QAAA,IAAY,OACR,QAAA,GACA,aAAA;AAAA,MACE,QAAA;AAAA,MACA,IAAA;AAAA,MACA,aAAA;AAAA,QACE,OAAA;AAAA,QACA,cAAc,IAAA,GAAO,IAAA,GAAO,EAAC,aAAA,EAAe,CAAA,EAAG,UAAU,CAAA,OAAA,CAAA,EAAS;AAAA,QAClE;AAAA,OACF;AAAA,MACA;AAAA;AACF,GACN;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-DE7JLNSO.js","sourcesContent":["import {\n  Fragment,\n  createElement,\n  useId,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from 'internal/cx';\n\nexport type ThemeMode = 'dark' | 'light' | 'system';\n\nexport type ThemePaletteName =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\nexport type ThemePaletteStep =\n  | 50\n  | 100\n  | 200\n  | 300\n  | 400\n  | 500\n  | 600\n  | 700\n  | 800\n  | 900;\n\nexport type ThemePaletteReference =\n  | `${ThemePaletteName}.${ThemePaletteStep}`\n  | `${ThemePaletteName}-${ThemePaletteStep}`;\n\nexport type ThemeColorValue = ThemePaletteReference | (string & {});\ntype ThemeCssVariableName = `--silver-${string}`;\ntype ThemeCssVariables = Partial<Record<ThemeCssVariableName, string>>;\n\nexport interface ThemeColorTokens {\n  bg?: ThemeColorValue;\n  bgGhostActive?: ThemeColorValue;\n  bgGhostHover?: ThemeColorValue;\n  bgHover?: ThemeColorValue;\n  bgSelected?: ThemeColorValue;\n  bgSubtle?: ThemeColorValue;\n  border?: ThemeColorValue;\n  borderEmphasized?: ThemeColorValue;\n  destructive?: ThemeColorValue;\n  destructiveActive?: ThemeColorValue;\n  destructiveFg?: ThemeColorValue;\n  destructiveHover?: ThemeColorValue;\n  fg?: ThemeColorValue;\n  fgDisabled?: ThemeColorValue;\n  fgMuted?: ThemeColorValue;\n  fgOnPrimary?: ThemeColorValue;\n  iconAccent?: ThemeColorValue;\n  iconBlue?: ThemeColorValue;\n  iconCyan?: ThemeColorValue;\n  iconDisabled?: ThemeColorValue;\n  iconError?: ThemeColorValue;\n  iconGray?: ThemeColorValue;\n  iconGreen?: ThemeColorValue;\n  iconInfo?: ThemeColorValue;\n  iconOrange?: ThemeColorValue;\n  iconPink?: ThemeColorValue;\n  iconPrimary?: ThemeColorValue;\n  iconPurple?: ThemeColorValue;\n  iconRed?: ThemeColorValue;\n  iconSecondary?: ThemeColorValue;\n  iconSuccess?: ThemeColorValue;\n  iconTeal?: ThemeColorValue;\n  iconTertiary?: ThemeColorValue;\n  iconWarning?: ThemeColorValue;\n  iconYellow?: ThemeColorValue;\n  overlayScrim?: ThemeColorValue;\n  overlayScrimStrong?: ThemeColorValue;\n  overlayScrimSubtle?: ThemeColorValue;\n  presenceError?: ThemeColorValue;\n  presenceNeutral?: ThemeColorValue;\n  presenceSuccess?: ThemeColorValue;\n  primary?: ThemeColorValue;\n  primaryActive?: ThemeColorValue;\n  primaryHover?: ThemeColorValue;\n  primarySubtle?: ThemeColorValue;\n  skeleton?: ThemeColorValue;\n  skeletonShimmer?: ThemeColorValue;\n  statusDisabledSolid?: ThemeColorValue;\n  statusDisabledSolidFg?: ThemeColorValue;\n  statusErrorBorder?: ThemeColorValue;\n  statusErrorBorderHover?: ThemeColorValue;\n  statusErrorFg?: ThemeColorValue;\n  statusErrorSolid?: ThemeColorValue;\n  statusErrorSolidFg?: ThemeColorValue;\n  statusInfoFg?: ThemeColorValue;\n  statusInfoSolid?: ThemeColorValue;\n  statusInfoSolidFg?: ThemeColorValue;\n  statusNeutralSolid?: ThemeColorValue;\n  statusNeutralSolidFg?: ThemeColorValue;\n  statusSuccessBorder?: ThemeColorValue;\n  statusSuccessBorderHover?: ThemeColorValue;\n  statusSuccessFg?: ThemeColorValue;\n  statusSuccessSolid?: ThemeColorValue;\n  statusSuccessSolidFg?: ThemeColorValue;\n  statusWarningBorder?: ThemeColorValue;\n  statusWarningBorderHover?: ThemeColorValue;\n  statusWarningFg?: ThemeColorValue;\n  statusWarningSolid?: ThemeColorValue;\n  statusWarningSolidFg?: ThemeColorValue;\n  surfaceBlue?: ThemeColorValue;\n  surfaceBlueAccent?: ThemeColorValue;\n  surfaceBlueFg?: ThemeColorValue;\n  surfaceBlueHover?: ThemeColorValue;\n  surfaceCyan?: ThemeColorValue;\n  surfaceCyanAccent?: ThemeColorValue;\n  surfaceCyanFg?: ThemeColorValue;\n  surfaceCyanHover?: ThemeColorValue;\n  surfaceGray?: ThemeColorValue;\n  surfaceGrayAccent?: ThemeColorValue;\n  surfaceGrayFg?: ThemeColorValue;\n  surfaceGrayHover?: ThemeColorValue;\n  surfaceGreen?: ThemeColorValue;\n  surfaceGreenAccent?: ThemeColorValue;\n  surfaceGreenFg?: ThemeColorValue;\n  surfaceGreenHover?: ThemeColorValue;\n  surfaceOrange?: ThemeColorValue;\n  surfaceOrangeAccent?: ThemeColorValue;\n  surfaceOrangeFg?: ThemeColorValue;\n  surfaceOrangeHover?: ThemeColorValue;\n  surfacePink?: ThemeColorValue;\n  surfacePinkAccent?: ThemeColorValue;\n  surfacePinkFg?: ThemeColorValue;\n  surfacePinkHover?: ThemeColorValue;\n  surfacePurple?: ThemeColorValue;\n  surfacePurpleAccent?: ThemeColorValue;\n  surfacePurpleFg?: ThemeColorValue;\n  surfacePurpleHover?: ThemeColorValue;\n  surfaceRed?: ThemeColorValue;\n  surfaceRedAccent?: ThemeColorValue;\n  surfaceRedFg?: ThemeColorValue;\n  surfaceRedHover?: ThemeColorValue;\n  surfaceTeal?: ThemeColorValue;\n  surfaceTealAccent?: ThemeColorValue;\n  surfaceTealFg?: ThemeColorValue;\n  surfaceTealHover?: ThemeColorValue;\n  surfaceYellow?: ThemeColorValue;\n  surfaceYellowAccent?: ThemeColorValue;\n  surfaceYellowFg?: ThemeColorValue;\n  surfaceYellowHover?: ThemeColorValue;\n  track?: ThemeColorValue;\n  trackDisabled?: ThemeColorValue;\n  trackEmphasized?: ThemeColorValue;\n}\n\nexport interface ThemeFontTokens {\n  body?: string;\n  mono?: string;\n}\n\nexport interface ThemeFontSizeTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  iconLg?: string;\n  iconMd?: string;\n  iconSm?: string;\n}\n\nexport interface ThemeRadiusTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  lg?: string;\n  md?: string;\n  sm?: string;\n}\n\nexport interface ThemeShadowTokens {\n  focus?: string;\n  focusError?: string;\n  focusSuccess?: string;\n  focusWarning?: string;\n}\n\nexport interface ThemeSizeTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  iconLg?: string;\n  iconMd?: string;\n  iconSm?: string;\n}\n\nexport interface ThemeSpacingTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  focusOffset?: string;\n  focusOffsetLoose?: string;\n  focusOffsetTight?: string;\n}\n\nexport interface ThemeTokens {\n  colors?: ThemeColorTokens;\n  fonts?: ThemeFontTokens;\n  fontSizes?: ThemeFontSizeTokens;\n  radii?: ThemeRadiusTokens;\n  shadows?: ThemeShadowTokens;\n  sizes?: ThemeSizeTokens;\n  spacing?: ThemeSpacingTokens;\n}\n\nexport interface ThemeModeTokens {\n  dark?: ThemeTokens;\n  light?: ThemeTokens;\n}\n\nexport interface ThemeProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * HTML element type to render.\n   * @default 'div'\n   */\n  as?: ElementType;\n  /**\n   * Theme content.\n   */\n  children?: ReactNode;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Theme mode. System mode omits data-theme and follows existing CSS/media\n   * query behavior.\n   * @default 'system'\n   */\n  mode?: ThemeMode;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Friendly token overrides mapped to Silver CSS custom properties.\n   */\n  themes?: ThemeModeTokens;\n  /**\n   * Friendly token overrides applied in every mode.\n   */\n  tokens?: ThemeTokens;\n}\n\nconst colorTokenVariables: Record<\n  keyof ThemeColorTokens,\n  ThemeCssVariableName\n> = {\n  bg: '--silver-colors-bg',\n  bgGhostActive: '--silver-colors-bg-ghost-active',\n  bgGhostHover: '--silver-colors-bg-ghost-hover',\n  bgHover: '--silver-colors-bg-hover',\n  bgSelected: '--silver-colors-bg-selected',\n  bgSubtle: '--silver-colors-bg-subtle',\n  border: '--silver-colors-border',\n  borderEmphasized: '--silver-colors-border-emphasized',\n  destructive: '--silver-colors-destructive',\n  destructiveActive: '--silver-colors-destructive-active',\n  destructiveFg: '--silver-colors-destructive-fg',\n  destructiveHover: '--silver-colors-destructive-hover',\n  fg: '--silver-colors-fg',\n  fgDisabled: '--silver-colors-fg-disabled',\n  fgMuted: '--silver-colors-fg-muted',\n  fgOnPrimary: '--silver-colors-fg-on-primary',\n  primary: '--silver-colors-primary',\n  primaryActive: '--silver-colors-primary-active',\n  primaryHover: '--silver-colors-primary-hover',\n  primarySubtle: '--silver-colors-primary-subtle',\n  iconAccent: '--silver-colors-icon-accent',\n  iconBlue: '--silver-colors-icon-blue',\n  iconCyan: '--silver-colors-icon-cyan',\n  iconDisabled: '--silver-colors-icon-disabled',\n  iconError: '--silver-colors-icon-error',\n  iconGray: '--silver-colors-icon-gray',\n  iconGreen: '--silver-colors-icon-green',\n  iconInfo: '--silver-colors-icon-info',\n  iconOrange: '--silver-colors-icon-orange',\n  iconPink: '--silver-colors-icon-pink',\n  iconPrimary: '--silver-colors-icon-primary',\n  iconPurple: '--silver-colors-icon-purple',\n  iconRed: '--silver-colors-icon-red',\n  iconSecondary: '--silver-colors-icon-secondary',\n  iconSuccess: '--silver-colors-icon-success',\n  iconTeal: '--silver-colors-icon-teal',\n  iconTertiary: '--silver-colors-icon-tertiary',\n  iconWarning: '--silver-colors-icon-warning',\n  iconYellow: '--silver-colors-icon-yellow',\n  overlayScrim: '--silver-colors-overlay-scrim',\n  overlayScrimStrong: '--silver-colors-overlay-scrim-strong',\n  overlayScrimSubtle: '--silver-colors-overlay-scrim-subtle',\n  presenceError: '--silver-colors-presence-error',\n  presenceNeutral: '--silver-colors-presence-neutral',\n  presenceSuccess: '--silver-colors-presence-success',\n  skeleton: '--silver-colors-skeleton',\n  skeletonShimmer: '--silver-colors-skeleton-shimmer',\n  statusDisabledSolid: '--silver-colors-status-disabled-solid',\n  statusDisabledSolidFg: '--silver-colors-status-disabled-solid-fg',\n  statusErrorBorder: '--silver-colors-status-error-border',\n  statusErrorBorderHover: '--silver-colors-status-error-border-hover',\n  statusErrorFg: '--silver-colors-status-error-fg',\n  statusErrorSolid: '--silver-colors-status-error-solid',\n  statusErrorSolidFg: '--silver-colors-status-error-solid-fg',\n  statusInfoFg: '--silver-colors-status-info-fg',\n  statusInfoSolid: '--silver-colors-status-info-solid',\n  statusInfoSolidFg: '--silver-colors-status-info-solid-fg',\n  statusNeutralSolid: '--silver-colors-status-neutral-solid',\n  statusNeutralSolidFg: '--silver-colors-status-neutral-solid-fg',\n  statusSuccessBorder: '--silver-colors-status-success-border',\n  statusSuccessBorderHover: '--silver-colors-status-success-border-hover',\n  statusSuccessFg: '--silver-colors-status-success-fg',\n  statusSuccessSolid: '--silver-colors-status-success-solid',\n  statusSuccessSolidFg: '--silver-colors-status-success-solid-fg',\n  statusWarningBorder: '--silver-colors-status-warning-border',\n  statusWarningBorderHover: '--silver-colors-status-warning-border-hover',\n  statusWarningFg: '--silver-colors-status-warning-fg',\n  statusWarningSolid: '--silver-colors-status-warning-solid',\n  statusWarningSolidFg: '--silver-colors-status-warning-solid-fg',\n  surfaceBlue: '--silver-colors-surface-blue',\n  surfaceBlueAccent: '--silver-colors-surface-blue-accent',\n  surfaceBlueFg: '--silver-colors-surface-blue-fg',\n  surfaceBlueHover: '--silver-colors-surface-blue-hover',\n  surfaceCyan: '--silver-colors-surface-cyan',\n  surfaceCyanAccent: '--silver-colors-surface-cyan-accent',\n  surfaceCyanFg: '--silver-colors-surface-cyan-fg',\n  surfaceCyanHover: '--silver-colors-surface-cyan-hover',\n  surfaceGray: '--silver-colors-surface-gray',\n  surfaceGrayAccent: '--silver-colors-surface-gray-accent',\n  surfaceGrayFg: '--silver-colors-surface-gray-fg',\n  surfaceGrayHover: '--silver-colors-surface-gray-hover',\n  surfaceGreen: '--silver-colors-surface-green',\n  surfaceGreenAccent: '--silver-colors-surface-green-accent',\n  surfaceGreenFg: '--silver-colors-surface-green-fg',\n  surfaceGreenHover: '--silver-colors-surface-green-hover',\n  surfaceOrange: '--silver-colors-surface-orange',\n  surfaceOrangeAccent: '--silver-colors-surface-orange-accent',\n  surfaceOrangeFg: '--silver-colors-surface-orange-fg',\n  surfaceOrangeHover: '--silver-colors-surface-orange-hover',\n  surfacePink: '--silver-colors-surface-pink',\n  surfacePinkAccent: '--silver-colors-surface-pink-accent',\n  surfacePinkFg: '--silver-colors-surface-pink-fg',\n  surfacePinkHover: '--silver-colors-surface-pink-hover',\n  surfacePurple: '--silver-colors-surface-purple',\n  surfacePurpleAccent: '--silver-colors-surface-purple-accent',\n  surfacePurpleFg: '--silver-colors-surface-purple-fg',\n  surfacePurpleHover: '--silver-colors-surface-purple-hover',\n  surfaceRed: '--silver-colors-surface-red',\n  surfaceRedAccent: '--silver-colors-surface-red-accent',\n  surfaceRedFg: '--silver-colors-surface-red-fg',\n  surfaceRedHover: '--silver-colors-surface-red-hover',\n  surfaceTeal: '--silver-colors-surface-teal',\n  surfaceTealAccent: '--silver-colors-surface-teal-accent',\n  surfaceTealFg: '--silver-colors-surface-teal-fg',\n  surfaceTealHover: '--silver-colors-surface-teal-hover',\n  surfaceYellow: '--silver-colors-surface-yellow',\n  surfaceYellowAccent: '--silver-colors-surface-yellow-accent',\n  surfaceYellowFg: '--silver-colors-surface-yellow-fg',\n  surfaceYellowHover: '--silver-colors-surface-yellow-hover',\n  track: '--silver-colors-track',\n  trackDisabled: '--silver-colors-track-disabled',\n  trackEmphasized: '--silver-colors-track-emphasized',\n};\n\nconst fontTokenVariables: Record<keyof ThemeFontTokens, ThemeCssVariableName> =\n  {\n    body: '--silver-fonts-body',\n    mono: '--silver-fonts-mono',\n  };\n\nconst fontSizeTokenVariables: Record<\n  keyof ThemeFontSizeTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-font-sizes-component-lg',\n  componentMd: '--silver-font-sizes-component-md',\n  componentSm: '--silver-font-sizes-component-sm',\n  iconLg: '--silver-font-sizes-icon-lg',\n  iconMd: '--silver-font-sizes-icon-md',\n  iconSm: '--silver-font-sizes-icon-sm',\n};\n\nconst radiusTokenVariables: Record<\n  keyof ThemeRadiusTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-radii-component-lg',\n  componentMd: '--silver-radii-component-md',\n  componentSm: '--silver-radii-component-sm',\n  lg: '--silver-radii-lg',\n  md: '--silver-radii-md',\n  sm: '--silver-radii-sm',\n};\n\nconst shadowTokenVariables: Record<\n  keyof ThemeShadowTokens,\n  ThemeCssVariableName\n> = {\n  focus: '--silver-shadows-focus',\n  focusError: '--silver-shadows-focus-error',\n  focusSuccess: '--silver-shadows-focus-success',\n  focusWarning: '--silver-shadows-focus-warning',\n};\n\nconst sizeTokenVariables: Record<keyof ThemeSizeTokens, ThemeCssVariableName> =\n  {\n    componentLg: '--silver-sizes-component-lg',\n    componentMd: '--silver-sizes-component-md',\n    componentSm: '--silver-sizes-component-sm',\n    iconLg: '--silver-sizes-icon-lg',\n    iconMd: '--silver-sizes-icon-md',\n    iconSm: '--silver-sizes-icon-sm',\n  };\n\nconst spacingTokenVariables: Record<\n  keyof ThemeSpacingTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-spacing-component-lg',\n  componentMd: '--silver-spacing-component-md',\n  componentSm: '--silver-spacing-component-sm',\n  focusOffset: '--silver-spacing-focus-offset',\n  focusOffsetLoose: '--silver-spacing-focus-offset-loose',\n  focusOffsetTight: '--silver-spacing-focus-offset-tight',\n};\n\nconst paletteReferencePattern =\n  /^(blue|cyan|gray|green|orange|pink|purple|red|teal|yellow)[.-](50|100|200|300|400|500|600|700|800|900)$/;\n\nfunction resolveThemeColorValue(value: ThemeColorValue): string {\n  const match = paletteReferencePattern.exec(value);\n\n  if (match == null) {\n    return value;\n  }\n\n  const [, paletteName, paletteStep] = match;\n  return `var(--silver-colors-${paletteName}-${paletteStep})`;\n}\n\nfunction assignTokenVariables<TTokenName extends string>(\n  style: ThemeCssVariables,\n  tokens: Partial<Record<TTokenName, string>> | undefined,\n  variables: Record<TTokenName, ThemeCssVariableName>,\n  resolveValue: (value: string) => string = value => value,\n): void {\n  if (tokens == null) {\n    return;\n  }\n\n  for (const tokenName of Object.keys(variables) as TTokenName[]) {\n    const value = tokens[tokenName];\n\n    if (value != null) {\n      style[variables[tokenName]] = resolveValue(value);\n    }\n  }\n}\n\nfunction createThemeStyle(\n  tokens: ThemeTokens | undefined,\n  style: CSSProperties | undefined,\n): CSSProperties {\n  return {\n    ...createThemeVariables(tokens),\n    ...style,\n  };\n}\n\nfunction createThemeVariables(\n  tokens: ThemeTokens | undefined,\n): ThemeCssVariables {\n  const themeStyle: ThemeCssVariables = {};\n\n  assignTokenVariables(\n    themeStyle,\n    tokens?.colors,\n    colorTokenVariables,\n    resolveThemeColorValue,\n  );\n  assignTokenVariables(themeStyle, tokens?.fontSizes, fontSizeTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.fonts, fontTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.radii, radiusTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.shadows, shadowTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.sizes, sizeTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.spacing, spacingTokenVariables);\n\n  return themeStyle;\n}\n\nfunction sanitizeThemeClassName(id: string): string {\n  return `silver-theme-${id.replace(/[^a-zA-Z0-9_-]/g, '')}`;\n}\n\nfunction serializeThemeVariables(variables: ThemeCssVariables): string {\n  return Object.entries(variables)\n    .map(\n      ([name, value]) =>\n        `${name}: ${String(value).replace(/<\\/style/gi, '<\\\\/style')};`,\n    )\n    .join('');\n}\n\nfunction createThemeCss(\n  className: string,\n  tokens: ThemeModeTokens,\n  mode: ThemeMode,\n): string | undefined {\n  const baseTokens =\n    mode === 'dark'\n      ? (tokens.dark ?? tokens.light)\n      : (tokens.light ?? tokens.dark);\n\n  if (baseTokens == null) {\n    return undefined;\n  }\n\n  const selector = `.${className}`;\n  const baseCss = `${selector}{${serializeThemeVariables(createThemeVariables(baseTokens))}}`;\n\n  if (mode !== 'system' || tokens.dark == null) {\n    return baseCss;\n  }\n\n  const darkVariables = serializeThemeVariables(\n    createThemeVariables(tokens.dark),\n  );\n  const darkSelector = `.${className}[data-theme=\"dark\"],[data-theme=\"dark\"] .${className}`;\n  const darkCss = `${darkSelector}{${darkVariables}}`;\n\n  return `${baseCss}@media (prefers-color-scheme: dark){${selector}{${darkVariables}}}${darkCss}`;\n}\n\n/**\n * Scoped Silver UI theme provider backed by CSS custom properties.\n */\nexport function Theme({\n  as: Element = 'div',\n  children,\n  className,\n  'data-testid': dataTestId,\n  mode = 'system',\n  ref,\n  style,\n  themes,\n  tokens,\n  ...htmlProps\n}: ThemeProps): React.JSX.Element {\n  const themeId = useId();\n  const themeClassName =\n    themes == null ? undefined : sanitizeThemeClassName(themeId);\n  const themeCss =\n    themes != null && themeClassName != null\n      ? createThemeCss(themeClassName, themes, mode)\n      : undefined;\n  const themeStyle = createThemeStyle(tokens, style);\n\n  return createElement(\n    Element,\n    {\n      ...htmlProps,\n      className: cx(themeClassName, className),\n      'data-testid': dataTestId,\n      'data-theme': mode === 'system' ? undefined : mode,\n      ref,\n      style: themeStyle,\n    },\n    themeCss == null\n      ? children\n      : createElement(\n          Fragment,\n          null,\n          createElement(\n            'style',\n            dataTestId == null ? null : {'data-testid': `${dataTestId}-styles`},\n            themeCss,\n          ),\n          children,\n        ),\n  );\n}\n\nTheme.displayName = 'Theme';\n"]}