@persona/design-system 0.10.0 → 0.10.2

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  useCallback,\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 { Spacing } from '@persona/design-tokens';\nimport { ImageIcon, 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\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. 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 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, 'FgSecondary', theme.color.text.secondary)};\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 }) => {\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  // 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  const isLoading = hasSrc && !loaded && !hasError;\n  const showEmpty = !hasSrc || hasError;\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  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      <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\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      {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":["../../../components/ImageTile/ImageThumbnail.tsx","../../../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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"}

package/dist/components/Link/index.mjs

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

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

@@ -1,4 +1,4 @@
-import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-Bj5c626-.mjs";
-import { n as LogicRowProps } from "../../LogicRow-CcpD-Kk3.mjs";
-import { t as ListBox } from "../../index-DsjvDLF8.mjs";
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps } from "../../ListBox-CXFI-0nG.mjs";
+import { n as LogicRowProps } from "../../LogicRow-8oYRkwz5.mjs";
+import { t as ListBox } from "../../index-C3uFHTo0.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-C80J7DCG.mjs";
+import { n as useListBoxContext, t as ListBox } from "../../ListBox-BLoJVezh.mjs";
 export { ListBox, ListBox as default, useListBoxContext };

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

package/dist/components/Modal/index.mjs

@@ -1,2 +1,2 @@
-import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-kjUptzg1.mjs";
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-IJdbLORi.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default 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-DtK-jbEY.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-C5ANr9M0.mjs";
 export { DEFAULT_PAGE_SIZE_OPTIONS, MIN_PAGE_SIZE, PAGE_LIMIT_BEFORE_SCROLL_MODE, PageSelector, Pagination_default as default };

package/dist/components/Pii/index.mjs

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

package/dist/components/Popover/index.mjs

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

package/dist/components/Radio/index.mjs

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

package/dist/components/RadioGroup/index.mjs

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

package/dist/components/SegmentedControl/index.mjs

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

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

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

package/dist/components/Select/index.mjs

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

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

@@ -0,0 +1,3 @@
+import { SelectionCard, SelectionCardProps } from "../../SelectionCard.mjs";
+import { SelectionCardGroup, SelectionCardGroupMultipleProps, SelectionCardGroupProps, SelectionCardGroupSingleProps } from "../../SelectionCardGroup.mjs";
+export { SelectionCard, SelectionCard as default, SelectionCardGroup, type SelectionCardGroupMultipleProps, type SelectionCardGroupProps, type SelectionCardGroupSingleProps, type SelectionCardProps };

package/dist/components/SelectionCard/index.mjs

@@ -0,0 +1,264 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "../../lib/semanticColor.mjs";
+import { i as Paragraph } from "../../Text-CSwFifQF.mjs";
+import { a as Tooltip } from "../../Tooltip-B-0VRuKT.mjs";
+import { opacityOf, withAlpha } from "../../lib/color.mjs";
+import useControlled from "../../lib/useControlled.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
+import { n as Stack, t as HStack } from "../../Stack-BkC7FCdF.mjs";
+import { n as useFormField, t as FormControlContext } from "../../useFormField-CbNYbDdp.mjs";
+import { t as Checkbox } from "../../Checkbox-BaJ-dGdX.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import { Children, cloneElement, isValidElement, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/SelectionCard/SelectionCard.tsx
+const CardRoot = styled.label`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  cursor: ${({ $disabled }) => $disabled ? "default" : "pointer"};
+  pointer-events: ${({ $disabled }) => $disabled ? "none" : "auto"};
+  border-radius: ${({ theme }) => theme.card.borderRadius};
+  outline: none;
+
+  /* Keyboard focus only. A click focuses the input too, and should not draw this ring. */
+  &:has(:focus-visible) {
+    ${focusStyle}
+  }
+
+  border: 1px solid
+    ${({ theme, $selected, $disabled }) => {
+	if ($disabled) return semanticColor(theme, "InputBorderDisabled", Color.BorderInputDisabled);
+	if ($selected) return semanticColor(theme, "BorderAccent", theme.color.primary.brand);
+	return semanticColor(theme, "BorderDefault", theme.color.border.input);
+}};
+
+  background-color: ${({ theme, $selected, $disabled }) => {
+	if ($disabled) return semanticColor(theme, "InputSurfaceDisabled", Color.BackgroundInputDisabled);
+	if ($selected) {
+		const tokens = semanticTokens(theme);
+		return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : theme.color.background.highlight;
+	}
+	return semanticColor(theme, "SurfacePrimary", theme.color.background.primary);
+}};
+
+  ${({ $disabled, $selected }) => !$disabled && !$selected && css`
+      &:hover {
+        background-color: ${({ theme }) => semanticColor(theme, "SurfaceHover", Color.BackgroundInteractiveHover)};
+      }
+    `}
+
+  ${({ $disabled }) => $disabled && css`
+      ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}
+    `}
+`;
+const Body = styled.div`
+  padding: ${Spacing[4]};
+`;
+const Copy = styled(Stack)`
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+/** Centers a 16px icon on the label line. `iconBackground` gives it a 32px well. */
+const IconSlot = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  min-height: ${Spacing[5]};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  ${({ $background, theme }) => $background && css`
+      width: ${Spacing[6]};
+      height: ${Spacing[6]};
+      border-radius: ${theme.card.borderRadius};
+      background-color: ${semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
+    `}
+`;
+const Marker = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  height: ${Spacing[5]};
+
+  /* The card draws the only focus ring and the only disabled fade. */
+  && input:focus-visible ~ [aria-hidden] {
+    outline: none;
+  }
+
+  && input ~ [aria-hidden] {
+    opacity: 1;
+  }
+`;
+const NativeRadio = styled.input`
+  cursor: inherit;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  border: 0;
+  outline: none;
+  pointer-events: none;
+`;
+const TooltipTrigger = styled.span`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-self: stretch;
+`;
+const SelectionCard = ({ value, label, description, icon, iconBackground = false, disabled: disabledProp, disabledReason, name, checked = false, onChange, multiple = false, className }) => {
+	const disabled = !!useFormField({ disabled: disabledProp || void 0 }).disabled;
+	const card = /* @__PURE__ */ jsxs(CardRoot, {
+		className,
+		$selected: checked,
+		$disabled: disabled,
+		children: [/* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsxs(HStack, {
+			align: "flex-start",
+			spacing: icon ? Spacing[3] : Spacing[2],
+			children: [
+				multiple && /* @__PURE__ */ jsx(Marker, { children: /* @__PURE__ */ jsx(Checkbox, {
+					name,
+					value,
+					checked,
+					disabled,
+					onChange: (event) => onChange?.(event.target.checked)
+				}) }),
+				icon && /* @__PURE__ */ jsx(IconSlot, {
+					$background: iconBackground,
+					children: icon
+				}),
+				/* @__PURE__ */ jsxs(Copy, {
+					spacing: Spacing[1],
+					children: [/* @__PURE__ */ jsx(Paragraph, {
+						as: "span",
+						size: "lg",
+						weight: "bold",
+						color: disabled ? "disabled" : "primary",
+						children: label
+					}), description && /* @__PURE__ */ jsx(Paragraph, {
+						as: "span",
+						size: "md",
+						color: disabled ? "disabled" : checked ? "primary" : "secondary",
+						children: description
+					})]
+				})
+			]
+		}) }), !multiple && /* @__PURE__ */ jsx(NativeRadio, {
+			type: "radio",
+			name,
+			value,
+			checked,
+			disabled,
+			onChange: () => onChange?.(true)
+		})]
+	});
+	if (disabled && disabledReason) return /* @__PURE__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx(TooltipTrigger, { children: card }),
+		children: disabledReason
+	});
+	return card;
+};
+//#endregion
+//#region components/SelectionCard/SelectionCardGroup.tsx
+const selectionCards = (children) => Children.toArray(children).filter((child) => isValidElement(child) && child.type === SelectionCard);
+const firstSelectableValue = (children) => selectionCards(children).find((card) => !card.props.disabled)?.props.value;
+const groupLayout = (children, stack) => {
+	const inline = selectionCards(children).length === 2 && !stack;
+	return {
+		$inline: inline,
+		direction: inline ? "horizontal" : "vertical",
+		equal: inline,
+		align: inline ? "stretch" : void 0
+	};
+};
+const Group = styled(Stack)`
+  ${({ $inline }) => $inline && css`
+      > * {
+        width: auto;
+        min-width: 0;
+        align-self: stretch;
+      }
+    `}
+`;
+const renderCards = (children, getProps) => Children.map(children, (child) => {
+	if (!isValidElement(child) || child.type !== SelectionCard) return child;
+	const card = child;
+	return cloneElement(card, getProps(card.props));
+});
+const SingleGroup = ({ name, className, stack, children, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired }) => {
+	const field = useContext(FormControlContext);
+	const [value, setValue] = useControlled({
+		controlledValue: valueProp,
+		default: defaultValue ?? (field.disabled ? void 0 : firstSelectableValue(children))
+	});
+	return /* @__PURE__ */ jsx(Group, {
+		...groupLayout(children, stack),
+		className,
+		spacing: Spacing[2],
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"aria-required": ariaRequired,
+		children: renderCards(children, (card) => ({
+			name,
+			multiple: false,
+			checked: card.value === value,
+			onChange: () => {
+				if (field.disabled || card.disabled) return;
+				setValue(card.value);
+				onChange?.(card.value);
+			}
+		}))
+	});
+};
+const MultipleGroup = ({ name, className, stack, children, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }) => {
+	const field = useContext(FormControlContext);
+	const [value, setValue] = useControlled({
+		controlledValue: valueProp,
+		default: defaultValue ?? []
+	});
+	const selected = value ?? [];
+	return /* @__PURE__ */ jsx(Group, {
+		...groupLayout(children, stack),
+		className,
+		spacing: Spacing[2],
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		children: renderCards(children, (card) => ({
+			name,
+			multiple: true,
+			checked: selected.includes(card.value),
+			onChange: (checked) => {
+				if (field.disabled || card.disabled) return;
+				const next = checked ? selected.includes(card.value) ? selected : [...selected, card.value] : selected.filter((item) => item !== card.value);
+				setValue(next);
+				onChange?.(next);
+			}
+		}))
+	});
+};
+const SelectionCardGroup = (props) => {
+	const field = useContext(FormControlContext);
+	return /* @__PURE__ */ jsx(FormControlContext.Provider, {
+		value: {
+			...field,
+			inputId: void 0
+		},
+		children: props.multiple ? /* @__PURE__ */ jsx(MultipleGroup, { ...props }) : /* @__PURE__ */ jsx(SingleGroup, { ...props })
+	});
+};
+//#endregion
+export { SelectionCard, SelectionCard as default, SelectionCardGroup };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/SelectionCard/SelectionCard.tsx","../../../components/SelectionCard/SelectionCardGroup.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Checkbox from '@persona/design-system/components/Checkbox';\nimport { HStack, Stack } from '@persona/design-system/components/Stack';\nimport { Paragraph } from '@persona/design-system/components/Text';\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { focusStyle } from '@persona/design-system/mixins/focus';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { opacityOf, withAlpha } from 'design-system/lib/color';\nimport { semanticColor, semanticOnly, semanticTokens } from 'design-system/lib/semanticColor';\n\nexport interface SelectionCardProps {\n  /** Value submitted with the group when this card is selected. */\n  value: string;\n  /** Required visible name. Left-aligned with `description`. */\n  label: string;\n  /** Optional supporting copy under the label. Omitted when not passed. */\n  description?: string;\n  /**\n   * Optional icon to the left of the label. Leave it off when it does not add\n   * meaning, including in multiple mode.\n   */\n  icon?: ReactElement;\n  /**\n   * Draw a secondary background behind `icon`. Ignored when `icon` is omitted.\n   */\n  iconBackground?: boolean;\n  disabled?: boolean;\n  /** Tooltip shown on hover only while `disabled` is set. */\n  disabledReason?: string;\n  /** Injected by `SelectionCardGroup`. */\n  name?: string;\n  /** Injected by `SelectionCardGroup`. */\n  checked?: boolean;\n  /** Injected by `SelectionCardGroup`. */\n  onChange?: (checked: boolean) => void;\n  /** Injected by `SelectionCardGroup`. */\n  multiple?: boolean;\n  /** Layout hook for this card. */\n  className?: string;\n}\n\nconst CardRoot = styled.label<{ $selected: boolean; $disabled: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n  outline: none;\n\n  /* Keyboard focus only. A click focuses the input too, and should not draw this ring. */\n  &:has(:focus-visible) {\n    ${focusStyle}\n  }\n\n  border: 1px solid\n    ${({ theme, $selected, $disabled }) => {\n      if ($disabled) {\n        return semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled);\n      }\n      if ($selected) {\n        return semanticColor(theme, 'BorderAccent', theme.color.primary.brand);\n      }\n      return semanticColor(theme, 'BorderDefault', theme.color.border.input);\n    }};\n\n  background-color: ${({ theme, $selected, $disabled }) => {\n    if ($disabled) {\n      return semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled);\n    }\n    if ($selected) {\n      const tokens = semanticTokens(theme);\n      return tokens\n        ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n        : theme.color.background.highlight;\n    }\n    return semanticColor(theme, 'SurfacePrimary', theme.color.background.primary);\n  }};\n\n  ${({ $disabled, $selected }) =>\n    !$disabled &&\n    !$selected &&\n    css`\n      &:hover {\n        background-color: ${({ theme }) =>\n          semanticColor(theme, 'SurfaceHover', Color.BackgroundInteractiveHover)};\n      }\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n    `}\n`;\n\nconst Body = styled.div`\n  padding: ${Spacing[4]};\n`;\n\nconst Copy = styled(Stack)`\n  flex: 1 1 auto;\n  min-width: 0;\n`;\n\n/** Centers a 16px icon on the label line. `iconBackground` gives it a 32px well. */\nconst IconSlot = styled.span<{ $background: boolean }>`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: flex-start;\n  min-height: ${Spacing[5]};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${({ $background, theme }) =>\n    $background &&\n    css`\n      width: ${Spacing[6]};\n      height: ${Spacing[6]};\n      border-radius: ${theme.card.borderRadius};\n      background-color: ${semanticColor(theme, 'SurfaceSecondary', theme.color.background.secondary)};\n    `}\n`;\nconst Marker = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: ${Spacing[5]};\n\n  /* The card draws the only focus ring and the only disabled fade. */\n  && input:focus-visible ~ [aria-hidden] {\n    outline: none;\n  }\n\n  && input ~ [aria-hidden] {\n    opacity: 1;\n  }\n`;\n\nconst NativeRadio = styled.input`\n  cursor: inherit;\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  opacity: 0;\n  border: 0;\n  outline: none;\n  pointer-events: none;\n`;\n\nconst TooltipTrigger = styled.span`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  align-self: stretch;\n`;\n\nexport const SelectionCard = ({\n  value,\n  label,\n  description,\n  icon,\n  iconBackground = false,\n  disabled: disabledProp,\n  disabledReason,\n  name,\n  checked = false,\n  onChange,\n  multiple = false,\n  className,\n}: SelectionCardProps) => {\n  const field = useFormField({ disabled: disabledProp || undefined });\n  const disabled = !!field.disabled;\n  const card = (\n    <CardRoot className={className} $selected={checked} $disabled={disabled}>\n      <Body>\n        <HStack align='flex-start' spacing={icon ? Spacing[3] : Spacing[2]}>\n          {multiple && (\n            <Marker>\n              <Checkbox\n                name={name}\n                value={value}\n                checked={checked}\n                disabled={disabled}\n                onChange={(event) => onChange?.(event.target.checked)}\n              />\n            </Marker>\n          )}\n          {icon && <IconSlot $background={iconBackground}>{icon}</IconSlot>}\n          <Copy spacing={Spacing[1]}>\n            <Paragraph as='span' size='lg' weight='bold' color={disabled ? 'disabled' : 'primary'}>\n              {label}\n            </Paragraph>\n            {description && (\n              <Paragraph\n                as='span'\n                size='md'\n                color={disabled ? 'disabled' : checked ? 'primary' : 'secondary'}\n              >\n                {description}\n              </Paragraph>\n            )}\n          </Copy>\n        </HStack>\n      </Body>\n      {!multiple && (\n        <NativeRadio\n          type='radio'\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => onChange?.(true)}\n        />\n      )}\n    </CardRoot>\n  );\n\n  if (disabled && disabledReason) {\n    return <Tooltip trigger={<TooltipTrigger>{card}</TooltipTrigger>}>{disabledReason}</Tooltip>;\n  }\n\n  return card;\n};\n\nexport default SelectionCard;\n","import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Stack from '@persona/design-system/components/Stack';\nimport { Spacing } from '@persona/design-tokens';\nimport { FormControlContext } from 'design-system/components/FormControl/useFormField';\nimport useControlled from 'design-system/lib/useControlled';\n\nimport SelectionCard, { type SelectionCardProps } from './SelectionCard';\n\ninterface SelectionCardGroupBaseProps {\n  /** Shared input name. Radios in a single group arrow-key together. */\n  name?: string;\n  /** Layout hook for the group. Not forwarded onto each card. */\n  className?: string;\n  /** Place two cards in a column. Two cards sit side by side when this is omitted. Three or more always stack. */\n  stack?: boolean;\n  /** Accessible name for the group. */\n  'aria-label'?: string;\n  /** Id of the element that names the group, such as a field label. */\n  'aria-labelledby'?: string;\n  children: ReactNode;\n}\n\nexport interface SelectionCardGroupSingleProps extends SelectionCardGroupBaseProps {\n  /** One card may be selected. Cards render no radio mark. */\n  multiple?: false;\n  'aria-required'?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport interface SelectionCardGroupMultipleProps extends SelectionCardGroupBaseProps {\n  /** Several cards may be selected. Each card shows a checkbox. */\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n}\n\nexport type SelectionCardGroupProps =\n  | SelectionCardGroupSingleProps\n  | SelectionCardGroupMultipleProps;\n\nconst selectionCards = (children: ReactNode) =>\n  Children.toArray(children).filter(\n    (child): child is ReactElement<SelectionCardProps> =>\n      isValidElement(child) && child.type === SelectionCard,\n  );\n\nconst firstSelectableValue = (children: ReactNode) =>\n  selectionCards(children).find((card) => !card.props.disabled)?.props.value;\n\nconst groupLayout = (children: ReactNode, stack?: boolean) => {\n  const inline = selectionCards(children).length === 2 && !stack;\n  return {\n    $inline: inline,\n    direction: inline ? ('horizontal' as const) : ('vertical' as const),\n    equal: inline,\n    align: inline ? ('stretch' as const) : undefined,\n  };\n};\n\nconst Group = styled(Stack)<{ $inline: boolean }>`\n  ${({ $inline }) =>\n    $inline &&\n    css`\n      > * {\n        width: auto;\n        min-width: 0;\n        align-self: stretch;\n      }\n    `}\n`;\nconst renderCards = (\n  children: ReactNode,\n  getProps: (card: SelectionCardProps) => Partial<SelectionCardProps>,\n) =>\n  Children.map(children, (child) => {\n    if (!isValidElement(child) || child.type !== SelectionCard) {\n      return child;\n    }\n    const card = child as ReactElement<SelectionCardProps>;\n    return cloneElement(card, getProps(card.props));\n  });\n\nconst SingleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'aria-required': ariaRequired,\n}: SelectionCardGroupSingleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? (field.disabled ? undefined : firstSelectableValue(children)),\n  });\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='radiogroup'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-required={ariaRequired}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: false,\n        checked: card.value === value,\n        onChange: () => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          setValue(card.value);\n          onChange?.(card.value);\n        },\n      }))}\n    </Group>\n  );\n};\n\nconst MultipleGroup = ({\n  name,\n  className,\n  stack,\n  children,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n}: SelectionCardGroupMultipleProps) => {\n  const field = useContext(FormControlContext);\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue ?? [],\n  });\n  const selected = value ?? [];\n\n  return (\n    <Group\n      {...groupLayout(children, stack)}\n      className={className}\n      spacing={Spacing[2]}\n      role='group'\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n    >\n      {renderCards(children, (card) => ({\n        name,\n        multiple: true,\n        checked: selected.includes(card.value),\n        onChange: (checked: boolean) => {\n          if (field.disabled || card.disabled) {\n            return;\n          }\n          const next = checked\n            ? selected.includes(card.value)\n              ? selected\n              : [...selected, card.value]\n            : selected.filter((item) => item !== card.value);\n          setValue(next);\n          onChange?.(next);\n        },\n      }))}\n    </Group>\n  );\n};\n\nexport const SelectionCardGroup = (props: SelectionCardGroupProps) => {\n  const field = useContext(FormControlContext);\n  /* Each card's checkbox would otherwise take the enclosing field's shared input id. */\n  return (\n    <FormControlContext.Provider value={{ ...field, inputId: undefined }}>\n      {props.multiple ? <MultipleGroup {...props} /> : <SingleGroup {...props} />}\n    </FormControlContext.Provider>\n  );\n};\n\nexport default SelectionCardGroup;\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { a as Mode, i as FunctionFormRenderProps, n as CustomFunctionDetailRenderProps, o as OpenCodeChainFunctionPanel, s as PopoverFooterRenderer, t as CodeChainFunctionPanelRenderProps, u as ValueType } from "../../types-DFU6M0OL.mjs";
-import { t as ContextMenuExamples } from "../../listbox-options-D-DyLUdi.mjs";
+import { a as Mode, i as FunctionFormRenderProps, n as CustomFunctionDetailRenderProps, o as OpenCodeChainFunctionPanel, s as PopoverFooterRenderer, t as CodeChainFunctionPanelRenderProps, u as ValueType } from "../../types-DWU0Dmy9.mjs";
+import { t as ContextMenuExamples } from "../../listbox-options-DCmqWWgy.mjs";
 import SmartTextInput, { SmartTextInputProps } from "../../SmartTextInput.mjs";
 import SmartTextInputField, { SmartTextInputFieldProps } from "../../SmartTextInputField.mjs";
 export { type CodeChainFunctionPanelRenderProps, type ContextMenuExamples, type CustomFunctionDetailRenderProps, type FunctionFormRenderProps, Mode, type OpenCodeChainFunctionPanel, type PopoverFooterRenderer, SmartTextInputField, type SmartTextInputFieldProps, type SmartTextInputProps, ValueType, SmartTextInput as default };

package/dist/components/SmartTextInput/index.mjs

@@ -6,7 +6,7 @@ import { isCreatableReceiverSchema, isNoArgCodeChainFunction } from "../../lib/c
 import { isASTCustomFunctionNode, isAnyASTFunctionNode, isRealASTFunctionParamType } from "./parser/method-chain/types.mjs";
 import { _ as methodChainToString, l as isEmpty, n as MethodChainNodeTypes, w as assertNever } from "../../methodChain-xZ1_vhbz.mjs";
 import { normalizeChain, normalizeFunctionParam } from "../../lib/methodChainNormalize.mjs";
-import { getFunctionSchemaForNode, getSchemaForFieldPath } from "../../lib/schemaOptions.mjs";
+import { UNTYPED_ADDITIONAL_PROPERTY_SCHEMA, getFunctionSchemaForNode, getSchemaForFieldPath } from "../../lib/schemaOptions.mjs";
 import { n as useChain, r as useChainSchema } from "../../useChain-Cu4KDfFk.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
@@ -16,7 +16,7 @@ import { n as Button } from "../../IconButton-HWx5Hlmi.mjs";
 import { n as useFormField } from "../../useFormField-CbNYbDdp.mjs";
 import Input_default from "../Input/index.mjs";
 import { n as ErrorText } from "../../FormControl-C4CiA0H-.mjs";
-import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-cSG93kuo.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-D0y1uRV5.mjs";
 import PillType from "./PillType.mjs";
 import { ErrorMessageByKind, NodeType, isASTChainNode, isASTContainerNode, isMethodChainNode } from "./parser/smart-text/types.mjs";
 import { parse as peg$parse } from "./parser/smart-text/parser.mjs";
@@ -771,6 +771,15 @@ const SmartTextInputFunctionDialog = ({ id, inputRef, functionAtCursor, nextPoss
 			};
 		}
 	}, [functionAtCursor, nextPossibleChains]);
+	const rendersCustomFunctionDetail = functionAtCursor.custom && functionSchema?.ccfToken != null;
+	const isMissingFunctionForm = functionSchema != null && !rendersCustomFunctionDetail && renderFunctionForm == null;
+	const warnedMissingFunctionFormRef = useRef(false);
+	useEffect(() => {
+		if (process.env.NODE_ENV !== "production" && isMissingFunctionForm && !warnedMissingFunctionFormRef.current) {
+			warnedMissingFunctionFormRef.current = true;
+			console.warn(`SmartTextInput: the function dialog for "${functionAtCursor.functionName}" opened without a \`renderFunctionForm\` prop, so its body is empty. Method-chain consumers must pass \`renderFunctionForm\` (in persona-web, use \`useDashboardSmartTextInputProps\`).`);
+		}
+	}, [isMissingFunctionForm, functionAtCursor.functionName]);
 	return /* @__PURE__ */ jsxs(StyledDialog, {
 		ref,
 		...restDialogProps,
@@ -1344,7 +1353,7 @@ function findSchemaErrors(tree, rootSchema, platformObjectJsonSchema, primitiveU
 		const enclosing = enclosingExpr(tree, chainNode);
 		const inClosedHandlebars = enclosing?.type === NodeType.Handlebars && !enclosing.children?.some((c) => c.type === NodeType.Error && c.kind === "unclosedHandlebars");
 		if (!hasIncomplete && identifierLinks.length > 0 && inClosedHandlebars) {
-			if (!isSchemaTypeAllowed(prevSchema, JsonSchemaStringifiableTypes)) {
+			if (!(prevSchema === UNTYPED_ADDITIONAL_PROPERTY_SCHEMA || isSchemaTypeAllowed(prevSchema, JsonSchemaStringifiableTypes))) {
 				const lastLink = identifierLinks[identifierLinks.length - 1];
 				return {
 					start: lastLink.start,