@persona/design-system 0.4.0 → 0.5.1

package/dist/components/Pii/index.mjs

@@ -1,2 +1,2 @@
-import { t as Pii_default } from "../../Pii-RwKn-K84.mjs";
+import { t as Pii_default } from "../../Pii-Bm-qkweh.mjs";
 export { Pii_default as default };

package/dist/components/Popover/index.mjs

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

package/dist/components/ProgressBar/index.mjs

@@ -1,21 +1,19 @@
-import { a as styled, i as keyframes } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, i as keyframes } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { a as Tooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { a as Tooltip } from "../../Tooltip-BsuYG0fw.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react-aria";
 import CircleCheckFillIcon from "@persona/icons/CircleCheckFillIcon";
 import CircleWarningFillIcon from "@persona/icons/CircleWarningFillIcon";
 //#region components/ProgressBar/ProgressBar.tsx
-const STATUS_FILL_COLORS = {
-	default: Color.BorderInputActive,
-	exception: Color.BorderInputDanger,
-	success: Color.BorderIconSuccess
-};
-const STATUS_ICON_COLORS = {
-	exception: Color.BorderInputDanger,
-	success: Color.BorderIconSuccess
+const statusFill = (theme, status) => {
+	if (status === "exception") return semanticColor(theme, "StatusDanger4", Color.BorderInputDanger);
+	if (status === "success") return semanticColor(theme, "StatusSuccess3", Color.BorderIconSuccess);
+	return semanticColor(theme, "StatusInfo3", Color.BorderInputActive);
 };
+const statusIconColor = (theme, status) => status === "exception" ? semanticColor(theme, "FgDanger1", Color.BorderInputDanger) : semanticColor(theme, "FgSuccess", Color.BorderIconSuccess);
 const TRACK_HEIGHT = {
 	sm: "4px",
 	md: "8px"
@@ -33,7 +31,7 @@ const Container = styled.div`
 `;
 const LabelText = styled.span`
   ${paragraphMixins.md}
-  color: ${Color.TextPrimary};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 `;
 const BarRow = styled.div`
   display: flex;
@@ -45,7 +43,7 @@ const BarRow = styled.div`
 const Track = styled.div`
   flex: 1;
   height: ${({ $size }) => TRACK_HEIGHT[$size]};
-  background-color: ${({ $railColor }) => $railColor ?? Color.BorderDivider};
+  background-color: ${({ theme, $railColor }) => $railColor ?? semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   border-radius: 4px;
   overflow: hidden;
   position: relative;
@@ -56,7 +54,7 @@ const Fill = styled.div`
   bottom: 0;
   left: ${({ $left }) => `${$left}%`};
   width: ${({ $percent }) => `${$percent}%`};
-  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};
+  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};
   border-radius: ${({ $hasSuccessBefore }) => $hasSuccessBefore ? "0 4px 4px 0" : "4px"};
   transition: width 0.3s ease, left 0.3s ease;
 `;
@@ -66,7 +64,7 @@ const SuccessFill = styled.div`
   bottom: 0;
   left: 0;
   width: ${({ $percent }) => `${$percent}%`};
-  background-color: ${STATUS_FILL_COLORS.success};
+  background-color: ${({ theme }) => statusFill(theme, "success")};
   border-radius: ${({ $hasInProgressAfter }) => $hasInProgressAfter ? "4px 0 0 4px" : "4px"};
   transition: width 0.3s ease;
 `;
@@ -74,8 +72,7 @@ const IndeterminateFill = styled.div`
   position: absolute;
   inset: 0 auto 0 auto;
   height: 100%;
-  /* Same neutral as Spinner (Color.BorderIconPrimary) */
-  background-color: ${Color.BorderIconPrimary};
+  background-color: ${({ theme }) => semanticColor(theme, "FeedbackNeutral5", Color.BorderIconPrimary)};
   border-radius: 4px;
   animation: ${indeterminateScan} 2.5s ease-in-out infinite;
 `;
@@ -87,14 +84,14 @@ const SuffixRow = styled.div`
 `;
 const PercentText = styled.span`
   ${paragraphMixins.md}
-  color: ${Color.TextPrimary};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
   white-space: nowrap;
 `;
 const IconWrapper = styled.span`
   display: flex;
   flex-shrink: 0;
   line-height: 0;
-  color: ${({ $color }) => $color};
+  color: ${({ theme, $status }) => statusIconColor(theme, $status)};
 `;
 /**
 * ProgressBar shows the completion status of an operation as a filled bar.
@@ -154,7 +151,7 @@ const ProgressBar = ({ percent = 0, size = "sm", status = "default", type = "det
 			contentAlignment: "center",
 			children: tooltip
 		}) : track, effectiveShowInfo && /* @__PURE__ */ jsx(SuffixRow, { children: isTerminal ? /* @__PURE__ */ jsx(IconWrapper, {
-			$color: STATUS_ICON_COLORS[effectiveStatus],
+			$status: effectiveStatus,
 			children: effectiveStatus === "exception" ? /* @__PURE__ */ jsx(CircleWarningFillIcon, { size: 16 }) : /* @__PURE__ */ jsx(CircleCheckFillIcon, { size: 16 })
 		}) : /* @__PURE__ */ jsx(PercentText, { children: formattedPercent }) })] })]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst STATUS_FILL_COLORS: Record<ProgressBarStatus, Color> = {\n  default: Color.BorderInputActive,\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst STATUS_ICON_COLORS: Record<'exception' | 'success', Color> = {\n  exception: Color.BorderInputDanger,\n  success: Color.BorderIconSuccess,\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ $railColor }) => $railColor ?? Color.BorderDivider};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ $status, $fillColor }) => $fillColor ?? STATUS_FILL_COLORS[$status]};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${STATUS_FILL_COLORS.success};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  /* Same neutral as Spinner (Color.BorderIconPrimary) */\n  background-color: ${Color.BorderIconPrimary};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${Color.TextPrimary};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $color: Color }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ $color }) => $color};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $color={STATUS_ICON_COLORS[effectiveStatus]}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressBar/ProgressBar.tsx","../../../components/ProgressBar/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport { useId } from 'react-aria';\nimport styled, { keyframes } from 'styled-components';\n\nimport { Tooltip } from '@persona/design-system/components/Tooltip';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport CircleCheckFillIcon from '@persona/icons/CircleCheckFillIcon';\nimport CircleWarningFillIcon from '@persona/icons/CircleWarningFillIcon';\nimport { type MaybeSemanticTheme, semanticColor } from 'design-system/lib/semanticColor';\n\nexport type ProgressBarStatus = 'default' | 'exception' | 'success';\nexport type ProgressBarSize = 'sm' | 'md';\nexport type ProgressBarType = 'determinate' | 'indeterminate';\n\nconst statusFill = (theme: MaybeSemanticTheme, status: ProgressBarStatus) => {\n  if (status === 'exception') {\n    return semanticColor(theme, 'StatusDanger4', Color.BorderInputDanger);\n  }\n  if (status === 'success') {\n    return semanticColor(theme, 'StatusSuccess3', Color.BorderIconSuccess);\n  }\n  return semanticColor(theme, 'StatusInfo3', Color.BorderInputActive);\n};\n\nconst statusIconColor = (theme: MaybeSemanticTheme, status: 'exception' | 'success') =>\n  status === 'exception'\n    ? semanticColor(theme, 'FgDanger1', Color.BorderInputDanger)\n    : semanticColor(theme, 'FgSuccess', Color.BorderIconSuccess);\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n  sm: '4px',\n  md: '8px',\n};\n\n// 20px matches the line-height of TextMedium — the tallest element in the bar row\nconst BAR_ROW_HEIGHT = '20px';\n\nconst indeterminateScan = keyframes`\n  0%   { left: -40%; width: 40%; }\n  60%  { left: 100%; width: 40%; }\n  100% { left: 100%; width: 40%; }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\n\nconst LabelText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n`;\n\nconst BarRow = styled.div`\n  display: flex;\n  gap: ${Spacing[2]};\n  align-items: center;\n  min-height: ${BAR_ROW_HEIGHT};\n  width: 100%;\n`;\n\nconst Track = styled.div<{ $size: ProgressBarSize; $railColor?: Color }>`\n  flex: 1;\n  height: ${({ $size }) => TRACK_HEIGHT[$size]};\n  background-color: ${({ theme, $railColor }) =>\n    $railColor ?? semanticColor(theme, 'BorderSubtle', Color.BorderDivider)};\n  border-radius: 4px;\n  overflow: hidden;\n  position: relative;\n`;\n\nconst Fill = styled.div<{\n  $percent: number;\n  $left: number;\n  $status: ProgressBarStatus;\n  $fillColor?: Color;\n  $hasSuccessBefore: boolean;\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: ${({ $left }) => `${$left}%`};\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme, $status, $fillColor }) => $fillColor ?? statusFill(theme, $status)};\n  border-radius: ${({ $hasSuccessBefore }) => ($hasSuccessBefore ? '0 4px 4px 0' : '4px')};\n  transition: width 0.3s ease, left 0.3s ease;\n`;\n\nconst SuccessFill = styled.div<{ $percent: number; $hasInProgressAfter: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: ${({ $percent }) => `${$percent}%`};\n  background-color: ${({ theme }) => statusFill(theme, 'success')};\n  border-radius: ${({ $hasInProgressAfter }) => ($hasInProgressAfter ? '4px 0 0 4px' : '4px')};\n  transition: width 0.3s ease;\n`;\n\nconst IndeterminateFill = styled.div`\n  position: absolute;\n  inset: 0 auto 0 auto;\n  height: 100%;\n  background-color: ${({ theme }) => semanticColor(theme, 'FeedbackNeutral5', Color.BorderIconPrimary)};\n  border-radius: 4px;\n  animation: ${indeterminateScan} 2.5s ease-in-out infinite;\n`;\n\nconst SuffixRow = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n  flex-shrink: 0;\n`;\n\nconst PercentText = styled.span`\n  ${paragraphMixins.md}\n  color: ${({ theme }) => semanticColor(theme, 'FgPrimary', Color.TextPrimary)};\n  white-space: nowrap;\n`;\n\nconst IconWrapper = styled.span<{ $status: 'exception' | 'success' }>`\n  display: flex;\n  flex-shrink: 0;\n  line-height: 0;\n  color: ${({ theme, $status }) => statusIconColor(theme, $status)};\n`;\n\nexport interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {\n  /** Completion percentage, 0–100 */\n  percent?: number;\n  /** Size of the bar track */\n  size?: ProgressBarSize;\n  /** Status — affects fill color */\n  status?: ProgressBarStatus;\n  /**\n   * `'determinate'` shows a filled bar for a known percentage.\n   * `'indeterminate'` shows a scanning animation for unknown progress.\n   * @defaultValue 'determinate'\n   */\n  type?: ProgressBarType;\n  /** Label text */\n  label?: string;\n  /**\n   * Show a right-hand info slot: percentage while in progress, status icon when\n   * success or exception. The two are mutually exclusive — icon replaces percentage\n   * once the bar reaches a terminal state.\n   * Defaults to `true` when `successPercent` is set.\n   */\n  showInfo?: boolean;\n  /** Custom fill color (design-system token) — overrides status color */\n  fillColor?: Color;\n  /** Custom track/rail background color (design-system token) */\n  railColor?: Color;\n  /**\n   * Format function for the displayed percentage value.\n   * @defaultValue (percent) => `${percent}%`\n   */\n  format?: (percent: number) => string;\n  /**\n   * When set, renders a green success segment from 0 to `successPercent`%,\n   * with the main fill continuing from `successPercent`% to `percent`%.\n   * Clamped to [0, percent]. Also enables `showInfo` by default.\n   */\n  successPercent?: number;\n  /**\n   * Tooltip content shown when hovering the bar track.\n   * Use to surface a segment breakdown, e.g. \"3 done / 3 in progress / 4 to do\".\n   */\n  tooltip?: string;\n}\n\n/**\n * ProgressBar shows the completion status of an operation as a filled bar.\n *\n * @example\n * ```tsx\n * <ProgressBar\n *   percent={60}\n *   size=\"md\"\n *   label=\"Uploading\"\n *   showInfo\n * />\n * ```\n */\nexport const ProgressBar = ({\n  percent = 0,\n  size = 'sm',\n  status = 'default',\n  type = 'determinate',\n  label,\n  showInfo,\n  fillColor,\n  railColor,\n  format,\n  successPercent,\n  tooltip,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const labelId = useId();\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const clampedSuccessPercent =\n    successPercent != null ? Math.min(clampedPercent, Math.max(0, successPercent)) : 0;\n  const inProgressPercent = clampedPercent - clampedSuccessPercent;\n  const hasSuccessSegment = clampedSuccessPercent > 0;\n  const hasInProgressSegment = inProgressPercent > 0;\n\n  // Automatically derive success status when fully complete (unless caller set exception)\n  const effectiveStatus: ProgressBarStatus =\n    clampedPercent >= 100 && status !== 'exception' ? 'success' : status;\n\n  // showInfo defaults to true when successPercent is used\n  const effectiveShowInfo = showInfo ?? successPercent != null;\n\n  const isTerminal = effectiveStatus === 'exception' || effectiveStatus === 'success';\n  const formattedPercent = format ? format(clampedPercent) : `${clampedPercent}%`;\n  const isIndeterminate = type === 'indeterminate';\n\n  const labelledBy = label ? [labelId, ariaLabelledBy].filter(Boolean).join(' ') : ariaLabelledBy;\n  const accessibleLabel = labelledBy ? undefined : (ariaLabel ?? 'Progress');\n\n  const track = (\n    <Track\n      $size={size}\n      $railColor={railColor}\n      role='progressbar'\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={isIndeterminate ? undefined : clampedPercent}\n      aria-valuetext={isIndeterminate ? undefined : formattedPercent}\n      aria-labelledby={labelledBy || undefined}\n      aria-label={accessibleLabel}\n    >\n      {isIndeterminate ? (\n        <IndeterminateFill />\n      ) : (\n        <>\n          {hasSuccessSegment && (\n            <SuccessFill\n              $percent={clampedSuccessPercent}\n              $hasInProgressAfter={hasInProgressSegment}\n            />\n          )}\n          {hasInProgressSegment && (\n            <Fill\n              $percent={inProgressPercent}\n              $left={clampedSuccessPercent}\n              $status={effectiveStatus}\n              $fillColor={fillColor}\n              $hasSuccessBefore={hasSuccessSegment}\n            />\n          )}\n        </>\n      )}\n    </Track>\n  );\n\n  return (\n    <Container {...props}>\n      {label && <LabelText id={labelId}>{label}</LabelText>}\n      <BarRow>\n        {tooltip ? (\n          <Tooltip trigger={track} side='top' contentAlignment='center'>\n            {tooltip}\n          </Tooltip>\n        ) : (\n          track\n        )}\n        {effectiveShowInfo && (\n          <SuffixRow>\n            {isTerminal ? (\n              <IconWrapper $status={effectiveStatus}>\n                {effectiveStatus === 'exception' ? (\n                  <CircleWarningFillIcon size={16} />\n                ) : (\n                  <CircleCheckFillIcon size={16} />\n                )}\n              </IconWrapper>\n            ) : (\n              <PercentText>{formattedPercent}</PercentText>\n            )}\n          </SuffixRow>\n        )}\n      </BarRow>\n    </Container>\n  );\n};\n\nexport default ProgressBar;\n","import ProgressBar from './ProgressBar';\n\nexport { ProgressBar };\nexport type {\n  ProgressBarProps,\n  ProgressBarSize,\n  ProgressBarStatus,\n  ProgressBarType,\n} from './ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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"}

package/dist/components/ProgressIndicator/index.mjs

@@ -1,5 +1,7 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+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";
@@ -22,18 +24,18 @@ function resolveIcon(status, isCurrent) {
 	if (isCurrent) return CircleFillIcon;
 	return CircleNullIcon;
 }
-function resolveIconColor(status, isActive, isDisabled) {
-	if (isDisabled) return Color.BorderIconDisabled;
-	if (status === "completed") return Color.BorderIconSuccess;
-	if (status === "warning") return Color.BorderIconWarning;
-	if (status === "error") return Color.BorderIconDanger;
-	return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;
+function resolveIconColor(theme, status, isActive, isDisabled) {
+	if (isDisabled) return semanticColor(theme, "FgDisabled", Color.BorderIconDisabled);
+	if (status === "completed") return semanticColor(theme, "FgSuccess", Color.BorderIconSuccess);
+	if (status === "warning") return semanticColor(theme, "FgWarning1", Color.BorderIconWarning);
+	if (status === "error") return semanticColor(theme, "FgDanger1", Color.BorderIconDanger);
+	return isActive ? semanticColor(theme, "FgAccent", Color.BorderIconActive) : semanticColor(theme, "FgSecondary", Color.BorderIconSecondary);
 }
-function resolveTextColor(status, isActive, isDisabled) {
-	if (isDisabled) return Color.TextDisabled;
-	if (isActive) return Color.TextActive;
-	if (status === "uncompleted") return Color.TextSecondary;
-	return Color.TextPrimary;
+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;
@@ -67,12 +69,15 @@ const StepContent = styled.button`
   outline: none;
   cursor: ${({ $isClickable, $interactive }) => $interactive && $isClickable ? "pointer" : "default"};
 
-  ${({ $isActive, $isClickable, $interactive }) => {
-	if ($isActive) return css`background-color: ${Color.BackgroundInteractiveActive};`;
+  ${({ 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: ${Color.BackgroundInteractiveDefault};
+        background-color: ${tokens ? "transparent" : Color.BackgroundInteractiveDefault};
         &:hover {
-          background-color: ${Color.BackgroundInteractiveHover};
+          background-color: ${semanticColor(theme, "SurfaceSecondary", Color.BackgroundInteractiveHover)};
         }
       `;
 	return css`
@@ -104,8 +109,9 @@ const Step = ({ step, isActive, isCurrent, layout, onStepClick }) => {
 	const interactive = Boolean(onStepClick);
 	const isClickable = resolveClickable(status, isActive, disabled, isCurrent);
 	const isInteractionDisabled = disabled || !isActive && !isCurrent && status === "uncompleted";
-	const iconColor = resolveIconColor(status, isActive, disabled);
-	const textColor = resolveTextColor(status, isActive, disabled);
+	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,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } 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';\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(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n  if (isDisabled) {\n    return Color.BorderIconDisabled;\n  }\n  if (status === 'completed') {\n    return Color.BorderIconSuccess;\n  }\n  if (status === 'warning') {\n    return Color.BorderIconWarning;\n  }\n  if (status === 'error') {\n    return Color.BorderIconDanger;\n  }\n  return isActive ? Color.BorderIconActive : Color.BorderIconSecondary;\n}\n\nfunction resolveTextColor(status: StepStatus, isActive: boolean, isDisabled: boolean): Color {\n  if (isDisabled) {\n    return Color.TextDisabled;\n  }\n  if (isActive) {\n    return Color.TextActive;\n  }\n  if (status === 'uncompleted') {\n    return Color.TextSecondary;\n  }\n  return 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  ${({ $isActive, $isClickable, $interactive }) => {\n    if ($isActive) {\n      return css`background-color: ${Color.BackgroundInteractiveActive};`;\n    }\n    if ($interactive && $isClickable) {\n      return css`\n        background-color: ${Color.BackgroundInteractiveDefault};\n        &:hover {\n          background-color: ${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: Color }>`\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: Color }>`\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 iconColor = resolveIconColor(status, isActive, disabled);\n  const textColor = resolveTextColor(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":"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"}
+{"version":3,"file":"index.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, 'FgSuccess', Color.BorderIconSuccess);\n  }\n  if (status === 'warning') {\n    return semanticColor(theme, 'FgWarning1', Color.BorderIconWarning);\n  }\n  if (status === 'error') {\n    return semanticColor(theme, 'FgDanger1', 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":"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"}

package/dist/components/Radio/index.mjs

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

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

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

package/dist/components/RadioGroup/index.mjs

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

package/dist/components/RightPanel/index.mjs

@@ -1,8 +1,8 @@
-import { a as styled } from "../../styledComponentsInterop-8zScIQyC.mjs";
-import { i as Paragraph } from "../../Text-B0orb-cZ.mjs";
-import { n as Stack, t as HStack } from "../../Stack-Bre2oiov.mjs";
-import { t as IconButton } from "../../IconButton-BgL3QUVO.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-a2Hv0kAq.mjs";
+import { a as styled } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { i as Paragraph } from "../../Text-Dn_p7ZvT.mjs";
+import { n as Stack, t as HStack } from "../../Stack-BqQndGI9.mjs";
+import { t as IconButton } from "../../IconButton-CnJNIJVQ.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-DeVCDCjT.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-Db78Pzo_.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-BBIHKcvo.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

package/dist/components/SegmentedControl/index.mjs

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

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

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

package/dist/components/Select/index.mjs

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

package/dist/components/Slider/index.mjs

@@ -1,6 +1,7 @@
-import { a as styled, r as css } from "../../styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { semanticColor, semanticOnly } from "../../lib/semanticColor.mjs";
 import { paragraphMixins } from "../../mixins/text.mjs";
-import { i as FloatingTooltip } from "../../Tooltip-iJcfJqxn.mjs";
+import { i as FloatingTooltip } from "../../Tooltip-BsuYG0fw.mjs";
 import { focusStyle } from "../../mixins/focus.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -8,9 +9,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 import { mergeProps } from "@react-aria/utils";
 import { useNumberFormatter } from "@react-aria/i18n";
-import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useSlider, useSliderThumb } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
+import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useFocusRing } from "@react-aria/focus";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useController } from "react-hook-form";
@@ -20,14 +21,15 @@ const Tooltip = styled(FloatingTooltip)`
 `;
 const Thumb = styled("div")`
   /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */
-  --background-color-behind-thumb: ${Color.PrimaryWhite};
+  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.PrimaryWhite)};
   box-sizing: border-box;
   width: 16px;
   height: 16px;
-  background: ${(props) => props.disabled ? Color.BackgroundInputDisabled : Color.BackgroundInputDefault};
+  background: ${({ theme, disabled }) => disabled ? semanticColor(theme, "InputSurfaceDisabled", Color.BackgroundInputDisabled) : semanticColor(theme, "InputSurfaceInverseStatic", Color.BackgroundInputDefault)};
   cursor: ${(props) => props.disabled ? "inherit" : "pointer"};
   border-radius: 50%;
-  border: 1px solid ${Color.BorderInputDisabled};
+  border: 1px solid
+    ${({ theme, disabled }) => disabled ? semanticColor(theme, "InputBorderDisabled", Color.BorderInputDisabled) : semanticColor(theme, "BorderDefault", Color.BorderInputDisabled)};
   /* Enable clicks on thumb */
   pointer-events: auto;
 
@@ -112,6 +114,7 @@ const SliderContainer = styled.div`
 `;
 const SliderLabel = styled.div`
   ${paragraphMixins.md};
+  ${({ $disabled }) => semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}
   &:first-of-type {
     padding-right: ${Spacing[2]};
   }
@@ -131,11 +134,11 @@ const SliderTrack = styled.div`
   /* Disable clicks on slide bar */
   pointer-events: none;
 
-  ${({ percents, track, disabled }) => {
-	const activeColor = disabled ? Color.BorderInputDisabled : Color.CoreBlue700;
-	const trackColor = Color.BorderDivider;
+  ${({ theme, percents, track, disabled }) => {
+	const activeColor = disabled ? semanticColor(theme, "InputBorderDisabled", Color.BorderInputDisabled) : semanticColor(theme, "InputBorderAccent", Color.CoreBlue700);
+	const trackColor = semanticColor(theme, "BorderDivider", Color.BorderDivider);
 	if (track === false) return css`
-        background: ${Color.BorderDivider};
+        background: ${trackColor};
       `;
 	if (percents.length === 2) return css`
         background: linear-gradient(
@@ -194,7 +197,10 @@ const Slider = ({ minLabel, maxLabel, showLabels, track, width, hideTooltips, cl
 		id,
 		onBlur,
 		children: [
-			showLabels && /* @__PURE__ */ jsx(SliderLabel, { children: minLabel ?? min }),
+			showLabels && /* @__PURE__ */ jsx(SliderLabel, {
+				$disabled: disabled,
+				children: minLabel ?? min
+			}),
 			/* @__PURE__ */ jsx(SliderTrack, {
 				...trackProps,
 				track,
@@ -209,7 +215,10 @@ const Slider = ({ minLabel, maxLabel, showLabels, track, width, hideTooltips, cl
 					outputProps
 				}, `${trackProps.id}_thumb${i}`))
 			}),
-			showLabels && /* @__PURE__ */ jsx(SliderLabel, { children: maxLabel ?? max })
+			showLabels && /* @__PURE__ */ jsx(SliderLabel, {
+				$disabled: disabled,
+				children: maxLabel ?? max
+			})
 		]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${Color.PrimaryWhite};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${(props) =>\n    props.disabled ? Color.BackgroundInputDisabled : Color.BackgroundInputDefault};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid ${Color.BorderInputDisabled};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div`\n  ${paragraphMixins.md};\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ percents, track, disabled }) => {\n    const activeColor = disabled ? Color.BorderInputDisabled : Color.CoreBlue700;\n    const trackColor = Color.BorderDivider;\n\n    if (track === false) {\n      return css`\n        background: ${Color.BorderDivider};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Slider/SliderThumb.tsx","../../../components/Slider/Slider.tsx","../../../components/Slider/SliderRHF.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  type ElementProps,\n  flip,\n  type FloatingContext,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useSliderThumb } from '@react-aria/slider';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport type { SliderState } from '@react-stately/slider';\nimport { debounce } from 'lodash-es';\nimport {\n  type OutputHTMLAttributes,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { FloatingTooltip } from 'design-system/components/Tooltip';\nimport { semanticColor } from 'design-system/lib/semanticColor';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst Tooltip = styled(FloatingTooltip)`\n  ${paragraphMixins.sm};\n`;\n\nconst Thumb = styled('div')<{ disabled?: boolean }>`\n  /* Note this will break if the element is not on a white background. Variable is provided to be able to override. */\n  --background-color-behind-thumb: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)};\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  background: ${({ theme, disabled }) =>\n    disabled\n      ? semanticColor(theme, 'InputSurfaceDisabled', Color.BackgroundInputDisabled)\n      : semanticColor(theme, 'InputSurfaceInverseStatic', Color.BackgroundInputDefault)};\n  cursor: ${(props) => (props.disabled ? 'inherit' : 'pointer')};\n  border-radius: 50%;\n  border: 1px solid\n    ${({ theme, disabled }) =>\n      disabled\n        ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n        : semanticColor(theme, 'BorderDefault', Color.BorderInputDisabled)};\n  /* Enable clicks on thumb */\n  pointer-events: auto;\n\n  &[data-focused] {\n    ${focusStyle}\n    /* Extra pixel of size to overlap into the outline, fixing a small visual bug */\n    box-shadow: 0 0 0 2px var(--background-color-behind-thumb);\n  }\n`;\n\ninterface SliderThumbProps {\n  state: SliderState;\n  trackRef: RefObject<HTMLElement>;\n  index: number;\n  outputProps: OutputHTMLAttributes<HTMLOutputElement>;\n  hideTooltips?: boolean;\n}\n\ninterface UsePressedOptions {\n  delay?: number;\n}\n\nconst usePressed = (context: FloatingContext, options?: UsePressedOptions): ElementProps => {\n  const closeHandler = useMemo(\n    () => debounce(() => context.onOpenChange(false), options?.delay ?? 500),\n    [],\n  );\n  return {\n    reference: {\n      onPointerDown: () => {\n        context.onOpenChange(true);\n      },\n      onPointerUp: () => {\n        closeHandler();\n      },\n    },\n  };\n};\n\nconst SliderThumb = ({ state, trackRef, index, outputProps, hideTooltips }: SliderThumbProps) => {\n  const inputRef = useRef(null);\n  const { thumbProps, inputProps } = useSliderThumb(\n    {\n      index,\n      trackRef,\n      inputRef,\n    },\n    state,\n  );\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const [open, setOpen] = useState(false);\n\n  const { x, y, refs, strategy, context } = useFloating({\n    placement: 'top',\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(4), flip(), shift({ padding: 4 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: 'tooltip' }),\n    useDismiss(context),\n    usePressed(context),\n  ]);\n\n  useEffect(() => {\n    setOpen(isFocused);\n  }, [isFocused]);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateX(-50%) translateY(-50%)',\n        left: `${state.getThumbPercent(index) * 100}%`,\n      }}\n    >\n      {open && !hideTooltips && (\n        <Tooltip\n          {...mergeProps(\n            getFloatingProps({\n              ref: refs.setFloating,\n              style: {\n                position: strategy,\n                top: y ?? '',\n                left: x ?? '',\n              },\n            }),\n            outputProps,\n          )}\n        >\n          {state.getThumbValueLabel(index)}\n        </Tooltip>\n      )}\n      <Thumb\n        {...mergeProps(\n          thumbProps,\n          getReferenceProps({\n            ref: refs.setReference,\n          }),\n          isFocused ? { 'data-focused': true } : undefined,\n        )}\n      >\n        <VisuallyHidden>\n          <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />\n        </VisuallyHidden>\n      </Thumb>\n    </div>\n  );\n};\n\nexport default SliderThumb;\n","import type { NumberFormatOptions } from '@internationalized/number';\nimport { useNumberFormatter } from '@react-aria/i18n';\nimport { useSlider } from '@react-aria/slider';\nimport { useSliderState } from '@react-stately/slider';\nimport type { SliderProps as SliderPropsType } from '@react-types/slider';\nimport { type FocusEventHandler, type ReactNode, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport SliderThumb from 'design-system/components/Slider/SliderThumb';\nimport { semanticColor, semanticOnly } from 'design-system/lib/semanticColor';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n`;\n\nconst SliderLabel = styled.div<{ $disabled?: boolean }>`\n  ${paragraphMixins.md};\n  ${({ $disabled }) =>\n    semanticOnly((tokens) => `color: ${$disabled ? tokens.FgDisabled : tokens.FgPrimary};`)}\n  &:first-of-type {\n    padding-right: ${Spacing[2]};\n  }\n\n  &:last-of-type {\n    padding-left: ${Spacing[2]};\n  }\n`;\n\ntype SliderTrackProps = {\n  track?: boolean;\n  percents: number[];\n  disabled?: boolean;\n};\nconst SliderTrack = styled.div<SliderTrackProps>`\n  position: relative;\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  outline: none;\n  transition: background 0.2s;\n\n  /* Disable clicks on slide bar */\n  pointer-events: none;\n\n  ${({ theme, percents, track, disabled }) => {\n    const activeColor = disabled\n      ? semanticColor(theme, 'InputBorderDisabled', Color.BorderInputDisabled)\n      : semanticColor(theme, 'InputBorderAccent', Color.CoreBlue700);\n    const trackColor = semanticColor(theme, 'BorderDivider', Color.BorderDivider);\n\n    if (track === false) {\n      return css`\n        background: ${trackColor};\n      `;\n    }\n\n    if (percents.length === 2) {\n      return css`\n        background: linear-gradient(\n          to right,\n          ${trackColor} 0%,\n          ${trackColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[0] * 100}%,\n          ${activeColor} ${percents[1] * 100}%,\n          ${trackColor} ${percents[1] * 100}%,\n          ${trackColor} 100%\n        );\n      `;\n    }\n\n    const leftColor = activeColor;\n    const rightColor = trackColor;\n\n    return css`\n      background: linear-gradient(\n        to right,\n        ${leftColor} 0%,\n        ${leftColor} ${percents[0] * 100}%,\n        ${rightColor} ${percents[0] * 100}%,\n        ${rightColor} 100%\n      );\n    `;\n  }}\n`;\n\nexport interface SliderProps<T = number | number[]> {\n  min?: number;\n  minLabel?: ReactNode;\n  max?: number;\n  maxLabel?: ReactNode;\n  onChange?: (value: T) => void;\n  value?: T;\n  defaultValue?: T;\n  step?: number;\n\n  /**\n   * Show labels on ends of track\n   */\n  showLabels?: boolean;\n\n  /**\n   * Track style\n   */\n  track?: boolean;\n\n  /**\n   * Hide tooltips on slider thumbs\n   */\n  hideTooltips?: boolean;\n  width?: number | 'auto';\n  disabled?: boolean;\n  formatOptions?: NumberFormatOptions;\n\n  id?: string;\n  className?: string;\n  name?: string;\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const Slider = ({\n  minLabel,\n  maxLabel,\n  showLabels,\n  track,\n  width,\n  hideTooltips,\n  className,\n  id,\n  onBlur,\n  ...elemProps\n}: SliderProps) => {\n  const { min, max, value, defaultValue, disabled } = elemProps;\n  const trackRef = useRef(null);\n  const numberFormatter = useNumberFormatter(elemProps.formatOptions);\n\n  const ariaElemProps: SliderPropsType = {\n    ...elemProps,\n    isDisabled: disabled,\n    minValue: min,\n    maxValue: max,\n    value: typeof value === 'number' ? [value] : value,\n    defaultValue: typeof defaultValue === 'number' ? [defaultValue] : defaultValue,\n    onChange:\n      typeof elemProps.onChange !== 'undefined'\n        ? (v) => {\n            if (Array.isArray(v) && v.length === 1) {\n              /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n              return elemProps.onChange(v[0]);\n            }\n\n            /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n            return elemProps.onChange(v);\n          }\n        : undefined,\n  };\n\n  const state = useSliderState({ ...ariaElemProps, numberFormatter });\n  const { groupProps, trackProps, outputProps } = useSlider(ariaElemProps, state, trackRef);\n\n  return (\n    <SliderContainer\n      {...groupProps}\n      style={{\n        position: 'relative',\n        alignItems: 'center',\n        width: width ?? 300,\n        touchAction: 'none',\n      }}\n      className={className}\n      id={id}\n      onBlur={onBlur}\n    >\n      {showLabels && <SliderLabel $disabled={disabled}>{minLabel ?? min}</SliderLabel>}\n      <SliderTrack\n        {...trackProps}\n        track={track}\n        ref={trackRef}\n        percents={state.values.map((_v, i) => state.getThumbPercent(i))}\n        disabled={disabled}\n      >\n        {state.values.map((_v, i) => (\n          <SliderThumb\n            key={`${trackProps.id}_thumb${i}`}\n            index={i}\n            state={state}\n            trackRef={trackRef}\n            hideTooltips={hideTooltips}\n            outputProps={outputProps}\n          />\n        ))}\n      </SliderTrack>\n      {showLabels && <SliderLabel $disabled={disabled}>{maxLabel ?? max}</SliderLabel>}\n    </SliderContainer>\n  );\n};\n\nexport default Slider;\n","import type { ComponentPropsWithoutRef } from 'react';\nimport { type Control, type FieldValues, useController } from 'react-hook-form';\n\nimport Slider from './Slider';\n\ninterface SliderRHFProps extends ComponentPropsWithoutRef<typeof Slider> {\n  control: Control<FieldValues, object>;\n  name: string;\n}\n\nconst SliderRHF = ({ control, name: nameProp, defaultValue, ...elemProps }: SliderRHFProps) => {\n  const {\n    field: { onChange, onBlur, name, value },\n  } = useController({\n    name: nameProp,\n    control,\n    rules: { required: true },\n    defaultValue,\n  });\n\n  return <Slider {...elemProps} onBlur={onBlur} onChange={onChange} value={value} name={name} />;\n};\n\nexport default SliderRHF;\n"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/SmartTextInput/PillType.d.ts
+declare const PillType: _$styled_components0.StyledComponent<"div", any, {
+  purple?: boolean;
+  error?: boolean;
+}, never>;
+//#endregion
+export { PillType as default };
+//# sourceMappingURL=PillType.d.mts.map

package/dist/components/SmartTextInput/PillType.mjs

@@ -0,0 +1,31 @@
+import { a as styled, r as css } from "../../styledComponentsInterop-NxwFjeA4.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+//#region components/SmartTextInput/PillType.tsx
+const PillType = styled.div`
+  padding: 0 ${Spacing[1]};
+  height: 16px;
+  ${Typography.TextExtraSmall};
+  font-family: ${({ theme }) => theme.text.fontFamily.mono};
+  background: ${Color.CoreSlate100};
+  color: ${({ theme }) => theme.color.text.primary};
+  border: 1px solid ${Color.CoreSlate300};
+  border-radius: ${BorderRadius.Md};
+  white-space: nowrap;
+
+  ${({ purple }) => {
+	if (purple) return css`
+        background: ${Color.CorePurple100};
+        border-color: ${Color.CorePurple300};
+      `;
+}}
+
+  ${({ error }) => {
+	if (error) return css`
+        color: ${Color.TextDanger};
+      `;
+}}
+`;
+//#endregion
+export { PillType as default };
+
+//# sourceMappingURL=PillType.mjs.map

package/dist/components/SmartTextInput/PillType.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillType.mjs","names":[],"sources":["../../../components/SmartTextInput/PillType.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\n\nconst PillType = styled.div<{ purple?: boolean; error?: boolean }>`\n  padding: 0 ${Spacing[1]};\n  height: 16px;\n  ${Typography.TextExtraSmall};\n  font-family: ${({ theme }) => theme.text.fontFamily.mono};\n  background: ${Color.CoreSlate100};\n  color: ${({ theme }) => theme.color.text.primary};\n  border: 1px solid ${Color.CoreSlate300};\n  border-radius: ${BorderRadius.Md};\n  white-space: nowrap;\n\n  ${({ purple }) => {\n    if (purple) {\n      return css`\n        background: ${Color.CorePurple100};\n        border-color: ${Color.CorePurple300};\n      `;\n    }\n  }}\n\n  ${({ error }) => {\n    if (error) {\n      return css`\n        color: ${Color.TextDanger};\n      `;\n    }\n  }}\n`;\n\nexport default PillType;\n"],"mappings":";;;AAIA,MAAM,WAAW,OAAO,GAA0C;eACnD,QAAQ,GAAG;;IAEtB,WAAW,eAAe;kBACZ,EAAE,YAAY,MAAM,KAAK,WAAW,KAAK;gBAC3C,MAAM,aAAa;YACvB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;sBAC7B,MAAM,aAAa;mBACtB,aAAa,GAAG;;;KAG9B,EAAE,aAAa;AAChB,KAAI,OACF,QAAO,GAAG;sBACM,MAAM,cAAc;wBAClB,MAAM,cAAc;;EAGxC;;KAEC,EAAE,YAAY;AACf,KAAI,MACF,QAAO,GAAG;iBACC,MAAM,WAAW;;EAG9B"}

package/dist/components/SmartTextInput/parser/method-chain/parser.d.mts

@@ -0,0 +1,21 @@
+import type { ASTChain } from './types';
+
+export type ParseOptions = {
+  /**
+   * When true, Chain throws on invalid input instead of returning error nodes.
+   * Must be explicitly set to true for workflow/method-chain callers.
+   * Defaults to false (error-recovering) — SmartTextInput callers can omit this.
+   */
+  strict?: boolean;
+};
+
+export function parse(input: string, options?: ParseOptions): ASTChain;
+
+export class SyntaxError extends Error {
+  expected: string[];
+  found: string;
+  location: {
+    start: number;
+    end: number;
+  };
+}

package/dist/components/SmartTextInput/parser/method-chain/parser.mjs

@@ -0,0 +1,2 @@
+import { i as peg$parse, n as peg$SyntaxError, r as peg$allowedStartRules } from "../../../../parser-Kxos6siN.mjs";
+export { peg$allowedStartRules as StartRules, peg$SyntaxError as SyntaxError, peg$parse as parse };