const e = `
import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@jtl-software/platform-ui-react';
import { AppHeader } from '@jtl-software/platform-ui-react';
import {
  StepperLayout,
  StepperLayoutBack,
  StepperLayoutContent,
  StepperLayoutFooter,
  StepperLayoutHeader,
  StepperLayoutNav,
  StepperLayoutNext,
  StepperLayoutPanel,
  useStepper,
} from '@jtl-software/platform-ui-react';
import { StepperStep } from '@jtl-software/platform-ui-react';
import { Button } from '@jtl-software/platform-ui-react';

type WizardDataMap = {
  company: { __stored?: { name: string; taxId: string } };
  contact: { __stored?: { email: string; phone: string } };
  review:  { __stored?: Record<string, never> };
};

const steps = [
  { id: 'company', title: 'Company', description: 'Enter company details' },
  { id: 'contact', title: 'Contact', description: 'Enter contact person'  },
  { id: 'review',  title: 'Review',  description: 'Confirm and submit'    },
];

export function CreateAppWizardDialog() {
  const stepper = useStepper<WizardDataMap>(steps);

  return (
    // 1. Dialog shell — wraps everything
    <Dialog onOpenChange={(open) => !open && stepper.reset()}>

      {/* 2. Trigger — anything that opens the dialog */}
      <DialogTrigger asChild>
        <Button label="Open Wizard" />
      </DialogTrigger>

      {/* 3. Content — hasCloseButton=false; StepperLayoutHeader owns the X */}
      <DialogContent hasCloseButton={false}>

        {/* 4. variant="dialog" — single contained card, no extra wrappers */}
        <StepperLayout stepper={stepper} variant="dialog">

          {/* 5. Header: AppHeader with DialogClose in the actions slot */}
          <StepperLayoutHeader>
            <AppHeader
              title="Create Application"
              subtitle="Fill in all steps to continue."
              actions={
                <DialogClose asChild>
                  <button type="button"><XIcon /></button>
                </DialogClose>
              }
            />
          </StepperLayoutHeader>

          {/* 6. Step indicator bar */}
          <StepperLayoutNav>
            {steps.map(s => <StepperStep key={s.id} title={s.title} />)}
          </StepperLayoutNav>

          {/* 7. Step panels + navigation footer */}
          <StepperLayoutContent>
            <StepperLayoutPanel stepId="company">
              <CompanyStep stepper={stepper} />
            </StepperLayoutPanel>
            <StepperLayoutPanel stepId="contact">
              <ContactStep stepper={stepper} />
            </StepperLayoutPanel>
            <StepperLayoutPanel stepId="review">
              <ReviewStep stepper={stepper} />
            </StepperLayoutPanel>

            <StepperLayoutFooter>
              <StepperLayoutBack>
                <Button label="Back" variant="outline" onClick={stepper.layoutProps.onBack} />
              </StepperLayoutBack>
              <StepperLayoutNext>
                <Button
                  label={stepper.isLast ? 'Submit' : 'Next'}
                  onClick={stepper.layoutProps.onNext}
                />
              </StepperLayoutNext>
            </StepperLayoutFooter>
          </StepperLayoutContent>
        </StepperLayout>
      </DialogContent>
    </Dialog>
  );
}
`.trim();
export {
  e as dialogExampleSource
};
//# sourceMappingURL=dialogExampleSource.js.map
