const e = `
import {
  StepperLayout,
  StepperLayoutContent,
  StepperLayoutFooter,
  StepperLayoutNav,
  StepperLayoutPanel,
  StepperLayoutBack,
  StepperLayoutNext,
  useStepper,
  useStepperState,
  useStepperHandlers,
  useStepperBeforeNavigate,
} from '@jtl-software/platform-ui-react';
import { Button, Box } from '@jtl-software/platform-ui-react';
import { StepperStep } from '@jtl-software/platform-ui-react';
import { AppHeader } from '@jtl-software/platform-ui-react';

type StepperFormMap = {
  welcome:  { __stored?: { instanceType: string } };
  company:  { __stored?: { firstName: string; lastName: string; companyName: string } };
  shipping: { __stored?: { shippingProvider: string; acceptShippingTerms: boolean } };
  shop:     { __stored?: { salesChannel: string; shopName: string; acceptShopTerms: boolean } };
  setup:    Record<string, never>;
};

const stepperDefinition = [
  { id: 'welcome'  as const, title: 'Welcome',      description: 'How would you like to get started?',   schema: welcomeSchema,      defaultValues: { instanceType: '' } },
  { id: 'company'  as const, title: 'Company Data',  description: 'Please enter your company data.',       schema: companyDataSchema,   defaultValues: { firstName: '', lastName: '', companyName: '' } },
  { id: 'shipping' as const, title: 'Shipping',      description: 'Pick a shipping provider.',             schema: shippingSchema,      defaultValues: { shippingProvider: 'dhl', acceptShippingTerms: false } },
  { id: 'shop'     as const, title: 'Online Shop',   description: 'Choose a sales channel.',               schema: onlineShopSchema,    defaultValues: { salesChannel: 'jtl-shop', shopName: '', acceptShopTerms: false } },
  { id: 'setup'    as const, title: 'Setup',         description: 'Your instance is being prepared.' },
];

// ── Step component pattern ────────────────────────────────────────────────────
//
// Each step reads its own schema/defaultValues from the stepper context via
// useStepperState, saves data via useStepperHandlers, and intercepts navigation
// for async validation via useStepperBeforeNavigate.

interface IWelcomeStepProps {
  id: 'welcome';
}

const WelcomeStep = ({ id }: IWelcomeStepProps) => {
  void id;

  // useStepperState — read current step's initialData (schema + defaultValues)
  // and previously stored data (storedData) for restoring on back-navigation.
  const { currentStep } = useStepperState<StepperFormMap, 'welcome'>();
  const { schema, defaultValues } = currentStep.initialData;

  // useStepperHandlers — setStepData persists form values into the stepper store;
  // getStepData reads another step's saved values.
  const { setStepData } = useStepperHandlers<StepperFormMap>();

  const form = useZodForm({
    schema,
    defaultValues: currentStep.storedData ?? defaultValues,
  });

  // useStepperBeforeNavigate — one interceptor consulted before every move (next / back / goto).
  // Return false to block; anything else proceeds. Do NOT call goNext/goBack/goTo here —
  // the stepper performs the move for you.
  useStepperBeforeNavigate<StepperFormMap>(async action => {
    if (action.type === 'next' && !(await form.trigger())) return false; // block when invalid
    setStepData('welcome', form.getValues()); // persist a draft on every leave
  });

  return (
    <Form form={form} onSubmit={() => {}} noValidate>
      {/* step-specific fields */}
    </Form>
  );
};

// ── Root wizard component ─────────────────────────────────────────────────────

export const ERPOnboardingWizard = () => {
  const stepper = useStepper<StepperFormMap>(stepperDefinition);

  return (
    <StepperLayout stepper={stepper}>
      <StepperLayoutNav>
        {stepperDefinition.map(s => (
          <StepperStep key={s.id} title={s.title} />
        ))}
      </StepperLayoutNav>

      <StepperLayoutContent>
        <StepperLayoutPanel stepId="welcome">
          <AppHeader title="Welcome!" subtitle="How would you like to get started?" icon={{ icon: 'Plus', variant: 'info', size: 'lg' }} />
          <WelcomeStep id="welcome" />
        </StepperLayoutPanel>

        <StepperLayoutPanel stepId="company">
          <AppHeader title="Company Data" subtitle="Please enter your company data to get started." icon={{ icon: 'Building2', variant: 'info', size: 'lg' }} />
          <CompanyDataStep id="company" />
        </StepperLayoutPanel>

        <StepperLayoutPanel stepId="shipping">
          <AppHeader title="Shipping setup" subtitle="Pick a shipping provider and accept the terms." icon={{ icon: 'Truck', variant: 'info', size: 'lg' }} />
          <ShippingStep id="shipping" />
        </StepperLayoutPanel>

        <StepperLayoutPanel stepId="shop">
          <AppHeader title="Connect your online shop" subtitle="Choose a sales channel and accept the terms." icon={{ icon: 'Store', variant: 'info', size: 'lg' }} />
          <OnlineShopStep id="shop" />
        </StepperLayoutPanel>

        <StepperLayoutPanel stepId="setup">
          <AppHeader title="Finishing up" subtitle="Your instance is being prepared." icon={{ icon: 'Loader2', variant: 'info', size: 'lg' }} />
          <SetupStep id="setup" />
        </StepperLayoutPanel>

        <StepperLayoutFooter>
          {/* StepperLayoutBack renders invisible (keeps space) on the first step */}
          <StepperLayoutBack>
            <Button
              label="Back"
              variant="outline"
              icon="ChevronLeft"
              iconPosition="left"
              onClick={stepper.layoutProps.onBack}
            />
          </StepperLayoutBack>

          {/* Pass onNext — label and icon adapt to the current step */}
          <StepperLayoutNext>
          <Box className="flex gap-2">
            <Button label="Cancel" variant="ghost" onClick={stepper.reset} />

            <Button
              label={stepper.isLast ? 'Submit' : 'Next'}
              icon={!stepper.isLast ? 'ChevronRight' : undefined}
              iconPosition="right"
              onClick={stepper.layoutProps.onNext}
            />
          </Box>
          </StepperLayoutNext>
        </StepperLayoutFooter>
      </StepperLayoutContent>
    </StepperLayout>
  );
};
`;
export {
  e as default
};
//# sourceMappingURL=formExampleSource.js.map
