@persona/design-system 0.7.1 → 0.8.0

package/dist/ProgressIndicator-CQg08vuA.mjs

@@ -0,0 +1,188 @@
+import { a as styled, o as useTheme, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticTokens } from "./lib/semanticColor.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { withAlpha } from "./lib/color.mjs";
+import { focusOutline } from "./mixins/focus.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckFillIcon, CircleFillIcon, CircleNullIcon, CircleWarningFillIcon, WarningFillIcon } from "@persona/icons";
+//#region components/ProgressIndicator/ProgressIndicator.tsx
+/**
+* Completed, warning, and error steps can be navigated back to.
+* The current step (first uncompleted or error) is also clickable so the user can
+* return to it after navigating back to an earlier step.
+* Active and upcoming steps (beyond the current) are not clickable.
+*/
+function resolveClickable(status, isActive, isDisabled, isCurrent) {
+	if (isDisabled || isActive) return false;
+	return status === "completed" || status === "warning" || status === "error" || isCurrent;
+}
+function resolveIcon(status, isCurrent) {
+	if (status === "completed") return CircleCheckFillIcon;
+	if (status === "warning") return WarningFillIcon;
+	if (status === "error") return CircleWarningFillIcon;
+	if (isCurrent) return CircleFillIcon;
+	return CircleNullIcon;
+}
+function resolveIconColor(theme, status, isActive, isDisabled) {
+	if (isDisabled) return semanticColor(theme, "FgDisabled", Color.BorderIconDisabled);
+	if (status === "completed") return semanticColor(theme, "StatusSuccess3", Color.BorderIconSuccess);
+	if (status === "warning") return semanticColor(theme, "FgWarning1", Color.BorderIconWarning);
+	if (status === "error") return semanticColor(theme, "StatusDanger4", Color.BorderIconDanger);
+	return isActive ? semanticColor(theme, "FgAccent", Color.BorderIconActive) : semanticColor(theme, "FgSecondary", Color.BorderIconSecondary);
+}
+function resolveTextColor(theme, status, isActive, isDisabled) {
+	if (isDisabled) return semanticColor(theme, "FgDisabled", Color.TextDisabled);
+	if (isActive) return semanticColor(theme, "FgAccent", Color.TextActive);
+	if (status === "uncompleted") return semanticColor(theme, "FgSecondary", Color.TextSecondary);
+	return semanticColor(theme, "FgPrimary", Color.TextPrimary);
+}
+const StepList = styled.ol`
+  display: flex;
+  flex-direction: ${({ $layout }) => $layout === "horizontal" ? "row" : "column"};
+  gap: ${({ $layout }) => $layout === "horizontal" ? Spacing[2] : "0px"};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const StepItem = styled.li`
+  display: flex;
+  align-items: center;
+
+  ${({ $layout }) => $layout === "horizontal" && css`
+      width: fit-content;
+      white-space: nowrap;
+    `}
+`;
+const StepContent = styled.button`
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  width: 100%;
+  padding: ${Spacing[2]};
+  border-radius: ${BorderRadius.Md};
+  border: none;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  outline: none;
+  cursor: ${({ $isClickable, $interactive }) => $interactive && $isClickable ? "pointer" : "default"};
+
+  ${({ theme, $isActive, $isClickable, $interactive }) => {
+	const tokens = semanticTokens(theme);
+	if ($isActive) return css`
+        background-color: ${tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.BackgroundInteractiveActive};
+      `;
+	if ($interactive && $isClickable) return css`
+        background-color: ${tokens ? "transparent" : Color.BackgroundInteractiveDefault};
+        &:hover {
+          background-color: ${semanticColor(theme, "SurfaceSecondary", Color.BackgroundInteractiveHover)};
+        }
+      `;
+	return css`
+      background-color: transparent;
+    `;
+}}
+
+  ${focusOutline}
+
+  &:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+`;
+const IconWrapper = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: ${({ $color }) => $color};
+  line-height: 0;
+`;
+const StepLabel = styled.span`
+  ${({ $isActive }) => $isActive ? paragraphMixins.mdBold : paragraphMixins.md};
+  color: ${({ $color }) => $color};
+`;
+const Step = ({ step, isActive, isCurrent, layout, onStepClick }) => {
+	const { id, label, status = "uncompleted", disabled = false } = step;
+	const interactive = Boolean(onStepClick);
+	const isClickable = resolveClickable(status, isActive, disabled, isCurrent);
+	const isInteractionDisabled = disabled || !isActive && !isCurrent && status === "uncompleted";
+	const theme = useTheme();
+	const iconColor = resolveIconColor(theme, status, isActive, disabled);
+	const textColor = resolveTextColor(theme, status, isActive, disabled);
+	const Icon = resolveIcon(status, isCurrent);
+	return /* @__PURE__ */ jsx(StepItem, {
+		$layout: layout,
+		"aria-current": !interactive && isActive ? "step" : void 0,
+		"aria-disabled": !interactive && isInteractionDisabled ? true : void 0,
+		children: /* @__PURE__ */ jsxs(StepContent, {
+			...interactive && isClickable ? {
+				type: "button",
+				onClick: () => onStepClick?.(id)
+			} : { as: "div" },
+			"aria-current": interactive && isActive ? "step" : void 0,
+			"aria-disabled": interactive && isInteractionDisabled ? true : void 0,
+			$isActive: isActive,
+			$isClickable: isClickable,
+			$interactive: interactive,
+			children: [/* @__PURE__ */ jsx(IconWrapper, {
+				$color: iconColor,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(Icon, {})
+			}), /* @__PURE__ */ jsx(StepLabel, {
+				$isActive: isActive,
+				$color: textColor,
+				children: label
+			})]
+		})
+	});
+};
+/**
+* ProgressIndicator guides users through a sequence of steps.
+*
+* Interaction rules:
+* - **Completed / warning / error** steps are clickable — navigate back to review or fix.
+* - **Warning** does not block forward progression; later uncompleted steps remain reachable.
+* - **Error** blocks forward progression — treat it as the terminal step in the sequence.
+* - **Active** step is not clickable — the user is already there.
+* - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
+*
+* Navigation does not clear later steps. If a change on an earlier step
+* invalidates later data, the affected steps should be flagged and require
+* re-confirmation before submission — this logic lives in the consuming component.
+*
+* @example
+* ```tsx
+* <ProgressIndicator
+*   steps={[
+*     { id: 'identity', label: 'Identity', status: 'completed' },
+*     { id: 'address',  label: 'Address',  status: 'uncompleted' },
+*     { id: 'review',   label: 'Review',   status: 'uncompleted' },
+*   ]}
+*   activeStepId="address"
+*   onStepClick={(id) => navigate(id)}
+* />
+* ```
+*/
+const ProgressIndicator = ({ steps, activeStepId, layout = "vertical", onStepClick, "aria-label": ariaLabel = "Progress", ...rest }) => {
+	const currentStepId = steps.find(({ status = "uncompleted" }) => status === "uncompleted" || status === "error")?.id;
+	return /* @__PURE__ */ jsx(StepList, {
+		$layout: layout,
+		role: "list",
+		"aria-label": ariaLabel,
+		...rest,
+		children: steps.map((step) => /* @__PURE__ */ jsx(Step, {
+			step,
+			isActive: step.id === activeStepId,
+			isCurrent: step.id === currentStepId,
+			layout,
+			onStepClick
+		}, step.id))
+	});
+};
+//#endregion
+export { ProgressIndicator as t };
+
+//# sourceMappingURL=ProgressIndicator-CQg08vuA.mjs.map

package/dist/ProgressIndicator-CQg08vuA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator-CQg08vuA.mjs","names":[],"sources":["../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css, useTheme } from 'styled-components';\n\nimport { focusOutline } from '@persona/design-system/mixins/focus';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n  CircleWarningFillIcon,\n  WarningFillIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\nimport { withAlpha } from 'design-system/lib/color';\nimport {\n  type MaybeSemanticTheme,\n  semanticColor,\n  semanticTokens,\n} from 'design-system/lib/semanticColor';\n\nexport type StepStatus = 'uncompleted' | 'completed' | 'warning' | 'error';\n\nexport interface ProgressIndicatorStep {\n  id: string;\n  label: string;\n  /** @default 'uncompleted' */\n  status?: StepStatus;\n  disabled?: boolean;\n}\n\nexport interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {\n  steps: ProgressIndicatorStep[];\n  /** id of the step that should receive the active visual state */\n  activeStepId?: string;\n  /** @default 'vertical' */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Called when a clickable step is activated via click or keyboard.\n   *\n   * Clickability rules:\n   * - `completed`, `warning`, and `error` steps are clickable (navigate back to review/edit)\n   * - The active step is not clickable (user is already there)\n   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)\n   */\n  onStepClick?: (stepId: string) => void;\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/**\n * Completed, warning, and error steps can be navigated back to.\n * The current step (first uncompleted or error) is also clickable so the user can\n * return to it after navigating back to an earlier step.\n * Active and upcoming steps (beyond the current) are not clickable.\n */\nfunction resolveClickable(\n  status: StepStatus,\n  isActive: boolean,\n  isDisabled: boolean,\n  isCurrent: boolean,\n): boolean {\n  if (isDisabled || isActive) {\n    return false;\n  }\n  return status === 'completed' || status === 'warning' || status === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'warning') {\n    return WarningFillIcon;\n  }\n  if (status === 'error') {\n    return CircleWarningFillIcon;\n  }\n  if (isCurrent) {\n    return CircleFillIcon;\n  }\n  return CircleNullIcon;\n}\n\nfunction resolveIconColor(\n  theme: MaybeSemanticTheme,\n  status: StepStatus,\n  isActive: boolean,\n  isDisabled: boolean,\n) {\n  if (isDisabled) {\n    return semanticColor(theme, 'FgDisabled', Color.BorderIconDisabled);\n  }\n  if (status === 'completed') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  if (status === 'warning') {\n    return semanticColor(theme, 'FgWarning1', Color.BorderIconWarning);\n  }\n  if (status === 'error') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderIconDanger);\n  }\n  return isActive\n    ? semanticColor(theme, 'FgAccent', Color.BorderIconActive)\n    : semanticColor(theme, 'FgSecondary', Color.BorderIconSecondary);\n}\n\nfunction resolveTextColor(\n  theme: MaybeSemanticTheme,\n  status: StepStatus,\n  isActive: boolean,\n  isDisabled: boolean,\n) {\n  if (isDisabled) {\n    return semanticColor(theme, 'FgDisabled', Color.TextDisabled);\n  }\n  if (isActive) {\n    return semanticColor(theme, 'FgAccent', Color.TextActive);\n  }\n  if (status === 'uncompleted') {\n    return semanticColor(theme, 'FgSecondary', Color.TextSecondary);\n  }\n  return semanticColor(theme, 'FgPrimary', Color.TextPrimary);\n}\n\n// ─── Styled components ────────────────────────────────────────────────────────\n\nconst StepList = styled.ol<{ $layout: 'vertical' | 'horizontal' }>`\n  display: flex;\n  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};\n  gap: ${({ $layout }) => ($layout === 'horizontal' ? Spacing[2] : '0px')};\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nconst StepItem = styled.li<{ $layout: 'vertical' | 'horizontal' }>`\n  display: flex;\n  align-items: center;\n\n  ${({ $layout }) =>\n    $layout === 'horizontal' &&\n    css`\n      width: fit-content;\n      white-space: nowrap;\n    `}\n`;\n\nconst StepContent = styled.button<{\n  $isActive: boolean;\n  $isClickable: boolean;\n  $interactive: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  width: 100%;\n  padding: ${Spacing[2]};\n  border-radius: ${BorderRadius.Md};\n  border: none;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  outline: none;\n  cursor: ${({ $isClickable, $interactive }) => ($interactive && $isClickable ? 'pointer' : 'default')};\n\n  ${({ theme, $isActive, $isClickable, $interactive }) => {\n    const tokens = semanticTokens(theme);\n    if ($isActive) {\n      return css`\n        background-color: ${\n          tokens\n            ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25)\n            : Color.BackgroundInteractiveActive\n        };\n      `;\n    }\n    if ($interactive && $isClickable) {\n      return css`\n        background-color: ${tokens ? 'transparent' : Color.BackgroundInteractiveDefault};\n        &:hover {\n          background-color: ${semanticColor(theme, 'SurfaceSecondary', Color.BackgroundInteractiveHover)};\n        }\n      `;\n    }\n    return css`\n      background-color: transparent;\n    `;\n  }}\n\n  ${focusOutline}\n\n  &:focus-visible {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nconst IconWrapper = styled.span<{ $color: string }>`\n  display: inline-flex;\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  color: ${({ $color }) => $color};\n  line-height: 0;\n`;\n\nconst StepLabel = styled.span<{ $isActive: boolean; $color: string }>`\n  ${({ $isActive }) => ($isActive ? paragraphMixins.mdBold : paragraphMixins.md)};\n  color: ${({ $color }) => $color};\n`;\n\n// ─── Step ─────────────────────────────────────────────────────────────────────\n\ninterface StepProps {\n  step: ProgressIndicatorStep;\n  isActive: boolean;\n  isCurrent: boolean;\n  layout: 'vertical' | 'horizontal';\n  onStepClick?: (stepId: string) => void;\n}\n\nconst Step = ({ step, isActive, isCurrent, layout, onStepClick }: StepProps) => {\n  const { id, label, status = 'uncompleted', disabled = false } = step;\n\n  const interactive = Boolean(onStepClick);\n  const isClickable = resolveClickable(status, isActive, disabled, isCurrent);\n  const isInteractionDisabled = disabled || (!isActive && !isCurrent && status === 'uncompleted');\n  const theme = useTheme();\n  const iconColor = resolveIconColor(theme, status, isActive, disabled);\n  const textColor = resolveTextColor(theme, status, isActive, disabled);\n\n  const Icon = resolveIcon(status, isCurrent);\n\n  return (\n    <StepItem\n      $layout={layout}\n      aria-current={!interactive && isActive ? 'step' : undefined}\n      aria-disabled={!interactive && isInteractionDisabled ? true : undefined}\n    >\n      <StepContent\n        {...(interactive && isClickable\n          ? { type: 'button' as const, onClick: () => onStepClick?.(id) }\n          : { as: 'div' as const })}\n        aria-current={interactive && isActive ? 'step' : undefined}\n        aria-disabled={interactive && isInteractionDisabled ? true : undefined}\n        $isActive={isActive}\n        $isClickable={isClickable}\n        $interactive={interactive}\n      >\n        <IconWrapper $color={iconColor} aria-hidden='true'>\n          <Icon />\n        </IconWrapper>\n        <StepLabel $isActive={isActive} $color={textColor}>\n          {label}\n        </StepLabel>\n      </StepContent>\n    </StepItem>\n  );\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * ProgressIndicator guides users through a sequence of steps.\n *\n * Interaction rules:\n * - **Completed / warning / error** steps are clickable — navigate back to review or fix.\n * - **Warning** does not block forward progression; later uncompleted steps remain reachable.\n * - **Error** blocks forward progression — treat it as the terminal step in the sequence.\n * - **Active** step is not clickable — the user is already there.\n * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.\n *\n * Navigation does not clear later steps. If a change on an earlier step\n * invalidates later data, the affected steps should be flagged and require\n * re-confirmation before submission — this logic lives in the consuming component.\n *\n * @example\n * ```tsx\n * <ProgressIndicator\n *   steps={[\n *     { id: 'identity', label: 'Identity', status: 'completed' },\n *     { id: 'address',  label: 'Address',  status: 'uncompleted' },\n *     { id: 'review',   label: 'Review',   status: 'uncompleted' },\n *   ]}\n *   activeStepId=\"address\"\n *   onStepClick={(id) => navigate(id)}\n * />\n * ```\n */\nexport const ProgressIndicator = ({\n  steps,\n  activeStepId,\n  layout = 'vertical',\n  onStepClick,\n  'aria-label': ariaLabel = 'Progress',\n  ...rest\n}: ProgressIndicatorProps) => {\n  // The \"current\" step is the first uncompleted or error step — where the user should work next.\n  // Warning steps are skipped so forward progression is not blocked.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(\n    ({ status = 'uncompleted' }) => status === 'uncompleted' || status === 'error',\n  )?.id;\n\n  return (\n    <StepList $layout={layout} role='list' aria-label={ariaLabel} {...rest}>\n      {steps.map((step) => (\n        <Step\n          key={step.id}\n          step={step}\n          isActive={step.id === activeStepId}\n          isCurrent={step.id === currentStepId}\n          layout={layout}\n          onStepClick={onStepClick}\n        />\n      ))}\n    </StepList>\n  );\n};\n\nexport default ProgressIndicator;\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,SAAS,iBACP,QACA,UACA,YACA,WACS;AACT,KAAI,cAAc,SAChB,QAAO;AAET,QAAO,WAAW,eAAe,WAAW,aAAa,WAAW,WAAW;;AAGjF,SAAS,YAAY,QAAoB,WAAsC;AAC7E,KAAI,WAAW,YACb,QAAO;AAET,KAAI,WAAW,UACb,QAAO;AAET,KAAI,WAAW,QACb,QAAO;AAET,KAAI,UACF,QAAO;AAET,QAAO;;AAGT,SAAS,iBACP,OACA,QACA,UACA,YACA;AACA,KAAI,WACF,QAAO,cAAc,OAAO,cAAc,MAAM,mBAAmB;AAErE,KAAI,WAAW,YACb,QAAO,cAAc,OAAO,kBAAkB,MAAM,kBAAkB;AAExE,KAAI,WAAW,UACb,QAAO,cAAc,OAAO,cAAc,MAAM,kBAAkB;AAEpE,KAAI,WAAW,QACb,QAAO,cAAc,OAAO,iBAAiB,MAAM,iBAAiB;AAEtE,QAAO,WACH,cAAc,OAAO,YAAY,MAAM,iBAAiB,GACxD,cAAc,OAAO,eAAe,MAAM,oBAAoB;;AAGpE,SAAS,iBACP,OACA,QACA,UACA,YACA;AACA,KAAI,WACF,QAAO,cAAc,OAAO,cAAc,MAAM,aAAa;AAE/D,KAAI,SACF,QAAO,cAAc,OAAO,YAAY,MAAM,WAAW;AAE3D,KAAI,WAAW,cACb,QAAO,cAAc,OAAO,eAAe,MAAM,cAAc;AAEjE,QAAO,cAAc,OAAO,aAAa,MAAM,YAAY;;AAK7D,MAAM,WAAW,OAAO,EAA0C;;qBAE7C,EAAE,cAAe,YAAY,eAAe,QAAQ,SAAU;UACzE,EAAE,cAAe,YAAY,eAAe,QAAQ,KAAK,MAAO;;;;;AAM1E,MAAM,WAAW,OAAO,EAA0C;;;;KAI7D,EAAE,cACH,YAAY,gBACZ,GAAG;;;MAGD;;AAGN,MAAM,cAAc,OAAO,MAIzB;;;SAGO,QAAQ,GAAG;;aAEP,QAAQ,GAAG;mBACL,aAAa,GAAG;;;;;;;aAOtB,EAAE,cAAc,mBAAoB,gBAAgB,eAAe,YAAY,UAAW;;KAElG,EAAE,OAAO,WAAW,cAAc,mBAAmB;CACtD,MAAM,SAAS,eAAe,MAAM;AACpC,KAAI,UACF,QAAO,GAAG;4BAEN,SACI,UAAU,OAAO,eAAe,OAAO,UAAU,GACjD,MAAM,4BACX;;AAGL,KAAI,gBAAgB,aAClB,QAAO,GAAG;4BACY,SAAS,gBAAgB,MAAM,6BAA6B;;8BAE1D,cAAc,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;;;AAIrG,QAAO,GAAG;;;EAGV;;IAEA,aAAa;;;;;;;AAQjB,MAAM,cAAc,OAAO,IAAwB;;;;;YAKvC,EAAE,aAAa,OAAO;;;AAIlC,MAAM,YAAY,OAAO,IAA4C;KAChE,EAAE,gBAAiB,YAAY,gBAAgB,SAAS,gBAAgB,GAAI;YACrE,EAAE,aAAa,OAAO;;AAalC,MAAM,QAAQ,EAAE,MAAM,UAAU,WAAW,QAAQ,kBAA6B;CAC9E,MAAM,EAAE,IAAI,OAAO,SAAS,eAAe,WAAW,UAAU;CAEhE,MAAM,cAAc,QAAQ,YAAY;CACxC,MAAM,cAAc,iBAAiB,QAAQ,UAAU,UAAU,UAAU;CAC3E,MAAM,wBAAwB,YAAa,CAAC,YAAY,CAAC,aAAa,WAAW;CACjF,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,iBAAiB,OAAO,QAAQ,UAAU,SAAS;CACrE,MAAM,YAAY,iBAAiB,OAAO,QAAQ,UAAU,SAAS;CAErE,MAAM,OAAO,YAAY,QAAQ,UAAU;AAE3C,QACE,oBAAC,UAAD;EACE,SAAS;EACT,gBAAc,CAAC,eAAe,WAAW,SAAS,KAAA;EAClD,iBAAe,CAAC,eAAe,wBAAwB,OAAO,KAAA;YAE9D,qBAAC,aAAD;GACE,GAAK,eAAe,cAChB;IAAE,MAAM;IAAmB,eAAe,cAAc,GAAG;IAAE,GAC7D,EAAE,IAAI,OAAgB;GAC1B,gBAAc,eAAe,WAAW,SAAS,KAAA;GACjD,iBAAe,eAAe,wBAAwB,OAAO,KAAA;GAC7D,WAAW;GACX,cAAc;GACd,cAAc;aARhB,CAUE,oBAAC,aAAD;IAAa,QAAQ;IAAW,eAAY;cAC1C,oBAAC,MAAD,EAAQ,CAAA;IACI,CAAA,EACd,oBAAC,WAAD;IAAW,WAAW;IAAU,QAAQ;cACrC;IACS,CAAA,CACA;;EACL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCf,MAAa,qBAAqB,EAChC,OACA,cACA,SAAS,YACT,aACA,cAAc,YAAY,YAC1B,GAAG,WACyB;CAI5B,MAAM,gBAAgB,MAAM,MACzB,EAAE,SAAS,oBAAoB,WAAW,iBAAiB,WAAW,QACxE,EAAE;AAEH,QACE,oBAAC,UAAD;EAAU,SAAS;EAAQ,MAAK;EAAO,cAAY;EAAW,GAAI;YAC/D,MAAM,KAAK,SACV,oBAAC,MAAD;GAEQ;GACN,UAAU,KAAK,OAAO;GACtB,WAAW,KAAK,OAAO;GACf;GACK;GACb,EANK,KAAK,GAMV,CACF;EACO,CAAA"}

package/dist/ProgressIndicator-D85HQGSx.d.mts

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region components/ProgressIndicator/ProgressIndicator.d.ts
+type StepStatus = 'uncompleted' | 'completed' | 'warning' | 'error';
+interface ProgressIndicatorStep {
+  id: string;
+  label: string;
+  /** @default 'uncompleted' */
+  status?: StepStatus;
+  disabled?: boolean;
+}
+interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
+  steps: ProgressIndicatorStep[];
+  /** id of the step that should receive the active visual state */
+  activeStepId?: string;
+  /** @default 'vertical' */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * Called when a clickable step is activated via click or keyboard.
+   *
+   * Clickability rules:
+   * - `completed`, `warning`, and `error` steps are clickable (navigate back to review/edit)
+   * - The active step is not clickable (user is already there)
+   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
+   */
+  onStepClick?: (stepId: string) => void;
+}
+/**
+ * ProgressIndicator guides users through a sequence of steps.
+ *
+ * Interaction rules:
+ * - **Completed / warning / error** steps are clickable — navigate back to review or fix.
+ * - **Warning** does not block forward progression; later uncompleted steps remain reachable.
+ * - **Error** blocks forward progression — treat it as the terminal step in the sequence.
+ * - **Active** step is not clickable — the user is already there.
+ * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
+ *
+ * Navigation does not clear later steps. If a change on an earlier step
+ * invalidates later data, the affected steps should be flagged and require
+ * re-confirmation before submission — this logic lives in the consuming component.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator
+ *   steps={[
+ *     { id: 'identity', label: 'Identity', status: 'completed' },
+ *     { id: 'address',  label: 'Address',  status: 'uncompleted' },
+ *     { id: 'review',   label: 'Review',   status: 'uncompleted' },
+ *   ]}
+ *   activeStepId="address"
+ *   onStepClick={(id) => navigate(id)}
+ * />
+ * ```
+ */
+declare const ProgressIndicator: ({
+  steps,
+  activeStepId,
+  layout,
+  onStepClick,
+  "aria-label": ariaLabel,
+  ...rest
+}: ProgressIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StepStatus as i, ProgressIndicatorProps as n, ProgressIndicatorStep as r, ProgressIndicator as t };
+//# sourceMappingURL=ProgressIndicator-D85HQGSx.d.mts.map

package/dist/ProgressIndicator.d.mts

@@ -1,66 +1,2 @@
-import { ComponentPropsWithoutRef } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region components/ProgressIndicator/ProgressIndicator.d.ts
-type StepStatus = 'uncompleted' | 'completed' | 'warning' | 'error';
-interface ProgressIndicatorStep {
-  id: string;
-  label: string;
-  /** @default 'uncompleted' */
-  status?: StepStatus;
-  disabled?: boolean;
-}
-interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
-  steps: ProgressIndicatorStep[];
-  /** id of the step that should receive the active visual state */
-  activeStepId?: string;
-  /** @default 'vertical' */
-  layout?: 'vertical' | 'horizontal';
-  /**
-   * Called when a clickable step is activated via click or keyboard.
-   *
-   * Clickability rules:
-   * - `completed`, `warning`, and `error` steps are clickable (navigate back to review/edit)
-   * - The active step is not clickable (user is already there)
-   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
-   */
-  onStepClick?: (stepId: string) => void;
-}
-/**
- * ProgressIndicator guides users through a sequence of steps.
- *
- * Interaction rules:
- * - **Completed / warning / error** steps are clickable — navigate back to review or fix.
- * - **Warning** does not block forward progression; later uncompleted steps remain reachable.
- * - **Error** blocks forward progression — treat it as the terminal step in the sequence.
- * - **Active** step is not clickable — the user is already there.
- * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
- *
- * Navigation does not clear later steps. If a change on an earlier step
- * invalidates later data, the affected steps should be flagged and require
- * re-confirmation before submission — this logic lives in the consuming component.
- *
- * @example
- * ```tsx
- * <ProgressIndicator
- *   steps={[
- *     { id: 'identity', label: 'Identity', status: 'completed' },
- *     { id: 'address',  label: 'Address',  status: 'uncompleted' },
- *     { id: 'review',   label: 'Review',   status: 'uncompleted' },
- *   ]}
- *   activeStepId="address"
- *   onStepClick={(id) => navigate(id)}
- * />
- * ```
- */
-declare const ProgressIndicator: ({
-  steps,
-  activeStepId,
-  layout,
-  onStepClick,
-  "aria-label": ariaLabel,
-  ...rest
-}: ProgressIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };
-//# sourceMappingURL=ProgressIndicator.d.mts.map
+import { i as StepStatus, n as ProgressIndicatorProps, r as ProgressIndicatorStep, t as ProgressIndicator } from "./ProgressIndicator-D85HQGSx.mjs";
+export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };

package/dist/{PseudoClassProps-CdRF3QNn.d.mts → PseudoClassProps-BHs8TX_3.d.mts}

@@ -9,4 +9,4 @@ interface PseudoClassProps {
 }
 //#endregion
 export { PseudoClassProps as t };
-//# sourceMappingURL=PseudoClassProps-CdRF3QNn.d.mts.map
+//# sourceMappingURL=PseudoClassProps-BHs8TX_3.d.mts.map

package/dist/PseudoClassProps.d.mts

@@ -1,2 +1,2 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CdRF3QNn.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-BHs8TX_3.mjs";
 export { PseudoClassProps as default };

package/dist/{Radio-Ds1pODKw.mjs → Radio-CYV290JI.mjs}

@@ -4,7 +4,7 @@ import "./variables/transitions.mjs";
 import { opacityOf } from "./lib/color.mjs";
 import { isChecked, isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { focusStyle } from "./mixins/focus.mjs";
-import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
+import { n as useFormField } from "./useFormField-XezSxho_.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -148,4 +148,4 @@ const Radio = forwardRef(function Radio({ id, label, className, value, disabled,
 //#endregion
 export { Radio as t };
 
-//# sourceMappingURL=Radio-Ds1pODKw.mjs.map
+//# sourceMappingURL=Radio-CYV290JI.mjs.map

package/dist/{Radio-Ds1pODKw.mjs.map → Radio-CYV290JI.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Radio-Ds1pODKw.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.PrimaryWhite)};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${({ theme }) => semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n    background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n    &::after {\n      background: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BackgroundInputDefault)};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n    background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;YACd,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;KAE9E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;uBACnC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,aAAa,CAAC;;AAG/F,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;mBAEd,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;gBAG3D,YAAY,KAAK,UAAU,KAAK,YAAY;qBACvC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;mBACvF,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;;qBAGpF,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;;;;;;;;;aAS5F,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;qBACjE,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;mBACxG,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;;AAkBzH,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}
+{"version":3,"file":"Radio-CYV290JI.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { uniqueId } from 'lodash-es';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { opacityOf } from 'design-system/lib/color';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${semanticColor(theme, 'FgDisabled', theme.color.text.disabled)};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${({ theme }) => semanticColor(theme, 'InputBorderStrong', Color.BorderInputCheckbox)};\n  background: ${({ theme }) => semanticColor(theme, 'InputSurfaceDefault', Color.PrimaryWhite)};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderHoverStrong', Color.BorderInputCheckboxHover)};\n    ${semanticOnly((tokens) => `background: ${tokens.InputSurfaceHover};`)}\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n      border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentHover', Color.BackgroundInputActiveHover)};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${({ theme }) =>\n      semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)};\n    border-color: ${({ theme }) =>\n      semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)};\n    ${semanticOnly((tokens) => `opacity: ${opacityOf(tokens.Opacity65)};`)}\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${({ theme }) => semanticColor(theme, 'InputBorderAccent', Color.BackgroundInputActive)};\n    background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccent', Color.BackgroundInputActive)};\n\n    &::after {\n      background: ${({ theme }) => semanticColor(theme, 'FgInverseStatic', Color.BackgroundInputDefault)};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n    background: ${({ theme }) => semanticColor(theme, 'InputSurfaceAccentDisabled', Color.BackgroundInputActiveDisabled)};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;YACd,EAAE,YAAY,cAAc,OAAO,eAAe,MAAM,cAAc,CAAC;;KAE9E,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,cAAc,OAAO,cAAc,MAAM,MAAM,KAAK,SAAS,CAAC;MACvE;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;uBACnC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;iBACzF,EAAE,YAAY,cAAc,OAAO,uBAAuB,MAAM,aAAa,CAAC;;AAG/F,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;qBAC3B,EAAE,YACjB,cAAc,OAAO,0BAA0B,MAAM,yBAAyB,CAAC;MAC/E,cAAc,WAAW,eAAe,OAAO,kBAAkB,GAAG,CAAC;;;KAGtE,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;qBAC7B,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;uBAC9F,EAAE,YAAY,cAAc,OAAO,2BAA2B,MAAM,2BAA2B,CAAC;;;;KAIlH,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;mBAEd,EAAE,YACf,cAAc,OAAO,wBAAwB,MAAM,wBAAwB,CAAC;qBAC7D,EAAE,YACjB,cAAc,OAAO,uBAAuB,MAAM,oBAAoB,CAAC;MACvE,cAAc,WAAW,YAAY,UAAU,OAAO,UAAU,CAAC,GAAG,CAAC;;;gBAG3D,YAAY,KAAK,UAAU,KAAK,YAAY;qBACvC,EAAE,YAAY,cAAc,OAAO,qBAAqB,MAAM,sBAAsB,CAAC;mBACvF,EAAE,YAAY,cAAc,OAAO,sBAAsB,MAAM,sBAAsB,CAAC;;;qBAGpF,EAAE,YAAY,cAAc,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;;;;;;;;;aAS5F,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;qBACjE,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;mBACxG,EAAE,YAAY,cAAc,OAAO,8BAA8B,MAAM,8BAA8B,CAAC;;;AAkBzH,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/{RadioGroup-CxL6LW4q.d.mts → RadioGroup-Cq3KV1TN.d.mts}

@@ -18,4 +18,4 @@ interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 declare const RadioGroup: VFC<RadioGroupProps>;
 //#endregion
 export { RadioGroupProps as n, RadioGroup as t };
-//# sourceMappingURL=RadioGroup-CxL6LW4q.d.mts.map
+//# sourceMappingURL=RadioGroup-Cq3KV1TN.d.mts.map

package/dist/{RadioGroup-HIC9V2hO.mjs → RadioGroup-lWMMtu9V.mjs}

@@ -1,6 +1,6 @@
 import { a as styled, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import useControlled from "./lib/useControlled.mjs";
-import { t as Radio } from "./Radio-Ds1pODKw.mjs";
+import { t as Radio } from "./Radio-CYV290JI.mjs";
 import { Spacing } from "@persona/design-tokens";
 import { Children, cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -47,4 +47,4 @@ const RadioGroup = ({ children, defaultValue, name, value: valueProp, onChange,
 //#endregion
 export { RadioGroup as t };
 
-//# sourceMappingURL=RadioGroup-HIC9V2hO.mjs.map
+//# sourceMappingURL=RadioGroup-lWMMtu9V.mjs.map

package/dist/{RadioGroup-HIC9V2hO.mjs.map → RadioGroup-lWMMtu9V.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-HIC9V2hO.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; horizontal?: boolean }>`\n  & > div {\n    margin-bottom: ${Spacing[2]};\n  }\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: flex;\n      align-items: center;\n      & > div {\n        margin-right: ${Spacing[2]};\n      }\n    `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n  defaultValue?: any;\n  name?: string;\n  value?: any;\n  onChange?: (value: any) => void;\n  /**\n   * Direction of radio group\n   */\n  horizontal?: boolean;\n  /**\n   * Size of radio buttons within the group\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n  children,\n  defaultValue,\n  name,\n  value: valueProp,\n  onChange,\n  horizontal = false,\n  size = 'md',\n  ...elemProps\n}) => {\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue,\n  });\n\n  return (\n    <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n      {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n      {Children.map(children, (child: ReactElement<RadioProps>) => {\n        if (child?.type === Radio && (typeof valueProp !== 'undefined' || onChange)) {\n          return cloneElement(child, {\n            name,\n            size,\n            checked: child.props.value === value,\n            onChange: (e: ChangeEvent<HTMLInputElement>) => {\n              const newVal = e.target.value;\n              if (typeof valueProp !== 'undefined' && onChange) {\n                onChange(newVal);\n              } else {\n                setValue(newVal);\n              }\n            },\n          });\n        }\n\n        if (name) {\n          return cloneElement(child, { name });\n        }\n\n        return child;\n      })}\n    </Container>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}
+{"version":3,"file":"RadioGroup-lWMMtu9V.mjs","names":[],"sources":["../components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type VFC,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport Radio, { type RadioProps } from 'design-system/components/Radio';\nimport useControlled from 'design-system/lib/useControlled';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; horizontal?: boolean }>`\n  & > div {\n    margin-bottom: ${Spacing[2]};\n  }\n\n  ${({ horizontal }) =>\n    horizontal &&\n    css`\n      display: flex;\n      align-items: center;\n      & > div {\n        margin-right: ${Spacing[2]};\n      }\n    `}\n`;\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {\n  defaultValue?: any;\n  name?: string;\n  value?: any;\n  onChange?: (value: any) => void;\n  /**\n   * Direction of radio group\n   */\n  horizontal?: boolean;\n  /**\n   * Size of radio buttons within the group\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const RadioGroup: VFC<RadioGroupProps> = ({\n  children,\n  defaultValue,\n  name,\n  value: valueProp,\n  onChange,\n  horizontal = false,\n  size = 'md',\n  ...elemProps\n}) => {\n  const [value, setValue] = useControlled({\n    controlledValue: valueProp,\n    default: defaultValue,\n  });\n\n  return (\n    <Container role='radiogroup' horizontal={horizontal} size={size} {...elemProps}>\n      {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n      {Children.map(children, (child: ReactElement<RadioProps>) => {\n        if (child?.type === Radio && (typeof valueProp !== 'undefined' || onChange)) {\n          return cloneElement(child, {\n            name,\n            size,\n            checked: child.props.value === value,\n            onChange: (e: ChangeEvent<HTMLInputElement>) => {\n              const newVal = e.target.value;\n              if (typeof valueProp !== 'undefined' && onChange) {\n                onChange(newVal);\n              } else {\n                setValue(newVal);\n              }\n            },\n          });\n        }\n\n        if (name) {\n          return cloneElement(child, { name });\n        }\n\n        return child;\n      })}\n    </Container>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,OAAO,GAAgD;;qBAEpD,QAAQ,GAAG;;;KAG3B,EAAE,iBACH,cACA,GAAG;;;;wBAIiB,QAAQ,GAAG;;MAE7B;;AAkBN,MAAa,cAAoC,EAC/C,UACA,cACA,MACA,OAAO,WACP,UACA,aAAa,OACb,OAAO,MACP,GAAG,gBACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc;EACtC,iBAAiB;EACjB,SAAS;EACV,CAAC;AAEF,QACE,oBAAC,WAAD;EAAW,MAAK;EAAyB;EAAkB;EAAM,GAAI;YAElE,SAAS,IAAI,WAAW,UAAoC;AAC3D,OAAI,OAAO,SAAS,UAAU,OAAO,cAAc,eAAe,UAChE,QAAO,aAAa,OAAO;IACzB;IACA;IACA,SAAS,MAAM,MAAM,UAAU;IAC/B,WAAW,MAAqC;KAC9C,MAAM,SAAS,EAAE,OAAO;AACxB,SAAI,OAAO,cAAc,eAAe,SACtC,UAAS,OAAO;SAEhB,UAAS,OAAO;;IAGrB,CAAC;AAGJ,OAAI,KACF,QAAO,aAAa,OAAO,EAAE,MAAM,CAAC;AAGtC,UAAO;IACP;EACQ,CAAA"}

package/dist/RadioGroup.d.mts

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

package/dist/{RangeCalendar-B7TwRJbg.d.mts → RangeCalendar-Mh7h74Tp.d.mts}

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset } from "./types-D8rWSj3z.mjs";
+import { a as DateFilterPreset } from "./types-Cl-w8tYc.mjs";
 import { Ref } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateRange, RangeCalendarProps } from "react-aria";
@@ -37,4 +37,4 @@ declare const RangeCalendar: ({
 }: RangeCalendarProps$1) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RangeCalendarProps$1 as n, RangeCalendar as t };
-//# sourceMappingURL=RangeCalendar-B7TwRJbg.d.mts.map
+//# sourceMappingURL=RangeCalendar-Mh7h74Tp.d.mts.map

package/dist/RangeCalendar.d.mts

@@ -1,2 +1,2 @@
-import { n as RangeCalendarProps, t as RangeCalendar } from "./RangeCalendar-B7TwRJbg.mjs";
+import { n as RangeCalendarProps, t as RangeCalendar } from "./RangeCalendar-Mh7h74Tp.mjs";
 export { RangeCalendarProps, RangeCalendar as default };

package/dist/RangeCalendarPresets.d.mts

@@ -1,4 +1,4 @@
-import { a as DateFilterPreset } from "./types-D8rWSj3z.mjs";
+import { a as DateFilterPreset } from "./types-Cl-w8tYc.mjs";
 import * as _$react from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { RangeCalendarState } from "react-stately";

package/dist/{RouterContext-B7N12wkK.d.mts → RouterContext-B3IU1jb0.d.mts}

@@ -1,4 +1,4 @@
-import { n as RouterAdapter } from "./types-CuQSgl1F.mjs";
+import { n as RouterAdapter } from "./types-CkpixGWr.mjs";
 import * as _$react from "react";
 import { FC, PropsWithChildren } from "react";
 
@@ -8,4 +8,4 @@ declare const RouterProvider: FC<PropsWithChildren<RouterAdapter>>;
 declare const useRouter: () => RouterAdapter | null;
 //#endregion
 export { RouterProvider as n, useRouter as r, RouterContext as t };
-//# sourceMappingURL=RouterContext-B7N12wkK.d.mts.map
+//# sourceMappingURL=RouterContext-B3IU1jb0.d.mts.map

package/dist/RouterContext.d.mts

@@ -1,2 +1,2 @@
-import { n as RouterProvider, r as useRouter, t as RouterContext } from "./RouterContext-B7N12wkK.mjs";
+import { n as RouterProvider, r as useRouter, t as RouterContext } from "./RouterContext-B3IU1jb0.mjs";
 export { RouterContext, RouterProvider, useRouter };

package/dist/{RouterLink-Bq36EGjc.d.mts → RouterLink-CwAqTLC2.d.mts}

@@ -1,8 +1,8 @@
-import { r as RouterLinkComponentProps } from "./types-CuQSgl1F.mjs";
+import { r as RouterLinkComponentProps } from "./types-CkpixGWr.mjs";
 import * as _$react from "react";
 
 //#region lib/router/RouterLink.d.ts
 declare const RouterLink: _$react.ForwardRefExoticComponent<Omit<RouterLinkComponentProps, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;
 //#endregion
 export { RouterLink as t };
-//# sourceMappingURL=RouterLink-Bq36EGjc.d.mts.map
+//# sourceMappingURL=RouterLink-CwAqTLC2.d.mts.map

package/dist/RouterLink.d.mts

@@ -1,2 +1,2 @@
-import { t as RouterLink } from "./RouterLink-Bq36EGjc.mjs";
+import { t as RouterLink } from "./RouterLink-CwAqTLC2.mjs";
 export { RouterLink as default };

package/dist/RuleEditorFields.d.mts

@@ -1,5 +1,5 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-N8PYonjD.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BdtxI1N2.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, l as FilterRule, u as FilterRuleValue } from "./types-C4WUSW3e.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-0LmSQ-jc.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/RulesPill.d.mts

@@ -1,4 +1,4 @@
-import { f as FilterSize, n as CompoundExpression } from "./types-N8PYonjD.mjs";
+import { f as FilterSize, n as CompoundExpression } from "./types-C4WUSW3e.mjs";
 import * as _$react from "react";
 import { HTMLAttributes } from "react";
 

package/dist/{SearchInput-D69WxMNq.d.mts → SearchInput-BGyUUcoz.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-DCJivcWf.mjs";
+import { n as InputSizes } from "./input-C6cyiqm2.mjs";
 import { FocusEventHandler, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -50,4 +50,4 @@ declare const SearchInput: ({
 }: OmniSearchProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInput as n, OmniSearchProps as t };
-//# sourceMappingURL=SearchInput-D69WxMNq.d.mts.map
+//# sourceMappingURL=SearchInput-BGyUUcoz.d.mts.map

package/dist/SearchInput.d.mts

@@ -1,2 +1,2 @@
-import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-D69WxMNq.mjs";
+import { n as SearchInput, t as OmniSearchProps } from "./SearchInput-BGyUUcoz.mjs";
 export { OmniSearchProps, SearchInput as default };

package/dist/SectionHeading.d.mts

@@ -1,4 +1,4 @@
-import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-C7INft7X.mjs";
+import { i as TextAction, n as IconAction, r as MenuAction } from "./Action-B-AiHknZ.mjs";
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from "react";
 
 //#region components/CardV2/SectionHeading.d.ts

package/dist/{SegmentedControl-OHrfJiw0.mjs → SegmentedControl-BEbIcV3g.mjs}

@@ -1,16 +1,16 @@
 import { a as styled } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { semanticColor } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { n as useFormField } from "./useFormField-DsvC5dOb.mjs";
+import { n as useFormField } from "./useFormField-XezSxho_.mjs";
 import { BorderRadius, Spacing } from "@persona/design-tokens";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef } from "react";
 import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region components/SegmentedControl/SegmentedControl.tsx
 const SegmentedControlSizeContext = createContext("md");
 const StyledSegmentedControl = styled(ToggleButtonGroup)`
   display: inline-flex;
-  background-color: ${({ theme }) => semanticColor(theme, "SurfaceInset", theme.color.variants.basic.default)};
+  background-color: ${({ theme }) => semanticColor(theme, "ActionNeutral", theme.color.variants.basic.default)};
   border-radius: 5px;
   padding: 1px;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
@@ -20,15 +20,22 @@ const StyledSegmentedControl = styled(ToggleButtonGroup)`
 * A segmented control component that allows users to select between multiple options.
 * Built with React Aria for accessibility and keyboard navigation.
 */
-const SegmentedControl = forwardRef(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, children, ...props }, ref) {
+const SegmentedControl = forwardRef(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, "aria-required": ariaRequired, children, ...props }, ref) {
 	const field = useFormField({
 		inputId: id,
 		disabled
 	});
+	const segmentedControlRef = useRef(null);
+	const isRequired = ariaRequired;
+	useImperativeHandle(ref, () => segmentedControlRef.current, []);
+	useEffect(() => {
+		if (isRequired) segmentedControlRef.current?.setAttribute("aria-required", "true");
+		else segmentedControlRef.current?.removeAttribute("aria-required");
+	}, [isRequired]);
 	return /* @__PURE__ */ jsx(SegmentedControlSizeContext.Provider, {
 		value: size,
 		children: /* @__PURE__ */ jsx(StyledSegmentedControl, {
-			ref,
+			ref: segmentedControlRef,
 			className,
 			selectionMode: "single",
 			selectedKeys: selectedKey ? [selectedKey] : void 0,
@@ -110,4 +117,4 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled
 //#endregion
 export { SegmentedControlItem as n, SegmentedControl as t };
 
-//# sourceMappingURL=SegmentedControl-OHrfJiw0.mjs.map
+//# sourceMappingURL=SegmentedControl-BEbIcV3g.mjs.map