@persona/design-system 0.1.5-pre.4 → 0.1.6

package/dist/components/ProgressIndicator/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_chunk = require("../../chunk-CKQMccvm.cjs");
 const require_mixins_focus = require("../../mixins/focus.cjs");
 const require_mixins_text = require("../../mixins/text.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["CircleCheckFillIcon","CircleAlertIcon","CircleFillIcon","CircleNullIcon","Color","Spacing","BorderRadius","focusOutline","paragraphMixins"],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import { 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  CircleAlertIcon,\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport type StepStatus = 'uncompleted' | 'completed' | '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` 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 and error steps can be navigated back to.\n * The current step (first uncompleted) 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 === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'error') {\n    return CircleAlertIcon;\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 === 'error') {\n    return Color.BorderIconWarning;\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 / error** steps are clickable — navigate back to review or fix.\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 step — where the user should work next.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.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.cjs","names":["CircleCheckFillIcon","CircleAlertIcon","CircleFillIcon","CircleNullIcon","Color","Spacing","BorderRadius","focusOutline","paragraphMixins"],"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  CircleAlertIcon,\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\n\nexport type StepStatus = 'uncompleted' | 'completed' | '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` 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 and error steps can be navigated back to.\n * The current step (first uncompleted) 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 === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'error') {\n    return CircleAlertIcon;\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 === 'error') {\n    return Color.BorderIconWarning;\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 / error** steps are clickable — navigate back to review or fix.\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 step — where the user should work next.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.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/ProgressIndicator/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ProgressIndicator/ProgressIndicator.tsx"],"sourcesContent":["import { 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  CircleAlertIcon,\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport type StepStatus = 'uncompleted' | 'completed' | '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` 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 and error steps can be navigated back to.\n * The current step (first uncompleted) 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 === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'error') {\n    return CircleAlertIcon;\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 === 'error') {\n    return Color.BorderIconWarning;\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 / error** steps are clickable — navigate back to review or fix.\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 step — where the user should work next.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.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 } 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  CircleAlertIcon,\n  CircleCheckFillIcon,\n  CircleFillIcon,\n  CircleNullIcon,\n} from '@persona/icons';\nimport type { PDSIconComponent } from '@persona/icons/types';\n\nexport type StepStatus = 'uncompleted' | 'completed' | '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` 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 and error steps can be navigated back to.\n * The current step (first uncompleted) 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 === 'error' || isCurrent;\n}\n\nfunction resolveIcon(status: StepStatus, isCurrent: boolean): PDSIconComponent {\n  if (status === 'completed') {\n    return CircleCheckFillIcon;\n  }\n  if (status === 'error') {\n    return CircleAlertIcon;\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 === 'error') {\n    return Color.BorderIconWarning;\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 / error** steps are clickable — navigate back to review or fix.\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 step — where the user should work next.\n  // This is independent of activeStepId, which only controls the visual highlight.\n  const currentStepId = steps.find(({ status = 'uncompleted' }) => status !== 'completed')?.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.cjs

@@ -2,7 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Radio = require("../../Radio-mFfT6G3d.cjs");
+const require_Radio = require("../../Radio-BN9FLRHy.cjs");
 exports.Radio = require_Radio.Radio;
 exports.default = require_Radio.Radio;

package/dist/components/Radio/index.mjs

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

package/dist/components/RadioGroup/index.cjs

@@ -2,7 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_RadioGroup = require("../../RadioGroup-BjDmweRK.cjs");
+const require_RadioGroup = require("../../RadioGroup-D28hdlhz.cjs");
 exports.RadioGroup = require_RadioGroup.RadioGroup;
 exports.default = require_RadioGroup.RadioGroup;

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

@@ -1,2 +1,2 @@
-import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-D5ueuC6a.cjs";
+import { n as RadioGroupProps, t as RadioGroup } from "../../RadioGroup-BDO3pTgP.cjs";
 export { RadioGroup, RadioGroup as default, RadioGroupProps };

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

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

package/dist/components/RadioGroup/index.mjs

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

package/dist/components/SegmentedControl/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_SegmentedControl = require("../../SegmentedControl-CvznPXgC.cjs");
+const require_SegmentedControl = require("../../SegmentedControl-DTkFgjac.cjs");
 exports.SegmentedControl = require_SegmentedControl.SegmentedControl;
 exports.SegmentedControlItem = require_SegmentedControl.SegmentedControlItem;
 exports.default = require_SegmentedControl.SegmentedControl;

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-DRtXdbLe.cjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-C51htGBp.cjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlProps };

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

@@ -1,2 +1,2 @@
-import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-Dk5S4Dhz.mjs";
+import { i as SegmentedControlProps, n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-1QD2zH3l.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-DnwNjYre.mjs";
+import { n as SegmentedControlItem, t as SegmentedControl } from "../../SegmentedControl-pRkMcMXe.mjs";
 export { SegmentedControl, SegmentedControl as default, SegmentedControlItem };

package/dist/components/Select/index.cjs

@@ -2,8 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-require("../../chunk-CoPdw6nB.cjs");
-const require_Select = require("../../Select-CVB-Q1g1.cjs");
+const require_Select = require("../../Select-CowngLd7.cjs");
 exports.Option = require_Select.Option;
 exports.Select = require_Select.Select;
 exports.SelectHeader = require_Select.SelectHeader;

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

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

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-DRnRqMAL.mjs";
+import { i as SelectProps, n as Select, r as SelectHeader, t as Option } from "../../Select-BysJW9mH.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-Cl3AOq0-.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "../../Select-Fg2z5J-p.mjs";
 export { Option, Select, Select as default, SelectHeader };