@persona/design-system 0.10.1 → 0.10.3

package/dist/components/SelectionCard/index.mjs

@@ -0,0 +1,272 @@
+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, Typography } 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;
+`;
+/** Height of one line of label text. */
+const LABEL_LINE_HEIGHT = Typography.TextMediumBold.lineHeight;
+/** Size of the checkbox and the icon. */
+const CONTROL_SIZE = Spacing[4];
+/**
+* Holds the label. With a checkbox or icon, the label's first line is pulled up to share their
+* 16px height and center line. Only the top moves, so the gap to the description stays the same
+* with or without a checkbox or icon.
+*/
+const LabelRow = styled.span`
+  display: block;
+  ${({ $withControl }) => $withControl && css`
+      margin-top: calc((${CONTROL_SIZE} - ${LABEL_LINE_HEIGHT}) / 2);
+    `}
+`;
+/** Centers a 16px icon on the checkbox and label center line. */
+const IconSlot = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  height: ${CONTROL_SIZE};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
+
+  svg {
+    width: ${CONTROL_SIZE};
+    height: ${CONTROL_SIZE};
+  }
+`;
+const Marker = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  height: ${CONTROL_SIZE};
+
+  /* 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, 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, { children: icon }),
+				/* @__PURE__ */ jsxs(Copy, {
+					spacing: Spacing[1],
+					children: [/* @__PURE__ */ jsx(LabelRow, {
+						$withControl: multiple || !!icon,
+						children: /* @__PURE__ */ jsx(Paragraph, {
+							as: "span",
+							size: "md",
+							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, Typography } 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  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/** Height of one line of label text. */\nconst LABEL_LINE_HEIGHT = Typography.TextMediumBold.lineHeight;\n\n/** Size of the checkbox and the icon. */\nconst CONTROL_SIZE = Spacing[4];\n\n/**\n * Holds the label. With a checkbox or icon, the label's first line is pulled up to share their\n * 16px height and center line. Only the top moves, so the gap to the description stays the same\n * with or without a checkbox or icon.\n */\nconst LabelRow = styled.span<{ $withControl: boolean }>`\n  display: block;\n  ${({ $withControl }) =>\n    $withControl &&\n    css`\n      margin-top: calc((${CONTROL_SIZE} - ${LABEL_LINE_HEIGHT}) / 2);\n    `}\n`;\n\n/** Centers a 16px icon on the checkbox and label center line. */\nconst IconSlot = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  align-self: flex-start;\n  height: ${CONTROL_SIZE};\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n  svg {\n    width: ${CONTROL_SIZE};\n    height: ${CONTROL_SIZE};\n  }\n`;\nconst Marker = styled.span`\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: ${CONTROL_SIZE};\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  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>{icon}</IconSlot>}\n          <Copy spacing={Spacing[1]}>\n            <LabelRow $withControl={multiple || !!icon}>\n              <Paragraph\n                as='span'\n                size='md'\n                weight='bold'\n                color={disabled ? 'disabled' : 'primary'}\n              >\n                {label}\n              </Paragraph>\n            </LabelRow>\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.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-C4B2qFgh.mjs";
+import { m as FormField, n as TableBoxField, p as splitOutFormFieldProps } from "../../FormField-C0cd1zVd.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";

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-uVZyOh1T.mjs";
+import { t as Spinner } from "../../Spinner-7Camx1vs.mjs";
 export { Spinner, Spinner as default };

package/dist/components/Table/index.mjs

@@ -1,2 +1,2 @@
-import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table--o4ZLRbb.mjs";
+import { a as StickyTH, c as TableCellTitle, d as TableTR, f as TableTH, h as Table, i as StickyTD, l as TableIconTD, m as TableHeaderCell, n as TableBody, o as TableActionTD, p as TableRow, r as TableHead, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BIDaC0uS.mjs";
 export { StickyTD, StickyTH, Table, Table as default, TableActionTD, TableBody, TableCell, TableCellTitle, TableHead, TableHeaderCell, TableIconTD, TableLayout, TableRow, TableTD, TableTH, TableTR };

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

@@ -1,3 +1,3 @@
 import { t as DragDirection } from "../../useTableBoxDragAndDrop-CKPIY98e.mjs";
-import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-okcOQ5Ec.mjs";
+import { a as TableBox, o as TableBoxContext, r as InlineEditConfig, s as TableBoxProps } from "../../TableBoxCell-v_ag22E0.mjs";
 export { DragDirection, InlineEditConfig, TableBoxContext, TableBoxProps, TableBox as default };

package/dist/components/TableBox/index.mjs

@@ -1,2 +1,2 @@
-import { n as TableBoxContext, t as TableBox } from "../../TableBox-3qunC9Nl.mjs";
+import { n as TableBoxContext, t as TableBox } from "../../TableBox-Bn_XZEYd.mjs";
 export { TableBoxContext, TableBox as default };

package/dist/components/VersionHistory/index.mjs

@@ -6,7 +6,7 @@ import { semanticScrollbar } from "../../mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "../../Stack-BkC7FCdF.mjs";
 import { n as Button, t as IconButton } from "../../IconButton-HWx5Hlmi.mjs";
 import { n as DropdownMenu_default } from "../../DropdownMenu-CedsmO5h.mjs";
-import { t as Spinner } from "../../Spinner-uVZyOh1T.mjs";
+import { t as Spinner } from "../../Spinner-7Camx1vs.mjs";
 import { i as Modal_default } from "../../Modal-kjUptzg1.mjs";
 import { t as TextAreaWithStyle } from "../../TextArea-CaIEBz8d.mjs";
 import { n as StatusIndicator } from "../../StatusIndicator-Bunn9YLV.mjs";

package/dist/fieldPickerOptions.d.mts

@@ -1,4 +1,4 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-BMBdtP2Z.mjs";
 import { t as FieldRegistry } from "./FieldRegistry-B5E-GN91.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/fieldPickerOptions.d.ts

package/dist/{filters-ogUUmLEf.d.mts → filters-C8YLLbH3.d.mts}

@@ -1,4 +1,4 @@
-import { i as BaseFilterConfig, l as FilterTypeDefinition, t as ActiveFilter, u as FilterTypeResolver } from "./types-Bdi8Y7ll.mjs";
+import { i as BaseFilterConfig, l as FilterTypeDefinition, t as ActiveFilter, u as FilterTypeResolver } from "./types-Ci-KTHfu.mjs";
 import { ComponentProps } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -19,4 +19,4 @@ declare const Filters: <TFilter extends BaseFilterConfig>({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { resolveFilterTypeDefinition as a, isFilterActive as i, FiltersContainer as n, synchronizeActiveFilters as o, getActiveFilters as r, Filters as t };
-//# sourceMappingURL=filters-ogUUmLEf.d.mts.map
+//# sourceMappingURL=filters-C8YLLbH3.d.mts.map

package/dist/filters.d.mts

@@ -1,2 +1,2 @@
-import { a as resolveFilterTypeDefinition, i as isFilterActive, n as FiltersContainer, o as synchronizeActiveFilters, r as getActiveFilters, t as Filters } from "./filters-ogUUmLEf.mjs";
+import { a as resolveFilterTypeDefinition, i as isFilterActive, n as FiltersContainer, o as synchronizeActiveFilters, r as getActiveFilters, t as Filters } from "./filters-C8YLLbH3.mjs";
 export { Filters, FiltersContainer, getActiveFilters, isFilterActive, resolveFilterTypeDefinition, synchronizeActiveFilters };

package/dist/{helpers-Dqw5PEva.d.mts → helpers-DvqDI2e5.d.mts}

@@ -1,6 +1,6 @@
 import { n as CheckboxProps } from "./Checkbox-B2MZShdu.mjs";
 import { i as CommonStrings } from "./strings-FWNWdSn1.mjs";
-import { S as RenderValueStickerFormatConfig, b as DatetimeConfig, d as DataTableColumnImageFormat, h as DataTableColumnStringFormat, l as DataTableColumnFormat, p as DataTableColumnPiiFormat, y as DateConfig } from "./types-BQP14Fng.mjs";
+import { S as RenderValueStickerFormatConfig, b as DatetimeConfig, d as DataTableColumnImageFormat, h as DataTableColumnStringFormat, l as DataTableColumnFormat, p as DataTableColumnPiiFormat, y as DateConfig } from "./types-SYxBPX6o.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/helpers.d.ts
@@ -87,4 +87,4 @@ declare const renderAsLightweightImage: (value: unknown, config?: DataTableColum
 declare const renderAsPDSFormat: <TData = unknown>(value: unknown, format?: DataTableColumnFormat<TData>, row?: TData, options?: PDSFormatOptions) => string | ReactNode;
 //#endregion
 export { renderAsDate as a, renderAsNumber as c, renderAsSticker as d, renderAsString as f, renderAsCopyableString as i, renderAsPDSFormat as l, renderAsCheckbox as n, renderAsDatetime as o, renderAsURL as p, renderAsCheckboxHeader as r, renderAsLightweightImage as s, PDSFormatOptions as t, renderAsPii as u };
-//# sourceMappingURL=helpers-Dqw5PEva.d.mts.map
+//# sourceMappingURL=helpers-DvqDI2e5.d.mts.map

package/dist/helpers.d.mts

@@ -1,2 +1,2 @@
-import { a as renderAsDate, c as renderAsNumber, d as renderAsSticker, f as renderAsString, i as renderAsCopyableString, l as renderAsPDSFormat, n as renderAsCheckbox, o as renderAsDatetime, p as renderAsURL, r as renderAsCheckboxHeader, s as renderAsLightweightImage, t as PDSFormatOptions, u as renderAsPii } from "./helpers-Dqw5PEva.mjs";
+import { a as renderAsDate, c as renderAsNumber, d as renderAsSticker, f as renderAsString, i as renderAsCopyableString, l as renderAsPDSFormat, n as renderAsCheckbox, o as renderAsDatetime, p as renderAsURL, r as renderAsCheckboxHeader, s as renderAsLightweightImage, t as PDSFormatOptions, u as renderAsPii } from "./helpers-DvqDI2e5.mjs";
 export { PDSFormatOptions, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL };

package/dist/{index-Ck939aXd.d.mts → index-CNDe1Lij.d.mts}

@@ -1,5 +1,5 @@
-import { n as ListBoxItemProps, r as ListBoxProps$1 } from "./ListBox-DIk8suJM.mjs";
-import { n as LogicRowProps } from "./LogicRow-uxpe1vZ1.mjs";
+import { n as ListBoxItemProps, r as ListBoxProps$1 } from "./ListBox-cH0dfeLN.mjs";
+import { n as LogicRowProps } from "./LogicRow-CaxsteGU.mjs";
 import * as _$react from "react";
 import * as _$react_aria_components0 from "react-aria-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -52,4 +52,4 @@ declare const ListBox: {
 };
 //#endregion
 export { ListBox as t };
-//# sourceMappingURL=index-Ck939aXd.d.mts.map
+//# sourceMappingURL=index-CNDe1Lij.d.mts.map

package/dist/{inputFields-DVLg_2wz.d.mts → inputFields-BZcm1UV5.d.mts}

@@ -1,11 +1,11 @@
 import { n as CheckboxProps } from "./Checkbox-B2MZShdu.mjs";
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-BkdRrH6K.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-DIBRZmvS.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DY5bAep9.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-1NglA-u2.mjs";
 import { n as FormFieldBaseProps } from "./FormField-mLbXDJ9B.mjs";
 import { a as InputProps } from "./Input-Bg4bi6VZ.mjs";
 import { n as RadioGroupProps } from "./RadioGroup-BxEmipHa.mjs";
 import { i as SegmentedControlProps } from "./SegmentedControl-xjU-2IsJ.mjs";
-import { i as SelectProps } from "./Select-CsxK6A5m.mjs";
+import { i as SelectProps } from "./Select-CG_Xkx0m.mjs";
 import { t as TextAreaProps } from "./TextArea-DFn4XuG-.mjs";
 import { n as ToggleProps } from "./Toggle-xtPgGaGD.mjs";
 import * as _$react from "react";
@@ -68,4 +68,4 @@ type ComboboxMultiSelectFieldProps<T = string> = ImplementsFormField & ComboboxM
 declare const ComboboxField: (props: ComboboxSingleSelectFieldProps | ComboboxMultiSelectFieldProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ToggleField as _, ComboboxSingleSelectFieldProps as a, RadioGroupFieldProps as c, SelectField as d, SelectFieldProps as f, TextFieldProps as g, TextField as h, ComboboxMultiSelectFieldProps as i, SegmentedControlField as l, TextAreaFieldProps as m, CheckboxFieldProps as n, ImplementsFormField as o, TextAreaField as p, ComboboxField as r, RadioGroupField as s, CheckboxField as t, SegmentedControlFieldProps as u, ToggleFieldProps as v, splitOutFormFieldProps as y };
-//# sourceMappingURL=inputFields-DVLg_2wz.d.mts.map
+//# sourceMappingURL=inputFields-BZcm1UV5.d.mts.map

package/dist/inputFields.d.mts

@@ -1,2 +1,2 @@
-import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "./inputFields-DVLg_2wz.mjs";
+import { _ as ToggleField, a as ComboboxSingleSelectFieldProps, c as RadioGroupFieldProps, d as SelectField, f as SelectFieldProps, g as TextFieldProps, h as TextField, i as ComboboxMultiSelectFieldProps, l as SegmentedControlField, m as TextAreaFieldProps, n as CheckboxFieldProps, o as ImplementsFormField, p as TextAreaField, r as ComboboxField, s as RadioGroupField, t as CheckboxField, u as SegmentedControlFieldProps, v as ToggleFieldProps, y as splitOutFormFieldProps } from "./inputFields-BZcm1UV5.mjs";
 export { CheckboxField, CheckboxFieldProps, ComboboxField, ComboboxMultiSelectFieldProps, ComboboxSingleSelectFieldProps, ImplementsFormField, RadioGroupField, RadioGroupFieldProps, SegmentedControlField, SegmentedControlFieldProps, SelectField, SelectFieldProps, TextAreaField, TextAreaFieldProps, TextField, TextFieldProps, ToggleField, ToggleFieldProps, splitOutFormFieldProps };

package/dist/patterns/IndexTableLayout/index.mjs

@@ -1,5 +1,5 @@
 import { t as Card_default } from "../../Card-BXNxWX5C.mjs";
-import { t as DataTable } from "../../DataTable-BoAAKhVH.mjs";
+import { t as DataTable } from "../../DataTable-DQ8axNfo.mjs";
 import { t as PageHeader } from "../../PageHeader-DJF7nxgN.mjs";
 import { a as Section, i as Container } from "../../PageLayout-fXJW7daI.mjs";
 import { useMemo } from "react";

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -2,7 +2,7 @@ import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { n as Stack, t as HStack } from "../../Stack-BkC7FCdF.mjs";
 import { t as LoadingShimmer } from "../../LoadingShimmer-Bqjdut7i.mjs";
 import { t as Card_default } from "../../CardV2-Dp4eHSE-.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table--o4ZLRbb.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-BIDaC0uS.mjs";
 import { n as PageHeaderContainer } from "../../PageHeader-DJF7nxgN.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/{types-Bdi8Y7ll.d.mts → types-Ci-KTHfu.d.mts}

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-Bm2eSg56.mjs";
+import { n as ComboboxProps } from "./Combobox-DTeu9_RR.mjs";
 import { n as DateRange } from "./DateRangePicker-CLuBLF1q.mjs";
 import { ReactNode } from "react";
 import { DateValue } from "@internationalized/date";
@@ -67,7 +67,7 @@ interface DateRangeFilterConfig extends BaseFilterConfig {
 }
 interface InputFilterConfig extends BaseFilterConfig {
   type: 'input';
-  value: string;
+  value?: string;
   onChange: (value: string) => void;
   onDelete?: () => void;
 }
@@ -92,4 +92,4 @@ interface FilterTypeDefinition<TFilter extends BaseFilterConfig = FilterConfig>
 type FilterTypeResolver<TFilter extends BaseFilterConfig = FilterConfig> = (config: TFilter) => FilterTypeDefinition<TFilter> | undefined;
 //#endregion
 export { ComboboxFilterConfig as a, FilterRenderOptions as c, InputFilterConfig as d, MultiSelectFilterConfig as f, BaseFilterConfig as i, FilterTypeDefinition as l, AttributeColumn as n, DateRangeFilterConfig as o, SelectFilterConfig as p, BaseActiveFilter as r, FilterConfig as s, ActiveFilter as t, FilterTypeResolver as u };
-//# sourceMappingURL=types-Bdi8Y7ll.d.mts.map
+//# sourceMappingURL=types-Ci-KTHfu.d.mts.map

package/dist/{types-BQP14Fng.d.mts → types-SYxBPX6o.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-5VknNr1T.mjs";
 import { o as StickerProps } from "./Sticker-CsUSNIH-.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
@@ -177,4 +177,4 @@ type BulkAction = {
 };
 //#endregion
 export { RowAction as C, RowDataWithTourTarget as D, RowDataWithSubrowsToAlwaysShowIds as E, SortProps as O, RenderValueStickerFormatConfig as S, RowDataWithSubrows as T, DataTableColumns as _, DataTableColumnBaseFormat as a, DatetimeConfig as b, DataTableColumnDatetimeFormat as c, DataTableColumnImageFormat as d, DataTableColumnNumberFormat as f, DataTableColumnURLFormat as g, DataTableColumnStringFormat as h, ColumnConfig as i, StickerMapping as k, DataTableColumnFormat as l, DataTableColumnStickerFormat as m, ClientFilterConfig as n, DataTableColumnCheckboxFormat as o, DataTableColumnPiiFormat as p, ClientFilterType as r, DataTableColumnDateFormat as s, BulkAction as t, DataTableColumnIDFormat as u, DataTableVariables as v, RowDataWithDetails as w, HeadlessFilterConfig as x, DateConfig as y };
-//# sourceMappingURL=types-BQP14Fng.d.mts.map
+//# sourceMappingURL=types-SYxBPX6o.d.mts.map

package/dist/types5.d.mts

@@ -1,2 +1,2 @@
-import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-Bdi8Y7ll.mjs";
+import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-Ci-KTHfu.mjs";
 export { ActiveFilter, AttributeColumn, BaseActiveFilter, BaseFilterConfig, ComboboxFilterConfig, DateRangeFilterConfig, FilterConfig, FilterRenderOptions, FilterTypeDefinition, FilterTypeResolver, InputFilterConfig, MultiSelectFilterConfig, SelectFilterConfig };

package/dist/useColumnConfiguration.d.mts

@@ -1,5 +1,5 @@
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CvN7tE98.mjs";
-import { i as ColumnConfig } from "./types-BQP14Fng.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-Gut16-vY.mjs";
+import { i as ColumnConfig } from "./types-SYxBPX6o.mjs";
 import { RowData } from "@tanstack/react-table";
 
 //#region patterns/IndexTableLayout/useColumnConfiguration.d.ts

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { p as FooterAction } from "./ComboboxBase-BMBdtP2Z.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useTableColumns-DdU0CLcU.d.mts → useTableColumns-PyxNyTD6.d.mts}

@@ -1,4 +1,4 @@
-import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-BQP14Fng.mjs";
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-SYxBPX6o.mjs";
 import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
 
 //#region components/DataTable/useTableColumns.d.ts
@@ -69,4 +69,4 @@ declare function useTableColumns<TData extends RowData, TFormat extends {
 }[]];
 //#endregion
 export { UseTableColumnsParams as n, useTableColumns as r, RenderFormatFn as t };
-//# sourceMappingURL=useTableColumns-DdU0CLcU.d.mts.map
+//# sourceMappingURL=useTableColumns-PyxNyTD6.d.mts.map

package/dist/useTableColumns.d.mts

@@ -1,2 +1,2 @@
-import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-DdU0CLcU.mjs";
+import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-PyxNyTD6.mjs";
 export { RenderFormatFn, UseTableColumnsParams, useTableColumns };

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-BMBdtP2Z.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/llms.txt

@@ -14,6 +14,7 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 ## Skills
 
 - [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), routing/link adapters (react-router, TanStack, custom), localization (PDSProvider strings/locale), loading states, testing, Storybook
+- [Product UI standard](skills/ui-authoring/STANDARD.md): the rules every screen meets (11 px minimum for copy and 8 px for labels inside charts and diagrams, WCAG AA contrast, reduced motion, status not by colour alone), the screen brief, and the `new-screen` task lane defined in `lanes.json`
 - [Tokens](skills/ui-authoring/TOKENS.md): semantic color tokens (Fg / Surface / Border / Action / Input / Feedback / Status / Opacity) with recipes and a dark-mode checklist; Spacing / Typography catalog, radius, elevation, charts
 - [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, index tables, indicators, feedback, empty states, charts, panels
 - [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
@@ -39,7 +40,7 @@ their own subpaths.
 - Modal close button: localize the default with `PDSProvider strings={{ closeModal: translatedLabel }}` (English: "Close"), or override one modal with `contentProps.closeButtonLabel`.
 - Forms: `ConfigFormGroup`, `FormField` (`TextField`, `TextAreaField`, `TableBoxField`), `Input`, `TextArea`, `Select`, `Combobox`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`
 - Status: `Sticker` (status badges), `Badge` (counts), `StatusIndicator`
-- Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views.
+- Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save and Duplicate (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
 - DataTable filters: pass `filtersV2` (`TableControlsFiltersV2Props` / `FilterBarProps`) through `DataTable.controls` or directly to `TableControls` for a first-class FilterBar; defaults visible with size derived from `compact`. Hosts own V2 data filtering and feed `onChange` back to `initialState` for active-filter messaging; hydration needs no remount key. Precedence: `filterPanel` → `filtersV2` → legacy `filters`. Legacy `filters` supports `input`, `select`, `multiselect`, `combobox`, and `daterange` with optional `filterResolver`. With `clientFiltering`, `column.filter` generates legacy-only controls backed by TanStack column-filter state, not V2 filtering.
 - SmartTextInput: when method chains are allowed (`ValueType.MethodChain` or `{{...}}` interpolation), you MUST pass `renderFunctionForm`. PDS does not build the function-parameter form, so without it the dialog opened by placing the cursor in a call like `convert_to(...)` shows only the function name over an empty body. It receives `FunctionFormRenderProps` and must call `onComplete(nodes)` or `onCancel()`. In persona-web, `useDashboardSmartTextInputProps` supplies it (backed by `InputMethodChain/FunctionForm`). See components/SmartTextInput/SmartTextInput.mdx.
 - FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -64,6 +64,7 @@
     "./components/RightPanel": "./dist/components/RightPanel/index.mjs",
     "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
     "./components/Select": "./dist/components/Select/index.mjs",
+    "./components/SelectionCard": "./dist/components/SelectionCard/index.mjs",
     "./components/Slider": "./dist/components/Slider/index.mjs",
     "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
     "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
@@ -242,7 +243,7 @@
     "jsdom": "^27.4.0",
     "lodash": "^4.18.1",
     "msw": "^2.12.14",
-    "playwright": "1.60.0",
+    "playwright": "1.61.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.30.5",
@@ -322,6 +323,7 @@
       "./components/RightPanel": "./dist/components/RightPanel/index.mjs",
       "./components/SegmentedControl": "./dist/components/SegmentedControl/index.mjs",
       "./components/Select": "./dist/components/Select/index.mjs",
+      "./components/SelectionCard": "./dist/components/SelectionCard/index.mjs",
       "./components/Slider": "./dist/components/Slider/index.mjs",
       "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
       "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -54,6 +54,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `RightPanel` | Complementary side panel for contextual updates while the page stays interactive (no overlay). Use `Modal` when the task needs full attention. See [Panels](../../patterns/Panels/Panels.mdx) | `@persona/design-system/components/RightPanel` |
 | `SegmentedControl` | Picking one option from a compact set of mutually exclusive choices | `@persona/design-system/components/SegmentedControl` |
 | `Select` | Dropdown — picking one value from a short, known list with no search. Use `Combobox` when the list needs search | `@persona/design-system/components/Select` |
+| `SelectionCard` | A visible choice where each option is a card. Single when one may be chosen, `multiple` when several may | `@persona/design-system/components/SelectionCard` |
 | `Slider` | Picking a numeric value or range along a scale | `@persona/design-system/components/Slider` |
 | `SmartTextInput` | Authoring a value that mixes plain text with structured data references — `{{account.id}}` interpolation or a single `account.id` method chain, with autocomplete, syntax highlighting and schema validation. Use `Input` for plain text. Method chains REQUIRE `renderFunctionForm` (otherwise the function dialog is empty) — see its `.mdx` | `@persona/design-system/components/SmartTextInput` |
 | `Spacer` | Prefer `Stack` — leftover gap helper | `@persona/design-system/components/Spacer` |