50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Ted5,/* The wrapper is the container, so a horizontal list can stack when it runs out of room. */ .cr-steps { container-type: inline-size; color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); } .cr-steps__list { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; } /* A step is its marker with the line running on to the next marker, then its text beneath. */ .cr-steps__step { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--cr-space-2); min-width: 0; } .cr-steps__step:last-child { flex: none; } .cr-steps__rail { display: flex; align-items: center; gap: var(--cr-space-3); padding-inline-end: var(--cr-space-3); } .cr-steps__marker { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--cr-radius-full); background: var(--cr-color-bg-subtle); color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-bold); } .cr-steps__line { flex: 1; height: 2px; border-radius: 2px; background: var(--cr-color-border-strong); } .cr-steps__step:last-child .cr-steps__line { display: none; } .cr-steps__text { display: flex; flex-direction: column; gap: 2px; padding-inline-end: var(--cr-space-4); } .cr-steps__title { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); } .cr-steps__description { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-sm); } .cr-steps__step[data-status='done'] .cr-steps__marker { background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); } .cr-steps__step[data-status='done'] .cr-steps__line { background: var(--cr-color-ink-bg); } .cr-steps__step[data-status='current'] .cr-steps__marker { background: var(--cr-color-bg-raised); box-shadow: 0 0 0 2px var(--cr-color-ink-bg); color: var(--cr-color-text-default); } .cr-steps__step[data-status='done'] .cr-steps__title, .cr-steps__step[data-status='current'] .cr-steps__title { color: var(--cr-color-text-default); } .cr-steps__step[data-status='error'] .cr-steps__marker { background: var(--cr-color-status-failed-bg); box-shadow: 0 0 0 1.5px var(--cr-color-danger-text); color: var(--cr-color-danger-text); } .cr-steps__step[data-status='error'] .cr-steps__title { color: var(--cr-color-danger-text); } /* Vertical: the marker and line form a column beside the text. */ .cr-steps[data-orientation='vertical'] .cr-steps__list { flex-direction: column; } .cr-steps[data-orientation='vertical'] .cr-steps__step { flex: none; flex-direction: row; gap: var(--cr-space-3); } .cr-steps[data-orientation='vertical'] .cr-steps__rail { flex-direction: column; gap: 6px; padding: 0; } .cr-steps[data-orientation='vertical'] .cr-steps__line { width: 2px; min-height: 20px; height: auto; margin-bottom: 6px; } .cr-steps[data-orientation='vertical'] .cr-steps__text { padding: 3px 0 var(--cr-space-4); } .cr-steps[data-orientation='vertical'] .cr-steps__step:last-child .cr-steps__text { padding-bottom: 0; } @container (max-width: 480px) { .cr-steps[data-orientation='horizontal'] .cr-steps__list { flex-direction: column; } .cr-steps[data-orientation='horizontal'] .cr-steps__step { flex: none; flex-direction: row; gap: var(--cr-space-3); } .cr-steps[data-orientation='horizontal'] .cr-steps__rail { flex-direction: column; gap: 6px; padding: 0; } .cr-steps[data-orientation='horizontal'] .cr-steps__line { width: 2px; min-height: 20px; height: auto; margin-bottom: 6px; } .cr-steps[data-orientation='horizontal'] .cr-steps__text { padding: 3px 0 var(--cr-space-4); } } 53:Ta40,import type { ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { CheckIcon, CrossIcon } from '@/lib/creance/icons'; import { VisuallyHidden } from '@/lib/creance/VisuallyHidden'; import './Steps.css'; export type StepStatus = 'done' | 'current' | 'upcoming' | 'error'; export interface StepItem { title: ReactNode; description?: ReactNode; /** Overrides the status worked out from `current`. Use `error` for a step that failed. */ status?: StepStatus; } export interface StepsProps { steps: StepItem[]; /** Index of the step in progress. Earlier steps are done, later ones are upcoming. Pass `steps.length` when all are done. Default 0. */ current?: number; /** A narrow horizontal list stacks vertically by itself. */ orientation?: 'horizontal' | 'vertical'; /** Accessible name of the list. Default "Progress". */ label?: string; /** What screen readers hear for each status. */ statusLabels?: Partial>; className?: string; } const defaults: Record = { done: 'Done', current: 'Current step', upcoming: 'Not started', error: 'Failed' }; /** Where someone is in a fixed sequence. Each status has a shape and a spoken label, not only a colour. */ export function Steps({ steps, current = 0, orientation = 'horizontal', label = 'Progress', statusLabels, className }: StepsProps) { const names = { ...defaults, ...statusLabels }; return (

{step.title} , {names[status]} {step.description && {step.description}}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"steps/Steps.css","content":"$52","type":"registry:file","target":"@components/creance/steps/Steps.css"},{"path":"steps/Steps.tsx","content":"$53","type":"registry:ui","target":"@components/creance/steps/Steps.tsx"}],"className":"h-[70svh] min-h-80"}]]}]