@persona/design-system 0.10.10 → 0.10.12

package/dist/components/FloatingToolbar/index.mjs

@@ -1,2 +1,2 @@
-import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-DLRaE0o7.mjs";
+import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-BA8Fqmrz.mjs";
 export { FloatingToolbar as default, ensureProtocol };

package/dist/components/FormControl/index.mjs

@@ -1,3 +1,3 @@
 import { n as useFormField } from "../../useFormField-pOVkb5BK.mjs";
-import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-BztNXLn6.mjs";
+import { a as FormLabel, i as FormInputContainer, n as ErrorText, o as HelperText, r as FormControl, s as WarningText, t as Container } from "../../FormControl-BoKGiWdQ.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

package/dist/components/FormField/index.d.mts

@@ -1,6 +1,6 @@
 import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-BW5uMzId.mjs";
-import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "../../inputFields-DpHeZiFX.mjs";
-import { t as CheckboxGroupField } from "../../CheckboxGroupField-Bpu2j6G2.mjs";
-import { t as ListBoxField } from "../../ListBoxField-DL6Zk8TU.mjs";
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "../../TableBoxField-Db0Vjo6Z.mjs";
+import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "../../inputFields-DnBb3NhK.mjs";
+import { t as CheckboxGroupField } from "../../CheckboxGroupField-XSVAmESI.mjs";
+import { t as ListBoxField } from "../../ListBoxField-CGvVWKyL.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "../../TableBoxField-z0GIFeQw.mjs";
 export { CheckboxField, CheckboxFieldProps, CheckboxGroupField, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, FormField, FormField as default, FormFieldBaseProps, FormFieldProps, ImplementsFormField, ListBoxField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

package/dist/components/FormField/index.mjs

@@ -1,2 +1,2 @@
-import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-Cf1VMvoa.mjs";
+import { a as CheckboxField, c as SegmentedControlField, d as TextField, f as ToggleField, i as CheckboxGroupField, l as SelectField, m as FormField, n as TableBoxField, o as ComboboxField, p as splitOutFormFieldProps, r as ListBoxField, s as RadioGroupField, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, u as TextAreaField } from "../../FormField-yYJFkJ6R.mjs";
 export { CheckboxField, CheckboxGroupField, ComboboxField, FormField, FormField as default, ListBoxField, RadioGroupField, SegmentedControlField, SelectField, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxField, TextAreaField, TextField, ToggleField, splitOutFormFieldProps };

package/dist/components/HoverCopyableField/index.mjs

@@ -1,2 +1,2 @@
-import { t as HoverCopyableField } from "../../HoverCopyableField-XHC_n9tp.mjs";
+import { t as HoverCopyableField } from "../../HoverCopyableField-X2XfKTTh.mjs";
 export { HoverCopyableField as default };

package/dist/components/ImageTile/index.mjs

@@ -2,14 +2,14 @@ import { a as styled, r as css } from "../../styledComponentsInterop-Cs5CCPRy.mj
 import { semanticColor, semanticTokens } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-D0vEReED.mjs";
 import "../../variables/transitions.mjs";
-import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
+import { a as Tooltip } from "../../Tooltip-CVBxc1yf.mjs";
 import { withAlpha } from "../../lib/color.mjs";
 import { focusOutline } from "../../mixins/focus.mjs";
 import { n as Stack } from "../../Stack-Bzom2BTR.mjs";
-import { t as IconButton } from "../../IconButton-DxHB2g80.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-c8XK2Lr4.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
-import { t as Checkbox } from "../../Checkbox-Dr4LMKHV.mjs";
+import { t as IconButton } from "../../IconButton-Bj1fry_K.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Ip75l4Th.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-BVVdBeN-.mjs";
+import { t as Checkbox } from "../../Checkbox-BAh-wF_F.mjs";
 import { useCallback, useState } from "react";
 import { Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -65,7 +65,7 @@ const Thumbnail = styled.img`
   object-fit: ${({ $objectFit }) => $objectFit};
   display: block;
   opacity: ${({ $visible }) => $visible ? 1 : 0};
-  transition: opacity ${"200ms"};
+  transition: opacity ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"};
 `;
 const ImageShimmer = styled(LoadingShimmer)`
   position: absolute;
@@ -120,7 +120,7 @@ const MetadataContainer = styled.div`
   padding: ${Spacing[3]};
   background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
   border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
-  transition: background-color ${"200ms"};
+  transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 `;
 const MetadataRow = styled.div`
   width: 100%;

package/dist/components/ImageTile/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../src/components/ImageTile/ImageThumbnail.tsx","../../../src/components/ImageTile/ImageTile.tsx"],"sourcesContent":["import { type Ref, useCallback, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { ImageIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst EMPTY_COPY = 'No available preview';\n\nexport interface ImageThumbnailProps {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. */\n  objectFit?: 'cover' | 'contain';\n}\n\ninterface ThumbnailStatus {\n  hasSrc: boolean;\n  hasError: boolean;\n  loaded: boolean;\n  isLoading: boolean;\n  showEmpty: boolean;\n  markResolved: (status: 'loaded' | 'error') => void;\n  handleImageRef: Ref<HTMLImageElement>;\n}\n\n/**\n * Tracks decode, error, and src changes for a thumbnail. ImageTile also reads\n * `isLoading` so its metadata row can shimmer in step with the image.\n */\nexport const useThumbnailStatus = (src: string | null): ThumbnailStatus => {\n  // Keyed by src so a new image starts loading without an effect that can\n  // reset state after a cached image has already decoded.\n  const [resolved, setResolved] = useState<{\n    src: string;\n    status: 'loaded' | 'error';\n  } | null>(null);\n\n  if (resolved && resolved.src !== src) {\n    setResolved(null);\n  }\n\n  const hasSrc = Boolean(src);\n  const loaded = resolved?.src === src && resolved.status === 'loaded';\n  const hasError = resolved?.src === src && resolved.status === 'error';\n\n  const markResolved = (status: 'loaded' | 'error') => {\n    if (!src) {\n      return;\n    }\n    setResolved((current) =>\n      current?.src === src && current.status === status ? current : { src, status },\n    );\n  };\n\n  const handleImageRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      // A cached image can finish before React attaches onLoad, which leaves\n      // the tile shimmering forever. Adopt an already-decoded image here.\n      if (!node || !src || !node.complete || node.naturalWidth === 0) {\n        return;\n      }\n      setResolved((current) =>\n        current?.src === src && current.status === 'loaded' ? current : { src, status: 'loaded' },\n      );\n    },\n    [src],\n  );\n\n  return {\n    hasSrc,\n    hasError,\n    loaded,\n    isLoading: hasSrc && !loaded && !hasError,\n    showEmpty: !hasSrc || hasError,\n    markResolved,\n    handleImageRef,\n  };\n};\n\nconst ImageContainer = styled.div`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 200 / 144;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  overflow: hidden;\n`;\n\nconst Thumbnail = styled.img<{ $visible: boolean; $objectFit: 'cover' | 'contain' }>`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: ${({ $objectFit }) => $objectFit};\n  display: block;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: opacity ${TransitionDuration.Fast};\n`;\n\nconst ImageShimmer = styled(LoadingShimmer)`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst EmptyState = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${Spacing[1]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  padding: ${Spacing[3]};\n  text-align: center;\n`;\n\nexport const ThumbnailFrame = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  status,\n}: ImageThumbnailProps & { status: ThumbnailStatus }) => {\n  const { hasSrc, hasError, loaded, isLoading, showEmpty, markResolved, handleImageRef } = status;\n\n  return (\n    <ImageContainer>\n      {hasSrc && !hasError && (\n        <Thumbnail\n          ref={handleImageRef}\n          $visible={loaded}\n          $objectFit={objectFit}\n          src={src ?? undefined}\n          alt={alt}\n          onLoad={() => markResolved('loaded')}\n          onError={() => markResolved('error')}\n        />\n      )}\n      {isLoading && <ImageShimmer />}\n      {showEmpty && (\n        <EmptyState>\n          <ImageIcon size={24} aria-hidden />\n          <Paragraph size='sm' color='secondary' as='span'>\n            {EMPTY_COPY}\n          </Paragraph>\n        </EmptyState>\n      )}\n    </ImageContainer>\n  );\n};\n\n/** Image area used by ImageTile. Not a card chrome. */\nexport const ImageThumbnail = ({ src, alt = '', objectFit = 'cover' }: ImageThumbnailProps) => {\n  const status = useThumbnailStatus(src);\n  return <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={status} />;\n};\n","import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { TransitionDuration } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { LockedIcon, MoreIcon } from '@persona/icons';\n\nimport { withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport type { TextAction } from '#src/types/Action';\n\nimport { ThumbnailFrame, useThumbnailStatus } from './ImageThumbnail';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst DEFAULT_SELECTION_LABEL = 'Select image';\n\nexport interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. Also seeds the default checkbox label. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. Defaults to `cover`. */\n  objectFit?: 'cover' | 'contain';\n\n  /** Enables the selection checkbox (top-left). */\n  selectable?: boolean;\n  /** Controlled checked state for the selection checkbox. */\n  selected?: boolean;\n  /** Called with the new checked value when the checkbox is toggled. */\n  onSelectedChange?: (selected: boolean) => void;\n  /** Accessible label for the checkbox. Defaults to \"Select {alt}\" or \"Select image\". */\n  selectionLabel?: string;\n\n  /**\n   * Action menu items rendered behind a 3-dot IconButton in the top-right.\n   * Ignored when `locked` is true. Pass an empty array (or omit) to hide the menu.\n   */\n  actions?: TextAction[];\n  /**\n   * Replaces the action menu with a non-interactive lock icon. Indicates the\n   * viewer does not have permission to edit. `actions` are ignored.\n   */\n  locked?: boolean;\n  /** Tooltip string shown when hovering the lock icon. */\n  lockedTooltip?: string;\n\n  /**\n   * Metadata rows rendered beneath the thumbnail. Each entry becomes a\n   * full-width, left-aligned row in a vertical Stack. Block content fills the\n   * row; inline content (e.g. a Sticker) hugs the left. The region is omitted\n   * entirely — including while the image is loading — when the array is empty\n   * or undefined, so the tile is only the image.\n   */\n  metadata?: ReactNode[];\n\n  /** Optional click handler for the whole tile. When provided, the tile is keyboard-activatable. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nconst MetadataContainer = styled.div`\n  padding: ${Spacing[3]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  transition: background-color ${TransitionDuration.Fast};\n`;\n\nconst MetadataRow = styled.div`\n  width: 100%;\n  // Without these Stickers get bottom aligned\n  display: flex;\n  align-items: flex-start;\n`;\n\nconst SelectionOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  left: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst ActionsOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst LockedOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n`;\n\nconst Root = styled.div<{ $clickable: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: ${MIN_WIDTH};\n  max-width: ${MAX_WIDTH};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  box-sizing: border-box;\n  overflow: hidden;\n  ${focusOutline};\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover ${MetadataContainer} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }};\n  }\n`;\n\nconst stopPropagation = (e: MouseEvent) => {\n  e.stopPropagation();\n};\n\nexport const ImageTile = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  selectable = false,\n  selected = false,\n  onSelectedChange,\n  selectionLabel,\n  actions,\n  locked = false,\n  lockedTooltip,\n  metadata,\n  onClick,\n  ...props\n}: ImageTileProps) => {\n  const thumbnail = useThumbnailStatus(src);\n  const { isLoading } = thumbnail;\n\n  const visibleActions = actions?.filter((action) => !action.hidden) ?? [];\n  const renderActions = !locked && visibleActions.length > 0;\n  const clickable = Boolean(onClick);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick) {\n      return;\n    }\n    // Only activate when the key event originates from the tile root itself.\n    // Interactive descendants (selection checkbox, action buttons) must keep\n    // their own native Space/Enter behavior.\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.currentTarget.click();\n    }\n  };\n\n  const accessibleSelectionLabel =\n    selectionLabel ?? (alt ? `Select ${alt}` : DEFAULT_SELECTION_LABEL);\n\n  const hasMetadata = (metadata?.length ?? 0) > 0;\n\n  return (\n    <Root\n      $clickable={clickable}\n      onClick={onClick}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      {...props}\n    >\n      <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={thumbnail} />\n\n      {selectable && (\n        <SelectionOverlay onClick={stopPropagation}>\n          <Checkbox\n            size='sm'\n            checked={selected}\n            onChange={(e) => onSelectedChange?.(e.target.checked)}\n            aria-label={accessibleSelectionLabel}\n          />\n        </SelectionOverlay>\n      )}\n\n      {renderActions && (\n        <ActionsOverlay onClick={stopPropagation}>\n          <DropdownMenu\n            portal\n            trigger={\n              <IconButton size='sm' aria-label='More actions'>\n                <MoreIcon />\n              </IconButton>\n            }\n          >\n            {visibleActions.map((action, idx) => (\n              <DropdownMenu.Item\n                key={action.id ?? `${action.label}-${idx}`}\n                prefixIcon={action.prefixIcon}\n                suffixIcon={action.suffixIcon}\n                disabled={action.disabled}\n                variant={action.variant === 'danger' ? 'danger' : 'basic'}\n                onClick={(e) => {\n                  if (action.disabled) {\n                    return;\n                  }\n                  return action.onClick?.(e);\n                }}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu>\n        </ActionsOverlay>\n      )}\n\n      {locked && (\n        <LockedOverlay onClick={stopPropagation}>\n          {lockedTooltip ? (\n            <Tooltip iconTrigger={<LockedIcon size={16} />} aria-label={lockedTooltip}>\n              {lockedTooltip}\n            </Tooltip>\n          ) : (\n            <LockedIcon size={16} aria-label='Locked' />\n          )}\n        </LockedOverlay>\n      )}\n\n      {hasMetadata && (\n        <MetadataContainer>\n          {isLoading ? (\n            <LoadingShimmer width='60%' height='14px' />\n          ) : (\n            <Stack spacing={Spacing[2]}>\n              {metadata?.map((row, idx) => (\n                <MetadataRow key={idx}>{row}</MetadataRow>\n              ))}\n            </Stack>\n          )}\n        </MetadataContainer>\n      )}\n    </Root>\n  );\n};\n\nexport default ImageTile;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../src/components/ImageTile/ImageThumbnail.tsx","../../../src/components/ImageTile/ImageTile.tsx"],"sourcesContent":["import { type Ref, useCallback, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { TransitionDuration, TransitionEasing } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { ImageIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst EMPTY_COPY = 'No available preview';\n\nexport interface ImageThumbnailProps {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. */\n  objectFit?: 'cover' | 'contain';\n}\n\ninterface ThumbnailStatus {\n  hasSrc: boolean;\n  hasError: boolean;\n  loaded: boolean;\n  isLoading: boolean;\n  showEmpty: boolean;\n  markResolved: (status: 'loaded' | 'error') => void;\n  handleImageRef: Ref<HTMLImageElement>;\n}\n\n/**\n * Tracks decode, error, and src changes for a thumbnail. ImageTile also reads\n * `isLoading` so its metadata row can shimmer in step with the image.\n */\nexport const useThumbnailStatus = (src: string | null): ThumbnailStatus => {\n  // Keyed by src so a new image starts loading without an effect that can\n  // reset state after a cached image has already decoded.\n  const [resolved, setResolved] = useState<{\n    src: string;\n    status: 'loaded' | 'error';\n  } | null>(null);\n\n  if (resolved && resolved.src !== src) {\n    setResolved(null);\n  }\n\n  const hasSrc = Boolean(src);\n  const loaded = resolved?.src === src && resolved.status === 'loaded';\n  const hasError = resolved?.src === src && resolved.status === 'error';\n\n  const markResolved = (status: 'loaded' | 'error') => {\n    if (!src) {\n      return;\n    }\n    setResolved((current) =>\n      current?.src === src && current.status === status ? current : { src, status },\n    );\n  };\n\n  const handleImageRef = useCallback(\n    (node: HTMLImageElement | null) => {\n      // A cached image can finish before React attaches onLoad, which leaves\n      // the tile shimmering forever. Adopt an already-decoded image here.\n      if (!node || !src || !node.complete || node.naturalWidth === 0) {\n        return;\n      }\n      setResolved((current) =>\n        current?.src === src && current.status === 'loaded' ? current : { src, status: 'loaded' },\n      );\n    },\n    [src],\n  );\n\n  return {\n    hasSrc,\n    hasError,\n    loaded,\n    isLoading: hasSrc && !loaded && !hasError,\n    showEmpty: !hasSrc || hasError,\n    markResolved,\n    handleImageRef,\n  };\n};\n\nconst ImageContainer = styled.div`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 200 / 144;\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n  overflow: hidden;\n`;\n\nconst Thumbnail = styled.img<{ $visible: boolean; $objectFit: 'cover' | 'contain' }>`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: ${({ $objectFit }) => $objectFit};\n  display: block;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  transition: opacity ${TransitionDuration.Fast} ${TransitionEasing.Enter};\n`;\n\nconst ImageShimmer = styled(LoadingShimmer)`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst EmptyState = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${Spacing[1]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n  padding: ${Spacing[3]};\n  text-align: center;\n`;\n\nexport const ThumbnailFrame = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  status,\n}: ImageThumbnailProps & { status: ThumbnailStatus }) => {\n  const { hasSrc, hasError, loaded, isLoading, showEmpty, markResolved, handleImageRef } = status;\n\n  return (\n    <ImageContainer>\n      {hasSrc && !hasError && (\n        <Thumbnail\n          ref={handleImageRef}\n          $visible={loaded}\n          $objectFit={objectFit}\n          src={src ?? undefined}\n          alt={alt}\n          onLoad={() => markResolved('loaded')}\n          onError={() => markResolved('error')}\n        />\n      )}\n      {isLoading && <ImageShimmer />}\n      {showEmpty && (\n        <EmptyState>\n          <ImageIcon size={24} aria-hidden />\n          <Paragraph size='sm' color='secondary' as='span'>\n            {EMPTY_COPY}\n          </Paragraph>\n        </EmptyState>\n      )}\n    </ImageContainer>\n  );\n};\n\n/** Image area used by ImageTile. Not a card chrome. */\nexport const ImageThumbnail = ({ src, alt = '', objectFit = 'cover' }: ImageThumbnailProps) => {\n  const status = useThumbnailStatus(src);\n  return <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={status} />;\n};\n","import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport DropdownMenu from '@persona/design-system/components/DropdownMenu';\nimport { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack from '@persona/design-system/components/Stack';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { TransitionDuration, TransitionEasing } from '@persona/design-system/variables/transitions';\nimport { Spacing } from '@persona/design-tokens';\nimport { LockedIcon, MoreIcon } from '@persona/icons';\n\nimport { withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport type { TextAction } from '#src/types/Action';\n\nimport { ThumbnailFrame, useThumbnailStatus } from './ImageThumbnail';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst DEFAULT_SELECTION_LABEL = 'Select image';\n\nexport interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** URL of the thumbnail. While loading shows shimmer; on error shows the empty fallback. */\n  src: string | null;\n  /** Alt text for the thumbnail. Also seeds the default checkbox label. */\n  alt?: string;\n  /** How the thumbnail fills its area. `cover` crops overflow; `contain` letterboxes to fit. Defaults to `cover`. */\n  objectFit?: 'cover' | 'contain';\n\n  /** Enables the selection checkbox (top-left). */\n  selectable?: boolean;\n  /** Controlled checked state for the selection checkbox. */\n  selected?: boolean;\n  /** Called with the new checked value when the checkbox is toggled. */\n  onSelectedChange?: (selected: boolean) => void;\n  /** Accessible label for the checkbox. Defaults to \"Select {alt}\" or \"Select image\". */\n  selectionLabel?: string;\n\n  /**\n   * Action menu items rendered behind a 3-dot IconButton in the top-right.\n   * Ignored when `locked` is true. Pass an empty array (or omit) to hide the menu.\n   */\n  actions?: TextAction[];\n  /**\n   * Replaces the action menu with a non-interactive lock icon. Indicates the\n   * viewer does not have permission to edit. `actions` are ignored.\n   */\n  locked?: boolean;\n  /** Tooltip string shown when hovering the lock icon. */\n  lockedTooltip?: string;\n\n  /**\n   * Metadata rows rendered beneath the thumbnail. Each entry becomes a\n   * full-width, left-aligned row in a vertical Stack. Block content fills the\n   * row; inline content (e.g. a Sticker) hugs the left. The region is omitted\n   * entirely — including while the image is loading — when the array is empty\n   * or undefined, so the tile is only the image.\n   */\n  metadata?: ReactNode[];\n\n  /** Optional click handler for the whole tile. When provided, the tile is keyboard-activatable. */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n}\n\nconst MetadataContainer = styled.div`\n  padding: ${Spacing[3]};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  transition: background-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n`;\n\nconst MetadataRow = styled.div`\n  width: 100%;\n  // Without these Stickers get bottom aligned\n  display: flex;\n  align-items: flex-start;\n`;\n\nconst SelectionOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  left: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst ActionsOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n`;\n\nconst LockedOverlay = styled.div`\n  position: absolute;\n  top: ${OVERLAY_INSET};\n  right: ${OVERLAY_INSET};\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.secondary)};\n`;\n\nconst Root = styled.div<{ $clickable: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: ${MIN_WIDTH};\n  max-width: ${MAX_WIDTH};\n  background-color: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', theme.color.background.primary)};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', theme.color.border.primary)};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  box-sizing: border-box;\n  overflow: hidden;\n  ${focusOutline};\n\n  ${({ $clickable }) =>\n    $clickable &&\n    css`\n      cursor: pointer;\n    `}\n\n  &:hover ${MetadataContainer} {\n    background-color: ${({ theme }) => {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }};\n  }\n`;\n\nconst stopPropagation = (e: MouseEvent) => {\n  e.stopPropagation();\n};\n\nexport const ImageTile = ({\n  src,\n  alt = '',\n  objectFit = 'cover',\n  selectable = false,\n  selected = false,\n  onSelectedChange,\n  selectionLabel,\n  actions,\n  locked = false,\n  lockedTooltip,\n  metadata,\n  onClick,\n  ...props\n}: ImageTileProps) => {\n  const thumbnail = useThumbnailStatus(src);\n  const { isLoading } = thumbnail;\n\n  const visibleActions = actions?.filter((action) => !action.hidden) ?? [];\n  const renderActions = !locked && visibleActions.length > 0;\n  const clickable = Boolean(onClick);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (!onClick) {\n      return;\n    }\n    // Only activate when the key event originates from the tile root itself.\n    // Interactive descendants (selection checkbox, action buttons) must keep\n    // their own native Space/Enter behavior.\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.currentTarget.click();\n    }\n  };\n\n  const accessibleSelectionLabel =\n    selectionLabel ?? (alt ? `Select ${alt}` : DEFAULT_SELECTION_LABEL);\n\n  const hasMetadata = (metadata?.length ?? 0) > 0;\n\n  return (\n    <Root\n      $clickable={clickable}\n      onClick={onClick}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      {...props}\n    >\n      <ThumbnailFrame src={src} alt={alt} objectFit={objectFit} status={thumbnail} />\n\n      {selectable && (\n        <SelectionOverlay onClick={stopPropagation}>\n          <Checkbox\n            size='sm'\n            checked={selected}\n            onChange={(e) => onSelectedChange?.(e.target.checked)}\n            aria-label={accessibleSelectionLabel}\n          />\n        </SelectionOverlay>\n      )}\n\n      {renderActions && (\n        <ActionsOverlay onClick={stopPropagation}>\n          <DropdownMenu\n            portal\n            trigger={\n              <IconButton size='sm' aria-label='More actions'>\n                <MoreIcon />\n              </IconButton>\n            }\n          >\n            {visibleActions.map((action, idx) => (\n              <DropdownMenu.Item\n                key={action.id ?? `${action.label}-${idx}`}\n                prefixIcon={action.prefixIcon}\n                suffixIcon={action.suffixIcon}\n                disabled={action.disabled}\n                variant={action.variant === 'danger' ? 'danger' : 'basic'}\n                onClick={(e) => {\n                  if (action.disabled) {\n                    return;\n                  }\n                  return action.onClick?.(e);\n                }}\n              >\n                {action.label}\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu>\n        </ActionsOverlay>\n      )}\n\n      {locked && (\n        <LockedOverlay onClick={stopPropagation}>\n          {lockedTooltip ? (\n            <Tooltip iconTrigger={<LockedIcon size={16} />} aria-label={lockedTooltip}>\n              {lockedTooltip}\n            </Tooltip>\n          ) : (\n            <LockedIcon size={16} aria-label='Locked' />\n          )}\n        </LockedOverlay>\n      )}\n\n      {hasMetadata && (\n        <MetadataContainer>\n          {isLoading ? (\n            <LoadingShimmer width='60%' height='14px' />\n          ) : (\n            <Stack spacing={Spacing[2]}>\n              {metadata?.map((row, idx) => (\n                <MetadataRow key={idx}>{row}</MetadataRow>\n              ))}\n            </Stack>\n          )}\n        </MetadataContainer>\n      )}\n    </Root>\n  );\n};\n\nexport default ImageTile;\n"],"mappings":"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"}

package/dist/components/Input/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-RHXujO9u.mjs";
+import { n as Input, r as InputGroup, t as ClearButton } from "../../Input-DcbzPaax.mjs";
 //#region src/components/Input/index.ts
 var Input_default = Input;
 //#endregion

package/dist/components/Link/index.mjs

@@ -1,2 +1,2 @@
-import { t as Link } from "../../Link-D_kCyLYX.mjs";
+import { t as Link } from "../../Link-B29ZMN6m.mjs";
 export { Link, Link as default };

package/dist/components/ListBox/index.d.mts

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-DpFcM-dM.mjs";
-import { n as LogicRowProps } from "../../LogicRow-BakOUtzx.mjs";
-import { t as ListBox } from "../../index-OkdnW-u5.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-ZDaitaXR.mjs";
+import { n as LogicRowProps } from "../../LogicRow-Bzp5o1sL.mjs";
+import { t as ListBox } from "../../index-B4tE0RxY.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

package/dist/components/ListBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as useListBoxContext, t as ListBox } from "../../ListBox-BZp6exb8.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-4rTgr3IJ.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

package/dist/components/LoadingShimmer/index.mjs

@@ -1,2 +1,2 @@
-import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-BVVdBeN-.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

@@ -1,4 +1,4 @@
-import { n as Input } from "../../Input-RHXujO9u.mjs";
+import { n as Input } from "../../Input-DcbzPaax.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { IMaskMixin } from "react-imask";

package/dist/components/Menu/index.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-D6OrKCTC.mjs";
+import { a as MenuDivider, c as MenuItem, d as MenuList, f as MenuProps, i as Menu, l as MenuItemProps, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuHeadingProps, t as FloatingCard, u as MenuItemType } from "../../Menu-DviYNrFd.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Modal/index.mjs

@@ -1,2 +1,2 @@
-import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-De5_bPJ_.mjs";
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-CiPFqr0L.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };

package/dist/components/PageHeader/index.mjs

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-7_Hf6rHl.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-6KvtGED-.mjs";
 export { PageHeaderContainer, PageHeader as default };

package/dist/components/Pagination/index.mjs

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-DMH2IaV0.mjs";
+import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-CqFvnlXc.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.mjs

@@ -1,2 +1,2 @@
-import { t as Pii_default } from "../../Pii-24D_nSRQ.mjs";
+import { t as Pii_default } from "../../Pii-jSYND7Cn.mjs";
 export { Pii_default as default };

package/dist/components/Popover/index.mjs

@@ -1,2 +1,2 @@
-import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-DordjYNM.mjs";
+import { a as PopoverPortal, i as PopoverContent, n as PopoverCard, o as PopoverTrigger, r as PopoverClose, s as Popover_default, t as PopoverAnchor } from "../../Popover-CVX-dfYb.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/ProgressBar/index.mjs

@@ -1,7 +1,8 @@
 import { a as styled, i as keyframes } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { a as Tooltip } from "../../Tooltip-YViXzMdm.mjs";
+import "../../variables/transitions.mjs";
+import { a as Tooltip } from "../../Tooltip-CVBxc1yf.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react-aria";
@@ -55,7 +56,13 @@ const Fill = styled.div`
   width: ${({ $percent }) => `${$percent}%`};
   background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};
   border-radius: ${({ $hasSuccessBefore }) => $hasSuccessBefore ? "0 4px 4px 0" : "4px"};
-  transition: width 0.3s ease, left 0.3s ease;
+  transition:
+    width ${"300ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"},
+    left ${"300ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 `;
 const SuccessFill = styled.div`
   position: absolute;
@@ -65,7 +72,11 @@ const SuccessFill = styled.div`
   width: ${({ $percent }) => `${$percent}%`};
   background-color: ${({ theme }) => statusFill(theme, "success")};
   border-radius: ${({ $hasInProgressAfter }) => $hasInProgressAfter ? "4px 0 0 4px" : "4px"};
-  transition: width 0.3s ease;
+  transition: width ${"300ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 `;
 const IndeterminateFill = styled.div`
   position: absolute;
@@ -74,6 +85,12 @@ const IndeterminateFill = styled.div`
   background-color: ${({ theme }) => semanticColor(theme, "FeedbackNeutral5", Color.BorderIconPrimary)};
   border-radius: 4px;
   animation: ${indeterminateScan} 2.5s ease-in-out infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    left: 30%;
+    width: 40%;
+  }
 `;
 const SuffixRow = styled.div`
   display: flex;

package/dist/components/ProgressBar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx","../../../src/components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\n\nimport { type MaybeSemanticTheme, semanticColor } from '#src/lib/semanticColor';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusFill(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx","../../../src/components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\n\nimport { type MaybeSemanticTheme, semanticColor } from '#src/lib/semanticColor';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition:\n    width ${TransitionDuration.MediumFast} ${TransitionEasing.Move},\n    left ${TransitionDuration.MediumFast} ${TransitionEasing.Move};\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width ${TransitionDuration.MediumFast} ${TransitionEasing.Move};\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n    left: 30%;\n    width: 40%;\n  }\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusFill(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/Radio/index.mjs

@@ -1,2 +1,2 @@
-import { t as Radio } from "../../Radio-BlEtetrr.mjs";
+import { t as Radio } from "../../Radio-B1H_S-Qj.mjs";
 export { Radio, Radio as default };

package/dist/components/RadioGroup/index.mjs

@@ -1,2 +1,2 @@
-import { t as RadioGroup } from "../../RadioGroup-CMrXmmn4.mjs";
+import { t as RadioGroup } from "../../RadioGroup-7hdcVhsp.mjs";
 export { RadioGroup, RadioGroup as default };

package/dist/components/RichTextEditor/index.mjs

@@ -8,12 +8,12 @@ import { Z_INDICES } from "../../lib/zindex.mjs";
 import { focusWithinOutline } from "../../mixins/focus.mjs";
 import "../../variables/effect.mjs";
 import { t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-DxHB2g80.mjs";
+import { n as Button } from "../../IconButton-Bj1fry_K.mjs";
 import { t as intersperse } from "../../intersperse-DvJsBw5D.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-c8XK2Lr4.mjs";
-import { s as Popover_default } from "../../Popover-DordjYNM.mjs";
-import { d as TextField } from "../../FormField-Cf1VMvoa.mjs";
-import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-DLRaE0o7.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Ip75l4Th.mjs";
+import { s as Popover_default } from "../../Popover-CVX-dfYb.mjs";
+import { d as TextField } from "../../FormField-yYJFkJ6R.mjs";
+import { n as ensureProtocol, t as FloatingToolbar } from "../../FloatingToolbar-BA8Fqmrz.mjs";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/RightPanel/index.mjs

@@ -1,10 +1,11 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { i as Paragraph } from "../../Text-D0vEReED.mjs";
+import { ReducedMotionFade, TransitionEasingCurve } from "../../variables/transitions.mjs";
 import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { t as IconButton } from "../../IconButton-DxHB2g80.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-oPIv2ESr.mjs";
+import { t as IconButton } from "../../IconButton-Bj1fry_K.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-BVVdBeN-.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -69,12 +70,13 @@ const Handle = styled.div`
     left: 0;
     width: 2px;
     background-color: transparent;
-    transition: background-color 0.15s ease-in;
-    transition-delay: 0.025s;
+    transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   }
 
   &:hover::after,
   &${`.${DRAGGING_CLASSNAME}`}::after {
+    /* Filters out a pointer passing over the handle; the hover-out has no delay. */
+    transition-delay: 25ms;
     background-color: ${({ theme }) => semanticColor(theme, "BorderFocus", theme.color.border.active)};
   }
 `;
@@ -152,6 +154,10 @@ const RightPanelResizeHandle = ({ onMove, onMoveTo, onMoveStart, onMoveEnd, onDo
 //#region src/components/RightPanel/RightPanel.tsx
 const OPEN_DURATION = .4;
 const CLOSE_DURATION = .3;
+const REDUCED_FADE = {
+	duration: ReducedMotionFade.durationInSeconds,
+	ease: TransitionEasingCurve.Move
+};
 const DEFAULT_MIN_WIDTH = 450;
 const MAX_WIDTH_RATIO = .5;
 const BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;
@@ -225,24 +231,33 @@ const RightPanel = ({ id, open = false, onOpenChange, title, description, childr
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(PanelOuter, {
 		initial: {
 			width: prefersReducedMotion ? effectiveWidth : 0,
-			minWidth: prefersReducedMotion ? effectiveWidth : 0
+			minWidth: prefersReducedMotion ? effectiveWidth : 0,
+			opacity: prefersReducedMotion ? 0 : 1
 		},
 		animate: {
 			width: effectiveWidth,
 			minWidth: effectiveWidth,
-			transition: {
-				duration: prefersReducedMotion ? 0 : OPEN_DURATION,
-				ease: "circOut",
-				width: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 },
-				minWidth: shouldAnimateWidth && !prefersReducedMotion ? void 0 : { duration: 0 }
+			opacity: 1,
+			transition: prefersReducedMotion ? {
+				...REDUCED_FADE,
+				width: { duration: 0 },
+				minWidth: { duration: 0 }
+			} : {
+				duration: OPEN_DURATION,
+				ease: TransitionEasingCurve.Enter,
+				width: shouldAnimateWidth ? void 0 : { duration: 0 },
+				minWidth: shouldAnimateWidth ? void 0 : { duration: 0 }
 			}
 		},
-		exit: {
+		exit: prefersReducedMotion ? {
+			opacity: 0,
+			transition: REDUCED_FADE
+		} : {
 			width: 0,
 			minWidth: 0,
 			transition: {
-				duration: prefersReducedMotion ? 0 : CLOSE_DURATION,
-				ease: "circOut"
+				duration: CLOSE_DURATION,
+				ease: TransitionEasingCurve.Exit
 			}
 		},
 		children: /* @__PURE__ */ jsxs(PanelInner, {

package/dist/components/RightPanel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/RightPanel/RightPanelLoadingContent.tsx","../../../src/components/RightPanel/RightPanelResizeHandle.tsx","../../../src/components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color 0.15s ease-in;\n    transition-delay: 0.025s;\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = 0.4;\nconst CLOSE_DURATION = 0.3;\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            transition: {\n              duration: prefersReducedMotion ? 0 : OPEN_DURATION,\n              ease: 'circOut',\n              width: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n              minWidth: shouldAnimateWidth && !prefersReducedMotion ? undefined : { duration: 0 },\n            },\n          }}\n          exit={{\n            width: 0,\n            minWidth: 0,\n            transition: {\n              duration: prefersReducedMotion ? 0 : CLOSE_DURATION,\n              ease: 'circOut',\n            },\n          }}\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/RightPanel/RightPanelLoadingContent.tsx","../../../src/components/RightPanel/RightPanelResizeHandle.tsx","../../../src/components/RightPanel/RightPanel.tsx"],"sourcesContent":["import { LoadingShimmer } from '@persona/design-system/components/LoadingShimmer';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\n\nconst RightPanelLoadingContent = () => (\n  <Stack spacing={Spacing[5]} aria-label='Loading panel content'>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='30%' height='16px' />\n      <LoadingShimmer width='100%' height='40px' />\n    </Stack>\n    <Stack spacing={Spacing[2]}>\n      <LoadingShimmer width='35%' height='16px' />\n      <LoadingShimmer width='100%' height='200px' />\n    </Stack>\n    <HStack justify='flex-end'>\n      <LoadingShimmer width='80px' height='32px' />\n    </HStack>\n  </Stack>\n);\n\nexport default RightPanelLoadingContent;\n","import { type FC, type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react';\nimport { mergeProps, useMove } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { TransitionDuration, TransitionEasing } from '#src/variables/transitions';\n\nconst DRAGGING_CLASSNAME = 'dragging';\nconst KEYBOARD_RESIZE_STEP = 10;\nconst KEYBOARD_RESIZE_STEP_LARGE = 40;\n\nexport interface RightPanelResizeHandleProps {\n  onMove: (deltaX: number) => void;\n  onMoveTo?: (clientX: number) => void;\n  onMoveStart?: () => void;\n  onMoveEnd?: () => void;\n  onDoubleClick?: () => void;\n}\n\nconst Handle = styled.div`\n  touch-action: none;\n  cursor: col-resize;\n  position: absolute;\n  z-index: 1;\n  width: ${Spacing[2]};\n  top: 0;\n  bottom: 0;\n  left: 0;\n  height: 100%;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    width: 2px;\n    background-color: transparent;\n    transition: background-color ${TransitionDuration.Fast} ${TransitionEasing.Move};\n  }\n\n  &:hover::after,\n  &${`.${DRAGGING_CLASSNAME}`}::after {\n    /* Filters out a pointer passing over the handle; the hover-out has no delay. */\n    transition-delay: 25ms;\n    background-color: ${({ theme }) => semanticColor(theme, 'BorderFocus', theme.color.border.active)};\n  }\n`;\n\nconst RightPanelResizeHandle: FC<RightPanelResizeHandleProps> = ({\n  onMove,\n  onMoveTo,\n  onMoveStart,\n  onMoveEnd,\n  onDoubleClick,\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const isDraggingRef = useRef(false);\n  const capturedPointerIdRef = useRef<number | null>(null);\n  const onMoveEndRef = useRef(onMoveEnd);\n  onMoveEndRef.current = onMoveEnd;\n\n  const { moveProps } = useMove({\n    onMoveStart(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = true;\n        setIsDragging(true);\n      }\n      onMoveStart?.();\n    },\n    onMove(e) {\n      if (e.pointerType !== 'keyboard') {\n        return;\n      }\n      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;\n      onMove(e.deltaX * step);\n    },\n    onMoveEnd(e) {\n      if (e.pointerType !== 'keyboard') {\n        isDraggingRef.current = false;\n        setIsDragging(false);\n        capturedPointerIdRef.current = null;\n      }\n      onMoveEnd?.();\n    },\n  });\n\n  useEffect(() => {\n    return () => {\n      if (isDraggingRef.current) {\n        onMoveEndRef.current?.();\n      }\n    };\n  }, []);\n\n  return (\n    <Handle\n      {...mergeProps(moveProps, {\n        onDoubleClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            onDoubleClick?.();\n            e.preventDefault();\n          }\n        },\n        onLostPointerCapture: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          capturedPointerIdRef.current = null;\n          window.dispatchEvent(\n            new PointerEvent('pointerup', {\n              bubbles: true,\n              pointerId: e.pointerId,\n              pointerType: e.pointerType || 'mouse',\n            }),\n          );\n        },\n        onPointerDown: (e: PointerEvent<HTMLDivElement>) => {\n          if (e.button !== 0 || capturedPointerIdRef.current != null) {\n            return;\n          }\n          capturedPointerIdRef.current = e.pointerId;\n          try {\n            e.currentTarget.setPointerCapture(e.pointerId);\n          } catch {\n            // Pointer capture unsupported.\n          }\n        },\n        onPointerMove: (e: PointerEvent<HTMLDivElement>) => {\n          if (capturedPointerIdRef.current !== e.pointerId) {\n            return;\n          }\n          onMoveTo?.(e.clientX);\n        },\n      })}\n      aria-label='Resize right panel'\n      aria-orientation='vertical'\n      role='separator'\n      tabIndex={0}\n      className={isDragging ? DRAGGING_CLASSNAME : undefined}\n    />\n  );\n};\n\nexport default RightPanelResizeHandle;\n","import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';\nimport {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { IconButton } from '@persona/design-system/components/Button';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport { semanticColor } from '#src/lib/semanticColor';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\nimport {\n  ReducedMotionFade,\n  TransitionDurationInSeconds,\n  TransitionEasingCurve,\n} from '#src/variables/transitions';\n\nimport RightPanelLoadingContent from './RightPanelLoadingContent';\nimport RightPanelResizeHandle from './RightPanelResizeHandle';\n\nconst OPEN_DURATION = TransitionDurationInSeconds.Medium;\nconst CLOSE_DURATION = TransitionDurationInSeconds.MediumFast;\n// Under reduced motion the width jumps and the panel fades instead.\nconst REDUCED_FADE = {\n  duration: ReducedMotionFade.durationInSeconds,\n  ease: TransitionEasingCurve.Move,\n};\nconst DEFAULT_MIN_WIDTH = 450;\nconst MAX_WIDTH_RATIO = 0.5;\n// Reserves scroll-area space so form submit buttons don't collide with the\n// floating Copilot button (anchored at bottom: Spacing[5], 48px hit target).\nconst BODY_BOTTOM_PADDING = `calc(${Spacing[5]} + 48px + ${Spacing[5]})`;\n\nconst PanelOuter = styled(motion.div)`\n  flex-shrink: 0;\n  height: 100%;\n  overflow: hidden;\n`;\n\nconst PanelInner = styled.div<{ $width: number; $useMinWidth: boolean }>`\n  position: relative;\n  ${({ $width, $useMinWidth }) => ($useMinWidth ? `min-width: ${$width}px;` : '')}\n  height: 100%;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  background: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.BackgroundPrimary)};\n  border-left: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst PanelHeader = styled.div`\n  padding: ${Spacing[4]};\n  border-bottom: 1px solid ${({ theme }) =>\n    semanticColor(theme, 'BorderSubtle', theme.color.border.primary)};\n  flex-shrink: 0;\n`;\n\nconst PanelBody = styled.div`\n  flex: 1;\n  overflow-y: auto;\n  ${semanticScrollbar}\n  padding: ${Spacing[4]};\n  padding-bottom: ${BODY_BOTTOM_PADDING};\n`;\n\nexport interface RightPanelProps {\n  /** Controlled open state */\n  open?: boolean;\n  /** Panel id */\n  id?: string;\n  /** Called when open state changes */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Panel title rendered in header */\n  title: string;\n  /** Optional description below title */\n  description?: string;\n  /** Panel content */\n  children: ReactNode;\n  /** Panel width in pixels */\n  width?: number;\n  /** Minimum width when resizable. Defaults to 450px. */\n  minWidth?: number;\n  /** When true, the panel is drag-resizable via its left edge. */\n  resizable?: boolean;\n  /** When true, render a shimmer placeholder in the body instead of children. */\n  loading?: boolean;\n}\n\nconst RightPanel = ({\n  id,\n  open = false,\n  onOpenChange,\n  title,\n  description,\n  children,\n  width = DEFAULT_MIN_WIDTH,\n  minWidth = DEFAULT_MIN_WIDTH,\n  resizable = false,\n  loading = false,\n}: RightPanelProps) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previousActiveElementRef = useRef<HTMLElement | null>(null);\n  const prefersReducedMotion = useReducedMotion();\n\n  const defaultWidth = resizable ? Math.max(minWidth, width) : width;\n  const [currentWidth, setCurrentWidth] = useState(defaultWidth);\n  const [shouldAnimateWidth, setShouldAnimateWidth] = useState(true);\n\n  const effectiveWidth = resizable ? currentWidth : width;\n\n  const handleClose = useCallback(() => {\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  useEffect(() => {\n    if (open) {\n      previousActiveElementRef.current = document.activeElement as HTMLElement | null;\n      panelRef.current?.focus();\n    } else if (\n      previousActiveElementRef.current &&\n      document.contains(previousActiveElementRef.current)\n    ) {\n      previousActiveElementRef.current.focus();\n      previousActiveElementRef.current = null;\n    }\n  }, [open]);\n\n  const clampWidth = useCallback(\n    (nextWidth: number) =>\n      Math.min(MAX_WIDTH_RATIO * window.innerWidth, Math.max(minWidth, nextWidth)),\n    [minWidth],\n  );\n\n  const handleMove = useCallback(\n    (deltaX: number) => {\n      setCurrentWidth((current) => clampWidth(current - deltaX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveTo = useCallback(\n    (clientX: number) => {\n      const rightEdge = panelRef.current?.getBoundingClientRect().right ?? window.innerWidth;\n      setCurrentWidth(clampWidth(rightEdge - clientX));\n    },\n    [clampWidth],\n  );\n\n  const handleMoveStart = useCallback(() => {\n    setShouldAnimateWidth(false);\n  }, []);\n\n  const handleMoveEnd = useCallback(() => {\n    setShouldAnimateWidth(true);\n  }, []);\n\n  const handleDoubleClick = useCallback(() => {\n    setShouldAnimateWidth(true);\n    setCurrentWidth(defaultWidth);\n  }, [defaultWidth]);\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PanelOuter\n          initial={{\n            width: prefersReducedMotion ? effectiveWidth : 0,\n            minWidth: prefersReducedMotion ? effectiveWidth : 0,\n            opacity: prefersReducedMotion ? 0 : 1,\n          }}\n          animate={{\n            width: effectiveWidth,\n            minWidth: effectiveWidth,\n            opacity: 1,\n            transition: prefersReducedMotion\n              ? { ...REDUCED_FADE, width: { duration: 0 }, minWidth: { duration: 0 } }\n              : {\n                  duration: OPEN_DURATION,\n                  ease: TransitionEasingCurve.Enter,\n                  width: shouldAnimateWidth ? undefined : { duration: 0 },\n                  minWidth: shouldAnimateWidth ? undefined : { duration: 0 },\n                },\n          }}\n          exit={\n            prefersReducedMotion\n              ? { opacity: 0, transition: REDUCED_FADE }\n              : {\n                  width: 0,\n                  minWidth: 0,\n                  transition: { duration: CLOSE_DURATION, ease: TransitionEasingCurve.Exit },\n                }\n          }\n        >\n          <PanelInner\n            ref={panelRef}\n            id={id}\n            $width={effectiveWidth}\n            $useMinWidth={shouldAnimateWidth}\n            role='complementary'\n            aria-label={title}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n          >\n            {resizable && (\n              <RightPanelResizeHandle\n                onMove={handleMove}\n                onMoveTo={handleMoveTo}\n                onMoveStart={handleMoveStart}\n                onMoveEnd={handleMoveEnd}\n                onDoubleClick={handleDoubleClick}\n              />\n            )}\n            <PanelHeader>\n              <Stack spacing={Spacing[2]}>\n                <HStack justify='space-between' align='center' spacing={Spacing[2]}>\n                  <Paragraph as='h3' size='lg' weight='bold' color='primary'>\n                    {title}\n                  </Paragraph>\n                  <IconButton size='md' aria-label='Close' onClick={handleClose}>\n                    <XIcon />\n                  </IconButton>\n                </HStack>\n                {description && (\n                  <Paragraph size='md' color='secondary'>\n                    {description}\n                  </Paragraph>\n                )}\n              </Stack>\n            </PanelHeader>\n            <PanelBody>{loading ? <RightPanelLoadingContent /> : children}</PanelBody>\n          </PanelInner>\n        </PanelOuter>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport { RightPanel };\nexport default RightPanel;\n"],"mappings":"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"}

package/dist/components/SegmentedControl/index.mjs

@@ -1,2 +1,2 @@
-import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-D_DA-MU1.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BNOJ1FYQ.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

package/dist/components/Select/index.d.mts

@@ -1,2 +1,2 @@
-import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-CR9TjFfo.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-DsVeAyZy.mjs";
 export { Option, Select, Select as default, SelectHeader, SelectProps };

package/dist/components/Select/index.mjs

@@ -1,2 +1,2 @@
-import { n as Select, r as SelectHeader, t as Option } from "../../Select-DOlw_LPR.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-DbWEgH5c.mjs";
 export { Option, Select, Select as default, SelectHeader };