@dsn-starter-kit/components-react 1.0.0

package/dist/MenuButton/MenuButton.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import './MenuButton.css';
+export interface MenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Icoon links van het label
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Icoon rechts van het label
+     */
+    iconEnd?: React.ReactNode;
+    /**
+     * DotBadge element voor statusindicatie (bijv. nieuw/ongelezen zonder getal).
+     * Verwacht een `<DotBadge>` component.
+     */
+    dotBadge?: React.ReactNode;
+    /**
+     * Zichtbare knoptekst
+     */
+    children?: React.ReactNode;
+    /**
+     * Aanvullende CSS-klassen voor het `<li>`-element
+     */
+    className?: string;
+}
+/**
+ * MenuButton component
+ * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
+ *
+ * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
+ * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
+ *
+ * @example
+ * ```tsx
+ * // Basisgebruik
+ * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
+ *
+ * // Met icoon start
+ * <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
+ *   Instellingen
+ * </MenuButton>
+ *
+ * // Met DotBadge (statusindicatie)
+ * <MenuButton
+ *   iconStart={<Icon name="bell" aria-hidden />}
+ *   dotBadge={<DotBadge variant="negative" />}
+ * >
+ *   Meldingen
+ *   <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
+ * </MenuButton>
+ * ```
+ */
+export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=MenuButton.d.ts.map

package/dist/MenuButton/MenuButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../src/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACpF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,2FAiCtB,CAAC"}

package/dist/MenuButton/MenuButton.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './MenuButton.css';
+/**
+ * MenuButton component
+ * Navigatieknop voor JavaScript-acties — semantisch een `<button>`, visueel consistent met MenuLink.
+ *
+ * Gebruik in een `<ul>`-element wanneer de actie geen URL-navigatie is maar een JS-handeling triggert
+ * (bijv. uitloggen, een modal openen of een sectie in/uitklappen).
+ *
+ * @example
+ * ```tsx
+ * // Basisgebruik
+ * <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
+ *
+ * // Met icoon start
+ * <MenuButton iconStart={<Icon name="settings" aria-hidden />}>
+ *   Instellingen
+ * </MenuButton>
+ *
+ * // Met DotBadge (statusindicatie)
+ * <MenuButton
+ *   iconStart={<Icon name="bell" aria-hidden />}
+ *   dotBadge={<DotBadge variant="negative" />}
+ * >
+ *   Meldingen
+ *   <span className="dsn-visually-hidden">, nieuwe meldingen beschikbaar</span>
+ * </MenuButton>
+ * ```
+ */
+export const MenuButton = React.forwardRef(({ iconStart, iconEnd, dotBadge, className, children, type = 'button', ...props }, ref) => {
+    const liClasses = classNames('dsn-menu-button', className);
+    return (_jsx("li", { className: liClasses, children: _jsxs("button", { ref: ref, type: type, className: "dsn-menu-button__button", ...props, children: [iconStart, _jsxs("span", { className: "dsn-menu-button__label", children: [children, dotBadge] }), iconEnd] }) }));
+});
+MenuButton.displayName = 'MenuButton';
+//# sourceMappingURL=MenuButton.js.map

package/dist/MenuButton/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../src/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AA8B1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,aAAI,SAAS,EAAE,SAAS,YACtB,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,yBAAyB,KAC/B,KAAK,aAER,SAAS,EACV,gBAAM,SAAS,EAAC,wBAAwB,aACrC,QAAQ,EACR,QAAQ,IACJ,EACN,OAAO,IACD,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/MenuButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MenuButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/MenuButton/index.js

@@ -0,0 +1,2 @@
+export * from './MenuButton';
+//# sourceMappingURL=index.js.map

package/dist/MenuButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/MenuLink/MenuLink.css

@@ -0,0 +1,212 @@
+/**
+ * MenuLink Component
+ * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
+ * Semantisch een `<a>`, visueel consistent met MenuButton.
+ *
+ * Gedeelde visuele stijl via --dsn-menu-item-* tokens (menu-item.json).
+ * MenuLink-specifieke tokens via --dsn-menu-link-* (current-staat, level-indent).
+ *
+ * Structuur:
+ * <li class="dsn-menu-link">
+ *   <a class="dsn-menu-link__link" href="/pagina">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-start --></svg>
+ *     <span class="dsn-menu-link__label">Pagina</span>
+ *     <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-end --></svg>
+ *   </a>
+ *   <!-- optioneel: scheidingslijn + uitklapknop -->
+ *   <span class="dsn-menu-link__divider" aria-hidden="true"></span>
+ *   <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button" aria-expanded="false">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- chevron-right --></svg>
+ *     <span class="dsn-button__label">
+ *       Uitklappen
+ *       <span class="dsn-visually-hidden"> voor Pagina</span>
+ *     </span>
+ *   </button>
+ * </li>
+ *
+ * Niveau-varianten (op het <li>-element):
+ *   dsn-menu-link--level-2   (1× level-indent via margin-inline-start)
+ *   dsn-menu-link--level-3   (2× level-indent via margin-inline-start)
+ *   dsn-menu-link--level-4   (3× level-indent via margin-inline-start)
+ *
+ * Actieve pagina — border-inline-start indicator op de <a>:
+ *   aria-current="page" op het <a>-element → current-kleuren + indicator
+ *
+ * Uitklapbaar:
+ *   aria-expanded="true/false" op dsn-menu-link__expand-button
+ */
+
+/* =============================================================================
+   List item
+   ============================================================================= */
+
+.dsn-menu-link {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: stretch;
+  /* Ruimte tussen de link, de scheiding en de uitklapknop */
+  column-gap: var(--dsn-space-inline-sm);
+}
+
+/* =============================================================================
+   Link
+   ============================================================================= */
+
+.dsn-menu-link__link {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-block-size: var(--dsn-menu-item-min-block-size);
+  gap: var(--dsn-menu-item-gap);
+  padding-block: var(--dsn-menu-item-padding-block);
+  padding-inline: var(--dsn-menu-item-padding-inline);
+  font-family: inherit;
+  font-size: var(--dsn-menu-item-font-size);
+  font-weight: var(--dsn-menu-item-font-weight);
+  line-height: var(--dsn-menu-item-line-height);
+  text-decoration: none;
+  color: var(--dsn-menu-item-color);
+  background-color: var(--dsn-menu-item-background-color);
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+.dsn-menu-link__link > .dsn-icon {
+  width: var(--dsn-menu-item-icon-size);
+  height: var(--dsn-menu-item-icon-size);
+  flex-shrink: 0;
+}
+
+.dsn-menu-link__label {
+  /* Geen flex: 1 — badge en iconEnd staan direct achter de tekst.
+     De <a> zelf is flex: 1 en vult de volledige breedte. */
+}
+
+/* =============================================================================
+   States
+   ============================================================================= */
+
+.dsn-menu-link__link:hover {
+  color: var(--dsn-menu-item-hover-color);
+  background-color: var(--dsn-menu-item-hover-background-color);
+}
+
+.dsn-menu-link__link:active {
+  color: var(--dsn-menu-item-active-color);
+  background-color: var(--dsn-menu-item-active-background-color);
+}
+
+.dsn-menu-link__link:focus-visible {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  box-shadow: 0 0 0
+    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
+    var(--dsn-focus-inverse-outline-color);
+}
+
+/* =============================================================================
+   Current (actieve pagina) — border-inline-start indicator
+   ============================================================================= */
+
+.dsn-menu-link__link[aria-current='page'] {
+  font-weight: var(--dsn-menu-link-current-font-weight);
+  color: var(--dsn-menu-link-current-color);
+  background-color: var(--dsn-menu-link-current-background-color);
+  border-inline-start: var(--dsn-menu-link-current-indicator-width) solid
+    var(--dsn-menu-link-current-indicator-color);
+  /* Compenseer de indicator-breedte zodat de tekst horizontaal uitlijnt met niet-actieve items */
+  padding-inline-start: calc(
+    var(--dsn-menu-item-padding-inline) -
+      var(--dsn-menu-link-current-indicator-width)
+  );
+}
+
+.dsn-menu-link__link[aria-current='page']:hover {
+  color: var(--dsn-menu-link-current-hover-color);
+  background-color: var(--dsn-menu-link-current-hover-background-color);
+}
+
+.dsn-menu-link__link[aria-current='page']:active {
+  color: var(--dsn-menu-link-current-active-color);
+  background-color: var(--dsn-menu-link-current-active-background-color);
+}
+
+/* =============================================================================
+   Current in horizontale Menu — border-block-end indicator
+   Overschrijft de border-inline-start uit de verticale variant.
+   ============================================================================= */
+
+.dsn-menu--horizontal .dsn-menu-link__link[aria-current='page'] {
+  border-inline-start: none;
+  /* Reset de padding-compensatie van de verticale variant */
+  padding-inline-start: var(--dsn-menu-item-padding-inline);
+  border-block-end: var(--dsn-menu-link-current-indicator-width) solid
+    var(--dsn-menu-link-current-indicator-color);
+  /* Compenseer de indicator-hoogte zodat de tekst verticaal uitlijnt met niet-actieve items */
+  padding-block-end: calc(
+    var(--dsn-menu-item-padding-block) -
+      var(--dsn-menu-link-current-indicator-width)
+  );
+}
+
+/* =============================================================================
+   Niveau-inspringing (level-indent) — via margin-inline-start
+   Zodat de border-inline-start indicator dicht bij de tekst blijft.
+   ============================================================================= */
+
+.dsn-menu-link--level-2 .dsn-menu-link__link {
+  margin-inline-start: var(--dsn-menu-link-level-indent);
+}
+
+.dsn-menu-link--level-3 .dsn-menu-link__link {
+  margin-inline-start: calc(2 * var(--dsn-menu-link-level-indent));
+}
+
+.dsn-menu-link--level-4 .dsn-menu-link__link {
+  margin-inline-start: calc(3 * var(--dsn-menu-link-level-indent));
+}
+
+/* =============================================================================
+   Scheidingslijn (divider) — losse <span> tussen link en uitklapknop
+   ============================================================================= */
+
+.dsn-menu-link__divider {
+  display: block;
+  flex-shrink: 0;
+  inline-size: 1px;
+  align-self: stretch;
+  background-color: var(--dsn-color-neutral-border-subtle);
+}
+
+/* =============================================================================
+   Uitklapknop (expand button)
+   ============================================================================= */
+
+.dsn-menu-link__expand-button {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+/* Chevron (chevron-down) — 180° rotatie wanneer uitgevouwen, zelfde als Details */
+.dsn-menu-link__expand-button > .dsn-icon {
+  transition: transform var(--dsn-transition-duration-normal)
+    var(--dsn-transition-easing-default);
+}
+
+.dsn-menu-link__expand-button[aria-expanded='false'] > .dsn-icon {
+  transform: rotate(0deg);
+}
+
+.dsn-menu-link__expand-button[aria-expanded='true'] > .dsn-icon {
+  transform: rotate(180deg);
+}
+

package/dist/MenuLink/MenuLink.d.ts

@@ -0,0 +1,96 @@
+import React from 'react';
+import './MenuLink.css';
+export type MenuLinkLevel = 1 | 2 | 3 | 4;
+export interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Navigatie-URL van de link
+     */
+    href?: string;
+    /**
+     * Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing
+     * @default 1
+     */
+    level?: MenuLinkLevel;
+    /**
+     * Markeert de actieve/huidige pagina.
+     * Voegt `aria-current="page"` toe aan het `<a>`-element.
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Icoon links van het label
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)
+     */
+    iconEnd?: React.ReactNode;
+    /**
+     * NumberBadge element rechts van het label (naast iconEnd)
+     * Verwacht een `<NumberBadge>` component.
+     */
+    numberBadge?: React.ReactNode;
+    /**
+     * Toont een uitklapknop naast de link (voor subnavigatie).
+     * @default false
+     */
+    subItems?: boolean;
+    /**
+     * Geeft aan of de subnavigatie momenteel uitgevouwen is.
+     * Alleen relevant wanneer `subItems` true is.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.
+     */
+    onExpandToggle?: () => void;
+    /**
+     * Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop
+     */
+    children?: React.ReactNode;
+    /**
+     * Aanvullende CSS-klassen voor het `<li>`-element
+     */
+    className?: string;
+}
+/**
+ * MenuLink component
+ * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
+ * Semantisch een `<a>`, visueel consistent met MenuButton.
+ *
+ * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
+ *
+ * @example
+ * ```tsx
+ * // Basisgebruik (level 1)
+ * <MenuLink href="/dashboard">Dashboard</MenuLink>
+ *
+ * // Actieve pagina
+ * <MenuLink href="/rapporten" current>Rapporten</MenuLink>
+ *
+ * // Level 2 (subpagina)
+ * <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
+ *
+ * // Met icoon en NumberBadge
+ * <MenuLink
+ *   href="/inbox"
+ *   iconStart={<Icon name="mail" aria-hidden />}
+ *   numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
+ * >
+ *   Inbox
+ * </MenuLink>
+ *
+ * // Met uitklapknop
+ * <MenuLink
+ *   href="/rapporten"
+ *   subItems
+ *   expanded={isExpanded}
+ *   onExpandToggle={() => setIsExpanded(!isExpanded)}
+ * >
+ *   Rapporten
+ * </MenuLink>
+ * ```
+ */
+export declare const MenuLink: React.ForwardRefExoticComponent<MenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=MenuLink.d.ts.map

package/dist/MenuLink/MenuLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink.d.ts","sourceRoot":"","sources":["../../src/MenuLink/MenuLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE1C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,QAAQ,yFAkEpB,CAAC"}

package/dist/MenuLink/MenuLink.js

@@ -0,0 +1,50 @@
+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 './MenuLink.css';
+/**
+ * MenuLink component
+ * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
+ * Semantisch een `<a>`, visueel consistent met MenuButton.
+ *
+ * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
+ *
+ * @example
+ * ```tsx
+ * // Basisgebruik (level 1)
+ * <MenuLink href="/dashboard">Dashboard</MenuLink>
+ *
+ * // Actieve pagina
+ * <MenuLink href="/rapporten" current>Rapporten</MenuLink>
+ *
+ * // Level 2 (subpagina)
+ * <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
+ *
+ * // Met icoon en NumberBadge
+ * <MenuLink
+ *   href="/inbox"
+ *   iconStart={<Icon name="mail" aria-hidden />}
+ *   numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
+ * >
+ *   Inbox
+ * </MenuLink>
+ *
+ * // Met uitklapknop
+ * <MenuLink
+ *   href="/rapporten"
+ *   subItems
+ *   expanded={isExpanded}
+ *   onExpandToggle={() => setIsExpanded(!isExpanded)}
+ * >
+ *   Rapporten
+ * </MenuLink>
+ * ```
+ */
+export const MenuLink = React.forwardRef(({ href, level = 1, current = false, iconStart, iconEnd, numberBadge, subItems = false, expanded = false, onExpandToggle, className, children, ...props }, ref) => {
+    const liClasses = classNames('dsn-menu-link', level > 1 && `dsn-menu-link--level-${level}`, className);
+    const childrenText = typeof children === 'string' ? children : undefined;
+    return (_jsxs("li", { className: liClasses, children: [_jsxs("a", { ref: ref, className: "dsn-menu-link__link", href: href, "aria-current": current ? 'page' : undefined, ...props, children: [iconStart, _jsx("span", { className: "dsn-menu-link__label", children: children }), numberBadge, iconEnd] }), subItems && (_jsx("span", { className: "dsn-menu-link__divider", "aria-hidden": "true" })), subItems && (_jsxs("button", { type: "button", className: "dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button", "aria-expanded": expanded, onClick: onExpandToggle, children: [_jsx(Icon, { name: "chevron-down", "aria-hidden": true }), _jsxs("span", { className: "dsn-button__label", children: [expanded ? 'Inklappen' : 'Uitklappen', childrenText && (_jsxs("span", { className: "dsn-visually-hidden", children: [' ', "voor ", childrenText] }))] })] }))] }));
+});
+MenuLink.displayName = 'MenuLink';
+//# sourceMappingURL=MenuLink.js.map

package/dist/MenuLink/MenuLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink.js","sourceRoot":"","sources":["../../src/MenuLink/MenuLink.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,gBAAgB,CAAC;AAoExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,IAAI,EACJ,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,KAAK,EACf,SAAS,EACT,OAAO,EACP,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,eAAe,EACf,KAAK,GAAG,CAAC,IAAI,wBAAwB,KAAK,EAAE,EAC5C,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEzE,OAAO,CACL,cAAI,SAAS,EAAE,SAAS,aACtB,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,kBACI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,aAER,SAAS,EACV,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EACvD,WAAW,EACX,OAAO,IACN,EAEH,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,CAC/D,EACA,QAAQ,IAAI,CACX,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,mBACpG,QAAQ,EACvB,OAAO,EAAE,cAAc,aAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,wBAAe,EACxC,gBAAM,SAAS,EAAC,mBAAmB,aAChC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACrC,YAAY,IAAI,CACf,gBAAM,SAAS,EAAC,qBAAqB,aAClC,GAAG,WACE,YAAY,IACb,CACR,IACI,IACA,CACV,IACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/MenuLink/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MenuLink';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuLink/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/MenuLink/index.js

@@ -0,0 +1,2 @@
+export * from './MenuLink';
+//# sourceMappingURL=index.js.map

package/dist/MenuLink/index.js.map

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