@persona/design-system 0.5.0 → 0.5.1

package/dist/components/DataTable/types.d.mts

@@ -1,5 +1,5 @@
-import { o as StickerProps } from "../../Sticker-Ep6N4Exq.mjs";
-import { l as MenuItemProps } from "../../Menu-BCVhmNEe.mjs";
+import { l as MenuItemProps } from "../../Menu-_loh8pe3.mjs";
+import { o as StickerProps } from "../../Sticker-qvWkqEMw.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 

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

@@ -1,5 +1,5 @@
-import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-Bs9JODNg.mjs";
-import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-BT6-j8V7.mjs";
-import { t as DateField } from "../../DateField-tOyrGcx1.mjs";
-import { t as Calendar } from "../../Calendar-DjnoZVcT.mjs";
+import { n as DatePickerProps, t as DatePicker } from "../../DatePicker-BZ4_I4Db.mjs";
+import { i as DateRangePickerProps, n as DateRange, r as DateRangePicker, t as DateFilterChange } from "../../DateRangePicker-BMKJquPT.mjs";
+import { t as DateField } from "../../DateField-CBCo8_d3.mjs";
+import { t as Calendar } from "../../Calendar-_gM6U5ET.mjs";
 export { Calendar, DateField, DateFilterChange, DatePicker, DatePicker as default, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps };

package/dist/components/DatePicker/index.mjs

@@ -1,2 +1,2 @@
-import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-D2SfjS-N.mjs";
+import { i as Calendar, n as DatePicker, r as DateField, t as DateRangePicker } from "../../DatePicker-DTT-mJ8r.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker };

package/dist/components/DropdownButton/index.mjs

@@ -1,2 +1,2 @@
-import { t as DropdownButton } from "../../DropdownButton-dpGAmVlN.mjs";
+import { t as DropdownButton } from "../../DropdownButton-DV5if_uG.mjs";
 export { DropdownButton, DropdownButton as default };

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

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-RTxQ0Zu1.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "../../DropdownMenu-CbhEzWy1.mjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

package/dist/components/DropdownMenu/index.mjs

@@ -1,2 +1,2 @@
-import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-CyxizDxJ.mjs";
+import { n as DropdownMenu_default, t as DropdownMenu } from "../../DropdownMenu-DovtBJBs.mjs";
 export { DropdownMenu, DropdownMenu_default as default };

package/dist/components/FloatingPanel/index.mjs

@@ -1,10 +1,10 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import "../../variables/effect.mjs";
-import { paragraphMixins } from "../../mixins/text.mjs";
 import ConfigContext from "../../lib/ConfigContext.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { n as Stack } from "../../Stack-Bre2oiov.mjs";
-import { t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
+import "../../variables/effect.mjs";
+import { n as Stack } from "../../Stack-BqQndGI9.mjs";
+import { t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,3 +1,3 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-BMYRsFkI.mjs";
-import { r as useFormField } from "../../useFormField-Bo7oHMof.mjs";
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "../../FormControl-gpLZZpNs.mjs";
+import { r as useFormField } from "../../useFormField--_14te0K.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText, useFormField };

package/dist/components/FormControl/index.mjs

@@ -1,3 +1,3 @@
 import { n as useFormField } from "../../useFormField-C-K1lgmv.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-DQFefbrI.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-BvRzRknE.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormInputContainer, FormLabel, HelperText, WarningText, useFormField };

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

@@ -1,4 +1,4 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-C1DaUT5U.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "../../FormField-CZXKvCGt.mjs";
 import { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps } from "../../inputFields.mjs";
 import CheckboxGroupField from "../../CheckboxGroupField.mjs";
 import ListBoxField from "../../ListBoxField.mjs";

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-C7bW-O6H.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-BDJ6zNE6.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/Grid/index.mjs

@@ -1,4 +1,4 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/HoverCopyableField/index.mjs

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

package/dist/components/ImageTile/index.mjs

@@ -1,13 +1,14 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { focusOutline } from "../../mixins/focus.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
+import { i as Paragraph } from "../../Text-Dn_p7ZvT.mjs";
 import "../../variables/transitions.mjs";
-import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
-import { a as Tooltip } from "../../Tooltip-DSKGD33G.mjs";
-import { n as Stack } from "../../Stack-Bre2oiov.mjs";
-import { t as IconButton } from "../../IconButton-BnSEV7eR.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-CyxizDxJ.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-a2Hv0kAq.mjs";
-import { t as Checkbox } from "../../Checkbox-DwZEsi7x.mjs";
+import { a as Tooltip } from "../../Tooltip-BsuYG0fw.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
+import { n as Stack } from "../../Stack-BqQndGI9.mjs";
+import { t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-DovtBJBs.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-DeVCDCjT.mjs";
+import { t as Checkbox } from "../../Checkbox-CyeitZ5q.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ const DEFAULT_SELECTION_LABEL = "Select image";
 const ImageContainer = styled.div`
   position: relative;
   aspect-ratio: 200 / 144;
-  background-color: ${({ theme }) => theme.color.background.secondary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
   overflow: hidden;
 `;
 const Thumbnail = styled.img`
@@ -49,14 +50,14 @@ const EmptyState = styled.div`
   align-items: center;
   justify-content: center;
   gap: ${Spacing[1]};
-  color: ${Color.BorderIconDisabled};
+  color: ${({ theme }) => semanticColor(theme, "FgDisabled", Color.BorderIconDisabled)};
   padding: ${Spacing[3]};
   text-align: center;
 `;
 const MetadataContainer = styled.div`
   padding: ${Spacing[3]};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  border-top: 1px solid ${({ theme }) => theme.color.border.primary};
+  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"};
 `;
 const MetadataRow = styled.div`
@@ -85,7 +86,7 @@ const LockedOverlay = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme }) => theme.color.text.secondary};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 `;
 const Root = styled.div`
   position: relative;
@@ -94,8 +95,8 @@ const Root = styled.div`
   width: 100%;
   min-width: ${MIN_WIDTH};
   max-width: ${MAX_WIDTH};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  border: 1px solid ${({ theme }) => theme.color.border.primary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
+  border: 1px solid ${({ theme }) => semanticColor(theme, "BorderDivider", theme.color.border.primary)};
   border-radius: ${({ theme }) => theme.card.borderRadius};
   box-sizing: border-box;
   overflow: hidden;
@@ -106,7 +107,7 @@ const Root = styled.div`
     `}
 
   &:hover ${MetadataContainer} {
-    background-color: ${({ theme }) => theme.color.background.highlight};
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceAccent", theme.color.background.highlight)};
   }
 `;
 const stopPropagation = (e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DropdownMenu"],"sources":["../../../components/ImageTile/ImageTile.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useState,\n} 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 { Paragraph } from '@persona/design-system/components/Text';\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 { Color, Spacing } from '@persona/design-tokens';\nimport { ImageIcon, LockedIcon, MoreIcon } from '@persona/icons';\nimport type { TextAction } from 'design-system/types/Action';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst EMPTY_COPY = 'No available preview';\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. Region is omitted when\n   * the array is empty or undefined.\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 ImageContainer = styled.div`\n  position: relative;\n  aspect-ratio: 200 / 144;\n  background-color: ${({ theme }) => 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: ${Color.BorderIconDisabled};\n  padding: ${Spacing[3]};\n  text-align: center;\n`;\n\nconst MetadataContainer = styled.div`\n  padding: ${Spacing[3]};\n  background-color: ${({ theme }) => theme.color.background.primary};\n  border-top: 1px solid ${({ theme }) => 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 }) => 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 }) => theme.color.background.primary};\n  border: 1px solid ${({ theme }) => 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 }) => theme.color.background.highlight};\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 [loaded, setLoaded] = useState(false);\n  const [hasError, setHasError] = useState(false);\n\n  useEffect(() => {\n    setLoaded(false);\n    setHasError(false);\n  }, [src]);\n\n  const hasSrc = Boolean(src);\n  const isLoading = hasSrc && !loaded && !hasError;\n  const showEmpty = !hasSrc || hasError;\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  const renderMetadata = hasMetadata || isLoading;\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      <ImageContainer>\n        {hasSrc && !hasError && (\n          <Thumbnail\n            $visible={loaded}\n            $objectFit={objectFit}\n            src={src ?? undefined}\n            alt={alt}\n            onLoad={() => setLoaded(true)}\n            onError={() => setHasError(true)}\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\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      </ImageContainer>\n\n      {renderMetadata && (\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":["../../../components/ImageTile/ImageTile.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useState,\n} 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 { Paragraph } from '@persona/design-system/components/Text';\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 { Color, Spacing } from '@persona/design-tokens';\nimport { ImageIcon, LockedIcon, MoreIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport type { TextAction } from 'design-system/types/Action';\n\nconst MIN_WIDTH = '180px';\nconst MAX_WIDTH = '420px';\nconst OVERLAY_INSET = Spacing[2];\nconst EMPTY_COPY = 'No available preview';\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. Region is omitted when\n   * the array is empty or undefined.\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 ImageContainer = styled.div`\n  position: relative;\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, 'FgDisabled', Color.BorderIconDisabled)};\n  padding: ${Spacing[3]};\n  text-align: center;\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 }) => semanticColor(theme, 'SurfaceAccent', theme.color.background.highlight)};\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 [loaded, setLoaded] = useState(false);\n  const [hasError, setHasError] = useState(false);\n\n  useEffect(() => {\n    setLoaded(false);\n    setHasError(false);\n  }, [src]);\n\n  const hasSrc = Boolean(src);\n  const isLoading = hasSrc && !loaded && !hasError;\n  const showEmpty = !hasSrc || hasError;\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  const renderMetadata = hasMetadata || isLoading;\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      <ImageContainer>\n        {hasSrc && !hasError && (\n          <Thumbnail\n            $visible={loaded}\n            $objectFit={objectFit}\n            src={src ?? undefined}\n            alt={alt}\n            onLoad={() => setLoaded(true)}\n            onError={() => setHasError(true)}\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\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      </ImageContainer>\n\n      {renderMetadata && (\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.d.mts

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-1bDdMAgO.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-Diztxhle.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/components/Input/index.mjs

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

package/dist/components/Link/index.mjs

@@ -1,7 +1,8 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { focusOutline } from "../../mixins/focus.mjs";
-import "../../variables/transitions.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
+import "../../variables/transitions.mjs";
+import { focusOutline } from "../../mixins/focus.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { LinkExternalIcon } from "@persona/icons";
@@ -20,7 +21,7 @@ const IconContainer = styled.span`
 `;
 const baseLinkStyles = css`
   ${paragraphMixins.md};
-  color: ${Color.CorePurple600};
+  color: ${({ theme }) => semanticColor(theme, "FgAccent", Color.CorePurple600)};
   width: fit-content;
   position: relative;
   overflow: hidden;
@@ -32,8 +33,7 @@ const baseLinkStyles = css`
   text-underline-offset: 2px;
 
   &:hover {
-    /* TODO (ivan): move to semantic tokens */
-    color: ${Color.CorePurple800};
+    color: ${({ theme }) => semanticColor(theme, "FgAccentHover", Color.CorePurple800)};
     text-underline-offset: ${Spacing[1]};
   }
 
@@ -41,8 +41,7 @@ const baseLinkStyles = css`
   ${focusOutline}
 
   &:active {
-    /* TODO (ivan): move to semantic tokens */
-    color: ${Color.CorePurple900};
+    color: ${({ theme }) => semanticColor(theme, "FgAccentActive", Color.CorePurple900)};
   }
 `;
 const StyledAnchor = styled.a`

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["RouterLink"],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport { Link as RouterLink, type LinkProps as RouterLinkProps } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps extends BaseLinkProps, Omit<RouterLinkProps, 'to'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${Color.CorePurple600};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple800};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    /* TODO (ivan): move to semantic tokens */\n    color: ${Color.CorePurple900};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  // Internal link using React Router\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;AA8CA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;WACZ,MAAM,cAAc;;;;;;;oBAOU;oCACgB;;;;;aAK5C,MAAM,cAAc;6BACJ,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;;aAIJ,MAAM,cAAc;;;AAIjC,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAOA,OAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAKnB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}
+{"version":3,"file":"index.mjs","names":["RouterLink"],"sources":["../../../components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\nimport { Link as RouterLink, type LinkProps as RouterLinkProps } from 'react-router-dom';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LinkExternalIcon } from '@persona/icons';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusOutline } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\ninterface BaseLinkProps {\n  /**\n   * The content to display inside the link.\n   *\n   */\n  children?: ReactNode;\n  /**\n   * Provides an accessible name for the link when the visible text alone\n   * isn't descriptive enough for screen reader users\n   */\n  'aria-label'?: string;\n}\n\ninterface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The URL to navigate to. Can be internal (e.g., \"/settings\") or external (e.g., \"https://example.com\").\n   */\n  url: string;\n\n  /**\n   * Where to open the link. Use \"_blank\" for external links to open in a new tab.\n   */\n  target?: Target;\n}\n\ninterface InternalLinkProps extends BaseLinkProps, Omit<RouterLinkProps, 'to'> {\n  /**\n   * The URL to navigate to. Should be an internal route (e.g., \"/settings\").\n   */\n  url: string;\n}\n\nexport type LinkProps = ExternalLinkProps | InternalLinkProps;\n\nconst IconContainer = styled.span`\n  display: inline-block;\n  vertical-align: middle;\n  /* Uses padding here since we can't define flex on the element for multiline support */\n  padding-left: 2px;\n  /* Needed to reset the height of the container for SVG */\n  line-height: 0;\n  position: relative;\n  /* Optical alignment adjustments */\n  bottom: 1px;\n`;\n\nconst baseLinkStyles = css`\n  ${paragraphMixins.md};\n  color: ${({ theme }) => semanticColor(theme, 'FgAccent', Color.CorePurple600)};\n  width: fit-content;\n  position: relative;\n  overflow: hidden;\n  text-decoration: underline;\n\n  transition:\n    color ${TransitionDuration.ExtraFast} ease-out,\n    text-underline-offset ${TransitionDuration.ExtraFast} ease-out;\n  text-underline-offset: 2px;\n\n  &:hover {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentHover', Color.CorePurple800)};\n    text-underline-offset: ${Spacing[1]};\n  }\n\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n  ${focusOutline}\n\n  &:active {\n    color: ${({ theme }) => semanticColor(theme, 'FgAccentActive', Color.CorePurple900)};\n  }\n`;\n\nconst StyledAnchor = styled.a`\n  ${baseLinkStyles}\n`;\n\nconst StyledRouterLink = styled(RouterLink)`\n  ${baseLinkStyles}\n`;\n\nexport const Link = ({ children, url, ...props }: LinkProps) => {\n  // Check if the URL is external by looking at the protocol or if target is _blank\n  const isAbsoluteUrl = /^https?:\\/\\//.test(url);\n  const hasBlankTarget = props.target === '_blank';\n  const isExternal = isAbsoluteUrl || hasBlankTarget;\n\n  if (isExternal) {\n    const { 'aria-label': ariaLabel, ...anchorProps } = props;\n    const externalProps = {\n      href: url,\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      'aria-label': ariaLabel,\n      // Automatically inform screen readers that link opens in new window\n      title: ariaLabel ? undefined : 'Opens in new window',\n      ...anchorProps,\n    };\n\n    return (\n      <StyledAnchor {...externalProps}>\n        {children}\n        <IconContainer>\n          <LinkExternalIcon size={12} />\n        </IconContainer>\n      </StyledAnchor>\n    );\n  }\n\n  // Internal link using React Router\n  const { 'aria-label': ariaLabel, ...routerProps } = props;\n  const internalProps = {\n    to: url,\n    'aria-label': ariaLabel,\n\n    ...routerProps,\n  };\n\n  return <StyledRouterLink {...internalProps}>{children}</StyledRouterLink>;\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;;AA+CA,MAAM,gBAAgB,OAAO,IAAI;;;;;;;;;;;AAYjC,MAAM,iBAAiB,GAAG;IACtB,gBAAgB,GAAG;YACX,EAAE,YAAY,cAAc,OAAO,YAAY,MAAM,cAAc,CAAC;;;;;;;oBAOvC;oCACgB;;;;cAI3C,EAAE,YAAY,cAAc,OAAO,iBAAiB,MAAM,cAAc,CAAC;6BAC1D,QAAQ,GAAG;;;oBAGpB,EAAE,YAAY,MAAM,OAAO,aAAa;IACxD,aAAa;;;cAGH,EAAE,YAAY,cAAc,OAAO,kBAAkB,MAAM,cAAc,CAAC;;;AAIxF,MAAM,eAAe,OAAO,CAAC;IACzB,eAAe;;AAGnB,MAAM,mBAAmB,OAAOA,OAAW;IACvC,eAAe;;AAGnB,MAAa,QAAQ,EAAE,UAAU,KAAK,GAAG,YAAuB;CAE9D,MAAM,gBAAgB,eAAe,KAAK,IAAI;CAC9C,MAAM,iBAAiB,MAAM,WAAW;AAGxC,KAFmB,iBAAiB,gBAEpB;EACd,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAWpD,SACE,qBAAC,cAAD;GAVA,MAAM;GACN,QAAQ;GACR,KAAK;GACL,cAAc;GAEd,OAAO,YAAY,KAAA,IAAY;GAC/B,GAAG;aAIH,CACG,UACD,oBAAC,eAAD,EAAA,UACE,oBAAC,kBAAD,EAAkB,MAAM,IAAM,CAAA,EAChB,CAAA,CACH;;;CAKnB,MAAM,EAAE,cAAc,WAAW,GAAG,gBAAgB;AAQpD,QAAO,oBAAC,kBAAD;EANL,IAAI;EACJ,cAAc;EAEd,GAAG;EAGwC;EAA4B,CAAA"}

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-DeFHRX2T.mjs";
-import { n as LogicRowProps } from "../../LogicRow-BOhB0uNS.mjs";
-import { t as ListBox } from "../../index-I_Cy3X5R.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-P1eTecdo.mjs";
+import { n as LogicRowProps } from "../../LogicRow-DtZYOzQ8.mjs";
+import { t as ListBox } from "../../index-BJr_obTf.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-jzXQDraS.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-CXh9Jfb-.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-a2Hv0kAq.mjs";
+import { i as MaybeLoadingShimmer, n as LoadingShimmerHeading, r as LoadingShimmerParagraph, t as LoadingShimmer } from "../../LoadingShimmer-DeVCDCjT.mjs";
 export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerParagraph, MaybeLoadingShimmer };

package/dist/components/MaskedInput/index.mjs

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

package/dist/components/MatchHighlight/index.mjs

@@ -1,4 +1,5 @@
-import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
 import { Spacing } from "@persona/design-tokens";
 //#region components/MatchHighlight/MatchHighlight.tsx
 const MatchHighlight = styled.span`
@@ -11,12 +12,13 @@ const MatchHighlight = styled.span`
   /* Allow background colors to be dictated by the matchStrength. */
   background-color: ${({ matchStrength, theme }) => {
 	switch (matchStrength) {
-		case "none": return theme.color.background.disabled;
-		case "partial": return theme.color.variants.success.highlightLight;
-		case "full": return theme.color.variants.success.highlightDark;
+		case "none": return semanticColor(theme, "FeedbackNeutral2Static", theme.color.background.disabled);
+		case "partial": return semanticColor(theme, "FeedbackWarning2", theme.color.variants.success.highlightLight);
+		case "full": return semanticColor(theme, "FeedbackSuccess2", theme.color.variants.success.highlightDark);
 		default: return "none";
 	}
 }};
+  ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}
 `;
 //#endregion
 export { MatchHighlight, MatchHighlight as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return theme.color.background.disabled;\n      case 'partial':\n        return theme.color.variants.success.highlightLight;\n      case 'full':\n        return theme.color.variants.success.highlightDark;\n\n      default:\n        return 'none';\n    }\n  }};\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;AASA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,MAAM,MAAM,WAAW;EAChC,KAAK,UACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EACtC,KAAK,OACH,QAAO,MAAM,MAAM,SAAS,QAAQ;EAEtC,QACE,QAAO;;EAEX"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\n\nexport interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {\n  matchStrength?: 'none' | 'partial' | 'full';\n}\n\nexport const MatchHighlight = styled.span<MatchHighlightProps>`\n  /* Sizing and Borders */\n  width: fit-content;\n  padding-left: ${Spacing[1]};\n  padding-right: ${Spacing[1]};\n  border-radius: ${Spacing[1]};\n\n  /* Allow background colors to be dictated by the matchStrength. */\n  background-color: ${({ matchStrength, theme }) => {\n    switch (matchStrength) {\n      case 'none':\n        return semanticColor(theme, 'FeedbackNeutral2Static', theme.color.background.disabled);\n      case 'partial':\n        return semanticColor(\n          theme,\n          'FeedbackWarning2',\n          theme.color.variants.success.highlightLight,\n        );\n      case 'full':\n        return semanticColor(theme, 'FeedbackSuccess2', theme.color.variants.success.highlightDark);\n\n      default:\n        return 'none';\n    }\n  }};\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimaryStatic};`)}\n`;\n\nexport default MatchHighlight;\n"],"mappings":";;;;AAUA,MAAa,iBAAiB,OAAO,IAAyB;;;kBAG5C,QAAQ,GAAG;mBACV,QAAQ,GAAG;mBACX,QAAQ,GAAG;;;uBAGP,EAAE,eAAe,YAAY;AAChD,SAAQ,eAAR;EACE,KAAK,OACH,QAAO,cAAc,OAAO,0BAA0B,MAAM,MAAM,WAAW,SAAS;EACxF,KAAK,UACH,QAAO,cACL,OACA,oBACA,MAAM,MAAM,SAAS,QAAQ,eAC9B;EACH,KAAK,OACH,QAAO,cAAc,OAAO,oBAAoB,MAAM,MAAM,SAAS,QAAQ,cAAc;EAE7F,QACE,QAAO;;EAEX;IACA,cAAc,WAAW,UAAU,OAAO,gBAAgB,GAAG,CAAC"}

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-BCVhmNEe.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-_loh8pe3.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

package/dist/components/Menu/index.mjs

@@ -1,2 +1,2 @@
-import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-DVI8l-4Q.mjs";
+import { a as MenuDivider, c as MenuList, i as Menu, n as IconContainer, o as MenuHeading, r as ListItem, s as MenuItem, t as FloatingCard } from "../../Menu-CAGTCBqj.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuItem, MenuList };

package/dist/components/Modal/index.mjs

@@ -1,10 +1,11 @@
-import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { t as Card_default } from "../../Card-CKrJtn1f.mjs";
-import { n as Heading$1 } from "../../Text-B0orb-cZ.mjs";
+import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
+import { t as Card_default } from "../../Card-vQIPtdXi.mjs";
+import { n as Heading$1 } from "../../Text-Dn_p7ZvT.mjs";
 import useEmbeddedSurface, { useEmbeddedSurfaceGate, useEmbeddedSurfaceId } from "../../lib/useEmbeddedSurface.mjs";
-import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
-import { n as Button$1 } from "../../IconButton-BnSEV7eR.mjs";
-import { i as TabBar, r as Tab } from "../../TabBar-CWF65Tv4.mjs";
+import { n as Stack, t as HStack } from "../../Stack-BqQndGI9.mjs";
+import { n as Button$1 } from "../../IconButton-CnJNIJVQ.mjs";
+import { i as TabBar, r as Tab } from "../../TabBar-B__54oO3.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Pressable } from "react-aria-components";
@@ -111,6 +112,7 @@ const StyledModal = styled(Modal)`
   outline: none;
   width: fit-content;
   max-width: 100%;
+  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}
 `;
 /**
 * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from
@@ -149,7 +151,7 @@ const ModalFooter = styled(HStack).attrs({
 	spacing: Spacing[2]
 })`
   padding: ${Spacing[3]} ${Spacing[4]};
-  border-top: 1px solid ${Color.BorderDivider};
+  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
 `;
 const ModalHeaderTitle = styled.div`
   flex: 1;
@@ -183,7 +185,7 @@ const ModalTitle = ({ children, ...props }) => {
 	});
 };
 const ModalHeader = styled(HStack)`
-  border-bottom: ${({ $hasTabs }) => $hasTabs ? "none" : `1px solid ${Color.BorderDivider}`};
+  border-bottom: ${({ $hasTabs, theme }) => $hasTabs ? "none" : `1px solid ${semanticColor(theme, "BorderSubtle", Color.BorderDivider)}`};
   padding: ${({ $hasTabs }) => $hasTabs ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}` : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};
 `;
 const ModalTabBar = styled(TabBar)`

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import type { ComponentProps, ComponentPropsWithoutRef } from 'react';\nimport { forwardRef, type ReactNode, useContext, useEffect, useState } from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${Color.BorderDivider};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs }) => ($hasTabs ? 'none' : `1px solid ${Color.BorderDivider}`)};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label='Close' />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["AriaModal","Button","AriaButton","Heading","AriaHeading","Card","Modal"],"sources":["../../../lib/useModalInsetRight.ts","../../../components/Modal/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst CSS_VAR = '--modal-inset-right';\n\n// Match AgentsPanel sidebar transition durations\nexport const SIDEBAR_OPEN_TRANSITION_MS = 425;\nexport const SIDEBAR_CLOSE_TRANSITION_MS = 200;\n\nconst getModalInsetRight = () =>\n  getComputedStyle(document.documentElement).getPropertyValue(CSS_VAR).trim() || '0px';\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nexport type PanelInsetState = 'closed' | 'opening' | 'open' | 'closing';\n\nexport interface ModalInsetRight {\n  /** Animated inset value — starts at 0px on panel open so CSS transition fires */\n  insetRight: string;\n  panelState: PanelInsetState;\n}\n\n/**\n * Returns the current value of --modal-inset-right from :root, reactively updating\n * as the agents side panel animates open/closed or is resized. Also tracks whether\n * the panel is opening, open, closing, or closed.\n *\n * panelState stays 'opening'/'closing' for the full transition duration so that\n * CSS transitions on consumers have time to animate.\n */\nconst useModalInsetRight = (): ModalInsetRight => {\n  const [insetRight, setInsetRight] = useState(getModalInsetRight);\n  const [panelState, setPanelState] = useState<PanelInsetState>(() =>\n    getModalInsetRight() !== '0px' ? 'open' : 'closed',\n  );\n  const prevInsetRight = useRef(getModalInsetRight());\n  const transitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      const prev = prevInsetRight.current;\n      const next = getModalInsetRight();\n      prevInsetRight.current = next;\n\n      if (prev === '0px' && next !== '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight(next);\n          setPanelState('open');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight('0px');\n          setPanelState('opening');\n          rafRef.current = requestAnimationFrame(() => setInsetRight(next));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('open'),\n            SIDEBAR_OPEN_TRANSITION_MS,\n          );\n        }\n      } else if (prev !== '0px' && next === '0px') {\n        if (prefersReducedMotion()) {\n          setInsetRight('0px');\n          setPanelState('closed');\n        } else {\n          if (rafRef.current) {\n            cancelAnimationFrame(rafRef.current);\n          }\n          if (transitionTimerRef.current) {\n            clearTimeout(transitionTimerRef.current);\n          }\n          setInsetRight(prev);\n          setPanelState('closing');\n          rafRef.current = requestAnimationFrame(() => setInsetRight('0px'));\n          transitionTimerRef.current = setTimeout(\n            () => setPanelState('closed'),\n            SIDEBAR_CLOSE_TRANSITION_MS,\n          );\n        }\n      } else {\n        setInsetRight(next);\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['style'],\n    });\n\n    return () => {\n      observer.disconnect();\n      if (transitionTimerRef.current) {\n        clearTimeout(transitionTimerRef.current);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  return { insetRight, panelState };\n};\n\nexport default useModalInsetRight;\n","import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Button as AriaButton,\n  Dialog,\n  DialogTrigger,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay,\n  type ModalOverlayProps,\n  OverlayTriggerStateContext,\n  Pressable,\n} from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport Button, { type ButtonProps } from '@persona/design-system/components/Button';\nimport Card from '@persona/design-system/components/Card';\nimport Stack, { HStack } from '@persona/design-system/components/Stack';\nimport TabBar, { Tab } from '@persona/design-system/components/TabBar';\nimport { Heading } from '@persona/design-system/components/Text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport useEmbeddedSurface, {\n  useEmbeddedSurfaceGate,\n  useEmbeddedSurfaceId,\n} from 'design-system/lib/useEmbeddedSurface';\nimport useModalInsetRight, {\n  SIDEBAR_CLOSE_TRANSITION_MS,\n  SIDEBAR_OPEN_TRANSITION_MS,\n} from 'design-system/lib/useModalInsetRight';\n\nconst StyledModalOverlay = styled(ModalOverlay)<{\n  $hostPending: boolean;\n  $animationDelayMs: number;\n  $insetRight: string;\n  $transitionMs: number;\n}>`\n  @keyframes overlayShow {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  background-color: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: ${({ $insetRight }) => $insetRight};\n  transition: right ${({ $transitionMs }) => $transitionMs}ms ease-out;\n  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  animation-delay: ${({ $animationDelayMs }) => $animationDelayMs}ms;\n  animation-fill-mode: both;\n  ${({ $hostPending }) =>\n    $hostPending &&\n    `\n    animation-play-state: paused;\n  `}\n  @media (prefers-reduced-motion: reduce) {\n    animation-duration: 0ms;\n    animation-delay: 0ms;\n    animation-play-state: running;\n  }\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst StyledModal = styled(AriaModal)`\n  z-index: 10001;\n  outline: none;\n  width: fit-content;\n  max-width: 100%;\n  ${semanticOnly((tokens) => `color: ${tokens.FgPrimary};`)}\n`;\n\n/**\n * React Aria keeps the overlay mounted through the exit animation, so announcing the surface from\n * here — rather than from the persistent gate below — releases the host's backdrop exactly when the\n * modal stops being painted.\n */\nconst EmbeddedSurfaceModal = forwardRef<HTMLDivElement, { children: ReactNode; surfaceId: string }>(\n  function EmbeddedSurfaceModal({ children, surfaceId }, ref) {\n    useEmbeddedSurface(surfaceId);\n    return <StyledModal ref={ref}>{children}</StyledModal>;\n  },\n);\n\ntype EmbeddedSurfaceOverlayProps = ModalOverlayProps & {\n  $insetRight: string;\n  $transitionMs: number;\n  surfaceId: string;\n};\n\nconst EmbeddedSurfaceOverlay = ({ surfaceId, ...props }: EmbeddedSurfaceOverlayProps) => {\n  const state = useContext(OverlayTriggerStateContext);\n  const isOpen = state?.isOpen ?? false;\n  const { ready, animationDelayMs } = useEmbeddedSurfaceGate(surfaceId, isOpen);\n\n  const { $insetRight, $transitionMs, ...overlayProps } = props;\n  return (\n    <StyledModalOverlay\n      {...overlayProps}\n      $insetRight={$insetRight}\n      $transitionMs={$transitionMs}\n      $animationDelayMs={animationDelayMs}\n      $hostPending={isOpen && !ready}\n    />\n  );\n};\n\nconst ModalCloseButton = styled(Button)`\n  display: inline-flex;\n  padding: ${Spacing[2]};\n  border-radius: ${Spacing[1]};\n  width: fit-content;\n  min-width: unset;\n`;\n\nconst ModalFooter = styled(HStack).attrs({\n  justify: 'flex-end',\n  align: 'center',\n  spacing: Spacing[2],\n})`\n  padding: ${Spacing[3]} ${Spacing[4]};\n  border-top: 1px solid ${({ theme }) => semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n`;\n\nconst ModalHeaderTitle = styled.div`\n  flex: 1;\n`;\n\nexport const ModalTrigger = DialogTrigger;\nexport const ModalContent = StyledModal;\n\nexport const ModalClose = (props: ButtonProps) => {\n  return (\n    <AriaButton slot='close' style={{ all: 'unset', display: 'contents' }}>\n      <ModalCloseButton variant='text' width='icon' size='md' {...props}>\n        <XIcon />\n      </ModalCloseButton>\n    </AriaButton>\n  );\n};\n\nexport interface ModalTitleProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/** Props passed to modal content render functions. */\nexport interface ModalRenderProps {\n  /** Element that floating content should use as its portal container. */\n  portalContainer: HTMLDivElement | null;\n}\n\ntype ModalRenderable = ReactNode | ((props: ModalRenderProps) => ReactNode);\n\nconst ModalTitle = ({ children, ...props }: ModalTitleProps) => {\n  return (\n    <Heading size='sm' color='primary' as={AriaHeading} slot='title' {...props}>\n      {children}\n    </Heading>\n  );\n};\n\nconst ModalHeader = styled(HStack)<{ $hasTabs: boolean }>`\n  border-bottom: ${({ $hasTabs, theme }) =>\n    $hasTabs ? 'none' : `1px solid ${semanticColor(theme, 'BorderSubtle', Color.BorderDivider)}`};\n  padding: ${({ $hasTabs }) =>\n    $hasTabs\n      ? `${Spacing[3]} ${Spacing[2]} ${Spacing[1]} ${Spacing[4]}`\n      : `${Spacing[3]} ${Spacing[2]} ${Spacing[3]} ${Spacing[4]}`};\n`;\n\nconst ModalTabBar = styled(TabBar)`\n  padding-left: ${Spacing[4]};\n`;\n\nconst StyledDialog = styled(Dialog)`\n  outline: none;\n`;\n\nconst StyledCard = styled(Card)<{ $size?: 'auto' | 'md' | 'lg' | 'xl' | 'full' }>`\n  position: relative;\n  width: ${({ $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return '90vw';\n    }\n  }};\n  max-width: ${({ theme, $size }) => {\n    switch ($size) {\n      case 'auto':\n        return 'auto';\n      case 'full':\n        return 'calc(100vw - 160px)';\n      default:\n        return theme.modal.width[$size];\n    }\n  }};\n  /* TODO: Use breakpoints to make this responsive */\n  max-height: ${({ $size }) => ($size === 'full' ? 'calc(100vh - 160px)' : '85vh')};\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${({ $size }) =>\n    $size === 'full' &&\n    `\n    height: calc(100vh - 160px);\n  `}\n  margin-bottom: 0;\n`;\n\ninterface ModalCardProps extends ComponentPropsWithoutRef<typeof Dialog> {\n  /**\n   * Display X button to close popover\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer content\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   * Tab contents can be render functions that receive the modal portal container.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Title of the modal\n   */\n  title?: ReactNode;\n\n  /**\n   * Children content\n   */\n  children?: ReactNode;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Additional props for the Dialog element\n   */\n  className?: string;\n}\n\ninterface ModalCardInternalProps extends ModalCardProps {\n  portalContainer: HTMLDivElement | null;\n}\n\nconst StyledModalCardBody = styled(Card.Body)<{\n  $noPadding?: boolean;\n  $hidden?: boolean;\n}>`\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  ${({ $noPadding }) =>\n    $noPadding\n      ? 'padding: 0;'\n      : `\n    padding-left: ${Spacing[4]};\n    padding-right: ${Spacing[4]};\n  `}\n  ${({ $hidden }) => $hidden && 'display: none;'}\n`;\n\n/**\n * Card to be used in Modal contexts. Inherits props from react-aria-components Dialog.\n */\nconst ModalCard = forwardRef<HTMLDivElement, ModalCardInternalProps>(function ModalCard(\n  {\n    title,\n    children,\n    showCloseButton = true,\n    size,\n    footer,\n    tabs,\n    noBodyPadding = false,\n    portalContainer,\n    ...props\n  },\n  ref,\n) {\n  const [selectedTabIdx, setSelectedTabIdx] = useState(0);\n  const tabCount = tabs?.length ?? 0;\n\n  useEffect(() => {\n    setSelectedTabIdx(0);\n  }, [tabCount]);\n\n  const titleAndClose = (\n    <ModalHeader justify='flex-start' align='center' spacing={Spacing[2]} $hasTabs={Boolean(tabs)}>\n      <ModalHeaderTitle>{title ? <ModalTitle>{title}</ModalTitle> : null}</ModalHeaderTitle>\n      {showCloseButton && <ModalClose aria-label='Close' />}\n    </ModalHeader>\n  );\n\n  const modalHeader = tabs ? (\n    <Stack>\n      {titleAndClose}\n      <ModalTabBar>\n        {tabs.map((tab, idx) => (\n          <Tab\n            key={tab.name}\n            selected={selectedTabIdx === idx}\n            id={`pds-modal_tab-${idx}`}\n            onClick={() => setSelectedTabIdx(idx)}\n            aria-controls={`pds-modal_tab-panel-${idx}`}\n          >\n            {tab.name}\n          </Tab>\n        ))}\n      </ModalTabBar>\n    </Stack>\n  ) : (\n    titleAndClose\n  );\n\n  return (\n    <StyledDialog {...props} ref={ref}>\n      <StyledCard elevated $size={size}>\n        {(showCloseButton || title) && modalHeader}\n        {tabs ? (\n          tabs.map((tab, idx) => (\n            <StyledModalCardBody\n              key={tab.name}\n              $noPadding={noBodyPadding}\n              $hidden={selectedTabIdx !== idx}\n              role={tabs ? 'tabpanel' : undefined}\n              id={`pds-modal_tab-panel-${tab.name}`}\n              aria-labelledby={`pds-modal_tab-${tab.name}`}\n            >\n              {typeof tab.contents === 'function'\n                ? tab.contents({ portalContainer })\n                : tab.contents}\n            </StyledModalCardBody>\n          ))\n        ) : (\n          <StyledModalCardBody\n            $noPadding={noBodyPadding}\n            role={tabs ? 'tabpanel' : undefined}\n            id={`pds-modal_tab-panel-${selectedTabIdx}`}\n            aria-labelledby={`pds-modal_tab-${selectedTabIdx}`}\n          >\n            {children}\n          </StyledModalCardBody>\n        )}\n\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </StyledCard>\n    </StyledDialog>\n  );\n});\n\ninterface TabView {\n  name: string;\n  contents: ModalRenderable;\n  badge?: React.ReactElement;\n  disabled?: boolean;\n  'data-tour-target'?: string;\n}\n\nexport interface ModalProps {\n  /**\n   * Title of the Card\n   */\n  title?: string;\n\n  /**\n   * Component to use as trigger. React Aria trigger props will be merged with this element.\n   */\n  trigger?: ComponentProps<typeof Pressable>['children'];\n\n  /**\n   * Props to apply to Modal.Card within\n   */\n  contentProps?: ModalCardProps;\n\n  /**\n   * Max width of the modal\n   */\n  size?: 'auto' | 'md' | 'lg' | 'xl' | 'full';\n\n  /**\n   * Footer section intended for actions.\n   * You can pass in Buttons directly and they will render in a HStack.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Renders tabs within the modal.\n   * Adds a tab bar and will render the contents of the selected tab in a tabpanel.\n   * Overrides `children`.\n   */\n  tabs?: TabView[];\n\n  /**\n   * Children content\n   */\n  children?: ModalRenderable;\n\n  /**\n   * When true, removes horizontal and vertical padding from the body. Defaults to false.\n   * Can also be set via contentProps.noBodyPadding.\n   */\n  noBodyPadding?: boolean;\n\n  /**\n   * Controls whether the modal is open (controlled)\n   */\n  open?: boolean;\n\n  /**\n   * Default open state (uncontrolled)\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Handler called when open state changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether the modal can be dismissed by clicking outside or pressing escape\n   */\n  isDismissable?: boolean;\n\n  /**\n   * Whether pressing the escape key closes the modal\n   */\n  isKeyboardDismissDisabled?: boolean;\n}\n\nconst Modal = ({\n  children,\n  trigger,\n  contentProps,\n  noBodyPadding = false,\n  size = 'md',\n  title,\n  footer,\n  tabs,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = false,\n  isKeyboardDismissDisabled = false,\n  open,\n}: ModalProps) => {\n  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);\n  const surfaceId = useEmbeddedSurfaceId();\n  const { insetRight: modalInsetRight, panelState } = useModalInsetRight();\n  const transitionMs =\n    panelState === 'opening'\n      ? SIDEBAR_OPEN_TRANSITION_MS\n      : panelState === 'closing'\n        ? SIDEBAR_CLOSE_TRANSITION_MS\n        : 0;\n\n  const content = (\n    <ModalCard\n      size={size}\n      title={title}\n      footer={footer}\n      tabs={tabs}\n      noBodyPadding={noBodyPadding}\n      {...contentProps}\n      portalContainer={portalContainer}\n    >\n      {typeof children === 'function' ? children({ portalContainer }) : children}\n    </ModalCard>\n  );\n\n  // Wrap trigger element to ensure it works with react-aria-components\n  const wrappedTrigger = trigger ? <Pressable>{trigger}</Pressable> : null;\n\n  return (\n    <DialogTrigger isOpen={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {wrappedTrigger}\n      <EmbeddedSurfaceOverlay\n        surfaceId={surfaceId}\n        $insetRight={modalInsetRight}\n        $transitionMs={transitionMs}\n        isDismissable={isDismissable}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        shouldCloseOnInteractOutside={(element) => !element.closest('[data-react-aria-top-layer]')}\n      >\n        <EmbeddedSurfaceModal ref={setPortalContainer} surfaceId={surfaceId}>\n          {content}\n        </EmbeddedSurfaceModal>\n      </EmbeddedSurfaceOverlay>\n    </DialogTrigger>\n  );\n};\n\nexport default Object.assign(Modal, {\n  Title: ModalTitle,\n});\n"],"mappings":"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"}

package/dist/components/PageHeader/index.mjs

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-BpGT-BM0.mjs";
+import { n as PageHeaderContainer, t as PageHeader } from "../../PageHeader-wpvRRTaa.mjs";
 export { PageHeaderContainer, PageHeader as default };

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

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-BkjmybcI.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-D6tffcGW.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-Bs94Jw4y.mjs";
+import { t as Pagination } from "../../Pagination-C2eZEM7K.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-CIa3Zts9.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-zZyl7QbX.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };