@dsn-starter-kit/components-react 1.0.2 → 3.0.0

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["PREFERRED_ICONS","VARIANT_LABELS","toggleEvent"],"sources":["../src/ActionGroup/ActionGroup.tsx","../src/Body/Body.tsx","../src/BreakoutSection/BreakoutSection.tsx","../src/Container/Container.tsx","../src/Hero/Hero.tsx","../src/Grid/Grid.tsx","../src/Grid/GridItem.tsx","../src/Stack/Stack.tsx","../src/Heading/Heading.tsx","../src/HeadingGroup/HeadingGroup.tsx","../src/PreHeading/PreHeading.tsx","../src/Paragraph/Paragraph.tsx","../src/Link/Link.tsx","../src/UnorderedList/UnorderedList.tsx","../src/OrderedList/OrderedList.tsx","../src/Icon/icon-registry.generated.ts","../src/Icon/Icon.tsx","../src/IconList/IconList.tsx","../src/Button/Button.tsx","../src/ButtonLink/ButtonLink.tsx","../src/LinkButton/LinkButton.tsx","../src/TextInput/TextInput.tsx","../src/FileInput/FileInput.tsx","../src/EmailInput/EmailInput.tsx","../src/PasswordInput/PasswordInput.tsx","../src/NumberInput/NumberInput.tsx","../src/TelephoneInput/TelephoneInput.tsx","../src/SearchInput/SearchInput.tsx","../src/TimeInput/TimeInput.tsx","../src/DateInput/DateInput.tsx","../src/DateInputGroup/DateInputGroup.tsx","../src/Select/Select.tsx","../src/TextArea/TextArea.tsx","../src/Checkbox/Checkbox.tsx","../src/CheckboxGroup/CheckboxGroup.tsx","../src/OptionLabel/OptionLabel.tsx","../src/CheckboxOption/CheckboxOption.tsx","../src/Radio/Radio.tsx","../src/RadioGroup/RadioGroup.tsx","../src/RadioOption/RadioOption.tsx","../src/Backdrop/Backdrop.tsx","../src/DotBadge/DotBadge.tsx","../src/Spinner/Spinner.tsx","../src/ProgressBar/ProgressBar.tsx","../src/NumberBadge/NumberBadge.tsx","../src/StatusBadge/StatusBadge.tsx","../src/Alert/Alert.tsx","../src/Note/Note.tsx","../src/Table/Table.tsx","../src/Details/Details.tsx","../src/SummaryList/SummaryList.tsx","../src/Logo/Logo.tsx","../src/SkipLink/SkipLink.tsx","../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx","../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx","../src/Menu/Menu.tsx","../src/MenuButton/MenuButton.tsx","../src/MenuLink/MenuLink.tsx","../src/PageBody/PageBody.tsx","../src/PageFooter/PageFooter.tsx","../src/Drawer/Drawer.tsx","../src/PageHeader/PageHeader.tsx","../src/PageLayout/PageLayout.tsx","../src/TableOfContents/TableOfContents.tsx","../src/FormFieldLabel/FormFieldLabel.tsx","../src/FormFieldDescription/FormFieldDescription.tsx","../src/FormFieldErrorMessage/FormFieldErrorMessage.tsx","../src/FormFieldStatus/FormFieldStatus.tsx","../src/utils/describeControl.tsx","../src/FormField/FormField.tsx","../src/FormFieldLegend/FormFieldLegend.tsx","../src/FormFieldset/FormFieldset.tsx","../src/Image/Image.tsx","../src/Card/Card.tsx","../src/ModalDialog/ModalDialog.tsx","../src/Popover/Popover.tsx","../src/File/File.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ActionGroup.css';\n\nexport interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {\n  /**\n   * Richting van de groep — horizontale rij met wrapping of verticale kolom\n   * @default 'horizontal'\n   */\n  direction?: 'horizontal' | 'vertical';\n\n  /**\n   * `Button`- en/of `Link`-componenten\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Flattens top-level React.Fragment children (e.g. `<>...</>`) so each\n * action ends up as its own `<li>`, regardless of whether the caller wraps\n * multiple children in a Fragment or passes them as direct JSX children.\n */\nfunction flattenActions(children: React.ReactNode): React.ReactNode[] {\n  return React.Children.toArray(children).flatMap((child) =>\n    React.isValidElement(child) && child.type === React.Fragment\n      ? flattenActions((child.props as { children?: React.ReactNode }).children)\n      : [child]\n  );\n}\n\n/**\n * ActionGroup component\n * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.\n * Horizontale richting (default) wraps automatisch bij te weinig ruimte.\n * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het\n * aantal acties en de groepsnaam aankondigen (zie issue #295).\n *\n * @example\n * ```tsx\n * // Horizontaal (default)\n * <ActionGroup>\n *   <Button variant=\"strong\">Opslaan</Button>\n *   <Button variant=\"subtle\">Annuleren</Button>\n * </ActionGroup>\n *\n * // Horizontaal met Link\n * <ActionGroup>\n *   <Button variant=\"strong\">Volgende stap</Button>\n *   <Link href=\"/\">Terug naar overzicht</Link>\n * </ActionGroup>\n *\n * // Verticaal\n * <ActionGroup direction=\"vertical\">\n *   <Button variant=\"strong\">Primaire actie</Button>\n *   <Button variant=\"subtle\">Secundaire actie</Button>\n * </ActionGroup>\n *\n * // Aangepast aria-label\n * <ActionGroup aria-label=\"Formulierknoppen\">\n *   <Button variant=\"strong\" type=\"submit\">Verstuur</Button>\n *   <Button variant=\"subtle\">Annuleren</Button>\n * </ActionGroup>\n * ```\n */\nexport const ActionGroup = React.forwardRef<HTMLUListElement, ActionGroupProps>(\n  (\n    {\n      className,\n      direction = 'horizontal',\n      'aria-label': ariaLabel = 'Acties',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-action-group',\n      direction === 'vertical' && 'dsn-action-group--vertical',\n      className\n    );\n\n    return (\n      <ul ref={ref} className={classes} aria-label={ariaLabel} {...props}>\n        {flattenActions(children).map((child, index) => (\n          <li className=\"dsn-action-group__item\" key={index}>\n            {child}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n);\n\nActionGroup.displayName = 'ActionGroup';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Body.css';\n\nexport interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Child-elementen die de document-level stijlen erven\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Body component\n * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen\n * automatisch de juiste typografie, kleur en achtergrond erven.\n *\n * @example\n * ```tsx\n * // In een applicatie: wrap de root-content\n * <Body>\n *   <h1>Mijn pagina</h1>\n *   <p>Inhoud met geërfde stijlen</p>\n * </Body>\n *\n * // Of pas de CSS class direct toe op het <body> element\n * // <body class=\"dsn-body\">\n * ```\n */\nexport const Body = React.forwardRef<HTMLDivElement, BodyProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-body', className);\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nBody.displayName = 'Body';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './BreakoutSection.css';\n\nexport type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';\n\nexport interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'section'\n   */\n  as?: BreakoutSectionAs;\n\n  children?: React.ReactNode;\n}\n\n/**\n * BreakoutSection layout component\n * Laat een sectie \"uitslaan\" buiten een beperkte paginabreedte om de volledige\n * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.\n *\n * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen\n * horizontale scrolbalk verschijnt.\n *\n * @example\n * ```tsx\n * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>\n *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>\n *     <Heading level={2}>Uitgeslagen sectie</Heading>\n *   </div>\n * </BreakoutSection>\n * ```\n */\nexport const BreakoutSection = React.forwardRef<\n  HTMLElement,\n  BreakoutSectionProps\n>(({ as: As = 'section', className, children, ...props }, ref) => {\n  const classes = classNames('dsn-breakout-section', className);\n\n  return (\n    <As ref={ref as React.Ref<HTMLDivElement>} className={classes} {...props}>\n      {children}\n    </As>\n  );\n});\n\nBreakoutSection.displayName = 'BreakoutSection';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Container.css';\n\nexport type ContainerAs = 'div' | 'section' | 'article' | 'aside';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'div'\n   */\n  as?: ContainerAs;\n\n  /**\n   * Voegt een lichte schaduw toe voor een zwevend, kaart-achtig effect\n   * @default false\n   */\n  elevated?: boolean;\n\n  children?: React.ReactNode;\n}\n\n/**\n * Container component\n * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.\n *\n * @example\n * ```tsx\n * // Standaard\n * <Container>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n *\n * // Elevated (kaart-achtig)\n * <Container elevated>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n *\n * // Semantisch element\n * <Container as=\"section\">\n *   <Heading level={2}>Sectietitel</Heading>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLElement, ContainerProps>(\n  (\n    { as: As = 'div', className, elevated = false, children, ...props },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-container',\n      elevated && 'dsn-container--elevated',\n      className\n    );\n\n    return (\n      <As ref={ref as React.Ref<HTMLDivElement>} className={classes} {...props}>\n        {children}\n      </As>\n    );\n  }\n);\n\nContainer.displayName = 'Container';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Hero.css';\n\nexport type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';\nexport type HeroAlign = 'start' | 'center';\n\nexport interface HeroProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Achtergrondstijl van de Hero.\n   * @default 'default'\n   */\n  variant?: HeroVariant;\n\n  /**\n   * URL van de achtergrondafbeelding — vereist bij `variant=\"image\"` of `\"image-blend\"`.\n   * Wordt toegepast als CSS custom property `--dsn-hero-bg-image`.\n   */\n  backgroundImage?: string;\n\n  /**\n   * Horizontale uitlijning van de inhoud en tekst.\n   * @default 'start'\n   */\n  align?: HeroAlign;\n\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Hero component\n * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige\n * paginabreedte via het BreakoutSection-patroon.\n *\n * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).\n *\n * @example\n * ```tsx\n * <Hero>\n *   <Stack space=\"lg\">\n *     <Heading level={1}>Paginatitel</Heading>\n *     <Paragraph variant=\"lead\">Introductietekst.</Paragraph>\n *     <ActionGroup>\n *       <ButtonLink href=\"/start\" variant=\"strong\" size=\"large\">Aan de slag</ButtonLink>\n *     </ActionGroup>\n *   </Stack>\n * </Hero>\n * ```\n */\nexport const Hero = React.forwardRef<HTMLElement, HeroProps>(\n  (\n    {\n      variant = 'default',\n      backgroundImage,\n      align = 'start',\n      className,\n      children,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-hero',\n      variant === 'inverse' && 'dsn-hero--inverse',\n      (variant === 'image' || variant === 'image-blend') && 'dsn-hero--image',\n      variant === 'image-blend' && 'dsn-hero--image-blend',\n      align === 'center' && 'dsn-hero--align-center',\n      className\n    );\n\n    const inlineStyle: React.CSSProperties & {\n      '--dsn-hero-bg-image'?: string;\n    } = backgroundImage\n      ? { '--dsn-hero-bg-image': `url('${backgroundImage}')`, ...style }\n      : { ...style };\n\n    return (\n      <section ref={ref} className={classes} style={inlineStyle} {...props}>\n        <div className=\"dsn-hero__inner\">\n          <div className=\"dsn-hero__content\">{children}</div>\n        </div>\n      </section>\n    );\n  }\n);\n\nHero.displayName = 'Hero';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Grid.css';\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Voegt een maximale breedte toe (--dsn-grid-max-width) en centreert de grid horizontaal.\n   * Gebruik dit voor pagina-brede layouts met een vaste breedte.\n   * @default false\n   */\n  contained?: boolean;\n\n  /**\n   * Child-elementen van de grid.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Grid layout component\n * 12-koloms CSS Grid container met gutter en optionele max-width.\n * Gebruik GridItem voor kolomspanning van directe children.\n *\n * @example\n * ```tsx\n * // Standaard grid (volledige breedte)\n * <Grid>\n *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>\n *   <GridItem colSpan={4}>Sidebar</GridItem>\n * </Grid>\n *\n * // Contained grid met max-width\n * <Grid contained>\n *   <GridItem colSpan={12}>Full-width sectie</GridItem>\n * </Grid>\n * ```\n */\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ className, contained, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-grid',\n      contained && 'dsn-grid--contained',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nGrid.displayName = 'Grid';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\n\nexport type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\nexport type GridColPosition =\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13;\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Aantal kolommen dat dit item beslaat (1–12).\n   * Zonder colSpan beslaat het item de volledige breedte (12 kolommen).\n   */\n  colSpan?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf sm-breakpoint (36em ~576px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanSm?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf md-breakpoint (44em ~704px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanMd?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf lg-breakpoint (64em ~1024px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanLg?: GridColSpan;\n\n  /** Startkolom (grid-column-start, 1–13). */\n  colStart?: GridColPosition;\n  /** Startkolom vanaf sm-breakpoint. */\n  colStartSm?: GridColPosition;\n  /** Startkolom vanaf md-breakpoint. */\n  colStartMd?: GridColPosition;\n  /** Startkolom vanaf lg-breakpoint. */\n  colStartLg?: GridColPosition;\n\n  /** Eindkolom (grid-column-end, 1–13). */\n  colEnd?: GridColPosition;\n  /** Eindkolom vanaf sm-breakpoint. */\n  colEndSm?: GridColPosition;\n  /** Eindkolom vanaf md-breakpoint. */\n  colEndMd?: GridColPosition;\n  /** Eindkolom vanaf lg-breakpoint. */\n  colEndLg?: GridColPosition;\n\n  /**\n   * Breekt visueel uit tot de buitenrand van de grid container.\n   * Het item beslaat de volledige breedte inclusief de grid margin.\n   * Gebruik dit voor achtergrondvlakken die edge-to-edge lopen.\n   * @default false\n   */\n  fullBleed?: boolean;\n\n  /**\n   * Child-elementen van het grid item.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * GridItem component\n * Directe child van Grid met kolomspanning en optionele responsive varianten.\n *\n * @example\n * ```tsx\n * // Vaste kolomverdeling\n * <Grid>\n *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>\n *   <GridItem colSpan={4}>Sidebar</GridItem>\n * </Grid>\n *\n * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg\n * <Grid contained>\n *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>\n *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>\n *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>\n * </Grid>\n *\n * // Full-bleed: breekt uit tot de container-randen\n * <Grid contained>\n *   <GridItem colSpan={8}>Normale content</GridItem>\n *   <GridItem fullBleed>\n *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>\n *       Edge-to-edge sectie\n *     </div>\n *   </GridItem>\n * </Grid>\n * ```\n */\nexport const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(\n  (\n    {\n      className,\n      colSpan,\n      colSpanSm,\n      colSpanMd,\n      colSpanLg,\n      colStart,\n      colStartSm,\n      colStartMd,\n      colStartLg,\n      colEnd,\n      colEndSm,\n      colEndMd,\n      colEndLg,\n      fullBleed,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      colSpan && `dsn-col-${colSpan}`,\n      colSpanSm && `dsn-col-sm-${colSpanSm}`,\n      colSpanMd && `dsn-col-md-${colSpanMd}`,\n      colSpanLg && `dsn-col-lg-${colSpanLg}`,\n      colStart && `dsn-col-start-${colStart}`,\n      colStartSm && `dsn-col-start-sm-${colStartSm}`,\n      colStartMd && `dsn-col-start-md-${colStartMd}`,\n      colStartLg && `dsn-col-start-lg-${colStartLg}`,\n      colEnd && `dsn-col-end-${colEnd}`,\n      colEndSm && `dsn-col-end-sm-${colEndSm}`,\n      colEndMd && `dsn-col-end-md-${colEndMd}`,\n      colEndLg && `dsn-col-end-lg-${colEndLg}`,\n      fullBleed && 'dsn-full-bleed',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes || undefined} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nGridItem.displayName = 'GridItem';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Stack.css';\n\nexport type StackSpace =\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl'\n  | '5xl'\n  | '6xl';\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Verticale ruimte tussen directe child-elementen\n   * @default 'md'\n   */\n  space?: StackSpace;\n\n  /**\n   * Child-elementen om verticaal te stapelen\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Stack layout component\n * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.\n *\n * @example\n * ```tsx\n * // Default (md = 8px)\n * <Stack>\n *   <Paragraph>Eerste paragraaf</Paragraph>\n *   <Paragraph>Tweede paragraaf</Paragraph>\n * </Stack>\n *\n * // Grote ruimte tussen secties\n * <Stack space=\"3xl\">\n *   <section>...</section>\n *   <section>...</section>\n * </Stack>\n * ```\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  ({ className, space = 'md', children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-stack',\n      space !== 'md' && `dsn-stack--space-${space}`,\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nStack.displayName = 'Stack';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Heading.css';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingAppearance =\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'heading-5'\n  | 'heading-6';\n\nexport interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantic heading level — determines the HTML element (h1–h6)\n   * @default 2\n   */\n  level?: HeadingLevel;\n\n  /**\n   * Visual appearance — controls font size, line height, and spacing.\n   * Defaults to matching the level (e.g. level 2 → heading-2).\n   */\n  appearance?: HeadingAppearance;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Heading content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Heading component with independent semantic level and visual appearance\n *\n * @example\n * ```tsx\n * // Basic usage — level and appearance match\n * <Heading level={1}>Page Title</Heading>\n *\n * // Semantic h2, styled as heading-4\n * <Heading level={2} appearance=\"heading-4\">Subsection</Heading>\n * ```\n */\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ level = 2, appearance, className, children, ...props }, ref) => {\n    const resolvedAppearance =\n      appearance ?? (`heading-${level}` as HeadingAppearance);\n    const Tag = `h${level}` as const;\n\n    const classes = classNames(\n      'dsn-heading',\n      `dsn-heading--${resolvedAppearance}`,\n      className\n    );\n\n    return (\n      <Tag ref={ref} className={classes} {...props}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nHeading.displayName = 'Heading';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport type { HeadingLevel, HeadingAppearance } from '../Heading/Heading';\nimport './HeadingGroup.css';\n\nexport interface HeadingGroupProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantic heading level — determines the HTML element (h1–h6)\n   * @default 2\n   */\n  level?: HeadingLevel;\n\n  /**\n   * Visual appearance — controls font size, line height, and spacing.\n   * Defaults to matching the level (e.g. level 2 → heading-2).\n   */\n  appearance?: HeadingAppearance;\n\n  /**\n   * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.\n   */\n  preHeading?: React.ReactNode;\n\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const HeadingGroup = React.forwardRef<\n  HTMLHeadingElement,\n  HeadingGroupProps\n>(\n  (\n    { level = 2, appearance, preHeading, className, children, ...props },\n    ref\n  ) => {\n    const resolvedAppearance =\n      appearance ?? (`heading-${level}` as HeadingAppearance);\n    const Tag = `h${level}` as const;\n\n    const classes = classNames(\n      'dsn-heading',\n      `dsn-heading--${resolvedAppearance}`,\n      'dsn-heading-group',\n      className\n    );\n\n    return (\n      <Tag ref={ref} className={classes} {...props}>\n        {preHeading != null && (\n          <span className=\"dsn-pre-heading\">{preHeading}</span>\n        )}\n        {children}\n      </Tag>\n    );\n  }\n);\n\nHeadingGroup.displayName = 'HeadingGroup';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PreHeading.css';\n\nexport interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const PreHeading = React.forwardRef<HTMLSpanElement, PreHeadingProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={classNames('dsn-pre-heading', className)}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nPreHeading.displayName = 'PreHeading';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Paragraph.css';\n\nexport type ParagraphVariant = 'default' | 'lead' | 'small-print';\n\nexport interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Paragraph visual style\n   * @default 'default'\n   */\n  variant?: ParagraphVariant;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Paragraph content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Paragraph component with multiple variants\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Paragraph>Body text content</Paragraph>\n *\n * // Lead paragraph\n * <Paragraph variant=\"lead\">Introductory text</Paragraph>\n *\n * // Small print\n * <Paragraph variant=\"small-print\">Terms and conditions apply.</Paragraph>\n * ```\n */\nexport const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(\n  ({ variant = 'default', className, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-paragraph',\n      variant !== 'default' && `dsn-paragraph--${variant}`,\n      className\n    );\n\n    return (\n      <p ref={ref} className={classes} {...props}>\n        {children}\n      </p>\n    );\n  }\n);\n\nParagraph.displayName = 'Paragraph';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Link.css';\n\nexport type LinkSize = 'small' | 'default' | 'large';\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Whether the link is disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the link represents the current page\n   * @default false\n   */\n  current?: boolean;\n\n  /**\n   * Link size — controls font-size, gap, and icon size.\n   * When omitted, the link inherits the surrounding font (ideal for inline usage in paragraphs).\n   */\n  size?: LinkSize;\n\n  /**\n   * Icon element rendered before the link text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the link text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Whether the link opens in a new tab.\n   * Automatically adds target=\"_blank\", rel=\"noopener noreferrer\",\n   * and an inline \"(opent nieuw tabblad)\" hint.\n   * @default false\n   */\n  external?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Link content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Link component with icon support and size variants\n *\n * @example\n * ```tsx\n * // Basic usage (inherits font from parent)\n * <Link href=\"/about\">About us</Link>\n *\n * // With explicit size\n * <Link href=\"/about\" size=\"small\">Small link</Link>\n * <Link href=\"/about\" size=\"default\">Default link</Link>\n * <Link href=\"/about\" size=\"large\">Large link</Link>\n *\n * // With icon before text\n * <Link href=\"/download\" iconStart={<Icon name=\"download\" />}>\n *   Download\n * </Link>\n *\n * // With icon after text\n * <Link href=\"/next\" iconEnd={<Icon name=\"arrow-right\" />}>\n *   Next page\n * </Link>\n *\n * // External link (opens in new tab with visible hint)\n * <Link href=\"https://example.com\" external>\n *   External site\n * </Link>\n *\n * // Current page\n * <Link href=\"/dashboard\" current>Dashboard</Link>\n *\n * // Disabled\n * <Link disabled>Unavailable</Link>\n * ```\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      disabled = false,\n      current = false,\n      external = false,\n      size,\n      iconStart,\n      iconEnd,\n      className,\n      href,\n      target,\n      rel,\n      tabIndex,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    // Only add size class when explicitly provided.\n    // Without a size prop, the link inherits font from its parent,\n    // which is the expected behavior for inline usage in paragraphs.\n    const classes = classNames(\n      'dsn-link',\n      size && `dsn-link--size-${size}`,\n      className\n    );\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e);\n    };\n\n    // External links: add target, rel, and visible hint automatically\n    const resolvedTarget = external ? (target ?? '_blank') : target;\n    const resolvedRel = external ? (rel ?? 'noopener noreferrer') : rel;\n\n    return (\n      <a\n        ref={ref}\n        className={classes}\n        href={disabled ? undefined : href}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        tabIndex={disabled ? -1 : tabIndex}\n        aria-disabled={disabled || undefined}\n        aria-current={current ? 'page' : undefined}\n        onClick={handleClick}\n        {...props}\n      >\n        {iconStart}\n        {children}\n        {external && ' (opent nieuw tabblad)'}\n        {iconEnd}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './UnorderedList.css';\n\nexport interface UnorderedListProps extends React.HTMLAttributes<HTMLUListElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * List content (li elements)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Unordered list component with accent-colored bullet markers\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *   <li>First item</li>\n *   <li>Second item</li>\n *   <li>Third item</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = React.forwardRef<\n  HTMLUListElement,\n  UnorderedListProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-unordered-list', className);\n\n  return (\n    <ul ref={ref} className={classes} {...props}>\n      {children}\n    </ul>\n  );\n});\n\nUnorderedList.displayName = 'UnorderedList';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './OrderedList.css';\n\nexport interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * List content (li elements)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Ordered list component with numbered markers\n *\n * @example\n * ```tsx\n * <OrderedList>\n *   <li>First step</li>\n *   <li>Second step</li>\n *   <li>Third step</li>\n * </OrderedList>\n *\n * // Starting from a specific number\n * <OrderedList start={5}>\n *   <li>Fifth step</li>\n *   <li>Sixth step</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = React.forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-ordered-list', className);\n\n    return (\n      <ol ref={ref} className={classes} {...props}>\n        {children}\n      </ol>\n    );\n  }\n);\n\nOrderedList.displayName = 'OrderedList';\n","// Auto-generated — do not edit manually.\n// Run: node scripts/generate-icons.js\n//\n// De SVG-inhoud staat hier inline zodat dist zelfstandig is: geen losse .svg-bestanden\n// en geen svgr-configuratie nodig bij de consumer.\nimport React from 'react';\n\nexport type IconComponent = React.ForwardRefExoticComponent<\n  React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>\n>;\n\ntype IconNode = [tag: string, attributes: Record<string, string>];\n\nfunction createIcon(\n  displayName: string,\n  rootAttributes: Record<string, string>,\n  nodes: IconNode[]\n): IconComponent {\n  const Component = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(\n    (props, ref) =>\n      React.createElement(\n        'svg',\n        { ...rootAttributes, ...props, ref },\n        nodes.map(([tag, attributes], index) =>\n          React.createElement(tag, { key: index, ...attributes })\n        )\n      )\n  );\n  Component.displayName = displayName;\n  return Component;\n}\n\nconst AlertTriangleIcon = createIcon(\n  \"AlertTriangleIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 9v4\"}],\n    [\"path\", {\"d\":\"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0\"}],\n    [\"path\", {\"d\":\"M12 16h.01\"}],\n  ]\n);\n\nconst ArchiveIcon = createIcon(\n  \"ArchiveIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2\"}],\n    [\"path\", {\"d\":\"M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10\"}],\n    [\"path\", {\"d\":\"M10 12l4 0\"}],\n  ]\n);\n\nconst ArrowDownIcon = createIcon(\n  \"ArrowDownIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 5l0 14\"}],\n    [\"path\", {\"d\":\"M18 13l-6 6\"}],\n    [\"path\", {\"d\":\"M6 13l6 6\"}],\n  ]\n);\n\nconst ArrowLeftIcon = createIcon(\n  \"ArrowLeftIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M5 12l14 0\"}],\n    [\"path\", {\"d\":\"M5 12l6 6\"}],\n    [\"path\", {\"d\":\"M5 12l6 -6\"}],\n  ]\n);\n\nconst ArrowNarrowDownIcon = createIcon(\n  \"ArrowNarrowDownIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 5l0 14\"}],\n    [\"path\", {\"d\":\"M16 15l-4 4\"}],\n    [\"path\", {\"d\":\"M8 15l4 4\"}],\n  ]\n);\n\nconst ArrowNarrowUpIcon = createIcon(\n  \"ArrowNarrowUpIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 5l0 14\"}],\n    [\"path\", {\"d\":\"M16 9l-4 -4\"}],\n    [\"path\", {\"d\":\"M8 9l4 -4\"}],\n  ]\n);\n\nconst ArrowRightIcon = createIcon(\n  \"ArrowRightIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M5 12l14 0\"}],\n    [\"path\", {\"d\":\"M13 18l6 -6\"}],\n    [\"path\", {\"d\":\"M13 6l6 6\"}],\n  ]\n);\n\nconst ArrowUpIcon = createIcon(\n  \"ArrowUpIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 5l0 14\"}],\n    [\"path\", {\"d\":\"M18 11l-6 -6\"}],\n    [\"path\", {\"d\":\"M6 11l6 -6\"}],\n  ]\n);\n\nconst ArrowsSortIcon = createIcon(\n  \"ArrowsSortIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 9l4 -4l4 4m-4 -4v14\"}],\n    [\"path\", {\"d\":\"M21 15l-4 4l-4 -4m4 4v-14\"}],\n  ]\n);\n\nconst BellIcon = createIcon(\n  \"BellIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6\"}],\n    [\"path\", {\"d\":\"M9 17v1a3 3 0 0 0 6 0v-1\"}],\n  ]\n);\n\nconst CalendarEventIcon = createIcon(\n  \"CalendarEventIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\"}],\n    [\"path\", {\"d\":\"M16 3l0 4\"}],\n    [\"path\", {\"d\":\"M8 3l0 4\"}],\n    [\"path\", {\"d\":\"M4 11l16 0\"}],\n    [\"path\", {\"d\":\"M8 15h2v2h-2l0 -2\"}],\n  ]\n);\n\nconst CheckIcon = createIcon(\n  \"CheckIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M5 12l5 5l10 -10\"}],\n  ]\n);\n\nconst ChevronDownIcon = createIcon(\n  \"ChevronDownIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M6 9l6 6l6 -6\"}],\n  ]\n);\n\nconst ChevronLeftIcon = createIcon(\n  \"ChevronLeftIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M15 6l-6 6l6 6\"}],\n  ]\n);\n\nconst ChevronRightIcon = createIcon(\n  \"ChevronRightIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M9 6l6 6l-6 6\"}],\n  ]\n);\n\nconst ChevronUpIcon = createIcon(\n  \"ChevronUpIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M6 15l6 -6l6 6\"}],\n  ]\n);\n\nconst CircleCheckIcon = createIcon(\n  \"CircleCheckIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"}],\n    [\"path\", {\"d\":\"M9 12l2 2l4 -4\"}],\n  ]\n);\n\nconst ClockIcon = createIcon(\n  \"ClockIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\"}],\n    [\"path\", {\"d\":\"M12 7v5l3 3\"}],\n  ]\n);\n\nconst DotsVerticalIcon = createIcon(\n  \"DotsVerticalIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"}],\n    [\"path\", {\"d\":\"M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"}],\n    [\"path\", {\"d\":\"M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\"}],\n  ]\n);\n\nconst DownloadIcon = createIcon(\n  \"DownloadIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"}],\n    [\"path\", {\"d\":\"M7 11l5 5l5 -5\"}],\n    [\"path\", {\"d\":\"M12 4l0 12\"}],\n  ]\n);\n\nconst EditIcon = createIcon(\n  \"EditIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\"}],\n    [\"path\", {\"d\":\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z\"}],\n    [\"path\", {\"d\":\"M16 5l3 3\"}],\n  ]\n);\n\nconst ExclamationCircleIcon = createIcon(\n  \"ExclamationCircleIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"}],\n    [\"path\", {\"d\":\"M12 9v4\"}],\n    [\"path\", {\"d\":\"M12 16v.01\"}],\n  ]\n);\n\nconst ExternalLinkIcon = createIcon(\n  \"ExternalLinkIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6\"}],\n    [\"path\", {\"d\":\"M11 13l9 -9\"}],\n    [\"path\", {\"d\":\"M15 4h5v5\"}],\n  ]\n);\n\nconst EyeIcon = createIcon(\n  \"EyeIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"}],\n    [\"path\", {\"d\":\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"}],\n  ]\n);\n\nconst FileDescriptionIcon = createIcon(\n  \"FileDescriptionIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M14 3v4a1 1 0 0 0 1 1h4\"}],\n    [\"path\", {\"d\":\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2\"}],\n    [\"path\", {\"d\":\"M9 17h6\"}],\n    [\"path\", {\"d\":\"M9 13h6\"}],\n  ]\n);\n\nconst FolderIcon = createIcon(\n  \"FolderIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2\"}],\n  ]\n);\n\nconst HeartFilledIcon = createIcon(\n  \"HeartFilledIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z\"}],\n  ]\n);\n\nconst HeartIcon = createIcon(\n  \"HeartIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572\"}],\n  ]\n);\n\nconst HomeIcon = createIcon(\n  \"HomeIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M5 12l-2 0l9 -9l9 9l-2 0\"}],\n    [\"path\", {\"d\":\"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7\"}],\n    [\"path\", {\"d\":\"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6\"}],\n  ]\n);\n\nconst InfoCircleIcon = createIcon(\n  \"InfoCircleIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\"}],\n    [\"path\", {\"d\":\"M12 9h.01\"}],\n    [\"path\", {\"d\":\"M11 12h1v4h1\"}],\n  ]\n);\n\nconst LoaderIcon = createIcon(\n  \"LoaderIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M12 6l0 -3\"}],\n    [\"path\", {\"d\":\"M16.25 7.75l2.15 -2.15\"}],\n    [\"path\", {\"d\":\"M18 12l3 0\"}],\n    [\"path\", {\"d\":\"M16.25 16.25l2.15 2.15\"}],\n    [\"path\", {\"d\":\"M12 18l0 3\"}],\n    [\"path\", {\"d\":\"M7.75 16.25l-2.15 2.15\"}],\n    [\"path\", {\"d\":\"M6 12l-3 0\"}],\n    [\"path\", {\"d\":\"M7.75 7.75l-2.15 -2.15\"}],\n  ]\n);\n\nconst MailIcon = createIcon(\n  \"MailIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10\"}],\n    [\"path\", {\"d\":\"M3 7l9 6l9 -6\"}],\n  ]\n);\n\nconst MenuIcon = createIcon(\n  \"MenuIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M4 6l16 0\"}],\n    [\"path\", {\"d\":\"M4 12l16 0\"}],\n    [\"path\", {\"d\":\"M4 18l16 0\"}],\n  ]\n);\n\nconst MessageCircleIcon = createIcon(\n  \"MessageCircleIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\"}],\n  ]\n);\n\nconst MinusIcon = createIcon(\n  \"MinusIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M5 12l14 0\"}],\n  ]\n);\n\nconst PaperclipIcon = createIcon(\n  \"PaperclipIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5\"}],\n  ]\n);\n\nconst PencilIcon = createIcon(\n  \"PencilIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"}],\n    [\"path\", {\"d\":\"M13.5 6.5l4 4\"}],\n  ]\n);\n\nconst PhotoIcon = createIcon(\n  \"PhotoIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M15 8h.01\"}],\n    [\"path\", {\"d\":\"M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12\"}],\n    [\"path\", {\"d\":\"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5\"}],\n    [\"path\", {\"d\":\"M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3\"}],\n  ]\n);\n\nconst PlusIcon = createIcon(\n  \"PlusIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M12 5l0 14\"}],\n    [\"path\", {\"d\":\"M5 12l14 0\"}],\n  ]\n);\n\nconst PrinterIcon = createIcon(\n  \"PrinterIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2\"}],\n    [\"path\", {\"d\":\"M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4\"}],\n    [\"path\", {\"d\":\"M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4\"}],\n  ]\n);\n\nconst SearchIcon = createIcon(\n  \"SearchIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\"}],\n    [\"path\", {\"d\":\"M21 21l-6 -6\"}],\n  ]\n);\n\nconst SelectorIcon = createIcon(\n  \"SelectorIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M8 9l4 -4l4 4\"}],\n    [\"path\", {\"d\":\"M16 15l-4 4l-4 -4\"}],\n  ]\n);\n\nconst SettingsIcon = createIcon(\n  \"SettingsIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z\"}],\n    [\"path\", {\"d\":\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\"}],\n  ]\n);\n\nconst SortAscendingIcon = createIcon(\n  \"SortAscendingIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M4 6l7 0\"}],\n    [\"path\", {\"d\":\"M4 12l7 0\"}],\n    [\"path\", {\"d\":\"M4 18l9 0\"}],\n    [\"path\", {\"d\":\"M15 9l3 -3l3 3\"}],\n    [\"path\", {\"d\":\"M18 6l0 12\"}],\n  ]\n);\n\nconst SortDescendingIcon = createIcon(\n  \"SortDescendingIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M4 6l9 0\"}],\n    [\"path\", {\"d\":\"M4 12l7 0\"}],\n    [\"path\", {\"d\":\"M4 18l7 0\"}],\n    [\"path\", {\"d\":\"M15 15l3 3l3 -3\"}],\n    [\"path\", {\"d\":\"M18 6l0 12\"}],\n  ]\n);\n\nconst StarFilledIcon = createIcon(\n  \"StarFilledIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z\"}],\n  ]\n);\n\nconst StarIcon = createIcon(\n  \"StarIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"}],\n  ]\n);\n\nconst TrashIcon = createIcon(\n  \"TrashIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M4 7l16 0\"}],\n    [\"path\", {\"d\":\"M10 11l0 6\"}],\n    [\"path\", {\"d\":\"M14 11l0 6\"}],\n    [\"path\", {\"d\":\"M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12\"}],\n    [\"path\", {\"d\":\"M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3\"}],\n  ]\n);\n\nconst UploadIcon = createIcon(\n  \"UploadIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"stroke\":\"none\",\"d\":\"M0 0h24v24H0z\",\"fill\":\"none\"}],\n    [\"path\", {\"d\":\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\"}],\n    [\"path\", {\"d\":\"M7 9l5 -5l5 5\"}],\n    [\"path\", {\"d\":\"M12 4l0 12\"}],\n  ]\n);\n\nconst UserIcon = createIcon(\n  \"UserIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\"}],\n    [\"path\", {\"d\":\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\"}],\n  ]\n);\n\nconst XIcon = createIcon(\n  \"XIcon\",\n  {\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"2\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\"},\n  [\n    [\"path\", {\"d\":\"M18 6l-12 12\"}],\n    [\"path\", {\"d\":\"M6 6l12 12\"}],\n  ]\n);\n\nexport type IconName =\n  | 'alert-triangle'\n  | 'archive'\n  | 'arrow-down'\n  | 'arrow-left'\n  | 'arrow-narrow-down'\n  | 'arrow-narrow-up'\n  | 'arrow-right'\n  | 'arrow-up'\n  | 'arrows-sort'\n  | 'bell'\n  | 'calendar-event'\n  | 'check'\n  | 'chevron-down'\n  | 'chevron-left'\n  | 'chevron-right'\n  | 'chevron-up'\n  | 'circle-check'\n  | 'clock'\n  | 'dots-vertical'\n  | 'download'\n  | 'edit'\n  | 'exclamation-circle'\n  | 'external-link'\n  | 'eye'\n  | 'file-description'\n  | 'folder'\n  | 'heart-filled'\n  | 'heart'\n  | 'home'\n  | 'info-circle'\n  | 'loader'\n  | 'mail'\n  | 'menu'\n  | 'message-circle'\n  | 'minus'\n  | 'paperclip'\n  | 'pencil'\n  | 'photo'\n  | 'plus'\n  | 'printer'\n  | 'search'\n  | 'selector'\n  | 'settings'\n  | 'sort-ascending'\n  | 'sort-descending'\n  | 'star-filled'\n  | 'star'\n  | 'trash'\n  | 'upload'\n  | 'user'\n  | 'x';\n\nexport const iconMap: Record<IconName, IconComponent> = {\n  'alert-triangle': AlertTriangleIcon,\n  'archive': ArchiveIcon,\n  'arrow-down': ArrowDownIcon,\n  'arrow-left': ArrowLeftIcon,\n  'arrow-narrow-down': ArrowNarrowDownIcon,\n  'arrow-narrow-up': ArrowNarrowUpIcon,\n  'arrow-right': ArrowRightIcon,\n  'arrow-up': ArrowUpIcon,\n  'arrows-sort': ArrowsSortIcon,\n  'bell': BellIcon,\n  'calendar-event': CalendarEventIcon,\n  'check': CheckIcon,\n  'chevron-down': ChevronDownIcon,\n  'chevron-left': ChevronLeftIcon,\n  'chevron-right': ChevronRightIcon,\n  'chevron-up': ChevronUpIcon,\n  'circle-check': CircleCheckIcon,\n  'clock': ClockIcon,\n  'dots-vertical': DotsVerticalIcon,\n  'download': DownloadIcon,\n  'edit': EditIcon,\n  'exclamation-circle': ExclamationCircleIcon,\n  'external-link': ExternalLinkIcon,\n  'eye': EyeIcon,\n  'file-description': FileDescriptionIcon,\n  'folder': FolderIcon,\n  'heart-filled': HeartFilledIcon,\n  'heart': HeartIcon,\n  'home': HomeIcon,\n  'info-circle': InfoCircleIcon,\n  'loader': LoaderIcon,\n  'mail': MailIcon,\n  'menu': MenuIcon,\n  'message-circle': MessageCircleIcon,\n  'minus': MinusIcon,\n  'paperclip': PaperclipIcon,\n  'pencil': PencilIcon,\n  'photo': PhotoIcon,\n  'plus': PlusIcon,\n  'printer': PrinterIcon,\n  'search': SearchIcon,\n  'selector': SelectorIcon,\n  'settings': SettingsIcon,\n  'sort-ascending': SortAscendingIcon,\n  'sort-descending': SortDescendingIcon,\n  'star-filled': StarFilledIcon,\n  'star': StarIcon,\n  'trash': TrashIcon,\n  'upload': UploadIcon,\n  'user': UserIcon,\n  'x': XIcon,\n};\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { iconMap } from './icon-registry.generated';\nimport type { IconName } from './icon-registry.generated';\n\nimport './Icon.css';\n\nexport type { IconName };\nexport { iconMap };\nexport type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport interface IconProps extends Omit<\n  React.SVGAttributes<SVGSVGElement>,\n  'name'\n> {\n  /**\n   * Icon name from Tabler Icons\n   */\n  name: IconName;\n\n  /**\n   * Icon size variant\n   * @default 'md'\n   */\n  size?: IconSize;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Accessible label for the icon\n   * If not provided, icon is marked as decorative (aria-hidden=\"true\")\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Icon component using individual Tabler Icon SVG imports\n * Only icons you use will be included in your bundle (tree-shaking)\n *\n * @example\n * ```tsx\n * // Decorative icon (no label needed)\n * <Icon name=\"check\" size=\"md\" />\n *\n * // Standalone icon (needs label)\n * <Icon name=\"settings\" size=\"lg\" aria-label=\"Open settings\" />\n *\n * // Icon with text (mark as decorative)\n * <span>\n *   <Icon name=\"check\" size=\"sm\" />\n *   Task complete\n * </span>\n * ```\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    { name, size = 'md', className, 'aria-label': ariaLabel, ...props },\n    ref\n  ) => {\n    const IconComponent = iconMap[name];\n\n    if (!IconComponent) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(\n          `[DSN Icon] Icon \"${name}\" not found. Available icons: ${Object.keys(iconMap).join(', ')}`\n        );\n      }\n      return null;\n    }\n\n    const classes = classNames(\n      'dsn-icon',\n      size !== 'md' && `dsn-icon--${size}`,\n      className\n    );\n\n    // If no aria-label is provided, mark as decorative\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'img' }\n      : { 'aria-hidden': true };\n\n    return (\n      <IconComponent ref={ref} className={classes} {...ariaProps} {...props} />\n    );\n  }\n);\n\nIcon.displayName = 'Icon';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport type { IconName } from '../Icon';\nimport './IconList.css';\n\n// =============================================================================\n// IconList\n// =============================================================================\n\nexport interface IconListProps extends React.HTMLAttributes<\n  HTMLUListElement | HTMLOListElement\n> {\n  /**\n   * Semantic list element\n   * @default 'ul'\n   */\n  as?: 'ul' | 'ol';\n\n  /**\n   * CSS color value that overrides `--dsn-icon-list-icon-color` for the whole\n   * list; accepts any `var(--dsn-color-*-color-default)`\n   */\n  iconColor?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * `IconListItem` elements\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * List where every item carries an icon instead of a bullet or number\n *\n * `role=\"list\"` is set explicitly: `list-style-type: none` makes\n * Safari/VoiceOver drop the list announcement, and the role restores it.\n *\n * @example\n * ```tsx\n * <IconList>\n *   <IconListItem icon=\"calendar-event\">Afspraak op maandag 24 maart</IconListItem>\n *   <IconListItem icon=\"clock\">Duurt 30 minuten</IconListItem>\n * </IconList>\n *\n * // Ordered steps\n * <IconList as=\"ol\">\n *   <IconListItem icon=\"calendar-event\">Maak een afspraak</IconListItem>\n *   <IconListItem icon=\"clock\">Wacht op bevestiging</IconListItem>\n * </IconList>\n *\n * // Positive status color for the whole list\n * <IconList iconColor=\"var(--dsn-color-positive-color-default)\">\n *   <IconListItem icon=\"check\">Aanvraag goedgekeurd</IconListItem>\n * </IconList>\n * ```\n */\nexport const IconList = React.forwardRef<\n  HTMLUListElement | HTMLOListElement,\n  IconListProps\n>(({ as = 'ul', iconColor, className, children, style, ...props }, ref) => {\n  const Element = as;\n  const classes = classNames('dsn-icon-list', className);\n\n  const styles = iconColor\n    ? ({\n        ...style,\n        '--dsn-icon-list-icon-color': iconColor,\n      } as React.CSSProperties)\n    : style;\n\n  return (\n    <Element\n      ref={ref as React.Ref<HTMLUListElement & HTMLOListElement>}\n      className={classes}\n      role=\"list\"\n      style={styles}\n      {...props}\n    >\n      {children}\n    </Element>\n  );\n});\n\nIconList.displayName = 'IconList';\n\n// =============================================================================\n// IconListItem\n// =============================================================================\n\nexport interface IconListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * Icon name from the icon set; the icon is decorative and replaces the marker\n   */\n  icon: IconName;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Item text content\n   */\n  children?: React.ReactNode;\n}\n\nexport const IconListItem = React.forwardRef<HTMLLIElement, IconListItemProps>(\n  ({ icon, className, children, ...props }, ref) => {\n    const classes = classNames('dsn-icon-list__item', className);\n\n    return (\n      <li ref={ref} className={classes} {...props}>\n        <Icon name={icon} className=\"dsn-icon-list__icon\" />\n        {children}\n      </li>\n    );\n  }\n);\n\nIconListItem.displayName = 'IconListItem';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Button.css';\n\nexport type ButtonVariant =\n  | 'strong'\n  | 'strong-negative'\n  | 'strong-positive'\n  | 'default'\n  | 'default-negative'\n  | 'default-positive'\n  | 'subtle'\n  | 'subtle-negative'\n  | 'subtle-positive';\nexport type ButtonSize = 'small' | 'default' | 'large';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button visual style\n   * @default 'strong'\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * Button size\n   * @default 'default'\n   */\n  size?: ButtonSize;\n\n  /**\n   * Whether button shows loading state\n   * @default false\n   */\n  loading?: boolean;\n\n  /**\n   * Whether button takes full width of container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether button contains only an icon (adjusts padding)\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Icon element rendered before the button text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the button text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Button content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Button component with multiple variants and sizes\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Button variant=\"strong\">Save</Button>\n *\n * // With icon before text\n * <Button variant=\"default\" iconStart={<Icon name=\"plus\" />}>\n *   Add item\n * </Button>\n *\n * // With icon after text\n * <Button variant=\"default\" iconEnd={<Icon name=\"arrow-right\" />}>\n *   Next\n * </Button>\n *\n * // With icons on both sides\n * <Button iconStart={<Icon name=\"check\" />} iconEnd={<Icon name=\"arrow-right\" />}>\n *   Confirm\n * </Button>\n *\n * // Icon only — children is the accessible text label, icon via iconStart\n * <Button variant=\"subtle\" iconOnly iconStart={<Icon name=\"x\" />}>\n *   Sluiten\n * </Button>\n *\n * // Loading state\n * <Button loading disabled>Saving...</Button>\n *\n * // Different sizes\n * <Button size=\"small\">Small</Button>\n * <Button size=\"default\">Default</Button>\n * <Button size=\"large\">Large</Button>\n *\n * // Sentiment variants\n * <Button variant=\"strong-negative\">Delete</Button>\n * <Button variant=\"strong-positive\">Confirm</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'strong',\n      size = 'default',\n      loading = false,\n      fullWidth = false,\n      iconOnly = false,\n      iconStart,\n      iconEnd,\n      className,\n      disabled,\n      children,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-button',\n      `dsn-button--${variant}`,\n      `dsn-button--size-${size}`,\n      loading && 'dsn-button--loading',\n      fullWidth && 'dsn-button--full-width',\n      iconOnly && 'dsn-button--icon-only',\n      className\n    );\n\n    const loaderIcon = loading ? (\n      <Icon name=\"loader\" className=\"dsn-button__loader\" aria-hidden />\n    ) : null;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        className={classes}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? loaderIcon : iconStart}\n        {children !== undefined && children !== null && (\n          <span className=\"dsn-button__label\">{children}</span>\n        )}\n        {iconEnd}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ButtonLink.css';\n\nexport type ButtonLinkVariant =\n  | 'strong'\n  | 'strong-negative'\n  | 'strong-positive'\n  | 'default'\n  | 'default-negative'\n  | 'default-positive'\n  | 'subtle'\n  | 'subtle-negative'\n  | 'subtle-positive';\n\nexport type ButtonLinkSize = 'small' | 'default' | 'large';\n\nexport interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Navigation URL\n   */\n  href?: string;\n\n  /**\n   * Visual style — same variants as Button (excl. 'link')\n   * @default 'strong'\n   */\n  variant?: ButtonLinkVariant;\n\n  /**\n   * Button size\n   * @default 'default'\n   */\n  size?: ButtonLinkSize;\n\n  /**\n   * Whether the button-link takes full width of container\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether button-link contains only an icon (hides label text visually)\n   * @default false\n   */\n  iconOnly?: boolean;\n\n  /**\n   * Icon element rendered before the label text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the label text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Whether the link is disabled.\n   * Maps to aria-disabled=\"true\" + tabIndex={-1} + prevents navigation.\n   * <a> has no native disabled attribute.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the link opens in a new tab.\n   * Automatically adds target=\"_blank\", rel=\"noopener noreferrer\",\n   * and an inline \"(opent nieuw tabblad)\" hint — same behaviour as Link.\n   * @default false\n   */\n  external?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Link content (wrapped in dsn-button__label, same as Button)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ButtonLink — semantically an <a>, visually styled as a Button.\n *\n * Use when an action navigates to a URL but needs the visual prominence of a Button.\n *\n * @example\n * ```tsx\n * // Basic usage (strong, default size)\n * <ButtonLink href=\"/volgende\">Volgende stap</ButtonLink>\n *\n * // Subtle variant\n * <ButtonLink href=\"/\" variant=\"subtle\">Terug naar overzicht</ButtonLink>\n *\n * // With icon\n * <ButtonLink href=\"/download\" iconStart={<Icon name=\"download\" aria-hidden />}>\n *   Download rapport\n * </ButtonLink>\n *\n * // Icon-only\n * <ButtonLink href=\"/info\" iconOnly iconStart={<Icon name=\"info-circle\" aria-hidden />}>\n *   Meer informatie\n * </ButtonLink>\n *\n * // Disabled\n * <ButtonLink href=\"/dashboard\" disabled>Niet beschikbaar</ButtonLink>\n *\n * // Opens in new tab with visible hint\n * <ButtonLink href=\"https://example.com\" external>Externe pagina</ButtonLink>\n * ```\n */\nexport const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      href,\n      variant = 'strong',\n      size = 'default',\n      fullWidth = false,\n      iconOnly = false,\n      iconStart,\n      iconEnd,\n      disabled = false,\n      external = false,\n      className,\n      target,\n      rel,\n      tabIndex,\n      children,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-button',\n      `dsn-button--${variant}`,\n      `dsn-button--size-${size}`,\n      fullWidth && 'dsn-button--full-width',\n      iconOnly && 'dsn-button--icon-only',\n      'dsn-button-link',\n      className\n    );\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      onClick?.(e);\n    };\n\n    // External links: set target and rel automatically, unless explicitly overridden\n    const resolvedTarget = external ? (target ?? '_blank') : target;\n    const resolvedRel = external ? (rel ?? 'noopener noreferrer') : rel;\n\n    return (\n      <a\n        ref={ref}\n        className={classes}\n        href={disabled ? undefined : href}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        tabIndex={disabled ? -1 : tabIndex}\n        aria-disabled={disabled || undefined}\n        onClick={handleClick}\n        {...props}\n      >\n        {iconStart}\n        {children !== undefined && children !== null && (\n          <span className=\"dsn-button__label\">{children}</span>\n        )}\n        {external && ' (opent nieuw tabblad)'}\n        {iconEnd}\n      </a>\n    );\n  }\n);\n\nButtonLink.displayName = 'ButtonLink';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './LinkButton.css';\n\nexport type LinkButtonSize = 'small' | 'default' | 'large';\n\nexport interface LinkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button size — controls font-size, gap, and icon size.\n   * When omitted, the button inherits the surrounding font (same as Link).\n   */\n  size?: LinkButtonSize;\n\n  /**\n   * Icon element rendered before the button text\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icon element rendered after the button text\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Button content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * LinkButton — semantically a <button>, visually styled as a Link.\n *\n * Use when an action requires a JavaScript handler or form submit,\n * but the visual prominence of a Button does not fit the context.\n *\n * @example\n * ```tsx\n * // Basic usage (inherits font from parent)\n * <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>\n *\n * // With explicit size\n * <LinkButton size=\"small\">Klein</LinkButton>\n *\n * // With icon\n * <LinkButton iconStart={<Icon name=\"arrow-left\" aria-hidden />}>Terug</LinkButton>\n *\n * // Disabled\n * <LinkButton disabled>Niet beschikbaar</LinkButton>\n *\n * // Form submit\n * <LinkButton type=\"submit\">Bevestigen</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(\n  (\n    {\n      size,\n      iconStart,\n      iconEnd,\n      className,\n      type = 'button',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-link',\n      'dsn-link-button',\n      size && `dsn-link--size-${size}`,\n      className\n    );\n\n    return (\n      <button ref={ref} type={type} className={classes} {...props}>\n        {iconStart}\n        {children}\n        {iconEnd}\n      </button>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, width, type = 'text', ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FileInput.css';\n\nexport interface FileInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n}\n\n/**\n * File Input component\n * Styled wrapper around native <input type=\"file\"> with support for\n * disabled and invalid states and multiple file selection.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FileInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"attachment\">Bijlage</FormFieldLabel>\n * <FileInput id=\"attachment\" accept=\".pdf,.docx\" />\n *\n * // Multiple files\n * <FileInput multiple />\n *\n * // Invalid\n * <FileInput invalid aria-describedby=\"error\" />\n * ```\n */\nexport const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(\n  ({ className, invalid, ...props }, ref) => {\n    const classes = classNames('dsn-file-input', className);\n\n    return (\n      <input\n        ref={ref}\n        type=\"file\"\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nFileInput.displayName = 'FileInput';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface EmailInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Email Input component\n * Email input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <EmailInput placeholder=\"naam@voorbeeld.nl\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">E-mailadres</FormFieldLabel>\n * <EmailInput id=\"email\" />\n *\n * // Invalid state\n * <EmailInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(\n  ({ className, invalid, width, autoComplete, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"email\"\n        inputMode=\"email\"\n        className={classes}\n        autoComplete={autoComplete || 'email'}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nEmailInput.displayName = 'EmailInput';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';\n\nexport interface PasswordInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Autocomplete hint for password managers\n   * - 'current-password': voor inlogformulieren (default)\n   * - 'new-password': voor registratie- en wachtwoord wijzigformulieren\n   * - 'off': autocomplete uitschakelen\n   * @default 'current-password'\n   */\n  passwordAutocomplete?: PasswordAutocomplete;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Password Input component\n * Uses type=\"password\" for secure text entry.\n * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —\n * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.\n *\n * @example\n * ```tsx\n * // Login form (current password)\n * <PasswordInput placeholder=\"Wachtwoord\" />\n *\n * // Registration form (new password)\n * <PasswordInput passwordAutocomplete=\"new-password\" placeholder=\"Nieuw wachtwoord\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"password\">Wachtwoord</FormFieldLabel>\n * <PasswordInput id=\"password\" />\n *\n * // Invalid state\n * <PasswordInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      passwordAutocomplete = 'current-password',\n      className,\n      invalid,\n      width,\n      autoComplete,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"password\"\n        className={classes}\n        autoComplete={autoComplete || passwordAutocomplete}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nPasswordInput.displayName = 'PasswordInput';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface NumberInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:\n   * inputmode=\"numeric\" + pattern=\"[0-9]*\" for a numeric-only keyboard.\n   * When true, uses inputmode=\"decimal\" without pattern restriction.\n   * @default false\n   */\n  allowDecimals?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Number Input component\n * Uses type=\"text\" with inputmode=\"decimal\" for better mobile UX (no spinner buttons)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <NumberInput placeholder=\"0,00\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"amount\">Bedrag</FormFieldLabel>\n * <NumberInput id=\"amount\" />\n *\n * // Invalid state\n * <NumberInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  ({ className, invalid, width, allowDecimals = false, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"text\"\n        inputMode={allowDecimals ? 'decimal' : 'numeric'}\n        pattern={allowDecimals ? undefined : '[0-9]*'}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        autoComplete=\"off\"\n        {...props}\n      />\n    );\n  }\n);\n\nNumberInput.displayName = 'NumberInput';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface TelephoneInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Telephone Input component\n * Telephone input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TelephoneInput placeholder=\"06 12345678\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"phone\">Telefoonnummer</FormFieldLabel>\n * <TelephoneInput id=\"phone\" />\n *\n * // Invalid state\n * <TelephoneInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TelephoneInput = React.forwardRef<\n  HTMLInputElement,\n  TelephoneInputProps\n>(({ className, invalid, width, autoComplete, ...props }, ref) => {\n  const classes = classNames(\n    'dsn-text-input',\n    width && `dsn-text-input--width-${width}`,\n    className\n  );\n\n  return (\n    <input\n      ref={ref}\n      type=\"tel\"\n      inputMode=\"tel\"\n      className={classes}\n      autoComplete={autoComplete || 'tel'}\n      aria-invalid={invalid || undefined}\n      {...props}\n    />\n  );\n});\n\nTelephoneInput.displayName = 'TelephoneInput';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './SearchInput.css';\n\nexport interface SearchInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Search Input component\n * Search input with a non-interactive search icon positioned at inline-start.\n * The icon has the same color as the input text (dsn-text-input-color).\n *\n * @example\n * ```tsx\n * // Basic usage\n * <SearchInput placeholder=\"Zoeken...\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"search\">Zoeken</FormFieldLabel>\n * <SearchInput id=\"search\" />\n *\n * // Invalid state\n * <SearchInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  ({ className, invalid, width, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-search-input-wrapper',\n      width && `dsn-search-input-wrapper--width-${width}`\n    );\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-search-input',\n      className\n    );\n\n    return (\n      <div className={wrapperClasses}>\n        <Icon name=\"search\" className=\"dsn-search-input__icon\" aria-hidden />\n        <input\n          ref={ref}\n          type=\"search\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearchInput.displayName = 'SearchInput';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './DateInput.css';\n\nexport interface DateInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Date Input component\n * Date input with an interactive calendar button at inline-end that opens the native date picker.\n * Fixed width (sm) — not configurable, as date inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"date\">Datum</FormFieldLabel>\n * <DateInput id=\"date\" />\n *\n * // With default value\n * <DateInput defaultValue=\"2025-03-15\" />\n *\n * // Invalid state\n * <DateInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-date-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-date-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"date\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"calendar-event\" aria-hidden />}\n            className=\"dsn-date-input__button\"\n            onClick={handleButtonClick}\n          >\n            Datumkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { NumberInput } from '../NumberInput';\nimport './DateInputGroup.css';\n\nexport interface DateInputGroupValue {\n  day: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateInputGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /**\n   * The current value of the date group\n   */\n  value?: DateInputGroupValue;\n\n  /**\n   * Called when any field changes, with the full updated value object\n   */\n  onChange?: (value: DateInputGroupValue) => void;\n\n  /**\n   * Whether all fields are in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Whether all fields are disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * id prefix used to generate unique ids for each field (dag, maand, jaar)\n   * E.g. id=\"geboortedatum\" → \"geboortedatum-dag\", \"geboortedatum-maand\", \"geboortedatum-jaar\"\n   */\n  id?: string;\n}\n\n/**\n * Date Input Group component\n * Three separate inputs for day, month and year.\n * More accessible than a native date picker: works consistently across all browsers and\n * devices, and allows partial input (e.g. year only).\n *\n * Wrap in a FormFieldset for a complete form field with legend and error message.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInputGroup\n *   value={{ day: '', month: '', year: '' }}\n *   onChange={(val) => setValue(val)}\n * />\n *\n * // Complete form field\n * <FormFieldset>\n *   <FormFieldLegend>Geboortedatum</FormFieldLegend>\n *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>\n *   <DateInputGroup\n *     id=\"geboortedatum\"\n *     value={value}\n *     onChange={setValue}\n *   />\n * </FormFieldset>\n *\n * // Invalid state\n * <DateInputGroup invalid value={value} onChange={setValue} />\n * ```\n */\nexport const DateInputGroup = React.forwardRef<\n  HTMLDivElement,\n  DateInputGroupProps\n>(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {\n  const classes = classNames('dsn-date-input-group', className);\n\n  const handleChange =\n    (field: keyof DateInputGroupValue) =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.({\n        day: value?.day ?? '',\n        month: value?.month ?? '',\n        year: value?.year ?? '',\n        [field]: e.target.value,\n      });\n    };\n\n  const dayId = id ? `${id}-dag` : undefined;\n  const monthId = id ? `${id}-maand` : undefined;\n  const yearId = id ? `${id}-jaar` : undefined;\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={dayId}>\n          Dag\n        </label>\n        <NumberInput\n          id={dayId}\n          width=\"xs\"\n          value={value?.day ?? ''}\n          onChange={handleChange('day')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"DD\"\n          min={1}\n          max={31}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={monthId}>\n          Maand\n        </label>\n        <NumberInput\n          id={monthId}\n          width=\"xs\"\n          value={value?.month ?? ''}\n          onChange={handleChange('month')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"MM\"\n          min={1}\n          max={12}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={yearId}>\n          Jaar\n        </label>\n        <NumberInput\n          id={yearId}\n          width=\"sm\"\n          value={value?.year ?? ''}\n          onChange={handleChange('year')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"JJJJ\"\n          min={1}\n          max={9999}\n        />\n      </div>\n    </div>\n  );\n});\n\nDateInputGroup.displayName = 'DateInputGroup';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './Select.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Whether the select is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the select\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Select component\n * Dropdown select with a custom chevron-down icon at inline-end.\n * The native select arrow is hidden; the custom icon is decorative and non-interactive.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Select>\n *   <option value=\"\">Kies een optie</option>\n *   <option value=\"1\">Optie 1</option>\n *   <option value=\"2\">Optie 2</option>\n * </Select>\n *\n * // With label\n * <FormField label=\"Land\" htmlFor=\"land\">\n *   <Select id=\"land\">\n *     <option value=\"\">Kies een land</option>\n *     <option value=\"nl\">Nederland</option>\n *     <option value=\"be\">België</option>\n *   </Select>\n * </FormField>\n *\n * // Width variant\n * <Select width=\"lg\">...</Select>\n *\n * // Invalid state\n * <Select invalid aria-invalid=\"true\" aria-describedby=\"error\">...</Select>\n * ```\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, invalid, width, disabled, children, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-select-wrapper',\n      width && `dsn-select-wrapper--width-${width}`\n    );\n\n    const selectClasses = classNames('dsn-text-input', 'dsn-select', className);\n\n    return (\n      <div className={wrapperClasses}>\n        <select\n          ref={ref}\n          className={selectClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          {...props}\n        >\n          {children}\n        </select>\n        {!disabled && (\n          <Icon name=\"chevron-down\" className=\"dsn-select__icon\" aria-hidden />\n        )}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n","import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextArea.css';\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the textarea is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the textarea\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Area component\n * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your bio\" rows={4} />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"bio\">Biography</FormFieldLabel>\n * <TextArea id=\"bio\" rows={6} />\n *\n * // Disabled\n * <TextArea disabled value=\"Cannot edit\" rows={3} />\n *\n * // Invalid\n * <TextArea invalid aria-invalid=\"true\" aria-describedby=\"error\" rows={4} />\n *\n * // Read-only\n * <TextArea readOnly value=\"View only\" rows={3} />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, invalid, width, rows = 4, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-area',\n      width && `dsn-text-area--width-${width}`,\n      className\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        className={classes}\n        rows={rows}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the checkbox is in an invalid state\n   */\n  invalid?: boolean;\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  indeterminate?: boolean;\n}\n\n/**\n * Checkbox component for boolean selection (without label)\n * Use CheckboxOption component to combine with a label\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ invalid, indeterminate, className, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => inputRef.current!);\n\n    // Set indeterminate property (not available as HTML attribute)\n    React.useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = indeterminate || false;\n      }\n    }, [indeterminate]);\n\n    const inputClasses = classNames(\n      'dsn-checkbox__input',\n      invalid && 'dsn-checkbox__input--invalid',\n      className\n    );\n\n    return (\n      <div className=\"dsn-checkbox\">\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className={inputClasses}\n          aria-invalid={invalid ? 'true' : undefined}\n          {...props}\n        />\n        <span className=\"dsn-checkbox__control\" aria-hidden=\"true\">\n          {indeterminate ? (\n            <Icon name=\"minus\" className=\"dsn-checkbox__icon\" />\n          ) : (\n            <Icon name=\"check\" className=\"dsn-checkbox__icon\" />\n          )}\n        </span>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './CheckboxGroup.css';\n\nexport interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Checkbox options to display in the group\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Checkbox Group component\n * Container for multiple CheckboxOption components\n *\n * Note: This is just a list container. For a complete form field with label,\n * wrap this in a FormFieldset component.\n *\n * @example\n * ```tsx\n * // Basic usage (list only)\n * <CheckboxGroup>\n *   <CheckboxOption label=\"Sport\" value=\"sport\" />\n *   <CheckboxOption label=\"Muziek\" value=\"music\" />\n *   <CheckboxOption label=\"Reizen\" value=\"travel\" />\n * </CheckboxGroup>\n *\n * // Complete form field (with FormFieldset and FormFieldLegend)\n * <FormFieldset>\n *   <FormFieldLegend>Interesses</FormFieldLegend>\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"Sport\" value=\"sport\" />\n *     <CheckboxOption label=\"Muziek\" value=\"music\" />\n *     <CheckboxOption label=\"Reizen\" value=\"travel\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n * ```\n */\nexport const CheckboxGroup = React.forwardRef<\n  HTMLDivElement,\n  CheckboxGroupProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-checkbox-group', className);\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      {children}\n    </div>\n  );\n});\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './OptionLabel.css';\n\nexport interface OptionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Whether the label is for a disabled input\n   */\n  disabled?: boolean;\n}\n\n/**\n * Label component for checkbox and radio button options\n */\nexport const OptionLabel = React.forwardRef<HTMLSpanElement, OptionLabelProps>(\n  ({ disabled, className, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-option-label',\n      disabled && 'dsn-option-label--disabled',\n      className\n    );\n\n    return (\n      <span ref={ref} className={classes} {...props}>\n        {children}\n      </span>\n    );\n  }\n);\n\nOptionLabel.displayName = 'OptionLabel';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Checkbox, CheckboxProps } from '../Checkbox';\nimport { OptionLabel } from '../OptionLabel';\nimport './CheckboxOption.css';\n\nexport interface CheckboxOptionProps extends CheckboxProps {\n  /**\n   * Label text for the checkbox\n   */\n  label: string;\n}\n\n/**\n * Checkbox with label - combines Checkbox and OptionLabel\n */\nexport const CheckboxOption = React.forwardRef<\n  HTMLInputElement,\n  CheckboxOptionProps\n>(({ label, disabled, className, ...checkboxProps }, ref) => {\n  const wrapperClasses = classNames('dsn-checkbox-option', className);\n\n  return (\n    <label className={wrapperClasses}>\n      <Checkbox ref={ref} disabled={disabled} {...checkboxProps} />\n      <OptionLabel disabled={disabled}>{label}</OptionLabel>\n    </label>\n  );\n});\n\nCheckboxOption.displayName = 'CheckboxOption';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Radio.css';\n\nexport interface RadioProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the radio button is in an invalid state\n   */\n  invalid?: boolean;\n}\n\n/**\n * Radio button component for single selection (without label)\n * Use RadioOption component to combine with a label\n */\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  ({ invalid, className, ...props }, ref) => {\n    const inputClasses = classNames(\n      'dsn-radio__input',\n      invalid && 'dsn-radio__input--invalid',\n      className\n    );\n\n    return (\n      <div className=\"dsn-radio\">\n        <input\n          ref={ref}\n          type=\"radio\"\n          className={inputClasses}\n          aria-invalid={invalid ? 'true' : undefined}\n          {...props}\n        />\n        <span className=\"dsn-radio__control\" aria-hidden=\"true\">\n          <span className=\"dsn-radio__inner-circle\"></span>\n        </span>\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './RadioGroup.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Radio options to display in the group\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Radio Group component\n * Container for multiple RadioOption components\n *\n * Note: This is just a list container. For a complete form field with label,\n * wrap this in a FormFieldset component.\n *\n * @example\n * ```tsx\n * // Basic usage (list only)\n * <RadioGroup>\n *   <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *   <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *   <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n * </RadioGroup>\n *\n * // Complete form field (with FormFieldset and FormFieldLegend)\n * <FormFieldset>\n *   <FormFieldLegend>Geslacht</FormFieldLegend>\n *   <RadioGroup>\n *     <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *     <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *     <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n *   </RadioGroup>\n * </FormFieldset>\n * ```\n */\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-radio-group', className);\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Radio, RadioProps } from '../Radio';\nimport { OptionLabel } from '../OptionLabel';\nimport './RadioOption.css';\n\nexport interface RadioOptionProps extends RadioProps {\n  /**\n   * Label text for the radio button\n   */\n  label: string;\n}\n\n/**\n * Radio button with label - combines Radio and OptionLabel\n */\nexport const RadioOption = React.forwardRef<HTMLInputElement, RadioOptionProps>(\n  ({ label, disabled, className, ...radioProps }, ref) => {\n    const wrapperClasses = classNames('dsn-radio-option', className);\n\n    return (\n      <label className={wrapperClasses}>\n        <Radio ref={ref} disabled={disabled} {...radioProps} />\n        <OptionLabel disabled={disabled}>{label}</OptionLabel>\n      </label>\n    );\n  }\n);\n\nRadioOption.displayName = 'RadioOption';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Backdrop.css';\n\nexport interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Schakelt het blur-filter in of uit.\n   * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.\n   * @default true\n   */\n  blur?: boolean;\n}\n\n/**\n * Backdrop component\n * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult\n * wanneer een modaal UI-element open is (Modal Dialog, Drawer).\n *\n * Altijd aria-hidden=\"true\" — puur decoratief, geen interactieve rol.\n * Conditioneel renderen vanuit de parent.\n *\n * @example\n * ```tsx\n * {isOpen && <Backdrop />}\n * {isOpen && <Backdrop blur={false} />}\n * ```\n */\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n  ({ className, blur = true, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames(\n          'dsn-backdrop',\n          !blur && 'dsn-backdrop--no-blur',\n          className\n        )}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  }\n);\n\nBackdrop.displayName = 'Backdrop';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './DotBadge.css';\n\nexport type DotBadgeVariant =\n  | 'negative'\n  | 'positive'\n  | 'warning'\n  | 'info'\n  | 'neutral';\n\nexport interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Signaalkleur van de stip\n   * @default 'negative'\n   */\n  variant?: DotBadgeVariant;\n\n  /**\n   * Voegt een pulserend ring-effect toe om extra aandacht te trekken.\n   * De pulse loopt 3 keer (4500ms) en stopt dan vanzelf, zodat de beweging\n   * binnen de 5 seconden van WCAG 2.2.2 blijft. De dot zelf blijft staan.\n   * @default false\n   */\n  pulse?: boolean;\n}\n\n/**\n * DotBadge component\n * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om\n * zonder label of getal de aandacht te trekken bij een statuswijziging.\n *\n * Altijd aria-hidden=\"true\" — context via dsn-visually-hidden in de parent.\n * Parent-wrapper heeft position: relative nodig.\n *\n * @example\n * ```tsx\n * // Basis gebruik — negatieve dot bij een icon-only Button\n * <div style={{ position: 'relative', display: 'inline-flex' }}>\n *   <Button variant=\"subtle\" iconOnly iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *     Inbox\n *     <span className=\"dsn-visually-hidden\">, 3 ongelezen berichten</span>\n *   </Button>\n *   <DotBadge variant=\"negative\" />\n * </div>\n *\n * // Met pulse-effect voor urgente statuswijzigingen\n * <DotBadge variant=\"negative\" pulse />\n * ```\n */\nexport const DotBadge = React.forwardRef<HTMLSpanElement, DotBadgeProps>(\n  ({ className, variant = 'negative', pulse = false, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-dot-badge',\n      `dsn-dot-badge--${variant}`,\n      pulse && 'dsn-dot-badge--pulse',\n      className\n    );\n\n    return <span ref={ref} className={classes} aria-hidden=\"true\" {...props} />;\n  }\n);\n\nDotBadge.displayName = 'DotBadge';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Spinner.css';\n\nexport type SpinnerSize = 'default' | 'large';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Tekstlabel dat de laadtoestand beschrijft voor alle gebruikers.\n   * Altijd vereist — ook bij hideLabel wordt het label doorgegeven aan screenreaders.\n   */\n  label: string;\n\n  /**\n   * Verbergt het label visueel maar behoudt het voor screenreaders via dsn-visually-hidden\n   * @default false\n   */\n  hideLabel?: boolean;\n\n  /**\n   * Grootte van de spinner.\n   * default: 24×24px, label rechts.\n   * large: 48×48px, label gecentreerd onder de spinner.\n   * @default 'default'\n   */\n  size?: SpinnerSize;\n}\n\n/**\n * Spinner component\n * Cirkelvormige laadindicator voor onbepaalde wachttijden.\n *\n * role=\"status\" op de container kondigt de laadtoestand aan bij screenreaders.\n * Het label is altijd aanwezig — visueel verbergen via hideLabel behoudt toegankelijkheid.\n *\n * @example\n * ```tsx\n * // Standaard met zichtbaar label\n * <Spinner label=\"Laden...\" />\n *\n * // Grote variant met label onder de spinner\n * <Spinner size=\"large\" label=\"Pagina wordt geladen\" />\n *\n * // Enkel visueel verborgen label (toegankelijk voor screenreaders)\n * <Spinner label=\"Laden...\" hideLabel />\n * ```\n */\nexport const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  (\n    { className, label, hideLabel = false, size = 'default', ...props },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-spinner',\n      size === 'large' && 'dsn-spinner--large',\n      className\n    );\n\n    const labelClasses = classNames(\n      'dsn-spinner__label',\n      hideLabel && 'dsn-visually-hidden'\n    );\n\n    return (\n      <div ref={ref} className={classes} role=\"status\" {...props}>\n        <svg\n          className=\"dsn-spinner__circle\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle className=\"dsn-spinner__track\" cx=\"12\" cy=\"12\" r=\"10\" />\n          <circle className=\"dsn-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n        </svg>\n        <span className={labelClasses}>{label}</span>\n      </div>\n    );\n  }\n);\n\nSpinner.displayName = 'Spinner';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ProgressBar.css';\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.\n   * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.\n   */\n  label: string;\n\n  /**\n   * Huidige voortgang (0 t/m max).\n   */\n  value: number;\n\n  /**\n   * Maximale waarde. Percentage wordt berekend als Math.round((value / max) * 100).\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * Optionele beschrijvende tekst onder de balk.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * ID voor het `<progress>`-element en de bijbehorende `<label>`.\n   * Automatisch gegenereerd via useId() indien weggelaten.\n   */\n  id?: string;\n\n  /**\n   * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik\n   * in combinatie met aria-hidden=\"true\" op de component.\n   */\n  hideValue?: boolean;\n}\n\n/**\n * ProgressBar component\n * Horizontale voortgangsbalk voor bepaalde wachttijden.\n *\n * Het native <progress>-element biedt impliciete role=\"progressbar\" met\n * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen\n * <label> koppelt de toegankelijke naam via for/id.\n *\n * @example\n * ```tsx\n * // Basis\n * <ProgressBar label=\"Bestand uploaden\" value={35} />\n *\n * // Met beschrijving\n * <ProgressBar\n *   label=\"Bestand uploaden\"\n *   value={35}\n *   description=\"Bestand wordt geüpload, even geduld...\"\n * />\n *\n * // Stappen (stap 3 van 7)\n * <ProgressBar label=\"Stap voortgang\" value={3} max={7} />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      max = 100,\n      description,\n      hideValue,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const progressId = id ?? generatedId;\n    const descriptionId = description ? `${progressId}-description` : undefined;\n    const percentage = Math.round((value / max) * 100);\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-progress-bar', className)}\n        {...props}\n      >\n        <label className=\"dsn-visually-hidden\" htmlFor={progressId}>\n          {label}\n        </label>\n        {!hideValue && (\n          <div className=\"dsn-progress-bar__header\">\n            <p\n              className=\"dsn-paragraph dsn-progress-bar__percentage\"\n              aria-hidden=\"true\"\n            >\n              {percentage}%\n            </p>\n          </div>\n        )}\n        <progress\n          id={progressId}\n          className=\"dsn-progress-bar__bar\"\n          value={value}\n          max={max}\n          aria-describedby={descriptionId}\n        >\n          {percentage}%\n        </progress>\n        {description && (\n          <p\n            id={descriptionId}\n            className=\"dsn-paragraph dsn-progress-bar__description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './NumberBadge.css';\n\nexport type NumberBadgeVariant =\n  | 'negative'\n  | 'positive'\n  | 'warning'\n  | 'info'\n  | 'neutral';\n\nexport interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Signaalkleur van de badge\n   * @default 'negative'\n   */\n  variant?: NumberBadgeVariant;\n\n  /**\n   * Als `children` als getal groter is dan `maxCount`, wordt `{maxCount}+` getoond.\n   * Heeft geen effect als `children` geen getal is.\n   */\n  maxCount?: number;\n}\n\n/**\n * NumberBadge component\n * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten\n * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.\n *\n * Altijd aria-hidden=\"true\" — context via dsn-visually-hidden in de parent.\n *\n * @example\n * ```tsx\n * // Basis gebruik — inline in een Button\n * <Button variant=\"subtle\" iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *   Inbox\n *   <NumberBadge variant=\"negative\">5</NumberBadge>\n * </Button>\n *\n * // Afgekapt getal — toont \"99+\" als count > 99\n * <Button variant=\"subtle\" iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *   <span>\n *     Inbox\n *     <span className=\"dsn-visually-hidden\">, 128 ongelezen berichten</span>\n *   </span>\n *   <NumberBadge variant=\"negative\" maxCount={99}>128</NumberBadge>\n * </Button>\n * ```\n */\nexport const NumberBadge = React.forwardRef<HTMLSpanElement, NumberBadgeProps>(\n  ({ className, variant = 'negative', maxCount, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-number-badge',\n      `dsn-number-badge--${variant}`,\n      className\n    );\n\n    let displayValue: React.ReactNode = children;\n    if (maxCount !== undefined) {\n      const numeric =\n        typeof children === 'number'\n          ? children\n          : typeof children === 'string' && /^\\d+$/.test(children)\n            ? parseInt(children, 10)\n            : null;\n      if (numeric !== null && numeric > maxCount) {\n        displayValue = `${maxCount}+`;\n      }\n    }\n\n    return (\n      <span ref={ref} className={classes} aria-hidden=\"true\" {...props}>\n        {displayValue}\n      </span>\n    );\n  }\n);\n\nNumberBadge.displayName = 'NumberBadge';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './StatusBadge.css';\n\nexport type StatusBadgeVariant =\n  | 'neutral'\n  | 'positive'\n  | 'negative'\n  | 'warning'\n  | 'info';\n\nexport interface StatusBadgeProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Semantische variant die de signaalkleur bepaalt\n   * @default 'neutral'\n   */\n  variant?: StatusBadgeVariant;\n\n  /**\n   * Optioneel decoratief icoon vóór de badge-tekst (altijd aria-hidden)\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Badge-tekst (verplicht)\n   */\n  children: React.ReactNode;\n}\n\n/**\n * StatusBadge component\n * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.\n *\n * @example\n * ```tsx\n * // Neutral (default), zonder icoon\n * <StatusBadge>Actief</StatusBadge>\n *\n * // Positive met icoon\n * <StatusBadge variant=\"positive\" iconStart={<Icon name=\"circle-check\" size=\"sm\" aria-hidden />}>\n *   Goedgekeurd\n * </StatusBadge>\n *\n * // Negative met icoon\n * <StatusBadge variant=\"negative\" iconStart={<Icon name=\"exclamation-circle\" size=\"sm\" aria-hidden />}>\n *   Afgewezen\n * </StatusBadge>\n *\n * // Info met icoon\n * <StatusBadge variant=\"info\" iconStart={<Icon name=\"info-circle\" size=\"sm\" aria-hidden />}>\n *   Nieuw\n * </StatusBadge>\n *\n * // Warning met icoon\n * <StatusBadge variant=\"warning\" iconStart={<Icon name=\"alert-triangle\" size=\"sm\" aria-hidden />}>\n *   Let op\n * </StatusBadge>\n * ```\n */\nexport const StatusBadge = React.forwardRef<HTMLElement, StatusBadgeProps>(\n  ({ className, variant = 'neutral', iconStart, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-status-badge',\n      variant !== 'neutral' && `dsn-status-badge--${variant}`,\n      className\n    );\n\n    return (\n      <strong ref={ref} className={classes} {...props}>\n        {iconStart}\n        {children}\n      </strong>\n    );\n  }\n);\n\nStatusBadge.displayName = 'StatusBadge';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Heading } from '../Heading';\nimport './Alert.css';\n\nexport type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';\n\nconst PREFERRED_ICONS: Record<AlertVariant, string> = {\n  info: 'info-circle',\n  positive: 'circle-check',\n  negative: 'exclamation-circle',\n  warning: 'alert-triangle',\n};\n\nconst VARIANT_LABELS: Record<AlertVariant, string> = {\n  info: 'Informatie: ',\n  positive: 'Succes: ',\n  negative: 'Foutmelding: ',\n  warning: 'Let op: ',\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Semantische variant die de signaalkleur bepaalt\n   * @default 'info'\n   */\n  variant?: AlertVariant;\n\n  /**\n   * Koptekst van het bericht (verplicht)\n   */\n  heading: string;\n\n  /**\n   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)\n   * @default 2\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Icoon vóór de heading.\n   * - `undefined` (default) — aanbevolen icoon per variant\n   * - `null` — geen icoon\n   * - `ReactNode` — aangepast icoon\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Visueel verborgen tekst vóór de heading die de variant benoemt voor\n   * screenreadergebruikers (inclusief scheidingsteken en spatie).\n   * - `undefined` (default) — standaardtekst per variant:\n   *   `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`\n   * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)\n   * - `string` — eigen tekst, bijv. voor een andere taal\n   */\n  variantLabel?: string;\n\n  /**\n   * Optionele body content (tekst, lijst, links, etc.)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Alert component\n * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.\n *\n * @example\n * ```tsx\n * // Info (default)\n * <Alert heading=\"Uw aanvraag wordt verwerkt\">\n *   Dit kan enkele minuten duren.\n * </Alert>\n *\n * // Positive\n * <Alert variant=\"positive\" heading=\"Gelukt\">\n *   Uw gegevens zijn opgeslagen.\n * </Alert>\n *\n * // Negative\n * <Alert variant=\"negative\" heading=\"Er is een fout opgetreden\">\n *   Controleer uw gegevens en probeer het opnieuw.\n * </Alert>\n *\n * // Warning\n * <Alert variant=\"warning\" heading=\"Let op\">\n *   Uw sessie verloopt over 5 minuten.\n * </Alert>\n *\n * // Zonder icoon\n * <Alert variant=\"info\" heading=\"Opmerking\" iconStart={null}>\n *   Aanvullende informatie.\n * </Alert>\n *\n * // Met aangepast icoon\n * <Alert variant=\"info\" heading=\"Tip\" iconStart={<Icon name=\"star\" aria-hidden />}>\n *   Gebruik de zoekfunctie om snel te navigeren.\n * </Alert>\n *\n * // Variant-label onderdrukken (heading benoemt de variant al)\n * <Alert variant=\"negative\" heading=\"Foutmelding\" variantLabel=\"\">\n *   Controleer uw gegevens.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = 'info',\n      heading,\n      headingLevel = 2,\n      iconStart,\n      variantLabel,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const noIcon = iconStart === null;\n    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];\n\n    const resolvedIcon =\n      iconStart === undefined ? (\n        <Icon\n          name={PREFERRED_ICONS[variant] as Parameters<typeof Icon>[0]['name']}\n          size=\"xl\"\n          aria-hidden\n        />\n      ) : (\n        iconStart\n      );\n\n    const classes = classNames(\n      'dsn-alert',\n      variant !== 'info' && `dsn-alert--${variant}`,\n      noIcon && 'dsn-alert--no-icon',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes} role=\"alert\" {...props}>\n        {!noIcon && (\n          <span className=\"dsn-alert__icon\" aria-hidden>\n            {resolvedIcon}\n          </span>\n        )}\n        <Heading\n          level={headingLevel}\n          appearance=\"heading-3\"\n          className=\"dsn-alert__heading\"\n        >\n          {resolvedVariantLabel && (\n            <span className=\"dsn-visually-hidden\">{resolvedVariantLabel}</span>\n          )}\n          {heading}\n        </Heading>\n        {children && <div className=\"dsn-alert__content\">{children}</div>}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Heading } from '../Heading';\nimport './Note.css';\n\nexport type NoteVariant =\n  | 'neutral'\n  | 'info'\n  | 'positive'\n  | 'negative'\n  | 'warning';\nexport type NoteAs = 'div' | 'aside' | 'nav' | 'section';\n\nconst PREFERRED_ICONS: Record<NoteVariant, string> = {\n  neutral: 'info-circle',\n  info: 'info-circle',\n  positive: 'circle-check',\n  negative: 'exclamation-circle',\n  warning: 'alert-triangle',\n};\n\nconst VARIANT_LABELS: Record<NoteVariant, string> = {\n  neutral: '',\n  info: 'Informatie: ',\n  positive: 'Succes: ',\n  negative: 'Foutmelding: ',\n  warning: 'Let op: ',\n};\n\nexport interface NoteProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'div'\n   */\n  as?: NoteAs;\n\n  /**\n   * Semantische variant die de signaalkleur bepaalt\n   * @default 'neutral'\n   */\n  variant?: NoteVariant;\n\n  /**\n   * Optionele heading-tekst (renders als `<Heading appearance=\"heading-3\">`)\n   */\n  heading?: string;\n\n  /**\n   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)\n   * @default 3\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Icoon vóór de heading.\n   * - `undefined` (default) — aanbevolen icoon per variant\n   * - `null` — geen icoon\n   * - `ReactNode` — aangepast icoon\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers\n   * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de\n   * content als er geen heading is.\n   * - `undefined` (default) — standaardtekst per variant:\n   *   `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`\n   * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)\n   * - `string` — eigen tekst, bijv. voor een andere taal\n   */\n  variantLabel?: string;\n\n  /**\n   * Body-content: tekst, lijst, links, etc.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Note component\n * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.\n * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.\n *\n * @example\n * ```tsx\n * // Neutral (default), inline tip\n * <Note heading=\"Let op\">\n *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>\n * </Note>\n *\n * // Info variant\n * <Note variant=\"info\" heading=\"Wist je dat...\">\n *   <Paragraph>Extra context.</Paragraph>\n * </Note>\n *\n * // Zonder heading — icoon overspant beide rijen\n * <Note variant=\"warning\">\n *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>\n * </Note>\n *\n * // as=\"aside\" — echt aanvullende content\n * <Note as=\"aside\" variant=\"info\" heading=\"Achtergrondinformatie\">\n *   <Paragraph>Meer context.</Paragraph>\n * </Note>\n *\n * // as=\"nav\" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)\n * <Note as=\"nav\" variant=\"neutral\" heading=\"Gerelateerde pagina's\" headingLevel={2}>\n *   <UnorderedList>\n *     <li><Link href=\"/gerelateerd-1\">Gerelateerde pagina 1</Link></li>\n *   </UnorderedList>\n * </Note>\n *\n * // Icoon weglaten\n * <Note variant=\"info\" heading=\"Opmerking\" iconStart={null}>\n *   <Paragraph>Zonder icoon.</Paragraph>\n * </Note>\n *\n * // Variant-label onderdrukken (heading benoemt de variant al)\n * <Note variant=\"warning\" heading=\"Waarschuwing\" variantLabel=\"\">\n *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>\n * </Note>\n * ```\n */\nexport const Note = React.forwardRef<HTMLElement, NoteProps>(\n  (\n    {\n      as: As = 'div',\n      className,\n      variant = 'neutral',\n      heading,\n      headingLevel = 3,\n      iconStart,\n      variantLabel,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const headingId = useId();\n    const noIcon = iconStart === null;\n    const noHeading = !heading;\n    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];\n\n    const resolvedIcon =\n      iconStart === undefined ? (\n        <Icon\n          name={PREFERRED_ICONS[variant] as Parameters<typeof Icon>[0]['name']}\n          size=\"xl\"\n          aria-hidden\n        />\n      ) : (\n        iconStart\n      );\n\n    const classes = classNames(\n      'dsn-note',\n      variant !== 'neutral' && `dsn-note--${variant}`,\n      noHeading && 'dsn-note--no-heading',\n      className\n    );\n\n    // For landmark elements with a heading, add aria-labelledby automatically\n    const isLandmark = As === 'nav' || As === 'aside' || As === 'section';\n    const labelledBy =\n      isLandmark && heading && !props['aria-label'] && !props['aria-labelledby']\n        ? headingId\n        : undefined;\n\n    return (\n      <As\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={classes}\n        aria-labelledby={labelledBy}\n        {...props}\n      >\n        {!noIcon && (\n          <span className=\"dsn-note__icon\" aria-hidden>\n            {resolvedIcon}\n          </span>\n        )}\n        {heading && (\n          <Heading\n            level={headingLevel}\n            appearance=\"heading-3\"\n            className=\"dsn-note__heading\"\n            id={isLandmark ? headingId : undefined}\n          >\n            {resolvedVariantLabel && (\n              <span className=\"dsn-visually-hidden\">\n                {resolvedVariantLabel}\n              </span>\n            )}\n            {heading}\n          </Heading>\n        )}\n        {noHeading && resolvedVariantLabel && (\n          <span className=\"dsn-visually-hidden\">{resolvedVariantLabel}</span>\n        )}\n        {children && <div className=\"dsn-note__content\">{children}</div>}\n      </As>\n    );\n  }\n);\n\nNote.displayName = 'Note';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Table.css';\n\nexport type TableProps = React.HTMLAttributes<HTMLTableElement> & {\n  /**\n   * Zichtbaar bijschrift boven de tabel.\n   * Dient ook als toegankelijke naam van de tabel voor schermlezers.\n   */\n  caption: string;\n  /**\n   * Optionele ID voor de caption.\n   * Standaard auto-gegenereerd via `useId()`.\n   * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.\n   */\n  captionId?: string;\n  /**\n   * Wikkelt de tabel in een scroll-container (`role=\"region\"`, `tabIndex={0}`, `aria-labelledby`).\n   * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.\n   */\n  scrollable?: boolean;\n};\n\n/**\n * Tabel component voor het weergeven van tweedimensionale tabeldata.\n *\n * Gebruik altijd `<th scope=\"col\">` voor kolomkoppen en `<th scope=\"row\">` voor rijkoppen.\n * Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.\n *\n * @example\n * <Table caption=\"Productoverzicht\">\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Product</th>\n *       <th scope=\"col\">Prijs</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">Laptop</th>\n *       <td>€999</td>\n *     </tr>\n *   </tbody>\n * </Table>\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      caption,\n      captionId: captionIdProp,\n      scrollable = false,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const autoId = useId();\n    const captionId = captionIdProp ?? `dsn-table-caption-${autoId}`;\n\n    const table = (\n      <table\n        ref={ref}\n        className={classNames('dsn-table', className)}\n        {...props}\n      >\n        <caption id={captionId} className=\"dsn-table__caption\">\n          {caption}\n        </caption>\n        {children}\n      </table>\n    );\n\n    if (scrollable) {\n      return (\n        <div\n          className=\"dsn-table-wrapper\"\n          role=\"region\"\n          aria-labelledby={captionId}\n          tabIndex={0}\n        >\n          {table}\n        </div>\n      );\n    }\n\n    return table;\n  }\n);\n\nTable.displayName = 'Table';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Details.css';\n\nexport interface DetailsProps extends Omit<\n  React.HTMLAttributes<HTMLDetailsElement>,\n  'onToggle'\n> {\n  /**\n   * Zichtbare labeltekst in de `<summary>`\n   */\n  summary: string;\n\n  /**\n   * Standaard open bij eerste render (ongecontroleerde staat)\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt\n   */\n  onToggle?: (open: boolean) => void;\n\n  /**\n   * De verborgen inhoud\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Details component\n * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.\n * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.\n *\n * @example\n * ```tsx\n * // Standaard gesloten\n * <Details summary=\"Meer informatie\">\n *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>\n * </Details>\n *\n * // Standaard open\n * <Details summary=\"Meer informatie\" defaultOpen>\n *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>\n * </Details>\n *\n * // Met toggle callback\n * <Details summary=\"Meer informatie\" onToggle={(open) => console.log('open:', open)}>\n *   <Paragraph>Inhoud.</Paragraph>\n * </Details>\n * ```\n */\nexport const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(\n  (\n    { className, summary, defaultOpen = false, onToggle, children, ...props },\n    ref\n  ) => {\n    const classes = classNames('dsn-details', className);\n\n    const handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>) => {\n      onToggle?.((event.currentTarget as HTMLDetailsElement).open);\n    };\n\n    return (\n      <details\n        ref={ref}\n        className={classes}\n        open={defaultOpen || undefined}\n        onToggle={handleToggle}\n        {...props}\n      >\n        <summary className=\"dsn-details__summary\">\n          <Icon name=\"chevron-down\" className=\"dsn-details__icon\" aria-hidden />\n          <span className=\"dsn-details__summary-label\">{summary}</span>\n        </summary>\n        <div className=\"dsn-details__content\">{children}</div>\n      </details>\n    );\n  }\n);\n\nDetails.displayName = 'Details';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './SummaryList.css';\n\n// =============================================================================\n// SummaryList\n// =============================================================================\n\nexport interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement> {\n  /**\n   * Removes the row separator borders\n   * @default false\n   */\n  noBorder?: boolean;\n\n  /**\n   * `SummaryListRow` elements\n   */\n  children?: React.ReactNode;\n}\n\nexport const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(\n  ({ className, noBorder = false, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-summary-list',\n      noBorder && 'dsn-summary-list--no-border',\n      className\n    );\n\n    return (\n      <dl ref={ref} className={classes} {...props}>\n        {children}\n      </dl>\n    );\n  }\n);\n\nSummaryList.displayName = 'SummaryList';\n\n// =============================================================================\n// SummaryListRow\n// =============================================================================\n\nexport interface SummaryListRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Marks a row without an actions cell; ensures consistent column alignment\n   * in mixed lists where some rows have actions and others do not.\n   * @default false\n   */\n  noActions?: boolean;\n\n  /**\n   * `SummaryListKey`, `SummaryListValue`, and optionally `SummaryListActions`\n   */\n  children?: React.ReactNode;\n}\n\nexport const SummaryListRow = React.forwardRef<\n  HTMLDivElement,\n  SummaryListRowProps\n>(({ className, noActions = false, children, ...props }, ref) => {\n  const classes = classNames(\n    'dsn-summary-list__row',\n    noActions && 'dsn-summary-list__row--no-actions',\n    className\n  );\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      {children}\n    </div>\n  );\n});\n\nSummaryListRow.displayName = 'SummaryListRow';\n\n// =============================================================================\n// SummaryListKey\n// =============================================================================\n\nexport interface SummaryListKeyProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Label text or content\n   */\n  children?: React.ReactNode;\n}\n\nexport const SummaryListKey = React.forwardRef<\n  HTMLElement,\n  SummaryListKeyProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-summary-list__key', className);\n\n  return (\n    <dt ref={ref} className={classes} {...props}>\n      {children}\n    </dt>\n  );\n});\n\nSummaryListKey.displayName = 'SummaryListKey';\n\n// =============================================================================\n// SummaryListValue\n// =============================================================================\n\nexport interface SummaryListValueProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Value content; may contain text, a `Link`, or other inline elements\n   */\n  children?: React.ReactNode;\n}\n\nexport const SummaryListValue = React.forwardRef<\n  HTMLElement,\n  SummaryListValueProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-summary-list__value', className);\n\n  return (\n    <dd ref={ref} className={classes} {...props}>\n      {children}\n    </dd>\n  );\n});\n\nSummaryListValue.displayName = 'SummaryListValue';\n\n// =============================================================================\n// SummaryListActions\n// =============================================================================\n\nexport interface SummaryListActionsProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * One or more `Link` or `LinkButton` components\n   */\n  children?: React.ReactNode;\n}\n\nexport const SummaryListActions = React.forwardRef<\n  HTMLElement,\n  SummaryListActionsProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-summary-list__actions', className);\n\n  const isMultiple = React.Children.count(children) > 1;\n\n  return (\n    <dd ref={ref} className={classes} {...props}>\n      {isMultiple ? (\n        <ul className=\"dsn-summary-list__actions-list\">\n          {React.Children.map(children, (child) => (\n            <li className=\"dsn-summary-list__actions-list-item\">{child}</li>\n          ))}\n        </ul>\n      ) : (\n        children\n      )}\n    </dd>\n  );\n});\n\nSummaryListActions.displayName = 'SummaryListActions';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Logo.css';\n\nexport interface LogoProps extends React.SVGProps<SVGSVGElement> {\n  /**\n   * Accessible naam via <title> in de SVG.\n   * Niet gerenderd wanneer aria-hidden={true}.\n   * @default 'Starter Kit'\n   */\n  title?: string;\n}\n\n/**\n * Logo component\n * Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.\n *\n * De twee kleurlagen zijn gekoppeld aan tokens:\n * - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)\n * - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)\n *\n * @example\n * // Standalone — screenreader leest de title\n * <Logo />\n *\n * // Decoratief — in een link, omringende context levert de accessible name\n * <a href=\"/\">\n *   <Logo aria-hidden={true} />\n *   <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n * </a>\n *\n * // Custom title (bijv. na white-label herbranding)\n * <Logo title=\"Mijn Organisatie\" />\n */\nexport const Logo = React.forwardRef<SVGSVGElement, LogoProps>(\n  (\n    { className, title = 'Starter Kit', 'aria-hidden': ariaHidden, ...props },\n    ref\n  ) => {\n    const titleId = useId();\n    const isDecorative = ariaHidden === true || ariaHidden === 'true';\n\n    return (\n      <svg\n        ref={ref}\n        className={classNames('dsn-logo', className)}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"186\"\n        height=\"48\"\n        viewBox=\"0 0 186 48\"\n        fill=\"none\"\n        role={isDecorative ? undefined : 'img'}\n        aria-labelledby={isDecorative ? undefined : titleId}\n        aria-hidden={isDecorative ? true : undefined}\n        {...props}\n      >\n        {!isDecorative && <title id={titleId}>{title}</title>}\n        {/* Achtergrondrechthoek (primaire kleur) */}\n        <path className=\"dsn-logo__primary\" d=\"M0 0h185.491v48H0z\" />\n        {/* Binnenste label (documentachtergrondkleur) */}\n        <path className=\"dsn-logo__label\" d=\"M8 8h169.491v32H8z\" />\n        {/* Letterpaden (primaire kleur) */}\n        <path\n          className=\"dsn-logo__primary\"\n          d=\"M164.624 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.734q.422 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.178.178-.6.178h-3.267V31.2q0 .423-.2.622-.178.178-.6.178M144.059 32q-.423 0-.622-.178-.178-.2-.178-.622v-2.644q0-.423.178-.6.2-.2.622-.2h2.2v-7.467h-2.2q-.423 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h9.466q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178h-2.155v7.467h2.155q.423 0 .6.2.2.177.2.6V31.2q0 .423-.2.622-.177.178-.6.178zM131.279 32h-3.445q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h3.445q.421 0 .6.2.2.178.2.6v5.111h.889l2.288-5.178q.156-.399.423-.555.266-.178.689-.178h3.422q.378 0 .511.2.133.178-.022.533l-2.267 5.178q1.245.066 1.978.889.755.8.755 2.133V31.2q0 .423-.2.622-.177.178-.6.178h-3.422q-.422 0-.622-.178-.178-.2-.178-.622v-4.333q0-.356-.178-.556-.177-.2-.533-.2h-2.933V31.2q0 .423-.2.622-.179.178-.6.178M110.551 20v2.844h1.666q.578 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.423q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.267.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178h-3.445q-.422 0-.622-.178-.178-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M102.099 32h-10.31q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2H102.1q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178h-6.133v1.711h4.333q.423 0 .6.2.2.178.2.6v2.378q0 .422-.2.622-.177.178-.6.178h-4.333V27.8h6.133q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178M83.96 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.733q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178H84.76V31.2q0 .423-.2.622-.178.178-.6.178M65.585 20v2.844h1.666q.579 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.422q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.266.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178H70.34q-.422 0-.622-.178-.177-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M50.13 20.667l-1.044 3.377h3.489l-1.045-3.377a.76.76 0 0 0-.2-.29.3.3 0 0 0-.222-.088h-.555q-.134 0-.245.089a1 1 0 0 0-.178.289M48.864 31.2q0 .423-.2.622-.179.178-.6.178h-3.267q-.422 0-.622-.178-.178-.2-.178-.622v-5.867q0-.666.2-1.533.222-.867.667-2.022l1.933-5.045q.133-.378.4-.555.29-.178.733-.178h5.978q.422 0 .69.178.288.177.421.555l1.934 5.045q.443 1.155.644 2.022.222.867.222 1.533V31.2q0 .423-.2.622-.177.178-.6.178h-3.355q-.445 0-.667-.178-.2-.2-.2-.622v-3.111h-3.933zM38.192 32h-3.6q-.422 0-.622-.178-.178-.2-.178-.622V20.289h-3.266q-.423 0-.623-.178-.177-.2-.177-.622V16.8q0-.423.177-.6.2-.2.623-.2h11.733q.421 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.179.178-.6.178h-3.267V31.2q0 .423-.2.622-.177.178-.6.178M23.822 32H16.8q-.423 0-.622-.178-.178-.2-.178-.622v-2.6q0-.423.178-.6.2-.2.622-.2h5.978q.288 0 .422-.178a.74.74 0 0 0 .156-.466q0-.378-.156-.556-.134-.178-.422-.2l-3.334-.467q-1.556-.222-2.51-1.022-.934-.8-.934-2.667v-2.333q0-1.89 1.222-2.889Q18.445 16 20.6 16h6.222q.423 0 .6.2.2.178.2.6v2.644q0 .423-.2.623-.177.177-.6.177h-5.178a.53.53 0 0 0-.444.2.68.68 0 0 0-.156.467q0 .29.156.489a.6.6 0 0 0 .444.222l3.312.445q1.556.222 2.51 1.022.957.8.956 2.667v2.333q0 1.89-1.244 2.911-1.223 1-3.356 1\"\n        />\n      </svg>\n    );\n  }\n);\n\nLogo.displayName = 'Logo';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './SkipLink.css';\n\nexport interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Het doel-ID waarnaar de gebruiker gesprongen wordt (inclusief `#`).\n   * Het element met dit ID moet `tabindex=\"-1\"` hebben als het niet natively focusbaar is.\n   * @example \"#main-content\"\n   */\n  href: string;\n\n  /**\n   * Tekst van de skip-link — zichtbaar voor screenreaders en bij focus.\n   * @default \"Ga direct naar de hoofdinhoud\"\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Extra CSS klassen\n   */\n  className?: string;\n}\n\n/**\n * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.\n *\n * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.\n * Voldoet aan WCAG 2.2 succescriterium 2.4.1 (Bypass Blocks, Level A).\n *\n * @example\n * ```tsx\n * // Standaard gebruik — eerste element in <body>\n * <SkipLink href=\"#main-content\">Ga direct naar de hoofdinhoud</SkipLink>\n * <header>...</header>\n * <main id=\"main-content\" tabIndex={-1}>...</main>\n * ```\n */\nexport const SkipLink = React.forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  (\n    { href, children = 'Ga direct naar de hoofdinhoud', className, ...props },\n    ref\n  ) => {\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={classNames('dsn-skip-link', className)}\n        {...props}\n      >\n        {children}\n      </a>\n    );\n  }\n);\n\nSkipLink.displayName = 'SkipLink';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { BreadcrumbNavigationItemProps } from './BreadcrumbNavigationItem';\nimport './BreadcrumbNavigation.css';\n\nexport interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Toegankelijke naam van het `<nav>` landmark\n   * @default \"Broodkruimelpad\"\n   */\n  'aria-label'?: string;\n\n  /**\n   * `\"compact\"` activeert container-query responsief gedrag:\n   * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond\n   * @default \"default\"\n   */\n  variant?: 'default' | 'compact';\n\n  /**\n   * `BreadcrumbNavigationItem` elementen\n   */\n  children: React.ReactNode;\n}\n\n/**\n * BreadcrumbNavigation component\n * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.\n * Plaatsen vóór `<main>`, na de primaire navigatie.\n *\n * @example\n * ```tsx\n * // Standaard\n * <BreadcrumbNavigation aria-label=\"Broodkruimelpad\">\n *   <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem href=\"/categorie\">Categorie</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>\n * </BreadcrumbNavigation>\n *\n * // Compact variant\n * <BreadcrumbNavigation aria-label=\"Broodkruimelpad\" variant=\"compact\">\n *   <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem href=\"/categorie\">Categorie</BreadcrumbNavigationItem>\n *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>\n * </BreadcrumbNavigation>\n * ```\n */\nexport const BreadcrumbNavigation = React.forwardRef<\n  HTMLElement,\n  BreadcrumbNavigationProps\n>(\n  (\n    {\n      className,\n      'aria-label': ariaLabel = 'Broodkruimelpad',\n      variant = 'default',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-breadcrumb-navigation',\n      variant === 'compact' && 'dsn-breadcrumb-navigation--compact',\n      className\n    );\n\n    const childArray = React.Children.toArray(children);\n\n    const processedChildren = childArray.map((child, index) => {\n      if (!React.isValidElement(child)) return child;\n\n      const isParentOfCurrent =\n        variant === 'compact' && index === childArray.length - 2;\n\n      if (isParentOfCurrent) {\n        return React.cloneElement(\n          child as React.ReactElement<BreadcrumbNavigationItemProps>,\n          { showBackIcon: true }\n        );\n      }\n\n      return child;\n    });\n\n    return (\n      <nav ref={ref} className={classes} aria-label={ariaLabel} {...props}>\n        <ol className=\"dsn-breadcrumb-navigation__list\">{processedChildren}</ol>\n      </nav>\n    );\n  }\n);\n\nBreadcrumbNavigation.displayName = 'BreadcrumbNavigation';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\n\nexport interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * URL van de pagina. Laat weg bij het huidige pagina-item: dat wordt\n   * als platte tekst gerenderd en niet als link\n   */\n  href?: string;\n\n  /**\n   * Markeert het huidige pagina-item. Rendert de tekst zonder link en\n   * zet `aria-current=\"page\"` op de `<li>`\n   * @default false\n   */\n  current?: boolean;\n\n  /**\n   * Zichtbare link- of paginatekst\n   */\n  children: React.ReactNode;\n\n  /**\n   * @internal — wordt gezet door BreadcrumbNavigation (compact variant)\n   */\n  showBackIcon?: boolean;\n}\n\n/**\n * BreadcrumbNavigationItem component\n * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.\n *\n * Het huidige pagina-item is bewust géén link: een link naar de pagina waar je\n * al bent doet niets, terwijl hij er wel uitziet als de andere items. Zie\n * WCAG 3.2.4 Consistent Identification.\n *\n * @example\n * ```tsx\n * <BreadcrumbNavigationItem href=\"/home\">Home</BreadcrumbNavigationItem>\n * <BreadcrumbNavigationItem current>Categorie</BreadcrumbNavigationItem>\n * ```\n */\nexport const BreadcrumbNavigationItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbNavigationItemProps\n>(\n  (\n    {\n      className,\n      href,\n      current = false,\n      showBackIcon = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const itemClasses = classNames(\n      'dsn-breadcrumb-navigation__item',\n      current && 'dsn-breadcrumb-navigation__item--current',\n      className\n    );\n\n    // Het huidige item krijgt geen link; zonder href valt een item daar ook op terug\n    const renderAsLink = !current && href !== undefined;\n\n    return (\n      <li\n        ref={ref}\n        className={itemClasses}\n        aria-current={current ? 'page' : undefined}\n        {...(renderAsLink\n          ? {}\n          : (props as React.LiHTMLAttributes<HTMLLIElement>))}\n      >\n        {renderAsLink ? (\n          <a href={href} className=\"dsn-breadcrumb-navigation__link\" {...props}>\n            {showBackIcon && (\n              <Icon\n                name=\"arrow-left\"\n                className=\"dsn-breadcrumb-navigation__back-icon\"\n                aria-hidden\n              />\n            )}\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n        <Icon\n          name=\"chevron-right\"\n          className=\"dsn-breadcrumb-navigation__separator\"\n          aria-hidden\n        />\n      </li>\n    );\n  }\n);\n\nBreadcrumbNavigationItem.displayName = 'BreadcrumbNavigationItem';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Menu.css';\n\nexport type MenuOrientation = 'vertical' | 'horizontal';\n\nexport interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {\n  /**\n   * Bepaalt de lay-out van de items.\n   * - `vertical` (standaard): items onder elkaar, volledige breedte\n   * - `horizontal`: items naast elkaar, breedte op inhoud\n   * @default 'vertical'\n   */\n  orientation?: MenuOrientation;\n\n  /**\n   * Geeft aan dat level-1 items een `iconStart` hebben.\n   * Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.\n   * @default false\n   */\n  iconStart?: boolean;\n\n  /**\n   * `MenuLink`- en/of `MenuButton`-items (verplicht)\n   */\n  children: React.ReactNode;\n\n  /**\n   * Aanvullende CSS-klassen voor het `<ul>`-element\n   */\n  className?: string;\n}\n\n/**\n * Menu component\n * Containercomponent voor MenuLink- en MenuButton-items.\n * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.\n *\n * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —\n * dit is de verantwoordelijkheid van de ouder.\n *\n * @example\n * ```tsx\n * // Verticaal (standaard)\n * <nav aria-label=\"Hoofdnavigatie\">\n *   <Menu>\n *     <MenuLink href=\"/home\">Home</MenuLink>\n *     <MenuLink href=\"/over\">Over ons</MenuLink>\n *     <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>\n *   </Menu>\n * </nav>\n *\n * // Horizontaal\n * <nav aria-label=\"Paginanavigatie\">\n *   <Menu orientation=\"horizontal\">\n *     <MenuLink href=\"/home\" current>Home</MenuLink>\n *     <MenuLink href=\"/over\">Over ons</MenuLink>\n *   </Menu>\n * </nav>\n * ```\n */\nexport const Menu = React.forwardRef<HTMLUListElement, MenuProps>(\n  (\n    {\n      orientation = 'vertical',\n      iconStart = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-menu',\n      orientation === 'horizontal' && 'dsn-menu--horizontal',\n      iconStart && 'dsn-menu--icon-start',\n      className\n    );\n\n    return (\n      <ul ref={ref} className={classes} {...props}>\n        {children}\n      </ul>\n    );\n  }\n);\n\nMenu.displayName = 'Menu';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './MenuButton.css';\n\nexport interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Icoon links van het label\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icoon rechts van het label\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).\n   * Verwacht een `<DotBadge>` component.\n   */\n  dotBadge?: React.ReactNode;\n\n  /**\n   * Zichtbare knoptekst\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Aanvullende CSS-klassen voor het `<li>`-element\n   */\n  className?: string;\n}\n\n/**\n * MenuButton component\n * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.\n *\n * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert\n * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).\n *\n * @example\n * ```tsx\n * // Basisgebruik\n * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>\n *\n * // Met icoon start\n * <MenuButton iconStart={<Icon name=\"settings\" aria-hidden />}>\n *   Instellingen\n * </MenuButton>\n *\n * // Met DotBadge (statusindicatie)\n * <MenuButton\n *   iconStart={<Icon name=\"bell\" aria-hidden />}\n *   dotBadge={<DotBadge variant=\"negative\" />}\n * >\n *   Meldingen\n *   <span className=\"dsn-visually-hidden\">, nieuwe meldingen beschikbaar</span>\n * </MenuButton>\n * ```\n */\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(\n  (\n    {\n      iconStart,\n      iconEnd,\n      dotBadge,\n      className,\n      children,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const liClasses = classNames('dsn-menu-button', className);\n\n    return (\n      <li className={liClasses}>\n        <button\n          ref={ref}\n          type={type}\n          className=\"dsn-menu-button__button\"\n          {...props}\n        >\n          {iconStart}\n          <span className=\"dsn-menu-button__label\">\n            {children}\n            {dotBadge}\n          </span>\n          {iconEnd}\n        </button>\n      </li>\n    );\n  }\n);\n\nMenuButton.displayName = 'MenuButton';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './MenuLink.css';\n\nexport type MenuLinkLevel = 1 | 2 | 3 | 4;\n\nexport interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Navigatie-URL van de link\n   */\n  href?: string;\n\n  /**\n   * Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing\n   * @default 1\n   */\n  level?: MenuLinkLevel;\n\n  /**\n   * Markeert de actieve/huidige pagina.\n   * Voegt `aria-current=\"page\"` toe aan het `<a>`-element.\n   * @default false\n   */\n  current?: boolean;\n\n  /**\n   * Icoon links van het label\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * NumberBadge element rechts van het label (naast iconEnd)\n   * Verwacht een `<NumberBadge>` component.\n   */\n  numberBadge?: React.ReactNode;\n\n  /**\n   * Toont een uitklapknop naast de link (voor subnavigatie).\n   * @default false\n   */\n  subItems?: boolean;\n\n  /**\n   * Geeft aan of de subnavigatie momenteel uitgevouwen is.\n   * Alleen relevant wanneer `subItems` true is.\n   * @default false\n   */\n  expanded?: boolean;\n\n  /**\n   * Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.\n   */\n  onExpandToggle?: () => void;\n\n  /**\n   * Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Aanvullende CSS-klassen voor het `<li>`-element\n   */\n  className?: string;\n}\n\n/**\n * MenuLink component\n * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.\n * Semantisch een `<a>`, visueel consistent met MenuButton.\n *\n * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).\n *\n * @example\n * ```tsx\n * // Basisgebruik (level 1)\n * <MenuLink href=\"/dashboard\">Dashboard</MenuLink>\n *\n * // Actieve pagina\n * <MenuLink href=\"/rapporten\" current>Rapporten</MenuLink>\n *\n * // Level 2 (subpagina)\n * <MenuLink href=\"/rapporten/maandelijks\" level={2}>Maandelijks</MenuLink>\n *\n * // Met icoon en NumberBadge\n * <MenuLink\n *   href=\"/inbox\"\n *   iconStart={<Icon name=\"mail\" aria-hidden />}\n *   numberBadge={<NumberBadge variant=\"negative\">5</NumberBadge>}\n * >\n *   Inbox\n * </MenuLink>\n *\n * // Met uitklapknop\n * <MenuLink\n *   href=\"/rapporten\"\n *   subItems\n *   expanded={isExpanded}\n *   onExpandToggle={() => setIsExpanded(!isExpanded)}\n * >\n *   Rapporten\n * </MenuLink>\n * ```\n */\nexport const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>(\n  (\n    {\n      href,\n      level = 1,\n      current = false,\n      iconStart,\n      iconEnd,\n      numberBadge,\n      subItems = false,\n      expanded = false,\n      onExpandToggle,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const liClasses = classNames(\n      'dsn-menu-link',\n      level > 1 && `dsn-menu-link--level-${level}`,\n      className\n    );\n\n    const childrenText = typeof children === 'string' ? children : undefined;\n\n    return (\n      <li className={liClasses}>\n        <a\n          ref={ref}\n          className=\"dsn-menu-link__link\"\n          href={href}\n          aria-current={current ? 'page' : undefined}\n          {...props}\n        >\n          {iconStart}\n          <span className=\"dsn-menu-link__label\">{children}</span>\n          {numberBadge}\n          {iconEnd}\n        </a>\n\n        {subItems && (\n          <span className=\"dsn-menu-link__divider\" aria-hidden=\"true\" />\n        )}\n        {subItems && (\n          <button\n            type=\"button\"\n            className=\"dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button\"\n            aria-expanded={expanded}\n            onClick={onExpandToggle}\n          >\n            <Icon name=\"chevron-down\" aria-hidden />\n            <span className=\"dsn-button__label\">\n              {expanded ? 'Inklappen' : 'Uitklappen'}\n              {childrenText && (\n                <span className=\"dsn-visually-hidden\">\n                  {' '}\n                  voor {childrenText}\n                </span>\n              )}\n            </span>\n          </button>\n        )}\n      </li>\n    );\n  }\n);\n\nMenuLink.displayName = 'MenuLink';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PageBody.css';\n\nexport interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De paginainhoud: doorgaans een `<main>` element met `id=\"main-content\"`.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Extra CSS-klassen\n   */\n  className?: string;\n}\n\n/**\n * PageBody component\n * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare\n * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan\n * de viewport staat (sticky footer patroon via `flex: 1`).\n *\n * @example\n * ```tsx\n * <PageLayout>\n *   <PageHeader logoSlot={<Logo />} />\n *   <PageBody>\n *     <main id=\"main-content\" tabIndex={-1}>\n *       <Container>...</Container>\n *     </main>\n *   </PageBody>\n *   <PageFooter slot1={<Logo />} />\n * </PageLayout>\n * ```\n */\nexport const PageBody = React.forwardRef<HTMLDivElement, PageBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-page-body', className)}\n        {...props}\n      >\n        <div className=\"dsn-page-body__inner\">{children}</div>\n      </div>\n    );\n  }\n);\n\nPageBody.displayName = 'PageBody';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Grid } from '../Grid';\nimport { GridItem } from '../Grid';\nimport './PageFooter.css';\n\nexport type PageFooterColorScheme = 'default' | 'inverse';\n\nexport interface PageFooterProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'children'\n> {\n  /** Kolom 1 (inline-start). Doorgaans het organisatielogo in een `<a>`. */\n  slot1?: React.ReactNode;\n\n  /** Kolom 2. Optioneel — wordt niet gerenderd als weggelaten. */\n  slot2?: React.ReactNode;\n\n  /** Kolom 3. Vrije inhoud: navigatielinks, tekst, adressen, etc. */\n  slot3?: React.ReactNode;\n\n  /** Kolom 4 (inline-end). Vrije inhoud: juridische links, social media, etc. */\n  slot4?: React.ReactNode;\n\n  /**\n   * Kleurschema van de footer.\n   * - `default`: accent-1 achtergrond (`bg-default`)\n   * - `inverse`: accent-1-inverse achtergrond voor een donkere huisstijlvariant\n   * @default 'default'\n   */\n  colorScheme?: PageFooterColorScheme;\n}\n\n/**\n * PageFooter component\n * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en\n * een 4-koloms grid. Responsief: verticale stapeling op mobiel,\n * vier gelijke kolommen op grote viewports (≥ 64em).\n *\n * Het `<footer>` element als directe afstammeling van `<body>` heeft\n * impliciet `role=\"contentinfo\"` — geen extra attribuut nodig.\n *\n * @example\n * ```tsx\n * <PageFooter\n *   slot1={\n *     <a href=\"/\">\n *       <Logo aria-hidden={true} />\n *       <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n *     </a>\n *   }\n *   slot3={\n *     <UnorderedList>\n *       <li><Link href=\"/nieuws\">Nieuws</Link></li>\n *       <li><Link href=\"/over-ons\">Over ons</Link></li>\n *     </UnorderedList>\n *   }\n *   slot4={\n *     <UnorderedList>\n *       <li><Link href=\"/privacy\">Privacyverklaring</Link></li>\n *       <li><Link href=\"/accessibility\">Toegankelijkheid</Link></li>\n *     </UnorderedList>\n *   }\n * />\n * ```\n */\nexport const PageFooter = React.forwardRef<HTMLElement, PageFooterProps>(\n  (\n    {\n      className,\n      slot1,\n      slot2,\n      slot3,\n      slot4,\n      colorScheme = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-page-footer',\n      colorScheme === 'inverse' && 'dsn-page-footer--inverse',\n      className\n    );\n\n    return (\n      <footer ref={ref} className={classes} {...props}>\n        <div className=\"dsn-page-footer__inner\">\n          <Grid>\n            {slot1 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot1}\n              </GridItem>\n            )}\n            {slot2 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot2}\n              </GridItem>\n            )}\n            {slot3 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot3}\n              </GridItem>\n            )}\n            {slot4 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot4}\n              </GridItem>\n            )}\n          </Grid>\n        </div>\n      </footer>\n    );\n  }\n);\n\nPageFooter.displayName = 'PageFooter';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './Drawer.css';\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface DrawerContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst DrawerContext = React.createContext<DrawerContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// Drawer (root)\n// =============================================================================\n\nexport interface DrawerProps extends Omit<\n  React.HTMLAttributes<HTMLDialogElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of het zijpaneel getoond wordt.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer het zijpaneel sluit\n   * (sluitknop, Escape-toets).\n   */\n  onClose?: () => void;\n\n  /**\n   * Modaal of non-modaal gedrag.\n   * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,\n   *   natieve focus-trap, Escape sluit via `cancel`-event.\n   * - `false`: opent via `.show()` — achtergrond blijft interactief,\n   *   Escape sluit via `keydown`-listener.\n   * @default true\n   */\n  modal?: boolean;\n\n  /**\n   * De kant van de viewport vanwaar het zijpaneel inschuift.\n   * @default \"right\"\n   */\n  side?: 'right' | 'left';\n\n  /**\n   * De subcomponenten van het zijpaneel:\n   * `DrawerHeader`, `DrawerBody`, `DrawerFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Drawer component\n * Zijpaneel dat vanuit links of rechts de viewport inschuift.\n *\n * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond\n * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina\n * nodig heeft voor context.\n *\n * @example\n * ```tsx\n * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <DrawerHeader>\n *     <DrawerHeading>Filteropties</DrawerHeading>\n *   </DrawerHeader>\n *   <DrawerBody>\n *     <Paragraph>Inhoud van het zijpaneel</Paragraph>\n *   </DrawerBody>\n *   <DrawerFooter>\n *     <ActionGroup>\n *       <Button variant=\"strong\" onClick={() => setIsOpen(false)}>Toepassen</Button>\n *       <Button variant=\"default\" onClick={() => setIsOpen(false)}>Annuleren</Button>\n *     </ActionGroup>\n *   </DrawerFooter>\n * </Drawer>\n * ```\n */\nexport const Drawer = React.forwardRef<HTMLDialogElement, DrawerProps>(\n  (\n    {\n      className,\n      isOpen,\n      onClose,\n      modal = true,\n      side = 'right',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLDialogElement>(null);\n    const dialogRef =\n      (ref as React.RefObject<HTMLDialogElement>) ?? internalRef;\n    const headingId = React.useId();\n\n    React.useEffect(() => {\n      const dialog = dialogRef.current;\n      if (!dialog) return;\n\n      if (isOpen && !dialog.open) {\n        if (modal) {\n          dialog.showModal();\n        } else {\n          dialog.show();\n        }\n      } else if (!isOpen && dialog.open) {\n        dialog.close();\n      }\n    }, [isOpen, modal, dialogRef]);\n\n    // Non-modaal: handmatige Escape-afhandeling via keydown\n    React.useEffect(() => {\n      if (modal) return;\n      const dialog = dialogRef.current;\n      if (!dialog || !isOpen) return;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          onClose?.();\n        }\n      };\n\n      dialog.addEventListener('keydown', handleKeyDown);\n      return () => dialog.removeEventListener('keydown', handleKeyDown);\n    }, [modal, isOpen, onClose, dialogRef]);\n\n    // Modaal: native cancel-event (Escape via browser)\n    const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      onClose?.();\n    };\n\n    const classes = classNames(\n      'dsn-drawer',\n      side === 'left' ? 'dsn-drawer--side-left' : 'dsn-drawer--side-right',\n      className\n    );\n\n    return (\n      <DrawerContext.Provider value={{ headingId, onClose }}>\n        <dialog\n          ref={dialogRef}\n          className={classes}\n          aria-labelledby={headingId}\n          onCancel={handleCancel}\n          {...props}\n        >\n          {children}\n        </dialog>\n      </DrawerContext.Provider>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\n// =============================================================================\n// DrawerHeader\n// =============================================================================\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `DrawerHeading`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerHeader\n * De headerstrook van het zijpaneel met heading en sluitknop.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    const { onClose } = React.useContext(DrawerContext);\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__header', className)}\n        {...props}\n      >\n        {children}\n        <Button\n          variant=\"subtle\"\n          size=\"small\"\n          iconOnly\n          onClick={onClose}\n          iconStart={<Icon name=\"x\" aria-hidden />}\n        >\n          Sluiten\n        </Button>\n      </div>\n    );\n  }\n);\n\nDrawerHeader.displayName = 'DrawerHeader';\n\n// =============================================================================\n// DrawerHeading\n// =============================================================================\n\nexport interface DrawerHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerHeading\n * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const DrawerHeading = React.forwardRef<\n  HTMLHeadingElement,\n  DrawerHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(DrawerContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-drawer-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nDrawerHeading.displayName = 'DrawerHeading';\n\n// =============================================================================\n// DrawerBody\n// =============================================================================\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van het zijpaneel\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerBody\n * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.\n */\nexport const DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nDrawerBody.displayName = 'DrawerBody';\n\n// =============================================================================\n// DrawerFooter\n// =============================================================================\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerFooter\n * De voettekst van het zijpaneel met actieknoppen.\n */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nDrawerFooter.displayName = 'DrawerFooter';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { SearchInput } from '../SearchInput';\nimport { Drawer, DrawerBody, DrawerHeader, DrawerHeading } from '../Drawer';\nimport { Stack } from '../Stack';\nimport './PageHeader.css';\n\nexport type PageHeaderSticky = 'none' | 'sticky' | 'auto-hide';\nexport type PageHeaderLayout = 'default' | 'compact';\nexport type PageHeaderColorScheme = 'default' | 'inverse';\n\nexport interface PageHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'children'\n> {\n  /**\n   * Logo-inhoud — `<svg>`, `<img>`, of een `<a>` die een logo omhult.\n   * De CSS past automatisch `max-block-size` toe op de directe child.\n   */\n  logoSlot: React.ReactNode;\n\n  /**\n   * Scrollgedrag van de header.\n   * - `none` (standaard): header scrollt mee met de pagina\n   * - `sticky`: header blijft bovenaan de viewport vastgeplakt\n   * - `auto-hide`: sticky + verbergt bij scroll-down, toont bij scroll-up\n   * @default 'none'\n   */\n  sticky?: PageHeaderSticky;\n\n  /**\n   * Lay-out van de header op large viewport (≥ 64em).\n   * - `default`: twee horizontale banden — Masthead (logo + servicemenu + zoekveld)\n   *   en Navigatiebalk (primaire navigatie op accent-1 achtergrond)\n   * - `compact`: één enkele rij — logo (inline-start), primaire navigatie (gecentreerd),\n   *   servicemenu + zoekknop (inline-end). Geeft `primaryNavigationLarge` voorrang\n   *   boven `primaryNavigation` (en idem voor secondary) zodat de Drawer altijd\n   *   de verticale variant ontvangt.\n   * @default 'default'\n   */\n  layout?: PageHeaderLayout;\n\n  /**\n   * Kleurschema van de header.\n   * - `default`: neutrale achtergrond met accent-1 navbar\n   * - `inverse`: sterke accent-1-inverse achtergrond op navbar en compact balk\n   *   voor prominente branding. Het masthead blijft altijd neutraal.\n   *   Logo-kleuren passen zich automatisch aan via CSS context overrides.\n   * @default 'default'\n   */\n  colorScheme?: PageHeaderColorScheme;\n\n  /**\n   * Initiële open-staat van het zoekpaneel (small viewport).\n   * Handig voor Storybook en tests — het paneel kan daarna nog steeds\n   * worden geopend/gesloten via de knop.\n   * @default false\n   */\n  initialSearchOpen?: boolean;\n\n  /**\n   * Primaire navigatie-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>` met\n   * `<MenuLink>`-items inclusief uitklapmogelijkheden voor sub-niveaus.\n   */\n  primaryNavigation?: React.ReactNode;\n\n  /**\n   * Primaire navigatie-inhoud in de Navigatiebalk (large viewport) — doorgaans een horizontale\n   * `<Menu>` met alleen Level 1 `<MenuLink>`-items. Als niet meegegeven valt de component\n   * terug op `primaryNavigation`.\n   */\n  primaryNavigationLarge?: React.ReactNode;\n\n  /**\n   * Servicemenu-inhoud in de Drawer (small viewport) — doorgaans een verticale `<Menu>`.\n   */\n  secondaryNavigation?: React.ReactNode;\n\n  /**\n   * Servicemenu-inhoud in de Masthead (large viewport) — doorgaans een horizontale `<Menu>`.\n   * Als niet meegegeven valt de component terug op `secondaryNavigation`.\n   */\n  secondaryNavigationLarge?: React.ReactNode;\n\n  /**\n   * Inline zoekveld voor de Masthead op large viewport (SearchInput + zoekknop).\n   * Optioneel — toont geen zoekveld als weggelaten.\n   */\n  searchSlot?: React.ReactNode;\n\n  /**\n   * Visuele badge-indicator bij de menuknop (small viewport), doorgaans een `<DotBadge>`.\n   * Gebruik dit om ongelezen meldingen te signaleren. De badge is altijd `aria-hidden` —\n   * geef de toegankelijke tekst mee via `menuButtonBadgeLabel`.\n   */\n  menuButtonBadge?: React.ReactNode;\n\n  /**\n   * Toegankelijke tekst die wordt toegevoegd aan het label van de menuknop als er een badge\n   * aanwezig is, bijvoorbeeld `\"2 nieuwe berichten\"`. Wordt visueel verborgen getoond zodat\n   * screenreadergebruikers de melding horen: \"Menu, 2 nieuwe berichten\".\n   * Vereist als `menuButtonBadge` is meegegeven.\n   */\n  menuButtonBadgeLabel?: string;\n\n  /**\n   * Callback wanneer de navigatielade opent.\n   */\n  onMenuOpen?: () => void;\n\n  /**\n   * Callback wanneer de navigatielade sluit.\n   */\n  onMenuClose?: () => void;\n\n  /**\n   * Callback wanneer het zoekpaneel opent.\n   */\n  onSearchOpen?: () => void;\n\n  /**\n   * Callback wanneer het zoekpaneel sluit.\n   */\n  onSearchClose?: () => void;\n\n  // ── i18n labels ────────────────────────────────────────────────────────────\n\n  /**\n   * Label van de menuknop en de Drawer-heading.\n   * @default 'Menu'\n   */\n  menuButtonLabel?: string;\n\n  /**\n   * Label van de zoekknop wanneer het zoekpaneel gesloten is.\n   * @default 'Zoeken'\n   */\n  searchButtonLabel?: string;\n\n  /**\n   * Label van de zoekknop wanneer het zoekpaneel open is.\n   * @default 'Sluiten'\n   */\n  closeButtonLabel?: string;\n\n  /**\n   * Placeholder van het zoekveld in het zoekpaneel (small viewport en compact layout).\n   * @default 'Zoeken…'\n   */\n  searchInputPlaceholder?: string;\n\n  /**\n   * `aria-label` van het zoekveld in het zoekpaneel.\n   * @default 'Zoekopdracht'\n   */\n  searchInputAriaLabel?: string;\n\n  /**\n   * Label van de zoek-submitknop in het zoekpaneel.\n   * @default 'Zoeken'\n   */\n  searchSubmitLabel?: string;\n\n  /**\n   * `aria-label` van de primaire navigatie-`<nav>` (large viewport) en\n   * visueel verborgen heading in de Drawer.\n   * @default 'Hoofd-navigatie'\n   */\n  primaryNavAriaLabel?: string;\n\n  /**\n   * `aria-label` van het servicemenu-`<nav>` (large viewport) en\n   * visueel verborgen heading in de Drawer.\n   * @default 'Service-navigatie'\n   */\n  secondaryNavAriaLabel?: string;\n\n  /**\n   * Verbergt de menuknop in de small viewport layout.\n   * Gebruik dit wanneer er geen navigatie aanwezig is (bijv. formulierpagina's).\n   * @default false\n   */\n  hideMenuButton?: boolean;\n\n  /**\n   * Verbergt de zoekknop in zowel de small viewport als compact layout.\n   * Gebruik dit wanneer zoeken niet relevant is (bijv. formulierpagina's).\n   * @default false\n   */\n  hideSearchButton?: boolean;\n\n  className?: string;\n}\n\n/**\n * PageHeader component\n * Primaire navigatieheader voor een pagina. Mobile-first implementatie.\n *\n * Op mobile toont de header drie elementen:\n * - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie\n * - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)\n * - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header\n *\n * @example\n * ```tsx\n * <PageHeader\n *   logoSlot={\n *     <a href=\"/\">\n *       <Logo aria-hidden={true} />\n *       <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n *     </a>\n *   }\n *   primaryNavigation={\n *     <Menu orientation=\"vertical\">\n *       <MenuLink href=\"/home\" level={1}>Home</MenuLink>\n *       <MenuLink href=\"/over\" level={1}>Over ons</MenuLink>\n *     </Menu>\n *   }\n *   secondaryNavigation={\n *     <Menu orientation=\"vertical\">\n *       <MenuLink href=\"/contact\" level={1}>Contact</MenuLink>\n *     </Menu>\n *   }\n * />\n * ```\n */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(\n  (\n    {\n      className,\n      logoSlot,\n      sticky = 'none',\n      layout = 'default',\n      colorScheme = 'default',\n      initialSearchOpen = false,\n      primaryNavigation,\n      primaryNavigationLarge,\n      secondaryNavigation,\n      secondaryNavigationLarge,\n      searchSlot,\n      menuButtonBadge,\n      menuButtonBadgeLabel,\n      onMenuOpen,\n      onMenuClose,\n      onSearchOpen,\n      onSearchClose,\n      menuButtonLabel = 'Menu',\n      searchButtonLabel = 'Zoeken',\n      closeButtonLabel = 'Sluiten',\n      searchInputPlaceholder = 'Zoeken…',\n      searchInputAriaLabel = 'Zoekopdracht',\n      searchSubmitLabel = 'Zoeken',\n      primaryNavAriaLabel = 'Hoofd-navigatie',\n      secondaryNavAriaLabel = 'Service-navigatie',\n      hideMenuButton = false,\n      hideSearchButton = false,\n      ...props\n    },\n    ref\n  ) => {\n    const [isMenuOpen, setIsMenuOpen] = React.useState(false);\n    const [isSearchOpen, setIsSearchOpen] = React.useState(initialSearchOpen);\n\n    const headerRef = React.useRef<HTMLElement>(null);\n    const combinedRef = (ref as React.RefObject<HTMLElement>) ?? headerRef;\n\n    const menuButtonRef = React.useRef<HTMLButtonElement>(null);\n    const searchButtonRef = React.useRef<HTMLButtonElement>(null);\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n    const compactSearchButtonRef = React.useRef<HTMLButtonElement>(null);\n    const compactSearchInputRef = React.useRef<HTMLInputElement>(null);\n\n    const searchPanelId = React.useId();\n    const compactSearchPanelId = React.useId();\n\n    // Auto-hide: detecteer scrollrichting en toggle data-hidden attribuut\n    React.useEffect(() => {\n      if (sticky !== 'auto-hide') return;\n\n      let lastScrollY = window.scrollY;\n\n      const handleScroll = () => {\n        const currentScrollY = window.scrollY;\n        const isScrollingDown =\n          currentScrollY > lastScrollY && currentScrollY > 100;\n        combinedRef.current?.setAttribute(\n          'data-hidden',\n          String(isScrollingDown)\n        );\n        lastScrollY = currentScrollY;\n      };\n\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => window.removeEventListener('scroll', handleScroll);\n    }, [sticky, combinedRef]);\n\n    // Drop-shadow: zet data-scrolled op \"true\" zodra de pagina gescrolled is.\n    // Werkt voor zowel sticky als auto-hide — ongeacht scrollrichting.\n    React.useEffect(() => {\n      if (sticky === 'none') return;\n\n      const updateScrolled = () => {\n        combinedRef.current?.setAttribute(\n          'data-scrolled',\n          String(window.scrollY > 0)\n        );\n      };\n\n      // Direct bij mount instellen (pagina kan al gescrolled zijn)\n      updateScrolled();\n\n      window.addEventListener('scroll', updateScrolled, { passive: true });\n      return () => window.removeEventListener('scroll', updateScrolled);\n    }, [sticky, combinedRef]);\n\n    // Focus management: bij openen zoekpaneel → focus naar input (klein of compact)\n    React.useEffect(() => {\n      if (isSearchOpen) {\n        searchInputRef.current?.focus();\n        compactSearchInputRef.current?.focus();\n      }\n    }, [isSearchOpen]);\n\n    const handleMenuOpen = () => {\n      setIsMenuOpen(true);\n      onMenuOpen?.();\n    };\n\n    const handleMenuClose = () => {\n      setIsMenuOpen(false);\n      onMenuClose?.();\n      // Focus terug naar menuknop\n      menuButtonRef.current?.focus();\n    };\n\n    const handleSearchToggle = () => {\n      const opening = !isSearchOpen;\n      setIsSearchOpen(opening);\n      if (opening) {\n        onSearchOpen?.();\n      } else {\n        onSearchClose?.();\n        // Focus terug naar zoek/sluit-knop — afhankelijk van actieve layout\n        searchButtonRef.current?.focus();\n        compactSearchButtonRef.current?.focus();\n      }\n    };\n\n    const classes = classNames(\n      'dsn-page-header',\n      sticky === 'sticky' && 'dsn-page-header--sticky',\n      sticky === 'auto-hide' && 'dsn-page-header--auto-hide',\n      layout === 'compact' && 'dsn-page-header--compact',\n      colorScheme === 'inverse' && 'dsn-page-header--inverse',\n      className\n    );\n\n    return (\n      <>\n        <header\n          ref={combinedRef}\n          className={classes}\n          {...(sticky === 'auto-hide' ? { 'data-hidden': 'false' } : {})}\n          {...props}\n        >\n          {/* ----------------------------------------------------------------\n              Small viewport layout (verborgen boven 64em via CSS display:none)\n              ---------------------------------------------------------------- */}\n          <div className=\"dsn-page-header__small-layout\">\n            <div className=\"dsn-page-header__inner\">\n              {/* Inline-start: menuknop */}\n              <div className=\"dsn-page-header__start\">\n                {!hideMenuButton && (\n                  <Button\n                    ref={menuButtonRef}\n                    variant=\"subtle\"\n                    onClick={handleMenuOpen}\n                    iconStart={<Icon name=\"menu\" aria-hidden />}\n                  >\n                    {menuButtonLabel}\n                    {menuButtonBadgeLabel && (\n                      <span className=\"dsn-visually-hidden\">\n                        , {menuButtonBadgeLabel}\n                      </span>\n                    )}\n                    {menuButtonBadge}\n                  </Button>\n                )}\n              </div>\n\n              {/* Gecentreerd logo */}\n              <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n              {/* Inline-end: zoekknop / sluitknop */}\n              <div className=\"dsn-page-header__end\">\n                {!hideSearchButton && (\n                  <Button\n                    ref={searchButtonRef}\n                    variant=\"subtle\"\n                    aria-expanded={isSearchOpen}\n                    aria-controls={searchPanelId}\n                    onClick={handleSearchToggle}\n                    iconStart={\n                      <Icon name={isSearchOpen ? 'x' : 'search'} aria-hidden />\n                    }\n                  >\n                    {isSearchOpen ? closeButtonLabel : searchButtonLabel}\n                  </Button>\n                )}\n              </div>\n            </div>\n\n            {/* Zoekpaneel */}\n            <div\n              id={searchPanelId}\n              className=\"dsn-page-header__search-panel\"\n              hidden={!isSearchOpen}\n            >\n              <div className=\"dsn-page-header__search-inner\">\n                <SearchInput\n                  ref={searchInputRef}\n                  placeholder={searchInputPlaceholder}\n                  aria-label={searchInputAriaLabel}\n                />\n                <Button variant=\"strong\">{searchSubmitLabel}</Button>\n              </div>\n            </div>\n          </div>\n\n          {/* ----------------------------------------------------------------\n              Large viewport layout (zichtbaar boven 64em, alleen bij layout=\"default\")\n              ---------------------------------------------------------------- */}\n          {layout === 'default' && (\n            <div className=\"dsn-page-header__large-layout\">\n              {/* Masthead: neutrale achtergrond — logo + servicemenu + zoek */}\n              <div className=\"dsn-page-header__masthead\">\n                <div className=\"dsn-page-header__masthead-inner\">\n                  <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n                  <div className=\"dsn-page-header__secondary-nav\">\n                    {(secondaryNavigationLarge ?? secondaryNavigation) && (\n                      <nav aria-label={secondaryNavAriaLabel}>\n                        {secondaryNavigationLarge ?? secondaryNavigation}\n                      </nav>\n                    )}\n                    {searchSlot && (\n                      <div className=\"dsn-page-header__searchbox\">\n                        {searchSlot}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {/* Navigatiebalk: accent-1 achtergrond — primaire navigatie (large viewport) */}\n              <div className=\"dsn-page-header__navbar\">\n                <div className=\"dsn-page-header__navbar-inner\">\n                  {(primaryNavigationLarge ?? primaryNavigation) && (\n                    <nav aria-label={primaryNavAriaLabel}>\n                      {primaryNavigationLarge ?? primaryNavigation}\n                    </nav>\n                  )}\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* ----------------------------------------------------------------\n              Compact layout (zichtbaar boven 64em wanneer layout=\"compact\")\n              Eén rij: logo (1fr) | primaire navigatie (auto) | servicemenu + zoek (1fr)\n              ---------------------------------------------------------------- */}\n          {layout === 'compact' && (\n            <div className=\"dsn-page-header__compact-layout\">\n              <div className=\"dsn-page-header__compact-inner\">\n                {/* Logo — inline-start (eerste gridkolom) */}\n                <div className=\"dsn-page-header__logo\">{logoSlot}</div>\n\n                {/* Primaire navigatie — gecentreerd (middelste gridkolom)\n                    Gebruikt primaryNavigationLarge als aanwezig, anders primaryNavigation.\n                    Dit garandeert dat de Drawer altijd de verticale variant ontvangt. */}\n                <div className=\"dsn-page-header__compact-primary-nav\">\n                  {(primaryNavigationLarge ?? primaryNavigation) && (\n                    <nav aria-label={primaryNavAriaLabel}>\n                      {primaryNavigationLarge ?? primaryNavigation}\n                    </nav>\n                  )}\n                </div>\n\n                {/* Servicemenu + zoekknop (icon-only) — inline-end (derde gridkolom) */}\n                <div className=\"dsn-page-header__compact-secondary\">\n                  {(secondaryNavigationLarge ?? secondaryNavigation) && (\n                    <nav aria-label={secondaryNavAriaLabel}>\n                      {secondaryNavigationLarge ?? secondaryNavigation}\n                    </nav>\n                  )}\n                  {!hideSearchButton && (\n                    <Button\n                      ref={compactSearchButtonRef}\n                      variant=\"subtle\"\n                      iconOnly\n                      aria-expanded={isSearchOpen}\n                      aria-controls={compactSearchPanelId}\n                      onClick={handleSearchToggle}\n                      iconStart={\n                        <Icon\n                          name={isSearchOpen ? 'x' : 'search'}\n                          aria-hidden\n                        />\n                      }\n                    >\n                      {isSearchOpen ? closeButtonLabel : searchButtonLabel}\n                    </Button>\n                  )}\n                </div>\n              </div>\n\n              {/* Zoekpaneel compact layout */}\n              <div\n                id={compactSearchPanelId}\n                className=\"dsn-page-header__search-panel\"\n                hidden={!isSearchOpen}\n              >\n                <div className=\"dsn-page-header__search-inner\">\n                  <SearchInput\n                    ref={compactSearchInputRef}\n                    placeholder={searchInputPlaceholder}\n                    aria-label={searchInputAriaLabel}\n                  />\n                  <Button variant=\"strong\">{searchSubmitLabel}</Button>\n                </div>\n              </div>\n            </div>\n          )}\n        </header>\n\n        {/* Navigatielade (sibling aan PageHeader, altijd in DOM) */}\n        <Drawer isOpen={isMenuOpen} onClose={handleMenuClose} side=\"left\">\n          <DrawerHeader>\n            <DrawerHeading>{menuButtonLabel}</DrawerHeading>\n          </DrawerHeader>\n          <DrawerBody>\n            <Stack space=\"5xl\">\n              {primaryNavigation && (\n                <nav aria-label={primaryNavAriaLabel}>{primaryNavigation}</nav>\n              )}\n              {secondaryNavigation && (\n                <nav aria-label={secondaryNavAriaLabel}>\n                  {secondaryNavigation}\n                </nav>\n              )}\n            </Stack>\n          </DrawerBody>\n        </Drawer>\n      </>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PageLayout.css';\n\nexport interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Paginainhoud: doorgaans `PageHeader`, `PageBody` en `PageFooter`.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Extra CSS-klassen\n   */\n  className?: string;\n}\n\n/**\n * PageLayout component\n * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal\n * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport\n * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat\n * zodra `PageBody` `flex: 1` heeft.\n *\n * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische\n * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).\n *\n * @example\n * ```tsx\n * <SkipLink href=\"#main-content\" />\n * <PageLayout>\n *   <PageHeader logoSlot={<Logo />} />\n *   <PageBody>\n *     <main id=\"main-content\" tabIndex={-1}>\n *       <Container>...</Container>\n *     </main>\n *   </PageBody>\n *   <PageFooter slot1={<Logo />} />\n * </PageLayout>\n * ```\n */\nexport const PageLayout = React.forwardRef<HTMLDivElement, PageLayoutProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-page-layout', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nPageLayout.displayName = 'PageLayout';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Heading, type HeadingLevel } from '../Heading';\nimport { Link } from '../Link';\nimport { UnorderedList } from '../UnorderedList';\nimport './TableOfContents.css';\n\nexport type TableOfContentsAppearance = 'framed' | 'plain';\n\nexport interface TableOfContentsItem {\n  /**\n   * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina\n   */\n  id: string;\n\n  /**\n   * Zichtbare linktekst\n   */\n  label: string;\n}\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Zichtbare heading-tekst\n   * @default 'Op deze pagina'\n   */\n  heading?: string;\n\n  /**\n   * Semantisch heading-niveau\n   * @default 2\n   */\n  headingLevel?: HeadingLevel;\n\n  /**\n   * Visuele weergave:\n   * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)\n   * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)\n   * @default 'framed'\n   */\n  appearance?: TableOfContentsAppearance;\n\n  /**\n   * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden\n   */\n  items: TableOfContentsItem[];\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * TableOfContents component\n * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.\n *\n * @example\n * ```tsx\n * // Framed (default) — inline in de content-flow\n * <TableOfContents\n *   items={[\n *     { id: 'sectie-1', label: 'Sectie 1' },\n *     { id: 'sectie-2', label: 'Sectie 2' },\n *   ]}\n * />\n *\n * // Plain — in een losstaande kolom naast de hoofdinhoud\n * <TableOfContents appearance=\"plain\" items={items} />\n * ```\n */\nexport const TableOfContents = React.forwardRef<\n  HTMLElement,\n  TableOfContentsProps\n>(\n  (\n    {\n      heading = 'Op deze pagina',\n      headingLevel = 2,\n      appearance = 'framed',\n      items,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const headingId = useId();\n\n    const classes = classNames(\n      'dsn-table-of-contents',\n      appearance === 'plain' && 'dsn-table-of-contents--plain',\n      className\n    );\n\n    return (\n      <nav\n        ref={ref as React.Ref<HTMLElement>}\n        className={classes}\n        aria-labelledby={headingId}\n        {...props}\n      >\n        <Heading\n          level={headingLevel}\n          appearance={appearance === 'plain' ? 'heading-5' : 'heading-3'}\n          className=\"dsn-table-of-contents__heading\"\n          id={headingId}\n        >\n          {heading}\n        </Heading>\n        <UnorderedList>\n          {items.map((item) => (\n            <li key={item.id}>\n              <Link href={`#${item.id}`}>{item.label}</Link>\n            </li>\n          ))}\n        </UnorderedList>\n      </nav>\n    );\n  }\n);\n\nTableOfContents.displayName = 'TableOfContents';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldLabel.css';\n\nexport interface FormFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * Optional suffix text displayed after the label (e.g., \"(niet verplicht)\")\n   */\n  suffix?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Label content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Label component\n * Label for form controls with optional suffix for \"(niet verplicht)\" or \"(verplicht)\"\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldLabel htmlFor=\"firstname\">Voornaam</FormFieldLabel>\n *\n * // With suffix for optional fields\n * <FormFieldLabel htmlFor=\"middlename\" suffix=\"(niet verplicht)\">\n *   Tussenvoegsel\n * </FormFieldLabel>\n *\n * // With suffix for required fields (when most fields are optional)\n * <FormFieldLabel htmlFor=\"email\" suffix=\"(verplicht)\">\n *   E-mailadres\n * </FormFieldLabel>\n * ```\n */\nexport const FormFieldLabel = React.forwardRef<\n  HTMLLabelElement,\n  FormFieldLabelProps\n>(({ suffix, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-label', className);\n\n  return (\n    <label ref={ref} className={classes} {...props}>\n      {children}\n      {suffix && <span className=\"dsn-form-field-label-suffix\">{suffix}</span>}\n    </label>\n  );\n});\n\nFormFieldLabel.displayName = 'FormFieldLabel';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldDescription.css';\n\nexport interface FormFieldDescriptionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML element to render: use 'div' when the description contains block-level\n   * content, which a `<p>` cannot hold. Note that block-level content in a\n   * description is discouraged, see the component docs.\n   * @default 'p'\n   */\n  as?: 'p' | 'div';\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Description content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Description component\n * Optional help text displayed below the label and above the form control.\n *\n * Use text only. The content of an `aria-describedby` reference is flattened into a\n * single string, so list structure and links lose their meaning. VoiceOver in Safari\n * does not read a list inside a description at all, and a link inside a description\n * cannot be reached or activated. To make several requirements scannable, put them on\n * their own lines with a `<br>` and a space on both sides of it: the description then\n * stays a single `<p>` holding only text. A real list belongs above the form field,\n * outside the `aria-describedby` reference, where it keeps its list semantics.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldDescription>\n *   Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.\n * </FormFieldDescription>\n *\n * // With ID for aria-describedby\n * <FormFieldDescription id=\"email-description\">\n *   We gebruiken uw e-mailadres alleen voor accountgerelateerde berichten.\n * </FormFieldDescription>\n *\n * // Several requirements: one line each via <br>, never a list\n * <FormFieldDescription id=\"upload-description\">\n *   Het bestand mag maximaal 5 MB zijn. <br /> Toegestane bestandstypen: pdf en docx.\n * </FormFieldDescription>\n * ```\n */\nexport const FormFieldDescription = React.forwardRef<\n  HTMLElement,\n  FormFieldDescriptionProps\n>(({ as: As = 'p', className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-description', className);\n\n  return (\n    <As\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </As>\n  );\n});\n\nFormFieldDescription.displayName = 'FormFieldDescription';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './FormFieldErrorMessage.css';\n\nexport interface FormFieldErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Whether to show the exclamation-circle icon before the message\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Error message content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Error Message component\n * Error message displayed below the description and above the form control\n * Shows exclamation-circle icon by default for visual emphasis\n *\n * @example\n * ```tsx\n * // Basic usage with icon (default)\n * <FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>\n *\n * // Without icon\n * <FormFieldErrorMessage showIcon={false}>\n *   Ongeldige waarde opgegeven.\n * </FormFieldErrorMessage>\n *\n * // With ID for aria-describedby\n * <FormFieldErrorMessage id=\"email-error\">\n *   Vul een geldig e-mailadres in.\n * </FormFieldErrorMessage>\n * ```\n */\nexport const FormFieldErrorMessage = React.forwardRef<\n  HTMLParagraphElement,\n  FormFieldErrorMessageProps\n>(({ showIcon = true, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-error-message', className);\n\n  return (\n    <p ref={ref} className={classes} {...props}>\n      {showIcon && <Icon name=\"exclamation-circle\" aria-hidden />}\n      {children}\n    </p>\n  );\n});\n\nFormFieldErrorMessage.displayName = 'FormFieldErrorMessage';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './FormFieldStatus.css';\n\nexport type FormFieldStatusVariant = 'default' | 'positive' | 'warning';\n\nexport interface FormFieldStatusProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Status variant\n   * @default 'default'\n   */\n  variant?: FormFieldStatusVariant;\n\n  /**\n   * Whether to show the icon (only for positive and warning variants)\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Whether to announce changes to this status via an aria-live region.\n   * Enable this only for status text that changes during interaction, such as\n   * a character counter. A status that never changes should not be a live\n   * region: it would be announced twice.\n   * @default false\n   */\n  live?: boolean;\n\n  /**\n   * Status content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Status component\n * Status message displayed below the form control\n * Supports three variants: default (subtle info), positive (success), warning (caution)\n *\n * @example\n * ```tsx\n * // Default - Character counter (no icon)\n * <FormFieldStatus>45 van 100 karakters</FormFieldStatus>\n *\n * // Positive - Success feedback (with check icon)\n * <FormFieldStatus variant=\"positive\">Wachtwoord is sterk genoeg</FormFieldStatus>\n *\n * // Warning - Caution (with alert-triangle icon)\n * <FormFieldStatus variant=\"warning\">Wachtwoord is zwak</FormFieldStatus>\n *\n * // Without icon (for positive/warning)\n * <FormFieldStatus variant=\"positive\" showIcon={false}>\n *   Gebruikersnaam beschikbaar\n * </FormFieldStatus>\n *\n * // With ID for aria-describedby\n * <FormFieldStatus id=\"bio-status\">\n *   280 van 500 karakters gebruikt\n * </FormFieldStatus>\n * ```\n */\nexport const FormFieldStatus = React.forwardRef<\n  HTMLParagraphElement,\n  FormFieldStatusProps\n>(\n  (\n    {\n      className,\n      variant = 'default',\n      showIcon = true,\n      live = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-form-field-status',\n      variant !== 'default' && `dsn-form-field-status--${variant}`,\n      className\n    );\n\n    const iconName =\n      variant === 'positive'\n        ? 'check'\n        : variant === 'warning'\n          ? 'alert-triangle'\n          : null;\n    const shouldShowIcon = showIcon && iconName && variant !== 'default';\n\n    return (\n      <p\n        ref={ref}\n        className={classes}\n        aria-live={live ? 'polite' : undefined}\n        aria-atomic={live ? true : undefined}\n        {...props}\n      >\n        {shouldShowIcon && <Icon name={iconName} aria-hidden=\"true\" />}\n        {children}\n      </p>\n    );\n  }\n);\n\nFormFieldStatus.displayName = 'FormFieldStatus';\n","import React from 'react';\n\ninterface DescribableProps {\n  'aria-describedby'?: string;\n}\n\n/**\n * Koppelt extra teksten (description, error, status) aan een form control door\n * `aria-describedby` op het child-element te zetten.\n *\n * Een bestaande `aria-describedby` op de control blijft behouden: de\n * gegenereerde ID's komen eerst, gevolgd door wat de consument zelf meegaf.\n * Dubbele ID's worden verwijderd.\n *\n * Wanneer er geen ID's zijn, of het child geen React-element is (bijvoorbeeld\n * een string of een fragment), blijft de control ongewijzigd.\n */\nexport function describeControl(\n  control: React.ReactNode,\n  ids: ReadonlyArray<string | undefined>\n): React.ReactNode {\n  const generated = ids.filter((id): id is string => Boolean(id));\n\n  if (generated.length === 0 || !React.isValidElement(control)) {\n    return control;\n  }\n\n  const element = control as React.ReactElement<DescribableProps>;\n  const existing = element.props['aria-describedby'];\n  const merged = [\n    ...generated,\n    ...(existing ? existing.split(/\\s+/).filter(Boolean) : []),\n  ]\n    .filter((id, index, all) => all.indexOf(id) === index)\n    .join(' ');\n\n  return React.cloneElement(element, { 'aria-describedby': merged });\n}\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { FormFieldLabel } from '../FormFieldLabel';\nimport { FormFieldDescription } from '../FormFieldDescription';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport { FormFieldStatus, FormFieldStatusVariant } from '../FormFieldStatus';\nimport { describeControl } from '../utils/describeControl';\nimport './FormField.css';\n\nexport interface FormFieldProps {\n  /**\n   * The label text for the form field\n   */\n  label: string;\n\n  /**\n   * The ID of the form control. Used for the label's htmlFor and as the base\n   * for the generated description/error/status IDs. When omitted, the IDs are\n   * generated via useId(), but the label is no longer explicitly linked.\n   */\n  htmlFor?: string;\n\n  /**\n   * Optional suffix for the label (e.g., \"(niet verplicht)\" or \"(verplicht)\")\n   */\n  labelSuffix?: string;\n\n  /**\n   * Optional description text\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Optional error message (shows when field is invalid)\n   */\n  error?: React.ReactNode;\n\n  /**\n   * Optional status message\n   */\n  status?: React.ReactNode;\n\n  /**\n   * Status variant (for status message styling)\n   * @default 'default'\n   */\n  statusVariant?: FormFieldStatusVariant;\n\n  /**\n   * Announce status changes to screen readers via an aria-live region.\n   * Only enable this for status text that changes during interaction,\n   * such as a character counter.\n   * @default false\n   */\n  statusLive?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * The form control element (input, textarea, CheckboxGroup, RadioGroup, etc.)\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Form Field component\n * Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus\n * Uses div/label structure (for fieldset/legend use FormFieldset component)\n *\n * Description, error and status are linked to the control via aria-describedby.\n * FormField clones the child element to add the attribute, so the child must be\n * a single element that forwards props to its DOM node. An aria-describedby the\n * consumer already set on the control is preserved.\n *\n * @example\n * ```tsx\n * // Text input field\n * <FormField label=\"E-mailadres\" htmlFor=\"email\" description=\"We sturen hier geen spam naartoe\">\n *   <TextInput id=\"email\" type=\"email\" />\n * </FormField>\n *\n * // With error\n * <FormField\n *   label=\"Wachtwoord\"\n *   htmlFor=\"password\"\n *   error=\"Wachtwoord moet minimaal 8 tekens bevatten\"\n * >\n *   <PasswordInput id=\"password\" invalid />\n * </FormField>\n *\n * // With status (character counter): statusLive announces each change\n * <FormField\n *   label=\"Bio\"\n *   htmlFor=\"bio\"\n *   status=\"280 van 500 karakters gebruikt\"\n *   statusLive\n * >\n *   <TextArea id=\"bio\" rows={4} />\n * </FormField>\n *\n * // With positive status\n * <FormField\n *   label=\"Wachtwoord\"\n *   htmlFor=\"password\"\n *   status=\"Wachtwoord is sterk genoeg\"\n *   statusVariant=\"positive\"\n * >\n *   <PasswordInput id=\"password\" />\n * </FormField>\n * ```\n */\nexport const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      label,\n      htmlFor,\n      labelSuffix,\n      description,\n      error,\n      status,\n      statusVariant = 'default',\n      statusLive = false,\n      className,\n      children,\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const idBase = htmlFor ?? generatedId;\n\n    const descriptionId = description ? `${idBase}-description` : undefined;\n    const errorId = error ? `${idBase}-error` : undefined;\n    const statusId = status ? `${idBase}-status` : undefined;\n\n    // Koppel de extra teksten aan de control zelf. De volgorde volgt de\n    // visuele volgorde, zodat een screenreader dezelfde route loopt als het oog.\n    const control = describeControl(children, [\n      descriptionId,\n      errorId,\n      statusId,\n    ]);\n\n    const containerClasses = classNames(\n      'dsn-form-field',\n      {\n        'dsn-form-field--invalid': !!error,\n      },\n      className\n    );\n\n    return (\n      <div ref={ref} className={containerClasses}>\n        <FormFieldLabel htmlFor={htmlFor} suffix={labelSuffix}>\n          {label}\n        </FormFieldLabel>\n\n        {description && (\n          <FormFieldDescription id={descriptionId}>\n            {description}\n          </FormFieldDescription>\n        )}\n\n        {error && (\n          <FormFieldErrorMessage id={errorId}>{error}</FormFieldErrorMessage>\n        )}\n\n        {control}\n\n        {status && (\n          <FormFieldStatus\n            id={statusId}\n            variant={statusVariant}\n            live={statusLive}\n          >\n            {status}\n          </FormFieldStatus>\n        )}\n      </div>\n    );\n  }\n);\n\nFormField.displayName = 'FormField';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldLegend.css';\n\nexport interface FormFieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {\n  /**\n   * Optional suffix text displayed after the legend (e.g., \"(niet verplicht)\")\n   */\n  suffix?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Legend content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Legend component\n * Legend for fieldsets with optional suffix for \"(niet verplicht)\" or \"(verplicht)\"\n * Uses the same CSS classes as FormFieldLabel for consistent styling\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldLegend>Interesses</FormFieldLegend>\n *\n * // With suffix for optional fields\n * <FormFieldLegend suffix=\"(niet verplicht)\">\n *   Hobby's\n * </FormFieldLegend>\n *\n * // With suffix for required fields\n * <FormFieldLegend suffix=\"(verplicht)\">\n *   Geslacht\n * </FormFieldLegend>\n * ```\n */\nexport const FormFieldLegend = React.forwardRef<\n  HTMLLegendElement,\n  FormFieldLegendProps\n>(({ suffix, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-label', className);\n\n  return (\n    <legend ref={ref} className={classes} {...props}>\n      {children}\n      {suffix && <span className=\"dsn-form-field-label-suffix\">{suffix}</span>}\n    </legend>\n  );\n});\n\nFormFieldLegend.displayName = 'FormFieldLegend';\n","import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { FormFieldLegend } from '../FormFieldLegend';\nimport { FormFieldDescription } from '../FormFieldDescription';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport { FormFieldStatus, FormFieldStatusVariant } from '../FormFieldStatus';\nimport './FormFieldset.css';\n\nexport interface FormFieldsetProps {\n  /**\n   * The legend text for the fieldset\n   */\n  legend: string;\n\n  /**\n   * Optional suffix for the legend (e.g., \"(niet verplicht)\" or \"(verplicht)\")\n   */\n  legendSuffix?: string;\n\n  /**\n   * Optional description text\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Optional error message (shows when field is invalid)\n   */\n  error?: React.ReactNode;\n\n  /**\n   * Optional status message\n   */\n  status?: React.ReactNode;\n\n  /**\n   * Status variant (for status message styling)\n   * @default 'default'\n   */\n  statusVariant?: FormFieldStatusVariant;\n\n  /**\n   * Announce status changes to screen readers via an aria-live region.\n   * Only enable this for status text that changes during interaction.\n   * @default false\n   */\n  statusLive?: boolean;\n\n  /**\n   * Optional ID for the fieldset. Used as the base for the generated\n   * description/error/status IDs. Generated via useId() when omitted.\n   */\n  id?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * The form control element (CheckboxGroup, RadioGroup, DateInputGroup, etc.)\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Form Fieldset component\n * Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus\n * Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)\n *\n * Description, error and status are linked via aria-describedby on the fieldset\n * itself: a group has no single control to hang the association on.\n *\n * @example\n * ```tsx\n * // Checkbox group\n * <FormFieldset legend=\"Interesses\" description=\"Selecteer minimaal één interesse\">\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"Sport\" value=\"sport\" />\n *     <CheckboxOption label=\"Muziek\" value=\"music\" />\n *     <CheckboxOption label=\"Reizen\" value=\"travel\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n *\n * // Radio group with error\n * <FormFieldset\n *   legend=\"Geslacht\"\n *   legendSuffix=\"(verplicht)\"\n *   error=\"Selecteer een optie\"\n * >\n *   <RadioGroup>\n *     <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *     <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *     <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n *   </RadioGroup>\n * </FormFieldset>\n *\n * // With status\n * <FormFieldset\n *   legend=\"Voorkeuren\"\n *   status=\"Minimaal 2 opties vereist\"\n *   statusVariant=\"warning\"\n * >\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"E-mail\" value=\"email\" />\n *     <CheckboxOption label=\"SMS\" value=\"sms\" />\n *     <CheckboxOption label=\"Push\" value=\"push\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n * ```\n */\nexport const FormFieldset = React.forwardRef<\n  HTMLFieldSetElement,\n  FormFieldsetProps\n>(\n  (\n    {\n      legend,\n      legendSuffix,\n      description,\n      error,\n      status,\n      statusVariant = 'default',\n      statusLive = false,\n      id,\n      className,\n      children,\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const idBase = id ?? generatedId;\n\n    const descriptionId = description ? `${idBase}-description` : undefined;\n    const errorId = error ? `${idBase}-error` : undefined;\n    const statusId = status ? `${idBase}-status` : undefined;\n\n    // Bij een groep controls hangt de koppeling aan het fieldset zelf: er is\n    // geen enkele control om hem aan te hangen. De volgorde volgt de visuele\n    // volgorde, zodat een screenreader dezelfde route loopt als het oog.\n    const describedBy =\n      [descriptionId, errorId, statusId].filter(Boolean).join(' ') || undefined;\n\n    const containerClasses = classNames(\n      'dsn-form-field',\n      {\n        'dsn-form-field--invalid': !!error,\n      },\n      className\n    );\n\n    return (\n      <fieldset\n        ref={ref}\n        id={id}\n        className={containerClasses}\n        aria-describedby={describedBy}\n      >\n        <FormFieldLegend suffix={legendSuffix}>{legend}</FormFieldLegend>\n\n        {description && (\n          <FormFieldDescription id={descriptionId}>\n            {description}\n          </FormFieldDescription>\n        )}\n\n        {error && (\n          <FormFieldErrorMessage id={errorId}>{error}</FormFieldErrorMessage>\n        )}\n\n        {children}\n\n        {status && (\n          <FormFieldStatus\n            id={statusId}\n            variant={statusVariant}\n            live={statusLive}\n          >\n            {status}\n          </FormFieldStatus>\n        )}\n      </fieldset>\n    );\n  }\n);\n\nFormFieldset.displayName = 'FormFieldset';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Image.css';\n\n// fetchpriority is not yet in React 18's HTMLAttributes types (added in React 19).\n// Extend ImgHTMLAttributes locally so we can pass it through to the DOM.\ntype ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {\n  fetchpriority?: 'high' | 'low' | 'auto';\n};\n\nexport interface ImageProps extends React.HTMLAttributes<HTMLElement> {\n  /** Verplicht. URL van de afbeelding */\n  src: string;\n\n  /** Verplicht. Alternatieve tekst. Lege string (`\"\"`) voor decoratieve afbeeldingen — activeert automatisch `aria-hidden=\"true\"` op de figure */\n  alt: string;\n\n  /** Verplicht. Intrinsieke breedte in pixels (voorkomt CLS) */\n  width: number;\n\n  /** Verplicht. Intrinsieke hoogte in pixels (voorkomt CLS) */\n  height: number;\n\n  /** Forceert beeldverhouding via CSS `aspect-ratio` + `object-fit: cover` */\n  ratio?: '16:9' | '4:3' | '1:1';\n\n  /** Hoe de afbeelding het ratio-kader vult. @default 'cover' */\n  objectFit?: 'cover' | 'contain';\n\n  /**\n   * LCP-modus: `loading=\"eager\"` + `fetchpriority=\"high\"`.\n   * Gebruik maximaal één keer per pagina voor de primaire LCP-afbeelding.\n   * @default false\n   */\n  priority?: boolean;\n\n  /** Optioneel bijschrift, rendert als `<figcaption>` */\n  caption?: React.ReactNode;\n\n  /** Pass-through naar native `srcset` attribuut */\n  srcSet?: string;\n\n  /** Pass-through naar native `sizes` attribuut */\n  sizes?: string;\n}\n\nconst ratioClassMap: Record<NonNullable<ImageProps['ratio']>, string> = {\n  '16:9': 'dsn-image--ratio-16-9',\n  '4:3': 'dsn-image--ratio-4-3',\n  '1:1': 'dsn-image--ratio-1-1',\n};\n\n/**\n * Image component\n * Performante, toegankelijke wrapper rond het native `<img>` element.\n * Biedt ingebakken lazy loading, expliciete ondersteuning voor LCP/hero-afbeeldingen\n * via een `priority` prop, en vaste beeldverhoudingen via de CSS `aspect-ratio` property.\n *\n * @example\n * ```tsx\n * // Basis\n * <Image src=\"/foto.jpg\" alt=\"Beschrijving\" width={800} height={600} />\n *\n * // Met vaste beeldverhouding\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={1600} height={900} ratio=\"16:9\" />\n *\n * // LCP / hero-afbeelding — max. één keer per pagina\n * <Image src=\"/hero.jpg\" alt=\"Pagina hero\" width={1600} height={900} ratio=\"16:9\" priority />\n *\n * // Met bijschrift\n * <Image src=\"/foto.jpg\" alt=\"Beschrijving\" width={800} height={600} caption=\"Bijschrift\" />\n *\n * // Decoratief — alt=\"\" activeert automatisch aria-hidden=\"true\" op de figure\n * <Image src=\"/decoratief.jpg\" alt=\"\" width={800} height={600} />\n * ```\n */\nexport const Image = React.forwardRef<HTMLElement, ImageProps>(\n  (\n    {\n      className,\n      src,\n      alt,\n      width,\n      height,\n      ratio,\n      objectFit = 'cover',\n      priority = false,\n      caption,\n      srcSet,\n      sizes,\n      ...props\n    },\n    ref\n  ) => {\n    const isDecorative = alt === '';\n\n    const figureClasses = classNames(\n      'dsn-image',\n      ratio && ratioClassMap[ratio],\n      objectFit === 'contain' && 'dsn-image--object-fit-contain',\n      className\n    );\n\n    const imgProps: ImgProps = {\n      className: 'dsn-image__img',\n      src,\n      alt,\n      width,\n      height,\n      decoding: 'async',\n      ...(priority\n        ? { loading: 'eager', fetchpriority: 'high' }\n        : { loading: 'lazy' }),\n      ...(srcSet && { srcSet }),\n      ...(sizes && { sizes }),\n    };\n\n    return (\n      <figure\n        ref={ref}\n        className={figureClasses}\n        {...(isDecorative && { 'aria-hidden': true })}\n        {...props}\n      >\n        <img {...imgProps} />\n        {caption && (\n          <figcaption className=\"dsn-image__caption\">{caption}</figcaption>\n        )}\n      </figure>\n    );\n  }\n);\n\nImage.displayName = 'Image';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Card.css';\n\n// =============================================================================\n// Context — Card deelt href met CardHeading via React context\n// =============================================================================\n\ninterface CardContextValue {\n  href?: string;\n}\n\nconst CardContext = React.createContext<CardContextValue>({});\n\n// =============================================================================\n// Card — root container\n// =============================================================================\n\nexport interface CardProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch\n   * via React context en wraps de heading-tekst in een `<a>`.\n   */\n  href?: string;\n\n  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * Card component\n * Configureerbare container voor gestructureerde content met header, body en footer.\n * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.\n * Screenreaders lezen alleen de heading-tekst als linknaam.\n *\n * @example\n * ```tsx\n * <Card href=\"/artikel/slug\">\n *   <CardHeader>\n *     <Image src=\"/foto.jpg\" alt=\"\" width={800} height={450} ratio=\"16:9\" />\n *   </CardHeader>\n *   <CardBody>\n *     <CardHeading level={2}>Artikeltitel</CardHeading>\n *     <Paragraph>Korte beschrijving.</Paragraph>\n *   </CardBody>\n *   <CardFooter>\n *     <Link href=\"/artikel/slug\" aria-hidden tabIndex={-1}>Lees meer</Link>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLElement, CardProps>(\n  ({ className, href, children, ...props }, ref) => {\n    return (\n      <CardContext.Provider value={{ href }}>\n        <article\n          ref={ref}\n          className={classNames('dsn-card', className)}\n          {...props}\n        >\n          {children}\n        </article>\n      </CardContext.Provider>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// =============================================================================\n// CardHeader — optionele afbeeldingssectie\n// =============================================================================\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Afbeelding (`Image` component). Zonder children → toont placeholder\n   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeader sub-component\n * Zonder children → toont automatisch een afbeeldingsplaceholder.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__header', className)}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <div className=\"dsn-card__image-placeholder\" aria-hidden=\"true\" />\n        )}\n      </div>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// =============================================================================\n// CardBody — inhoudssectie\n// =============================================================================\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardBody sub-component\n * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.\n */\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardBody.displayName = 'CardBody';\n\n// =============================================================================\n// CardHeading — heading met stretched link\n// =============================================================================\n\nexport interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Visuele appearance is altijd \"card-heading\".\n   * @default 2\n   */\n  level?: 2 | 3 | 4;\n\n  /** Heading-tekst */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeading sub-component\n * Ontvangt `href` automatisch via React context van de parent `Card`.\n * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class=\"dsn-card-heading__link\">`.\n * Het `::before` pseudo-element dekt de volledige card (stretched link).\n */\nexport const CardHeading = React.forwardRef<\n  HTMLHeadingElement,\n  CardHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { href } = React.useContext(CardContext);\n  const Tag = `h${level}` as 'h2' | 'h3' | 'h4';\n\n  return (\n    <Tag\n      ref={ref}\n      className={classNames('dsn-card-heading', className)}\n      {...props}\n    >\n      {href ? (\n        <a href={href} className=\"dsn-card-heading__link\">\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </Tag>\n  );\n});\n\nCardHeading.displayName = 'CardHeading';\n\n// =============================================================================\n// CardFooter — voettekst\n// =============================================================================\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardFooter sub-component\n * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.\n * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde\n * bestemming heeft als de card — vermijdt een dubbele tabstop.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// =============================================================================\n// CardGroup — layout wrapper\n// =============================================================================\n\nexport interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Semantisch container-element.\n   * Gebruik `div` wanneer cards geen lijst-context hebben.\n   * @default 'ul'\n   */\n  as?: 'ul' | 'div';\n\n  /** `Card` componenten */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardGroup sub-component\n * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.\n * Rendert `role=\"list\"` wanneer `as=\"ul\"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.\n */\nexport const CardGroup = React.forwardRef<HTMLElement, CardGroupProps>(\n  ({ className, as: Tag = 'ul', children, ...props }, ref) => {\n    const roleProps = Tag === 'ul' ? { role: 'list' as const } : {};\n\n    return (\n      <Tag\n        ref={ref as React.Ref<HTMLUListElement & HTMLDivElement>}\n        className={classNames('dsn-card-group', className)}\n        {...roleProps}\n        {...props}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nCardGroup.displayName = 'CardGroup';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './ModalDialog.css';\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface ModalDialogContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst ModalDialogContext = React.createContext<ModalDialogContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// ModalDialog (root)\n// =============================================================================\n\nexport interface ModalDialogProps extends Omit<\n  React.HTMLAttributes<HTMLDialogElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of het dialoogvenster getoond wordt.\n   * Het dialoogvenster wordt via `.showModal()` geopend — nooit via `.show()`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer het dialoogvenster sluit\n   * (sluitknop, Escape-toets of klik buiten het venster).\n   */\n  onClose?: () => void;\n\n  /**\n   * De subcomponenten van het dialoogvenster:\n   * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialog component\n * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.\n *\n * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.\n * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.\n *\n * @example\n * ```tsx\n * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <ModalDialogHeader>\n *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>\n *   </ModalDialogHeader>\n *   <ModalDialogBody>\n *     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>\n *   </ModalDialogBody>\n *   <ModalDialogFooter>\n *     <ActionGroup>\n *       <Button variant=\"negative\" onClick={() => setIsOpen(false)}>Verwijderen</Button>\n *       <Button variant=\"default\" onClick={() => setIsOpen(false)}>Annuleren</Button>\n *     </ActionGroup>\n *   </ModalDialogFooter>\n * </ModalDialog>\n * ```\n */\nexport const ModalDialog = React.forwardRef<\n  HTMLDialogElement,\n  ModalDialogProps\n>(({ className, isOpen, onClose, children, ...props }, ref) => {\n  const internalRef = React.useRef<HTMLDialogElement>(null);\n  const dialogRef = (ref as React.RefObject<HTMLDialogElement>) ?? internalRef;\n  const headingId = React.useId();\n\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal();\n    } else if (!isOpen && dialog.open) {\n      dialog.close();\n    }\n  }, [isOpen, dialogRef]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    event.preventDefault();\n    onClose?.();\n  };\n\n  const classes = classNames('dsn-modal-dialog', className);\n\n  return (\n    <ModalDialogContext.Provider value={{ headingId, onClose }}>\n      <dialog\n        ref={dialogRef}\n        className={classes}\n        aria-labelledby={headingId}\n        onCancel={handleCancel}\n        {...props}\n      >\n        {children}\n      </dialog>\n    </ModalDialogContext.Provider>\n  );\n});\n\nModalDialog.displayName = 'ModalDialog';\n\n// =============================================================================\n// ModalDialogHeader\n// =============================================================================\n\nexport interface ModalDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `ModalDialogHeading`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogHeader\n * De headerstrook van het dialoogvenster met heading en sluitknop.\n */\nexport const ModalDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogHeaderProps\n>(({ className, children, ...props }, ref) => {\n  const { onClose } = React.useContext(ModalDialogContext);\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__header', className)}\n      {...props}\n    >\n      {children}\n      <Button\n        variant=\"subtle\"\n        size=\"small\"\n        iconOnly\n        onClick={onClose}\n        iconStart={<Icon name=\"x\" aria-hidden />}\n      >\n        Sluiten\n      </Button>\n    </div>\n  );\n});\n\nModalDialogHeader.displayName = 'ModalDialogHeader';\n\n// =============================================================================\n// ModalDialogHeading\n// =============================================================================\n\nexport interface ModalDialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogHeading\n * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const ModalDialogHeading = React.forwardRef<\n  HTMLHeadingElement,\n  ModalDialogHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(ModalDialogContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-modal-dialog-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nModalDialogHeading.displayName = 'ModalDialogHeading';\n\n// =============================================================================\n// ModalDialogBody\n// =============================================================================\n\nexport interface ModalDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van het dialoogvenster\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogBody\n * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.\n */\nexport const ModalDialogBody = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogBodyProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__body', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nModalDialogBody.displayName = 'ModalDialogBody';\n\n// =============================================================================\n// ModalDialogFooter\n// =============================================================================\n\nexport interface ModalDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De acties van het dialoogvenster — doorgaans een `ActionGroup` met knoppen\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogFooter\n * De voettekst van het dialoogvenster met actieknoppen.\n */\nexport const ModalDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogFooterProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__footer', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nModalDialogFooter.displayName = 'ModalDialogFooter';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './Popover.css';\n\n/*\n * React 18 ondersteunt het `popover`-attribuut en `onToggle` niet natively in de\n * JSX-types. Module-uitbreiding voegt de ontbrekende types toe.\n */\ndeclare module 'react' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface HTMLAttributes<T> {\n    popover?: 'auto' | 'manual' | '' | undefined;\n    popoverTarget?: string | undefined;\n    popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;\n  }\n}\n\n/*\n * HTMLElement.showPopover / hidePopover zijn nog niet in alle TypeScript DOM-libs.\n * Declaratie toegevoegd voor veilig gebruik.\n */\ndeclare global {\n  interface HTMLElement {\n    showPopover(): void;\n    hidePopover(): void;\n  }\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype Placement = 'top' | 'bottom' | 'start' | 'end';\n\n// =============================================================================\n// Positioneringshelper\n// =============================================================================\n\nconst GAP = 4; // px afstand tussen trigger en popover\n\nfunction positionPopover(\n  popover: HTMLElement,\n  trigger: HTMLElement,\n  placement: Placement\n): void {\n  const triggerRect = trigger.getBoundingClientRect();\n  // offsetWidth/offsetHeight — onaangepast door CSS transforms (zoals @starting-style scale).\n  // getBoundingClientRect geeft de getransformeerde afmetingen, wat leidt tot onjuiste clamping.\n  const popoverWidth = popover.offsetWidth;\n  const popoverHeight = popover.offsetHeight;\n  const popoverRect = { width: popoverWidth, height: popoverHeight };\n  const isRTL =\n    document.documentElement.dir === 'rtl' ||\n    getComputedStyle(trigger).direction === 'rtl';\n\n  let top: number;\n  let left: number;\n\n  switch (placement) {\n    case 'bottom':\n      top = triggerRect.bottom + GAP;\n      left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;\n      break;\n    case 'top':\n      top = triggerRect.top - popoverRect.height - GAP;\n      left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;\n      break;\n    case 'end':\n      top = triggerRect.top;\n      left = isRTL\n        ? triggerRect.left - popoverRect.width - GAP\n        : triggerRect.right + GAP;\n      break;\n    case 'start':\n      top = triggerRect.top;\n      left = isRTL\n        ? triggerRect.right + GAP\n        : triggerRect.left - popoverRect.width - GAP;\n      break;\n    default:\n      top = triggerRect.bottom + GAP;\n      left = triggerRect.left;\n  }\n\n  // Klamp binnen het viewport (8px marge)\n  const margin = 8;\n  left = Math.max(\n    margin,\n    Math.min(left, window.innerWidth - popoverRect.width - margin)\n  );\n  top = Math.max(\n    margin,\n    Math.min(top, window.innerHeight - popoverRect.height - margin)\n  );\n\n  popover.style.top = `${top}px`;\n  popover.style.left = `${left}px`;\n  popover.style.right = 'auto';\n  popover.style.bottom = 'auto';\n}\n\n// Zet focus op het eerste interactieve element in de popover\nfunction focusFirstInteractive(container: HTMLElement): void {\n  const selector = [\n    'button:not(:disabled)',\n    'a[href]',\n    'input:not(:disabled)',\n    'select:not(:disabled)',\n    'textarea:not(:disabled)',\n    '[tabindex]:not([tabindex=\"-1\"])',\n  ].join(', ');\n  const first = container.querySelector<HTMLElement>(selector);\n  if (first) {\n    first.focus();\n  } else {\n    container.focus();\n  }\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface PopoverContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// Popover (root)\n// =============================================================================\n\nexport interface PopoverProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of de popover getoond wordt.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback bij sluiten (Escape, klik buiten, sluitknop in header).\n   */\n  onClose?: () => void;\n\n  /**\n   * Referentie naar het triggerelement voor positionering en focus-herstel.\n   */\n  triggerRef: React.RefObject<HTMLElement>;\n\n  /**\n   * Gewenste plaatsing relatief aan het triggerelement.\n   * @default 'bottom'\n   */\n  placement?: Placement;\n\n  /**\n   * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.\n   * Gebruik `aria-labelledby` via context wanneer er wél een heading is.\n   */\n  label?: string;\n\n  /**\n   * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Popover component\n * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.\n *\n * Gebaseerd op de HTML Popover API (`popover=\"auto\"`) voor ingebakken\n * light-dismiss en top-layer gedrag. Positionering via JavaScript.\n *\n * @example\n * ```tsx\n * const triggerRef = useRef<HTMLButtonElement>(null);\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>\n * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label=\"Opties\">\n *   <PopoverBody>\n *     <Menu>...</Menu>\n *   </PopoverBody>\n * </Popover>\n * ```\n */\nexport const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(\n  (\n    {\n      className,\n      isOpen,\n      onClose,\n      triggerRef,\n      placement = 'bottom',\n      label,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLDivElement>(null);\n    const popoverRef = (ref as React.RefObject<HTMLDivElement>) ?? internalRef;\n    const headingId = React.useId();\n\n    // Toon/verberg popover via de Popover API\n    React.useEffect(() => {\n      const el = popoverRef.current;\n      if (!el) return;\n\n      if (isOpen) {\n        el.showPopover();\n        const trigger = triggerRef.current;\n        if (trigger) {\n          positionPopover(el, trigger, placement);\n        }\n        focusFirstInteractive(el);\n      } else {\n        // hidePopover gooit een fout als de popover al gesloten is\n        try {\n          el.hidePopover();\n        } catch {\n          // popover was al gesloten — geen actie nodig\n        }\n      }\n    }, [isOpen, placement, triggerRef, popoverRef]);\n\n    // Synchroniseer aria-expanded op het triggerelement\n    React.useEffect(() => {\n      const trigger = triggerRef.current;\n      if (!trigger) return;\n      trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n      return () => {\n        trigger.setAttribute('aria-expanded', 'false');\n      };\n    }, [isOpen, triggerRef]);\n\n    // Verwerk het toggle-event van de Popover API (Escape / klik buiten binnen hetzelfde document)\n    // onToggle is niet beschikbaar als JSX-prop op div in React 18 — gebruik addEventListener.\n    // Gebruik een ref voor onClose zodat de listener stabiel blijft en nooit stale is.\n    const onCloseRef = React.useRef(onClose);\n    onCloseRef.current = onClose;\n\n    React.useEffect(() => {\n      const el = popoverRef.current;\n      if (!el) return;\n\n      const handleToggle = (event: Event) => {\n        const toggleEvent = event as Event & { newState?: string };\n        if (toggleEvent.newState === 'closed') {\n          onCloseRef.current?.();\n          triggerRef.current?.focus();\n        }\n      };\n\n      el.addEventListener('toggle', handleToggle);\n      return () => {\n        el.removeEventListener('toggle', handleToggle);\n      };\n    }, [triggerRef, popoverRef]);\n\n    // Fallback light-dismiss via pointerdown — vangt klikken buiten het popover op\n    // in contexten waar de Popover API's native light-dismiss niet bereikbaar is\n    // (bijv. iframe-grenzen, of oudere browsers zonder Popover API).\n    React.useEffect(() => {\n      if (!isOpen) return;\n      const el = popoverRef.current;\n      if (!el) return;\n\n      const handlePointerDown = (event: PointerEvent) => {\n        const target = event.target as Node;\n        // Sluit niet als er op de popover zelf of het triggerelement geklikt wordt\n        if (el.contains(target) || triggerRef.current?.contains(target)) return;\n        onCloseRef.current?.();\n        triggerRef.current?.focus();\n      };\n\n      document.addEventListener('pointerdown', handlePointerDown);\n      return () => {\n        document.removeEventListener('pointerdown', handlePointerDown);\n      };\n    }, [isOpen, triggerRef, popoverRef]);\n\n    const classes = classNames(\n      'dsn-popover',\n      `dsn-popover--placement-${placement}`,\n      className\n    );\n\n    const ariaProps = label\n      ? { 'aria-label': label }\n      : { 'aria-labelledby': headingId };\n\n    return (\n      <PopoverContext.Provider value={{ headingId, onClose }}>\n        <div\n          ref={popoverRef}\n          popover=\"auto\"\n          className={classes}\n          role=\"dialog\"\n          aria-modal=\"false\"\n          tabIndex={-1}\n          {...ariaProps}\n          {...props}\n        >\n          {children}\n        </div>\n      </PopoverContext.Provider>\n    );\n  }\n);\n\nPopover.displayName = 'Popover';\n\n// =============================================================================\n// PopoverHeader\n// =============================================================================\n\nexport interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `PopoverHeading`.\n   * De sluitknop wordt automatisch geïnjecteerd.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverHeader\n * De headerstrook van de popover met heading en sluitknop.\n */\nexport const PopoverHeader = React.forwardRef<\n  HTMLDivElement,\n  PopoverHeaderProps\n>(({ className, children, ...props }, ref) => {\n  const { onClose } = React.useContext(PopoverContext);\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-popover__header', className)}\n      {...props}\n    >\n      {children}\n      <Button\n        variant=\"subtle\"\n        size=\"small\"\n        iconOnly\n        onClick={onClose}\n        iconStart={<Icon name=\"x\" aria-hidden />}\n      >\n        Sluiten\n      </Button>\n    </div>\n  );\n});\n\nPopoverHeader.displayName = 'PopoverHeader';\n\n// =============================================================================\n// PopoverHeading\n// =============================================================================\n\nexport interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverHeading\n * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const PopoverHeading = React.forwardRef<\n  HTMLHeadingElement,\n  PopoverHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(PopoverContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-popover-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nPopoverHeading.displayName = 'PopoverHeading';\n\n// =============================================================================\n// PopoverBody\n// =============================================================================\n\nexport interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van de popover — willekeurige slot-content.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverBody\n * De inhoudssectie van de popover.\n */\nexport const PopoverBody = React.forwardRef<HTMLDivElement, PopoverBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-popover__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nPopoverBody.displayName = 'PopoverBody';\n\n// =============================================================================\n// PopoverFooter\n// =============================================================================\n\nexport interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Actieknoppen of slotzin van de popover.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * PopoverFooter\n * De voettekst van de popover met actieknoppen.\n */\nexport const PopoverFooter = React.forwardRef<\n  HTMLDivElement,\n  PopoverFooterProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-popover__footer', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nPopoverFooter.displayName = 'PopoverFooter';\n","import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport './File.css';\n\nexport type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';\nexport type FileCtaVariant = 'view' | 'download';\nexport type FileMediaType = 'document' | 'image';\n\nexport interface FileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Bestandsnaam inclusief extensie (vereist). Extensie wordt visueel afgekapt. */\n  fileName: string;\n\n  /** Bestandstype als afkorting: \"PDF\", \"JPG\". Getoond in dsn-file__meta. */\n  fileType?: string;\n\n  /** Bestandsgrootte als geformatteerde string: \"1,2 MB\". */\n  fileSize?: string;\n\n  /**\n   * State van het bestand.\n   * Bij 'uploaded' keert het component na 2 seconden automatisch terug naar 'default'.\n   * @default 'default'\n   */\n  status?: FileStatus;\n\n  /** Foutmelding, getoond bij status=\"error\". */\n  errorMessage?: string;\n\n  /** URL naar het bestand. Maakt de naam een <a> en schakelt de interactieve variant in. */\n  href?: string;\n\n  /** Callback voor de verwijderactie. Toont de \"Verwijder\"-knop. */\n  onDelete?: () => void;\n\n  /**\n   * Zichtbare tekst op de verwijder-knop.\n   * @default \"Verwijder\"\n   */\n  deleteLabel?: string;\n\n  /**\n   * CTA-type in de interactieve variant.\n   * 'view' toont geen aparte CTA; de bestandsnaam opent als stretched link in een nieuw tabblad.\n   * 'download' toont een aparte download-knop; de bestandsnaam opent in een nieuw tabblad.\n   * @default 'view'\n   */\n  ctaVariant?: FileCtaVariant;\n\n  /**\n   * Overschrijft het standaard CTA-label voor de download-variant.\n   * Standaard: \"Download\".\n   */\n  ctaLabel?: string;\n\n  /**\n   * Bepaalt het icoon: file-description.svg of photo.svg.\n   * Genegeerd wanneer previewSrc aanwezig is.\n   * @default 'document'\n   */\n  mediaType?: FileMediaType;\n\n  /** URL van de afbeeldingspreview. Vervangt het icoon in het media-vlak. */\n  previewSrc?: string;\n\n  /**\n   * Visueel verborgen label voor de Spinner.\n   * @default \"Bezig met uploaden\"\n   */\n  loadingLabel?: string;\n\n  /**\n   * Tekst voor de aria-live regio bij de uploaded state.\n   * @default \"{fileName} succesvol geüpload\"\n   */\n  uploadedLabel?: string;\n\n  /**\n   * Tekst voor de aria-live regio bij de error state.\n   * Standaard \"{fileName}: {errorMessage}\", of \"{fileName} uploaden mislukt\"\n   * wanneer er geen errorMessage is.\n   */\n  errorLabel?: string;\n}\n\n/**\n * File component\n * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.\n * Ondersteunt vier upload-states (default, loading, uploaded, error) en een\n * interactieve variant voor controle- of detailpagina's.\n *\n * @example\n * ```tsx\n * // Default — eerder geüpload bestand, met verwijder-optie\n * <File\n *   fileName=\"document.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"1,2 MB\"\n *   href=\"/bestanden/document.pdf\"\n *   onDelete={() => handleDelete()}\n * />\n *\n * // Interactief — bestandsnaam als link (nieuw tabblad)\n * <File\n *   fileName=\"rapport-2024.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"2,1 MB\"\n *   href=\"/bestanden/rapport-2024.pdf\"\n * />\n *\n * // Interactief — download CTA\n * <File\n *   fileName=\"rapport-2024.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"2,1 MB\"\n *   href=\"/bestanden/rapport-2024.pdf\"\n *   ctaVariant=\"download\"\n * />\n * ```\n */\nexport const File = React.forwardRef<HTMLDivElement, FileProps>(\n  (\n    {\n      className,\n      fileName,\n      fileType,\n      fileSize,\n      status = 'default',\n      errorMessage,\n      href,\n      onDelete,\n      deleteLabel = 'Verwijder',\n      ctaVariant = 'view',\n      ctaLabel,\n      mediaType = 'document',\n      previewSrc,\n      loadingLabel = 'Bezig met uploaden',\n      uploadedLabel,\n      errorLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const [currentStatus, setCurrentStatus] =\n      React.useState<FileStatus>(status);\n    const [liveText, setLiveText] = React.useState('');\n\n    // Synchroniseer externe status-prop met interne state\n    React.useEffect(() => {\n      setCurrentStatus(status);\n    }, [status]);\n\n    // Vul de aria-live regio bij een eindstatus van de upload.\n    // De tekst wordt pas ná de eerste render gezet, zodat screenreaders de\n    // wijziging in de regio waarnemen en aankondigen.\n    React.useEffect(() => {\n      // Uploaded: kondig succes aan en keer na 2s terug naar default\n      if (currentStatus === 'uploaded') {\n        setLiveText(uploadedLabel ?? `${fileName} succesvol geüpload`);\n\n        const timer = setTimeout(() => {\n          setCurrentStatus('default');\n          setLiveText('');\n        }, 2000);\n\n        return () => clearTimeout(timer);\n      }\n\n      // Error: kondig de mislukking aan, inclusief de reden wanneer bekend.\n      // De tekst blijft staan zolang de error-state actief is.\n      if (currentStatus === 'error') {\n        setLiveText(\n          errorLabel ??\n            (errorMessage\n              ? `${fileName}: ${errorMessage}`\n              : `${fileName} uploaden mislukt`)\n        );\n        return undefined;\n      }\n\n      // Default en loading: geen aankondiging\n      setLiveText('');\n      return undefined;\n    }, [currentStatus, fileName, uploadedLabel, errorLabel, errorMessage]);\n\n    // Bestandsnaam zonder extensie voor visuele weergave\n    const fileNameWithoutExt = React.useMemo(() => {\n      const lastDot = fileName.lastIndexOf('.');\n      return lastDot > 0 ? fileName.slice(0, lastDot) : fileName;\n    }, [fileName]);\n\n    // Meta-tekst: \"PDF · 1,2 MB\" of alleen type of grootte\n    const metaParts = [fileType, fileSize].filter(Boolean);\n    const metaText = metaParts.join(' · ');\n\n    // Interactieve modus: href aanwezig en geen onDelete\n    const isInteractive = Boolean(href) && !onDelete;\n    // Stretched link: interactief zonder aparte download-CTA\n    const isStretchedLink = isInteractive && ctaVariant !== 'download';\n\n    const rootClasses = classNames(\n      'dsn-file',\n      currentStatus === 'loading' && 'dsn-file--loading',\n      currentStatus === 'uploaded' && 'dsn-file--uploaded',\n      currentStatus === 'error' && 'dsn-file--error',\n      isStretchedLink && 'dsn-file--interactive',\n      className\n    );\n\n    const nameClasses = classNames(\n      'dsn-file__name',\n      href && 'dsn-link',\n      isStretchedLink && 'dsn-file__name--stretched'\n    );\n\n    const iconName = mediaType === 'image' ? 'photo' : 'file-description';\n    const resolvedCtaLabel = ctaLabel ?? 'Download';\n\n    return (\n      <div ref={ref} className={rootClasses} {...props}>\n        {/* Media-vlak: icoon of preview */}\n        <div className=\"dsn-file__media\" aria-hidden=\"true\">\n          {previewSrc ? (\n            <img className=\"dsn-file__preview\" src={previewSrc} alt=\"\" />\n          ) : (\n            <Icon name={iconName} aria-hidden />\n          )}\n        </div>\n\n        {/* Content: naam, meta en optionele ErrorMessage */}\n        <div className=\"dsn-file__content\">\n          {href ? (\n            <a\n              className={nameClasses}\n              href={href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {fileNameWithoutExt}\n            </a>\n          ) : (\n            <span className={nameClasses}>{fileNameWithoutExt}</span>\n          )}\n          {metaText && <span className=\"dsn-file__meta\">{metaText}</span>}\n          {currentStatus === 'error' && errorMessage && (\n            <FormFieldErrorMessage>{errorMessage}</FormFieldErrorMessage>\n          )}\n        </div>\n\n        {/* Actions: Spinner, status-icoon, verwijder-knop of CTA-link */}\n        <div className=\"dsn-file__actions\">\n          {!isInteractive && currentStatus === 'loading' && (\n            <Spinner label={loadingLabel} hideLabel />\n          )}\n          {!isInteractive && currentStatus === 'uploaded' && (\n            <Icon className=\"dsn-file__status-icon\" name=\"check\" aria-hidden />\n          )}\n          {!isInteractive &&\n            (currentStatus === 'default' || currentStatus === 'error') &&\n            onDelete && (\n              <button\n                type=\"button\"\n                className=\"dsn-link dsn-link-button dsn-link--size-default\"\n                onClick={onDelete}\n              >\n                <Icon name=\"trash\" aria-hidden />\n                {deleteLabel}\n                <span className=\"dsn-visually-hidden\"> {fileName}</span>\n              </button>\n            )}\n          {isInteractive && ctaVariant === 'download' && (\n            <a\n              className=\"dsn-link\"\n              href={href}\n              aria-hidden=\"true\"\n              tabIndex={-1}\n              download\n            >\n              <Icon name=\"download\" aria-hidden />\n              {resolvedCtaLabel}\n            </a>\n          )}\n        </div>\n\n        {/* aria-live regio: kondigt statuswijzigingen aan voor screenreaders */}\n        <span\n          className=\"dsn-visually-hidden\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {liveText}\n        </span>\n      </div>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\n// =============================================================================\n// FileList — ul wrapper voor meerdere File items\n// =============================================================================\n\nexport interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {\n  /** File componenten */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * FileList component\n * Wrapper voor meerdere File componenten.\n * Rendert een <ul role=\"list\"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.\n *\n * @example\n * ```tsx\n * <FileList>\n *   <File fileName=\"document.pdf\" fileType=\"PDF\" fileSize=\"1,2 MB\" href=\"...\" onDelete={() => {}} />\n *   <File fileName=\"foto.jpg\" fileType=\"JPG\" fileSize=\"3,4 MB\" href=\"...\" onDelete={() => {}} />\n * </FileList>\n * ```\n */\nexport const FileList = React.forwardRef<HTMLUListElement, FileListProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={classNames('dsn-file-list', className)}\n        role=\"list\"\n        {...props}\n      >\n        {React.Children.map(children, (child, index) => (\n          <li key={index}>{child}</li>\n        ))}\n      </ul>\n    );\n  }\n);\n\nFileList.displayName = 'FileList';\n"],"mappings":"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"}