silver-ui 0.4.0 → 0.5.0

package/dist/{chunk-JSINCF2R.cjs.map → chunk-MEUELWGO.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Thumbnail/Thumbnail.recipe.ts","../src/components/Thumbnail/Thumbnail.tsx"],"names":["sva","useState","Skeleton","jsx","Icon","ImageIcon","jsxs","Spinner","Button","X","cx","Tooltip"],"mappings":"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","file":"chunk-JSINCF2R.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const thumbnailRecipe = sva({\n  slots: [\n    'root',\n    'imageContainer',\n    'imageButton',\n    'image',\n    'placeholder',\n    'insetBorder',\n    'remove',\n    'overlay',\n  ],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      flexDirection: 'column',\n      w: '16',\n      flexShrink: 0,\n      isolation: 'isolate',\n    },\n    imageContainer: {\n      position: 'relative',\n      w: 'full',\n      aspectRatio: '1',\n      borderRadius: 'md',\n      overflow: 'hidden',\n      bg: 'surface.gray',\n    },\n    imageButton: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      cursor: 'pointer',\n      borderRadius: 'inherit',\n      overflow: 'hidden',\n    },\n    image: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      objectFit: 'cover',\n    },\n    placeholder: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: 'full',\n      h: 'full',\n      color: 'fg.muted',\n    },\n    insetBorder: {\n      position: 'absolute',\n      inset: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0 0 0 1px token(colors.border.emphasized)',\n      pointerEvents: 'none',\n    },\n    remove: {\n      position: 'absolute',\n      top: '1',\n      right: '1',\n      zIndex: 1,\n      color: 'fg.onPrimary',\n    },\n    overlay: {\n      position: 'absolute',\n      inset: 0,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      bg: 'overlay.scrim.subtle',\n      borderRadius: 'inherit',\n      zIndex: 1,\n    },\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        root: {\n          opacity: 0.5,\n          pointerEvents: 'none',\n        },\n      },\n    },\n    isInteractive: {\n      true: {\n        imageContainer: {\n          cursor: 'pointer',\n          transitionProperty: 'opacity, box-shadow',\n          transitionDuration: 'fast',\n          transitionTimingFunction: 'default',\n          _hover: {\n            boxShadow: 'lg',\n            opacity: 0.9,\n          },\n          _active: {\n            opacity: 0.75,\n          },\n          '&:has(:focus-visible)': {\n            outlineWidth: 'focus',\n            outlineStyle: 'solid',\n            outlineColor: 'primary',\n            outlineOffset: 'focusOffset',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    isDisabled: false,\n    isInteractive: false,\n  },\n});\n\nexport type ThumbnailVariants = RecipeVariantProps<typeof thumbnailRecipe>;\n","import {ImageIcon, X} from 'lucide-react';\nimport {useState, type CSSProperties, type MouseEvent, type Ref} from 'react';\nimport {cx} from '../../internal/cx';\nimport {Button} from '../Button';\nimport {Icon} from '../Icon';\nimport {Skeleton} from '../Skeleton';\nimport {Spinner} from '../Spinner';\nimport {Tooltip} from '../Tooltip';\nimport {thumbnailRecipe} from './Thumbnail.recipe';\n\nexport interface ThumbnailProps {\n  /**\n   * Alt text describing the image content. Use `label` for a file name or\n   * action label shown in the tooltip and button accessible names.\n   */\n  alt?: string;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the thumbnail is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the thumbnail is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * File name or short item label used for the root accessible name, tooltip,\n   * and open/remove button labels. When omitted, `alt` is used as a fallback.\n   */\n  label?: string;\n  /**\n   * Called when the thumbnail image area is clicked.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Called when the remove button is clicked.\n   */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Image source.\n   */\n  src?: string;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n}\n\ntype ThumbnailClasses = ReturnType<typeof thumbnailRecipe>;\n\ntype ThumbnailImageAreaProps = Pick<\n  ThumbnailProps,\n  'alt' | 'isLoading' | 'onClick' | 'onRemove' | 'src'\n> & {\n  accessibleName: string;\n  classes: ThumbnailClasses;\n  isDisabled: boolean;\n};\n\nfunction ThumbnailImageArea({\n  accessibleName,\n  alt,\n  classes,\n  isDisabled,\n  isLoading = false,\n  onClick,\n  onRemove,\n  src,\n}: ThumbnailImageAreaProps): React.JSX.Element {\n  const [hasImageError, setHasImageError] = useState(false);\n  const hasImage = src != null && !hasImageError;\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const imageContent =\n    isLoading && !hasImage ? (\n      <Skeleton radius={2} />\n    ) : hasImage ? (\n      <img\n        alt={alt ?? ''}\n        className={classes.image}\n        onError={() => setHasImageError(true)}\n        src={src}\n      />\n    ) : (\n      <div className={classes.placeholder}>\n        <Icon icon={ImageIcon} size=\"lg\" />\n      </div>\n    );\n\n  return (\n    <div className={classes.imageContainer}>\n      {isInteractive ? (\n        <button\n          aria-label={`Open ${accessibleName}`}\n          className={classes.imageButton}\n          onClick={onClick}\n          type=\"button\">\n          {imageContent}\n        </button>\n      ) : (\n        imageContent\n      )}\n      {hasImage ? <div className={classes.insetBorder} /> : null}\n      {isLoading && hasImage ? (\n        <div className={classes.overlay}>\n          <Spinner size=\"sm\" variant=\"onMedia\" />\n        </div>\n      ) : null}\n      {onRemove != null && !isDisabled ? (\n        <div className={classes.remove}>\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Remove ${accessibleName}`}\n            onClick={event => {\n              event.stopPropagation();\n              onRemove(event as MouseEvent<HTMLButtonElement>);\n            }}\n            size=\"sm\"\n            variant=\"onSolid\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Square image preview for attachments and media.\n */\nexport function Thumbnail({\n  alt,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  isLoading = false,\n  label,\n  onClick,\n  onRemove,\n  ref,\n  src,\n  style,\n}: ThumbnailProps): React.JSX.Element {\n  const accessibleName = label ?? alt ?? 'thumbnail';\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const classes = thumbnailRecipe({isDisabled, isInteractive});\n\n  const thumbnail = (\n    <div\n      aria-busy={isLoading || undefined}\n      aria-label={accessibleName}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <ThumbnailImageArea\n        accessibleName={accessibleName}\n        alt={alt}\n        classes={classes}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        key={src ?? 'empty'}\n        onClick={onClick}\n        onRemove={onRemove}\n        src={src}\n      />\n    </div>\n  );\n\n  return label != null ? (\n    <Tooltip content={label}>{thumbnail}</Tooltip>\n  ) : (\n    thumbnail\n  );\n}\n\nThumbnail.displayName = 'Thumbnail';\n"]}
+{"version":3,"sources":["../src/components/Thumbnail/Thumbnail.recipe.ts","../src/components/Thumbnail/Thumbnail.tsx"],"names":["sva","useState","Skeleton","jsx","Icon","ImageIcon","jsxs","Spinner","Button","X","cx","Tooltip"],"mappings":"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","file":"chunk-MEUELWGO.cjs","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const thumbnailRecipe = sva({\n  slots: [\n    'root',\n    'imageContainer',\n    'imageButton',\n    'image',\n    'placeholder',\n    'insetBorder',\n    'remove',\n    'overlay',\n  ],\n  base: {\n    root: {\n      position: 'relative',\n      display: 'inline-flex',\n      flexDirection: 'column',\n      w: '16',\n      flexShrink: 0,\n      isolation: 'isolate',\n    },\n    imageContainer: {\n      position: 'relative',\n      w: 'full',\n      aspectRatio: '1',\n      borderRadius: 'md',\n      overflow: 'hidden',\n      bg: 'surface.gray',\n    },\n    imageButton: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      cursor: 'pointer',\n      borderRadius: 'inherit',\n      overflow: 'hidden',\n    },\n    image: {\n      display: 'block',\n      w: 'full',\n      h: 'full',\n      objectFit: 'cover',\n    },\n    placeholder: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: 'full',\n      h: 'full',\n      color: 'fg.muted',\n    },\n    insetBorder: {\n      position: 'absolute',\n      inset: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0 0 0 1px token(colors.border.emphasized)',\n      pointerEvents: 'none',\n    },\n    remove: {\n      position: 'absolute',\n      top: '1',\n      right: '1',\n      zIndex: 1,\n      color: 'fg.onPrimary',\n    },\n    overlay: {\n      position: 'absolute',\n      inset: 0,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      bg: 'overlay.scrim.subtle',\n      borderRadius: 'inherit',\n      zIndex: 1,\n    },\n  },\n  variants: {\n    isDisabled: {\n      true: {\n        root: {\n          opacity: 0.5,\n          pointerEvents: 'none',\n        },\n      },\n    },\n    isInteractive: {\n      true: {\n        imageContainer: {\n          cursor: 'pointer',\n          transitionProperty: 'opacity, box-shadow',\n          transitionDuration: 'fast',\n          transitionTimingFunction: 'default',\n          _hover: {\n            boxShadow: 'lg',\n            opacity: 0.9,\n          },\n          _active: {\n            opacity: 0.75,\n          },\n          '&:has(:focus-visible)': {\n            outlineWidth: 'focus',\n            outlineStyle: 'solid',\n            outlineColor: 'primary',\n            outlineOffset: 'focusOffset',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    isDisabled: false,\n    isInteractive: false,\n  },\n});\n\nexport type ThumbnailVariants = RecipeVariantProps<typeof thumbnailRecipe>;\n","import {ImageIcon, X} from 'lucide-react';\nimport {useState, type CSSProperties, type MouseEvent, type Ref} from 'react';\nimport {Button} from 'components/Button';\nimport {Icon} from 'components/Icon';\nimport {Skeleton} from 'components/Skeleton';\nimport {Spinner} from 'components/Spinner';\nimport {thumbnailRecipe} from 'components/Thumbnail/Thumbnail.recipe';\nimport {Tooltip} from 'components/Tooltip';\nimport {cx} from 'internal/cx';\n\nexport interface ThumbnailProps {\n  /**\n   * Alt text describing the image content. Use `label` for a file name or\n   * action label shown in the tooltip and button accessible names.\n   */\n  alt?: string;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the thumbnail is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the thumbnail is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * File name or short item label used for the root accessible name, tooltip,\n   * and open/remove button labels. When omitted, `alt` is used as a fallback.\n   */\n  label?: string;\n  /**\n   * Called when the thumbnail image area is clicked.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Called when the remove button is clicked.\n   */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Image source.\n   */\n  src?: string;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n}\n\ntype ThumbnailClasses = ReturnType<typeof thumbnailRecipe>;\n\ntype ThumbnailImageAreaProps = Pick<\n  ThumbnailProps,\n  'alt' | 'isLoading' | 'onClick' | 'onRemove' | 'src'\n> & {\n  accessibleName: string;\n  classes: ThumbnailClasses;\n  isDisabled: boolean;\n};\n\nfunction ThumbnailImageArea({\n  accessibleName,\n  alt,\n  classes,\n  isDisabled,\n  isLoading = false,\n  onClick,\n  onRemove,\n  src,\n}: ThumbnailImageAreaProps): React.JSX.Element {\n  const [hasImageError, setHasImageError] = useState(false);\n  const hasImage = src != null && !hasImageError;\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const imageContent =\n    isLoading && !hasImage ? (\n      <Skeleton radius={2} />\n    ) : hasImage ? (\n      <img\n        alt={alt ?? ''}\n        className={classes.image}\n        onError={() => setHasImageError(true)}\n        src={src}\n      />\n    ) : (\n      <div className={classes.placeholder}>\n        <Icon icon={ImageIcon} size=\"lg\" />\n      </div>\n    );\n\n  return (\n    <div className={classes.imageContainer}>\n      {isInteractive ? (\n        <button\n          aria-label={`Open ${accessibleName}`}\n          className={classes.imageButton}\n          onClick={onClick}\n          type=\"button\">\n          {imageContent}\n        </button>\n      ) : (\n        imageContent\n      )}\n      {hasImage ? <div className={classes.insetBorder} /> : null}\n      {isLoading && hasImage ? (\n        <div className={classes.overlay}>\n          <Spinner size=\"sm\" variant=\"onMedia\" />\n        </div>\n      ) : null}\n      {onRemove != null && !isDisabled ? (\n        <div className={classes.remove}>\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Remove ${accessibleName}`}\n            onClick={event => {\n              event.stopPropagation();\n              onRemove(event as MouseEvent<HTMLButtonElement>);\n            }}\n            size=\"sm\"\n            variant=\"onSolid\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Square image preview for attachments and media.\n */\nexport function Thumbnail({\n  alt,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  isLoading = false,\n  label,\n  onClick,\n  onRemove,\n  ref,\n  src,\n  style,\n}: ThumbnailProps): React.JSX.Element {\n  const accessibleName = label ?? alt ?? 'thumbnail';\n  const isInteractive = onClick != null && !isDisabled && !isLoading;\n  const classes = thumbnailRecipe({isDisabled, isInteractive});\n\n  const thumbnail = (\n    <div\n      aria-busy={isLoading || undefined}\n      aria-label={accessibleName}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <ThumbnailImageArea\n        accessibleName={accessibleName}\n        alt={alt}\n        classes={classes}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        key={src ?? 'empty'}\n        onClick={onClick}\n        onRemove={onRemove}\n        src={src}\n      />\n    </div>\n  );\n\n  return label != null ? (\n    <Tooltip content={label}>{thumbnail}</Tooltip>\n  ) : (\n    thumbnail\n  );\n}\n\nThumbnail.displayName = 'Thumbnail';\n"]}

package/dist/{chunk-TKTLWX2V.js → chunk-MEXR5ONE.js}

@@ -1,10 +1,10 @@
-import { getStatusMessageID, getDescribedBy } from './chunk-WOIWI2UO.js';
-import { Spinner } from './chunk-6ULCJ3XZ.js';
-import { Text } from './chunk-QRFDPG34.js';
-import { VisuallyHidden } from './chunk-7BSFKG7N.js';
-import { Tooltip } from './chunk-3CJC4QE6.js';
+import { getStatusMessageID, getDescribedBy } from './chunk-G6HS52US.js';
+import { Spinner } from './chunk-2VAUVJVG.js';
+import { Text } from './chunk-RJEZBOSH.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Tooltip } from './chunk-6PIVWNUR.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
 import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { Info } from 'lucide-react';
@@ -275,5 +275,5 @@ function Switch({
 Switch.displayName = "Switch";
 
 export { Switch };
-//# sourceMappingURL=chunk-TKTLWX2V.js.map
-//# sourceMappingURL=chunk-TKTLWX2V.js.map
+//# sourceMappingURL=chunk-MEXR5ONE.js.map
+//# sourceMappingURL=chunk-MEXR5ONE.js.map

package/dist/{chunk-TKTLWX2V.js.map → chunk-MEXR5ONE.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/Switch.recipe.ts","../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","file":"chunk-TKTLWX2V.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const switchRecipe = sva({\n  slots: [\n    'field',\n    'row',\n    'labelWrapper',\n    'label',\n    'labelIcon',\n    'requiredness',\n    'tooltipIcon',\n    'status',\n    'control',\n    'input',\n    'track',\n    'thumb',\n  ],\n  base: {\n    field: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      w: 'fit-content',\n    },\n    row: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n    },\n    labelWrapper: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5',\n      minW: 0,\n    },\n    label: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '1',\n      w: 'fit-content',\n      color: 'fg.muted',\n      cursor: 'pointer',\n    },\n    labelIcon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n    },\n    requiredness: {\n      fontWeight: 'normal',\n      color: 'fg.muted',\n    },\n    tooltipIcon: {\n      display: 'inline-flex',\n      color: 'fg.muted',\n    },\n    status: {\n      fontFamily: 'body',\n      fontSize: 'sm',\n      lineHeight: 'normal',\n      px: '2',\n      py: '1.5',\n      mt: '1',\n      borderRadius: 'md',\n    },\n    control: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      w: '10',\n      h: '6',\n      borderRadius: 'full',\n      isolation: 'isolate',\n      '&:has(input:focus-visible)': {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffset',\n      },\n      '& [data-switch-track][data-selected=\"true\"]': {\n        bg: 'primary',\n      },\n      '&:has(input:active:not(:disabled)) [data-switch-track]': {\n        bg: 'primary.active',\n      },\n    },\n    input: {\n      position: 'absolute',\n      inset: 0,\n      m: 0,\n      p: 0,\n      opacity: 0,\n      cursor: 'pointer',\n      zIndex: 1,\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n    },\n    track: {\n      display: 'flex',\n      alignItems: 'center',\n      w: '10',\n      h: '6',\n      p: '1',\n      borderRadius: 'full',\n      bg: 'track.emphasized',\n      transitionProperty: 'background-color',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      pointerEvents: 'none',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n    thumb: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: '4',\n      h: '4',\n      borderRadius: 'full',\n      bg: 'bg',\n      color: 'primary',\n      transform: 'translateX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n  },\n  variants: {\n    labelSpacing: {\n      default: {},\n      spread: {\n        field: {w: 'full'},\n        row: {justifyContent: 'space-between', w: 'full'},\n      },\n    },\n    isSelected: {\n      true: {\n        track: {bg: 'primary'},\n        thumb: {transform: 'translateX(16px)'},\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        label: {color: 'fg.disabled', cursor: 'not-allowed'},\n        track: {opacity: 0.5},\n      },\n      false: {},\n    },\n    // Applied only when a status message is rendered (status?.type is defined).\n    status: {\n      warning: {status: {bg: 'surface.yellow', color: 'surface.yellow.fg'}},\n      error: {status: {bg: 'surface.red', color: 'surface.red.fg'}},\n      success: {status: {bg: 'surface.green', color: 'surface.green.fg'}},\n    },\n  },\n  defaultVariants: {\n    labelSpacing: 'default',\n    isSelected: false,\n    isDisabled: false,\n  },\n});\n\nexport type SwitchVariants = RecipeVariantProps<typeof switchRecipe>;\n","import {Info} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport isReactNode from '../../internal/isReactNode';\nimport type {FieldNecessity, InputStatus} from '../Field';\nimport {getDescribedBy, getStatusMessageID} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\nimport {Tooltip} from '../Tooltip';\nimport {switchRecipe} from './Switch.recipe';\n\nexport type SwitchLabelPosition = 'end' | 'start';\nexport type SwitchLabelSpacing = 'default' | 'spread';\n\nexport type SwitchProps = {\n  /**\n   * Additional CSS class names applied to the field root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the checkbox input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the switch is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the switch is on.\n   */\n  isSelected: boolean;\n  /**\n   * Switch label.\n   */\n  label: string;\n  /**\n   * Content rendered before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Which side of the switch the label appears on.\n   * @default 'end'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Spacing behavior between label and switch.\n   * @default 'default'\n   */\n  labelSpacing?: SwitchLabelSpacing;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the switch loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the checked state changes.\n   */\n  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the switch receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the checkbox input.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Validation status displayed below the switch.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the field root.\n   */\n  style?: CSSProperties;\n} & FieldNecessity;\n\n/**\n * A controlled switch for boolean settings.\n */\nexport function Switch({\n  className,\n  'data-testid': dataTestId,\n  description,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  labelPosition = 'end',\n  labelSpacing = 'default',\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  status,\n  style,\n  isSelected,\n}: SwitchProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID = isReactNode(description)\n    ? `${inputId}-description`\n    : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const requirednessText = isOptional\n    ? 'Optional'\n    : isRequired\n      ? 'Required'\n      : null;\n  const classes = switchRecipe({\n    labelSpacing,\n    isSelected,\n    isDisabled,\n    status: status?.type,\n  });\n  const control = (\n    <span className={classes.control}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        checked={isSelected}\n        className={classes.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.checked, event)}\n        onFocus={onFocus}\n        ref={ref}\n        required={isRequired}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={classes.track}\n        data-selected={isSelected ? 'true' : undefined}\n        data-switch-track=\"\">\n        <span className={classes.thumb}>\n          {isLoading ? <Spinner size=\"sm\" /> : null}\n        </span>\n      </span>\n      {isLoading ? (\n        <VisuallyHidden>\n          <span role=\"status\">Loading</span>\n        </VisuallyHidden>\n      ) : null}\n    </span>\n  );\n  const labelNode = (\n    <div className={classes.labelWrapper}>\n      <label className={classes.label} htmlFor={inputId}>\n        {labelIcon != null ? (\n          <span className={classes.labelIcon}>\n            <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <Text as=\"span\" color=\"inherit\" type=\"label\">\n          {label}\n        </Text>\n        {requirednessText != null ? (\n          <Text as=\"span\" className={classes.requiredness} type=\"supporting\">\n            <span aria-hidden=\"true\"> · </span>\n            {requirednessText}\n          </Text>\n        ) : null}\n        {isReactNode(labelTooltip) ? (\n          <Tooltip content={labelTooltip}>\n            <span className={classes.tooltipIcon}>\n              <Icon icon={Info} size=\"sm\" />\n            </span>\n          </Tooltip>\n        ) : null}\n      </label>\n      {isReactNode(description) ? (\n        <Text as=\"span\" color=\"secondary\" id={descriptionID} type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div className={cx(classes.field, className)} style={style}>\n      <div className={classes.row}>\n        {labelPosition === 'start' ? (\n          isLabelHidden ? (\n            <VisuallyHidden>{labelNode}</VisuallyHidden>\n          ) : (\n            labelNode\n          )\n        ) : (\n          control\n        )}\n        {labelPosition === 'start' ? (\n          control\n        ) : isLabelHidden ? (\n          <VisuallyHidden>{labelNode}</VisuallyHidden>\n        ) : (\n          labelNode\n        )}\n      </div>\n      {status?.message != null ? (\n        <div\n          aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n          className={classes.status}\n          id={statusMessageID}\n          role={status.type === 'error' ? 'alert' : 'status'}>\n          {status.message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}
+{"version":3,"sources":["../src/components/Switch/Switch.recipe.ts","../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","file":"chunk-MEXR5ONE.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const switchRecipe = sva({\n  slots: [\n    'field',\n    'row',\n    'labelWrapper',\n    'label',\n    'labelIcon',\n    'requiredness',\n    'tooltipIcon',\n    'status',\n    'control',\n    'input',\n    'track',\n    'thumb',\n  ],\n  base: {\n    field: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      w: 'fit-content',\n    },\n    row: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n    },\n    labelWrapper: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5',\n      minW: 0,\n    },\n    label: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '1',\n      w: 'fit-content',\n      color: 'fg.muted',\n      cursor: 'pointer',\n    },\n    labelIcon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n    },\n    requiredness: {\n      fontWeight: 'normal',\n      color: 'fg.muted',\n    },\n    tooltipIcon: {\n      display: 'inline-flex',\n      color: 'fg.muted',\n    },\n    status: {\n      fontFamily: 'body',\n      fontSize: 'sm',\n      lineHeight: 'normal',\n      px: '2',\n      py: '1.5',\n      mt: '1',\n      borderRadius: 'md',\n    },\n    control: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      w: '10',\n      h: '6',\n      borderRadius: 'full',\n      isolation: 'isolate',\n      '&:has(input:focus-visible)': {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffset',\n      },\n      '& [data-switch-track][data-selected=\"true\"]': {\n        bg: 'primary',\n      },\n      '&:has(input:active:not(:disabled)) [data-switch-track]': {\n        bg: 'primary.active',\n      },\n    },\n    input: {\n      position: 'absolute',\n      inset: 0,\n      m: 0,\n      p: 0,\n      opacity: 0,\n      cursor: 'pointer',\n      zIndex: 1,\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n    },\n    track: {\n      display: 'flex',\n      alignItems: 'center',\n      w: '10',\n      h: '6',\n      p: '1',\n      borderRadius: 'full',\n      bg: 'track.emphasized',\n      transitionProperty: 'background-color',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      pointerEvents: 'none',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n    thumb: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: '4',\n      h: '4',\n      borderRadius: 'full',\n      bg: 'bg',\n      color: 'primary',\n      transform: 'translateX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n  },\n  variants: {\n    labelSpacing: {\n      default: {},\n      spread: {\n        field: {w: 'full'},\n        row: {justifyContent: 'space-between', w: 'full'},\n      },\n    },\n    isSelected: {\n      true: {\n        track: {bg: 'primary'},\n        thumb: {transform: 'translateX(16px)'},\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        label: {color: 'fg.disabled', cursor: 'not-allowed'},\n        track: {opacity: 0.5},\n      },\n      false: {},\n    },\n    // Applied only when a status message is rendered (status?.type is defined).\n    status: {\n      warning: {status: {bg: 'surface.yellow', color: 'surface.yellow.fg'}},\n      error: {status: {bg: 'surface.red', color: 'surface.red.fg'}},\n      success: {status: {bg: 'surface.green', color: 'surface.green.fg'}},\n    },\n  },\n  defaultVariants: {\n    labelSpacing: 'default',\n    isSelected: false,\n    isDisabled: false,\n  },\n});\n\nexport type SwitchVariants = RecipeVariantProps<typeof switchRecipe>;\n","import {Info} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport type {FieldNecessity, InputStatus} from 'components/Field';\nimport {getDescribedBy, getStatusMessageID} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Spinner} from 'components/Spinner';\nimport {switchRecipe} from 'components/Switch/Switch.recipe';\nimport {Text} from 'components/Text';\nimport {Tooltip} from 'components/Tooltip';\nimport {VisuallyHidden} from 'internal/VisuallyHidden';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type SwitchLabelPosition = 'end' | 'start';\nexport type SwitchLabelSpacing = 'default' | 'spread';\n\nexport type SwitchProps = {\n  /**\n   * Additional CSS class names applied to the field root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the checkbox input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the switch is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the switch is on.\n   */\n  isSelected: boolean;\n  /**\n   * Switch label.\n   */\n  label: string;\n  /**\n   * Content rendered before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Which side of the switch the label appears on.\n   * @default 'end'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Spacing behavior between label and switch.\n   * @default 'default'\n   */\n  labelSpacing?: SwitchLabelSpacing;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the switch loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the checked state changes.\n   */\n  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the switch receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the checkbox input.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Validation status displayed below the switch.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the field root.\n   */\n  style?: CSSProperties;\n} & FieldNecessity;\n\n/**\n * A controlled switch for boolean settings.\n */\nexport function Switch({\n  className,\n  'data-testid': dataTestId,\n  description,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  labelPosition = 'end',\n  labelSpacing = 'default',\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  status,\n  style,\n  isSelected,\n}: SwitchProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID = isReactNode(description)\n    ? `${inputId}-description`\n    : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const requirednessText = isOptional\n    ? 'Optional'\n    : isRequired\n      ? 'Required'\n      : null;\n  const classes = switchRecipe({\n    labelSpacing,\n    isSelected,\n    isDisabled,\n    status: status?.type,\n  });\n  const control = (\n    <span className={classes.control}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        checked={isSelected}\n        className={classes.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.checked, event)}\n        onFocus={onFocus}\n        ref={ref}\n        required={isRequired}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={classes.track}\n        data-selected={isSelected ? 'true' : undefined}\n        data-switch-track=\"\">\n        <span className={classes.thumb}>\n          {isLoading ? <Spinner size=\"sm\" /> : null}\n        </span>\n      </span>\n      {isLoading ? (\n        <VisuallyHidden>\n          <span role=\"status\">Loading</span>\n        </VisuallyHidden>\n      ) : null}\n    </span>\n  );\n  const labelNode = (\n    <div className={classes.labelWrapper}>\n      <label className={classes.label} htmlFor={inputId}>\n        {labelIcon != null ? (\n          <span className={classes.labelIcon}>\n            <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <Text as=\"span\" color=\"inherit\" type=\"label\">\n          {label}\n        </Text>\n        {requirednessText != null ? (\n          <Text as=\"span\" className={classes.requiredness} type=\"supporting\">\n            <span aria-hidden=\"true\"> · </span>\n            {requirednessText}\n          </Text>\n        ) : null}\n        {isReactNode(labelTooltip) ? (\n          <Tooltip content={labelTooltip}>\n            <span className={classes.tooltipIcon}>\n              <Icon icon={Info} size=\"sm\" />\n            </span>\n          </Tooltip>\n        ) : null}\n      </label>\n      {isReactNode(description) ? (\n        <Text as=\"span\" color=\"secondary\" id={descriptionID} type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div className={cx(classes.field, className)} style={style}>\n      <div className={classes.row}>\n        {labelPosition === 'start' ? (\n          isLabelHidden ? (\n            <VisuallyHidden>{labelNode}</VisuallyHidden>\n          ) : (\n            labelNode\n          )\n        ) : (\n          control\n        )}\n        {labelPosition === 'start' ? (\n          control\n        ) : isLabelHidden ? (\n          <VisuallyHidden>{labelNode}</VisuallyHidden>\n        ) : (\n          labelNode\n        )}\n      </div>\n      {status?.message != null ? (\n        <div\n          aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n          className={classes.status}\n          id={statusMessageID}\n          role={status.type === 'error' ? 'alert' : 'status'}>\n          {status.message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}

package/dist/{chunk-U6NH54YD.js → chunk-MGJLBHPJ.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-THTVYP5V.js';
+import { useIsomorphicLayoutEffect } from './chunk-EBJPUXFQ.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-MGJLBHPJ.js.map
+//# sourceMappingURL=chunk-MGJLBHPJ.js.map