@amsterdam/design-system-react 1.1.0 → 2.0.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx, { clsx as clsx$1 } from 'clsx';
+import { clsx } from 'clsx';
 import { createContext, forwardRef, useContext, useState, useId, useRef, useImperativeHandle, useEffect, useCallback, useMemo, useLayoutEffect, startTransition } from 'react';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -7,13 +7,73 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { ChevronDownIcon, CloseIcon, WarningFillIcon, SuccessFillIcon, ErrorFillIcon, InfoFillIcon, PersonFillIcon, WarningIcon, DocumentIcon, ChevronBackwardIcon, ChevronForwardIcon, SearchIcon } from '@amsterdam/design-system-react-icons';
 import _toConsumableArray from '@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__*/createContext(defaultValues$2);
 
@@ -35,9 +95,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__*/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 jsx(Tag, _objectSpread$1L(_objectSpread$1L({
+    className: 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}
@@ -48,9 +132,11 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size = _ref.size,
     square = _ref.square,
     svg = _ref.svg,
-    restProps = _objectWithoutProperties(_ref, _excluded$1z);
-  return jsx("span", _objectSpread$1I(_objectSpread$1I({
+    restProps = _objectWithoutProperties(_ref, _excluded$1B);
+  return jsx("span", _objectSpread$1K(_objectSpread$1K({
     className: 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
@@ -58,16 +144,17 @@ var Icon = /*#__PURE__*/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__*/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 = useContext(AccordionContext),
     headingLevel = _useContext.headingLevel,
     sectionAs = _useContext.sectionAs;
@@ -75,17 +162,18 @@ var AccordionSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
     setIsExpanded = _useState2[1];
-  var HeadingTag = getHeadingTag(headingLevel);
   var SectionTag = sectionAs || 'section';
   var id = useId();
+  var iconSize = "heading-".concat(headingLevel);
   var buttonId = "button-".concat(id);
   var panelId = "panel-".concat(id);
-  return jsxs("div", _objectSpread$1H(_objectSpread$1H({
+  return jsxs("div", _objectSpread$1J(_objectSpread$1J({
     className: clsx('ams-accordion__section', className),
     ref: ref
   }, restProps), {}, {
-    children: [jsx(HeadingTag, {
+    children: [jsx(Heading, {
       className: "ams-accordion__header",
+      level: headingLevel,
       children: jsxs("button", {
         "aria-controls": panelId,
         "aria-expanded": isExpanded,
@@ -97,7 +185,7 @@ var AccordionSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
         type: "button",
         children: [jsx(Icon, {
           className: "ams-accordion__icon",
-          size: "heading-4",
+          size: iconSize,
           svg: ChevronDownIcon
         }), label]
       })
@@ -113,65 +201,6 @@ var AccordionSection = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -209,17 +238,17 @@ 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1x);
-  return jsx("div", _objectSpread$1G(_objectSpread$1G({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1z);
+  return jsx("div", _objectSpread$1I(_objectSpread$1I({}, restProps), {}, {
     className: clsx('ams-action-group', className),
     ref: ref,
     role: "group",
@@ -228,33 +257,9 @@ var ActionGroup = /*#__PURE__*/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__*/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 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}
  */
@@ -266,8 +271,8 @@ var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$svg = _ref.svg,
     svg = _ref$svg === void 0 ? CloseIcon : _ref$svg,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$1v);
-  return jsxs("button", _objectSpread$1E(_objectSpread$1E({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1y);
+  return jsxs("button", _objectSpread$1H(_objectSpread$1H({}, restProps), {}, {
     className: clsx('ams-icon-button', color && "ams-icon-button--".concat(color), className),
     ref: ref,
     type: type || 'button',
@@ -283,9 +288,9 @@ var IconButton = /*#__PURE__*/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}
  */
@@ -298,8 +303,8 @@ var Row = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     gap = _ref.gap,
     wrap = _ref.wrap,
-    restProps = _objectWithoutProperties(_ref, _excluded$1u);
-  return jsx(Tag, _objectSpread$1D(_objectSpread$1D({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1x);
+  return jsx(Tag, _objectSpread$1G(_objectSpread$1G({}, 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),
     ref: ref,
     children: children
@@ -307,9 +312,9 @@ var Row = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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: ErrorFillIcon,
   success: SuccessFillIcon,
@@ -325,19 +330,22 @@ var Alert = /*#__PURE__*/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] : InfoFillIcon;
-  return jsxs("section", _objectSpread$1C(_objectSpread$1C({}, restProps), {}, {
+  return jsxs("section", _objectSpread$1F(_objectSpread$1F({}, restProps), {}, {
+    "aria-labelledby": headingId || undefined,
     className: clsx('ams-alert', severity && "ams-alert--".concat(severity), className),
     ref: ref,
     children: [jsx("div", {
       className: "ams-alert__severity-indicator",
       children: jsx(Icon, {
         color: "inverse",
-        size: "heading-4",
+        size: "heading-3",
         svg: SeverityIcon
       })
     }), jsxs("div", {
@@ -346,13 +354,14 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref, ref) {
         align: "between",
         alignVertical: "start",
         children: [jsx(Heading, {
+          id: headingId || undefined,
           level: headingLevel,
-          size: "level-4",
+          size: "level-3",
           children: heading
         }), closeable && jsx(IconButton, {
           label: closeButtonLabel,
           onClick: onClose,
-          size: "heading-4"
+          size: "heading-3"
         })]
       }), children]
     })]
@@ -360,9 +369,9 @@ var Alert = /*#__PURE__*/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;
@@ -391,10 +400,10 @@ var Avatar = /*#__PURE__*/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 jsxs("span", _objectSpread$1B(_objectSpread$1B({}, restProps), {}, {
+  return jsxs("span", _objectSpread$1E(_objectSpread$1E({}, restProps), {}, {
     className: clsx('ams-avatar', color && "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
     ref: ref,
     children: [jsx("span", {
@@ -408,9 +417,9 @@ var Avatar = /*#__PURE__*/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}
  */
@@ -418,8 +427,8 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     color = _ref.color,
     label = _ref.label,
-    restProps = _objectWithoutProperties(_ref, _excluded$1r);
-  return jsx("span", _objectSpread$1A(_objectSpread$1A({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1u);
+  return jsx("span", _objectSpread$1D(_objectSpread$1D({}, restProps), {}, {
     className: clsx('ams-badge', color && "ams-badge--".concat(color), className),
     ref: ref,
     children: label
@@ -427,9 +436,9 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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}
  */
@@ -437,8 +446,8 @@ var Blockquote = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$1q);
-  return jsx("blockquote", _objectSpread$1z(_objectSpread$1z({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1t);
+  return jsx("blockquote", _objectSpread$1C(_objectSpread$1C({}, restProps), {}, {
     className: clsx('ams-blockquote', color && "ams-blockquote--".concat(color), className),
     ref: ref,
     children: children
@@ -446,17 +455,17 @@ var Blockquote = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1p);
+    restProps = _objectWithoutProperties(_ref, _excluded$1s);
   return jsx("li", {
     className: "ams-breadcrumb__item",
-    children: jsx("a", _objectSpread$1y(_objectSpread$1y({}, restProps), {}, {
-      className: clsx$1('ams-breadcrumb__link', className),
+    children: jsx("a", _objectSpread$1B(_objectSpread$1B({}, restProps), {}, {
+      className: clsx('ams-breadcrumb__link', className),
       ref: ref,
       children: children
     }))
@@ -464,15 +473,15 @@ var BreadcrumbLink = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1o);
-  return jsx("nav", _objectSpread$1x(_objectSpread$1x({}, restProps), {}, {
-    className: clsx$1('ams-breadcrumb', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$1r);
+  return jsx("nav", _objectSpread$1A(_objectSpread$1A({}, restProps), {}, {
+    className: clsx('ams-breadcrumb', className),
     ref: ref,
     children: jsx("ol", {
       className: "ams-breadcrumb__list",
@@ -488,6 +497,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
@@ -511,9 +538,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__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -524,8 +551,8 @@ var BreakoutCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     has = _ref.has,
     rowSpan = _ref.rowSpan,
     rowStart = _ref.rowStart,
-    restProps = _objectWithoutProperties(_ref, _excluded$1n);
-  return jsx(Tag, _objectSpread$1w(_objectSpread$1w({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1q);
+  return jsx(Tag, _objectSpread$1z(_objectSpread$1z({}, restProps), {}, {
     className: clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && "ams-breakout__cell--has-".concat(has), className),
     ref: ref,
     children: children
@@ -533,27 +560,9 @@ var BreakoutCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -561,8 +570,8 @@ var BreakoutRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingBottom = _ref.paddingBottom,
     paddingTop = _ref.paddingTop,
     paddingVertical = _ref.paddingVertical,
-    restProps = _objectWithoutProperties(_ref, _excluded$1m);
-  return jsx("div", _objectSpread$1v(_objectSpread$1v({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1p);
+  return jsx("div", _objectSpread$1y(_objectSpread$1y({}, restProps), {}, {
     className: clsx('ams-breakout', gapVertical && "ams-breakout--gap-vertical--".concat(gapVertical), paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className),
     ref: ref,
     children: children
@@ -576,9 +585,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}
  */
@@ -592,8 +601,8 @@ var Button = /*#__PURE__*/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 jsxs("button", _objectSpread$1u(_objectSpread$1u({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1o);
+  return jsxs("button", _objectSpread$1x(_objectSpread$1x({}, restProps), {}, {
     className: clsx('ams-button', "ams-button--".concat(variant), icon && iconOnly && "ams-button--icon-only", className),
     disabled: disabled,
     ref: ref,
@@ -611,16 +620,34 @@ var Button = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1n);
+  return jsx("a", _objectSpread$1w(_objectSpread$1w({}, restProps), {}, {
+    className: 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__*/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 jsx(Heading, _objectSpread$1t(_objectSpread$1t({}, restProps), {}, {
+    size = _ref$size === void 0 ? 'level-3' : _ref$size,
+    restProps = _objectWithoutProperties(_ref, _excluded$1m);
+  return jsx(Heading, _objectSpread$1v(_objectSpread$1v({}, restProps), {}, {
     className: clsx('ams-card__heading', className),
     ref: ref,
     size: size,
@@ -629,9 +656,9 @@ var CardHeading = /*#__PURE__*/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}
  */
@@ -640,8 +667,8 @@ var Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     color = _ref.color,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$1j);
-  return jsx("p", _objectSpread$1s(_objectSpread$1s({
+    restProps = _objectWithoutProperties(_ref, _excluded$1l);
+  return jsx("p", _objectSpread$1u(_objectSpread$1u({
     className: clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
     ref: ref
   }, restProps), {}, {
@@ -650,15 +677,15 @@ var Paragraph = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     tagline = _ref.tagline,
-    restProps = _objectWithoutProperties(_ref, _excluded$1i);
-  return jsxs("hgroup", _objectSpread$1r(_objectSpread$1r({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1k);
+  return jsxs("hgroup", _objectSpread$1t(_objectSpread$1t({}, restProps), {}, {
     className: clsx('ams-card__heading-group', className),
     ref: ref,
     children: [children, jsx(Paragraph, {
@@ -677,44 +704,45 @@ 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__*/forwardRef(function (_ref, ref) {
   var aspectRatio = _ref.aspectRatio,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1h);
-  return jsx("img", _objectSpread$1q(_objectSpread$1q({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1j);
+  return jsx("img", _objectSpread$1s(_objectSpread$1s({}, restProps), {}, {
     className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
-    ref: ref
+    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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1g);
-  return jsx(Image, _objectSpread$1p(_objectSpread$1p({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1i);
+  return jsx(Image, _objectSpread$1r(_objectSpread$1r({}, restProps), {}, {
     className: 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1f);
-  return jsx("a", _objectSpread$1o(_objectSpread$1o({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1h);
+  return jsx("a", _objectSpread$1q(_objectSpread$1q({}, restProps), {}, {
     className: clsx('ams-card__link', className),
     ref: ref,
     children: children
@@ -722,14 +750,14 @@ var CardLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1e);
-  return jsx("article", _objectSpread$1n(_objectSpread$1n({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1g);
+  return jsx("article", _objectSpread$1p(_objectSpread$1p({}, restProps), {}, {
     className: clsx('ams-card', className),
     ref: ref,
     children: children
@@ -746,9 +774,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}
  */
@@ -756,8 +784,8 @@ var CharacterCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     length = _ref.length,
     maxLength = _ref.maxLength,
-    restProps = _objectWithoutProperties(_ref, _excluded$1d);
-  return jsx("div", _objectSpread$1m(_objectSpread$1m({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1f);
+  return jsx("div", _objectSpread$1o(_objectSpread$1o({}, restProps), {}, {
     className: clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className),
     ref: ref,
     role: "status",
@@ -766,10 +794,10 @@ var CharacterCount = /*#__PURE__*/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 jsxs("svg", _objectSpread$1l(_objectSpread$1l({
+  return jsxs("svg", _objectSpread$1n(_objectSpread$1n({
     "aria-hidden": "true",
     focusable: "false",
     viewBox: "0 0 24 24",
@@ -812,20 +840,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__*/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 = useId();
+    restProps = _objectWithoutProperties(_ref, _excluded$1e);
+  var inputId = id || useId();
   var innerRef = useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
   useImperativeHandle(ref, function () {
@@ -842,18 +872,19 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // without a containing element
     jsxs("div", {
       className: clsx('ams-checkbox', className),
-      children: [jsx("input", _objectSpread$1k(_objectSpread$1k({}, restProps), {}, {
+      children: [jsx("input", _objectSpread$1m(_objectSpread$1m({}, restProps), {}, {
         "aria-invalid": invalid || undefined,
         className: "ams-checkbox__input",
-        id: id,
+        id: inputId,
         ref: innerRef,
         type: "checkbox"
       })), jsxs("label", {
         className: "ams-checkbox__label",
-        htmlFor: id,
+        htmlFor: inputId,
         children: [jsx("span", {
           className: "ams-checkbox__icon-container",
-          children: icon !== null && icon !== void 0 ? icon : jsx(SvgCheckbox, {})
+          hidden: true,
+          children: typeof icon === 'function' ? icon() : icon
         }), children]
       })]
     })
@@ -861,9 +892,9 @@ var Checkbox = /*#__PURE__*/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}
  */
@@ -875,8 +906,8 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children = _ref.children,
     className = _ref.className,
     gap = _ref.gap,
-    restProps = _objectWithoutProperties(_ref, _excluded$1b);
-  return jsx(Tag, _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1d);
+  return jsx(Tag, _objectSpread$1l(_objectSpread$1l({}, 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),
     ref: ref,
     children: children
@@ -884,9 +915,9 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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}
  */
@@ -895,8 +926,8 @@ var DateInput = /*#__PURE__*/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 jsx("input", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1c);
+  return jsx("input", _objectSpread$1k(_objectSpread$1k({}, restProps), {}, {
     "aria-invalid": invalid || undefined,
     className: clsx('ams-date-input', className),
     ref: ref,
@@ -905,14 +936,14 @@ var DateInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$19);
-  return jsx("dd", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1b);
+  return jsx("dd", _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
     className: clsx('ams-description-list__description', className),
     ref: ref,
     children: children
@@ -920,14 +951,14 @@ var DescriptionListDescription = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$18);
-  return jsx("div", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1a);
+  return jsx("div", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
     className: clsx('ams-description-list__section', className),
     ref: ref,
     children: children
@@ -935,14 +966,14 @@ var DescriptionListSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$17);
-  return jsx("dt", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$19);
+  return jsx("dt", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
     className: clsx('ams-description-list__term', className),
     ref: ref,
     children: children
@@ -950,16 +981,16 @@ var DescriptionListTerm = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
     termsWidth = _ref.termsWidth,
-    restProps = _objectWithoutProperties(_ref, _excluded$16);
-  return jsx("dl", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$18);
+  return jsx("dl", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
     className: clsx('ams-description-list', color && "ams-description-list--".concat(color), termsWidth && "ams-description-list--".concat(termsWidth), className),
     ref: ref,
     children: children
@@ -975,9 +1006,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();
@@ -993,20 +1024,20 @@ var DialogRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
     closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Sluiten' : _ref$closeButtonLabel,
     footer = _ref.footer,
     heading = _ref.heading,
-    restProps = _objectWithoutProperties(_ref, _excluded$15);
-  return jsxs("dialog", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$17);
+  return jsxs("dialog", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
     className: clsx('ams-dialog', className),
     ref: ref,
     children: [jsxs("header", {
       className: "ams-dialog__header",
       children: [jsx(Heading, {
         level: 1,
-        size: "level-4",
+        size: "level-3",
         children: heading
       }), jsx(IconButton, {
         label: closeButtonLabel,
         onClick: closeDialog,
-        size: "heading-4",
+        size: "heading-3",
         type: "button"
       })]
     }), jsx("div", {
@@ -1027,36 +1058,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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? WarningIcon : _ref$icon,
     _ref$prefix = _ref.prefix,
     prefix = _ref$prefix === void 0 ? 'Invoerfout' : _ref$prefix,
-    restProps = _objectWithoutProperties(_ref, _excluded$14);
-  return jsxs("p", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$16);
+  return jsxs("p", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
     className: clsx('ams-error-message', className),
     ref: ref,
     children: [jsx(Icon, {
-      size: "small",
-      svg: icon ? icon : WarningIcon
-    }), jsxs("span", {
+      svg: icon
+    }), 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}
  */
@@ -1064,8 +1095,8 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
-    restProps = _objectWithoutProperties(_ref, _excluded$13);
-  return jsx("div", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$15);
+  return jsx("div", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
     className: clsx('ams-field', invalid && 'ams-field--invalid', className),
     ref: ref,
     children: children
@@ -1073,9 +1104,9 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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;
@@ -1090,12 +1121,12 @@ var Hint = /*#__PURE__*/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 && jsxs("span", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
+  return hintText && jsxs("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
     className: clsx('ams-hint', className),
     ref: ref,
     children: ["(", hintText, ")"]
@@ -1103,9 +1134,9 @@ var Hint = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 });
 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}
  */
@@ -1116,8 +1147,8 @@ var FieldSet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     invalid = _ref.invalid,
     legend = _ref.legend,
     optional = _ref.optional,
-    restProps = _objectWithoutProperties(_ref, _excluded$11);
-  return jsxs("fieldset", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$13);
+  return jsxs("fieldset", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
     className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
     ref: ref,
     children: [jsxs("legend", {
@@ -1131,15 +1162,15 @@ var FieldSet = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$10);
-  return jsx("figcaption", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$12);
+  return jsx("figcaption", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
     className: clsx('ams-figure__caption', color && "ams-figure__caption--".concat(color), className),
     ref: ref,
     children: children
@@ -1147,14 +1178,14 @@ var FigureCaption = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$$);
-  return jsx("figure", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$11);
+  return jsx("figure", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
     className: clsx('ams-figure', className),
     ref: ref,
     children: children
@@ -1168,16 +1199,16 @@ 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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$_);
-  return jsx("input", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$10);
+  return jsx("input", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
     className: clsx('ams-file-input', className),
     ref: ref,
     type: "file"
@@ -1214,39 +1245,39 @@ 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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     file = _ref.file,
     onDelete = _ref.onDelete,
-    restProps = _objectWithoutProperties(_ref, _excluded$Z);
-  return jsxs("li", _objectSpread$15(_objectSpread$15({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$$);
+  return jsxs("li", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
     className: clsx('ams-file-list__item', className),
     ref: ref,
     children: [jsx("div", {
@@ -1278,14 +1309,14 @@ var FileListItem = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$Y);
-  return jsx("ul", _objectSpread$14(_objectSpread$14({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$_);
+  return jsx("ul", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
     className: clsx('ams-file-list', className),
     ref: ref,
     children: children
@@ -1299,9 +1330,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__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -1309,8 +1340,8 @@ var GridCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     span = _ref.span,
     start = _ref.start,
-    restProps = _objectWithoutProperties(_ref, _excluded$X);
-  return jsx(Tag, _objectSpread$13(_objectSpread$13({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$Z);
+  return jsx(Tag, _objectSpread$15(_objectSpread$15({}, restProps), {}, {
     className: clsx('ams-grid__cell', gridCellClasses(span, start), className),
     ref: ref,
     children: children
@@ -1318,9 +1349,9 @@ var GridCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
@@ -1330,8 +1361,8 @@ var GridRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
     paddingBottom = _ref.paddingBottom,
     paddingTop = _ref.paddingTop,
     paddingVertical = _ref.paddingVertical,
-    restProps = _objectWithoutProperties(_ref, _excluded$W);
-  return jsx(Tag, _objectSpread$12(_objectSpread$12({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$Y);
+  return jsx(Tag, _objectSpread$14(_objectSpread$14({}, restProps), {}, {
     className: clsx('ams-grid', gapVertical && "ams-grid--gap-vertical--".concat(gapVertical), paddingClasses('grid', paddingBottom, paddingTop, paddingVertical), className),
     ref: ref,
     children: children
@@ -1359,14 +1390,14 @@ var defaultValues$1 = {
 };
 var ImageSliderContext = /*#__PURE__*/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__*/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 = useContext(ImageSliderContext),
     goToNextSlide = _useContext.goToNextSlide,
     goToPreviousSlide = _useContext.goToPreviousSlide,
@@ -1378,7 +1409,7 @@ var ImageSliderControls = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var handleClickNext = useCallback(function () {
     return goToNextSlide();
   }, [goToNextSlide]);
-  return jsxs("div", _objectSpread$11(_objectSpread$11({}, restProps), {}, {
+  return jsxs("div", _objectSpread$13(_objectSpread$13({}, restProps), {}, {
     className: clsx('ams-image-slider__controls', className),
     ref: ref,
     children: [jsx(Button, {
@@ -1402,14 +1433,14 @@ var ImageSliderControls = /*#__PURE__*/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__*/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 = useContext(ImageSliderContext),
     currentSlideId = _useContext.currentSlideId;
   var isInView = useMemo(function () {
@@ -1418,7 +1449,7 @@ var ImageSliderItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var itemClassName = useMemo(function () {
     return clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className);
   }, [isInView, className]);
-  return jsx("div", _objectSpread$10(_objectSpread$10(_objectSpread$10({}, restProps), {}, {
+  return jsx("div", _objectSpread$12(_objectSpread$12(_objectSpread$12({}, restProps), {}, {
     className: itemClassName,
     ref: ref
   }, !isInView && {
@@ -1429,14 +1460,14 @@ var ImageSliderItem = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$T);
-  return jsx("div", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$V);
+  return jsx("div", _objectSpread$11(_objectSpread$11({}, restProps), {}, {
     className: clsx('ams-image-slider__scroller', className),
     ref: ref,
     children: children
@@ -1444,14 +1475,14 @@ var ImageSliderScroller = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/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 = useContext(ImageSliderContext),
     currentSlideId = _useContext.currentSlideId,
     goToNextSlide = _useContext.goToNextSlide,
@@ -1497,7 +1528,7 @@ var ImageSliderThumbnails = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, index);
     });
   }, [currentSlideId, goToSlideId, imageLabel, thumbnails]);
-  return jsx("nav", _objectSpread$_(_objectSpread$_({}, restProps), {}, {
+  return jsx("nav", _objectSpread$10(_objectSpread$10({}, restProps), {}, {
     className: clsx('ams-image-slider__thumbnails', className),
     onKeyDown: handleKeyDown,
     ref: ref,
@@ -1507,9 +1538,9 @@ var ImageSliderThumbnails = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     controls = _ref.controls,
@@ -1520,7 +1551,7 @@ var ImageSliderRoot = /*#__PURE__*/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 = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentSlideId = _useState2[0],
@@ -1629,7 +1660,7 @@ var ImageSliderRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isAtEnd: isAtEnd,
       isAtStart: isAtStart
     },
-    children: jsxs("div", _objectSpread$Z(_objectSpread$Z({}, restProps), {}, {
+    children: jsxs("div", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
       "aria-roledescription": "carousel",
       className: clsx('ams-image-slider', controls && 'ams-image-slider--controls', className),
       ref: ref,
@@ -1674,40 +1705,41 @@ 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__*/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 ? ChevronForwardIcon : _ref$icon,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$Q);
+    restProps = _objectWithoutProperties(_ref, _excluded$S);
   return jsx("li", {
-    children: jsxs("a", _objectSpread$Y(_objectSpread$Y({
+    children: jsxs("a", _objectSpread$_(_objectSpread$_({
       className: clsx('ams-link-list__link', color && "ams-link-list__link--".concat(color), size && "ams-link-list__link--".concat(size), className),
       ref: ref
     }, restProps), {}, {
       children: [jsx(Icon, {
         size: size,
-        svg: icon !== null && icon !== void 0 ? icon : 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$P);
-  return jsx("ul", _objectSpread$X(_objectSpread$X({
+    restProps = _objectWithoutProperties(_ref, _excluded$R);
+  return jsx("ul", _objectSpread$Z(_objectSpread$Z({
     className: clsx('ams-link-list', className),
     ref: ref
   }, restProps), {}, {
@@ -1722,9 +1754,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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     errors = _ref.errors,
@@ -1735,7 +1767,7 @@ var InvalidFormAlertWithErrors = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 = useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
   useImperativeHandle(ref, function () {
@@ -1747,9 +1779,12 @@ var InvalidFormAlertWithErrors = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setHasFocusedOnce(true);
     }
   }, [innerRef]);
-  return jsx(Alert, _objectSpread$W(_objectSpread$W({}, restProps), {}, {
+  return jsx(Alert, _objectSpread$Y(_objectSpread$Y({}, restProps), {}, {
     className: 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",
@@ -1792,16 +1827,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__*/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);
@@ -1812,7 +1847,7 @@ var InvalidFormAlert = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hasFocusedOnce = _useState2[0],
     setHasFocusedOnce = _useState2[1];
   if (errors.length === 0) return undefined;
-  return jsx(InvalidFormAlertWithErrors, _objectSpread$V(_objectSpread$V({}, restProps), {}, {
+  return jsx(InvalidFormAlertWithErrors, _objectSpread$X(_objectSpread$X({}, restProps), {}, {
     errors: errors,
     hasFocusedOnce: hasFocusedOnce,
     ref: ref,
@@ -1821,9 +1856,9 @@ var InvalidFormAlert = /*#__PURE__*/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}
  */
@@ -1832,8 +1867,8 @@ var Label = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     hint = _ref.hint,
     optional = _ref.optional,
-    restProps = _objectWithoutProperties(_ref, _excluded$M);
-  return jsxs("label", _objectSpread$U(_objectSpread$U({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$O);
+  return jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
     className: clsx('ams-label', className),
     ref: ref,
     children: [children, " ", jsx(Hint, {
@@ -1844,9 +1879,9 @@ var Label = /*#__PURE__*/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}
  */
@@ -1854,8 +1889,8 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     color = _ref.color,
-    restProps = _objectWithoutProperties(_ref, _excluded$L);
-  return jsx("a", _objectSpread$T(_objectSpread$T({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$N);
+  return jsx("a", _objectSpread$V(_objectSpread$V({}, restProps), {}, {
     className: clsx('ams-link', color && "ams-link--".concat(color), className),
     ref: ref,
     children: children
@@ -1863,12 +1898,14 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$S(_objectSpread$S({
+  return 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",
@@ -1887,12 +1924,14 @@ var LogoAmsterdam = /*#__PURE__*/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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$R(_objectSpread$R({
+  return 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",
@@ -1915,13 +1954,15 @@ var LogoGgdAmsterdam = /*#__PURE__*/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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$Q(_objectSpread$Q({
+  return 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",
@@ -1952,12 +1993,14 @@ var LogoMuseumWeesp = /*#__PURE__*/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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$P(_objectSpread$P({
+  return 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",
@@ -1980,12 +2023,14 @@ var LogoStadsarchief = /*#__PURE__*/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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$O(_objectSpread$O({
+  return 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",
@@ -2008,12 +2053,14 @@ var LogoStadsbankVanLening = /*#__PURE__*/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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$N(_objectSpread$N({
+  return 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",
@@ -2036,9 +2083,9 @@ var LogoVgaVerzekeringen = /*#__PURE__*/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',
@@ -2073,10 +2120,10 @@ var Logo = /*#__PURE__*/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 jsx(LogoComponent, _objectSpread$M(_objectSpread$M({}, restProps), {}, {
+  return jsx(LogoComponent, _objectSpread$O(_objectSpread$O({}, restProps), {}, {
     "aria-label": ariaLabel || logoLabel,
     className: clsx('ams-logo', className),
     ref: ref
@@ -2084,17 +2131,17 @@ var Logo = /*#__PURE__*/forwardRef(function (_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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$J);
-  return jsx("mark", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$L);
+  return jsx("mark", _objectSpread$N(_objectSpread$N({}, restProps), {}, {
     className: clsx('ams-mark', className),
     ref: ref,
     children: children
@@ -2102,6 +2149,59 @@ var Mark = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    color = _ref.color,
+    icon = _ref.icon,
+    restProps = _objectWithoutProperties(_ref, _excluded$K);
+  return jsx("li", {
+    children: jsxs("a", _objectSpread$M(_objectSpread$M({}, restProps), {}, {
+      className: clsx('ams-menu__link', color && "ams-menu__link--".concat(color), className),
+      ref: ref,
+      children: [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__*/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 jsxs("nav", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
+    "aria-labelledby": "primary-navigation",
+    className: clsx('ams-menu', className),
+    ref: ref,
+    children: [jsx("h2", {
+      className: "ams-visually-hidden",
+      id: "primary-navigation",
+      children: accessibleName
+    }), 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; }
@@ -2251,6 +2351,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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  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; }
@@ -2316,36 +2446,6 @@ var PageHeaderMenuLink = /*#__PURE__*/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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    matches = _useState2[0],
-    setMatches = _useState2[1];
-  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; }
@@ -2414,17 +2514,20 @@ var PageHeaderRoot = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         logoBrand: logoBrand
       }), jsx("span", {
         className: "ams-visually-hidden",
-        children: logoLinkTitle
+        children: " ".concat(logoLinkTitle)
       })]
     }), (hasMegaMenu || menuItems) && jsxs("nav", {
       "aria-labelledby": "primary-navigation",
       className: "ams-page-header__navigation",
       children: [jsx("h2", {
+        "aria-hidden": true,
         className: "ams-visually-hidden",
         id: "primary-navigation",
         children: navigationLabel
       }), jsx("div", {
+        "aria-hidden": true,
         className: "ams-page-header__logo-link ams-page-header__logo-link--hidden",
+        hidden: true,
         children: jsx(LogoLinkContent, {
           brandName: brandName,
           logoBrand: logoBrand
@@ -2476,6 +2579,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__*/forwardRef(function (_ref, ref) {
@@ -2491,40 +2595,6 @@ var PageHeading = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 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 jsx("li", {
-    children: jsxs(Link, {
-      "aria-current": pageNumber === currentPage ? 'page' : undefined,
-      className: "ams-pagination__link",
-      href: linkTemplate(pageNumber),
-      children: [jsx("span", {
-        className: "ams-visually-hidden",
-        children: pageNumber === currentPage ? "Pagina ".concat(pageNumber) : "Ga naar pagina ".concat(pageNumber)
-      }), jsx("span", {
-        "aria-hidden": true,
-        children: pageNumber
-      })]
-    })
-  });
-};
-
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-var Spacer = function Spacer() {
-  return jsx("li", {
-    "aria-hidden": true,
-    children: "\u2026"
-  });
-};
-
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
@@ -2563,11 +2633,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]);
@@ -2575,14 +2645,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 jsx("li", {
+    children: jsxs(Link, {
+      "aria-current": pageNumber === currentPage ? 'page' : undefined,
+      className: "ams-pagination__link",
+      href: linkTemplate(pageNumber),
+      children: [jsx("span", {
+        className: "ams-visually-hidden",
+        children: pageNumber === currentPage ? "Pagina ".concat(pageNumber) : "Ga naar pagina ".concat(pageNumber)
+      }), jsx("span", {
+        "aria-hidden": true,
+        children: pageNumber
+      })]
+    })
+  });
+};
+
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+var Spacer = function Spacer() {
+  return 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__*/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 jsx("a", _objectSpread$x({}, props));
@@ -2590,21 +2696,19 @@ var Pagination = /*#__PURE__*/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) {
@@ -2614,13 +2718,13 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Get array of page numbers and / or spacers
   var range = getRange(page, totalPages, maxVisiblePages);
   return jsxs("nav", _objectSpread$x(_objectSpread$x({}, restProps), {}, {
-    "aria-labelledby": visuallyHiddenLabelId,
+    "aria-labelledby": accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label',
     className: clsx('ams-pagination', className),
     ref: ref,
     children: [jsx("span", {
       className: "ams-visually-hidden",
-      id: visuallyHiddenLabelId,
-      children: visuallyHiddenLabel
+      id: accessibleNameId || visuallyHiddenLabelId || 'ams-pagination-a11y-label',
+      children: accessibleName || visuallyHiddenLabel || 'Paginering'
     }), page !== 1 && jsxs(Link, {
       className: "ams-pagination__link",
       href: linkTemplate(page - 1),
@@ -2629,7 +2733,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
         svg: ChevronBackwardIcon
       }), jsx("span", {
         className: "ams-visually-hidden",
-        children: previousVisuallyHiddenLabel
+        children: previousAccessibleName || previousVisuallyHiddenLabel || 'Vorige pagina'
       }), jsx("span", {
         "aria-hidden": true,
         children: previousLabel
@@ -2650,7 +2754,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
       rel: "next",
       children: [jsx("span", {
         className: "ams-visually-hidden",
-        children: nextVisuallyHiddenLabel
+        children: nextAccessibleName || nextVisuallyHiddenLabel || 'Volgende pagina'
       }), jsx("span", {
         "aria-hidden": true,
         children: nextLabel
@@ -2719,7 +2823,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; }
 /**
@@ -2728,10 +2832,12 @@ function _objectSpread$u(e) { for (var r = 1; r < arguments.length; r++) { var t
 var Radio = /*#__PURE__*/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 = useId();
+  var inputId = id || useId();
   return (
     // This div is here because NVDA doesn't match the input to the label
     // without a containing element
@@ -2740,15 +2846,16 @@ var Radio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       children: [jsx("input", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
         "aria-invalid": invalid || undefined,
         className: "ams-radio__input",
-        id: id,
+        id: inputId,
         ref: ref,
         type: "radio"
       })), jsxs("label", {
         className: "ams-radio__label",
-        htmlFor: id,
+        htmlFor: inputId,
         children: [jsx("span", {
           className: "ams-radio__icon-container",
-          children: icon !== null && icon !== void 0 ? icon : jsx(SvgRadio, {})
+          hidden: true,
+          children: typeof icon === 'function' ? icon() : icon
         }), children]
       })]
     })
@@ -2923,6 +3030,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}
  */
@@ -2930,12 +3038,13 @@ var StandaloneLink = /*#__PURE__*/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 ? ChevronForwardIcon : _ref$icon,
     restProps = _objectWithoutProperties(_ref, _excluded$l);
   return 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('ams-standalone-link ams-standalone-link--with-icon', color && "ams-standalone-link--".concat(color), className),
     ref: ref,
-    children: [icon && jsx(Icon, {
+    children: [jsx(Icon, {
       svg: icon
     }), children]
   }));
@@ -3115,7 +3224,7 @@ var TableOfContentsLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return jsxs("li", {
     className: "ams-table-of-contents__item",
     children: [jsx("a", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
-      className: clsx$1('ams-table-of-contents__link', className),
+      className: clsx('ams-table-of-contents__link', className),
       ref: ref,
       children: label
     })), children]
@@ -3141,6 +3250,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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -3154,7 +3264,7 @@ var TableOfContentsRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [heading && jsx(Heading, {
       className: "ams-table-of-contents__heading",
       level: headingLevel,
-      size: "level-4",
+      size: "level-3",
       children: heading
     }), children]
   }));
@@ -3448,5 +3558,5 @@ var UnorderedList = Object.assign(UnorderedListRoot, {
   Item: UnorderedListItem
 });
 
-export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, generateAspectRatioClass };
+export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, CallToActionLink, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, Menu, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, generateAspectRatioClass };
 //# sourceMappingURL=index.esm.js.map