@dsn-starter-kit/components-react 2.0.0 → 3.1.0

package/dist/Alert/Alert.css

@@ -1,159 +0,0 @@
-/**
- * Alert Component Styles for React
- * Re-exports the base Alert styles from components-html
- */
-
-/**
- * Alert Component
- * Important message that informs the user about the current activity or state.
- *
- * The icon is decorative (aria-hidden); a visually hidden variant label at the
- * start of the heading announces the variant to screen reader users. Real text
- * (not aria-label on the svg) so it gets translated by translation tools,
- * works in braille and stays available when the icon is omitted.
- * Default labels: "Informatie: " / "Succes: " / "Foutmelding: " / "Let op: ".
- *
- * Usage:
- * <!-- Info variant (default), with icon -->
- * <div class="dsn-alert" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
- *   <div class="dsn-alert__content">
- *     <p>Body text or any content.</p>
- *   </div>
- * </div>
- *
- * <!-- Positive variant -->
- * <div class="dsn-alert dsn-alert--positive" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- circle-check --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Succes: </span>Gelukt</h2>
- *   <div class="dsn-alert__content">
- *     <p>Uw aanvraag is succesvol ingediend.</p>
- *   </div>
- * </div>
- *
- * <!-- Negative variant -->
- * <div class="dsn-alert dsn-alert--negative" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- exclamation-circle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Foutmelding: </span>Er is een fout opgetreden</h2>
- *   <div class="dsn-alert__content">
- *     <p>Controleer uw gegevens en probeer het opnieuw.</p>
- *   </div>
- * </div>
- *
- * <!-- Warning variant -->
- * <div class="dsn-alert dsn-alert--warning" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Let op: </span>Uw sessie verloopt binnenkort</h2>
- *   <div class="dsn-alert__content">
- *     <p>Sla uw werk op om gegevensverlies te voorkomen.</p>
- *   </div>
- * </div>
- *
- * <!-- Without icon: keep the visually hidden variant label -->
- * <div class="dsn-alert dsn-alert--no-icon" role="alert">
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
- *   <div class="dsn-alert__content">
- *     <p>Body text without an icon.</p>
- *   </div>
- * </div>
- */
-
-/* ===========================
-   Local color tokens (info = default)
-   =========================== */
-.dsn-alert {
-  --dsn-alert-icon-color: var(--dsn-alert-info-icon-color);
-  --dsn-alert-color: var(--dsn-alert-info-color);
-  --dsn-alert-background-color: var(--dsn-alert-info-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-info-border-color);
-}
-
-.dsn-alert--positive {
-  --dsn-alert-icon-color: var(--dsn-alert-positive-icon-color);
-  --dsn-alert-color: var(--dsn-alert-positive-color);
-  --dsn-alert-background-color: var(--dsn-alert-positive-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-positive-border-color);
-}
-
-.dsn-alert--negative {
-  --dsn-alert-icon-color: var(--dsn-alert-negative-icon-color);
-  --dsn-alert-color: var(--dsn-alert-negative-color);
-  --dsn-alert-background-color: var(--dsn-alert-negative-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-negative-border-color);
-}
-
-.dsn-alert--warning {
-  --dsn-alert-icon-color: var(--dsn-alert-warning-icon-color);
-  --dsn-alert-color: var(--dsn-alert-warning-color);
-  --dsn-alert-background-color: var(--dsn-alert-warning-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-warning-border-color);
-}
-
-/* ===========================
-   Base layout
-   =========================== */
-.dsn-alert {
-  display: grid;
-  grid-template-columns: var(--dsn-alert-icon-size) 1fr;
-  column-gap: var(--dsn-alert-column-gap);
-  row-gap: var(--dsn-alert-row-gap);
-  padding-block: var(--dsn-alert-padding-block);
-  padding-inline: var(--dsn-alert-padding-inline);
-  border-radius: var(--dsn-alert-border-radius);
-  border: var(--dsn-alert-border-width) solid var(--dsn-alert-border-color);
-  background-color: var(--dsn-alert-background-color);
-  color: var(--dsn-alert-color);
-}
-
-/* ===========================
-   Icon
-   =========================== */
-.dsn-alert__icon {
-  grid-column: 1;
-  grid-row: 1;
-  align-self: center;
-  flex-shrink: 0;
-  width: var(--dsn-alert-icon-size);
-  height: var(--dsn-alert-icon-size);
-  color: var(--dsn-alert-icon-color);
-}
-
-/* ===========================
-   Heading
-   =========================== */
-.dsn-alert__heading {
-  grid-column: 2;
-  grid-row: 1;
-  align-self: center;
-  margin-block-end: 0;
-}
-
-/* ===========================
-   Content
-   =========================== */
-.dsn-alert__content {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-/* ===========================
-   No-icon modifier
-   =========================== */
-.dsn-alert--no-icon {
-  grid-template-columns: 1fr;
-}
-
-.dsn-alert--no-icon .dsn-alert__heading,
-.dsn-alert--no-icon .dsn-alert__content {
-  grid-column: 1;
-}
-

package/dist/Alert/Alert.d.ts

@@ -1,83 +0,0 @@
-import React from 'react';
-import './Alert.css';
-export type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Semantische variant die de signaalkleur bepaalt
-     * @default 'info'
-     */
-    variant?: AlertVariant;
-    /**
-     * Koptekst van het bericht (verplicht)
-     */
-    heading: string;
-    /**
-     * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
-     * @default 2
-     */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * Icoon vóór de heading.
-     * - `undefined` (default) — aanbevolen icoon per variant
-     * - `null` — geen icoon
-     * - `ReactNode` — aangepast icoon
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Visueel verborgen tekst vóór de heading die de variant benoemt voor
-     * screenreadergebruikers (inclusief scheidingsteken en spatie).
-     * - `undefined` (default) — standaardtekst per variant:
-     *   `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
-     * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
-     * - `string` — eigen tekst, bijv. voor een andere taal
-     */
-    variantLabel?: string;
-    /**
-     * Optionele body content (tekst, lijst, links, etc.)
-     */
-    children?: React.ReactNode;
-}
-/**
- * Alert component
- * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
- *
- * @example
- * ```tsx
- * // Info (default)
- * <Alert heading="Uw aanvraag wordt verwerkt">
- *   Dit kan enkele minuten duren.
- * </Alert>
- *
- * // Positive
- * <Alert variant="positive" heading="Gelukt">
- *   Uw gegevens zijn opgeslagen.
- * </Alert>
- *
- * // Negative
- * <Alert variant="negative" heading="Er is een fout opgetreden">
- *   Controleer uw gegevens en probeer het opnieuw.
- * </Alert>
- *
- * // Warning
- * <Alert variant="warning" heading="Let op">
- *   Uw sessie verloopt over 5 minuten.
- * </Alert>
- *
- * // Zonder icoon
- * <Alert variant="info" heading="Opmerking" iconStart={null}>
- *   Aanvullende informatie.
- * </Alert>
- *
- * // Met aangepast icoon
- * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
- *   Gebruik de zoekfunctie om snel te navigeren.
- * </Alert>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Alert variant="negative" heading="Foutmelding" variantLabel="">
- *   Controleer uw gegevens.
- * </Alert>
- * ```
- */
-export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAgBxE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,mFAwDjB,CAAC"}

package/dist/Alert/Alert.js

@@ -1,69 +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 { Icon } from '../Icon';
-import { Heading } from '../Heading';
-import './Alert.css';
-const PREFERRED_ICONS = {
-    info: 'info-circle',
-    positive: 'circle-check',
-    negative: 'exclamation-circle',
-    warning: 'alert-triangle',
-};
-const VARIANT_LABELS = {
-    info: 'Informatie: ',
-    positive: 'Succes: ',
-    negative: 'Foutmelding: ',
-    warning: 'Let op: ',
-};
-/**
- * Alert component
- * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
- *
- * @example
- * ```tsx
- * // Info (default)
- * <Alert heading="Uw aanvraag wordt verwerkt">
- *   Dit kan enkele minuten duren.
- * </Alert>
- *
- * // Positive
- * <Alert variant="positive" heading="Gelukt">
- *   Uw gegevens zijn opgeslagen.
- * </Alert>
- *
- * // Negative
- * <Alert variant="negative" heading="Er is een fout opgetreden">
- *   Controleer uw gegevens en probeer het opnieuw.
- * </Alert>
- *
- * // Warning
- * <Alert variant="warning" heading="Let op">
- *   Uw sessie verloopt over 5 minuten.
- * </Alert>
- *
- * // Zonder icoon
- * <Alert variant="info" heading="Opmerking" iconStart={null}>
- *   Aanvullende informatie.
- * </Alert>
- *
- * // Met aangepast icoon
- * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
- *   Gebruik de zoekfunctie om snel te navigeren.
- * </Alert>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Alert variant="negative" heading="Foutmelding" variantLabel="">
- *   Controleer uw gegevens.
- * </Alert>
- * ```
- */
-export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, variantLabel, children, ...props }, ref) => {
-    const noIcon = iconStart === null;
-    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
-    const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
-    const classes = classNames('dsn-alert', variant !== 'info' && `dsn-alert--${variant}`, noIcon && 'dsn-alert--no-icon', className);
-    return (_jsxs("div", { ref: ref, className: classes, role: "alert", ...props, children: [!noIcon && (_jsx("span", { className: "dsn-alert__icon", "aria-hidden": true, children: resolvedIcon })), _jsxs(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: [resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), heading] }), children && _jsx("div", { className: "dsn-alert__content", children: children })] }));
-});
-Alert.displayName = 'Alert';
-//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,aAAa,CAAC;AAIrB,MAAM,eAAe,GAAiC;IACpD,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,cAAc,GAAiC;IACnD,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,UAAU;CACpB,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,oBAAoB,GAAG,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAErE,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,OAAO,KAAK,MAAM,IAAI,cAAc,OAAO,EAAE,EAC7C,MAAM,IAAI,oBAAoB,EAC9B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,aACtD,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,iBAAiB,iCAC9B,YAAY,GACR,CACR,EACD,MAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,aAE7B,oBAAoB,IAAI,CACvB,eAAM,SAAS,EAAC,qBAAqB,YAAE,oBAAoB,GAAQ,CACpE,EACA,OAAO,IACA,EACT,QAAQ,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Alert/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/Alert/index.js

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

package/dist/Alert/index.js.map

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

package/dist/Backdrop/Backdrop.css

@@ -1,30 +0,0 @@
-/**
- * Backdrop Component
- * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
- * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
- *
- * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
- * Conditioneel renderen vanuit de parent.
- *
- * Usage:
- * <div class="dsn-backdrop" aria-hidden="true"></div>
- */
-
-.dsn-backdrop {
-  position: fixed;
-  inset: 0;
-  /* Fallback voor omgevingen zonder color-mix() support (~6%) */
-  background-color: var(--dsn-backdrop-background-color);
-  background-color: color-mix(
-    in srgb,
-    var(--dsn-backdrop-background-color) var(--dsn-backdrop-opacity),
-    transparent
-  );
-  backdrop-filter: blur(var(--dsn-backdrop-blur));
-  z-index: var(--dsn-backdrop-z-index);
-}
-
-.dsn-backdrop--no-blur {
-  backdrop-filter: none;
-}
-

package/dist/Backdrop/Backdrop.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import './Backdrop.css';
-export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Schakelt het blur-filter in of uit.
-     * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.
-     * @default true
-     */
-    blur?: boolean;
-}
-/**
- * Backdrop component
- * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
- * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
- *
- * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
- * Conditioneel renderen vanuit de parent.
- *
- * @example
- * ```tsx
- * {isOpen && <Backdrop />}
- * {isOpen && <Backdrop blur={false} />}
- * ```
- */
-export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Backdrop.d.ts.map

package/dist/Backdrop/Backdrop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,sFAepB,CAAC"}

package/dist/Backdrop/Backdrop.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Backdrop.css';
-/**
- * Backdrop component
- * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
- * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
- *
- * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
- * Conditioneel renderen vanuit de parent.
- *
- * @example
- * ```tsx
- * {isOpen && <Backdrop />}
- * {isOpen && <Backdrop blur={false} />}
- * ```
- */
-export const Backdrop = React.forwardRef(({ className, blur = true, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-backdrop', !blur && 'dsn-backdrop--no-blur', className), "aria-hidden": "true", ...props }));
-});
-Backdrop.displayName = 'Backdrop';
-//# sourceMappingURL=Backdrop.js.map

package/dist/Backdrop/Backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAWxB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,cAAc,EACd,CAAC,IAAI,IAAI,uBAAuB,EAChC,SAAS,CACV,iBACW,MAAM,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Backdrop/index.d.ts

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

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

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

package/dist/Backdrop/index.js

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

package/dist/Backdrop/index.js.map

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

package/dist/Body/Body.css

@@ -1,14 +0,0 @@
-/**
- * Body component styles voor React
- * Re-exporteert de basis Body stijlen vanuit components-html
- */
-
-.dsn-body {
-  background-color: var(--dsn-color-neutral-bg-document);
-  color: var(--dsn-color-neutral-color-document);
-  font-family: var(--dsn-text-font-family-default);
-  font-size: var(--dsn-text-font-size-md);
-  line-height: var(--dsn-text-line-height-md);
-  font-weight: var(--dsn-text-font-weight-default);
-}
-

package/dist/Body/Body.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-import './Body.css';
-export interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Child-elementen die de document-level stijlen erven
-     */
-    children?: React.ReactNode;
-}
-/**
- * Body component
- * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
- * automatisch de juiste typografie, kleur en achtergrond erven.
- *
- * @example
- * ```tsx
- * // In een applicatie: wrap de root-content
- * <Body>
- *   <h1>Mijn pagina</h1>
- *   <p>Inhoud met geërfde stijlen</p>
- * </Body>
- *
- * // Of pas de CSS class direct toe op het <body> element
- * // <body class="dsn-body">
- * ```
- */
-export declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Body.d.ts.map

package/dist/Body/Body.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../src/Body/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,kFAUhB,CAAC"}

package/dist/Body/Body.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Body.css';
-/**
- * Body component
- * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
- * automatisch de juiste typografie, kleur en achtergrond erven.
- *
- * @example
- * ```tsx
- * // In een applicatie: wrap de root-content
- * <Body>
- *   <h1>Mijn pagina</h1>
- *   <p>Inhoud met geërfde stijlen</p>
- * </Body>
- *
- * // Of pas de CSS class direct toe op het <body> element
- * // <body class="dsn-body">
- * ```
- */
-export const Body = React.forwardRef(({ className, children, ...props }, ref) => {
-    const classes = classNames('dsn-body', className);
-    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
-});
-Body.displayName = 'Body';
-//# sourceMappingURL=Body.js.map

package/dist/Body/Body.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../src/Body/Body.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AASpB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IAElD,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Body/index.d.ts

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

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

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

package/dist/Body/index.js

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

package/dist/Body/index.js.map

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