@persona/design-system 0.10.5 → 0.10.7

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

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

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-QNjbGo38.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "../../Input-DQ2J9wlC.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-D9SYTzOd.mjs";
-import { n as LogicRowProps } from "../../LogicRow-BWIZ7262.mjs";
-import { t as ListBox } from "../../index-DX5Zu9JU.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-DxbXE_EE.mjs";
+import { n as LogicRowProps } from "../../LogicRow-DG06PsUe.mjs";
+import { t as ListBox } from "../../index-CDFw-zKW.mjs";
 export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, LogicRowProps, useListBoxContext };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/MaskedInput/MaskedInput.tsx","../../../src/components/MaskedInput/index.ts"],"sourcesContent":["import { forwardRef, type Ref } from 'react';\nimport { IMaskMixin, type ReactElementProps } from 'react-imask';\nimport type { IMaskInputProps } from 'react-imask/mixin';\n\nimport Input, { type InputProps } from 'design-system/components/Input/Input';\n\ninterface MaskedInputBaseProps {\n  inputRef: Ref<HTMLInputElement>;\n  componentProps?: InputProps;\n}\n\nconst MaskedInputBase = IMaskMixin<HTMLInputElement, MaskedInputBaseProps>(\n  ({\n    inputRef,\n    size,\n    componentProps,\n    ...props\n  }: ReactElementProps<HTMLInputElement> & MaskedInputBaseProps) => (\n    <Input {...props} {...componentProps} ref={inputRef} />\n  ),\n);\n\nexport type MaskedInputProps = Omit<\n  IMaskInputProps<HTMLInputElement>,\n  'inputRef' | 'componentProps' | 'size' | 'ref'\n> &\n  InputProps;\n\nexport const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(\n  props: MaskedInputProps,\n  ref,\n) {\n  return <MaskedInputBase {...props} componentProps={props} inputRef={ref} />;\n});\n\nexport default MaskedInput;\n","import MaskedInput from './MaskedInput';\n\nexport * from './MaskedInput';\n\nexport default MaskedInput;\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB,YACrB,EACC,UACA,MACA,gBACA,GAAG,YAEH,oBAAC,OAAD;CAAO,GAAI;CAAO,GAAI;CAAgB,KAAK;CAAY,CAAA,CAE1D;AAQD,MAAa,cAAc,WAA+C,SAAS,YACjF,OACA,KACA;AACA,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO,gBAAgB;EAAO,UAAU;EAAO,CAAA;EAC3E;;;AC7BF,IAAA,sBAAe"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/MaskedInput/MaskedInput.tsx","../../../src/components/MaskedInput/index.ts"],"sourcesContent":["import { forwardRef, type Ref } from 'react';\nimport { IMaskMixin, type ReactElementProps } from 'react-imask';\nimport type { IMaskInputProps } from 'react-imask/mixin';\n\nimport Input, { type InputProps } from '#src/components/Input/Input';\n\ninterface MaskedInputBaseProps {\n  inputRef: Ref<HTMLInputElement>;\n  componentProps?: InputProps;\n}\n\nconst MaskedInputBase = IMaskMixin<HTMLInputElement, MaskedInputBaseProps>(\n  ({\n    inputRef,\n    size,\n    componentProps,\n    ...props\n  }: ReactElementProps<HTMLInputElement> & MaskedInputBaseProps) => (\n    <Input {...props} {...componentProps} ref={inputRef} />\n  ),\n);\n\nexport type MaskedInputProps = Omit<\n  IMaskInputProps<HTMLInputElement>,\n  'inputRef' | 'componentProps' | 'size' | 'ref'\n> &\n  InputProps;\n\nexport const MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(function MaskedInput(\n  props: MaskedInputProps,\n  ref,\n) {\n  return <MaskedInputBase {...props} componentProps={props} inputRef={ref} />;\n});\n\nexport default MaskedInput;\n","import MaskedInput from './MaskedInput';\n\nexport * from './MaskedInput';\n\nexport default MaskedInput;\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB,YACrB,EACC,UACA,MACA,gBACA,GAAG,YAEH,oBAAC,OAAD;CAAO,GAAI;CAAO,GAAI;CAAgB,KAAK;CAAY,CAAA,CAE1D;AAQD,MAAa,cAAc,WAA+C,SAAS,YACjF,OACA,KACA;AACA,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO,gBAAgB;EAAO,UAAU;EAAO,CAAA;EAC3E;;;AC7BF,IAAA,sBAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/MatchHighlight/MatchHighlight.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { semanticColor, semanticOnly } from '#src/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":";;;;AAWA,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-DizjcMbO.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-Bq6Lij2L.mjs";
 export { FloatingCard, IconContainer, ListItem, Menu, Menu as default, MenuDivider, MenuHeading, MenuHeadingProps, MenuItem, MenuItemProps, MenuItemType, MenuList, MenuProps };

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

@@ -1,2 +1,2 @@
-import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-Bhwq1bQJ.mjs";
+import { a as ModalTitleProps, i as ModalRenderProps, n as ModalContent, o as ModalTrigger, r as ModalProps, s as _default, t as ModalClose } from "../../Modal-kEgKwLg4.mjs";
 export { ModalClose, ModalContent, ModalProps, ModalRenderProps, ModalTitleProps, ModalTrigger, _default as default };

package/dist/components/Modal/index.mjs

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

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

@@ -1,2 +1,2 @@
-import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "../../PageHeader-D2QLrS7-.mjs";
+import { n as PageHeaderContainer, r as PageHeaderProps, t as PageHeader } from "../../PageHeader-BGGhOS81.mjs";
 export { PageHeaderContainer, PageHeaderProps, PageHeader as default };

package/dist/components/PageHeader/index.mjs

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

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

@@ -1,4 +1,4 @@
-import { t as Pagination } from "../../Pagination-DeXorbSK.mjs";
-import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-QaKYtk6y.mjs";
-import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-CW1DRgwi.mjs";
+import { t as Pagination } from "../../Pagination-y3kn2X_A.mjs";
+import { r as PageSelector, t as PAGE_LIMIT_BEFORE_SCROLL_MODE } from "../../PageSelector-CLeG2gFh.mjs";
+import { n as MIN_PAGE_SIZE, t as DEFAULT_PAGE_SIZE_OPTIONS } from "../../constants-B2NIZBD6.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination as default };

package/dist/components/Pagination/index.mjs

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

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

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

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

@@ -1,2 +1,2 @@
-import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-COCwRZfK.mjs";
+import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "../../ProgressIndicator-tVvf0cY5.mjs";
 export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };

package/dist/components/ProgressIndicator/index.mjs

@@ -1,2 +1,2 @@
-import { t as ProgressIndicator } from "../../ProgressIndicator-ISARECzW.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
 export { ProgressIndicator, ProgressIndicator as default };

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

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-pyGpWhhj.mjs";
+import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-9AnTQbh9.mjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

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

@@ -1,5 +1,4 @@
-import FloatingToolbar from "../../FloatingToolbar.mjs";
 import { ExtensionWithMenuBar } from "../../types7.mjs";
 import RichTextEditor, { MenuBarItem, MenuBarSection, RichTextEditorProps } from "../../RichTextEditor.mjs";
 import { isEditorDocEmpty, normalizeTableNewlines } from "../../markdownUtils.mjs";
-export { type ExtensionWithMenuBar, FloatingToolbar, MenuBarItem, type MenuBarSection, type RichTextEditorProps, RichTextEditor as default, isEditorDocEmpty, normalizeTableNewlines };
+export { type ExtensionWithMenuBar, MenuBarItem, type MenuBarSection, type RichTextEditorProps, RichTextEditor as default, isEditorDocEmpty, normalizeTableNewlines };