@persona/design-system 0.10.2 → 0.10.4

package/dist/TableControls.d.mts

@@ -1,2 +1,2 @@
-import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "./TableControls-DCtTiWk6.mjs";
+import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "./TableControls-ETB0Xk5X.mjs";
 export { TableControlsFiltersV2Props, TableControlsProps, TableControls as default };

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

@@ -1,2 +1,2 @@
-import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-C2ThOYJ-.mjs";
+import { n as BreadcrumbsItemProps, r as BreadcrumbsProps, t as Breadcrumbs } from "../../Breadcrumbs-47jYLqNP.mjs";
 export { Breadcrumbs, Breadcrumbs as default, BreadcrumbsItemProps, BreadcrumbsProps };

package/dist/components/Breadcrumbs/index.mjs

@@ -1,2 +1,2 @@
-import { t as Breadcrumbs } from "../../Breadcrumbs-CQUe9VTM.mjs";
+import { t as Breadcrumbs } from "../../Breadcrumbs-gRAsKF4R.mjs";
 export { Breadcrumbs, Breadcrumbs as default };

package/dist/components/Combobox/index.mjs

@@ -1,2 +1,2 @@
-import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-BXHCfVpE.mjs";
+import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-CBM-oY-e.mjs";
 export { CaretButton, Combobox, Combobox as default, flattenOptions };

package/dist/components/ConfigFormGroup/index.mjs

@@ -1,3 +1,3 @@
 import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-CsKC93Pt.mjs";
-import { t as ConfigFormGroup } from "../../ConfigFormGroup-BE3yR_VU.mjs";
+import { t as ConfigFormGroup } from "../../ConfigFormGroup-CidT_cE9.mjs";
 export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };

package/dist/components/DataTable/TableControls/index.d.mts

@@ -1,12 +1,12 @@
-import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-D9KflqmH.mjs";
+import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-RIz-xjxs.mjs";
 import { a as FilterConditionOperator, c as FilterFieldType, d as FilterRuleValue, f as FilterRuleValueChange, g as isEmptyState, h as TopLevelFilterRule, i as EMPTY_FILTER_STATE, l as FilterOperator, m as FilterStateV2, n as CompoundExpression, o as FilterField, p as FilterSize, r as DateRangeFilterValue, s as FilterFieldSource, t as AndGroup, u as FilterRule } from "../../../types-EodOhsjw.mjs";
 import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-B5E-GN91.mjs";
 import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-C-UrXVlB.mjs";
 import { t as FilterBar } from "../../../FilterBar-BQWpTi2b.mjs";
 import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "../../../types-CrRWZ0Ia.mjs";
 import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-BvOlDkJy.mjs";
-import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "../../../TableControls-DCtTiWk6.mjs";
-import { n as DataTableCompactBar } from "../../../CompactBar-CfrrZ69k.mjs";
+import { n as TableControlsFiltersV2Props, r as TableControlsProps, t as TableControls } from "../../../TableControls-ETB0Xk5X.mjs";
+import { n as DataTableCompactBar } from "../../../CompactBar-D9egXqY_.mjs";
 import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-CzJCMrSe.mjs";
 import { a as resolveFilterTypeDefinition, i as isFilterActive, n as FiltersContainer, r as getActiveFilters } from "../../../filters-jG9Y3UKb.mjs";
 import { t as dateRuleIntent } from "../../../date-rule-intent-C5C8HB1v.mjs";

package/dist/components/DataTable/TableControls/index.mjs

@@ -1,2 +1,2 @@
-import { A as isNumericComparisonOperator, B as useTableControls, C as useFilterBarSize, D as getOperatorsForField, E as getDefaultOperatorForType, F as getActiveFilters, H as DataTableCompactBar, I as isFilterActive, L as resolveFilterTypeDefinition, M as isValuelessOperator, N as reconcileValueForOperator, O as getOperatorsForType, P as FiltersContainer, R as TableControlsContext, S as FILTER_SIZE_TOKENS, T as emptyValueForRule, V as ControlBar, _ as EMPTY_FILTER_STATE, a as encodeFilterStateToUrlParam, b as resolveValueControl, c as FilterBar_default, d as TableViewConfiguration, f as TableViewConfigurationDropdown, g as pruneToRegistry, h as isFilterStateV2, i as decodeFilterStateFromUrl, j as isRangeOperator, k as isCompleteDateRange, l as resolveDateRangeRuleValue, m as hasCompleteValue, n as applyFilterStateToSearchParams, o as FieldRegistry, p as useFilterStateV2, r as decodeFilterStateFromString, s as buildFieldRegistry, t as FILTER_STATE_URL_PARAM, u as TableControls, v as isEmptyState, w as NUMERIC_COMPARISON_OPERATORS, x as dateRuleIntent, y as PillShell, z as TableControlsProvider } from "../../../TableControls-C5fNNdmT.mjs";
+import { A as isNumericComparisonOperator, B as useTableControls, C as useFilterBarSize, D as getOperatorsForField, E as getDefaultOperatorForType, F as getActiveFilters, H as DataTableCompactBar, I as isFilterActive, L as resolveFilterTypeDefinition, M as isValuelessOperator, N as reconcileValueForOperator, O as getOperatorsForType, P as FiltersContainer, R as TableControlsContext, S as FILTER_SIZE_TOKENS, T as emptyValueForRule, V as ControlBar, _ as EMPTY_FILTER_STATE, a as encodeFilterStateToUrlParam, b as resolveValueControl, c as FilterBar_default, d as TableViewConfiguration, f as TableViewConfigurationDropdown, g as pruneToRegistry, h as isFilterStateV2, i as decodeFilterStateFromUrl, j as isRangeOperator, k as isCompleteDateRange, l as resolveDateRangeRuleValue, m as hasCompleteValue, n as applyFilterStateToSearchParams, o as FieldRegistry, p as useFilterStateV2, r as decodeFilterStateFromString, s as buildFieldRegistry, t as FILTER_STATE_URL_PARAM, u as TableControls, v as isEmptyState, w as NUMERIC_COMPARISON_OPERATORS, x as dateRuleIntent, y as PillShell, z as TableControlsProvider } from "../../../TableControls-qxoq5abn.mjs";
 export { ControlBar, DataTableCompactBar, EMPTY_FILTER_STATE, FILTER_SIZE_TOKENS, FILTER_STATE_URL_PARAM, FieldRegistry, FilterBar_default as FilterBar, FiltersContainer, NUMERIC_COMPARISON_OPERATORS, PillShell, TableControlsContext, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, applyFilterStateToSearchParams, buildFieldRegistry, dateRuleIntent, decodeFilterStateFromString, decodeFilterStateFromUrl, TableControls as default, emptyValueForRule, encodeFilterStateToUrlParam, getActiveFilters, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isCompleteDateRange, isEmptyState, isFilterActive, isFilterStateV2, isNumericComparisonOperator, isRangeOperator, isValuelessOperator, pruneToRegistry, reconcileValueForOperator, resolveDateRangeRuleValue, resolveFilterTypeDefinition, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

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

@@ -1,6 +1,6 @@
 import { C as RowAction, D as RowDataWithTourTarget, E as RowDataWithSubrowsToAlwaysShowIds, O as SortProps, S as RenderValueStickerFormatConfig, T as RowDataWithSubrows, _ as DataTableColumns, a as DataTableColumnBaseFormat, b as DatetimeConfig, c as DataTableColumnDatetimeFormat, d as DataTableColumnImageFormat, f as DataTableColumnNumberFormat, g as DataTableColumnURLFormat, h as DataTableColumnStringFormat, i as ColumnConfig, k as StickerMapping, l as DataTableColumnFormat, m as DataTableColumnStickerFormat, n as ClientFilterConfig, o as DataTableColumnCheckboxFormat, p as DataTableColumnPiiFormat, r as ClientFilterType, s as DataTableColumnDateFormat, t as BulkAction, u as DataTableColumnIDFormat, v as DataTableVariables, w as RowDataWithDetails, x as HeadlessFilterConfig, y as DateConfig } from "../../types-DxJyE_U8.mjs";
 import { r as useTableColumns, t as RenderFormatFn } from "../../useTableColumns-DSXRInPb.mjs";
-import { a as FloatingActionBarContainer, i as DataTableProps, n as DataTableContainer, r as DataTableControls, t as DataTable } from "../../DataTable-BdKUCgcZ.mjs";
+import { a as FloatingActionBarContainer, i as DataTableProps, n as DataTableContainer, r as DataTableControls, t as DataTable } from "../../DataTable-D15C5lfd.mjs";
 import { t as FloatingActionBar } from "../../FloatingActionBar-CpvLefPm.mjs";
 import { t as Inserter } from "../../Inserter-BKVrJ4M5.mjs";
 import { n as getFilterFnName, t as generateClientFilters } from "../../clientFilterUtils-BqDn44aM.mjs";

package/dist/components/DataTable/index.mjs

@@ -1,2 +1,2 @@
-import { S as getFilterFnName, _ as renderAsString, a as useTableColumns, b as getColumnWidths, c as renderAsCheckboxHeader, d as renderAsDatetime, f as renderAsLightweightImage, g as renderAsSticker, h as renderAsPii, i as FloatingActionBarContainer, l as renderAsCopyableString, m as renderAsPDSFormat, n as DataTableContainer, o as Inserter, p as renderAsNumber, r as DataTableControls, s as renderAsCheckbox, t as DataTable, u as renderAsDate, v as renderAsURL, x as generateClientFilters, y as FloatingActionBar } from "../../DataTable-F9R-aQCg.mjs";
+import { S as getFilterFnName, _ as renderAsString, a as useTableColumns, b as getColumnWidths, c as renderAsCheckboxHeader, d as renderAsDatetime, f as renderAsLightweightImage, g as renderAsSticker, h as renderAsPii, i as FloatingActionBarContainer, l as renderAsCopyableString, m as renderAsPDSFormat, n as DataTableContainer, o as Inserter, p as renderAsNumber, r as DataTableControls, s as renderAsCheckbox, t as DataTable, u as renderAsDate, v as renderAsURL, x as generateClientFilters, y as FloatingActionBar } from "../../DataTable-DQ8axNfo.mjs";
 export { DataTable, DataTable as default, DataTableContainer, DataTableControls, FloatingActionBar, FloatingActionBarContainer, Inserter, generateClientFilters, getColumnWidths, getFilterFnName, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL, useTableColumns };

package/dist/components/DatePicker/index.mjs

@@ -1,2 +1,2 @@
-import { a as RangeCalendar, i as DateField, n as Calendar, r as DateRangePicker, t as DatePicker } from "../../DatePicker-CkNQjfCN.mjs";
+import { a as RangeCalendar, i as DateField, n as Calendar, r as DateRangePicker, t as DatePicker } from "../../DatePicker-D0cvVbzq.mjs";
 export { Calendar, DateField, DatePicker, DatePicker as default, DateRangePicker, RangeCalendar };

package/dist/components/FormField/index.mjs

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

package/dist/components/HoverCopyableField/index.mjs

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

package/dist/components/Link/index.mjs

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

package/dist/components/ListBox/index.mjs

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

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-IJdbLORi.mjs";
+import { i as Modal_default, n as ModalContent, r as ModalTrigger, t as ModalClose } from "../../Modal-kjUptzg1.mjs";
 export { ModalClose, ModalContent, ModalTrigger, Modal_default as default };

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

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

package/dist/components/PageHeader/index.mjs

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

package/dist/components/Pagination/index.mjs

@@ -1,2 +1,2 @@
-import { a as MIN_PAGE_SIZE, i as DEFAULT_PAGE_SIZE_OPTIONS, n as PAGE_LIMIT_BEFORE_SCROLL_MODE, r as PageSelector, t as Pagination_default } from "../../Pagination-C5ANr9M0.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-DtK-jbEY.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-G16_b7Yk.mjs";
+import { t as Pii_default } from "../../Pii-DueIK287.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-532iYFek.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-BcII7usF.mjs";
 export { PopoverAnchor, PopoverCard, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Popover_default as default };

package/dist/components/Select/index.mjs

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

package/dist/components/SelectionCard/index.mjs

@@ -8,7 +8,7 @@ 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 { 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
@@ -63,33 +63,41 @@ 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. */
+/** 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;
-  min-height: ${Spacing[5]};
+  height: ${CONTROL_SIZE};
   color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
 
   svg {
-    width: 16px;
-    height: 16px;
+    width: ${CONTROL_SIZE};
+    height: ${CONTROL_SIZE};
   }
-
-  ${({ $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]};
+  height: ${CONTROL_SIZE};
 
   /* The card draws the only focus ring and the only disabled fade. */
   && input:focus-visible ~ [aria-hidden] {
@@ -116,7 +124,7 @@ const TooltipTrigger = styled.span`
   width: 100%;
   align-self: stretch;
 `;
-const SelectionCard = ({ value, label, description, icon, iconBackground = false, disabled: disabledProp, disabledReason, name, checked = false, onChange, multiple = false, className }) => {
+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,
@@ -133,18 +141,18 @@ const SelectionCard = ({ value, label, description, icon, iconBackground = false
 					disabled,
 					onChange: (event) => onChange?.(event.target.checked)
 				}) }),
-				icon && /* @__PURE__ */ jsx(IconSlot, {
-					$background: iconBackground,
-					children: icon
-				}),
+				icon && /* @__PURE__ */ jsx(IconSlot, { children: icon }),
 				/* @__PURE__ */ jsxs(Copy, {
 					spacing: Spacing[1],
-					children: [/* @__PURE__ */ jsx(Paragraph, {
-						as: "span",
-						size: "lg",
-						weight: "bold",
-						color: disabled ? "disabled" : "primary",
-						children: label
+					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",

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

@@ -1 +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":";;;;;;;;;;;;;;AA4CA,MAAM,WAAW,OAAO,KAAiD;;;;;;;;aAQ5D,EAAE,gBAAiB,YAAY,YAAY,UAAW;qBAC9C,EAAE,gBAAiB,YAAY,SAAS,OAAQ;oBACjD,EAAE,YAAY,MAAM,KAAK,aAAa;;;;;MAKpD,WAAW;;;;OAIV,EAAE,OAAO,WAAW,gBAAgB;AACrC,KAAI,UACF,QAAO,cAAc,OAAO,uBAAuB,MAAM,oBAAoB;AAE/E,KAAI,UACF,QAAO,cAAc,OAAO,gBAAgB,MAAM,MAAM,QAAQ,MAAM;AAExE,QAAO,cAAc,OAAO,iBAAiB,MAAM,MAAM,OAAO,MAAM;EACtE;;uBAEiB,EAAE,OAAO,WAAW,gBAAgB;AACvD,KAAI,UACF,QAAO,cAAc,OAAO,wBAAwB,MAAM,wBAAwB;AAEpF,KAAI,WAAW;EACb,MAAM,SAAS,eAAe,MAAM;AACpC,SAAO,SACH,UAAU,OAAO,eAAe,OAAO,UAAU,GACjD,MAAM,MAAM,WAAW;;AAE7B,QAAO,cAAc,OAAO,kBAAkB,MAAM,MAAM,WAAW,QAAQ;EAC7E;;KAEC,EAAE,WAAW,gBACd,CAAC,aACD,CAAC,aACD,GAAG;;6BAEsB,EAAE,YACrB,cAAc,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;;MAE3E;;KAED,EAAE,gBACH,aACA,GAAG;QACC,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;MACvE;;AAGN,MAAM,OAAO,OAAO,GAAG;aACV,QAAQ,GAAG;;AAGxB,MAAM,OAAO,OAAO,MAAM;;;;;AAM1B,MAAM,WAAW,OAAO,IAA8B;;;;;;gBAMtC,QAAQ,GAAG;YACf,EAAE,YAAY,cAAc,OAAO,aAAa,MAAM,MAAM,KAAK,QAAQ,CAAC;;;;;;;KAOjF,EAAE,aAAa,YAChB,eACA,GAAG;eACQ,QAAQ,GAAG;gBACV,QAAQ,GAAG;uBACJ,MAAM,KAAK,aAAa;0BACrB,cAAc,OAAO,oBAAoB,MAAM,MAAM,WAAW,UAAU,CAAC;MAC/F;;AAEN,MAAM,SAAS,OAAO,IAAI;;;;YAId,QAAQ,GAAG;;;;;;;;;;;AAYvB,MAAM,cAAc,OAAO,KAAK;;;;;;;;;;AAWhC,MAAM,iBAAiB,OAAO,IAAI;;;;;;AAOlC,MAAa,iBAAiB,EAC5B,OACA,OACA,aACA,MACA,iBAAiB,OACjB,UAAU,cACV,gBACA,MACA,UAAU,OACV,UACA,WAAW,OACX,gBACwB;CAExB,MAAM,WAAW,CAAC,CADJ,aAAa,EAAE,UAAU,gBAAgB,KAAA,GAAW,CAC1C,CAAC;CACzB,MAAM,OACJ,qBAAC,UAAD;EAAqB;EAAW,WAAW;EAAS,WAAW;YAA/D,CACE,oBAAC,MAAD,EAAA,UACE,qBAAC,QAAD;GAAQ,OAAM;GAAa,SAAS,OAAO,QAAQ,KAAK,QAAQ;aAAhE;IACG,YACC,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;KACQ;KACC;KACE;KACC;KACV,WAAW,UAAU,WAAW,MAAM,OAAO,QAAQ;KACrD,CAAA,EACK,CAAA;IAEV,QAAQ,oBAAC,UAAD;KAAU,aAAa;eAAiB;KAAgB,CAAA;IACjE,qBAAC,MAAD;KAAM,SAAS,QAAQ;eAAvB,CACE,oBAAC,WAAD;MAAW,IAAG;MAAO,MAAK;MAAK,QAAO;MAAO,OAAO,WAAW,aAAa;gBACzE;MACS,CAAA,EACX,eACC,oBAAC,WAAD;MACE,IAAG;MACH,MAAK;MACL,OAAO,WAAW,aAAa,UAAU,YAAY;gBAEpD;MACS,CAAA,CAET;;IACA;MACJ,CAAA,EACN,CAAC,YACA,oBAAC,aAAD;GACE,MAAK;GACC;GACC;GACE;GACC;GACV,gBAAgB,WAAW,KAAK;GAChC,CAAA,CAEK;;AAGb,KAAI,YAAY,eACd,QAAO,oBAAC,SAAD;EAAS,SAAS,oBAAC,gBAAD,EAAA,UAAiB,MAAsB,CAAA;YAAG;EAAyB,CAAA;AAG9F,QAAO;;;;ACvLT,MAAM,kBAAkB,aACtB,SAAS,QAAQ,SAAS,CAAC,QACxB,UACC,eAAe,MAAM,IAAI,MAAM,SAAS,cAC3C;AAEH,MAAM,wBAAwB,aAC5B,eAAe,SAAS,CAAC,MAAM,SAAS,CAAC,KAAK,MAAM,SAAS,EAAE,MAAM;AAEvE,MAAM,eAAe,UAAqB,UAAoB;CAC5D,MAAM,SAAS,eAAe,SAAS,CAAC,WAAW,KAAK,CAAC;AACzD,QAAO;EACL,SAAS;EACT,WAAW,SAAU,eAA0B;EAC/C,OAAO;EACP,OAAO,SAAU,YAAsB,KAAA;EACxC;;AAGH,MAAM,QAAQ,OAAO,MAAM;KACtB,EAAE,cACH,WACA,GAAG;;;;;;MAMD;;AAEN,MAAM,eACJ,UACA,aAEA,SAAS,IAAI,WAAW,UAAU;AAChC,KAAI,CAAC,eAAe,MAAM,IAAI,MAAM,SAAS,cAC3C,QAAO;CAET,MAAM,OAAO;AACb,QAAO,aAAa,MAAM,SAAS,KAAK,MAAM,CAAC;EAC/C;AAEJ,MAAM,eAAe,EACnB,MACA,WACA,OACA,UACA,OAAO,WACP,cACA,UACA,cAAc,WACd,mBAAmB,gBACnB,iBAAiB,mBACkB;CACnC,MAAM,QAAQ,WAAW,mBAAmB;CAC5C,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS,iBAAiB,MAAM,WAAW,KAAA,IAAY,qBAAqB,SAAS;EACtF,CAAC;AAEF,QACE,oBAAC,OAAD;EACE,GAAI,YAAY,UAAU,MAAM;EACrB;EACX,SAAS,QAAQ;EACjB,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe;YAEd,YAAY,WAAW,UAAU;GAChC;GACA,UAAU;GACV,SAAS,KAAK,UAAU;GACxB,gBAAgB;AACd,QAAI,MAAM,YAAY,KAAK,SACzB;AAEF,aAAS,KAAK,MAAM;AACpB,eAAW,KAAK,MAAM;;GAEzB,EAAE;EACG,CAAA;;AAIZ,MAAM,iBAAiB,EACrB,MACA,WACA,OACA,UACA,OAAO,WACP,cACA,UACA,cAAc,WACd,mBAAmB,qBACkB;CACrC,MAAM,QAAQ,WAAW,mBAAmB;CAC5C,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS,gBAAgB,EAAE;EAC5B,CAAC;CACF,MAAM,WAAW,SAAS,EAAE;AAE5B,QACE,oBAAC,OAAD;EACE,GAAI,YAAY,UAAU,MAAM;EACrB;EACX,SAAS,QAAQ;EACjB,MAAK;EACL,cAAY;EACZ,mBAAiB;YAEhB,YAAY,WAAW,UAAU;GAChC;GACA,UAAU;GACV,SAAS,SAAS,SAAS,KAAK,MAAM;GACtC,WAAW,YAAqB;AAC9B,QAAI,MAAM,YAAY,KAAK,SACzB;IAEF,MAAM,OAAO,UACT,SAAS,SAAS,KAAK,MAAM,GAC3B,WACA,CAAC,GAAG,UAAU,KAAK,MAAM,GAC3B,SAAS,QAAQ,SAAS,SAAS,KAAK,MAAM;AAClD,aAAS,KAAK;AACd,eAAW,KAAK;;GAEnB,EAAE;EACG,CAAA;;AAIZ,MAAa,sBAAsB,UAAmC;CACpE,MAAM,QAAQ,WAAW,mBAAmB;AAE5C,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;GAAE,GAAG;GAAO,SAAS,KAAA;GAAW;YACjE,MAAM,WAAW,oBAAC,eAAD,EAAe,GAAI,OAAS,CAAA,GAAG,oBAAC,aAAD,EAAa,GAAI,OAAS,CAAA;EAC/C,CAAA"}
+{"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-D0y1uRV5.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-AnIk8d9M.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-CmuWqmVN.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.mjs

@@ -1,2 +1,2 @@
-import { n as TableBoxContext, t as TableBox } from "../../TableBox-BRJunn09.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,8 +6,8 @@ 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-AnIk8d9M.mjs";
-import { i as Modal_default } from "../../Modal-IJdbLORi.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";
 import { Color, Spacing } from "@persona/design-tokens";

package/dist/patterns/IndexTableLayout/index.mjs

@@ -1,6 +1,6 @@
 import { t as Card_default } from "../../Card-BXNxWX5C.mjs";
-import { t as DataTable } from "../../DataTable-F9R-aQCg.mjs";
-import { t as PageHeader } from "../../PageHeader-DJF7nxgN.mjs";
+import { t as DataTable } from "../../DataTable-DQ8axNfo.mjs";
+import { t as PageHeader } from "../../PageHeader-D2j2XHD9.mjs";
 import { a as Section, i as Container } from "../../PageLayout-fXJW7daI.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -2,8 +2,8 @@ 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-CmuWqmVN.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-DJF7nxgN.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-D2j2XHD9.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region patterns/containers.tsx

package/dist/patterns/WizardModal/index.mjs

@@ -2,7 +2,7 @@ import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { t as HStack } from "../../Stack-BkC7FCdF.mjs";
 import { n as Button } from "../../IconButton-HWx5Hlmi.mjs";
-import { i as Modal_default } from "../../Modal-IJdbLORi.mjs";
+import { i as Modal_default } from "../../Modal-kjUptzg1.mjs";
 import { t as ProgressIndicator } from "../../ProgressIndicator-CM37EU1B.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useState } from "react";

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.2",
+  "version": "0.10.4",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -243,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",

package/skills/ui-authoring/SKILL.md

@@ -8,6 +8,13 @@ metadata:
 
 # UI Authoring
 
+## Product UI standard
+
+Building a screen in an app? [STANDARD.md](STANDARD.md) holds the rules every screen meets: text the
+user reads is at least 11 px (8 px for a label inside a chart or diagram), contrast meets WCAG AA in light and dark, motion honours
+`prefers-reduced-motion`, and status never relies on colour alone. It also defines the `new-screen`
+lane for building one screen with no designer. Read it first, then the sections below.
+
 ## Design Tokens
 
 ```tsx
@@ -184,6 +191,7 @@ Add `ComponentName.stories.tsx` for every new component or visual variant.
 
 ## Resources
 
+- [STANDARD.md](STANDARD.md) — product UI standard: accessibility values, screen brief, `new-screen` lane ([lanes.json](lanes.json)), checks, departures
 - [TOKENS.md](TOKENS.md) — semantic color tokens (Fg / Surface / Border / Action / Input / Feedback / Status / Opacity), recipes and dark-mode checklist; Spacing / Typography catalog, radius, elevation, charts
 - [PATTERNS.md](PATTERNS.md) — forms, layout, panels, indicators, feedback, empty states
 - [COMPONENTS.md](COMPONENTS.md) — which PDS component to use, and its import path; APIs live in each component's `.mdx`