@persona/design-system 0.10.1 → 0.10.2

package/dist/components/SelectionCard/index.mjs

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

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

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

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-D0y1uRV5.mjs";
 import PillType from "./PillType.mjs";
 import { ErrorMessageByKind, NodeType, isASTChainNode, isASTContainerNode, isMethodChainNode } from "./parser/smart-text/types.mjs";
 import { parse as peg$parse } from "./parser/smart-text/parser.mjs";

package/dist/components/Spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../../Spinner-uVZyOh1T.mjs";
+import { t as Spinner } from "../../Spinner-AnIk8d9M.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-CmuWqmVN.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-Cag3ZYRs.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-BRJunn09.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-uVZyOh1T.mjs";
-import { i as Modal_default } from "../../Modal-kjUptzg1.mjs";
+import { t as Spinner } from "../../Spinner-AnIk8d9M.mjs";
+import { i as Modal_default } from "../../Modal-IJdbLORi.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/fieldPickerOptions.d.mts

@@ -1,4 +1,4 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-B7ZcqU9p.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-BlNi9OnF.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-jG9Y3UKb.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-CrRWZ0Ia.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-jG9Y3UKb.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-jG9Y3UKb.mjs";
 export { Filters, FiltersContainer, getActiveFilters, isFilterActive, resolveFilterTypeDefinition, synchronizeActiveFilters };

package/dist/{helpers-Dqw5PEva.d.mts → helpers-DCIto6aY.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-DxJyE_U8.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-DCIto6aY.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-DCIto6aY.mjs";
 export { PDSFormatOptions, renderAsCheckbox, renderAsCheckboxHeader, renderAsCopyableString, renderAsDate, renderAsDatetime, renderAsLightweightImage, renderAsNumber, renderAsPDSFormat, renderAsPii, renderAsSticker, renderAsString, renderAsURL };

package/dist/{index-Ck939aXd.d.mts → index-C3uFHTo0.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-CXFI-0nG.mjs";
+import { n as LogicRowProps } from "./LogicRow-8oYRkwz5.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-C3uFHTo0.d.mts.map

package/dist/{inputFields-DVLg_2wz.d.mts → inputFields-mUsms2tO.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-DbTYO-Yz.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-Cd6VYdwr.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-CSbamhJO.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-mUsms2tO.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-mUsms2tO.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-F9R-aQCg.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-CmuWqmVN.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/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-kjUptzg1.mjs";
+import { i as Modal_default } from "../../Modal-IJdbLORi.mjs";
 import { t as ProgressIndicator } from "../../ProgressIndicator-CM37EU1B.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useState } from "react";

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

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-Bm2eSg56.mjs";
+import { n as ComboboxProps } from "./Combobox-D0dMN5eY.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-CrRWZ0Ia.d.mts.map

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

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-CrThaUX2.mjs";
+import { l as MenuItemProps } from "./Menu-DHnQZ5yN.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-DxJyE_U8.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-CrRWZ0Ia.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-BvOlDkJy.mjs";
+import { i as ColumnConfig } from "./types-DxJyE_U8.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-BlNi9OnF.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useTableColumns-DdU0CLcU.d.mts → useTableColumns-DSXRInPb.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-DxJyE_U8.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-DSXRInPb.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-DSXRInPb.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-BlNi9OnF.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "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",
@@ -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` |

package/skills/ui-authoring/PATTERNS.md

@@ -26,7 +26,11 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 ## Page layouts
 
 Index pages backed by `DataTable` use `IndexTableLayout`, which owns its `Container`, `PageHeader`,
-`Section`, and `Card` shell. Other pages render `PageHeader`, then `SingleColumnLayout` or
+`Section`, and `Card` shell. Import it from `@persona/design-system/patterns/IndexTableLayout`;
+never copy it, persona-web's `DashboardDataTable` wrapper (PDS does not ship one), or
+`TableControls`/filter panels into an app. Pass app-specific filters through the `controls` prop
+(`controls={{ filters, filterResolver }}` or `controls={{ filterPanel }}`), and if the pattern lacks
+a slot you need, add it here instead of forking the layout. Other pages render `PageHeader`, then `SingleColumnLayout` or
 `SplitColumnLayout`. Do not wrap those templates in `Container` or `Section`.
 
 ```tsx