@tetrascience-npm/tetrascience-react-ui 0.5.0 → 0.6.0-beta.78.1

package/dist/components/composed/ProcessFlow/ProcessFlow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessFlow.cjs","sources":["../../../../src/components/composed/ProcessFlow/ProcessFlow.tsx"],"sourcesContent":["import { CheckIcon, DotIcon, LockIcon, TriangleAlertIcon } from \"lucide-react\";\n\nimport {\n  getConnectionPath,\n  getDescriptionVisibility,\n  getStepAccessibleLabel,\n  hasCustomStepLayout,\n  positionStep,\n  resolveConnections,\n  STATUS_LABELS,\n  type PositionedStep,\n  type ProcessFlowConnection,\n  type ProcessFlowDescriptionVisibility,\n  type ProcessFlowOrientation,\n  type ProcessFlowSize,\n  type ProcessFlowStep,\n  type ProcessFlowStepStatus,\n} from \"./ProcessFlow.utils\";\n\nimport type { ComponentPropsWithoutRef, CSSProperties, MouseEvent } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport { PROCESS_FLOW_STEP_STATUSES } from \"./ProcessFlow.utils\";\nexport type {\n  ProcessFlowConnection,\n  ProcessFlowOrientation,\n  ProcessFlowSize,\n  ProcessFlowStep,\n  ProcessFlowStepConfig,\n  ProcessFlowStepPosition,\n  ProcessFlowStepStatus,\n  ProcessStep,\n  ProcessStepStatus,\n} from \"./ProcessFlow.utils\";\n\ntype ProcessFlowLayout = \"linear\" | \"branching\";\ntype ProcessFlowStepContentLayout = \"stacked\" | \"inline\" | \"anchored\";\n\nexport interface ProcessFlowStepSelectDetails {\n  /** Zero-based index of the selected step in the steps prop. */\n  stepIndex: number;\n  /** Current visual status of the selected step. */\n  status: ProcessFlowStepStatus;\n  nativeEvent: MouseEvent<HTMLButtonElement>;\n}\n\n/**\n * Presentational process flow.\n *\n * ProcessFlow is fully controlled by props. It visualizes parent-owned workflow state and emits user selection through\n * onStepSelect. It intentionally does not own status transitions or fire completion/error side effects.\n */\nexport interface ProcessFlowProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"onSelect\"> {\n  /** Ordered list of steps to render. Each step controls its own visual status. */\n  steps: ProcessFlowStep[];\n  /** Optional explicit connections for branching/configurable flows. */\n  connections?: ProcessFlowConnection[];\n  /** Selected/viewed step id. This is separate from the active workflow status. */\n  selectedStepId?: string;\n  /** Called when a selectable step is clicked. Disabled and non-selectable steps do not call this. */\n  onStepSelect?: (step: ProcessFlowStep, details: ProcessFlowStepSelectDetails) => void;\n  orientation?: ProcessFlowOrientation;\n  size?: ProcessFlowSize;\n  /** Defaults to true. Set to false to hide step descriptions. */\n  showDescriptions?: boolean;\n}\n\ninterface StepControlClassOptions {\n  layout: ProcessFlowLayout;\n  contentLayout: ProcessFlowStepContentLayout;\n  onStepSelect?: ProcessFlowProps[\"onStepSelect\"];\n  isDisabled: boolean;\n  isSelected: boolean;\n  size: ProcessFlowSize;\n  status: ProcessFlowStepStatus;\n}\n\nconst LINEAR_STEP_STATUS_CLASSES: Record<ProcessFlowStepStatus, string> = {\n  pending: \"text-muted-foreground\",\n  active: \"text-foreground\",\n  completed: \"text-foreground\",\n  error: \"text-destructive\",\n  disabled: \"text-muted-foreground\",\n};\n\nconst MARKER_STATUS_CLASSES: Record<ProcessFlowStepStatus, string> = {\n  pending: \"border-border bg-background text-muted-foreground\",\n  active: \"border-primary bg-primary text-primary-foreground\",\n  completed: \"border-positive bg-positive text-background\",\n  error: \"border-destructive bg-destructive text-background\",\n  disabled: \"border-border bg-muted text-muted-foreground\",\n};\n\nconst CONNECTION_STATUS_CLASSES: Record<ProcessFlowStepStatus, string> = {\n  pending: \"stroke-muted-foreground/35\",\n  active: \"stroke-primary\",\n  completed: \"stroke-positive\",\n  error: \"stroke-destructive\",\n  disabled: \"stroke-border\",\n};\n\nconst STEP_MIN_WIDTH: Record<ProcessFlowSize, string> = {\n  default: \"11rem\",\n  compact: \"8.5rem\",\n};\n\nconst RESPONSIVE_STEP_MIN_WIDTH: Record<ProcessFlowSize, string> = {\n  default: \"8rem\",\n  compact: \"7rem\",\n};\n\nconst SQUEEZED_STEP_MIN_WIDTH: Record<ProcessFlowSize, string> = {\n  default: \"5.5rem\",\n  compact: \"4.75rem\",\n};\n\nconst MINI_STEP_MIN_WIDTH: Record<ProcessFlowSize, string> = {\n  default: \"2.75rem\",\n  compact: \"2.5rem\",\n};\n\nconst ROW_MIN_HEIGHT: Record<ProcessFlowSize, string> = {\n  default: \"7.5rem\",\n  compact: \"5.75rem\",\n};\n\nconst RESPONSIVE_ROW_MIN_HEIGHT: Record<ProcessFlowSize, string> = {\n  default: \"6.5rem\",\n  compact: \"5rem\",\n};\n\nconst SQUEEZED_ROW_MIN_HEIGHT: Record<ProcessFlowSize, string> = {\n  default: \"4.5rem\",\n  compact: \"3.75rem\",\n};\n\nconst MINI_ROW_MIN_HEIGHT: Record<ProcessFlowSize, string> = {\n  default: \"3.5rem\",\n  compact: \"3rem\",\n};\n\nconst GRID_GAP: Record<ProcessFlowSize, string> = {\n  default: \"1.25rem\",\n  compact: \"0.75rem\",\n};\n\nconst RESPONSIVE_GRID_GAP: Record<ProcessFlowSize, string> = {\n  default: \"0.875rem\",\n  compact: \"0.625rem\",\n};\n\nconst SQUEEZED_GRID_GAP: Record<ProcessFlowSize, string> = {\n  default: \"0.5rem\",\n  compact: \"0.375rem\",\n};\n\nconst MINI_GRID_GAP: Record<ProcessFlowSize, string> = {\n  default: \"0.375rem\",\n  compact: \"0.25rem\",\n};\n\nconst LINEAR_MARKER_SIZE: Record<ProcessFlowSize, string> = {\n  default: \"2.5rem\",\n  compact: \"1.75rem\",\n};\n\nconst RESPONSIVE_LINEAR_MARKER_SIZE: Record<ProcessFlowSize, string> = {\n  default: \"2rem\",\n  compact: \"1.5rem\",\n};\n\nconst SQUEEZED_LINEAR_MARKER_SIZE: Record<ProcessFlowSize, string> = {\n  default: \"1.5rem\",\n  compact: \"1.25rem\",\n};\n\nconst MINI_LINEAR_MARKER_SIZE: Record<ProcessFlowSize, string> = {\n  default: \"1.25rem\",\n  compact: \"1.125rem\",\n};\n\nfunction getMarkerContent(status: ProcessFlowStepStatus, stepNumber: number) {\n  if (status === \"completed\") {\n    return <CheckIcon aria-hidden=\"true\" />;\n  }\n\n  if (status === \"error\") {\n    return <TriangleAlertIcon aria-hidden=\"true\" />;\n  }\n\n  if (status === \"disabled\") {\n    return <LockIcon aria-hidden=\"true\" />;\n  }\n\n  if (status === \"active\") {\n    return <DotIcon aria-hidden=\"true\" />;\n  }\n\n  return stepNumber;\n}\n\nfunction getLinearSegmentStyle(index: number, count: number): CSSProperties {\n  return {\n    left: `calc(${((index + 0.5) / count) * 100}% + (var(--process-flow-marker-size) / 2))`,\n    width: `calc(${(1 / count) * 100}% - var(--process-flow-marker-size))`,\n  };\n}\n\nfunction getVerticalSegmentStyle(index: number, count: number): CSSProperties {\n  return {\n    height: `calc(${(1 / count) * 100}% - var(--process-flow-marker-size))`,\n    top: `calc(${((index + 0.5) / count) * 100}% + (var(--process-flow-marker-size) / 2))`,\n  };\n}\n\nfunction getHorizontalRailStyle(): CSSProperties {\n  const inset = \"calc(((100% / var(--process-flow-count)) / 2) + (var(--process-flow-marker-size) / 2))\";\n\n  return {\n    left: inset,\n    right: inset,\n  };\n}\n\nfunction getVerticalRailStyle(): CSSProperties {\n  const inset = \"calc(((100% / var(--process-flow-count)) / 2) + (var(--process-flow-marker-size) / 2))\";\n\n  return {\n    bottom: inset,\n    top: inset,\n  };\n}\n\nfunction getStepControlClassName({ contentLayout, onStepSelect, isDisabled, size, status }: StepControlClassOptions) {\n  return cn(\n    \"flex w-full min-w-0 border-0 bg-transparent p-0 text-sm outline-none transition-all focus-visible:border-ring focus-visible:shadow-focus\",\n    contentLayout === \"inline\" && \"flex-row items-center gap-3 text-left\",\n    contentLayout === \"stacked\" && \"flex-col items-center gap-2 text-center\",\n    contentLayout === \"anchored\" && \"relative h-full flex-col items-center justify-center text-center\",\n    size === \"compact\" && (contentLayout === \"inline\" ? \"gap-2\" : \"gap-1.5\"),\n    onStepSelect &&\n      !isDisabled &&\n      cn(\"cursor-pointer hover:text-foreground\", contentLayout !== \"anchored\" && \"hover:-translate-y-px\"),\n    onStepSelect && isDisabled && \"cursor-not-allowed\",\n    LINEAR_STEP_STATUS_CLASSES[status],\n  );\n}\n\nfunction getMarkerClassName({\n  isSelected,\n  size,\n  status,\n}: Pick<StepControlClassOptions, \"isSelected\" | \"size\" | \"status\">) {\n  return cn(\n    \"flex size-[var(--process-flow-marker-size)] shrink-0 items-center justify-center rounded-full border text-xs font-semibold tabular-nums transition-colors [&_svg]:size-4\",\n    size === \"compact\" && \"text-[0.7rem] [&_svg]:size-3\",\n    \"shadow-[0_0_0_0.25rem_var(--background)]\",\n    isSelected && \"ring-4 ring-primary/20\",\n    MARKER_STATUS_CLASSES[status],\n  );\n}\n\nfunction getLabelClassName({\n  layout,\n  isSelected,\n  status,\n}: Pick<StepControlClassOptions, \"layout\" | \"isSelected\" | \"status\">) {\n  return cn(\n    \"block max-w-full truncate font-medium text-current\",\n    layout === \"linear\" && isSelected && status === \"completed\" && \"text-positive\",\n    layout === \"linear\" && isSelected && status !== \"completed\" && status !== \"error\" && \"text-primary\",\n  );\n}\n\nfunction ProcessFlowStepControl({\n  item,\n  isSelected,\n  onStepSelect,\n  descriptionVisibility,\n  size,\n  layout,\n  contentLayout,\n}: {\n  item: PositionedStep;\n  isSelected: boolean;\n  onStepSelect?: ProcessFlowProps[\"onStepSelect\"];\n  descriptionVisibility: ProcessFlowDescriptionVisibility;\n  size: ProcessFlowSize;\n  layout: ProcessFlowLayout;\n  contentLayout: ProcessFlowStepContentLayout;\n}) {\n  const { step, stepIndex, status } = item;\n  const isDisabled = status === \"disabled\" || step.selectable === false;\n  const accessibleLabel = getStepAccessibleLabel(step, status, stepIndex + 1);\n  const textVisibility = descriptionVisibility === \"visible\" ? \"visible\" : \"auto\";\n  const controlClassName = getStepControlClassName({\n    layout,\n    contentLayout,\n    onStepSelect,\n    isDisabled,\n    isSelected,\n    size,\n    status,\n  });\n  const markerContent = (\n    <span\n      aria-hidden=\"true\"\n      className={getMarkerClassName({\n        isSelected,\n        size,\n        status,\n      })}\n      data-slot=\"process-flow-marker\"\n    >\n      {getMarkerContent(status, stepIndex + 1)}\n    </span>\n  );\n  const textContent = (\n    <span\n      data-slot=\"process-flow-text\"\n      data-text-visibility={textVisibility}\n      className={cn(\n        \"flex min-w-0 flex-col gap-0.5\",\n        contentLayout === \"stacked\" && \"w-full items-center\",\n        contentLayout === \"anchored\" &&\n          \"pointer-events-none absolute left-1/2 top-[calc(50%+var(--process-flow-marker-size)/2+0.375rem)] w-max max-w-[calc(var(--process-flow-step-min-width)-0.5rem)] -translate-x-1/2 items-center px-1\",\n      )}\n    >\n      <span className={getLabelClassName({ layout, isSelected, status })} data-slot=\"process-flow-label\">\n        {step.label}\n      </span>\n      {descriptionVisibility !== \"hidden\" && step.description ? (\n        <span\n          className=\"line-clamp-2 text-xs leading-snug text-muted-foreground\"\n          data-description-visibility={descriptionVisibility}\n          data-slot=\"process-flow-description\"\n        >\n          {step.description}\n        </span>\n      ) : null}\n      <span className=\"sr-only\">Status: {STATUS_LABELS[status]}</span>\n    </span>\n  );\n  const content = (\n    <>\n      {markerContent}\n      {textContent}\n    </>\n  );\n\n  if (!onStepSelect) {\n    return (\n      <div\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        aria-disabled={isDisabled || undefined}\n        aria-invalid={status === \"error\" || undefined}\n        aria-label={accessibleLabel}\n        className={controlClassName}\n        data-selected={isSelected || undefined}\n        data-status={status}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      aria-current={status === \"active\" ? \"step\" : undefined}\n      aria-invalid={status === \"error\" || undefined}\n      aria-label={accessibleLabel}\n      aria-pressed={isSelected}\n      className={controlClassName}\n      data-selected={isSelected || undefined}\n      data-status={status}\n      disabled={isDisabled}\n      onClick={(nativeEvent) =>\n        onStepSelect(step, {\n          nativeEvent,\n          status,\n          stepIndex,\n        })\n      }\n    >\n      {content}\n    </button>\n  );\n}\n\nfunction HorizontalProcessFlow({\n  steps,\n  selectedStepId,\n  onStepSelect,\n  size,\n  showDescriptions,\n}: Pick<ProcessFlowProps, \"steps\" | \"selectedStepId\" | \"onStepSelect\" | \"showDescriptions\"> & {\n  size: ProcessFlowSize;\n}) {\n  const positionedSteps = steps.map((step, index) => positionStep(step, index, \"horizontal\"));\n  const resolvedConnections = resolveConnections(positionedSteps);\n  const descriptionVisibility = getDescriptionVisibility(showDescriptions);\n  const flowStyle = {\n    \"--process-flow-count\": steps.length,\n    \"--process-flow-step-min-width-base\": STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-responsive\": RESPONSIVE_STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-squeezed\": SQUEEZED_STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-mini\": MINI_STEP_MIN_WIDTH[size],\n    \"--process-flow-row-min-height-base\": ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-responsive\": RESPONSIVE_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-squeezed\": SQUEEZED_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-mini\": MINI_ROW_MIN_HEIGHT[size],\n    \"--process-flow-marker-size-base\": LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-responsive\": RESPONSIVE_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-squeezed\": SQUEEZED_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-mini\": MINI_LINEAR_MARKER_SIZE[size],\n  } as CSSProperties;\n\n  return (\n    <div className=\"overflow-hidden px-3 py-4\" data-slot=\"process-flow-viewport\" style={flowStyle}>\n      <ol\n        className=\"relative grid min-w-0 min-h-[var(--process-flow-row-min-height)] list-none p-0\"\n        data-slot=\"process-flow-list\"\n        style={{\n          gridTemplateColumns: \"repeat(var(--process-flow-count), minmax(0, 1fr))\",\n        }}\n      >\n        {steps.length > 1 ? (\n          <li\n            aria-hidden=\"true\"\n            className=\"absolute top-[calc(var(--process-flow-marker-size)/2)] h-0.5 -translate-y-1/2 rounded-full bg-muted\"\n            style={getHorizontalRailStyle()}\n          />\n        ) : null}\n        {resolvedConnections.map((connection, index) => (\n          <li\n            key={connection.id}\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute top-[calc(var(--process-flow-marker-size)/2)] h-0.5 -translate-y-1/2 rounded-full transition-colors\",\n              connection.status === \"completed\" && \"bg-positive\",\n              connection.status === \"active\" && \"bg-primary\",\n              connection.status === \"error\" && \"bg-destructive\",\n              connection.status === \"pending\" && \"bg-muted\",\n              connection.status === \"disabled\" && \"bg-border\",\n            )}\n            style={getLinearSegmentStyle(index, steps.length)}\n          />\n        ))}\n        {positionedSteps.map((item) => (\n          <li\n            key={item.step.id}\n            className=\"relative z-[1] flex min-w-0 items-start justify-center\"\n            data-slot=\"process-flow-item\"\n          >\n            <ProcessFlowStepControl\n              item={item}\n              contentLayout=\"stacked\"\n              descriptionVisibility={descriptionVisibility}\n              isSelected={selectedStepId === item.step.id}\n              layout=\"linear\"\n              onStepSelect={onStepSelect}\n              size={size}\n            />\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n}\n\nfunction VerticalProcessFlow({\n  steps,\n  selectedStepId,\n  onStepSelect,\n  size,\n  showDescriptions,\n}: Pick<ProcessFlowProps, \"steps\" | \"selectedStepId\" | \"onStepSelect\" | \"showDescriptions\"> & {\n  size: ProcessFlowSize;\n}) {\n  const positionedSteps = steps.map((step, index) => positionStep(step, index, \"vertical\"));\n  const resolvedConnections = resolveConnections(positionedSteps);\n  const descriptionVisibility = getDescriptionVisibility(showDescriptions);\n  const flowStyle = {\n    \"--process-flow-count\": steps.length,\n    \"--process-flow-row-min-height-base\": ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-responsive\": RESPONSIVE_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-squeezed\": SQUEEZED_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-mini\": MINI_ROW_MIN_HEIGHT[size],\n    \"--process-flow-marker-size-base\": LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-responsive\": RESPONSIVE_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-squeezed\": SQUEEZED_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-mini\": MINI_LINEAR_MARKER_SIZE[size],\n  } as CSSProperties;\n\n  return (\n    <div className=\"overflow-x-auto px-3 py-3\" data-slot=\"process-flow-viewport\" style={flowStyle}>\n      <ol\n        className=\"relative grid min-h-[calc(var(--process-flow-count)*var(--process-flow-row-min-height))] min-w-72 list-none p-0\"\n        data-slot=\"process-flow-list\"\n        style={{\n          gridTemplateRows: \"repeat(var(--process-flow-count), minmax(var(--process-flow-row-min-height), auto))\",\n        }}\n      >\n        {steps.length > 1 ? (\n          <li\n            aria-hidden=\"true\"\n            className=\"absolute left-[calc(var(--process-flow-marker-size)/2)] w-0.5 -translate-x-1/2 rounded-full bg-muted\"\n            style={getVerticalRailStyle()}\n          />\n        ) : null}\n        {resolvedConnections.map((connection, index) => (\n          <li\n            key={connection.id}\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute left-[calc(var(--process-flow-marker-size)/2)] w-0.5 -translate-x-1/2 rounded-full transition-colors\",\n              connection.status === \"completed\" && \"bg-positive\",\n              connection.status === \"active\" && \"bg-primary\",\n              connection.status === \"error\" && \"bg-destructive\",\n              connection.status === \"pending\" && \"bg-muted\",\n              connection.status === \"disabled\" && \"bg-border\",\n            )}\n            style={getVerticalSegmentStyle(index, steps.length)}\n          />\n        ))}\n        {positionedSteps.map((item) => (\n          <li key={item.step.id} className=\"relative z-[1] flex min-w-0 items-center\" data-slot=\"process-flow-item\">\n            <ProcessFlowStepControl\n              item={item}\n              contentLayout=\"inline\"\n              descriptionVisibility={descriptionVisibility}\n              isSelected={selectedStepId === item.step.id}\n              layout=\"linear\"\n              onStepSelect={onStepSelect}\n              size={size}\n            />\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n}\n\nexport function ProcessFlow({\n  steps,\n  connections,\n  selectedStepId,\n  onStepSelect,\n  orientation = \"horizontal\",\n  size = \"default\",\n  showDescriptions,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Process flow\",\n  ...props\n}: ProcessFlowProps) {\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const layout: ProcessFlowLayout = connections || hasCustomStepLayout(steps) ? \"branching\" : \"linear\";\n\n  if (layout === \"linear\" && orientation === \"horizontal\") {\n    return (\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\"w-full min-w-0\", className)}\n        data-orientation={orientation}\n        data-slot=\"process-flow\"\n        data-size={size}\n        style={style}\n        {...props}\n      >\n        <HorizontalProcessFlow\n          steps={steps}\n          selectedStepId={selectedStepId}\n          onStepSelect={onStepSelect}\n          showDescriptions={showDescriptions}\n          size={size}\n        />\n      </nav>\n    );\n  }\n\n  if (layout === \"linear\" && orientation === \"vertical\") {\n    return (\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\"w-full min-w-0\", className)}\n        data-orientation={orientation}\n        data-slot=\"process-flow\"\n        data-size={size}\n        style={style}\n        {...props}\n      >\n        <VerticalProcessFlow\n          steps={steps}\n          selectedStepId={selectedStepId}\n          onStepSelect={onStepSelect}\n          showDescriptions={showDescriptions}\n          size={size}\n        />\n      </nav>\n    );\n  }\n\n  const positionedSteps = steps.map((step, index) => positionStep(step, index, orientation));\n  const rowCount = Math.max(...positionedSteps.map((step) => step.row + 1), 1);\n  const columnCount = Math.max(...positionedSteps.map((step) => step.column + 1), 1);\n  const resolvedConnections = resolveConnections(positionedSteps, connections);\n  const descriptionVisibility = getDescriptionVisibility(showDescriptions);\n  const flowStyle = {\n    \"--process-flow-columns\": columnCount,\n    \"--process-flow-rows\": rowCount,\n    \"--process-flow-step-min-width-base\": STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-responsive\": RESPONSIVE_STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-squeezed\": SQUEEZED_STEP_MIN_WIDTH[size],\n    \"--process-flow-step-min-width-mini\": MINI_STEP_MIN_WIDTH[size],\n    \"--process-flow-row-min-height-base\": ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-responsive\": RESPONSIVE_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-squeezed\": SQUEEZED_ROW_MIN_HEIGHT[size],\n    \"--process-flow-row-min-height-mini\": MINI_ROW_MIN_HEIGHT[size],\n    \"--process-flow-gap-base\": GRID_GAP[size],\n    \"--process-flow-gap-responsive\": RESPONSIVE_GRID_GAP[size],\n    \"--process-flow-gap-squeezed\": SQUEEZED_GRID_GAP[size],\n    \"--process-flow-gap-mini\": MINI_GRID_GAP[size],\n    \"--process-flow-marker-size-base\": LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-responsive\": RESPONSIVE_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-squeezed\": SQUEEZED_LINEAR_MARKER_SIZE[size],\n    \"--process-flow-marker-size-mini\": MINI_LINEAR_MARKER_SIZE[size],\n  } as CSSProperties;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={cn(\"w-full min-w-0\", className)}\n      data-orientation={orientation}\n      data-slot=\"process-flow\"\n      data-size={size}\n      style={style}\n      {...props}\n    >\n      <div className=\"overflow-x-auto py-2\" data-slot=\"process-flow-viewport\" style={flowStyle}>\n        <div\n          className=\"relative min-w-[calc(var(--process-flow-columns)*var(--process-flow-step-min-width))] min-h-[calc(var(--process-flow-rows)*var(--process-flow-row-min-height))]\"\n          data-slot=\"process-flow-canvas\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 z-0 size-full overflow-visible\"\n            preserveAspectRatio=\"none\"\n            viewBox=\"0 0 100 100\"\n          >\n            {resolvedConnections.map((connection) => (\n              <path\n                key={connection.id}\n                className={cn(\n                  \"fill-none stroke-2 transition-colors\",\n                  CONNECTION_STATUS_CLASSES[connection.status],\n                  connection.status === \"disabled\" && \"opacity-60\",\n                )}\n                d={getConnectionPath(connection, rowCount, columnCount)}\n                data-status={connection.status}\n                strokeLinecap=\"round\"\n                vectorEffect=\"non-scaling-stroke\"\n              />\n            ))}\n          </svg>\n\n          <ol\n            className=\"relative z-[1] grid min-h-[inherit] list-none p-0\"\n            data-slot=\"process-flow-list\"\n            style={{\n              gap: \"var(--process-flow-gap)\",\n              gridTemplateColumns:\n                \"repeat(var(--process-flow-columns), minmax(var(--process-flow-step-min-width), 1fr))\",\n              gridTemplateRows: \"repeat(var(--process-flow-rows), minmax(var(--process-flow-row-min-height), auto))\",\n            }}\n          >\n            {positionedSteps.map((item) => (\n              <li\n                key={item.step.id}\n                className=\"flex min-w-0 items-center justify-center\"\n                data-slot=\"process-flow-item\"\n                style={{\n                  gridColumn: item.column + 1,\n                  gridRow: item.row + 1,\n                }}\n              >\n                <ProcessFlowStepControl\n                  item={item}\n                  contentLayout=\"anchored\"\n                  descriptionVisibility={descriptionVisibility}\n                  isSelected={selectedStepId === item.step.id}\n                  layout=\"branching\"\n                  onStepSelect={onStepSelect}\n                  size={size}\n                />\n              </li>\n            ))}\n          </ol>\n        </div>\n      </div>\n    </nav>\n  );\n}\n"],"names":["LINEAR_STEP_STATUS_CLASSES","MARKER_STATUS_CLASSES","CONNECTION_STATUS_CLASSES","STEP_MIN_WIDTH","RESPONSIVE_STEP_MIN_WIDTH","SQUEEZED_STEP_MIN_WIDTH","MINI_STEP_MIN_WIDTH","ROW_MIN_HEIGHT","RESPONSIVE_ROW_MIN_HEIGHT","SQUEEZED_ROW_MIN_HEIGHT","MINI_ROW_MIN_HEIGHT","GRID_GAP","RESPONSIVE_GRID_GAP","SQUEEZED_GRID_GAP","MINI_GRID_GAP","LINEAR_MARKER_SIZE","RESPONSIVE_LINEAR_MARKER_SIZE","SQUEEZED_LINEAR_MARKER_SIZE","MINI_LINEAR_MARKER_SIZE","getMarkerContent","status","stepNumber","jsx","CheckIcon","TriangleAlertIcon","LockIcon","DotIcon","getLinearSegmentStyle","index","count","getVerticalSegmentStyle","getHorizontalRailStyle","inset","getVerticalRailStyle","getStepControlClassName","contentLayout","onStepSelect","isDisabled","size","cn","getMarkerClassName","isSelected","getLabelClassName","layout","ProcessFlowStepControl","item","descriptionVisibility","step","stepIndex","accessibleLabel","getStepAccessibleLabel","textVisibility","controlClassName","markerContent","textContent","jsxs","STATUS_LABELS","content","Fragment","nativeEvent","HorizontalProcessFlow","steps","selectedStepId","showDescriptions","positionedSteps","positionStep","resolvedConnections","resolveConnections","getDescriptionVisibility","flowStyle","connection","VerticalProcessFlow","ProcessFlow","connections","orientation","className","style","ariaLabel","props","hasCustomStepLayout","rowCount","columnCount","getConnectionPath"],"mappings":"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"}

package/dist/components/composed/ProcessFlow/ProcessFlow.js

@@ -0,0 +1,543 @@
+import { jsx as s, jsxs as w, Fragment as V } from "react/jsx-runtime";
+import { CheckIcon as q, TriangleAlertIcon as U, LockIcon as W, DotIcon as Z } from "lucide-react";
+import { hasCustomStepLayout as z, positionStep as E, resolveConnections as N, getConnectionPath as j, getStepAccessibleLabel as F, STATUS_LABELS as K, getDescriptionVisibility as S } from "./ProcessFlow.utils.js";
+import { PROCESS_FLOW_STEP_STATUSES as ge } from "./ProcessFlow.utils.js";
+import { cn as f } from "../../../lib/utils.js";
+const Q = {
+  pending: "text-muted-foreground",
+  active: "text-foreground",
+  completed: "text-foreground",
+  error: "text-destructive",
+  disabled: "text-muted-foreground"
+}, $ = {
+  pending: "border-border bg-background text-muted-foreground",
+  active: "border-primary bg-primary text-primary-foreground",
+  completed: "border-positive bg-positive text-background",
+  error: "border-destructive bg-destructive text-background",
+  disabled: "border-border bg-muted text-muted-foreground"
+}, B = {
+  pending: "stroke-muted-foreground/35",
+  active: "stroke-primary",
+  completed: "stroke-positive",
+  error: "stroke-destructive",
+  disabled: "stroke-border"
+}, H = {
+  default: "11rem",
+  compact: "8.5rem"
+}, L = {
+  default: "8rem",
+  compact: "7rem"
+}, D = {
+  default: "5.5rem",
+  compact: "4.75rem"
+}, G = {
+  default: "2.75rem",
+  compact: "2.5rem"
+}, k = {
+  default: "7.5rem",
+  compact: "5.75rem"
+}, I = {
+  default: "6.5rem",
+  compact: "5rem"
+}, y = {
+  default: "4.5rem",
+  compact: "3.75rem"
+}, R = {
+  default: "3.5rem",
+  compact: "3rem"
+}, J = {
+  default: "1.25rem",
+  compact: "0.75rem"
+}, X = {
+  default: "0.875rem",
+  compact: "0.625rem"
+}, Y = {
+  default: "0.5rem",
+  compact: "0.375rem"
+}, ee = {
+  default: "0.375rem",
+  compact: "0.25rem"
+}, T = {
+  default: "2.5rem",
+  compact: "1.75rem"
+}, C = {
+  default: "2rem",
+  compact: "1.5rem"
+}, A = {
+  default: "1.5rem",
+  compact: "1.25rem"
+}, M = {
+  default: "1.25rem",
+  compact: "1.125rem"
+};
+function re(r, a) {
+  return r === "completed" ? /* @__PURE__ */ s(q, { "aria-hidden": "true" }) : r === "error" ? /* @__PURE__ */ s(U, { "aria-hidden": "true" }) : r === "disabled" ? /* @__PURE__ */ s(W, { "aria-hidden": "true" }) : r === "active" ? /* @__PURE__ */ s(Z, { "aria-hidden": "true" }) : a;
+}
+function te(r, a) {
+  return {
+    left: `calc(${(r + 0.5) / a * 100}% + (var(--process-flow-marker-size) / 2))`,
+    width: `calc(${1 / a * 100}% - var(--process-flow-marker-size))`
+  };
+}
+function oe(r, a) {
+  return {
+    height: `calc(${1 / a * 100}% - var(--process-flow-marker-size))`,
+    top: `calc(${(r + 0.5) / a * 100}% + (var(--process-flow-marker-size) / 2))`
+  };
+}
+function se() {
+  const r = "calc(((100% / var(--process-flow-count)) / 2) + (var(--process-flow-marker-size) / 2))";
+  return {
+    left: r,
+    right: r
+  };
+}
+function ae() {
+  const r = "calc(((100% / var(--process-flow-count)) / 2) + (var(--process-flow-marker-size) / 2))";
+  return {
+    bottom: r,
+    top: r
+  };
+}
+function le({ contentLayout: r, onStepSelect: a, isDisabled: l, size: t, status: n }) {
+  return f(
+    "flex w-full min-w-0 border-0 bg-transparent p-0 text-sm outline-none transition-all focus-visible:border-ring focus-visible:shadow-focus",
+    r === "inline" && "flex-row items-center gap-3 text-left",
+    r === "stacked" && "flex-col items-center gap-2 text-center",
+    r === "anchored" && "relative h-full flex-col items-center justify-center text-center",
+    t === "compact" && (r === "inline" ? "gap-2" : "gap-1.5"),
+    a && !l && f("cursor-pointer hover:text-foreground", r !== "anchored" && "hover:-translate-y-px"),
+    a && l && "cursor-not-allowed",
+    Q[n]
+  );
+}
+function ie({
+  isSelected: r,
+  size: a,
+  status: l
+}) {
+  return f(
+    "flex size-[var(--process-flow-marker-size)] shrink-0 items-center justify-center rounded-full border text-xs font-semibold tabular-nums transition-colors [&_svg]:size-4",
+    a === "compact" && "text-[0.7rem] [&_svg]:size-3",
+    "shadow-[0_0_0_0.25rem_var(--background)]",
+    r && "ring-4 ring-primary/20",
+    $[l]
+  );
+}
+function ne({
+  layout: r,
+  isSelected: a,
+  status: l
+}) {
+  return f(
+    "block max-w-full truncate font-medium text-current",
+    r === "linear" && a && l === "completed" && "text-positive",
+    r === "linear" && a && l !== "completed" && l !== "error" && "text-primary"
+  );
+}
+function P({
+  item: r,
+  isSelected: a,
+  onStepSelect: l,
+  descriptionVisibility: t,
+  size: n,
+  layout: o,
+  contentLayout: m
+}) {
+  const { step: d, stepIndex: p, status: e } = r, c = e === "disabled" || d.selectable === !1, h = F(d, e, p + 1), u = t === "visible" ? "visible" : "auto", v = le({
+    contentLayout: m,
+    onStepSelect: l,
+    isDisabled: c,
+    size: n,
+    status: e
+  }), g = /* @__PURE__ */ s(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: ie({
+        isSelected: a,
+        size: n,
+        status: e
+      }),
+      "data-slot": "process-flow-marker",
+      children: re(e, p + 1)
+    }
+  ), x = /* @__PURE__ */ w(
+    "span",
+    {
+      "data-slot": "process-flow-text",
+      "data-text-visibility": u,
+      className: f(
+        "flex min-w-0 flex-col gap-0.5",
+        m === "stacked" && "w-full items-center",
+        m === "anchored" && "pointer-events-none absolute left-1/2 top-[calc(50%+var(--process-flow-marker-size)/2+0.375rem)] w-max max-w-[calc(var(--process-flow-step-min-width)-0.5rem)] -translate-x-1/2 items-center px-1"
+      ),
+      children: [
+        /* @__PURE__ */ s("span", { className: ne({ layout: o, isSelected: a, status: e }), "data-slot": "process-flow-label", children: d.label }),
+        t !== "hidden" && d.description ? /* @__PURE__ */ s(
+          "span",
+          {
+            className: "line-clamp-2 text-xs leading-snug text-muted-foreground",
+            "data-description-visibility": t,
+            "data-slot": "process-flow-description",
+            children: d.description
+          }
+        ) : null,
+        /* @__PURE__ */ w("span", { className: "sr-only", children: [
+          "Status: ",
+          K[e]
+        ] })
+      ]
+    }
+  ), b = /* @__PURE__ */ w(V, { children: [
+    g,
+    x
+  ] });
+  return l ? /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      "aria-current": e === "active" ? "step" : void 0,
+      "aria-invalid": e === "error" || void 0,
+      "aria-label": h,
+      "aria-pressed": a,
+      className: v,
+      "data-selected": a || void 0,
+      "data-status": e,
+      disabled: c,
+      onClick: (_) => l(d, {
+        nativeEvent: _,
+        status: e,
+        stepIndex: p
+      }),
+      children: b
+    }
+  ) : /* @__PURE__ */ s(
+    "div",
+    {
+      "aria-current": e === "active" ? "step" : void 0,
+      "aria-disabled": c || void 0,
+      "aria-invalid": e === "error" || void 0,
+      "aria-label": h,
+      className: v,
+      "data-selected": a || void 0,
+      "data-status": e,
+      children: b
+    }
+  );
+}
+function ce({
+  steps: r,
+  selectedStepId: a,
+  onStepSelect: l,
+  size: t,
+  showDescriptions: n
+}) {
+  const o = r.map((e, c) => E(e, c, "horizontal")), m = N(o), d = S(n), p = {
+    "--process-flow-count": r.length,
+    "--process-flow-step-min-width-base": H[t],
+    "--process-flow-step-min-width-responsive": L[t],
+    "--process-flow-step-min-width-squeezed": D[t],
+    "--process-flow-step-min-width-mini": G[t],
+    "--process-flow-row-min-height-base": k[t],
+    "--process-flow-row-min-height-responsive": I[t],
+    "--process-flow-row-min-height-squeezed": y[t],
+    "--process-flow-row-min-height-mini": R[t],
+    "--process-flow-marker-size-base": T[t],
+    "--process-flow-marker-size-responsive": C[t],
+    "--process-flow-marker-size-squeezed": A[t],
+    "--process-flow-marker-size-mini": M[t]
+  };
+  return /* @__PURE__ */ s("div", { className: "overflow-hidden px-3 py-4", "data-slot": "process-flow-viewport", style: p, children: /* @__PURE__ */ w(
+    "ol",
+    {
+      className: "relative grid min-w-0 min-h-[var(--process-flow-row-min-height)] list-none p-0",
+      "data-slot": "process-flow-list",
+      style: {
+        gridTemplateColumns: "repeat(var(--process-flow-count), minmax(0, 1fr))"
+      },
+      children: [
+        r.length > 1 ? /* @__PURE__ */ s(
+          "li",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-[calc(var(--process-flow-marker-size)/2)] h-0.5 -translate-y-1/2 rounded-full bg-muted",
+            style: se()
+          }
+        ) : null,
+        m.map((e, c) => /* @__PURE__ */ s(
+          "li",
+          {
+            "aria-hidden": "true",
+            className: f(
+              "absolute top-[calc(var(--process-flow-marker-size)/2)] h-0.5 -translate-y-1/2 rounded-full transition-colors",
+              e.status === "completed" && "bg-positive",
+              e.status === "active" && "bg-primary",
+              e.status === "error" && "bg-destructive",
+              e.status === "pending" && "bg-muted",
+              e.status === "disabled" && "bg-border"
+            ),
+            style: te(c, r.length)
+          },
+          e.id
+        )),
+        o.map((e) => /* @__PURE__ */ s(
+          "li",
+          {
+            className: "relative z-[1] flex min-w-0 items-start justify-center",
+            "data-slot": "process-flow-item",
+            children: /* @__PURE__ */ s(
+              P,
+              {
+                item: e,
+                contentLayout: "stacked",
+                descriptionVisibility: d,
+                isSelected: a === e.step.id,
+                layout: "linear",
+                onStepSelect: l,
+                size: t
+              }
+            )
+          },
+          e.step.id
+        ))
+      ]
+    }
+  ) });
+}
+function de({
+  steps: r,
+  selectedStepId: a,
+  onStepSelect: l,
+  size: t,
+  showDescriptions: n
+}) {
+  const o = r.map((e, c) => E(e, c, "vertical")), m = N(o), d = S(n), p = {
+    "--process-flow-count": r.length,
+    "--process-flow-row-min-height-base": k[t],
+    "--process-flow-row-min-height-responsive": I[t],
+    "--process-flow-row-min-height-squeezed": y[t],
+    "--process-flow-row-min-height-mini": R[t],
+    "--process-flow-marker-size-base": T[t],
+    "--process-flow-marker-size-responsive": C[t],
+    "--process-flow-marker-size-squeezed": A[t],
+    "--process-flow-marker-size-mini": M[t]
+  };
+  return /* @__PURE__ */ s("div", { className: "overflow-x-auto px-3 py-3", "data-slot": "process-flow-viewport", style: p, children: /* @__PURE__ */ w(
+    "ol",
+    {
+      className: "relative grid min-h-[calc(var(--process-flow-count)*var(--process-flow-row-min-height))] min-w-72 list-none p-0",
+      "data-slot": "process-flow-list",
+      style: {
+        gridTemplateRows: "repeat(var(--process-flow-count), minmax(var(--process-flow-row-min-height), auto))"
+      },
+      children: [
+        r.length > 1 ? /* @__PURE__ */ s(
+          "li",
+          {
+            "aria-hidden": "true",
+            className: "absolute left-[calc(var(--process-flow-marker-size)/2)] w-0.5 -translate-x-1/2 rounded-full bg-muted",
+            style: ae()
+          }
+        ) : null,
+        m.map((e, c) => /* @__PURE__ */ s(
+          "li",
+          {
+            "aria-hidden": "true",
+            className: f(
+              "absolute left-[calc(var(--process-flow-marker-size)/2)] w-0.5 -translate-x-1/2 rounded-full transition-colors",
+              e.status === "completed" && "bg-positive",
+              e.status === "active" && "bg-primary",
+              e.status === "error" && "bg-destructive",
+              e.status === "pending" && "bg-muted",
+              e.status === "disabled" && "bg-border"
+            ),
+            style: oe(c, r.length)
+          },
+          e.id
+        )),
+        o.map((e) => /* @__PURE__ */ s("li", { className: "relative z-[1] flex min-w-0 items-center", "data-slot": "process-flow-item", children: /* @__PURE__ */ s(
+          P,
+          {
+            item: e,
+            contentLayout: "inline",
+            descriptionVisibility: d,
+            isSelected: a === e.step.id,
+            layout: "linear",
+            onStepSelect: l,
+            size: t
+          }
+        ) }, e.step.id))
+      ]
+    }
+  ) });
+}
+function we({
+  steps: r,
+  connections: a,
+  selectedStepId: l,
+  onStepSelect: t,
+  orientation: n = "horizontal",
+  size: o = "default",
+  showDescriptions: m,
+  className: d,
+  style: p,
+  "aria-label": e = "Process flow",
+  ...c
+}) {
+  if (r.length === 0)
+    return null;
+  const h = a || z(r) ? "branching" : "linear";
+  if (h === "linear" && n === "horizontal")
+    return /* @__PURE__ */ s(
+      "nav",
+      {
+        "aria-label": e,
+        className: f("w-full min-w-0", d),
+        "data-orientation": n,
+        "data-slot": "process-flow",
+        "data-size": o,
+        style: p,
+        ...c,
+        children: /* @__PURE__ */ s(
+          ce,
+          {
+            steps: r,
+            selectedStepId: l,
+            onStepSelect: t,
+            showDescriptions: m,
+            size: o
+          }
+        )
+      }
+    );
+  if (h === "linear" && n === "vertical")
+    return /* @__PURE__ */ s(
+      "nav",
+      {
+        "aria-label": e,
+        className: f("w-full min-w-0", d),
+        "data-orientation": n,
+        "data-slot": "process-flow",
+        "data-size": o,
+        style: p,
+        ...c,
+        children: /* @__PURE__ */ s(
+          de,
+          {
+            steps: r,
+            selectedStepId: l,
+            onStepSelect: t,
+            showDescriptions: m,
+            size: o
+          }
+        )
+      }
+    );
+  const u = r.map((i, O) => E(i, O, n)), v = Math.max(...u.map((i) => i.row + 1), 1), g = Math.max(...u.map((i) => i.column + 1), 1), x = N(u, a), b = S(m), _ = {
+    "--process-flow-columns": g,
+    "--process-flow-rows": v,
+    "--process-flow-step-min-width-base": H[o],
+    "--process-flow-step-min-width-responsive": L[o],
+    "--process-flow-step-min-width-squeezed": D[o],
+    "--process-flow-step-min-width-mini": G[o],
+    "--process-flow-row-min-height-base": k[o],
+    "--process-flow-row-min-height-responsive": I[o],
+    "--process-flow-row-min-height-squeezed": y[o],
+    "--process-flow-row-min-height-mini": R[o],
+    "--process-flow-gap-base": J[o],
+    "--process-flow-gap-responsive": X[o],
+    "--process-flow-gap-squeezed": Y[o],
+    "--process-flow-gap-mini": ee[o],
+    "--process-flow-marker-size-base": T[o],
+    "--process-flow-marker-size-responsive": C[o],
+    "--process-flow-marker-size-squeezed": A[o],
+    "--process-flow-marker-size-mini": M[o]
+  };
+  return /* @__PURE__ */ s(
+    "nav",
+    {
+      "aria-label": e,
+      className: f("w-full min-w-0", d),
+      "data-orientation": n,
+      "data-slot": "process-flow",
+      "data-size": o,
+      style: p,
+      ...c,
+      children: /* @__PURE__ */ s("div", { className: "overflow-x-auto py-2", "data-slot": "process-flow-viewport", style: _, children: /* @__PURE__ */ w(
+        "div",
+        {
+          className: "relative min-w-[calc(var(--process-flow-columns)*var(--process-flow-step-min-width))] min-h-[calc(var(--process-flow-rows)*var(--process-flow-row-min-height))]",
+          "data-slot": "process-flow-canvas",
+          children: [
+            /* @__PURE__ */ s(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute inset-0 z-0 size-full overflow-visible",
+                preserveAspectRatio: "none",
+                viewBox: "0 0 100 100",
+                children: x.map((i) => /* @__PURE__ */ s(
+                  "path",
+                  {
+                    className: f(
+                      "fill-none stroke-2 transition-colors",
+                      B[i.status],
+                      i.status === "disabled" && "opacity-60"
+                    ),
+                    d: j(i, v, g),
+                    "data-status": i.status,
+                    strokeLinecap: "round",
+                    vectorEffect: "non-scaling-stroke"
+                  },
+                  i.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ s(
+              "ol",
+              {
+                className: "relative z-[1] grid min-h-[inherit] list-none p-0",
+                "data-slot": "process-flow-list",
+                style: {
+                  gap: "var(--process-flow-gap)",
+                  gridTemplateColumns: "repeat(var(--process-flow-columns), minmax(var(--process-flow-step-min-width), 1fr))",
+                  gridTemplateRows: "repeat(var(--process-flow-rows), minmax(var(--process-flow-row-min-height), auto))"
+                },
+                children: u.map((i) => /* @__PURE__ */ s(
+                  "li",
+                  {
+                    className: "flex min-w-0 items-center justify-center",
+                    "data-slot": "process-flow-item",
+                    style: {
+                      gridColumn: i.column + 1,
+                      gridRow: i.row + 1
+                    },
+                    children: /* @__PURE__ */ s(
+                      P,
+                      {
+                        item: i,
+                        contentLayout: "anchored",
+                        descriptionVisibility: b,
+                        isSelected: l === i.step.id,
+                        layout: "branching",
+                        onStepSelect: t,
+                        size: o
+                      }
+                    )
+                  },
+                  i.step.id
+                ))
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+export {
+  ge as PROCESS_FLOW_STEP_STATUSES,
+  we as ProcessFlow
+};
+//# sourceMappingURL=ProcessFlow.js.map