declare const _default: "\nimport { useCallback, useState } from 'react';\nimport { Box, Text, StepperLayout } from '@jtl-software/platform-ui-react';\nimport type { StepConfig } from '@jtl-software/platform-ui-react';\n\nconst StepContent = ({ step }: { step: number }) => (\n  <Box className=\"flex flex-col gap-[var(--spacing-4)]\">\n    <Text>Step {step + 1}</Text>\n    <Text>Replace this placeholder with your form or view for step {step + 1}.</Text>\n  </Box>\n);\n\n// Consumer owns all step statuses.\n// Update status in state after validation — StepperLayout never infers error/warning.\nconst initialSteps: StepConfig[] = [\n  { title: 'Grundlagen', description: 'Very Basic information', status: 'completed' },\n  { title: 'Grundlagen', description: 'Basic information' },\n  { title: 'Validation', description: 'Validate your data', status: 'error' },\n  { title: 'Review', description: 'Review your settings', status: 'warning' },\n  { title: 'Zusammenfassung', description: 'Review and submit' },\n];\n\nconst StepStatuses = () => {\n  const [activeStep, setActiveStep] = useState(1);\n  const [steps, setSteps] = useState<StepConfig[]>(initialSteps);\n\n  // Clear explicit status when user navigates away from a step\n  const clearStepStatus = useCallback((index: number) => {\n    setSteps(prev => prev.map((s, i) => (i === index ? { ...s, status: undefined } : s)));\n  }, []);\n\n  return (\n    <StepperLayout\n      steps={steps}\n      activeStep={activeStep}\n      onNext={current => {\n        clearStepStatus(current);\n        setActiveStep(current + 1);\n      }}\n      onBack={current => {\n        clearStepStatus(current);\n        setActiveStep(current - 1);\n      }}\n    >\n      <StepContent step={activeStep} />\n    </StepperLayout>\n  );\n};\n\nexport default StepStatuses;\n";
export default _default;
