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

package/dist/Grid/GridItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../src/Grid/GridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3E,MAAM,MAAM,eAAe,GACvB,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAEP,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,QAAQ,sFA6CpB,CAAC"}

package/dist/Grid/GridItem.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-/**
- * GridItem component
- * Directe child van Grid met kolomspanning en optionele responsive varianten.
- *
- * @example
- * ```tsx
- * // Vaste kolomverdeling
- * <Grid>
- *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
- *   <GridItem colSpan={4}>Sidebar</GridItem>
- * </Grid>
- *
- * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg
- * <Grid contained>
- *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
- *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
- *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>
- * </Grid>
- *
- * // Full-bleed: breekt uit tot de container-randen
- * <Grid contained>
- *   <GridItem colSpan={8}>Normale content</GridItem>
- *   <GridItem fullBleed>
- *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>
- *       Edge-to-edge sectie
- *     </div>
- *   </GridItem>
- * </Grid>
- * ```
- */
-export const GridItem = React.forwardRef(({ className, colSpan, colSpanSm, colSpanMd, colSpanLg, colStart, colStartSm, colStartMd, colStartLg, colEnd, colEndSm, colEndMd, colEndLg, fullBleed, children, ...props }, ref) => {
-    const classes = classNames(colSpan && `dsn-col-${colSpan}`, colSpanSm && `dsn-col-sm-${colSpanSm}`, colSpanMd && `dsn-col-md-${colSpanMd}`, colSpanLg && `dsn-col-lg-${colSpanLg}`, colStart && `dsn-col-start-${colStart}`, colStartSm && `dsn-col-start-sm-${colStartSm}`, colStartMd && `dsn-col-start-md-${colStartMd}`, colStartLg && `dsn-col-start-lg-${colStartLg}`, colEnd && `dsn-col-end-${colEnd}`, colEndSm && `dsn-col-end-sm-${colEndSm}`, colEndMd && `dsn-col-end-md-${colEndMd}`, colEndLg && `dsn-col-end-lg-${colEndLg}`, fullBleed && 'dsn-full-bleed', className);
-    return (_jsx("div", { ref: ref, className: classes || undefined, ...props, children: children }));
-});
-GridItem.displayName = 'GridItem';
-//# sourceMappingURL=GridItem.js.map

package/dist/Grid/GridItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../src/Grid/GridItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA2EnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,OAAO,IAAI,WAAW,OAAO,EAAE,EAC/B,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,QAAQ,IAAI,iBAAiB,QAAQ,EAAE,EACvC,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,MAAM,IAAI,eAAe,MAAM,EAAE,EACjC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,SAAS,IAAI,gBAAgB,EAC7B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,IAAI,SAAS,KAAM,KAAK,YACtD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Grid/index.d.ts

@@ -1,5 +0,0 @@
-export { Grid } from './Grid';
-export type { GridProps } from './Grid';
-export { GridItem } from './GridItem';
-export type { GridItemProps, GridColSpan } from './GridItem';
-//# sourceMappingURL=index.d.ts.map

package/dist/Grid/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/Grid/index.js

@@ -1,3 +0,0 @@
-export { Grid } from './Grid';
-export { GridItem } from './GridItem';
-//# sourceMappingURL=index.js.map

package/dist/Grid/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/Heading/Heading.css

@@ -1,81 +0,0 @@
-/**
- * Heading Component Styles for React
- * Re-exports the base Heading styles from components-html
- */
-
-/**
- * Heading Component
- * Uses semantic component tokens for consistent styling
- *
- * Each appearance level has its own complete set of tokens
- * (font-family, font-weight, color, font-size, line-height, margin).
- *
- * The `level` prop controls the semantic HTML element (h1–h6).
- * The `appearance` prop controls the visual style, independently of level.
- */
-
-.dsn-heading {
-  margin-block-start: 0;
-  text-wrap: balance;
-}
-
-/* Heading 1 Appearance */
-.dsn-heading--heading-1 {
-  font-family: var(--dsn-heading-level-1-font-family);
-  font-weight: var(--dsn-heading-level-1-font-weight);
-  color: var(--dsn-heading-level-1-color);
-  font-size: var(--dsn-heading-level-1-font-size);
-  line-height: var(--dsn-heading-level-1-line-height);
-  margin-block-end: var(--dsn-heading-level-1-margin-block-end);
-}
-
-/* Heading 2 Appearance */
-.dsn-heading--heading-2 {
-  font-family: var(--dsn-heading-level-2-font-family);
-  font-weight: var(--dsn-heading-level-2-font-weight);
-  color: var(--dsn-heading-level-2-color);
-  font-size: var(--dsn-heading-level-2-font-size);
-  line-height: var(--dsn-heading-level-2-line-height);
-  margin-block-end: var(--dsn-heading-level-2-margin-block-end);
-}
-
-/* Heading 3 Appearance */
-.dsn-heading--heading-3 {
-  font-family: var(--dsn-heading-level-3-font-family);
-  font-weight: var(--dsn-heading-level-3-font-weight);
-  color: var(--dsn-heading-level-3-color);
-  font-size: var(--dsn-heading-level-3-font-size);
-  line-height: var(--dsn-heading-level-3-line-height);
-  margin-block-end: var(--dsn-heading-level-3-margin-block-end);
-}
-
-/* Heading 4 Appearance */
-.dsn-heading--heading-4 {
-  font-family: var(--dsn-heading-level-4-font-family);
-  font-weight: var(--dsn-heading-level-4-font-weight);
-  color: var(--dsn-heading-level-4-color);
-  font-size: var(--dsn-heading-level-4-font-size);
-  line-height: var(--dsn-heading-level-4-line-height);
-  margin-block-end: var(--dsn-heading-level-4-margin-block-end);
-}
-
-/* Heading 5 Appearance */
-.dsn-heading--heading-5 {
-  font-family: var(--dsn-heading-level-5-font-family);
-  font-weight: var(--dsn-heading-level-5-font-weight);
-  color: var(--dsn-heading-level-5-color);
-  font-size: var(--dsn-heading-level-5-font-size);
-  line-height: var(--dsn-heading-level-5-line-height);
-  margin-block-end: var(--dsn-heading-level-5-margin-block-end);
-}
-
-/* Heading 6 Appearance */
-.dsn-heading--heading-6 {
-  font-family: var(--dsn-heading-level-6-font-family);
-  font-weight: var(--dsn-heading-level-6-font-weight);
-  color: var(--dsn-heading-level-6-color);
-  font-size: var(--dsn-heading-level-6-font-size);
-  line-height: var(--dsn-heading-level-6-line-height);
-  margin-block-end: var(--dsn-heading-level-6-margin-block-end);
-}
-

package/dist/Heading/Heading.d.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import './Heading.css';
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export type HeadingAppearance = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * Semantic heading level — determines the HTML element (h1–h6)
-     * @default 2
-     */
-    level?: HeadingLevel;
-    /**
-     * Visual appearance — controls font size, line height, and spacing.
-     * Defaults to matching the level (e.g. level 2 → heading-2).
-     */
-    appearance?: HeadingAppearance;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Heading content
-     */
-    children?: React.ReactNode;
-}
-/**
- * Heading component with independent semantic level and visual appearance
- *
- * @example
- * ```tsx
- * // Basic usage — level and appearance match
- * <Heading level={1}>Page Title</Heading>
- *
- * // Semantic h2, styled as heading-4
- * <Heading level={2} appearance="heading-4">Subsection</Heading>
- * ```
- */
-export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
-//# sourceMappingURL=Heading.d.ts.map

package/dist/Heading/Heading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACjD,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC5E;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,yFAkBnB,CAAC"}

package/dist/Heading/Heading.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Heading.css';
-/**
- * Heading component with independent semantic level and visual appearance
- *
- * @example
- * ```tsx
- * // Basic usage — level and appearance match
- * <Heading level={1}>Page Title</Heading>
- *
- * // Semantic h2, styled as heading-4
- * <Heading level={2} appearance="heading-4">Subsection</Heading>
- * ```
- */
-export const Heading = React.forwardRef(({ level = 2, appearance, className, children, ...props }, ref) => {
-    const resolvedAppearance = appearance ?? `heading-${level}`;
-    const Tag = `h${level}`;
-    const classes = classNames('dsn-heading', `dsn-heading--${resolvedAppearance}`, className);
-    return (_jsx(Tag, { ref: ref, className: classes, ...props, children: children }));
-});
-Heading.displayName = 'Heading';
-//# sourceMappingURL=Heading.js.map

package/dist/Heading/Heading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,eAAe,CAAC;AAmCvB;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,kBAAkB,GACtB,UAAU,IAAK,WAAW,KAAK,EAAwB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,KAAK,EAAW,CAAC;IAEjC,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,gBAAgB,kBAAkB,EAAE,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Heading/index.d.ts

@@ -1,3 +0,0 @@
-export { Heading } from './Heading';
-export type { HeadingProps, HeadingLevel, HeadingAppearance } from './Heading';
-//# sourceMappingURL=index.d.ts.map

package/dist/Heading/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/Heading/index.js

@@ -1,2 +0,0 @@
-export { Heading } from './Heading';
-//# sourceMappingURL=index.js.map

package/dist/Heading/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/HeadingGroup/HeadingGroup.css

@@ -1,5 +0,0 @@
-.dsn-heading-group {
-  display: flex;
-  flex-direction: column;
-}
-

package/dist/HeadingGroup/HeadingGroup.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import type { HeadingLevel, HeadingAppearance } from '../Heading/Heading';
-import './HeadingGroup.css';
-export interface HeadingGroupProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * Semantic heading level — determines the HTML element (h1–h6)
-     * @default 2
-     */
-    level?: HeadingLevel;
-    /**
-     * Visual appearance — controls font size, line height, and spacing.
-     * Defaults to matching the level (e.g. level 2 → heading-2).
-     */
-    appearance?: HeadingAppearance;
-    /**
-     * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.
-     */
-    preHeading?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string;
-}
-export declare const HeadingGroup: React.ForwardRefExoticComponent<HeadingGroupProps & React.RefAttributes<HTMLHeadingElement>>;
-//# sourceMappingURL=HeadingGroup.d.ts.map

package/dist/HeadingGroup/HeadingGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeadingGroup.d.ts","sourceRoot":"","sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACjF;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,8FA4BxB,CAAC"}

package/dist/HeadingGroup/HeadingGroup.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './HeadingGroup.css';
-export const HeadingGroup = React.forwardRef(({ level = 2, appearance, preHeading, className, children, ...props }, ref) => {
-    const resolvedAppearance = appearance ?? `heading-${level}`;
-    const Tag = `h${level}`;
-    const classes = classNames('dsn-heading', `dsn-heading--${resolvedAppearance}`, 'dsn-heading-group', className);
-    return (_jsxs(Tag, { ref: ref, className: classes, ...props, children: [preHeading != null && (_jsx("span", { className: "dsn-pre-heading", children: preHeading })), children] }));
-});
-HeadingGroup.displayName = 'HeadingGroup';
-//# sourceMappingURL=HeadingGroup.js.map

package/dist/HeadingGroup/HeadingGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeadingGroup.js","sourceRoot":"","sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,oBAAoB,CAAC;AAwB5B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAI1C,CACE,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,EACH,EAAE;IACF,MAAM,kBAAkB,GACtB,UAAU,IAAK,WAAW,KAAK,EAAwB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,KAAK,EAAW,CAAC;IAEjC,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,gBAAgB,kBAAkB,EAAE,EACpC,mBAAmB,EACnB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,MAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aACzC,UAAU,IAAI,IAAI,IAAI,CACrB,eAAM,SAAS,EAAC,iBAAiB,YAAE,UAAU,GAAQ,CACtD,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/HeadingGroup/index.d.ts

@@ -1,3 +0,0 @@
-export { HeadingGroup } from './HeadingGroup';
-export type { HeadingGroupProps } from './HeadingGroup';
-//# sourceMappingURL=index.d.ts.map

package/dist/HeadingGroup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HeadingGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/HeadingGroup/index.js

@@ -1,2 +0,0 @@
-export { HeadingGroup } from './HeadingGroup';
-//# sourceMappingURL=index.js.map

package/dist/HeadingGroup/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/HeadingGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/Hero/Hero.css

@@ -1,209 +0,0 @@
-/**
- * Hero Component
- * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
- * paginabreedte via het BreakoutSection-patroon (margin-inline: calc(50% - 50vw)).
- *
- * Vereiste: de parent heeft overflow-x: clip (dsn-page-body).
- *
- * Usage:
- * <section class="dsn-hero" aria-labelledby="hero-heading">
- *   <div class="dsn-hero__inner">
- *     <div class="dsn-hero__content">
- *       <!-- heading, paragraph, action group of searchbox -->
- *     </div>
- *   </div>
- * </section>
- *
- * Searchbox (zoekfunctie als primaire actie):
- * <div class="dsn-hero__searchbox">
- *   <!-- SearchInput wrapper + submit button -->
- * </div>
- */
-
-/* =============================================================================
-   Base
-   ============================================================================= */
-
-.dsn-hero {
-  margin-inline: calc(50% - 50vw);
-  border-block-start: var(--dsn-hero-border-block-width) solid
-    var(--dsn-color-transparent);
-  border-block-end: var(--dsn-hero-border-block-width) solid
-    var(--dsn-color-transparent);
-  min-block-size: max(
-    var(--dsn-hero-min-block-size),
-    var(--dsn-hero-block-size)
-  );
-  background-color: var(--dsn-hero-background-color-default);
-  color: var(--dsn-hero-color-default);
-  display: flex;
-  flex-direction: column;
-}
-
-/* =============================================================================
-   Inner — centrerende wrapper (stemt af op dsn-page-body__inner)
-   ============================================================================= */
-
-.dsn-hero__inner {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  max-inline-size: var(--dsn-page-max-inline-size);
-  margin-inline: auto;
-  padding-inline: var(--dsn-hero-padding-inline);
-  padding-block: var(--dsn-hero-padding-block);
-  inline-size: 100%;
-}
-
-/* =============================================================================
-   Content — verticaal gecentreerde slot-container
-   ============================================================================= */
-
-.dsn-hero__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-/* =============================================================================
-   Searchbox — zoekveld + submit button naast elkaar
-   ============================================================================= */
-
-.dsn-hero__searchbox {
-  display: flex;
-  align-items: center;
-  gap: var(--dsn-space-inline-md);
-}
-
-/* SearchInput wrapper vult beschikbare ruimte; button behoudt zijn natuurlijke breedte */
-.dsn-hero__searchbox .dsn-search-input-wrapper {
-  flex: 1;
-  min-inline-size: 0;
-  max-inline-size: none;
-}
-
-.dsn-hero__searchbox .dsn-text-input {
-  max-inline-size: none;
-  inline-size: 100%;
-}
-
-/* =============================================================================
-   Modifier: --inverse
-   Achtergrond + tekst- en componentkleur-overrides via CSS custom properties.
-   Patroon identiek aan PageHeader en PageFooter --inverse.
-   ============================================================================= */
-
-.dsn-hero--inverse {
-  background-color: var(--dsn-hero-background-color-inverse);
-  color: var(--dsn-hero-color-inverse);
-
-  /* Tekst-componenten */
-  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-4-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-5-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-6-color: var(--dsn-hero-color-inverse);
-  --dsn-paragraph-color: var(--dsn-hero-color-inverse);
-
-  /* Strong button — action-1 kleurenschaal op inverse achtergrond */
-  --dsn-button-strong-background-color: var(--dsn-color-action-1-bg-default);
-  --dsn-button-strong-color: var(--dsn-color-action-1-color-default);
-  --dsn-button-strong-hover-background-color: var(
-    --dsn-color-action-1-bg-hover
-  );
-  --dsn-button-strong-hover-color: var(--dsn-color-action-1-color-hover);
-  --dsn-button-strong-active-background-color: var(
-    --dsn-color-action-1-bg-active
-  );
-  --dsn-button-strong-active-color: var(--dsn-color-action-1-color-active);
-
-  /* Subtle button — transparant met lichte tekst/rand op inverse achtergrond */
-  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
-  --dsn-button-subtle-hover-background-color: var(
-    --dsn-color-accent-1-inverse-bg-hover
-  );
-  --dsn-button-subtle-hover-color: var(
-    --dsn-color-accent-1-inverse-color-hover
-  );
-  --dsn-button-subtle-active-background-color: var(
-    --dsn-color-accent-1-inverse-bg-active
-  );
-  --dsn-button-subtle-active-color: var(
-    --dsn-color-accent-1-inverse-color-active
-  );
-}
-
-/* =============================================================================
-   Modifier: --image
-   ============================================================================= */
-
-.dsn-hero--image {
-  background-image: var(--dsn-hero-bg-image);
-  background-size: cover;
-  background-position: center;
-  color: var(--dsn-hero-color-inverse);
-
-  /* Tekst-componenten */
-  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-4-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-5-color: var(--dsn-hero-color-inverse);
-  --dsn-heading-level-6-color: var(--dsn-hero-color-inverse);
-  --dsn-paragraph-color: var(--dsn-hero-color-inverse);
-
-  /* Buttons — zelfde als inverse */
-  --dsn-button-strong-background-color: var(--dsn-color-action-1-bg-default);
-  --dsn-button-strong-color: var(--dsn-color-action-1-color-default);
-  --dsn-button-strong-hover-background-color: var(
-    --dsn-color-action-1-bg-hover
-  );
-  --dsn-button-strong-hover-color: var(--dsn-color-action-1-color-hover);
-  --dsn-button-strong-active-background-color: var(
-    --dsn-color-action-1-bg-active
-  );
-  --dsn-button-strong-active-color: var(--dsn-color-action-1-color-active);
-  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
-  --dsn-button-subtle-hover-background-color: var(
-    --dsn-color-accent-1-inverse-bg-hover
-  );
-  --dsn-button-subtle-hover-color: var(
-    --dsn-color-accent-1-inverse-color-hover
-  );
-  --dsn-button-subtle-active-background-color: var(
-    --dsn-color-accent-1-inverse-bg-active
-  );
-  --dsn-button-subtle-active-color: var(
-    --dsn-color-accent-1-inverse-color-active
-  );
-}
-
-/* =============================================================================
-   Modifier: --image-blend (gecombineerd met --image)
-   ============================================================================= */
-
-.dsn-hero--image.dsn-hero--image-blend {
-  background-color: var(--dsn-hero-image-blend-color);
-  background-blend-mode: multiply;
-}
-
-/* =============================================================================
-   Modifier: --align-center
-   ============================================================================= */
-
-.dsn-hero--align-center .dsn-hero__content {
-  align-items: center;
-  text-align: center;
-}
-
-/* ActionGroup en searchbox centreren mee */
-.dsn-hero--align-center .dsn-action-group {
-  justify-content: center;
-}
-
-.dsn-hero--align-center .dsn-hero__searchbox {
-  justify-content: center;
-}
-

package/dist/Hero/Hero.d.ts

@@ -1,45 +0,0 @@
-import React from 'react';
-import './Hero.css';
-export type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';
-export type HeroAlign = 'start' | 'center';
-export interface HeroProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Achtergrondstijl van de Hero.
-     * @default 'default'
-     */
-    variant?: HeroVariant;
-    /**
-     * URL van de achtergrondafbeelding — vereist bij `variant="image"` of `"image-blend"`.
-     * Wordt toegepast als CSS custom property `--dsn-hero-bg-image`.
-     */
-    backgroundImage?: string;
-    /**
-     * Horizontale uitlijning van de inhoud en tekst.
-     * @default 'start'
-     */
-    align?: HeroAlign;
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * Hero component
- * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
- * paginabreedte via het BreakoutSection-patroon.
- *
- * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).
- *
- * @example
- * ```tsx
- * <Hero>
- *   <Stack space="lg">
- *     <Heading level={1}>Paginatitel</Heading>
- *     <Paragraph variant="lead">Introductietekst.</Paragraph>
- *     <ActionGroup>
- *       <ButtonLink href="/start" variant="strong" size="large">Aan de slag</ButtonLink>
- *     </ActionGroup>
- *   </Stack>
- * </Hero>
- * ```
- */
-export declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=Hero.d.ts.map

package/dist/Hero/Hero.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,+EAoChB,CAAC"}

package/dist/Hero/Hero.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Hero.css';
-/**
- * Hero component
- * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
- * paginabreedte via het BreakoutSection-patroon.
- *
- * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).
- *
- * @example
- * ```tsx
- * <Hero>
- *   <Stack space="lg">
- *     <Heading level={1}>Paginatitel</Heading>
- *     <Paragraph variant="lead">Introductietekst.</Paragraph>
- *     <ActionGroup>
- *       <ButtonLink href="/start" variant="strong" size="large">Aan de slag</ButtonLink>
- *     </ActionGroup>
- *   </Stack>
- * </Hero>
- * ```
- */
-export const Hero = React.forwardRef(({ variant = 'default', backgroundImage, align = 'start', className, children, style, ...props }, ref) => {
-    const classes = classNames('dsn-hero', variant === 'inverse' && 'dsn-hero--inverse', (variant === 'image' || variant === 'image-blend') && 'dsn-hero--image', variant === 'image-blend' && 'dsn-hero--image-blend', align === 'center' && 'dsn-hero--align-center', className);
-    const inlineStyle = backgroundImage
-        ? { '--dsn-hero-bg-image': `url('${backgroundImage}')`, ...style }
-        : { ...style };
-    return (_jsx("section", { ref: ref, className: classes, style: inlineStyle, ...props, children: _jsx("div", { className: "dsn-hero__inner", children: _jsx("div", { className: "dsn-hero__content", children: children }) }) }));
-});
-Hero.displayName = 'Hero';
-//# sourceMappingURL=Hero.js.map

package/dist/Hero/Hero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AA4BpB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,OAAO,GAAG,SAAS,EACnB,eAAe,EACf,KAAK,GAAG,OAAO,EACf,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,OAAO,KAAK,SAAS,IAAI,mBAAmB,EAC5C,CAAC,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,aAAa,CAAC,IAAI,iBAAiB,EACvE,OAAO,KAAK,aAAa,IAAI,uBAAuB,EACpD,KAAK,KAAK,QAAQ,IAAI,wBAAwB,EAC9C,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAEb,eAAe;QACjB,CAAC,CAAC,EAAE,qBAAqB,EAAE,QAAQ,eAAe,IAAI,EAAE,GAAG,KAAK,EAAE;QAClE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAEjB,OAAO,CACL,kBAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAM,KAAK,YAClE,cAAK,SAAS,EAAC,iBAAiB,YAC9B,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,GAC/C,GACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Hero/index.d.ts

@@ -1,3 +0,0 @@
-export { Hero } from './Hero';
-export type { HeroProps, HeroVariant, HeroAlign } from './Hero';
-//# sourceMappingURL=index.d.ts.map

package/dist/Hero/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Hero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Hero/index.js

@@ -1,2 +0,0 @@
-export { Hero } from './Hero';
-//# sourceMappingURL=index.js.map

package/dist/Hero/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Hero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}