@amsterdam/design-system-react 1.1.0 → 2.0.0

package/dist/index.cjs.js

@@ -9,13 +9,73 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+var KeyboardKeys = {
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowRight: 'ArrowRight',
+  ArrowUp: 'ArrowUp',
+  End: 'End',
+  Home: 'Home'
+};
+var FOCUSABLE_ELEMENTS = ['a[href]:not([disabled])', 'button:not([disabled])', 'textarea:not([disabled])', 'input[type="text"]:not([disabled])', 'input[type="radio"]:not([disabled])', 'input[type="checkbox"]:not([disabled])', 'select:not([disabled])'];
+var useKeyboardFocus = function useKeyboardFocus(ref, options) {
+  var _options$directChildr = options.directChildrenOnly,
+    directChildrenOnly = _options$directChildr === void 0 ? false : _options$directChildr,
+    _options$focusableEle = options.focusableElements,
+    focusableElements = _options$focusableEle === void 0 ? FOCUSABLE_ELEMENTS : _options$focusableEle,
+    _options$horizontally = options.horizontally,
+    horizontally = _options$horizontally === void 0 ? false : _options$horizontally,
+    _options$rotating = options.rotating,
+    rotating = _options$rotating === void 0 ? false : _options$rotating;
+  var nextKey = horizontally ? KeyboardKeys.ArrowRight : KeyboardKeys.ArrowDown;
+  var prevKey = horizontally ? KeyboardKeys.ArrowLeft : KeyboardKeys.ArrowUp;
+  var keyDown = function keyDown(e) {
+    if (!ref.current) return;
+    var element = ref.current;
+    var _document = document,
+      activeElement = _document.activeElement;
+    var directChildSelector = directChildrenOnly ? ':scope > ' : '';
+    var focusableEls = Array.from(element.querySelectorAll("".concat(directChildSelector).concat(focusableElements.join(", ".concat(directChildSelector)))));
+    var getIndex = function getIndex(el) {
+      return el && focusableEls.includes(el) ? focusableEls.indexOf(el) : -1;
+    };
+    var targetElement;
+    switch (e.key) {
+      case KeyboardKeys.End:
+        targetElement = focusableEls[focusableEls.length - 1];
+        break;
+      case KeyboardKeys.Home:
+        targetElement = focusableEls[0];
+        break;
+      case nextKey:
+        targetElement = focusableEls[getIndex(activeElement) + 1] || (rotating ? focusableEls[0] : undefined);
+        break;
+      case prevKey:
+        targetElement = focusableEls[getIndex(activeElement) - 1] || (rotating ? focusableEls[focusableEls.length - 1] : undefined);
+        break;
+    }
+    if (targetElement instanceof HTMLElement) {
+      targetElement.focus();
+      e.preventDefault();
+    }
+  };
+  return {
+    keyDown: keyDown
+  };
+};
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
 var defaultValues$2 = {
-  headingLevel: null,
-  sectionAs: 'section'
+  // Level 2 is set here, but it is never used.
+  // headingLevel is a required prop in Accordion, which always overwrites it.
+  headingLevel: 2
 };
 var AccordionContext = /*#__PURE__*/react.createContext(defaultValues$2);
 
@@ -37,9 +97,33 @@ function getHeadingTag(level) {
   }
 }
 
-var _excluded$1z = ["className", "color", "size", "square", "svg"];
-function ownKeys$1I(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1I(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1C = ["children", "className", "color", "level", "size"];
+function ownKeys$1L(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1L(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
+ */
+var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    color = _ref.color,
+    level = _ref.level,
+    size = _ref.size,
+    restProps = _objectWithoutProperties(_ref, _excluded$1C);
+  var Tag = getHeadingTag(level);
+  var visualLevel = size ? size.slice(-1) : level;
+  return jsxRuntime.jsx(Tag, _objectSpread$1L(_objectSpread$1L({
+    className: clsx.clsx('ams-heading', "ams-heading--".concat(visualLevel), color && "ams-heading--".concat(color), className),
+    ref: ref
+  }, restProps), {}, {
+    children: children
+  }));
+});
+Heading.displayName = 'Heading';
+
+var _excluded$1B = ["className", "color", "size", "square", "svg"];
+function ownKeys$1K(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1K(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1K(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1K(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
  * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
@@ -50,9 +134,11 @@ var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     size = _ref.size,
     square = _ref.square,
     svg = _ref.svg,
-    restProps = _objectWithoutProperties(_ref, _excluded$1z);
-  return jsxRuntime.jsx("span", _objectSpread$1I(_objectSpread$1I({
-    className: clsx('ams-icon', color && "ams-icon--".concat(color), size && "ams-icon--".concat(size), square && 'ams-icon--square', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1B);
+  return jsxRuntime.jsx("span", _objectSpread$1K(_objectSpread$1K({
+    className: clsx.clsx('ams-icon', color && "ams-icon--".concat(color), size && "ams-icon--".concat(size), square && 'ams-icon--square', className),
+    hidden // The icon is only shown when the CSS loads, so we hide it by default.
+    : true,
     ref: ref
   }, restProps), {}, {
     children: typeof svg === 'function' ? svg() : svg
@@ -60,16 +146,17 @@ var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$1y = ["children", "className", "expanded", "label"];
-function ownKeys$1H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1A = ["children", "className", "expanded", "label"];
+function ownKeys$1J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1J(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// The 'ams-accordion__header' class is @deprecated and will be removed in a future release.
 var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$expanded = _ref.expanded,
     expanded = _ref$expanded === void 0 ? false : _ref$expanded,
     label = _ref.label,
-    restProps = _objectWithoutProperties(_ref, _excluded$1y);
+    restProps = _objectWithoutProperties(_ref, _excluded$1A);
   var _useContext = react.useContext(AccordionContext),
     headingLevel = _useContext.headingLevel,
     sectionAs = _useContext.sectionAs;
@@ -77,17 +164,18 @@ var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
     setIsExpanded = _useState2[1];
-  var HeadingTag = getHeadingTag(headingLevel);
   var SectionTag = sectionAs || 'section';
   var id = react.useId();
+  var iconSize = "heading-".concat(headingLevel);
   var buttonId = "button-".concat(id);
   var panelId = "panel-".concat(id);
-  return jsxRuntime.jsxs("div", _objectSpread$1H(_objectSpread$1H({
-    className: clsx('ams-accordion__section', className),
+  return jsxRuntime.jsxs("div", _objectSpread$1J(_objectSpread$1J({
+    className: clsx.clsx('ams-accordion__section', className),
     ref: ref
   }, restProps), {}, {
-    children: [jsxRuntime.jsx(HeadingTag, {
+    children: [jsxRuntime.jsx(Heading, {
       className: "ams-accordion__header",
+      level: headingLevel,
       children: jsxRuntime.jsxs("button", {
         "aria-controls": panelId,
         "aria-expanded": isExpanded,
@@ -99,13 +187,13 @@ var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         type: "button",
         children: [jsxRuntime.jsx(Icon, {
           className: "ams-accordion__icon",
-          size: "heading-4",
+          size: iconSize,
           svg: designSystemReactIcons.ChevronDownIcon
         }), label]
       })
     }), jsxRuntime.jsx(SectionTag, {
       "aria-labelledby": buttonId,
-      className: clsx('ams-accordion__panel', {
+      className: clsx.clsx('ams-accordion__panel', {
         'ams-accordion__panel--expanded': isExpanded
       }),
       id: panelId,
@@ -115,65 +203,6 @@ var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 AccordionSection.displayName = 'Accordion.Section';
 
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-var KeyboardKeys = {
-  ArrowDown: 'ArrowDown',
-  ArrowLeft: 'ArrowLeft',
-  ArrowRight: 'ArrowRight',
-  ArrowUp: 'ArrowUp',
-  End: 'End',
-  Home: 'Home'
-};
-var FOCUSABLE_ELEMENTS = ['a[href]:not([disabled])', 'button:not([disabled])', 'textarea:not([disabled])', 'input[type="text"]:not([disabled])', 'input[type="radio"]:not([disabled])', 'input[type="checkbox"]:not([disabled])', 'select:not([disabled])'];
-var useKeyboardFocus = function useKeyboardFocus(ref, options) {
-  var _options$directChildr = options.directChildrenOnly,
-    directChildrenOnly = _options$directChildr === void 0 ? false : _options$directChildr,
-    _options$focusableEle = options.focusableElements,
-    focusableElements = _options$focusableEle === void 0 ? FOCUSABLE_ELEMENTS : _options$focusableEle,
-    _options$horizontally = options.horizontally,
-    horizontally = _options$horizontally === void 0 ? false : _options$horizontally,
-    _options$rotating = options.rotating,
-    rotating = _options$rotating === void 0 ? false : _options$rotating;
-  var nextKey = horizontally ? KeyboardKeys.ArrowRight : KeyboardKeys.ArrowDown;
-  var prevKey = horizontally ? KeyboardKeys.ArrowLeft : KeyboardKeys.ArrowUp;
-  var keyDown = function keyDown(e) {
-    if (!ref.current) return;
-    var element = ref.current;
-    var _document = document,
-      activeElement = _document.activeElement;
-    var directChildSelector = directChildrenOnly ? ':scope > ' : '';
-    var focusableEls = Array.from(element.querySelectorAll("".concat(directChildSelector).concat(focusableElements.join(", ".concat(directChildSelector)))));
-    var getIndex = function getIndex(el) {
-      return el && focusableEls.includes(el) ? focusableEls.indexOf(el) : -1;
-    };
-    var targetElement;
-    switch (e.key) {
-      case nextKey:
-        targetElement = focusableEls[getIndex(activeElement) + 1] || (rotating ? focusableEls[0] : undefined);
-        break;
-      case prevKey:
-        targetElement = focusableEls[getIndex(activeElement) - 1] || (rotating ? focusableEls[focusableEls.length - 1] : undefined);
-        break;
-      case KeyboardKeys.Home:
-        targetElement = focusableEls[0];
-        break;
-      case KeyboardKeys.End:
-        targetElement = focusableEls[focusableEls.length - 1];
-        break;
-    }
-    if (targetElement instanceof HTMLElement) {
-      targetElement.focus();
-      e.preventDefault();
-    }
-  };
-  return {
-    keyDown: keyDown
-  };
-};
-
 var AccordionRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -196,7 +225,7 @@ var AccordionRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       sectionAs: sectionAs
     },
     children: jsxRuntime.jsx("div", {
-      className: clsx('ams-accordion', className),
+      className: clsx.clsx('ams-accordion', className),
       onKeyDown: keyDown,
       ref: innerRef,
       children: children
@@ -211,18 +240,18 @@ var Accordion = Object.assign(AccordionRoot, {
   Section: AccordionSection
 });
 
-var _excluded$1x = ["children", "className"];
-function ownKeys$1G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1z = ["children", "className"];
+function ownKeys$1I(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1I(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
  */
 var ActionGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1x);
-  return jsxRuntime.jsx("div", _objectSpread$1G(_objectSpread$1G({}, restProps), {}, {
-    className: clsx('ams-action-group', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1z);
+  return jsxRuntime.jsx("div", _objectSpread$1I(_objectSpread$1I({}, restProps), {}, {
+    className: clsx.clsx('ams-action-group', className),
     ref: ref,
     role: "group",
     children: children
@@ -230,33 +259,9 @@ var ActionGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 ActionGroup.displayName = 'ActionGroup';
 
-var _excluded$1w = ["children", "className", "color", "level", "size"];
-function ownKeys$1F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1F(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
- */
-var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    color = _ref.color,
-    level = _ref.level,
-    size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$1w);
-  var Tag = getHeadingTag(level);
-  var visualLevel = size ? size.slice(-1) : level;
-  return jsxRuntime.jsx(Tag, _objectSpread$1F(_objectSpread$1F({
-    className: clsx('ams-heading', "ams-heading--".concat(visualLevel), color && "ams-heading--".concat(color), className),
-    ref: ref
-  }, restProps), {}, {
-    children: children
-  }));
-});
-Heading.displayName = 'Heading';
-
-var _excluded$1v = ["className", "color", "label", "size", "svg", "type"];
-function ownKeys$1E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1E(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1y = ["className", "color", "label", "size", "svg", "type"];
+function ownKeys$1H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
  */
@@ -268,9 +273,9 @@ var IconButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$svg = _ref.svg,
     svg = _ref$svg === void 0 ? designSystemReactIcons.CloseIcon : _ref$svg,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$1v);
-  return jsxRuntime.jsxs("button", _objectSpread$1E(_objectSpread$1E({}, restProps), {}, {
-    className: clsx('ams-icon-button', color && "ams-icon-button--".concat(color), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1y);
+  return jsxRuntime.jsxs("button", _objectSpread$1H(_objectSpread$1H({}, restProps), {}, {
+    className: clsx.clsx('ams-icon-button', color && "ams-icon-button--".concat(color), className),
     ref: ref,
     type: type || 'button',
     children: [jsxRuntime.jsx("span", {
@@ -285,9 +290,9 @@ var IconButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 IconButton.displayName = 'IconButton';
 
-var _excluded$1u = ["align", "alignVertical", "as", "children", "className", "gap", "wrap"];
-function ownKeys$1D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1D(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1x = ["align", "alignVertical", "as", "children", "className", "gap", "wrap"];
+function ownKeys$1G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
  */
@@ -300,18 +305,18 @@ var Row = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     gap = _ref.gap,
     wrap = _ref.wrap,
-    restProps = _objectWithoutProperties(_ref, _excluded$1u);
-  return jsxRuntime.jsx(Tag, _objectSpread$1D(_objectSpread$1D({}, restProps), {}, {
-    className: clsx('ams-row', align && "ams-row--align-".concat(align), alignVertical && "ams-row--align-vertical-".concat(alignVertical), gap && "ams-row--gap-".concat(gap), wrap && 'ams-row--wrap', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1x);
+  return jsxRuntime.jsx(Tag, _objectSpread$1G(_objectSpread$1G({}, restProps), {}, {
+    className: clsx.clsx('ams-row', align && "ams-row--align-".concat(align), alignVertical && "ams-row--align-vertical-".concat(alignVertical), gap && "ams-row--gap-".concat(gap), wrap && 'ams-row--wrap', className),
     ref: ref,
     children: children
   }));
 });
 Row.displayName = 'Row';
 
-var _excluded$1t = ["children", "className", "closeable", "closeButtonLabel", "heading", "headingLevel", "onClose", "severity"];
-function ownKeys$1C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1C(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1w = ["children", "className", "closeable", "closeButtonLabel", "heading", "headingId", "headingLevel", "onClose", "severity"];
+function ownKeys$1F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1F(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var iconSvgBySeverity = {
   error: designSystemReactIcons.ErrorFillIcon,
   success: designSystemReactIcons.SuccessFillIcon,
@@ -327,19 +332,22 @@ var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$closeButtonLabel = _ref.closeButtonLabel,
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Sluiten' : _ref$closeButtonLabel,
     heading = _ref.heading,
+    _ref$headingId = _ref.headingId,
+    headingId = _ref$headingId === void 0 ? 'ams-alert-heading' : _ref$headingId,
     headingLevel = _ref.headingLevel,
     onClose = _ref.onClose,
     severity = _ref.severity,
-    restProps = _objectWithoutProperties(_ref, _excluded$1t);
+    restProps = _objectWithoutProperties(_ref, _excluded$1w);
   var SeverityIcon = severity ? iconSvgBySeverity[severity] : designSystemReactIcons.InfoFillIcon;
-  return jsxRuntime.jsxs("section", _objectSpread$1C(_objectSpread$1C({}, restProps), {}, {
-    className: clsx('ams-alert', severity && "ams-alert--".concat(severity), className),
+  return jsxRuntime.jsxs("section", _objectSpread$1F(_objectSpread$1F({}, restProps), {}, {
+    "aria-labelledby": headingId || undefined,
+    className: clsx.clsx('ams-alert', severity && "ams-alert--".concat(severity), className),
     ref: ref,
     children: [jsxRuntime.jsx("div", {
       className: "ams-alert__severity-indicator",
       children: jsxRuntime.jsx(Icon, {
         color: "inverse",
-        size: "heading-4",
+        size: "heading-3",
         svg: SeverityIcon
       })
     }), jsxRuntime.jsxs("div", {
@@ -348,13 +356,14 @@ var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         align: "between",
         alignVertical: "start",
         children: [jsxRuntime.jsx(Heading, {
+          id: headingId || undefined,
           level: headingLevel,
-          size: "level-4",
+          size: "level-3",
           children: heading
         }), closeable && jsxRuntime.jsx(IconButton, {
           label: closeButtonLabel,
           onClick: onClose,
-          size: "heading-4"
+          size: "heading-3"
         })]
       }), children]
     })]
@@ -362,9 +371,9 @@ var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Alert.displayName = 'Alert';
 
-var _excluded$1s = ["className", "color", "imageSrc", "label"];
-function ownKeys$1B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1B(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1v = ["className", "color", "imageSrc", "label"];
+function ownKeys$1E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1E(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AvatarContent = function AvatarContent(_ref) {
   var imageSrc = _ref.imageSrc,
     initials = _ref.initials;
@@ -393,11 +402,11 @@ var Avatar = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     color = _ref2.color,
     imageSrc = _ref2.imageSrc,
     label = _ref2.label,
-    restProps = _objectWithoutProperties(_ref2, _excluded$1s);
+    restProps = _objectWithoutProperties(_ref2, _excluded$1v);
   var initials = label.slice(0, 2).toUpperCase();
   var a11yLabel = initials.length === 0 ? 'Gebruiker' : "Initialen gebruiker: ".concat(initials);
-  return jsxRuntime.jsxs("span", _objectSpread$1B(_objectSpread$1B({}, restProps), {}, {
-    className: clsx('ams-avatar', color && "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
+  return jsxRuntime.jsxs("span", _objectSpread$1E(_objectSpread$1E({}, restProps), {}, {
+    className: clsx.clsx('ams-avatar', color && "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
     ref: ref,
     children: [jsxRuntime.jsx("span", {
       className: "ams-visually-hidden",
@@ -410,9 +419,9 @@ var Avatar = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$1r = ["className", "color", "label"];
-function ownKeys$1A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1u = ["className", "color", "label"];
+function ownKeys$1D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1D(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
  */
@@ -420,18 +429,18 @@ var Badge = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     color = _ref.color,
     label = _ref.label,
-    restProps = _objectWithoutProperties(_ref, _excluded$1r);
-  return jsxRuntime.jsx("span", _objectSpread$1A(_objectSpread$1A({}, restProps), {}, {
-    className: clsx('ams-badge', color && "ams-badge--".concat(color), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1u);
+  return jsxRuntime.jsx("span", _objectSpread$1D(_objectSpread$1D({}, restProps), {}, {
+    className: clsx.clsx('ams-badge', color && "ams-badge--".concat(color), className),
     ref: ref,
     children: label
   }));
 });
 Badge.displayName = 'Badge';
 
-var _excluded$1q = ["children", "className", "color"];
-function ownKeys$1z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1t = ["children", "className", "color"];
+function ownKeys$1C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1C(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
  */
@@ -439,25 +448,25 @@ var Blockquote = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$1q);
-  return jsxRuntime.jsx("blockquote", _objectSpread$1z(_objectSpread$1z({}, restProps), {}, {
-    className: clsx('ams-blockquote', color && "ams-blockquote--".concat(color), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1t);
+  return jsxRuntime.jsx("blockquote", _objectSpread$1C(_objectSpread$1C({}, restProps), {}, {
+    className: clsx.clsx('ams-blockquote', color && "ams-blockquote--".concat(color), className),
     ref: ref,
     children: children
   }));
 });
 Blockquote.displayName = 'Blockquote';
 
-var _excluded$1p = ["children", "className"];
-function ownKeys$1y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1s = ["children", "className"];
+function ownKeys$1B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1B(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1p);
+    restProps = _objectWithoutProperties(_ref, _excluded$1s);
   return jsxRuntime.jsx("li", {
     className: "ams-breadcrumb__item",
-    children: jsxRuntime.jsx("a", _objectSpread$1y(_objectSpread$1y({}, restProps), {}, {
+    children: jsxRuntime.jsx("a", _objectSpread$1B(_objectSpread$1B({}, restProps), {}, {
       className: clsx.clsx('ams-breadcrumb__link', className),
       ref: ref,
       children: children
@@ -466,14 +475,14 @@ var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 BreadcrumbLink.displayName = 'Breadcrumb.Link';
 
-var _excluded$1o = ["children", "className"];
-function ownKeys$1x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1x(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1r = ["children", "className"];
+function ownKeys$1A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BreadcrumbRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1o);
-  return jsxRuntime.jsx("nav", _objectSpread$1x(_objectSpread$1x({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1r);
+  return jsxRuntime.jsx("nav", _objectSpread$1A(_objectSpread$1A({}, restProps), {}, {
     className: clsx.clsx('ams-breadcrumb', className),
     ref: ref,
     children: jsxRuntime.jsx("ol", {
@@ -490,6 +499,24 @@ var Breadcrumb = Object.assign(BreadcrumbRoot, {
   Link: BreadcrumbLink
 });
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+var paddingClasses = function paddingClasses(componentName, paddingBottom, paddingTop, paddingVertical) {
+  var classes = [];
+  if (paddingVertical) {
+    return ["ams-".concat(componentName, "--padding-vertical--").concat(paddingVertical)];
+  }
+  if (paddingBottom) {
+    classes.push("ams-".concat(componentName, "--padding-bottom--").concat(paddingBottom));
+  }
+  if (paddingTop) {
+    classes.push("ams-".concat(componentName, "--padding-top--").concat(paddingTop));
+  }
+  return classes;
+};
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
@@ -513,9 +540,9 @@ var breakoutCellClasses = function breakoutCellClasses(colSpan, colStart, rowSpa
   return [].concat(_toConsumableArray(addGridClass('ams-breakout__cell--col-span-', colSpan)), _toConsumableArray(addGridClass('ams-breakout__cell--col-start-', colStart)), _toConsumableArray(addGridClass('ams-breakout__cell--row-span-', rowSpan)), _toConsumableArray(addGridClass('ams-breakout__cell--row-start-', rowStart)));
 };
 
-var _excluded$1n = ["as", "children", "className", "colSpan", "colStart", "has", "rowSpan", "rowStart"];
-function ownKeys$1w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1w(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1q = ["as", "children", "className", "colSpan", "colStart", "has", "rowSpan", "rowStart"];
+function ownKeys$1z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BreakoutCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -526,36 +553,18 @@ var BreakoutCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     has = _ref.has,
     rowSpan = _ref.rowSpan,
     rowStart = _ref.rowStart,
-    restProps = _objectWithoutProperties(_ref, _excluded$1n);
-  return jsxRuntime.jsx(Tag, _objectSpread$1w(_objectSpread$1w({}, restProps), {}, {
-    className: clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && "ams-breakout__cell--has-".concat(has), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1q);
+  return jsxRuntime.jsx(Tag, _objectSpread$1z(_objectSpread$1z({}, restProps), {}, {
+    className: clsx.clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && "ams-breakout__cell--has-".concat(has), className),
     ref: ref,
     children: children
   }));
 });
 BreakoutCell.displayName = 'Breakout.Cell';
 
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-var paddingClasses = function paddingClasses(componentName, paddingBottom, paddingTop, paddingVertical) {
-  var classes = [];
-  if (paddingVertical) {
-    return ["ams-".concat(componentName, "--padding-vertical--").concat(paddingVertical)];
-  }
-  if (paddingBottom) {
-    classes.push("ams-".concat(componentName, "--padding-bottom--").concat(paddingBottom));
-  }
-  if (paddingTop) {
-    classes.push("ams-".concat(componentName, "--padding-top--").concat(paddingTop));
-  }
-  return classes;
-};
-
-var _excluded$1m = ["children", "className", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
-function ownKeys$1v(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1v(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1p = ["children", "className", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
+function ownKeys$1y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BreakoutRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -563,9 +572,9 @@ var BreakoutRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     paddingBottom = _ref.paddingBottom,
     paddingTop = _ref.paddingTop,
     paddingVertical = _ref.paddingVertical,
-    restProps = _objectWithoutProperties(_ref, _excluded$1m);
-  return jsxRuntime.jsx("div", _objectSpread$1v(_objectSpread$1v({}, restProps), {}, {
-    className: clsx('ams-breakout', gapVertical && "ams-breakout--gap-vertical--".concat(gapVertical), paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1p);
+  return jsxRuntime.jsx("div", _objectSpread$1y(_objectSpread$1y({}, restProps), {}, {
+    className: clsx.clsx('ams-breakout', gapVertical && "ams-breakout--gap-vertical--".concat(gapVertical), paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className),
     ref: ref,
     children: children
   }));
@@ -578,9 +587,9 @@ var Breakout = Object.assign(BreakoutRoot, {
   Cell: BreakoutCell
 });
 
-var _excluded$1l = ["children", "className", "disabled", "icon", "iconBefore", "iconOnly", "type", "variant"];
-function ownKeys$1u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1o = ["children", "className", "disabled", "icon", "iconBefore", "iconOnly", "type", "variant"];
+function ownKeys$1x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1x(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */
@@ -594,9 +603,9 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     type = _ref.type,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutProperties(_ref, _excluded$1l);
-  return jsxRuntime.jsxs("button", _objectSpread$1u(_objectSpread$1u({}, restProps), {}, {
-    className: clsx('ams-button', "ams-button--".concat(variant), icon && iconOnly && "ams-button--icon-only", className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1o);
+  return jsxRuntime.jsxs("button", _objectSpread$1x(_objectSpread$1x({}, restProps), {}, {
+    className: clsx.clsx('ams-button', "ams-button--".concat(variant), icon && iconOnly && "ams-button--icon-only", className),
     disabled: disabled,
     ref: ref,
     type: type || 'button',
@@ -613,17 +622,35 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$1k = ["children", "className", "size"];
-function ownKeys$1t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1t(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1n = ["children", "className"];
+function ownKeys$1w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1w(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
+ */
+var CallToActionLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1n);
+  return jsxRuntime.jsx("a", _objectSpread$1w(_objectSpread$1w({}, restProps), {}, {
+    className: clsx.clsx('ams-call-to-action-link', className),
+    ref: ref,
+    children: children
+  }));
+});
+CallToActionLink.displayName = 'CallToActionLink';
+
+var _excluded$1m = ["children", "className", "size"];
+function ownKeys$1v(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1v(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CardHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'level-4' : _ref$size,
-    restProps = _objectWithoutProperties(_ref, _excluded$1k);
-  return jsxRuntime.jsx(Heading, _objectSpread$1t(_objectSpread$1t({}, restProps), {}, {
-    className: clsx('ams-card__heading', className),
+    size = _ref$size === void 0 ? 'level-3' : _ref$size,
+    restProps = _objectWithoutProperties(_ref, _excluded$1m);
+  return jsxRuntime.jsx(Heading, _objectSpread$1v(_objectSpread$1v({}, restProps), {}, {
+    className: clsx.clsx('ams-card__heading', className),
     ref: ref,
     size: size,
     children: children
@@ -631,9 +658,9 @@ var CardHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 CardHeading.displayName = 'Card.Heading';
 
-var _excluded$1j = ["children", "className", "color", "size"];
-function ownKeys$1s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1l = ["children", "className", "color", "size"];
+function ownKeys$1u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
@@ -642,9 +669,9 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$1j);
-  return jsxRuntime.jsx("p", _objectSpread$1s(_objectSpread$1s({
-    className: clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1l);
+  return jsxRuntime.jsx("p", _objectSpread$1u(_objectSpread$1u({
+    className: clsx.clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -652,16 +679,16 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$1i = ["children", "className", "tagline"];
-function ownKeys$1r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1r(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1k = ["children", "className", "tagline"];
+function ownKeys$1t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1t(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CardHeadingGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     tagline = _ref.tagline,
-    restProps = _objectWithoutProperties(_ref, _excluded$1i);
-  return jsxRuntime.jsxs("hgroup", _objectSpread$1r(_objectSpread$1r({}, restProps), {}, {
-    className: clsx('ams-card__heading-group', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1k);
+  return jsxRuntime.jsxs("hgroup", _objectSpread$1t(_objectSpread$1t({}, restProps), {}, {
+    className: clsx.clsx('ams-card__heading-group', className),
     ref: ref,
     children: [children, jsxRuntime.jsx(Paragraph, {
       size: "small",
@@ -679,60 +706,61 @@ var generateAspectRatioClass = function generateAspectRatioClass(aspectRatio) {
   return aspectRatio && "ams-aspect-ratio-".concat(aspectRatio.replace(':', '-'));
 };
 
-var _excluded$1h = ["aspectRatio", "className"];
-function ownKeys$1q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1q(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1j = ["aspectRatio", "className"];
+function ownKeys$1s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
 var Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var aspectRatio = _ref.aspectRatio,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1h);
-  return jsxRuntime.jsx("img", _objectSpread$1q(_objectSpread$1q({}, restProps), {}, {
-    className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
-    ref: ref
+    restProps = _objectWithoutProperties(_ref, _excluded$1j);
+  return jsxRuntime.jsx("img", _objectSpread$1s(_objectSpread$1s({}, restProps), {}, {
+    className: clsx.clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
+    ref: ref,
+    width: 600
   }));
 });
 Image.displayName = 'Image';
 
-var _excluded$1g = ["className"];
-function ownKeys$1p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1i = ["className"];
+function ownKeys$1r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1r(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CardImage = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1g);
-  return jsxRuntime.jsx(Image, _objectSpread$1p(_objectSpread$1p({}, restProps), {}, {
-    className: clsx('ams-card__image', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1i);
+  return jsxRuntime.jsx(Image, _objectSpread$1r(_objectSpread$1r({}, restProps), {}, {
+    className: clsx.clsx('ams-card__image', className),
     ref: ref
   }));
 });
 CardImage.displayName = 'Card.Image';
 
-var _excluded$1f = ["children", "className"];
-function ownKeys$1o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1o(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1h = ["children", "className"];
+function ownKeys$1q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1q(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CardLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1f);
-  return jsxRuntime.jsx("a", _objectSpread$1o(_objectSpread$1o({}, restProps), {}, {
-    className: clsx('ams-card__link', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1h);
+  return jsxRuntime.jsx("a", _objectSpread$1q(_objectSpread$1q({}, restProps), {}, {
+    className: clsx.clsx('ams-card__link', className),
     ref: ref,
     children: children
   }));
 });
 CardLink.displayName = 'Card.Link';
 
-var _excluded$1e = ["children", "className"];
-function ownKeys$1n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1n(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1g = ["children", "className"];
+function ownKeys$1p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CardRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1e);
-  return jsxRuntime.jsx("article", _objectSpread$1n(_objectSpread$1n({}, restProps), {}, {
-    className: clsx('ams-card', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1g);
+  return jsxRuntime.jsx("article", _objectSpread$1p(_objectSpread$1p({}, restProps), {}, {
+    className: clsx.clsx('ams-card', className),
     ref: ref,
     children: children
   }));
@@ -748,9 +776,9 @@ var Card = Object.assign(CardRoot, {
   Link: CardLink
 });
 
-var _excluded$1d = ["className", "length", "maxLength"];
-function ownKeys$1m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1m(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1f = ["className", "length", "maxLength"];
+function ownKeys$1o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1o(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
  */
@@ -758,9 +786,9 @@ var CharacterCount = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     length = _ref.length,
     maxLength = _ref.maxLength,
-    restProps = _objectWithoutProperties(_ref, _excluded$1d);
-  return jsxRuntime.jsx("div", _objectSpread$1m(_objectSpread$1m({}, restProps), {}, {
-    className: clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1f);
+  return jsxRuntime.jsx("div", _objectSpread$1o(_objectSpread$1o({}, restProps), {}, {
+    className: clsx.clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className),
     ref: ref,
     role: "status",
     children: "".concat(length, " van ").concat(maxLength, " tekens")
@@ -768,10 +796,10 @@ var CharacterCount = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 CharacterCount.displayName = 'CharacterCount';
 
-function ownKeys$1l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1l(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1n(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SvgCheckbox = function SvgCheckbox(props) {
-  return jsxRuntime.jsxs("svg", _objectSpread$1l(_objectSpread$1l({
+  return jsxRuntime.jsxs("svg", _objectSpread$1n(_objectSpread$1n({
     "aria-hidden": "true",
     focusable: "false",
     viewBox: "0 0 24 24",
@@ -814,20 +842,22 @@ var SvgCheckbox = function SvgCheckbox(props) {
   }));
 };
 
-var _excluded$1c = ["children", "className", "icon", "indeterminate", "invalid"];
-function ownKeys$1k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1k(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1e = ["children", "className", "icon", "id", "indeterminate", "invalid"];
+function ownKeys$1m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1m(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
  */
 var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? SvgCheckbox : _ref$icon,
+    id = _ref.id,
     indeterminate = _ref.indeterminate,
     invalid = _ref.invalid,
-    restProps = _objectWithoutProperties(_ref, _excluded$1c);
-  var id = react.useId();
+    restProps = _objectWithoutProperties(_ref, _excluded$1e);
+  var inputId = id || react.useId();
   var innerRef = react.useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
   react.useImperativeHandle(ref, function () {
@@ -843,19 +873,20 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     // This div is here because NVDA doesn't match the input to the label
     // without a containing element
     jsxRuntime.jsxs("div", {
-      className: clsx('ams-checkbox', className),
-      children: [jsxRuntime.jsx("input", _objectSpread$1k(_objectSpread$1k({}, restProps), {}, {
+      className: clsx.clsx('ams-checkbox', className),
+      children: [jsxRuntime.jsx("input", _objectSpread$1m(_objectSpread$1m({}, restProps), {}, {
         "aria-invalid": invalid || undefined,
         className: "ams-checkbox__input",
-        id: id,
+        id: inputId,
         ref: innerRef,
         type: "checkbox"
       })), jsxRuntime.jsxs("label", {
         className: "ams-checkbox__label",
-        htmlFor: id,
+        htmlFor: inputId,
         children: [jsxRuntime.jsx("span", {
           className: "ams-checkbox__icon-container",
-          children: icon !== null && icon !== void 0 ? icon : jsxRuntime.jsx(SvgCheckbox, {})
+          hidden: true,
+          children: typeof icon === 'function' ? icon() : icon
         }), children]
       })]
     })
@@ -863,9 +894,9 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$1b = ["align", "alignHorizontal", "as", "children", "className", "gap"];
-function ownKeys$1j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1d = ["align", "alignHorizontal", "as", "children", "className", "gap"];
+function ownKeys$1l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1l(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
  */
@@ -877,18 +908,18 @@ var Column = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     gap = _ref.gap,
-    restProps = _objectWithoutProperties(_ref, _excluded$1b);
-  return jsxRuntime.jsx(Tag, _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
-    className: clsx('ams-column', align && "ams-column--align-".concat(align), alignHorizontal && "ams-column--align-horizontal-".concat(alignHorizontal), gap && "ams-column--gap-".concat(gap), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1d);
+  return jsxRuntime.jsx(Tag, _objectSpread$1l(_objectSpread$1l({}, restProps), {}, {
+    className: clsx.clsx('ams-column', align && "ams-column--align-".concat(align), alignHorizontal && "ams-column--align-horizontal-".concat(alignHorizontal), gap && "ams-column--gap-".concat(gap), className),
     ref: ref,
     children: children
   }));
 });
 Column.displayName = 'Column';
 
-var _excluded$1a = ["className", "invalid", "type"];
-function ownKeys$1i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1c = ["className", "invalid", "type"];
+function ownKeys$1k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1k(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-input--docs Date Input docs at Amsterdam Design System}
  */
@@ -897,72 +928,72 @@ var DateInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     invalid = _ref.invalid,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'date' : _ref$type,
-    restProps = _objectWithoutProperties(_ref, _excluded$1a);
-  return jsxRuntime.jsx("input", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1c);
+  return jsxRuntime.jsx("input", _objectSpread$1k(_objectSpread$1k({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
-    className: clsx('ams-date-input', className),
+    className: clsx.clsx('ams-date-input', className),
     ref: ref,
     type: type
   }));
 });
 DateInput.displayName = 'DateInput';
 
-var _excluded$19 = ["children", "className"];
-function ownKeys$1h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1b = ["children", "className"];
+function ownKeys$1j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DescriptionListDescription = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$19);
-  return jsxRuntime.jsx("dd", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
-    className: clsx('ams-description-list__description', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1b);
+  return jsxRuntime.jsx("dd", _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
+    className: clsx.clsx('ams-description-list__description', className),
     ref: ref,
     children: children
   }));
 });
 DescriptionListDescription.displayName = 'DescriptionList.Description';
 
-var _excluded$18 = ["children", "className"];
-function ownKeys$1g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1a = ["children", "className"];
+function ownKeys$1i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DescriptionListSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$18);
-  return jsxRuntime.jsx("div", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
-    className: clsx('ams-description-list__section', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1a);
+  return jsxRuntime.jsx("div", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
+    className: clsx.clsx('ams-description-list__section', className),
     ref: ref,
     children: children
   }));
 });
 DescriptionListSection.displayName = 'DescriptionList.Section';
 
-var _excluded$17 = ["children", "className"];
-function ownKeys$1f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$19 = ["children", "className"];
+function ownKeys$1h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DescriptionListTerm = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$17);
-  return jsxRuntime.jsx("dt", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
-    className: clsx('ams-description-list__term', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$19);
+  return jsxRuntime.jsx("dt", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
+    className: clsx.clsx('ams-description-list__term', className),
     ref: ref,
     children: children
   }));
 });
 DescriptionListTerm.displayName = 'DescriptionList.Term';
 
-var _excluded$16 = ["children", "className", "color", "termsWidth"];
-function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$18 = ["children", "className", "color", "termsWidth"];
+function ownKeys$1g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DescriptionListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
     termsWidth = _ref.termsWidth,
-    restProps = _objectWithoutProperties(_ref, _excluded$16);
-  return jsxRuntime.jsx("dl", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
-    className: clsx('ams-description-list', color && "ams-description-list--".concat(color), termsWidth && "ams-description-list--".concat(termsWidth), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$18);
+  return jsxRuntime.jsx("dl", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
+    className: clsx.clsx('ams-description-list', color && "ams-description-list--".concat(color), termsWidth && "ams-description-list--".concat(termsWidth), className),
     ref: ref,
     children: children
   }));
@@ -977,9 +1008,9 @@ var DescriptionList = Object.assign(DescriptionListRoot, {
   Term: DescriptionListTerm
 });
 
-var _excluded$15 = ["children", "className", "closeButtonLabel", "footer", "heading"];
-function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$17 = ["children", "className", "closeButtonLabel", "footer", "heading"];
+function ownKeys$1f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var closeDialog = function closeDialog(event) {
   var _event$currentTarget$;
   return (_event$currentTarget$ = event.currentTarget.closest('dialog')) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.close();
@@ -995,20 +1026,20 @@ var DialogRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Sluiten' : _ref$closeButtonLabel,
     footer = _ref.footer,
     heading = _ref.heading,
-    restProps = _objectWithoutProperties(_ref, _excluded$15);
-  return jsxRuntime.jsxs("dialog", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
-    className: clsx('ams-dialog', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$17);
+  return jsxRuntime.jsxs("dialog", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
+    className: clsx.clsx('ams-dialog', className),
     ref: ref,
     children: [jsxRuntime.jsxs("header", {
       className: "ams-dialog__header",
       children: [jsxRuntime.jsx(Heading, {
         level: 1,
-        size: "level-4",
+        size: "level-3",
         children: heading
       }), jsxRuntime.jsx(IconButton, {
         label: closeButtonLabel,
         onClick: closeDialog,
-        size: "heading-4",
+        size: "heading-3",
         type: "button"
       })]
     }), jsxRuntime.jsx("div", {
@@ -1029,36 +1060,36 @@ var Dialog = Object.assign(DialogRoot, {
   open: openDialog
 });
 
-var _excluded$14 = ["children", "className", "icon", "prefix"];
-function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$16 = ["children", "className", "icon", "prefix"];
+function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
  */
 var ErrorMessage = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? designSystemReactIcons.WarningIcon : _ref$icon,
     _ref$prefix = _ref.prefix,
     prefix = _ref$prefix === void 0 ? 'Invoerfout' : _ref$prefix,
-    restProps = _objectWithoutProperties(_ref, _excluded$14);
-  return jsxRuntime.jsxs("p", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
-    className: clsx('ams-error-message', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$16);
+  return jsxRuntime.jsxs("p", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
+    className: clsx.clsx('ams-error-message', className),
     ref: ref,
     children: [jsxRuntime.jsx(Icon, {
-      size: "small",
-      svg: icon ? icon : designSystemReactIcons.WarningIcon
-    }), jsxRuntime.jsxs("span", {
+      svg: icon
+    }), jsxRuntime.jsx("span", {
       className: "ams-visually-hidden",
-      children: [prefix, ': ']
+      children: "".concat(prefix, ": ")
     }), children]
   }));
 });
 ErrorMessage.displayName = 'ErrorMessage';
 
-var _excluded$13 = ["children", "className", "invalid"];
-function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$15 = ["children", "className", "invalid"];
+function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field--docs Field docs at Amsterdam Design System}
  */
@@ -1066,18 +1097,18 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
-    restProps = _objectWithoutProperties(_ref, _excluded$13);
-  return jsxRuntime.jsx("div", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
-    className: clsx('ams-field', invalid && 'ams-field--invalid', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$15);
+  return jsxRuntime.jsx("div", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
+    className: clsx.clsx('ams-field', invalid && 'ams-field--invalid', className),
     ref: ref,
     children: children
   }));
 });
 Field.displayName = 'Field';
 
-var _excluded$12 = ["className", "hint", "optional"];
-function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$14 = ["className", "hint", "optional"];
+function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getHintText = function getHintText(_ref) {
   var hint = _ref.hint,
     optional = _ref.optional;
@@ -1092,22 +1123,22 @@ var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     hint = _ref2.hint,
     optional = _ref2.optional,
-    restProps = _objectWithoutProperties(_ref2, _excluded$12);
+    restProps = _objectWithoutProperties(_ref2, _excluded$14);
   var hintText = getHintText({
     hint: hint,
     optional: optional
   });
-  return hintText && jsxRuntime.jsxs("span", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
-    className: clsx('ams-hint', className),
+  return hintText && jsxRuntime.jsxs("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
+    className: clsx.clsx('ams-hint', className),
     ref: ref,
     children: ["(", hintText, ")"]
   }));
 });
 Hint.displayName = 'Hint';
 
-var _excluded$11 = ["children", "className", "hint", "invalid", "legend", "optional"];
-function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$13 = ["children", "className", "hint", "invalid", "legend", "optional"];
+function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
@@ -1118,9 +1149,9 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     invalid = _ref.invalid,
     legend = _ref.legend,
     optional = _ref.optional,
-    restProps = _objectWithoutProperties(_ref, _excluded$11);
-  return jsxRuntime.jsxs("fieldset", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
-    className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$13);
+  return jsxRuntime.jsxs("fieldset", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
+    className: clsx.clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
     ref: ref,
     children: [jsxRuntime.jsxs("legend", {
       className: "ams-field-set__legend",
@@ -1133,31 +1164,31 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 FieldSet.displayName = 'FieldSet';
 
-var _excluded$10 = ["children", "className", "color"];
-function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$12 = ["children", "className", "color"];
+function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FigureCaption = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$10);
-  return jsxRuntime.jsx("figcaption", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
-    className: clsx('ams-figure__caption', color && "ams-figure__caption--".concat(color), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$12);
+  return jsxRuntime.jsx("figcaption", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
+    className: clsx.clsx('ams-figure__caption', color && "ams-figure__caption--".concat(color), className),
     ref: ref,
     children: children
   }));
 });
 FigureCaption.displayName = 'Figure.Caption';
 
-var _excluded$$ = ["children", "className"];
-function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$11 = ["children", "className"];
+function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FigureRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$$);
-  return jsxRuntime.jsx("figure", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
-    className: clsx('ams-figure', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$11);
+  return jsxRuntime.jsx("figure", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    className: clsx.clsx('ams-figure', className),
     ref: ref,
     children: children
   }));
@@ -1170,17 +1201,17 @@ var Figure = Object.assign(FigureRoot, {
   Caption: FigureCaption
 });
 
-var _excluded$_ = ["className"];
-function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$10 = ["className"];
+function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-input--docs File Input docs at Amsterdam Design System}
  */
 var FileInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$_);
-  return jsxRuntime.jsx("input", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
-    className: clsx('ams-file-input', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$10);
+  return jsxRuntime.jsx("input", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+    className: clsx.clsx('ams-file-input', className),
     ref: ref,
     type: "file"
   }));
@@ -1216,40 +1247,40 @@ var formatFileSize = function formatFileSize(fileSize) {
  */
 var formatFileType = function formatFileType(fileType) {
   switch (fileType) {
-    case 'image/gif':
-      return 'gif';
-    case 'image/jpeg':
-      return 'jpg';
-    case 'image/png':
-      return 'png';
-    case 'text/plain':
-      return 'txt';
-    case 'application/pdf':
-      return 'pdf';
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
       return 'Word';
+    case 'application/pdf':
+      return 'pdf';
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
       return 'Excel';
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
       return 'PowerPoint';
+    case 'image/gif':
+      return 'gif';
+    case 'image/jpeg':
+      return 'jpg';
+    case 'image/png':
+      return 'png';
+    case 'text/plain':
+      return 'txt';
     default:
       return 'Document';
   }
 };
 
-var _excluded$Z = ["className", "file", "onDelete"];
-function ownKeys$15(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$15(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$15(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$15(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$$ = ["className", "file", "onDelete"];
+function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     file = _ref.file,
     onDelete = _ref.onDelete,
-    restProps = _objectWithoutProperties(_ref, _excluded$Z);
-  return jsxRuntime.jsxs("li", _objectSpread$15(_objectSpread$15({}, restProps), {}, {
-    className: clsx('ams-file-list__item', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$$);
+  return jsxRuntime.jsxs("li", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    className: clsx.clsx('ams-file-list__item', className),
     ref: ref,
     children: [jsxRuntime.jsx("div", {
       className: "ams-file-list__item-preview",
@@ -1280,15 +1311,15 @@ var FileListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 FileListItem.displayName = 'FileList.Item';
 
-var _excluded$Y = ["children", "className"];
-function ownKeys$14(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$14(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$14(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$14(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$_ = ["children", "className"];
+function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$Y);
-  return jsxRuntime.jsx("ul", _objectSpread$14(_objectSpread$14({}, restProps), {}, {
-    className: clsx('ams-file-list', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$_);
+  return jsxRuntime.jsx("ul", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
+    className: clsx.clsx('ams-file-list', className),
     ref: ref,
     children: children
   }));
@@ -1301,9 +1332,9 @@ var FileList = Object.assign(FileListRoot, {
   Item: FileListItem
 });
 
-var _excluded$X = ["as", "children", "className", "span", "start"];
-function ownKeys$13(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$13(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$13(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$13(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$Z = ["as", "children", "className", "span", "start"];
+function ownKeys$15(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$15(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$15(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$15(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var GridCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -1311,18 +1342,18 @@ var GridCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     span = _ref.span,
     start = _ref.start,
-    restProps = _objectWithoutProperties(_ref, _excluded$X);
-  return jsxRuntime.jsx(Tag, _objectSpread$13(_objectSpread$13({}, restProps), {}, {
-    className: clsx('ams-grid__cell', gridCellClasses(span, start), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$Z);
+  return jsxRuntime.jsx(Tag, _objectSpread$15(_objectSpread$15({}, restProps), {}, {
+    className: clsx.clsx('ams-grid__cell', gridCellClasses(span, start), className),
     ref: ref,
     children: children
   }));
 });
 GridCell.displayName = 'Grid.Cell';
 
-var _excluded$W = ["as", "children", "className", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
-function ownKeys$12(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$12(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$12(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$12(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$Y = ["as", "children", "className", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
+function ownKeys$14(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$14(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$14(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$14(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var GridRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -1332,9 +1363,9 @@ var GridRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     paddingBottom = _ref.paddingBottom,
     paddingTop = _ref.paddingTop,
     paddingVertical = _ref.paddingVertical,
-    restProps = _objectWithoutProperties(_ref, _excluded$W);
-  return jsxRuntime.jsx(Tag, _objectSpread$12(_objectSpread$12({}, restProps), {}, {
-    className: clsx('ams-grid', gapVertical && "ams-grid--gap-vertical--".concat(gapVertical), paddingClasses('grid', paddingBottom, paddingTop, paddingVertical), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$Y);
+  return jsxRuntime.jsx(Tag, _objectSpread$14(_objectSpread$14({}, restProps), {}, {
+    className: clsx.clsx('ams-grid', gapVertical && "ams-grid--gap-vertical--".concat(gapVertical), paddingClasses('grid', paddingBottom, paddingTop, paddingVertical), className),
     ref: ref,
     children: children
   }));
@@ -1361,14 +1392,14 @@ var defaultValues$1 = {
 };
 var ImageSliderContext = /*#__PURE__*/react.createContext(defaultValues$1);
 
-var _excluded$V = ["className", "nextLabel", "previousLabel"];
-function ownKeys$11(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$11(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$11(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$11(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$X = ["className", "nextLabel", "previousLabel"];
+function ownKeys$13(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$13(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$13(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$13(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageSliderControls = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     nextLabel = _ref.nextLabel,
     previousLabel = _ref.previousLabel,
-    restProps = _objectWithoutProperties(_ref, _excluded$V);
+    restProps = _objectWithoutProperties(_ref, _excluded$X);
   var _useContext = react.useContext(ImageSliderContext),
     goToNextSlide = _useContext.goToNextSlide,
     goToPreviousSlide = _useContext.goToPreviousSlide,
@@ -1380,8 +1411,8 @@ var ImageSliderControls = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var handleClickNext = react.useCallback(function () {
     return goToNextSlide();
   }, [goToNextSlide]);
-  return jsxRuntime.jsxs("div", _objectSpread$11(_objectSpread$11({}, restProps), {}, {
-    className: clsx('ams-image-slider__controls', className),
+  return jsxRuntime.jsxs("div", _objectSpread$13(_objectSpread$13({}, restProps), {}, {
+    className: clsx.clsx('ams-image-slider__controls', className),
     ref: ref,
     children: [jsxRuntime.jsx(Button, {
       className: "ams-image-slider__control ams-image-slider__control--previous",
@@ -1404,23 +1435,23 @@ var ImageSliderControls = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 ImageSliderControls.displayName = 'ImageSliderControls';
 
-var _excluded$U = ["children", "className", "slideId"];
-function ownKeys$10(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$10(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$10(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$10(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$W = ["children", "className", "slideId"];
+function ownKeys$12(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$12(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$12(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$12(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageSliderItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     slideId = _ref.slideId,
-    restProps = _objectWithoutProperties(_ref, _excluded$U);
+    restProps = _objectWithoutProperties(_ref, _excluded$W);
   var _useContext = react.useContext(ImageSliderContext),
     currentSlideId = _useContext.currentSlideId;
   var isInView = react.useMemo(function () {
     return currentSlideId === slideId;
   }, [currentSlideId, slideId]);
   var itemClassName = react.useMemo(function () {
-    return clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className);
+    return clsx.clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className);
   }, [isInView, className]);
-  return jsxRuntime.jsx("div", _objectSpread$10(_objectSpread$10(_objectSpread$10({}, restProps), {}, {
+  return jsxRuntime.jsx("div", _objectSpread$12(_objectSpread$12(_objectSpread$12({}, restProps), {}, {
     className: itemClassName,
     ref: ref
   }, !isInView && {
@@ -1431,29 +1462,29 @@ var ImageSliderItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 ImageSliderItem.displayName = 'ImageSlider.Item';
 
-var _excluded$T = ["children", "className"];
-function ownKeys$$(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$$(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$$(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$$(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$V = ["children", "className"];
+function ownKeys$11(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$11(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$11(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$11(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageSliderScroller = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$T);
-  return jsxRuntime.jsx("div", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
-    className: clsx('ams-image-slider__scroller', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$V);
+  return jsxRuntime.jsx("div", _objectSpread$11(_objectSpread$11({}, restProps), {}, {
+    className: clsx.clsx('ams-image-slider__scroller', className),
     ref: ref,
     children: children
   }));
 });
 ImageSliderScroller.displayName = 'ImageSlider.Scroller';
 
-var _excluded$S = ["className", "imageLabel", "thumbnails"];
-function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$U = ["className", "imageLabel", "thumbnails"];
+function ownKeys$10(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$10(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$10(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$10(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageSliderThumbnails = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     imageLabel = _ref.imageLabel,
     thumbnails = _ref.thumbnails,
-    restProps = _objectWithoutProperties(_ref, _excluded$S);
+    restProps = _objectWithoutProperties(_ref, _excluded$U);
   var _useContext = react.useContext(ImageSliderContext),
     currentSlideId = _useContext.currentSlideId,
     goToNextSlide = _useContext.goToNextSlide,
@@ -1486,7 +1517,7 @@ var ImageSliderThumbnails = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         "aria-posinset": index + 1,
         "aria-selected": currentSlideId === index ? 'true' : 'false',
         "aria-setsize": thumbnails.length,
-        className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)),
+        className: clsx.clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)),
         onClick: function onClick() {
           return goToSlideId(index);
         },
@@ -1499,8 +1530,8 @@ var ImageSliderThumbnails = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       }, index);
     });
   }, [currentSlideId, goToSlideId, imageLabel, thumbnails]);
-  return jsxRuntime.jsx("nav", _objectSpread$_(_objectSpread$_({}, restProps), {}, {
-    className: clsx('ams-image-slider__thumbnails', className),
+  return jsxRuntime.jsx("nav", _objectSpread$10(_objectSpread$10({}, restProps), {}, {
+    className: clsx.clsx('ams-image-slider__thumbnails', className),
     onKeyDown: handleKeyDown,
     ref: ref,
     role: "tablist",
@@ -1509,9 +1540,9 @@ var ImageSliderThumbnails = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 ImageSliderThumbnails.displayName = 'ImageSlider.Thumbnails';
 
-var _excluded$R = ["className", "controls", "imageLabel", "images", "nextLabel", "previousLabel"];
-function ownKeys$Z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$Z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$T = ["className", "controls", "imageLabel", "images", "nextLabel", "previousLabel"];
+function ownKeys$$(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$$(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$$(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$$(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageSliderRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     controls = _ref.controls,
@@ -1522,7 +1553,7 @@ var ImageSliderRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     nextLabel = _ref$nextLabel === void 0 ? 'Volgende' : _ref$nextLabel,
     _ref$previousLabel = _ref.previousLabel,
     previousLabel = _ref$previousLabel === void 0 ? 'Vorige' : _ref$previousLabel,
-    restProps = _objectWithoutProperties(_ref, _excluded$R);
+    restProps = _objectWithoutProperties(_ref, _excluded$T);
   var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentSlideId = _useState2[0],
@@ -1631,9 +1662,9 @@ var ImageSliderRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       isAtEnd: isAtEnd,
       isAtStart: isAtStart
     },
-    children: jsxRuntime.jsxs("div", _objectSpread$Z(_objectSpread$Z({}, restProps), {}, {
+    children: jsxRuntime.jsxs("div", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
       "aria-roledescription": "carousel",
-      className: clsx('ams-image-slider', controls && 'ams-image-slider--controls', className),
+      className: clsx.clsx('ams-image-slider', controls && 'ams-image-slider--controls', className),
       ref: ref,
       tabIndex: -1,
       children: [controls && jsxRuntime.jsx(ImageSliderControls, {
@@ -1676,41 +1707,42 @@ var ImageSlider = Object.assign(ImageSliderRoot, {
   Item: ImageSliderItem
 });
 
-var _excluded$Q = ["children", "className", "color", "icon", "size"];
-function ownKeys$Y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$S = ["children", "className", "color", "icon", "size"];
+function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** One link with a Link List. */
 var LinkListLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? designSystemReactIcons.ChevronForwardIcon : _ref$icon,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$Q);
+    restProps = _objectWithoutProperties(_ref, _excluded$S);
   return jsxRuntime.jsx("li", {
-    children: jsxRuntime.jsxs("a", _objectSpread$Y(_objectSpread$Y({
-      className: clsx('ams-link-list__link', color && "ams-link-list__link--".concat(color), size && "ams-link-list__link--".concat(size), className),
+    children: jsxRuntime.jsxs("a", _objectSpread$_(_objectSpread$_({
+      className: clsx.clsx('ams-link-list__link', color && "ams-link-list__link--".concat(color), size && "ams-link-list__link--".concat(size), className),
       ref: ref
     }, restProps), {}, {
       children: [jsxRuntime.jsx(Icon, {
         size: size,
-        svg: icon !== null && icon !== void 0 ? icon : designSystemReactIcons.ChevronForwardIcon
+        svg: icon
       }), children]
     }))
   });
 });
 LinkListLink.displayName = 'LinkList.Link';
 
-var _excluded$P = ["children", "className"];
-function ownKeys$X(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$X(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$X(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$R = ["children", "className"];
+function ownKeys$Z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$Z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** A collection of related links. */
 var LinkListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$P);
-  return jsxRuntime.jsx("ul", _objectSpread$X(_objectSpread$X({
-    className: clsx('ams-link-list', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$R);
+  return jsxRuntime.jsx("ul", _objectSpread$Z(_objectSpread$Z({
+    className: clsx.clsx('ams-link-list', className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -1724,9 +1756,9 @@ var LinkList = Object.assign(LinkListRoot, {
   Link: LinkListLink
 });
 
-var _excluded$O = ["className", "errors", "focusOnRender", "hasFocusedOnce", "heading", "headingLevel", "setHasFocusedOnce"];
-function ownKeys$W(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$Q = ["className", "errors", "focusOnRender", "hasFocusedOnce", "heading", "headingLevel", "setHasFocusedOnce"];
+function ownKeys$Y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InvalidFormAlertWithErrors = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     errors = _ref.errors,
@@ -1737,7 +1769,7 @@ var InvalidFormAlertWithErrors = /*#__PURE__*/react.forwardRef(function (_ref, r
     heading = _ref$heading === void 0 ? 'Verbeter de fouten voor u verder gaat' : _ref$heading,
     headingLevel = _ref.headingLevel,
     setHasFocusedOnce = _ref.setHasFocusedOnce,
-    restProps = _objectWithoutProperties(_ref, _excluded$O);
+    restProps = _objectWithoutProperties(_ref, _excluded$Q);
   var innerRef = react.useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
   react.useImperativeHandle(ref, function () {
@@ -1749,9 +1781,12 @@ var InvalidFormAlertWithErrors = /*#__PURE__*/react.forwardRef(function (_ref, r
       setHasFocusedOnce(true);
     }
   }, [innerRef]);
-  return jsxRuntime.jsx(Alert, _objectSpread$W(_objectSpread$W({}, restProps), {}, {
-    className: clsx('ams-invalid-form-alert', className),
+  return jsxRuntime.jsx(Alert, _objectSpread$Y(_objectSpread$Y({}, restProps), {}, {
+    className: clsx.clsx('ams-invalid-form-alert', className),
     heading: heading,
+    // Remove the default label for the Alert.
+    // Otherwise, focusing on the Alert causes NVDA to read the label twice.
+    headingId: null,
     headingLevel: headingLevel,
     ref: innerRef,
     severity: "error",
@@ -1794,16 +1829,16 @@ errors) {
   return null;
 };
 
-var _excluded$N = ["errorCountLabel", "errors"];
-function ownKeys$V(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$V(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$V(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$V(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$P = ["errorCountLabel", "errors"];
+function ownKeys$X(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$X(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$X(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
  */
 var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var errorCountLabel = _ref.errorCountLabel,
     errors = _ref.errors,
-    restProps = _objectWithoutProperties(_ref, _excluded$N);
+    restProps = _objectWithoutProperties(_ref, _excluded$P);
   // An Invalid Form Alert without errors only resets the document title.
   // With errors, it renders the InvalidFormAlertWithErrors component.
   useAddErrorCountToDocumentTitle(errors, errorCountLabel);
@@ -1814,7 +1849,7 @@ var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     hasFocusedOnce = _useState2[0],
     setHasFocusedOnce = _useState2[1];
   if (errors.length === 0) return undefined;
-  return jsxRuntime.jsx(InvalidFormAlertWithErrors, _objectSpread$V(_objectSpread$V({}, restProps), {}, {
+  return jsxRuntime.jsx(InvalidFormAlertWithErrors, _objectSpread$X(_objectSpread$X({}, restProps), {}, {
     errors: errors,
     hasFocusedOnce: hasFocusedOnce,
     ref: ref,
@@ -1823,9 +1858,9 @@ var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 InvalidFormAlert.displayName = 'InvalidFormAlert';
 
-var _excluded$M = ["children", "className", "hint", "optional"];
-function ownKeys$U(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$O = ["children", "className", "hint", "optional"];
+function ownKeys$W(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
@@ -1834,9 +1869,9 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     hint = _ref.hint,
     optional = _ref.optional,
-    restProps = _objectWithoutProperties(_ref, _excluded$M);
-  return jsxRuntime.jsxs("label", _objectSpread$U(_objectSpread$U({}, restProps), {}, {
-    className: clsx('ams-label', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$O);
+  return jsxRuntime.jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
+    className: clsx.clsx('ams-label', className),
     ref: ref,
     children: [children, " ", jsxRuntime.jsx(Hint, {
       hint: hint,
@@ -1846,9 +1881,9 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Label.displayName = 'Label';
 
-var _excluded$L = ["children", "className", "color"];
-function ownKeys$T(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$T(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$T(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$T(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$N = ["children", "className", "color"];
+function ownKeys$V(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$V(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$V(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$V(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs Link docs at Amsterdam Design System}
  */
@@ -1856,21 +1891,23 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$L);
-  return jsxRuntime.jsx("a", _objectSpread$T(_objectSpread$T({}, restProps), {}, {
-    className: clsx('ams-link', color && "ams-link--".concat(color), className),
+    restProps = _objectWithoutProperties(_ref, _excluded$N);
+  return jsxRuntime.jsx("a", _objectSpread$V(_objectSpread$V({}, restProps), {}, {
+    className: clsx.clsx('ams-link', color && "ams-link--".concat(color), className),
     ref: ref,
     children: children
   }));
 });
 Link.displayName = 'Link';
 
-function ownKeys$S(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$S(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$S(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$S(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$U(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$S(_objectSpread$S({
+  return jsxRuntime.jsxs("svg", _objectSpread$U(_objectSpread$U({
     className: "ams-logo",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 115 40",
@@ -1889,12 +1926,14 @@ var LogoAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoAmsterdam.displayName = 'LogoAmsterdam';
 
-function ownKeys$R(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$R(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$R(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$R(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$T(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$T(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$T(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$T(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoGgdAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$R(_objectSpread$R({
+  return jsxRuntime.jsxs("svg", _objectSpread$T(_objectSpread$T({
     className: "ams-logo",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 115 40",
@@ -1917,13 +1956,15 @@ var LogoGgdAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoGgdAmsterdam.displayName = 'LogoGgdAmsterdam';
 
-function ownKeys$Q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$Q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Q(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$S(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$S(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$S(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$S(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoMuseumWeesp = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$Q(_objectSpread$Q({
+  return jsxRuntime.jsxs("svg", _objectSpread$S(_objectSpread$S({
     className: "ams-logo",
     fill: "none",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 121 42",
@@ -1954,12 +1995,14 @@ var LogoMuseumWeesp = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoMuseumWeesp.displayName = 'LogoMuseumWeesp';
 
-function ownKeys$P(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$P(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$P(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$P(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$R(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$R(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$R(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$R(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoStadsarchief = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$P(_objectSpread$P({
+  return jsxRuntime.jsxs("svg", _objectSpread$R(_objectSpread$R({
     className: "ams-logo",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 98 40",
@@ -1982,12 +2025,14 @@ var LogoStadsarchief = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoStadsarchief.displayName = 'LogoStadsarchief';
 
-function ownKeys$O(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$O(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$O(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$O(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$Q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$Q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Q(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoStadsbankVanLening = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$O(_objectSpread$O({
+  return jsxRuntime.jsxs("svg", _objectSpread$Q(_objectSpread$Q({
     className: "ams-logo",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 159 42",
@@ -2010,12 +2055,14 @@ var LogoStadsbankVanLening = /*#__PURE__*/react.forwardRef(function (props, ref)
 });
 LogoStadsbankVanLening.displayName = 'LogoStadsbankVanLening';
 
-function ownKeys$N(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$N(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$N(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$N(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$P(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$P(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$P(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$P(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoVgaVerzekeringen = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$N(_objectSpread$N({
+  return jsxRuntime.jsxs("svg", _objectSpread$P(_objectSpread$P({
     className: "ams-logo",
     focusable: "false",
+    height: "2.5rem" // Height for when CSS does not load, gets overridden when it does
+    ,
     ref: ref,
     role: "img",
     viewBox: "0 0 145 43",
@@ -2038,9 +2085,9 @@ var LogoVgaVerzekeringen = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoVgaVerzekeringen.displayName = 'LogoVgaVerzekeringen';
 
-var _excluded$K = ["aria-label", "brand", "className"];
-function ownKeys$M(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$M(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$M(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$M(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$M = ["aria-label", "brand", "className"];
+function ownKeys$O(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$O(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$O(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$O(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var logoConfig = {
   amsterdam: {
     label: 'Gemeente Amsterdam logo',
@@ -2075,35 +2122,88 @@ var Logo = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$brand = _ref.brand,
     brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$K);
+    restProps = _objectWithoutProperties(_ref, _excluded$M);
   var LogoComponent = logoConfig[brand].logo;
   var logoLabel = logoConfig[brand].label;
-  return jsxRuntime.jsx(LogoComponent, _objectSpread$M(_objectSpread$M({}, restProps), {}, {
+  return jsxRuntime.jsx(LogoComponent, _objectSpread$O(_objectSpread$O({}, restProps), {}, {
     "aria-label": ariaLabel || logoLabel,
-    className: clsx('ams-logo', className),
+    className: clsx.clsx('ams-logo', className),
     ref: ref
   }));
 });
 Logo.displayName = 'Logo';
 
-var _excluded$J = ["children", "className"];
-function ownKeys$L(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$L(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$L = ["children", "className"];
+function ownKeys$N(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$N(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$N(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$N(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-mark--docs Mark docs at Amsterdam Design System}
  */
 var Mark = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$J);
-  return jsxRuntime.jsx("mark", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
-    className: clsx('ams-mark', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$L);
+  return jsxRuntime.jsx("mark", _objectSpread$N(_objectSpread$N({}, restProps), {}, {
+    className: clsx.clsx('ams-mark', className),
     ref: ref,
     children: children
   }));
 });
 Mark.displayName = 'Mark';
 
+var _excluded$K = ["children", "className", "color", "icon"];
+function ownKeys$M(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$M(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$M(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$M(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    color = _ref.color,
+    icon = _ref.icon,
+    restProps = _objectWithoutProperties(_ref, _excluded$K);
+  return jsxRuntime.jsx("li", {
+    children: jsxRuntime.jsxs("a", _objectSpread$M(_objectSpread$M({}, restProps), {}, {
+      className: clsx.clsx('ams-menu__link', color && "ams-menu__link--".concat(color), className),
+      ref: ref,
+      children: [jsxRuntime.jsx(Icon, {
+        className: "ams-menu__icon",
+        svg: icon
+      }), children]
+    }))
+  });
+});
+MenuLink.displayName = 'Menu.Link';
+
+var _excluded$J = ["accessibleName", "children", "className"];
+function ownKeys$L(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$L(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var _ref$accessibleName = _ref.accessibleName,
+    accessibleName = _ref$accessibleName === void 0 ? 'Hoofdnavigatie' : _ref$accessibleName,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$J);
+  return jsxRuntime.jsxs("nav", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
+    "aria-labelledby": "primary-navigation",
+    className: clsx.clsx('ams-menu', className),
+    ref: ref,
+    children: [jsxRuntime.jsx("h2", {
+      className: "ams-visually-hidden",
+      id: "primary-navigation",
+      children: accessibleName
+    }), jsxRuntime.jsx("ul", {
+      className: "ams-menu__list",
+      children: children
+    })]
+  }));
+});
+MenuRoot.displayName = 'Menu';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
+ */
+var Menu = Object.assign(MenuRoot, {
+  Link: MenuLink
+});
+
 var _excluded$I = ["children", "className"];
 function ownKeys$K(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$K(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$K(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$K(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2112,7 +2212,7 @@ var OrderedListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$I);
   return jsxRuntime.jsx("li", _objectSpread$K(_objectSpread$K({
-    className: clsx('ams-ordered-list__item', className),
+    className: clsx.clsx('ams-ordered-list__item', className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -2132,7 +2232,7 @@ var OrderedListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     size = _ref.size,
     restProps = _objectWithoutProperties(_ref, _excluded$H);
   return jsxRuntime.jsx("ol", _objectSpread$J(_objectSpread$J({
-    className: clsx('ams-ordered-list', color && "ams-ordered-list--".concat(color), !markers && 'ams-ordered-list--no-markers', size && "ams-ordered-list--".concat(size), className),
+    className: clsx.clsx('ams-ordered-list', color && "ams-ordered-list--".concat(color), !markers && 'ams-ordered-list--no-markers', size && "ams-ordered-list--".concat(size), className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -2157,7 +2257,7 @@ var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$G);
   return jsxRuntime.jsx("div", _objectSpread$I(_objectSpread$I({}, restProps), {}, {
-    className: clsx('ams-overlap', className),
+    className: clsx.clsx('ams-overlap', className),
     ref: ref,
     children: children
   }));
@@ -2175,7 +2275,7 @@ var Page = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$F);
   return jsxRuntime.jsx("div", _objectSpread$H(_objectSpread$H({}, restProps), {}, {
-    className: clsx('ams-page', className),
+    className: clsx.clsx('ams-page', className),
     ref: ref,
     children: children
   }));
@@ -2190,7 +2290,7 @@ var PageFooterMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$E);
   return jsxRuntime.jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
-    className: clsx('ams-page-footer__menu', className),
+    className: clsx.clsx('ams-page-footer__menu', className),
     ref: ref,
     children: children
   }));
@@ -2207,7 +2307,7 @@ var PageFooterMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   return jsxRuntime.jsx("li", {
     className: "ams-page-footer__menu-item",
     children: jsxRuntime.jsx("a", _objectSpread$F(_objectSpread$F({}, restProps), {}, {
-      className: clsx('ams-page-footer__menu-link', className),
+      className: clsx.clsx('ams-page-footer__menu-link', className),
       ref: ref,
       children: children
     }))
@@ -2223,7 +2323,7 @@ var PageFooterSpotlight = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$C);
   return jsxRuntime.jsx("div", _objectSpread$E(_objectSpread$E({}, restProps), {}, {
-    className: clsx('ams-page-footer__spotlight', className),
+    className: clsx.clsx('ams-page-footer__spotlight', className),
     ref: ref,
     children: children
   }));
@@ -2238,7 +2338,7 @@ var PageFooterRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$B);
   return jsxRuntime.jsx("footer", _objectSpread$D(_objectSpread$D({}, restProps), {}, {
-    className: clsx('ams-page-footer', className),
+    className: clsx.clsx('ams-page-footer', className),
     ref: ref,
     children: children
   }));
@@ -2253,6 +2353,36 @@ var PageFooter = Object.assign(PageFooterRoot, {
   Spotlight: PageFooterSpotlight
 });
 
+// TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
+var breakpoints = {
+  medium: '36rem',
+  wide: '68rem'
+};
+var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  react.useLayoutEffect(function () {
+    // Check for window object to avoid SSR issues
+    if (typeof window !== 'undefined') {
+      var media = window.matchMedia("(min-width: ".concat(breakpoints[breakpoint], ")"));
+      if (media.matches !== matches) {
+        setMatches(media.matches);
+      }
+      var listener = function listener() {
+        return setMatches(media.matches);
+      };
+      window.addEventListener('resize', listener);
+      return function () {
+        return window.removeEventListener('resize', listener);
+      };
+    }
+    return undefined;
+  }, [matches, breakpoint]);
+  return matches;
+};
+
 var _excluded$A = ["children", "className"];
 function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2261,7 +2391,7 @@ var PageHeaderGridCellNarrowWindowOnly = /*#__PURE__*/react.forwardRef(function
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$A);
   return jsxRuntime.jsx(Grid.Cell, _objectSpread$C(_objectSpread$C({}, restProps), {}, {
-    className: clsx('ams-page-header__grid-cell-narrow-window-only', className),
+    className: clsx.clsx('ams-page-header__grid-cell-narrow-window-only', className),
     ref: ref,
     children: children
   }));
@@ -2308,9 +2438,9 @@ var PageHeaderMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     fixed = _ref.fixed,
     restProps = _objectWithoutProperties(_ref, _excluded$z);
   return jsxRuntime.jsx("li", {
-    className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'),
+    className: clsx.clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'),
     children: jsxRuntime.jsx("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
-      className: clsx('ams-page-header__menu-link', className),
+      className: clsx.clsx('ams-page-header__menu-link', className),
       ref: ref,
       children: children
     }))
@@ -2318,36 +2448,6 @@ var PageHeaderMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';
 
-// TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
-var breakpoints = {
-  medium: '36rem',
-  wide: '68rem'
-};
-var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    matches = _useState2[0],
-    setMatches = _useState2[1];
-  react.useLayoutEffect(function () {
-    // Check for window object to avoid SSR issues
-    if (typeof window !== 'undefined') {
-      var media = window.matchMedia("(min-width: ".concat(breakpoints[breakpoint], ")"));
-      if (media.matches !== matches) {
-        setMatches(media.matches);
-      }
-      var listener = function listener() {
-        return setMatches(media.matches);
-      };
-      window.addEventListener('resize', listener);
-      return function () {
-        return window.removeEventListener('resize', listener);
-      };
-    }
-    return undefined;
-  }, [matches, breakpoint]);
-  return matches;
-};
-
 var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -2357,7 +2457,7 @@ var LogoLinkContent = function LogoLinkContent(_ref) {
     logoBrand = _ref.logoBrand;
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("span", {
-      className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'),
+      className: clsx.clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-page-header__logo-container'),
       children: jsxRuntime.jsx(Logo, {
         "aria-label": logoAccessibleName,
         brand: logoBrand
@@ -2405,7 +2505,7 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     }
   }, [isWideWindow]);
   return jsxRuntime.jsxs("header", _objectSpread$z(_objectSpread$z({}, restProps), {}, {
-    className: clsx('ams-page-header', className),
+    className: clsx.clsx('ams-page-header', className),
     ref: ref,
     children: [jsxRuntime.jsxs(Link, {
       className: "ams-page-header__logo-link",
@@ -2416,17 +2516,20 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
         logoBrand: logoBrand
       }), jsxRuntime.jsx("span", {
         className: "ams-visually-hidden",
-        children: logoLinkTitle
+        children: " ".concat(logoLinkTitle)
       })]
     }), (hasMegaMenu || menuItems) && jsxRuntime.jsxs("nav", {
       "aria-labelledby": "primary-navigation",
       className: "ams-page-header__navigation",
       children: [jsxRuntime.jsx("h2", {
+        "aria-hidden": true,
         className: "ams-visually-hidden",
         id: "primary-navigation",
         children: navigationLabel
       }), jsxRuntime.jsx("div", {
+        "aria-hidden": true,
         className: "ams-page-header__logo-link ams-page-header__logo-link--hidden",
+        hidden: true,
         children: jsxRuntime.jsx(LogoLinkContent, {
           brandName: brandName,
           logoBrand: logoBrand
@@ -2434,7 +2537,7 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
       }), jsxRuntime.jsxs("ul", {
         className: "ams-page-header__menu",
         children: [menuItems, hasMegaMenu && jsxRuntime.jsx("li", {
-          className: clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
+          className: clsx.clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
           children: jsxRuntime.jsxs("button", {
             "aria-controls": "ams-page-header-mega-menu",
             "aria-expanded": open,
@@ -2452,13 +2555,13 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
               children: menuButtonText
             }), jsxRuntime.jsx(Icon, {
               svg: jsxRuntime.jsx(PageHeaderMenuIcon, {
-                className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open')
+                className: clsx.clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open')
               })
             })]
           })
         })]
       }), hasMegaMenu && jsxRuntime.jsx("div", {
-        className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'),
+        className: clsx.clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'),
         id: "ams-page-header-mega-menu",
         children: children
       })]
@@ -2478,6 +2581,7 @@ var _excluded$x = ["children", "className", "color"];
 function ownKeys$y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
+ * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
 var PageHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
@@ -2486,47 +2590,13 @@ var PageHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     color = _ref.color,
     restProps = _objectWithoutProperties(_ref, _excluded$x);
   return jsxRuntime.jsx("h1", _objectSpread$y(_objectSpread$y({}, restProps), {}, {
-    className: clsx('ams-page-heading', color && "ams-page-heading--".concat(color), className),
+    className: clsx.clsx('ams-page-heading', color && "ams-page-heading--".concat(color), className),
     ref: ref,
     children: children
   }));
 });
 PageHeading.displayName = 'PageHeading';
 
-var LinkItem = function LinkItem(_ref) {
-  var currentPage = _ref.currentPage,
-    linkComponent = _ref.linkComponent,
-    linkTemplate = _ref.linkTemplate,
-    pageNumber = _ref.pageNumber;
-  if (!linkComponent) return null;
-  var Link = linkComponent;
-  return jsxRuntime.jsx("li", {
-    children: jsxRuntime.jsxs(Link, {
-      "aria-current": pageNumber === currentPage ? 'page' : undefined,
-      className: "ams-pagination__link",
-      href: linkTemplate(pageNumber),
-      children: [jsxRuntime.jsx("span", {
-        className: "ams-visually-hidden",
-        children: pageNumber === currentPage ? "Pagina ".concat(pageNumber) : "Ga naar pagina ".concat(pageNumber)
-      }), jsxRuntime.jsx("span", {
-        "aria-hidden": true,
-        children: pageNumber
-      })]
-    })
-  });
-};
-
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-var Spacer = function Spacer() {
-  return jsxRuntime.jsx("li", {
-    "aria-hidden": true,
-    children: "\u2026"
-  });
-};
-
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
@@ -2565,11 +2635,11 @@ function getRange(currentPage, totalPages, maxVisiblePages) {
     if (index === 0 && pageNr !== 1) {
       return [1, 'firstSpacer'];
     }
-    if (totalPages > visiblePages && index === visiblePages - 2 && currentPage < totalPages - 2) {
+    if (totalPages > visiblePages && index === visiblePages - 2 && currentPage < totalPages - Math.floor(visiblePages / 2)) {
       return [].concat(_toConsumableArray(acc), ['lastSpacer', totalPages]);
     }
     // Skip a number when spacer is already added
-    if (acc.includes('firstSpacer') && index === 1 || acc.includes('lastSpacer') && index === visiblePages - 1) {
+    if (acc[index] === 'firstSpacer' || acc[index - 1] === 'lastSpacer') {
       return acc;
     }
     return [].concat(_toConsumableArray(acc), [pageNr]);
@@ -2577,14 +2647,50 @@ function getRange(currentPage, totalPages, maxVisiblePages) {
   return pages;
 }
 
-var _excluded$w = ["className", "linkComponent", "linkTemplate", "maxVisiblePages", "nextLabel", "nextVisuallyHiddenLabel", "page", "previousLabel", "previousVisuallyHiddenLabel", "totalPages", "visuallyHiddenLabel", "visuallyHiddenLabelId"];
+var LinkItem = function LinkItem(_ref) {
+  var currentPage = _ref.currentPage,
+    linkComponent = _ref.linkComponent,
+    linkTemplate = _ref.linkTemplate,
+    pageNumber = _ref.pageNumber;
+  if (!linkComponent) return null;
+  var Link = linkComponent;
+  return jsxRuntime.jsx("li", {
+    children: jsxRuntime.jsxs(Link, {
+      "aria-current": pageNumber === currentPage ? 'page' : undefined,
+      className: "ams-pagination__link",
+      href: linkTemplate(pageNumber),
+      children: [jsxRuntime.jsx("span", {
+        className: "ams-visually-hidden",
+        children: pageNumber === currentPage ? "Pagina ".concat(pageNumber) : "Ga naar pagina ".concat(pageNumber)
+      }), jsxRuntime.jsx("span", {
+        "aria-hidden": true,
+        children: pageNumber
+      })]
+    })
+  });
+};
+
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+var Spacer = function Spacer() {
+  return jsxRuntime.jsx("li", {
+    "aria-hidden": true,
+    children: "\u2026"
+  });
+};
+
+var _excluded$w = ["accessibleName", "accessibleNameId", "className", "linkComponent", "linkTemplate", "maxVisiblePages", "nextAccessibleName", "nextLabel", "nextVisuallyHiddenLabel", "page", "previousAccessibleName", "previousLabel", "previousVisuallyHiddenLabel", "totalPages", "visuallyHiddenLabel", "visuallyHiddenLabelId"];
 function ownKeys$x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
  */
 var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
+  var accessibleName = _ref.accessibleName,
+    accessibleNameId = _ref.accessibleNameId,
+    className = _ref.className,
     _ref$linkComponent = _ref.linkComponent,
     linkComponent = _ref$linkComponent === void 0 ? function (props) {
       return jsxRuntime.jsx("a", _objectSpread$x({}, props));
@@ -2592,21 +2698,19 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     linkTemplate = _ref.linkTemplate,
     _ref$maxVisiblePages = _ref.maxVisiblePages,
     maxVisiblePages = _ref$maxVisiblePages === void 0 ? 7 : _ref$maxVisiblePages,
+    nextAccessibleName = _ref.nextAccessibleName,
     _ref$nextLabel = _ref.nextLabel,
     nextLabel = _ref$nextLabel === void 0 ? 'volgende' : _ref$nextLabel,
-    _ref$nextVisuallyHidd = _ref.nextVisuallyHiddenLabel,
-    nextVisuallyHiddenLabel = _ref$nextVisuallyHidd === void 0 ? 'Volgende pagina' : _ref$nextVisuallyHidd,
+    nextVisuallyHiddenLabel = _ref.nextVisuallyHiddenLabel,
     _ref$page = _ref.page,
     page = _ref$page === void 0 ? 1 : _ref$page,
+    previousAccessibleName = _ref.previousAccessibleName,
     _ref$previousLabel = _ref.previousLabel,
     previousLabel = _ref$previousLabel === void 0 ? 'vorige' : _ref$previousLabel,
-    _ref$previousVisually = _ref.previousVisuallyHiddenLabel,
-    previousVisuallyHiddenLabel = _ref$previousVisually === void 0 ? 'Vorige pagina' : _ref$previousVisually,
+    previousVisuallyHiddenLabel = _ref.previousVisuallyHiddenLabel,
     totalPages = _ref.totalPages,
-    _ref$visuallyHiddenLa = _ref.visuallyHiddenLabel,
-    visuallyHiddenLabel = _ref$visuallyHiddenLa === void 0 ? 'Paginering' : _ref$visuallyHiddenLa,
-    _ref$visuallyHiddenLa2 = _ref.visuallyHiddenLabelId,
-    visuallyHiddenLabelId = _ref$visuallyHiddenLa2 === void 0 ? 'ams-pagination-a11y-label' : _ref$visuallyHiddenLa2,
+    visuallyHiddenLabel = _ref.visuallyHiddenLabel,
+    visuallyHiddenLabelId = _ref.visuallyHiddenLabelId,
     restProps = _objectWithoutProperties(_ref, _excluded$w);
   // Don't show pagination if you only have one page
   if (totalPages <= 1) {
@@ -2616,13 +2720,13 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   // Get array of page numbers and / or spacers
   var range = getRange(page, totalPages, maxVisiblePages);
   return jsxRuntime.jsxs("nav", _objectSpread$x(_objectSpread$x({}, restProps), {}, {
-    "aria-labelledby": visuallyHiddenLabelId,
-    className: clsx('ams-pagination', className),
+    "aria-labelledby": accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label',
+    className: clsx.clsx('ams-pagination', className),
     ref: ref,
     children: [jsxRuntime.jsx("span", {
       className: "ams-visually-hidden",
-      id: visuallyHiddenLabelId,
-      children: visuallyHiddenLabel
+      id: accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label',
+      children: accessibleName || visuallyHiddenLabel || 'Paginering'
     }), page !== 1 && jsxRuntime.jsxs(Link, {
       className: "ams-pagination__link",
       href: linkTemplate(page - 1),
@@ -2631,7 +2735,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
         svg: designSystemReactIcons.ChevronBackwardIcon
       }), jsxRuntime.jsx("span", {
         className: "ams-visually-hidden",
-        children: previousVisuallyHiddenLabel
+        children: previousAccessibleName || previousVisuallyHiddenLabel || 'Vorige pagina'
       }), jsxRuntime.jsx("span", {
         "aria-hidden": true,
         children: previousLabel
@@ -2652,7 +2756,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       rel: "next",
       children: [jsxRuntime.jsx("span", {
         className: "ams-visually-hidden",
-        children: nextVisuallyHiddenLabel
+        children: nextAccessibleName || nextVisuallyHiddenLabel || 'Volgende pagina'
       }), jsxRuntime.jsx("span", {
         "aria-hidden": true,
         children: nextLabel
@@ -2678,7 +2782,7 @@ var PasswordInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   return jsxRuntime.jsx("input", _objectSpread$w(_objectSpread$w({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
     autoCorrect: "off",
-    className: clsx('ams-password-input', className),
+    className: clsx.clsx('ams-password-input', className),
     dir: dir !== null && dir !== void 0 ? dir : 'auto',
     ref: ref,
     spellCheck: "false",
@@ -2721,7 +2825,7 @@ var SvgRadio = function SvgRadio(props) {
   }));
 };
 
-var _excluded$u = ["children", "className", "icon", "invalid"];
+var _excluded$u = ["children", "className", "icon", "id", "invalid"];
 function ownKeys$u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -2730,27 +2834,30 @@ function _objectSpread$u(e) { for (var r = 1; r < arguments.length; r++) { var t
 var Radio = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? SvgRadio : _ref$icon,
+    id = _ref.id,
     invalid = _ref.invalid,
     restProps = _objectWithoutProperties(_ref, _excluded$u);
-  var id = react.useId();
+  var inputId = id || react.useId();
   return (
     // This div is here because NVDA doesn't match the input to the label
     // without a containing element
     jsxRuntime.jsxs("div", {
-      className: clsx('ams-radio', className),
+      className: clsx.clsx('ams-radio', className),
       children: [jsxRuntime.jsx("input", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
         "aria-invalid": invalid || undefined,
         className: "ams-radio__input",
-        id: id,
+        id: inputId,
         ref: ref,
         type: "radio"
       })), jsxRuntime.jsxs("label", {
         className: "ams-radio__label",
-        htmlFor: id,
+        htmlFor: inputId,
         children: [jsxRuntime.jsx("span", {
           className: "ams-radio__icon-container",
-          children: icon !== null && icon !== void 0 ? icon : jsxRuntime.jsx(SvgRadio, {})
+          hidden: true,
+          children: typeof icon === 'function' ? icon() : icon
         }), children]
       })]
     })
@@ -2793,7 +2900,7 @@ var SearchFieldInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     }), jsxRuntime.jsx("input", _objectSpread$s(_objectSpread$s({}, restProps), {}, {
       "aria-invalid": invalid || undefined,
       autoComplete: "off",
-      className: clsx('ams-search-field__input', className),
+      className: clsx.clsx('ams-search-field__input', className),
       dir: dir !== null && dir !== void 0 ? dir : 'auto',
       enterKeyHint: "search",
       id: id,
@@ -2815,7 +2922,7 @@ var SearchFieldRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   return jsxRuntime.jsx("form", _objectSpread$r(_objectSpread$r({
     role: "search"
   }, restProps), {}, {
-    className: clsx('ams-search-field', className),
+    className: clsx.clsx('ams-search-field', className),
     ref: ref,
     children: children
   }));
@@ -2837,7 +2944,7 @@ var SelectOption = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$q);
   return jsxRuntime.jsx("option", _objectSpread$q(_objectSpread$q({}, restProps), {}, {
-    className: clsx('ams-select__option', className),
+    className: clsx.clsx('ams-select__option', className),
     ref: ref,
     children: children
   }));
@@ -2852,7 +2959,7 @@ var SelectOptionGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$p);
   return jsxRuntime.jsx("optgroup", _objectSpread$p(_objectSpread$p({}, restProps), {}, {
-    className: clsx('ams-select__group', className),
+    className: clsx.clsx('ams-select__group', className),
     ref: ref,
     children: children
   }));
@@ -2869,7 +2976,7 @@ var SelectRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$o);
   return jsxRuntime.jsx("select", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
-    className: clsx('ams-select', className),
+    className: clsx.clsx('ams-select', className),
     ref: ref,
     children: children
   }));
@@ -2894,7 +3001,7 @@ var SkipLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$n);
   return jsxRuntime.jsx("a", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
-    className: clsx('ams-skip-link', 'ams-visually-hidden', className),
+    className: clsx.clsx('ams-skip-link', 'ams-visually-hidden', className),
     ref: ref,
     children: children
   }));
@@ -2915,7 +3022,7 @@ var Spotlight = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     color = _ref.color,
     restProps = _objectWithoutProperties(_ref, _excluded$m);
   return jsxRuntime.jsx(Tag, _objectSpread$m(_objectSpread$m({}, restProps), {}, {
-    className: clsx('ams-spotlight', color && "ams-spotlight--".concat(color), className),
+    className: clsx.clsx('ams-spotlight', color && "ams-spotlight--".concat(color), className),
     ref: ref,
     children: children
   }));
@@ -2925,6 +3032,7 @@ Spotlight.displayName = 'Spotlight';
 var _excluded$l = ["children", "className", "color", "icon"];
 function ownKeys$l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// The `ams-standalone-link--with-icon` class is @deprecated and will be removed in a future release.
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
@@ -2932,12 +3040,13 @@ var StandaloneLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? designSystemReactIcons.ChevronForwardIcon : _ref$icon,
     restProps = _objectWithoutProperties(_ref, _excluded$l);
   return jsxRuntime.jsxs("a", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
-    className: clsx('ams-standalone-link', color && "ams-standalone-link--".concat(color), icon && 'ams-standalone-link--with-icon', className),
+    className: clsx.clsx('ams-standalone-link ams-standalone-link--with-icon', color && "ams-standalone-link--".concat(color), className),
     ref: ref,
-    children: [icon && jsxRuntime.jsx(Icon, {
+    children: [jsxRuntime.jsx(Icon, {
       svg: icon
     }), children]
   }));
@@ -2956,7 +3065,7 @@ var Switch = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$k);
   var inputId = id || react.useId();
   return jsxRuntime.jsxs("div", {
-    className: clsx('ams-switch', className),
+    className: clsx.clsx('ams-switch', className),
     children: [jsxRuntime.jsx("input", _objectSpread$k(_objectSpread$k({}, restProps), {}, {
       className: "ams-switch__input",
       id: inputId,
@@ -2979,7 +3088,7 @@ var TableBody = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$j);
   return jsxRuntime.jsx("tbody", _objectSpread$j(_objectSpread$j({}, restProps), {}, {
-    className: clsx('ams-table__body', className),
+    className: clsx.clsx('ams-table__body', className),
     ref: ref,
     children: children
   }));
@@ -2994,7 +3103,7 @@ var TableCaption = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$i);
   return jsxRuntime.jsx("caption", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
-    className: clsx('ams-table__caption', className),
+    className: clsx.clsx('ams-table__caption', className),
     ref: ref,
     children: children
   }));
@@ -3009,7 +3118,7 @@ var TableCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$h);
   return jsxRuntime.jsx("td", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
-    className: clsx('ams-table__cell', className),
+    className: clsx.clsx('ams-table__cell', className),
     ref: ref,
     children: children
   }));
@@ -3024,7 +3133,7 @@ var TableFooter = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$g);
   return jsxRuntime.jsx("tfoot", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
-    className: clsx('ams-table__footer', className),
+    className: clsx.clsx('ams-table__footer', className),
     ref: ref,
     children: children
   }));
@@ -3039,7 +3148,7 @@ var TableHeader = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$f);
   return jsxRuntime.jsx("thead", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
-    className: clsx('ams-table__header', className),
+    className: clsx.clsx('ams-table__header', className),
     ref: ref,
     children: children
   }));
@@ -3054,7 +3163,7 @@ var TableHeaderCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$e);
   return jsxRuntime.jsx("th", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-    className: clsx('ams-table__header-cell', className),
+    className: clsx.clsx('ams-table__header-cell', className),
     ref: ref,
     children: children
   }));
@@ -3069,7 +3178,7 @@ var TableRow = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$d);
   return jsxRuntime.jsx("tr", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
-    className: clsx('ams-table__row', className),
+    className: clsx.clsx('ams-table__row', className),
     ref: ref,
     children: children
   }));
@@ -3086,7 +3195,7 @@ var TableRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   return jsxRuntime.jsx("div", {
     className: "ams-table",
     children: jsxRuntime.jsx("table", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
-      className: clsx('ams-table__table', className),
+      className: clsx.clsx('ams-table__table', className),
       ref: ref,
       children: children
     }))
@@ -3133,7 +3242,7 @@ var TableOfContentsList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$a);
   return jsxRuntime.jsx("ul", _objectSpread$a(_objectSpread$a({}, restProps), {}, {
-    className: clsx('ams-table-of-contents__list', className),
+    className: clsx.clsx('ams-table-of-contents__list', className),
     ref: ref,
     children: children
   }));
@@ -3143,6 +3252,7 @@ TableOfContentsList.displayName = 'TableOfContents.List';
 var _excluded$9 = ["children", "className", "heading", "headingLevel"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// The 'ams-table-of-contents__heading' class is @deprecated and will be removed in a future release.
 var TableOfContentsRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -3151,12 +3261,12 @@ var TableOfContentsRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
     restProps = _objectWithoutProperties(_ref, _excluded$9);
   return jsxRuntime.jsxs("nav", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
-    className: clsx('ams-table-of-contents', className),
+    className: clsx.clsx('ams-table-of-contents', className),
     ref: ref,
     children: [heading && jsxRuntime.jsx(Heading, {
       className: "ams-table-of-contents__heading",
       level: headingLevel,
-      size: "level-4",
+      size: "level-3",
       children: heading
     }), children]
   }));
@@ -3203,7 +3313,7 @@ var TabsButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   return jsxRuntime.jsxs("button", _objectSpread$8(_objectSpread$8({}, restProps), {}, {
     "aria-controls": ariaControls,
     "aria-selected": activeTabId === ariaControls,
-    className: clsx('ams-tabs__button', className),
+    className: clsx.clsx('ams-tabs__button', className),
     id: "button-".concat(ariaControls),
     onClick: handleClick,
     ref: ref,
@@ -3241,7 +3351,7 @@ var TabsList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     }),
     keyDown = _useKeyboardFocus.keyDown;
   return jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: clsx('ams-tabs__list', className),
+    className: clsx.clsx('ams-tabs__list', className),
     onKeyDown: keyDown,
     ref: innerRef,
     role: "tablist",
@@ -3265,7 +3375,7 @@ var TabsPanel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }
   return jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, restProps), {}, {
     "aria-labelledby": "button-".concat(id),
-    className: clsx('ams-tabs__panel', className),
+    className: clsx.clsx('ams-tabs__panel', className),
     id: id,
     ref: ref,
     role: "tabpanel",
@@ -3329,7 +3439,7 @@ var TabsRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       updateTab: updateTab
     },
     children: jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, restProps), {}, {
-      className: clsx('ams-tabs', className),
+      className: clsx.clsx('ams-tabs', className),
       ref: ref,
       children: children
     }))
@@ -3359,7 +3469,7 @@ var TextArea = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$4);
   return jsxRuntime.jsx("textarea", _objectSpread$4(_objectSpread$4({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
-    className: clsx('ams-text-area', resize && "ams-text-area--resize-".concat(resize), restProps.cols && 'ams-text-area--cols', className),
+    className: clsx.clsx('ams-text-area', resize && "ams-text-area--resize-".concat(resize), restProps.cols && 'ams-text-area--cols', className),
     dir: dir !== null && dir !== void 0 ? dir : 'auto',
     ref: ref
   }));
@@ -3381,7 +3491,7 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$3);
   return jsxRuntime.jsx("input", _objectSpread$3(_objectSpread$3({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
-    className: clsx('ams-text-input', className),
+    className: clsx.clsx('ams-text-input', className),
     dir: dir !== null && dir !== void 0 ? dir : 'auto',
     ref: ref,
     type: type
@@ -3401,7 +3511,7 @@ var TimeInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     restProps = _objectWithoutProperties(_ref, _excluded$2);
   return jsxRuntime.jsx("input", _objectSpread$2(_objectSpread$2({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
-    className: clsx('ams-time-input', className),
+    className: clsx.clsx('ams-time-input', className),
     ref: ref,
     type: "time"
   }));
@@ -3416,7 +3526,7 @@ var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$1);
   return jsxRuntime.jsx("li", _objectSpread$1(_objectSpread$1({
-    className: clsx('ams-unordered-list__item', className),
+    className: clsx.clsx('ams-unordered-list__item', className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -3436,7 +3546,7 @@ var UnorderedListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     size = _ref.size,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return jsxRuntime.jsx("ul", _objectSpread(_objectSpread({
-    className: clsx('ams-unordered-list', color && "ams-unordered-list--".concat(color), !markers && 'ams-unordered-list--no-markers', size && "ams-unordered-list--".concat(size), className),
+    className: clsx.clsx('ams-unordered-list', color && "ams-unordered-list--".concat(color), !markers && 'ams-unordered-list--no-markers', size && "ams-unordered-list--".concat(size), className),
     ref: ref
   }, restProps), {}, {
     children: children
@@ -3459,6 +3569,7 @@ exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Breakout = Breakout;
 exports.Button = Button;
+exports.CallToActionLink = CallToActionLink;
 exports.Card = Card;
 exports.CharacterCount = CharacterCount;
 exports.Checkbox = Checkbox;
@@ -3485,6 +3596,7 @@ exports.Link = Link;
 exports.LinkList = LinkList;
 exports.Logo = Logo;
 exports.Mark = Mark;
+exports.Menu = Menu;
 exports.OrderedList = OrderedList;
 exports.Overlap = Overlap;
 exports.Page = Page;