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:T20e8,.stepper { --stepper-pad: 0px; --stepper-inset: 0px; --stepper-bleed: 8px; --stepper-well-radius: max(6px, calc(var(--stepper-radius) - 8px)); --stepper-tile-radius: max(4px, calc(var(--stepper-well-radius) - 4px)); position: relative; display: flex; flex-direction: column; width: min(100%, var(--stepper-width)); min-width: 0; max-width: 100%; box-sizing: border-box; border-radius: var(--stepper-radius); color: var(--stepper-ink); -webkit-tap-highlight-color: transparent; } .stepper--framed { --stepper-pad: 8px; --stepper-inset: 12px; --stepper-bleed: 20px; padding: var(--stepper-pad); background: var(--stepper-frame); box-shadow: var(--stepper-frame-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .stepper__rim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--stepper-frame-edge), inset 0 1px 0 var(--stepper-frame-highlight); pointer-events: none; } .stepper__header--dots, .stepper__header--bars { padding: var(--stepper-inset) var(--stepper-inset) 0; } .stepper__track { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: var(--stepper-well-radius); background: var(--stepper-well); } .stepper__glider { position: absolute; top: 0; left: 0; border-radius: var(--stepper-tile-radius); background: var(--stepper-tile); box-shadow: inset 0 0 0 1px var(--stepper-tile-edge), inset 0 1px 0 var(--stepper-tile-highlight), var(--stepper-tile-shadow); opacity: 0; pointer-events: none; } .stepper__segment { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 10px; box-sizing: border-box; border: none; border-radius: var(--stepper-tile-radius); background: none; color: var(--stepper-muted); font-family: inherit; cursor: pointer; transition: background-color 0.2s ease; } .stepper__segment:disabled { cursor: default; } .stepper__badge { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--stepper-faint); color: var(--stepper-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .stepper__badge[data-status='active'] { box-shadow: inset 0 0 0 1.5px var(--stepper-ink); color: var(--stepper-ink); } .stepper__badge[data-status='complete'] { background: var(--stepper-solid); box-shadow: none; color: var(--stepper-solid-ink); } .stepper__glyph, .stepper__check { display: grid; place-items: center; } .stepper__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .stepper__title { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--stepper-muted); text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; } .stepper__title:not([data-status='upcoming']) { color: var(--stepper-ink); } .stepper__description { overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--stepper-muted); text-overflow: ellipsis; white-space: nowrap; } .stepper__track[data-layout='rail'] { flex: 1; flex-direction: column; } .stepper__track[data-layout='rail'] .stepper__segment { flex: none; align-items: flex-start; justify-content: flex-start; gap: 10px; height: auto; padding: 10px; } .stepper__track[data-layout='rail'] .stepper__text { padding-top: 3px; } .stepper__dots { display: flex; justify-content: center; gap: 2px; } .stepper__dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; } .stepper__dot-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--stepper-faint); transition: background-color 0.25s ease, transform 0.45s var(--stepper-spring); } .stepper__dot-mark[data-status='complete'] { background: var(--stepper-muted); } .stepper__dot-mark[data-status='active'] { background: var(--stepper-solid); transform: scale(1.3); } .stepper__bars { display: flex; gap: 6px; } .stepper__bar { display: flex; flex: 1; align-items: center; height: 18px; padding: 0; border: none; background: none; cursor: pointer; } .stepper__bar-track { position: relative; width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: var(--stepper-track); } .stepper__bar-fill { position: absolute; inset: 0; background: var(--stepper-solid); transform: scaleX(0); transform-origin: left center; transition: transform 560ms var(--stepper-spring); } .stepper__bar-fill[data-filled] { transform: none; } .stepper__dot:disabled, .stepper__bar:disabled { cursor: default; } .stepper__body { display: flex; flex-direction: column; min-width: 0; padding: 20px var(--stepper-inset) var(--stepper-inset); } .stepper__viewport { position: relative; margin: -6px calc(var(--stepper-bleed) * -1); overflow: hidden; } .stepper__pane { box-sizing: border-box; padding: 6px var(--stepper-bleed); outline: none; } .stepper__pane--leaving { position: absolute; top: 0; right: 0; left: 0; pointer-events: none; } .stepper__step { min-width: 0; } .stepper__footer-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 480ms var(--stepper-spring), opacity 0.2s ease; } .stepper__footer-wrap[data-hidden] { grid-template-rows: 0fr; opacity: 0; pointer-events: none; } .stepper__footer-clip { min-height: 0; } .stepper__footer-wrap[data-hidden] .stepper__footer-clip { overflow: hidden; } .stepper__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; } .stepper__button { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: none; border-radius: max(8px, calc(var(--stepper-radius) * 0.5)); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .stepper__button--back { padding-left: 10px; background: var(--stepper-tile); box-shadow: inset 0 0 0 1px var(--stepper-tile-edge), inset 0 1px 0 var(--stepper-tile-highlight), var(--stepper-tile-shadow); color: var(--stepper-ink); } .stepper__button--back[data-hidden] { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0s 0.2s; } .stepper__button--next { margin-left: auto; padding-right: 11px; background: var(--stepper-solid); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.5); color: var(--stepper-solid-ink); } .stepper__button:disabled { opacity: 0.4; cursor: not-allowed; } .stepper__button:focus-visible, .stepper__segment:focus-visible, .stepper__dot:focus-visible, .stepper__bar:focus-visible { outline: 2px solid var(--stepper-ink); outline-offset: 2px; } .stepper--vertical { flex-direction: row; align-items: stretch; } .stepper--vertical .stepper__header { display: flex; flex: none; width: 212px; max-width: 42%; } .stepper--vertical .stepper__body { flex: 1; padding: var(--stepper-inset) var(--stepper-inset) var(--stepper-inset) 20px; } @media (hover: hover) { .stepper__segment:not(:disabled):hover { background: var(--stepper-hover-fill); } .stepper__button--back:not(:disabled):hover { filter: var(--stepper-hover); } .stepper__button--next:not(:disabled):hover { filter: var(--stepper-solid-hover); } .stepper__dot:not(:disabled):hover .stepper__dot-mark { transform: scale(1.3); } .stepper__bar:not(:disabled):hover .stepper__bar-track { background: var(--stepper-faint); } } .stepper__button:not(:disabled):active { filter: var(--stepper-press); transform: scale(0.96); transition-duration: 0s; } @media (prefers-reduced-motion: reduce) { .stepper__bar-fill, .stepper__dot-mark, .stepper__footer-wrap { transition-duration: 0.01ms; } } 53:T533a,'use client'; import { Children, isValidElement, useEffect, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode } from 'react'; import { HugeiconsIcon } from '@hugeicons/react'; import { ArrowLeft01Icon, ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons'; import './Stepper.css'; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; export interface StepProps { children?: ReactNode; title?: ReactNode; description?: ReactNode; icon?: ReactNode; } interface StepIndicatorProps { step: number; currentStep: number; onStepClick: (step: number) => void; } interface StepperProps extends Omit, 'children' | 'className' | 'style'> { children?: ReactNode; step?: number; initialStep?: number; onStepChange?: (step: number) => void; onFinalStepCompleted?: () => void; indicator?: 'numbers' | 'dots' | 'bars'; orientation?: 'horizontal' | 'vertical'; transition?: 'slide' | 'fade' | 'none'; linear?: boolean; disableStepIndicators?: boolean; renderStepIndicator?: (props: StepIndicatorProps) => ReactNode; showFooter?: boolean; backButtonText?: string; nextButtonText?: string; completeButtonText?: string; backButtonProps?: ButtonHTMLAttributes; nextButtonProps?: ButtonHTMLAttributes; completedContent?: ReactNode; theme?: 'dark' | 'light'; accentColor?: string; frame?: boolean; radius?: number; width?: number | string; className?: string; stepCircleContainerClassName?: string; stepContainerClassName?: string; contentClassName?: string; footerClassName?: string; style?: CSSProperties; } interface View { step: number; previous: number | null; direction: number; id: number; } const THEMES: Record> = { dark: { '--stepper-frame': 'rgba(38, 35, 46, 0.66)', '--stepper-frame-edge': 'rgba(255, 255, 255, 0.08)', '--stepper-frame-highlight': 'rgba(255, 255, 255, 0.07)', '--stepper-frame-shadow': '0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5)', '--stepper-tile': 'linear-gradient(180deg, #3a3644 0%, #27242f 100%)', '--stepper-tile-edge': 'rgba(255, 255, 255, 0.07)', '--stepper-tile-highlight': 'rgba(255, 255, 255, 0.12)', '--stepper-tile-shadow': '0 4px 10px -4px rgba(0, 0, 0, 0.7)', '--stepper-well': 'rgba(255, 255, 255, 0.07)', '--stepper-track': 'rgba(255, 255, 255, 0.1)', '--stepper-ink': '#f4f4f5', '--stepper-muted': 'rgba(244, 244, 245, 0.55)', '--stepper-faint': 'rgba(255, 255, 255, 0.22)', '--stepper-ring': 'rgba(244, 244, 245, 0.3)', '--stepper-solid': '#f4f4f5', '--stepper-solid-ink': '#18181b', '--stepper-hover': 'brightness(1.12)', '--stepper-hover-fill': 'rgba(255, 255, 255, 0.04)', '--stepper-solid-hover': 'brightness(0.9)', '--stepper-press': 'brightness(0.85)' }, light: { '--stepper-frame': 'rgba(240, 240, 243, 0.8)', '--stepper-frame-edge': 'rgba(24, 24, 27, 0.07)', '--stepper-frame-highlight': 'rgba(255, 255, 255, 0.95)', '--stepper-frame-shadow': '0 22px 44px -22px rgba(24, 24, 27, 0.3), 0 6px 16px -10px rgba(24, 24, 27, 0.16)', '--stepper-tile': 'linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%)', '--stepper-tile-edge': 'rgba(24, 24, 27, 0.08)', '--stepper-tile-highlight': 'rgba(255, 255, 255, 1)', '--stepper-tile-shadow': '0 4px 10px -5px rgba(24, 24, 27, 0.25)', '--stepper-well': 'rgba(24, 24, 27, 0.05)', '--stepper-track': 'rgba(24, 24, 27, 0.08)', '--stepper-ink': '#27272a', '--stepper-muted': 'rgba(39, 39, 42, 0.55)', '--stepper-faint': 'rgba(24, 24, 27, 0.16)', '--stepper-ring': 'rgba(24, 24, 27, 0.28)', '--stepper-solid': '#27272a', '--stepper-solid-ink': '#ffffff', '--stepper-hover': 'brightness(0.97)', '--stepper-hover-fill': 'rgba(24, 24, 27, 0.035)', '--stepper-solid-hover': 'brightness(1.3)', '--stepper-press': 'brightness(0.92)' } }; const SPRING = 'linear(0, 0.0603, 0.2033, 0.3821, 0.5633, 0.7258, 0.8584, 0.9574, 1.0242, 1.0634, 1.0809, 1.0828, 1.0747, 1.0613, 1.046, 1.0313, 1.0186, 1.0085, 1.0012, 0.9965, 0.994, 0.9931, 0.9933, 0.9941, 0.9953, 0.9966, 0.9978, 0.9988, 1)'; const SETTLE = 'cubic-bezier(0.22, 1, 0.36, 1)'; const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const size = (value: number | string) => (typeof value === 'number' ? `${value}px` : value); const readableOn = (color: string) => { let hex = String(color || '') .trim() .replace('#', ''); if (hex.length === 3) hex = hex.replace(/./g, c => c + c); if (!/^[0-9a-f]{6}$/i.test(hex)) return '#ffffff'; const [r, g, b] = [0, 2, 4].map(index => { const c = parseInt(hex.slice(index, index + 2), 16) / 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); }); return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4 ? '#18181b' : '#ffffff'; }; const ease = () => typeof CSS !== 'undefined' && CSS.supports?.('transition-timing-function', 'linear(0, 1)') ? SPRING : 'cubic-bezier(0.34, 1.4, 0.64, 1)'; function Check() { const ref = useRef(null); useIsomorphicLayoutEffect(() => { const path = ref.current?.querySelector('path'); if (!path || typeof path.animate !== 'function') return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; path.style.strokeDasharray = '24'; path.animate([{ strokeDashoffset: 24 }, { strokeDashoffset: 0 }], { duration: 360, easing: SETTLE }); }, []); return ( ); } export function Step({ children }: StepProps) { return

{children}

; } export default function Stepper({ children, step, initialStep = 1, onStepChange = () => {}, onFinalStepCompleted = () => {}, indicator = 'numbers', orientation = 'horizontal', transition = 'slide', linear = false, disableStepIndicators = false, renderStepIndicator, showFooter = true, backButtonText = 'Back', nextButtonText = 'Continue', completeButtonText = 'Complete', backButtonProps = {}, nextButtonProps = {}, completedContent, theme = 'dark', accentColor, frame = true, radius = 24, width = 440, className = '', stepCircleContainerClassName = '', stepContainerClassName = '', contentClassName = '', footerClassName = '', style, ...rest }: StepperProps) { const steps = Children.toArray(children).filter(isValidElement) as ReactElement[]; const total = steps.length; const controlled = typeof step === 'number'; const [internal, setInternal] = useState(initialStep); const current = clamp(Math.round(controlled ? step : internal), 1, total + 1); const completed = current > total; const vertical = orientation === 'vertical'; const kind = vertical ? 'numbers' : indicator; const labelled = steps.some(entry => entry.props.title); const [compact, setCompact] = useState(false); const [tight, setTight] = useState(false); const rail = vertical && !compact; const [reached, setReached] = useState(current); if (current > reached) setReached(current); const [view, setView] = useState({ step: current, previous: null, direction: 1, id: 0 }); if (view.step !== current) { setView({ step: current, previous: view.step, direction: current > view.step ? 1 : -1, id: view.id + 1 }); } const rootRef = useRef(null); const trackRef = useRef(null); const gliderRef = useRef(null); const markerRefs = useRef<(HTMLElement | null)[]>([]); const titleRefs = useRef<(HTMLSpanElement | null)[]>([]); const viewportRef = useRef(null); const paneRef = useRef(null); const leavingRef = useRef(null); const heightRef = useRef(0); const labelWidths = useRef([]); const tightRef = useRef(false); tightRef.current = tight; const placedRef = useRef(false); const go = (target: number) => { const next = clamp(target, 1, total + 1); if (next === current) return; if (!controlled) setInternal(next); if (next > total) onFinalStepCompleted(); else onStepChange(next); }; const reachable = (number: number) => !disableStepIndicators && number !== current && (!linear || number <= Math.min(reached, total)); useIsomorphicLayoutEffect(() => { const root = rootRef.current; if (!root) return; const measure = () => { const folded = vertical && root.clientWidth < 520; setCompact(folded); const track = trackRef.current; if (!track || !labelled || (vertical && !folded)) { setTight(false); return; } const segments = markerRefs.current.slice(0, total); if (!tightRef.current) { segments.forEach((segment, index) => { const title = titleRefs.current[index]; labelWidths.current[index] = title && segment?.contains(title) ? title.scrollWidth + 8 : 0; }); } const badges = segments.reduce( (sum, segment) => sum + (segment?.firstElementChild?.getBoundingClientRect().width ?? 22) + 20, 0 ); const labels = labelWidths.current.slice(0, total).reduce((sum, value) => sum + (value || 0), 0); const room = track.clientWidth - 8 - 4 * Math.max(0, total - 1); setTight(badges + labels > room + 0.5); }; measure(); const observer = new ResizeObserver(measure); observer.observe(root); return () => observer.disconnect(); }, [vertical, labelled, frame, total, kind]); useIsomorphicLayoutEffect(() => { const viewport = viewportRef.current; if (!viewport) return; heightRef.current = viewport.offsetHeight; const observer = new ResizeObserver(() => { heightRef.current = viewport.offsetHeight; }); observer.observe(viewport); return () => observer.disconnect(); }, []); useIsomorphicLayoutEffect(() => { if (view.id === 0) return; const viewport = viewportRef.current; const pane = paneRef.current; const leaving = leavingRef.current; const id = view.id; const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const mode = transition === 'none' ? 'none' : reduced ? 'fade' : transition; const finish = () => setView(state => (state.id === id ? { ...state, previous: null } : state)); if (leaving && pane && leaving.contains(document.activeElement)) pane.focus({ preventScroll: true }); if (!viewport || typeof viewport.animate !== 'function' || mode === 'none') { finish(); return; } for (const element of [viewport, pane, leaving]) element?.getAnimations().forEach(animation => animation.cancel()); const from = heightRef.current; const to = viewport.offsetHeight; const spring = ease(); if (Math.abs(from - to) > 0.5) { viewport.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration: reduced ? 200 : 560, easing: reduced ? SETTLE : spring }); } const axis = vertical ? 'Y' : 'X'; const shift = mode === 'slide' ? 36 : 0; if (pane) { if (shift) { pane.animate([{ transform: `translate${axis}(${view.direction * shift}px)` }, { transform: 'none' }], { duration: 560, easing: spring }); } pane.animate([{ opacity: 0 }, { opacity: 0, offset: 0.25 }, { opacity: 1 }], { duration: 420, easing: 'ease-out' }); } if (leaving) { leaving.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 140, easing: 'cubic-bezier(0.2, 0, 0.4, 1)', fill: 'forwards' }); const exit = leaving.animate( [{ transform: 'none' }, { transform: `translate${axis}(${-view.direction * shift}px)` }], { duration: 200, easing: 'cubic-bezier(0.4, 0, 1, 1)', fill: 'forwards' } ); exit.onfinish = finish; } else finish(); }, [view.id]); useIsomorphicLayoutEffect(() => { const track = trackRef.current; const glider = gliderRef.current; if (!track || !glider) return; const place = (animate: boolean) => { const segment = markerRefs.current[Math.min(current, total) - 1]; if (!segment) return; const spring = ease(); glider.style.transition = animate ? `transform 560ms ${spring}, width 560ms ${spring}, height 560ms ${spring}, opacity 200ms ease` : 'opacity 200ms ease'; glider.style.transform = `translate3d(${segment.offsetLeft}px, ${segment.offsetTop}px, 0)`; glider.style.width = `${segment.offsetWidth}px`; glider.style.height = `${segment.offsetHeight}px`; glider.style.opacity = completed ? '0' : '1'; }; place(placedRef.current && !window.matchMedia('(prefers-reduced-motion: reduce)').matches); placedRef.current = true; const observer = new ResizeObserver(() => place(false)); observer.observe(track); return () => observer.disconnect(); }, [current, total, completed, kind, labelled, vertical, compact, tight]); const paneContent = (number: number) => (number > total ? (completedContent ?? null) : steps[number - 1]); const accentVars: Record = accentColor ? { '--stepper-solid': accentColor, '--stepper-solid-ink': readableOn(accentColor) } : {}; const badge = (entry: ReactElement, number: number, status: 'complete' | 'active' | 'upcoming') => ( {status === 'complete' ? ( ) : entry.props.icon ? ( {entry.props.icon} ) : ( number )} ); const header = () => { if (kind === 'dots') { return (

{steps.map((entry, index) => { const number = index + 1; const status = completed || number < current ? 'complete' : number === current ? 'active' : 'upcoming'; return ( ); })}

); } if (kind === 'bars') { return (

{steps.map((entry, index) => { const number = index + 1; const filled = completed || number <= current; return ( ); })}

); } return (

{steps.map((entry, index) => { const number = index + 1; const status = completed || number < current ? 'complete' : number === current ? 'active' : 'upcoming'; const title = entry.props.title; const text = title && !(tight && !rail) && ( { titleRefs.current[index] = element; }} className="stepper__title" data-status={status} > {title} {rail && entry.props.description && ( {entry.props.description} )} ); const ref = (element: HTMLElement | null) => { markerRefs.current[index] = element; }; if (renderStepIndicator) { return (

{renderStepIndicator({ step: number, currentStep: current, onStepClick: clicked => go(clicked) })} {text}

); } return ( ); })}

); }; const isLast = current === total; const nextLabel = isLast ? completeButtonText : nextButtonText; const { className: backClass = '', onClick: onBackClick, ...backRest } = backButtonProps; const { className: nextClass = '', onClick: onNextClick, ...nextRest } = nextButtonProps; return (

{header()}

{view.previous !== null && ( )}

{paneContent(view.step)}

{showFooter && (

)}

{frame &&

); } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react@^1.1.10",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react@^1.1.10"}]]}]}],["$","li","@hugeicons/core-free-icons@^4.3.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons@^4.3.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"Stepper.css","content":"$52","type":"registry:file","target":"@components/Stepper.css"},{"path":"Stepper.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]