@a-ui/react 7.13.0-beta.0 → 7.13.0-beta.1

package/index30.mjs

@@ -0,0 +1,72 @@
+import { jsxs as r, Fragment as x, jsx as l } from "react/jsx-runtime";
+import A, { cloneElement as S } from "react";
+import F from "./index65.mjs";
+import { SIZE_MAP as I, DEFAULT_SIZE as P } from "./index53.mjs";
+import { classNames as f } from "./index51.mjs";
+import { Button as t } from "./index10.mjs";
+function Z({
+  appRootId: v,
+  ariaCloseLabel: _ = "Sluiten",
+  cancelButton: o,
+  children: u,
+  closeButton: d = !0,
+  confirmButton: s,
+  onAfterOpen: b,
+  onClose: y,
+  open: m,
+  qa: O,
+  shouldCloseOnOverlayClick: k = !0,
+  size: p = "",
+  title: e = { label: "" },
+  trigger: h
+}) {
+  const [E, n] = A.useState(!!m), g = m === !1 || m === !0 ? m : E, M = e?.tag || "h6", i = (a, c) => c && typeof c == "function" ? Promise.resolve(c(a)).then(() => n(!1)) : n(!1), C = (a) => i(a, y), N = typeof document < "u" ? document.getElementById(v) ?? void 0 : void 0;
+  return /* @__PURE__ */ r(x, { children: [
+    h ? S(h, { onClick: () => n(!0) }) : null,
+    /* @__PURE__ */ l(
+      F,
+      {
+        appElement: N,
+        bodyOpenClassName: null,
+        htmlOpenClassName: null,
+        className: f({ "m-modal": !0, [`m-modal--${I[p || P]}`]: !!p }),
+        isOpen: g,
+        onRequestClose: C,
+        role: "dialog",
+        "aria-modal": "true",
+        overlayClassName: f({
+          "m-overlay": !0,
+          "is-active": !0
+        }),
+        "data-qa": O,
+        ariaHideApp: !!N,
+        onAfterOpen: b,
+        shouldCloseOnOverlayClick: o || s || d ? k : !0,
+        children: /* @__PURE__ */ r("div", { className: "m-modal__content", children: [
+          (e && e?.label || d) && /* @__PURE__ */ r("div", { className: "m-modal__header u-margin-bottom-xs", children: [
+            e && e?.label && /* @__PURE__ */ l(M, { className: e.className, id: e.id, children: e.label }),
+            d && /* @__PURE__ */ l(
+              t,
+              {
+                className: "m-modal__close",
+                theme: "neutral",
+                addOn: { type: "icon", iconProps: { name: "ai-close" } },
+                ariaLabel: _,
+                emphasis: "low",
+                onClick: C
+              }
+            )
+          ] }),
+          u && /* @__PURE__ */ l("div", { className: "u-margin-bottom", children: u }),
+          s || o ? /* @__PURE__ */ r("div", { className: "m-modal__footer", children: [
+            s ? /* @__PURE__ */ l(t, { ...s, onClick: (a) => i(a, s.onClick) }) : null,
+            o ? /* @__PURE__ */ l(t, { ...o, onClick: (a) => i(a, o.onClick) }) : null
+          ] }) : null
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Z as Modal
+};

package/index31.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index51.js"),j=require("./index60.js");function x({items:o=[],border:n,ariaLabel:c="Navigatie",onItemClick:i,direction:l="horizontal",qa:d}){const[u,v,h,b]=j.useHorizontalScroll(),f=t.classNames({"m-nav-list":l==="vertical","m-nav-tabs":l!=="vertical","has-border":!!n,"has-shadow-left":l!=="vertical"&&!h,"has-shadow-right":l!=="vertical"&&!b}),g=(a,s,r)=>{i&&(a.preventDefault(),a.stopPropagation(),i(s.id,r),s.disabled||i(s.id,r))},N=(a,s)=>{const r=t.classNames({"is-active":!!a.active,"is-disabled":!!a.disabled});return e.jsx("li",{className:r,children:e.jsx("a",{href:a.href||"",onClick:S=>g(S,a,s),...a.disabled?{"aria-disabled":"true"}:{},...a.active?{"aria-current":"true"}:{},children:a.label})},a.id)};return e.jsx("nav",{role:"navigation",className:f,"aria-label":c,"data-qa":d,children:e.jsx("ul",{ref:u,onScroll:v,children:o.map(N)})})}exports.NavigationList=x;

package/index31.mjs

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { classNames as e } from "./index51.mjs";
+import { useHorizontalScroll as S } from "./index60.mjs";
+function z({
+  items: t = [],
+  border: n,
+  ariaLabel: c = "Navigatie",
+  onItemClick: o,
+  direction: r = "horizontal",
+  qa: d
+}) {
+  const [v, h, f, b] = S(), u = e({
+    "m-nav-list": r === "vertical",
+    "m-nav-tabs": r !== "vertical",
+    "has-border": !!n,
+    "has-shadow-left": r !== "vertical" && !f,
+    "has-shadow-right": r !== "vertical" && !b
+  }), p = (a, l, s) => {
+    o && (a.preventDefault(), a.stopPropagation(), o(l.id, s), l.disabled || o(l.id, s));
+  }, g = (a, l) => {
+    const s = e({
+      "is-active": !!a.active,
+      "is-disabled": !!a.disabled
+    });
+    return /* @__PURE__ */ i("li", { className: s, children: /* @__PURE__ */ i(
+      "a",
+      {
+        href: a.href || "",
+        onClick: (N) => p(N, a, l),
+        ...a.disabled ? { "aria-disabled": "true" } : {},
+        ...a.active ? { "aria-current": "true" } : {},
+        children: a.label
+      }
+    ) }, a.id);
+  };
+  return /* @__PURE__ */ i("nav", { role: "navigation", className: u, "aria-label": c, "data-qa": d, children: /* @__PURE__ */ i("ul", { ref: v, onScroll: h, children: t.map(g) }) });
+}
+export {
+  z as NavigationList
+};

package/index32.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),F=require("react"),f=require("./index51.js"),I=require("./index53.js");function _({qa:x,size:l,pages:n,activePage:c,onPageChange:u}){const[s,r]=F.useState(0),y=t=>r(t),A=t=>()=>u&&u(t),E=t=>{const o=t.key==="ArrowLeft",i=t.key==="ArrowRight";if(o||i){document.getElementById(c)?.setAttribute("tabindex","-1");let e=s;i&&(e=s+1>=n.length?0:s+1,r(e)),o&&(e=s-1<0?n.length-1:s-1,r(e));const a=n[e].id;if(a){const m=document.getElementById(a);m?.setAttribute("tabindex","0"),n.filter(d=>d.id!==a).forEach(d=>{document.getElementById(d.id)?.setAttribute("tabindex","-1")}),m?.focus()}}},h=f.classNames({"a-page-indicator":!0,[`a-page-indicator--${I.SIZE_MAP[l||I.DEFAULT_SIZE]}`]:!!l});return b.jsx("div",{className:h,"data-qa":x,onKeyDown:E,role:"tablist",children:n?.map((t,o)=>{const i=!!c&&c===t.id,e=f.classNames({"a-page-indicator__item":!0,"is-active":i});return b.jsx("button",{id:t.id,role:"tab",className:e,"aria-label":t.ariaLabel,"aria-selected":i?"true":"false","aria-controls":t.ariaControls,tabIndex:i?0:-1,onClick:A(t.id),onFocus:()=>y(o)},t.id)})})}exports.PageIndicator=_;

package/index32.mjs

@@ -0,0 +1,48 @@
+import { jsx as f } from "react/jsx-runtime";
+import F from "react";
+import { classNames as b } from "./index51.mjs";
+import { SIZE_MAP as y, DEFAULT_SIZE as w } from "./index53.mjs";
+function B({ qa: I, size: l, pages: i, activePage: s, onPageChange: u }) {
+  const [n, c] = F.useState(0), x = (t) => c(t), A = (t) => () => u && u(t), E = (t) => {
+    const r = t.key === "ArrowLeft", o = t.key === "ArrowRight";
+    if (r || o) {
+      document.getElementById(s)?.setAttribute("tabindex", "-1");
+      let e = n;
+      o && (e = n + 1 >= i.length ? 0 : n + 1, c(e)), r && (e = n - 1 < 0 ? i.length - 1 : n - 1, c(e));
+      const a = i[e].id;
+      if (a) {
+        const m = document.getElementById(a);
+        m?.setAttribute("tabindex", "0"), i.filter((d) => d.id !== a).forEach((d) => {
+          document.getElementById(d.id)?.setAttribute("tabindex", "-1");
+        }), m?.focus();
+      }
+    }
+  }, h = b({
+    "a-page-indicator": !0,
+    [`a-page-indicator--${y[l || w]}`]: !!l
+  });
+  return /* @__PURE__ */ f("div", { className: h, "data-qa": I, onKeyDown: E, role: "tablist", children: i?.map((t, r) => {
+    const o = !!s && s === t.id, e = b({
+      "a-page-indicator__item": !0,
+      "is-active": o
+    });
+    return /* @__PURE__ */ f(
+      "button",
+      {
+        id: t.id,
+        role: "tab",
+        className: e,
+        "aria-label": t.ariaLabel,
+        "aria-selected": o ? "true" : "false",
+        "aria-controls": t.ariaControls,
+        tabIndex: o ? 0 : -1,
+        onClick: A(t.id),
+        onFocus: () => x(r)
+      },
+      t.id
+    );
+  }) });
+}
+export {
+  B as PageIndicator
+};

package/index33.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("./index51.js"),g=require("react"),h=require("./index53.js"),S=require("./index62.js"),_=require("./index24.js"),$=(a,i,n,t)=>s.jsxs("li",{className:"m-pagination__label",children:[s.jsxs("span",{className:"u-screen-reader-only",children:[t," "]}),n.replace("%currentPage%",`${a}`).replace("%totalPages%",`${i}`)]},"pagination__label"),y=(a,i,n,t)=>S.pagesArray(a,i).map((e,r)=>{if(e){const m=c.classNames({"is-active":e===a});return s.jsx("li",{children:s.jsx("a",{className:m,href:"#",onClick:p=>t&&t(e,p),"aria-label":`${n} ${e}`,"aria-current":e===a?"page":void 0,children:e})},r)}else return s.jsx("li",{children:"..."},r)});function D({currentPage:a=1,itemsPerPage:i,totalItems:n,onChange:t,display:d="numbers",size:e,ariaLabel:r="Paginering",ariaLabelNextPage:m="Volgende pagina",ariaLabelPreviousPage:p="Vorige pagina",ariaLabelPage:x="Pagina",text:f="%currentPage% van de %totalPages%",qa:j}){const[o,N]=g.useState(0),v=l=>{l.preventDefault(),a>1&&u(a-1)},q=l=>{l.preventDefault(),a<o&&u(a+1)},u=(l,b)=>(b&&b.preventDefault(),t&&t(l)),C=c.classNames({"m-pagination":!0,[`m-pagination--${h.SIZE_MAP[e||h.DEFAULT_SIZE]}`]:!!e}),I=c.classNames({"is-disabled":a<=1}),M=c.classNames({"is-disabled":a>=o});return g.useEffect(()=>{if(n&&i){const l=Math.ceil(Math.abs(n)/Math.abs(i));N(l)}},[a,i,n]),s.jsx("nav",{role:"navigation","aria-label":r,"data-qa":j,children:s.jsxs("ul",{className:C,children:[s.jsx("li",{className:"m-pagination__prev",children:s.jsx("a",{href:"#",className:I,"aria-label":p,"aria-disabled":a<=1?"true":void 0,tabIndex:a<=1?-1:0,onClick:v,children:s.jsx(_.Icon,{name:"arrow-left-1"})})},"pagination__prev"),d==="text"&&$(a,o,f,x),d==="numbers"&&y(a,o,x,u),s.jsx("li",{className:"m-pagination__next",children:s.jsx("a",{href:"#",className:M,"aria-label":m,"aria-disabled":a>=o?"true":void 0,tabIndex:a>=o?-1:0,onClick:q,children:s.jsx(_.Icon,{name:"arrow-right-1"})})},"pagination__next")]})})}exports.Pagination=D;

package/index33.mjs

@@ -0,0 +1,90 @@
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { classNames as c } from "./index51.mjs";
+import { useState as M, useEffect as k } from "react";
+import { SIZE_MAP as A, DEFAULT_SIZE as I } from "./index53.mjs";
+import { pagesArray as S } from "./index62.mjs";
+import { Icon as _ } from "./index24.mjs";
+const T = (a, e, s, l) => /* @__PURE__ */ h("li", { className: "m-pagination__label", children: [
+  /* @__PURE__ */ h("span", { className: "u-screen-reader-only", children: [
+    l,
+    " "
+  ] }),
+  s.replace("%currentPage%", `${a}`).replace("%totalPages%", `${e}`)
+] }, "pagination__label"), j = (a, e, s, l) => S(a, e).map((n, r) => {
+  if (n) {
+    const p = c({
+      "is-active": n === a
+    });
+    return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+      "a",
+      {
+        className: p,
+        href: "#",
+        onClick: (m) => l && l(n, m),
+        "aria-label": `${s} ${n}`,
+        "aria-current": n === a ? "page" : void 0,
+        children: n
+      }
+    ) }, r);
+  } else
+    return /* @__PURE__ */ i("li", { children: "..." }, r);
+});
+function U({
+  currentPage: a = 1,
+  itemsPerPage: e,
+  totalItems: s,
+  onChange: l,
+  display: d = "numbers",
+  size: n,
+  ariaLabel: r = "Paginering",
+  ariaLabelNextPage: p = "Volgende pagina",
+  ariaLabelPreviousPage: m = "Vorige pagina",
+  ariaLabelPage: b = "Pagina",
+  text: v = "%currentPage% van de %totalPages%",
+  qa: N
+}) {
+  const [t, x] = M(0), u = (o) => {
+    o.preventDefault(), a > 1 && f(a - 1);
+  }, C = (o) => {
+    o.preventDefault(), a < t && f(a + 1);
+  }, f = (o, g) => (g && g.preventDefault(), l && l(o)), $ = c({
+    "m-pagination": !0,
+    [`m-pagination--${A[n || I]}`]: !!n
+  }), D = c({ "is-disabled": a <= 1 }), E = c({ "is-disabled": a >= t });
+  return k(() => {
+    if (s && e) {
+      const o = Math.ceil(Math.abs(s) / Math.abs(e));
+      x(o);
+    }
+  }, [a, e, s]), /* @__PURE__ */ i("nav", { role: "navigation", "aria-label": r, "data-qa": N, children: /* @__PURE__ */ h("ul", { className: $, children: [
+    /* @__PURE__ */ i("li", { className: "m-pagination__prev", children: /* @__PURE__ */ i(
+      "a",
+      {
+        href: "#",
+        className: D,
+        "aria-label": m,
+        "aria-disabled": a <= 1 ? "true" : void 0,
+        tabIndex: a <= 1 ? -1 : 0,
+        onClick: u,
+        children: /* @__PURE__ */ i(_, { name: "arrow-left-1" })
+      }
+    ) }, "pagination__prev"),
+    d === "text" && T(a, t, v, b),
+    d === "numbers" && j(a, t, b, f),
+    /* @__PURE__ */ i("li", { className: "m-pagination__next", children: /* @__PURE__ */ i(
+      "a",
+      {
+        href: "#",
+        className: E,
+        "aria-label": p,
+        "aria-disabled": a >= t ? "true" : void 0,
+        tabIndex: a >= t ? -1 : 0,
+        onClick: C,
+        children: /* @__PURE__ */ i(_, { name: "arrow-right-1" })
+      }
+    ) }, "pagination__next")
+  ] }) });
+}
+export {
+  U as Pagination
+};

package/index34.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),g=require("./index51.js");function m({label:r,labelId:a="aui-progress-label",showLabel:e=!0,percentage:l=0,ariaValueNow:i,minValue:o=0,maxValue:t=100,large:n,qa:u}){const c=i||l,d=g.classNames({"a-progress":!0,"a-progress--l":!!n});return s.jsxs("div",{className:d,"data-qa":u,children:[e?s.jsx("div",{id:a,className:"a-progress__label",children:r}):null,s.jsx("div",{className:"a-progress__inner",children:s.jsx("div",{className:"a-progress__bar",role:"progressbar","aria-valuenow":c,"aria-valuemin":o,"aria-valuemax":t,style:{width:`${l}%`},...e?{"aria-labelledby":a}:{"aria-label":r}})})]})}exports.ProgressBar=m;

package/index34.mjs

@@ -0,0 +1,36 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { classNames as p } from "./index51.mjs";
+function _({
+  label: r,
+  labelId: s = "aui-progress-label",
+  showLabel: e = !0,
+  percentage: l = 0,
+  ariaValueNow: i,
+  minValue: o = 0,
+  maxValue: n = 100,
+  large: c,
+  qa: m
+}) {
+  const t = i || l, d = p({
+    "a-progress": !0,
+    "a-progress--l": !!c
+  });
+  return /* @__PURE__ */ u("div", { className: d, "data-qa": m, children: [
+    e ? /* @__PURE__ */ a("div", { id: s, className: "a-progress__label", children: r }) : null,
+    /* @__PURE__ */ a("div", { className: "a-progress__inner", children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: "a-progress__bar",
+        role: "progressbar",
+        "aria-valuenow": t,
+        "aria-valuemin": o,
+        "aria-valuemax": n,
+        style: { width: `${l}%` },
+        ...e ? { "aria-labelledby": s } : { "aria-label": r }
+      }
+    ) })
+  ] });
+}
+export {
+  _ as ProgressBar
+};

package/index35.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");function j({autoFocus:i,value:n,label:r,id:a,qa:o,name:s,onChange:t,checked:l,disabled:d,required:u=!1}){const c=h=>{t&&t(h)};return e.jsxs("div",{className:"a-input__radio","data-qa":o,children:[e.jsx("input",{type:"radio",id:a,checked:l,name:s,value:n,onChange:c,disabled:d,autoFocus:i,required:u}),e.jsx("label",{htmlFor:a,children:r})]})}exports.Radio=j;

package/index35.mjs

@@ -0,0 +1,25 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+function f({ autoFocus: r, value: t, label: i, id: a, qa: l, name: o, onChange: e, checked: d, disabled: h, required: s = !1 }) {
+  return /* @__PURE__ */ p("div", { className: "a-input__radio", "data-qa": l, children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "radio",
+        id: a,
+        checked: d,
+        name: o,
+        value: t,
+        onChange: (c) => {
+          e && e(c);
+        },
+        disabled: h,
+        autoFocus: r,
+        required: s
+      }
+    ),
+    /* @__PURE__ */ n("label", { htmlFor: a, children: i })
+  ] });
+}
+export {
+  f as Radio
+};

package/index36.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),q=require("./index51.js"),g=require("./index56.js"),R=require("./index54.js");function _({label:i,name:u,children:o=[],value:r,qa:c,onChange:s,description:l,state:d,required:t=!1}){const p=e=>s&&s(e.target?.value),m=q.classNames({"a-input":!0});return n.jsxs("fieldset",{className:m,"data-qa":c,children:[n.jsxs("legend",{className:"a-input__label",children:[i,t&&R.renderRequiredAsterisk()]}),g.renderDescription({description:l,state:d}),a.Children.map(o,e=>a.cloneElement(e,{name:u,onChange:p,required:t,...r?{checked:e.props.value===r}:{},...e.props}))]})}exports.RadioGroup=_;

package/index36.mjs

@@ -0,0 +1,27 @@
+import { jsxs as a } from "react/jsx-runtime";
+import { Children as u, cloneElement as f } from "react";
+import { classNames as h } from "./index51.mjs";
+import { renderDescription as g } from "./index56.mjs";
+import { renderRequiredAsterisk as N } from "./index54.mjs";
+function b({ label: n, name: o, children: m = [], value: r, qa: p, onChange: t, description: i, state: l, required: s = !1 }) {
+  const c = (e) => t && t(e.target?.value), d = h({
+    "a-input": !0
+  });
+  return /* @__PURE__ */ a("fieldset", { className: d, "data-qa": p, children: [
+    /* @__PURE__ */ a("legend", { className: "a-input__label", children: [
+      n,
+      s && N()
+    ] }),
+    g({ description: i, state: l }),
+    u.map(m, (e) => f(e, {
+      name: o,
+      onChange: c,
+      required: s,
+      ...r ? { checked: e.props.value === r } : {},
+      ...e.props
+    }))
+  ] });
+}
+export {
+  b as RadioGroup
+};

package/index37.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react"),S=require("./index62.js"),I=require("./index63.js"),N=require("./index64.js"),g=require("./index24.js");function T({label:P,start:t=0,end:i,min:r=0,max:l=10,step:o=1,unit:q="",minRange:a=1,range:d=!1,labelStart:L,labelEnd:R,iconStart:h,iconEnd:x,ariaLabelMin:k="Minimum",ariaLabelMax:w="Maximimum",tickMarks:H,qa:y,onChange:u}){const[b,E]=c.useState(0),[m,U]=c.useState(0),[_,V]=c.useState(0),f=c.useRef(null);c.useEffect(()=>(window.addEventListener("resize",j),j(),()=>window.removeEventListener("resize",j)),[]);const j=()=>{if(f.current){const e=f.current.offsetWidth,n=f.current;if(n&&n instanceof HTMLElement){const B=n.getBoundingClientRect().left;V(B)}E(e),U(e)}},p=e=>{if(!(d&&i&&a&&i-e<a))return u&&u(e,d?i:void 0)},M=e=>{if(!(t&&a&&e-t<a))return u&&u(t,e)},v=e=>S.lineValuesToPosition(e,r,l,b),$=e=>S.getPositionValue(e,b,o,r,l,r,l,_),z=e=>{const n=$(e);if(d&&i&&Math.abs(n-i)<Math.abs(n-t)){M(n);return}p(n)};return s.jsxs("div",{className:"a-range-slider","data-qa":y,ref:f,children:[s.jsxs("div",{className:"a-range-slider__labels",children:[s.jsx("div",{className:"a-range-slider__label",children:P}),s.jsxs("div",{className:"a-range-slider__label",children:[d?`${t} - ${i}`:`${t}`,` ${q}`]})]}),s.jsxs("div",{className:"a-range-slider__inner",onClick:z,children:[H&&s.jsx("div",{className:"a-range-slider__tickmarks",children:S.getSteps(r,l,o).map(e=>s.jsx("div",{className:"a-range-slider__tickmark"},e))}),s.jsx(I.RangeSliderBar,{start:t,end:i,getPositionFromValue:v,range:!!d,min:r}),s.jsx(N.RangeSliderHandle,{value:t,onUpdate:p,min:r,max:d&&a?l-a:l,sliderMin:r,sliderMax:l,step:o,sliderPos:m,direction:_,getPositionFromValue:v,ariaLabel:k}),d&&typeof a=="number"&&typeof i=="number"&&s.jsx(N.RangeSliderHandle,{value:i,onUpdate:M,min:r+a,max:l,sliderMin:r,sliderMax:l,step:o,sliderPos:m,direction:_,getPositionFromValue:v,ariaLabel:w})]}),s.jsxs("div",{className:"a-range-slider__descriptions",children:[s.jsxs("div",{className:"a-range-slider__description small",children:[L,h?s.jsx(g.Icon,{name:h}):null]}),s.jsxs("div",{className:"a-range-slider__description small",children:[R,x?s.jsx(g.Icon,{name:x}):null]})]})]})}exports.RangeSlider=T;

package/index37.mjs

@@ -0,0 +1,110 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import c from "react";
+import { getSteps as F, lineValuesToPosition as I, getPositionValue as R } from "./index62.mjs";
+import { RangeSliderBar as W } from "./index63.mjs";
+import { RangeSliderHandle as L } from "./index64.mjs";
+import { Icon as k } from "./index24.mjs";
+function X({
+  label: w,
+  start: l = 0,
+  end: i,
+  min: r = 0,
+  max: s = 10,
+  step: u = 1,
+  unit: E = "",
+  minRange: t = 1,
+  range: d = !1,
+  labelStart: U,
+  labelEnd: V,
+  iconStart: h,
+  iconEnd: N,
+  ariaLabelMin: $ = "Minimum",
+  ariaLabelMax: g = "Maximimum",
+  tickMarks: z,
+  qa: H,
+  onChange: f
+}) {
+  const [b, j] = c.useState(0), [M, y] = c.useState(0), [_, B] = c.useState(0), m = c.useRef(null);
+  c.useEffect(() => (window.addEventListener("resize", p), p(), () => window.removeEventListener("resize", p)), []);
+  const p = () => {
+    if (m.current) {
+      const e = m.current.offsetWidth, a = m.current;
+      if (a && a instanceof HTMLElement) {
+        const D = a.getBoundingClientRect().left;
+        B(D);
+      }
+      j(e), y(e);
+    }
+  }, S = (e) => {
+    if (!(d && i && t && i - e < t))
+      return f && f(e, d ? i : void 0);
+  }, P = (e) => {
+    if (!(l && t && e - l < t))
+      return f && f(l, e);
+  }, v = (e) => I(e, r, s, b), T = (e) => R(e, b, u, r, s, r, s, _), q = (e) => {
+    const a = T(e);
+    if (d && i && Math.abs(a - i) < Math.abs(a - l)) {
+      P(a);
+      return;
+    }
+    S(a);
+  };
+  return /* @__PURE__ */ n("div", { className: "a-range-slider", "data-qa": H, ref: m, children: [
+    /* @__PURE__ */ n("div", { className: "a-range-slider__labels", children: [
+      /* @__PURE__ */ o("div", { className: "a-range-slider__label", children: w }),
+      /* @__PURE__ */ n("div", { className: "a-range-slider__label", children: [
+        d ? `${l} - ${i}` : `${l}`,
+        ` ${E}`
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "a-range-slider__inner", onClick: q, children: [
+      z && /* @__PURE__ */ o("div", { className: "a-range-slider__tickmarks", children: F(r, s, u).map((e) => /* @__PURE__ */ o("div", { className: "a-range-slider__tickmark" }, e)) }),
+      /* @__PURE__ */ o(W, { start: l, end: i, getPositionFromValue: v, range: !!d, min: r }),
+      /* @__PURE__ */ o(
+        L,
+        {
+          value: l,
+          onUpdate: S,
+          min: r,
+          max: d && t ? s - t : s,
+          sliderMin: r,
+          sliderMax: s,
+          step: u,
+          sliderPos: M,
+          direction: _,
+          getPositionFromValue: v,
+          ariaLabel: $
+        }
+      ),
+      d && typeof t == "number" && typeof i == "number" && /* @__PURE__ */ o(
+        L,
+        {
+          value: i,
+          onUpdate: P,
+          min: r + t,
+          max: s,
+          sliderMin: r,
+          sliderMax: s,
+          step: u,
+          sliderPos: M,
+          direction: _,
+          getPositionFromValue: v,
+          ariaLabel: g
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "a-range-slider__descriptions", children: [
+      /* @__PURE__ */ n("div", { className: "a-range-slider__description small", children: [
+        U,
+        h ? /* @__PURE__ */ o(k, { name: h }) : null
+      ] }),
+      /* @__PURE__ */ n("div", { className: "a-range-slider__description small", children: [
+        V,
+        N ? /* @__PURE__ */ o(k, { name: N }) : null
+      ] })
+    ] })
+  ] });
+}
+export {
+  X as RangeSlider
+};

package/index38.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("./index51.js"),c=require("./index53.js"),o=require("./index56.js"),w=require("./index24.js");function I({description:d,disabled:p,id:s,inline:n,label:h,name:m,options:_,placeholder:j="Maak een keuze",required:b,size:a,state:t,value:i,onChange:u,qa:x}){const q=e=>u&&u(e),v=l.classNames({"a-input":!0,"has-icon-right":!0,"a-input--inline":!!n,[`a-input--${c.SIZE_MAP[a||c.DEFAULT_SIZE]}`]:!!a,"has-error":t==="error"}),S=l.classNames({"a-input__wrapper":!0,"a-input__wrapper--inline":!!n});return r.jsxs("div",{className:v,"data-qa":x,children:[o.renderLabel({label:h,id:s,required:b,inline:n}),o.renderDescription({id:s,description:d,state:t}),r.jsxs("div",{className:S,children:[r.jsxs("select",{disabled:p,name:m,id:s,value:i,defaultValue:i||"",onChange:q,children:[r.jsx("option",{value:"",disabled:!0,children:j}),(_||[]).map((e,g)=>r.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},`${e.value}-${g}`))]}),r.jsx(w.Icon,{name:"arrow-down-1"})]})]})}exports.Select=I;

package/index38.mjs

@@ -0,0 +1,57 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { classNames as p } from "./index51.mjs";
+import { SIZE_MAP as I, DEFAULT_SIZE as N } from "./index53.mjs";
+import { renderLabel as S, renderDescription as $ } from "./index56.mjs";
+import { Icon as g } from "./index24.mjs";
+function L({
+  description: u,
+  disabled: c,
+  id: r,
+  inline: a,
+  label: d,
+  name: m,
+  options: h,
+  placeholder: f = "Maak een keuze",
+  required: _,
+  size: i,
+  state: l,
+  value: s,
+  onChange: o,
+  qa: b
+}) {
+  const v = (e) => o && o(e), w = p({
+    "a-input": !0,
+    "has-icon-right": !0,
+    "a-input--inline": !!a,
+    [`a-input--${I[i || N]}`]: !!i,
+    "has-error": l === "error"
+  }), x = p({
+    "a-input__wrapper": !0,
+    "a-input__wrapper--inline": !!a
+  });
+  return /* @__PURE__ */ n("div", { className: w, "data-qa": b, children: [
+    S({ label: d, id: r, required: _, inline: a }),
+    $({ id: r, description: u, state: l }),
+    /* @__PURE__ */ n("div", { className: x, children: [
+      /* @__PURE__ */ n(
+        "select",
+        {
+          disabled: c,
+          name: m,
+          id: r,
+          value: s,
+          defaultValue: s || "",
+          onChange: v,
+          children: [
+            /* @__PURE__ */ t("option", { value: "", disabled: !0, children: f }),
+            (h || []).map((e, E) => /* @__PURE__ */ t("option", { value: e.value, disabled: e.disabled, children: e.label }, `${e.value}-${E}`))
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(g, { name: "arrow-down-1" })
+    ] })
+  ] });
+}
+export {
+  L as Select
+};

package/index39.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index51.js"),d=require("./index52.js"),r=require("./index53.js");function p({label:t="Wordt geladen...",showText:s,size:n,vertical:i,ariaHidden:l,qa:c}){const o=a.classNames({"a-spinner":!0,[`a-spinner--${r.SIZE_MAP[n||r.DEFAULT_SIZE]}`]:!!n,"a-spinner--vertical":!!i}),u=a.classNames({"a-spinner__text":!!s,[d.SCREEN_READER_CLASS]:!s});return e.jsxs("div",{className:o,"aria-hidden":l,"data-qa":c,children:[e.jsx("span",{role:"alert",className:"a-spinner__circle"}),e.jsx("span",{className:u,children:t})]})}exports.Spinner=p;

package/index39.mjs

@@ -0,0 +1,21 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { classNames as e } from "./index51.mjs";
+import { SCREEN_READER_CLASS as m } from "./index52.mjs";
+import { SIZE_MAP as d, DEFAULT_SIZE as _ } from "./index53.mjs";
+function A({ label: n = "Wordt geladen...", showText: a, size: r, vertical: i, ariaHidden: l, qa: t }) {
+  const c = e({
+    "a-spinner": !0,
+    [`a-spinner--${d[r || _]}`]: !!r,
+    "a-spinner--vertical": !!i
+  }), o = e({
+    "a-spinner__text": !!a,
+    [m]: !a
+  });
+  return /* @__PURE__ */ p("div", { className: c, "aria-hidden": l, "data-qa": t, children: [
+    /* @__PURE__ */ s("span", { role: "alert", className: "a-spinner__circle" }),
+    /* @__PURE__ */ s("span", { className: o, children: n })
+  ] });
+}
+export {
+  A as Spinner
+};

package/index4.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("./index51.js"),d=require("./index53.js"),u=require("./index24.js"),r=require("./index10.js"),g=(a,e)=>{const{ariaLabelClose:l="Sluiten",cancelButton:n,children:h,confirmButton:i,onClose:x,qa:b,theme:s,title:c={label:""},titleId:o}=e,j=e.title?.tag||"h5",_=m.classNames({"u-margin-bottom":!!(i||n)});return t.jsxs("div",{role:"alertdialog",className:a,"aria-labelledby":o,"aria-modal":"true","data-qa":b,children:[t.jsx(r.Button,{addOn:{type:"icon",iconProps:{name:"remove"}},emphasis:"low",className:"m-alert__close",theme:s,ariaLabel:l,onClick:x}),!!s&&t.jsx("span",{className:"m-alert__icon",children:t.jsx(u.Icon,{name:d.THEME_ICON_MAP[s]})}),c?.label&&t.jsx(j,{id:o,className:"m-alert__title u-margin-bottom-xs",children:c.label}),t.jsx("p",{className:_,children:h}),t.jsxs("div",{className:"m-alert__actions",children:[i?t.jsx(r.Button,{...i}):null,n?t.jsx(r.Button,{...n}):null]})]})},N=(a,e)=>{const l=e.title?.tag||"h5";return t.jsxs("div",{role:"alert",className:a,"aria-labelledby":e.titleId,"data-qa":e.qa,children:[!!e.theme&&t.jsx("span",{className:"m-alert__icon",children:t.jsx(u.Icon,{name:d.THEME_ICON_MAP[e.theme]})}),!!e.title&&t.jsx(l,{id:e.titleId,className:"paragraph has-base-font u-margin-bottom-xs",children:e.title?.label}),t.jsx("p",{children:e.children})]})};function q(a){const e=m.classNames({"m-alert":!0,[`m-alert--${a.theme}`]:!!a.theme,"m-alert--inline":!!a.inline});return a.inline?N(e,a):g(e,a)}exports.Alert=q;

package/index4.mjs

@@ -0,0 +1,58 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { classNames as s } from "./index51.mjs";
+import { THEME_ICON_MAP as h } from "./index53.mjs";
+import { Icon as u } from "./index24.mjs";
+import { Button as m } from "./index10.mjs";
+const x = (l, e) => {
+  const {
+    ariaLabelClose: t = "Sluiten",
+    cancelButton: n,
+    children: b,
+    confirmButton: i,
+    onClose: _,
+    qa: g,
+    theme: r,
+    title: o = { label: "" },
+    titleId: d
+  } = e, N = e.title?.tag || "h5", f = s({
+    "u-margin-bottom": !!(i || n)
+  });
+  return /* @__PURE__ */ c("div", { role: "alertdialog", className: l, "aria-labelledby": d, "aria-modal": "true", "data-qa": g, children: [
+    /* @__PURE__ */ a(
+      m,
+      {
+        addOn: { type: "icon", iconProps: { name: "remove" } },
+        emphasis: "low",
+        className: "m-alert__close",
+        theme: r,
+        ariaLabel: t,
+        onClick: _
+      }
+    ),
+    !!r && /* @__PURE__ */ a("span", { className: "m-alert__icon", children: /* @__PURE__ */ a(u, { name: h[r] }) }),
+    o?.label && /* @__PURE__ */ a(N, { id: d, className: "m-alert__title u-margin-bottom-xs", children: o.label }),
+    /* @__PURE__ */ a("p", { className: f, children: b }),
+    /* @__PURE__ */ c("div", { className: "m-alert__actions", children: [
+      i ? /* @__PURE__ */ a(m, { ...i }) : null,
+      n ? /* @__PURE__ */ a(m, { ...n }) : null
+    ] })
+  ] });
+}, C = (l, e) => {
+  const t = e.title?.tag || "h5";
+  return /* @__PURE__ */ c("div", { role: "alert", className: l, "aria-labelledby": e.titleId, "data-qa": e.qa, children: [
+    !!e.theme && /* @__PURE__ */ a("span", { className: "m-alert__icon", children: /* @__PURE__ */ a(u, { name: h[e.theme] }) }),
+    !!e.title && /* @__PURE__ */ a(t, { id: e.titleId, className: "paragraph has-base-font u-margin-bottom-xs", children: e.title?.label }),
+    /* @__PURE__ */ a("p", { children: e.children })
+  ] });
+};
+function B(l) {
+  const e = s({
+    "m-alert": !0,
+    [`m-alert--${l.theme}`]: !!l.theme,
+    "m-alert--inline": !!l.inline
+  });
+  return l.inline ? C(e, l) : x(e, l);
+}
+export {
+  B as Alert
+};

package/index40.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("./index51.js"),p=require("./index54.js");function h({steps:c=[],onStepClick:n,screenReaderStepLabel:i="Stap ",screenReaderCompleteLabel:t=" (voltooid)",qa:o}){const d=(e,s,a)=>{n&&(e.preventDefault(),n(a,s))};return l.jsx("ol",{className:"m-step-indicator","data-qa":o,children:c?.map((e,s)=>{const a=u.classNames({"is-completed":!!e.complete,"is-incompleted":!e.complete,"is-active":!!e.active}),r=e.link?.href;return l.jsx("li",{className:a,children:p.wrapWithIf(l.jsxs(l.Fragment,{children:[e.label?null:l.jsxs("span",{className:"u-screen-reader-only",children:[i," ",s+1]}),l.jsx("span",{className:"m-step-indicator__number"}),l.jsxs("span",{className:"m-step-indicator__label",children:[e.label||null,e.complete?l.jsx("span",{className:"u-screen-reader-only",children:t}):null]})]}),l.jsx("a",{onClick:m=>d(m,s,e?.id),href:r}),!!r)},e.id)})})}exports.StepIndicator=h;