@amsterdam/design-system-react 0.3.0 → 0.4.0

package/dist/index.cjs.js

@@ -6,20 +6,310 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var react = require('react');
 var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
-var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var _extends = require('@babel/runtime/helpers/extends');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var componentLibraryReact = require('@utrecht/component-library-react');
 
-var _excluded$A = ["children", "className"];
-function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$V = ["className", "size", "square", "svg"];
+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), !0).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 Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'level-3' : _ref$size,
+    square = _ref.square,
+    svg = _ref.svg,
+    otherProps = _objectWithoutProperties(_ref, _excluded$V);
+  return jsxRuntime.jsx("span", _objectSpread$_(_objectSpread$_({
+    ref: ref,
+    className: clsx('amsterdam-icon', size === 'level-3' && 'amsterdam-icon--size-3', size === 'level-4' && 'amsterdam-icon--size-4', size === 'level-5' && 'amsterdam-icon--size-5', size === 'level-6' && 'amsterdam-icon--size-6', square && 'amsterdam-icon--square', className)
+  }, otherProps), {}, {
+    children: svg()
+  }));
+});
+Icon.displayName = 'Icon';
+
+var _excluded$U = ["children", "className", "href", "icon", "onBackground", "size"];
+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), !0).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 iconSizeMap = {
+  small: 'level-6',
+  medium: 'level-5',
+  large: 'level-4'
+};
+/** One link with a Link List. */
+var LinkListLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    href = _ref.href,
+    icon = _ref.icon,
+    onBackground = _ref.onBackground,
+    size = _ref.size,
+    restProps = _objectWithoutProperties(_ref, _excluded$U);
+  return jsxRuntime.jsx("li", {
+    children: jsxRuntime.jsxs("a", _objectSpread$Z(_objectSpread$Z({
+      className: clsx('amsterdam-link-list__link', onBackground && "amsterdam-link-list__link--on-background-".concat(onBackground), size && "amsterdam-link-list__link--".concat(size), className),
+      href: href,
+      ref: ref
+    }, restProps), {}, {
+      children: [jsxRuntime.jsx(Icon, {
+        svg: icon !== null && icon !== void 0 ? icon : designSystemReactIcons.ChevronRightIcon,
+        size: iconSizeMap[size !== null && size !== void 0 ? size : 'medium']
+      }), children]
+    }))
+  });
+});
+LinkListLink.displayName = 'LinkList.Link';
+
+var _excluded$T = ["children", "className"];
+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), !0).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; }
+/** A collection of related links. */
+var LinkList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$T);
+  return jsxRuntime.jsx("ul", _objectSpread$Y(_objectSpread$Y({
+    ref: ref,
+    className: clsx('amsterdam-link-list', className)
+  }, restProps), {}, {
+    children: children
+  }));
+});
+LinkList.Link = LinkListLink;
+LinkList.displayName = 'LinkList';
+
+var _excluded$S = ["label", "className", "color"];
+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), !0).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 Badge = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+    className = _ref.className,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'dark-green' : _ref$color,
+    restProps = _objectWithoutProperties(_ref, _excluded$S);
+  return jsxRuntime.jsx("span", _objectSpread$X(_objectSpread$X({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-badge', "amsterdam-badge--".concat(color), className),
+    children: label
+  }));
+});
+Badge.displayName = 'Badge';
+
+var _excluded$R = ["children", "className"];
+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), !0).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 TableBody = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$R);
+  return jsxRuntime.jsx("tbody", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__body', className),
+    children: children
+  }));
+});
+TableBody.displayName = 'TableBody';
+
+var _excluded$Q = ["children", "className"];
+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), !0).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 TableCaption = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$Q);
+  return jsxRuntime.jsx("caption", _objectSpread$V(_objectSpread$V({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__caption', className),
+    children: children
+  }));
+});
+TableCaption.displayName = 'TableCaption';
+
+var _excluded$P = ["children", "className"];
+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), !0).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 TableCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$P);
+  return jsxRuntime.jsx("td", _objectSpread$U(_objectSpread$U({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__cell', className),
+    children: children
+  }));
+});
+TableCell.displayName = 'TableCell';
+
+var _excluded$O = ["children", "className"];
+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), !0).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 TableFooter = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$O);
+  return jsxRuntime.jsx("tfoot", _objectSpread$T(_objectSpread$T({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__footer', className),
+    children: children
+  }));
+});
+TableFooter.displayName = 'TableFooter';
+
+var _excluded$N = ["children", "className"];
+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), !0).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 TableHeader = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$N);
+  return jsxRuntime.jsx("thead", _objectSpread$S(_objectSpread$S({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__header', className),
+    children: children
+  }));
+});
+TableHeader.displayName = 'TableHeader';
+
+var _excluded$M = ["children", "className"];
+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), !0).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 TableHeaderCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$M);
+  return jsxRuntime.jsx("th", _objectSpread$R(_objectSpread$R({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__header-cell', className),
+    children: children
+  }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+var _excluded$L = ["children", "className"];
+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), !0).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 TableRow = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$L);
+  return jsxRuntime.jsx("tr", _objectSpread$Q(_objectSpread$Q({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-table__row', className),
+    children: children
+  }));
+});
+TableRow.displayName = 'TableRow';
+
+var _excluded$K = ["children", "className"];
+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), !0).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 Table = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$K);
+  return jsxRuntime.jsx("div", {
+    className: "amsterdam-table",
+    children: jsxRuntime.jsx("table", _objectSpread$P(_objectSpread$P({}, restProps), {}, {
+      ref: ref,
+      className: clsx('amsterdam-table__table', className),
+      children: children
+    }))
+  });
+});
+Table.Body = TableBody;
+Table.Caption = TableCaption;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+Table.Header = TableHeader;
+Table.HeaderCell = TableHeaderCell;
+Table.Row = TableRow;
+Table.displayName = 'Table';
+Table.Body.displayName = 'Table.Body';
+Table.Caption.displayName = 'Table.Caption';
+Table.Cell.displayName = 'Table.Cell';
+Table.Footer.displayName = 'Table.Footer';
+Table.Header.displayName = 'Table.Header';
+Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Row.displayName = 'Table.Row';
+
+var _excluded$J = ["children", "className"],
+  _excluded2 = ["children", "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), !0).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 MegaMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$J);
+  return jsxRuntime.jsx("div", _objectSpread$O(_objectSpread$O({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-mega-menu', className),
+    children: children
+  }));
+});
+var MegaMenuListCategory = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
+  return jsxRuntime.jsx("div", _objectSpread$O(_objectSpread$O({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-mega-menu__list-wrapper', className),
+    children: children
+  }));
+});
+MegaMenu.displayName = 'MegaMenu';
+MegaMenuListCategory.displayName = 'MegaMenu.ListCategory';
+MegaMenu.ListCategory = MegaMenuListCategory;
+
+var _excluded$I = ["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), !0).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; }
+var VisuallyHidden = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$I);
+  return jsxRuntime.jsx("div", _objectSpread$N(_objectSpread$N({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-visually-hidden', className),
+    children: children
+  }));
+});
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+var _excluded$H = ["className", "label", "onBackground", "size", "svg"];
+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), !0).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 IconButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    onBackground = _ref.onBackground,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'level-5' : _ref$size,
+    _ref$svg = _ref.svg,
+    svg = _ref$svg === void 0 ? designSystemReactIcons.CloseIcon : _ref$svg,
+    restProps = _objectWithoutProperties(_ref, _excluded$H);
+  return jsxRuntime.jsxs("button", _objectSpread$M(_objectSpread$M({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-icon-button', onBackground === 'light' && 'amsterdam-icon-button--on-background-light', onBackground === 'dark' && 'amsterdam-icon-button--on-background-dark', className),
+    children: [jsxRuntime.jsx(VisuallyHidden, {
+      children: label
+    }), jsxRuntime.jsx(Icon, {
+      svg: svg,
+      size: size,
+      square: true
+    })]
+  }));
+});
+IconButton.displayName = 'IconButton';
+
+var _excluded$G = ["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), !0).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 SkipLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$A);
-  return jsxRuntime.jsx("a", _objectSpread$F(_objectSpread$F({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$G);
+  return jsxRuntime.jsx("a", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-skip-link', 'amsterdam-visually-hidden', className),
     children: children
@@ -27,14 +317,14 @@ var SkipLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 SkipLink.displayName = 'SkipLink';
 
-var _excluded$z = ["children", "className"];
-function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = 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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$F = ["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), !0).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; }
 var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$z);
-  return jsxRuntime.jsx("div", _objectSpread$E(_objectSpread$E({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$F);
+  return jsxRuntime.jsx("div", _objectSpread$K(_objectSpread$K({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-overlap', className),
     children: children
@@ -42,9 +332,9 @@ var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Overlap.displayName = 'Overlap';
 
-var _excluded$y = ["children", "className", "inverseColor", "level", "size"];
-function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$E = ["children", "className", "inverseColor", "level", "size"];
+function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getHeadingElement(level) {
   switch (level) {
     case 2:
@@ -64,10 +354,10 @@ var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$level = _ref.level,
     level = _ref$level === void 0 ? 1 : _ref$level,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$y);
+    restProps = _objectWithoutProperties(_ref, _excluded$E);
   var HeadingX = getHeadingElement(level);
   var sizeOrLevel = size ? size.split('-')[1] : level;
-  return jsxRuntime.jsx(HeadingX, _objectSpread$D(_objectSpread$D({
+  return jsxRuntime.jsx(HeadingX, _objectSpread$J(_objectSpread$J({
     ref: ref,
     className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
   }, restProps), {}, {
@@ -76,10 +366,10 @@ var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Heading.displayName = 'Heading';
 
-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), !0).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; }
+function ownKeys$I(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$I(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$C(_objectSpread$C({
+  return jsxRuntime.jsxs("svg", _objectSpread$I(_objectSpread$I({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -100,10 +390,10 @@ var LogoAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoAmsterdam.displayName = 'LogoAmsterdam';
 
-function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoGgdAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$B(_objectSpread$B({
+  return jsxRuntime.jsxs("svg", _objectSpread$H(_objectSpread$H({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -128,10 +418,10 @@ var LogoGgdAmsterdam = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoGgdAmsterdam.displayName = 'LogoGgdAmsterdam';
 
-function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoStadsarchief = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$A(_objectSpread$A({
+  return jsxRuntime.jsxs("svg", _objectSpread$G(_objectSpread$G({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -156,10 +446,10 @@ var LogoStadsarchief = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoStadsarchief.displayName = 'LogoStadsarchief';
 
-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), !0).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; }
+function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoStadsbankVanLening = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$z(_objectSpread$z({
+  return jsxRuntime.jsxs("svg", _objectSpread$F(_objectSpread$F({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -184,10 +474,10 @@ var LogoStadsbankVanLening = /*#__PURE__*/react.forwardRef(function (props, ref)
 });
 LogoStadsbankVanLening.displayName = 'LogoStadsbankVanLening';
 
-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), !0).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; }
+function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = 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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoVgaVerzekeringen = /*#__PURE__*/react.forwardRef(function (props, ref) {
-  return jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
+  return jsxRuntime.jsxs("svg", _objectSpread$E(_objectSpread$E({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -212,9 +502,9 @@ var LogoVgaVerzekeringen = /*#__PURE__*/react.forwardRef(function (props, ref) {
 });
 LogoVgaVerzekeringen.displayName = 'LogoVgaVerzekeringen';
 
-var _excluded$x = ["brand", "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), !0).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$D = ["brand", "className"];
+function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var logoConfig = {
   amsterdam: LogoAmsterdam,
   'ggd-amsterdam': LogoGgdAmsterdam,
@@ -226,33 +516,18 @@ var Logo = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var _ref$brand = _ref.brand,
     brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$x);
+    restProps = _objectWithoutProperties(_ref, _excluded$D);
   var LogoComponent = logoConfig[brand];
-  return jsxRuntime.jsx(LogoComponent, _objectSpread$x(_objectSpread$x({}, restProps), {}, {
+  return jsxRuntime.jsx(LogoComponent, _objectSpread$D(_objectSpread$D({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-logo', className)
   }));
 });
 Logo.displayName = 'Logo';
 
-var _excluded$w = ["children", "className"];
-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), !0).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 VisuallyHidden = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$w);
-  return jsxRuntime.jsx("div", _objectSpread$w(_objectSpread$w({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-visually-hidden', className),
-    children: children
-  }));
-});
-VisuallyHidden.displayName = 'VisuallyHidden';
-
-var _excluded$v = ["className", "logoBrand", "logoLink", "logoLinkTitle", "title", "links", "menu"];
-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), !0).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$C = ["className", "logoBrand", "logoLink", "logoLinkTitle", "title", "links", "menu"];
+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), !0).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; }
 var Header = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$logoBrand = _ref.logoBrand,
@@ -264,9 +539,9 @@ var Header = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     title = _ref.title,
     links = _ref.links,
     menu = _ref.menu,
-    restProps = _objectWithoutProperties(_ref, _excluded$v);
+    restProps = _objectWithoutProperties(_ref, _excluded$C);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: jsxRuntime.jsxs("header", _objectSpread$v(_objectSpread$v({}, restProps), {}, {
+    children: jsxRuntime.jsxs("header", _objectSpread$C(_objectSpread$C({}, restProps), {}, {
       ref: ref,
       className: clsx('amsterdam-header', className),
       children: [jsxRuntime.jsxs("a", {
@@ -297,14 +572,14 @@ var Header = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Header.displayName = 'Header';
 
-var _excluded$u = ["children", "className"];
-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), !0).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$B = ["children", "className"];
+function ownKeys$B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Mark = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$u);
-  return jsxRuntime.jsx("mark", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$B);
+  return jsxRuntime.jsx("mark", _objectSpread$B(_objectSpread$B({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-mark', className),
     children: children
@@ -312,13 +587,13 @@ var Mark = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Mark.displayName = 'Mark';
 
-var _excluded$t = ["className"];
-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), !0).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$A = ["className"];
+function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$t);
-  return jsxRuntime.jsx("input", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$A);
+  return jsxRuntime.jsx("input", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
     className: clsx('amsterdam-text-input', className),
     ref: ref,
     type: "text"
@@ -326,52 +601,36 @@ var TextInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 TextInput.displayName = 'TextInput';
 
-var _excluded$s = ["className", "size", "svg"];
-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), !0).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 Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'level-3' : _ref$size,
-    svg = _ref.svg,
-    otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  return jsxRuntime.jsx("span", _objectSpread$s(_objectSpread$s({
-    ref: ref,
-    className: clsx('amsterdam-icon', size === 'level-3' && 'amsterdam-icon--size-3', size === 'level-4' && 'amsterdam-icon--size-4', size === 'level-5' && 'amsterdam-icon--size-5', size === 'level-6' && 'amsterdam-icon--size-6', className)
-  }, otherProps), {}, {
-    children: svg()
-  }));
-});
-Icon.displayName = 'Icon';
-
-var _excluded$r = ["className"];
-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), !0).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 _excluded$z = ["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), !0).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; }
 // TODO: replace this with IconButton when that's done
+// TODO: discuss if IconButton is the right component to replace this
 var SearchFieldButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$r);
-  return jsxRuntime.jsxs("button", _objectSpread$r(_objectSpread$r({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$z);
+  return jsxRuntime.jsxs("button", _objectSpread$z(_objectSpread$z({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-search-field__button', className),
     children: [jsxRuntime.jsx(VisuallyHidden, {
       children: "Zoeken"
     }), jsxRuntime.jsx(Icon, {
       svg: designSystemReactIcons.SearchIcon,
-      size: "level-6"
+      size: "level-6",
+      square: true
     })]
   }));
 });
 SearchFieldButton.displayName = 'SearchFieldButton';
 
-var _excluded$q = ["className", "label"];
-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), !0).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 _excluded$y = ["className", "label"];
+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), !0).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 SearchFieldInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? 'Zoeken' : _ref$label,
-    restProps = _objectWithoutProperties(_ref, _excluded$q);
+    restProps = _objectWithoutProperties(_ref, _excluded$y);
   var id = react.useId();
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("label", {
@@ -379,7 +638,7 @@ var SearchFieldInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       children: jsxRuntime.jsx(VisuallyHidden, {
         children: label
       })
-    }), jsxRuntime.jsx("input", _objectSpread$q(_objectSpread$q({}, restProps), {}, {
+    }), jsxRuntime.jsx("input", _objectSpread$y(_objectSpread$y({}, restProps), {}, {
       autoComplete: "off",
       className: clsx('amsterdam-search-field__input', className),
       enterKeyHint: "search",
@@ -392,14 +651,14 @@ var SearchFieldInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 SearchFieldInput.displayName = 'SearchFieldInput';
 
-var _excluded$p = ["children", "className"];
-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), !0).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 _excluded$x = ["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), !0).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 SearchField = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$p);
-  return jsxRuntime.jsx("form", _objectSpread$p(_objectSpread$p({
+    restProps = _objectWithoutProperties(_ref, _excluded$x);
+  return jsxRuntime.jsx("form", _objectSpread$x(_objectSpread$x({
     role: "search"
   }, restProps), {}, {
     ref: ref,
@@ -413,32 +672,16 @@ SearchField.displayName = 'SearchField';
 SearchField.Input.displayName = 'SearchField.Input';
 SearchField.Button.displayName = 'SearchField.Button';
 
-var _excluded$o = ["children", "className", "title", "actions"];
-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), !0).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; }
-// TODO: Replace with ActionButton
-var DialogClose = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return jsxRuntime.jsxs("button", _objectSpread$o(_objectSpread$o({
-    ref: ref,
-    className: "amsterdam-dialog__close",
-    formNoValidate: true
-  }, restProps), {}, {
-    children: [jsxRuntime.jsx(VisuallyHidden, {
-      children: "Sluiten"
-    }), jsxRuntime.jsx(Icon, {
-      svg: designSystemReactIcons.CloseIcon,
-      size: "level-5"
-    })]
-  }));
-});
-var Dialog = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    title = _ref2.title,
-    actions = _ref2.actions,
-    restProps = _objectWithoutProperties(_ref2, _excluded$o);
-  return jsxRuntime.jsx("dialog", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
+var _excluded$w = ["children", "className", "title", "actions"];
+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), !0).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 Dialog = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    title = _ref.title,
+    actions = _ref.actions,
+    restProps = _objectWithoutProperties(_ref, _excluded$w);
+  return jsxRuntime.jsx("dialog", _objectSpread$w(_objectSpread$w({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-dialog', className),
     children: jsxRuntime.jsxs("form", {
@@ -449,7 +692,10 @@ var Dialog = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
         children: [jsxRuntime.jsx("span", {
           className: "amsterdam-dialog__title",
           children: title
-        }), jsxRuntime.jsx(DialogClose, {})]
+        }), jsxRuntime.jsx(IconButton, {
+          label: "Sluiten",
+          formNoValidate: true
+        })]
       }), jsxRuntime.jsx("article", {
         className: "amsterdam-dialog__article",
         children: children
@@ -461,26 +707,25 @@ var Dialog = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   }));
 });
 Dialog.displayName = 'Dialog';
-DialogClose.displayName = 'DialogClose';
 
-var _excluded$n = ["className", "cover"];
-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), !0).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; }
+var _excluded$v = ["className", "cover"];
+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), !0).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 Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$cover = _ref.cover,
     cover = _ref$cover === void 0 ? false : _ref$cover,
-    restProps = _objectWithoutProperties(_ref, _excluded$n);
-  return jsxRuntime.jsx("img", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$v);
+  return jsxRuntime.jsx("img", _objectSpread$v(_objectSpread$v({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-image', cover && 'amsterdam-image--cover', className)
   }));
 });
 Image.displayName = 'Image';
 
-var _excluded$m = ["className", "maxVisiblePages", "onPageChange", "page", "totalPages"];
-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), !0).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$u = ["className", "maxVisiblePages", "onPageChange", "page", "totalPages"];
+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), !0).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; }
 /**
  * This returns an array of the range, including spacers
  *
@@ -534,7 +779,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     _ref$page = _ref.page,
     page = _ref$page === void 0 ? 1 : _ref$page,
     totalPages = _ref.totalPages,
-    restProps = _objectWithoutProperties(_ref, _excluded$m);
+    restProps = _objectWithoutProperties(_ref, _excluded$u);
   var _useState = react.useState(page),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
@@ -559,7 +804,7 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   if (totalPages <= 1) {
     return null;
   }
-  return jsxRuntime.jsx("nav", _objectSpread$m(_objectSpread$m({}, restProps), {}, {
+  return jsxRuntime.jsx("nav", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
     className: clsx('amsterdam-pagination', className),
     ref: ref,
     "aria-label": "Paginering",
@@ -613,16 +858,16 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Pagination.displayName = 'Pagination';
 
-var _excluded$l = ["children", "className", "maxWidth"];
-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), !0).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$t = ["children", "className", "maxWidth"];
+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), !0).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 Screen = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 'wide' : _ref$maxWidth,
-    restProps = _objectWithoutProperties(_ref, _excluded$l);
-  return jsxRuntime.jsx("div", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$t);
+  return jsxRuntime.jsx("div", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-screen', "amsterdam-screen--".concat(maxWidth), className),
     children: children
@@ -630,17 +875,17 @@ var Screen = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Screen.displayName = 'Screen';
 
-var _excluded$k = ["className", "id"];
-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), !0).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; }
+var _excluded$s = ["className", "id"];
+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), !0).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 Switch = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     id = _ref.id,
-    restProps = _objectWithoutProperties(_ref, _excluded$k);
+    restProps = _objectWithoutProperties(_ref, _excluded$s);
   var inputId = id || react.useId();
   return jsxRuntime.jsxs("div", {
     className: clsx('amsterdam-switch', className),
-    children: [jsxRuntime.jsx("input", _objectSpread$k(_objectSpread$k({}, restProps), {}, {
+    children: [jsxRuntime.jsx("input", _objectSpread$s(_objectSpread$s({}, restProps), {}, {
       className: "amsterdam-switch__input",
       id: inputId,
       ref: ref,
@@ -654,18 +899,18 @@ var Switch = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$j = ["children", "className", "as", "color"];
-function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$r = ["children", "className", "as", "color"];
+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), !0).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 Spotlight = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$as = _ref.as,
     Tag = _ref$as === void 0 ? 'div' : _ref$as,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'blue' : _ref$color,
-    restProps = _objectWithoutProperties(_ref, _excluded$j);
-  return jsxRuntime.jsx(Tag, _objectSpread$j(_objectSpread$j({}, restProps), {}, {
+    color = _ref$color === void 0 ? 'dark-blue' : _ref$color,
+    restProps = _objectWithoutProperties(_ref, _excluded$r);
+  return jsxRuntime.jsx(Tag, _objectSpread$r(_objectSpread$r({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-spotlight', "amsterdam-spotlight--".concat(color), className),
     children: children
@@ -673,16 +918,16 @@ var Spotlight = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Spotlight.displayName = 'Spotlight';
 
-var _excluded$i = ["children", "className", "inverseColor", "size"];
-function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$q = ["children", "className", "inverseColor", "size"];
+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), !0).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 Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
     size = _ref.size,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
-  return jsxRuntime.jsx("p", _objectSpread$i(_objectSpread$i({
+    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+  return jsxRuntime.jsx("p", _objectSpread$q(_objectSpread$q({
     ref: ref,
     className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph--".concat(size), inverseColor && 'amsterdam-paragraph--inverse-color', className)
   }, otherProps), {}, {
@@ -691,17 +936,15 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$h = ["children", "className", "tagline"],
-  _excluded2$6 = ["children", "className"],
-  _excluded3$1 = ["children", "className"];
-function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$p = ["children", "className", "tagline"];
+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), !0).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 CardHeadingGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     tagline = _ref.tagline,
-    restProps = _objectWithoutProperties(_ref, _excluded$h);
-  return jsxRuntime.jsxs("hgroup", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$p);
+  return jsxRuntime.jsxs("hgroup", _objectSpread$p(_objectSpread$p({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__heading-group', className),
     children: [children, jsxRuntime.jsx(Paragraph, {
@@ -711,22 +954,30 @@ var CardHeadingGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 CardHeadingGroup.displayName = 'CardHeadingGroup';
-var CardLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    otherProps = _objectWithoutProperties(_ref2, _excluded2$6);
-  return jsxRuntime.jsx("a", _objectSpread$h(_objectSpread$h({}, otherProps), {}, {
+
+var _excluded$o = ["children", "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), !0).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 CardLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
+  return jsxRuntime.jsx("a", _objectSpread$o(_objectSpread$o({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__link', className),
     children: children
   }));
 });
 CardLink.displayName = 'CardLink';
-var Card = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded3$1);
-  return jsxRuntime.jsx("article", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
+
+var _excluded$n = ["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), !0).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; }
+var Card = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$n);
+  return jsxRuntime.jsx("article", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card', className),
     children: children
@@ -738,79 +989,63 @@ Card.displayName = 'Card';
 Card.HeadingGroup.displayName = 'Card.HeadingGroup';
 Card.Link.displayName = 'Card.Link';
 
-var _excluded$g = ["className", "size"],
-  _excluded2$5 = ["children", "className", "title", "severity", "closeable", "icon", "onClose"];
-function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var AlertClose = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$g);
-  return jsxRuntime.jsxs("button", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-alert__close', className),
-    children: [jsxRuntime.jsx(VisuallyHidden, {
-      children: "Sluiten"
-    }), jsxRuntime.jsx(Icon, {
-      svg: designSystemReactIcons.CloseIcon,
-      size: size
-    })]
-  }));
-});
+var _excluded$m = ["children", "className", "headingLevel", "title", "severity", "closeable", "onClose"];
+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), !0).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 iconSvgBySeverity = {
   error: designSystemReactIcons.AlertIcon,
-  success: designSystemReactIcons.CheckmarkIcon
+  info: designSystemReactIcons.InfoIcon,
+  success: designSystemReactIcons.CheckmarkIcon,
+  warning: designSystemReactIcons.AlertIcon
 };
-var Alert = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    title = _ref2.title,
-    severity = _ref2.severity,
-    closeable = _ref2.closeable,
-    icon = _ref2.icon,
-    onClose = _ref2.onClose,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$5);
-  var alertSize = title ? 'level-5' : 'level-6';
-  var alertIcon = react.useMemo(function () {
-    if (!icon || !severity) {
-      return null;
-    }
-    return jsxRuntime.jsx(Icon, {
-      size: alertSize,
-      svg: iconSvgBySeverity[severity]
-    });
-  }, [icon, severity, alertSize]);
-  return jsxRuntime.jsxs("div", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
+var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
+    title = _ref.title,
+    _ref$severity = _ref.severity,
+    severity = _ref$severity === void 0 ? 'warning' : _ref$severity,
+    closeable = _ref.closeable,
+    onClose = _ref.onClose,
+    restProps = _objectWithoutProperties(_ref, _excluded$m);
+  var alertSize = title ? 'level-4' : 'level-5';
+  var Element = title ? 'section' : 'div';
+  return jsxRuntime.jsxs(Element, _objectSpread$m(_objectSpread$m({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert', severity && "amsterdam-alert--".concat(severity), className),
-    children: [alertIcon && jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
       className: "amsterdam-alert__icon",
-      children: alertIcon
+      children: jsxRuntime.jsx(Icon, {
+        size: alertSize,
+        svg: iconSvgBySeverity[severity]
+      })
     }), jsxRuntime.jsxs("div", {
       className: "amsterdam-alert__content",
-      children: [title && jsxRuntime.jsx("span", {
-        className: "amsterdam-alert__title",
+      children: [title && jsxRuntime.jsx(Heading, {
+        level: headingLevel,
+        size: "level-4",
         children: title
       }), children]
-    }), closeable && jsxRuntime.jsx(AlertClose, {
+    }), closeable && jsxRuntime.jsx(IconButton, {
+      label: "Sluiten",
       size: alertSize,
       onClick: onClose
     })]
   }));
 });
 Alert.displayName = 'Alert';
-AlertClose.displayName = 'AlertClose';
 
-var _excluded$f = ["children", "className", "ratio"];
-function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$l = ["children", "className", "ratio"];
+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), !0).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 AspectRatio = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$ratio = _ref.ratio,
     ratio = _ref$ratio === void 0 ? 'square' : _ref$ratio,
-    restProps = _objectWithoutProperties(_ref, _excluded$f);
-  return jsxRuntime.jsx("div", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$l);
+  return jsxRuntime.jsx("div", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-aspect-ratio', "amsterdam-aspect-ratio--".concat(ratio), className),
     children: children
@@ -818,39 +1053,45 @@ var AspectRatio = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 AspectRatio.displayName = 'AspectRatio';
 
-var _excluded$e = ["children", "className"],
-  _excluded2$4 = ["children", "className"],
-  _excluded3 = ["children", "className"];
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = 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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FooterTop = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var _excluded$k = ["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), !0).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; }
+var FooterBottom = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$e);
-  return jsxRuntime.jsx(Spotlight, _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-    color: "blue",
+    restProps = _objectWithoutProperties(_ref, _excluded$k);
+  return jsxRuntime.jsx("div", _objectSpread$k(_objectSpread$k({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-footer__top', className),
+    className: clsx('amsterdam-footer__bottom', className),
     children: children
   }));
 });
-FooterTop.displayName = 'FooterTop';
-var FooterBottom = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$4);
-  return jsxRuntime.jsx("div", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+FooterBottom.displayName = 'FooterBottom';
+
+var _excluded$j = ["children", "className"];
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FooterTop = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
+  return jsxRuntime.jsx(Spotlight, _objectSpread$j(_objectSpread$j({}, restProps), {}, {
+    color: "dark-blue",
     ref: ref,
-    className: clsx('amsterdam-footer__bottom', className),
+    className: clsx('amsterdam-footer__top', className),
     children: children
   }));
 });
-FooterBottom.displayName = 'FooterBottom';
-var Footer = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded3);
-  return jsxRuntime.jsx("footer", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+FooterTop.displayName = 'FooterTop';
+
+var _excluded$i = ["children", "className"];
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Footer = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$i);
+  return jsxRuntime.jsx("footer", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer', className),
     children: children
@@ -862,30 +1103,18 @@ Footer.displayName = 'Footer';
 Footer.Top.displayName = 'Footer.Top';
 Footer.Bottom.displayName = 'Footer.Bottom';
 
-var _excluded$d = ["alignEnd", "children", "className"],
-  _excluded2$3 = ["children", "icon"];
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var PageMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var alignEnd = _ref.alignEnd,
-    children = _ref.children,
+var _excluded$h = ["children", "className", "icon"];
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PageMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$d);
-  return jsxRuntime.jsx("ul", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
-    className: clsx('amsterdam-page-menu', alignEnd && "amsterdam-page-menu--align-end", className),
-    ref: ref,
-    children: children
-  }));
-});
-var PageMenuLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    icon = _ref2.icon,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$3);
+    icon = _ref.icon,
+    restProps = _objectWithoutProperties(_ref, _excluded$h);
   return jsxRuntime.jsx("li", {
-    className: "amsterdam-page-menu__item",
-    children: jsxRuntime.jsxs("a", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    children: jsxRuntime.jsxs("a", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
       ref: ref,
-      className: "amsterdam-page-menu__link",
+      className: clsx('amsterdam-page-menu__link', className),
       children: [children, icon && jsxRuntime.jsx(Icon, {
         svg: icon,
         size: "level-6"
@@ -893,19 +1122,35 @@ var PageMenuLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     }))
   });
 });
+PageMenuLink.displayName = 'PageMenuLink';
+
+var _excluded$g = ["alignEnd", "children", "className"];
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PageMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var alignEnd = _ref.alignEnd,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$g);
+  return jsxRuntime.jsx("ul", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
+    className: clsx('amsterdam-page-menu', alignEnd && "amsterdam-page-menu--align-end", className),
+    ref: ref,
+    children: children
+  }));
+});
 PageMenu.displayName = 'PageMenu';
-PageMenuLink.displayName = 'PageMenu.Link';
 PageMenu.Link = PageMenuLink;
+PageMenu.Link.displayName = 'PageMenu.Link';
 
-var _excluded$c = ["className", "label", "description"];
-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), !0).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; }
+var _excluded$f = ["className", "label", "description"];
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TopTaskLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     description = _ref.description,
-    restProps = _objectWithoutProperties(_ref, _excluded$c);
-  return jsxRuntime.jsxs("a", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$f);
+  return jsxRuntime.jsxs("a", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-top-task-link', className),
     "aria-label": "".concat(label, ", ").concat(description),
@@ -920,15 +1165,15 @@ var TopTaskLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 TopTaskLink.displayName = 'TopTaskLink';
 
-var _excluded$b = ["children", "className", "inverseColor"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$e = ["children", "className", "inverseColor"];
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = 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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Blockquote = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$b);
-  return jsxRuntime.jsx("blockquote", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$e);
+  return jsxRuntime.jsx("blockquote", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-blockquote', inverseColor && 'amsterdam-blockquote--inverse-color', className),
     children: children
@@ -936,15 +1181,15 @@ var Blockquote = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Blockquote.displayName = 'Blockquote';
 
-var _excluded$a = ["children", "className", "invalid", "indeterminate"];
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$d = ["children", "className", "invalid", "indeterminate"];
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
     indeterminate = _ref.indeterminate,
-    restProps = _objectWithoutProperties(_ref, _excluded$a);
+    restProps = _objectWithoutProperties(_ref, _excluded$d);
   var id = react.useId();
   var innerRef = react.useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
@@ -962,7 +1207,7 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     // without a containing element
     jsxRuntime.jsxs("div", {
       className: clsx('amsterdam-checkbox', className),
-      children: [jsxRuntime.jsx("input", _objectSpread$a(_objectSpread$a({}, restProps), {}, {
+      children: [jsxRuntime.jsx("input", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
         type: "checkbox",
         className: "amsterdam-checkbox__input",
         ref: innerRef,
@@ -980,15 +1225,15 @@ var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$9 = ["children", "className", "inverseColor"];
-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), !0).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; }
+var _excluded$c = ["children", "className", "inverseColor"];
+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), !0).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; }
 var PageHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$9);
-  return jsxRuntime.jsx("h1", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$c);
+  return jsxRuntime.jsx("h1", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-page-heading', inverseColor && 'amsterdam-page-heading--inverse-color', className),
     children: children
@@ -996,17 +1241,32 @@ var PageHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 PageHeading.displayName = 'PageHeading';
 
-var _excluded$8 = ["children", "markers", "className"],
-  _excluded2$2 = ["children", "className"];
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$b = ["children", "className"];
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var OrderedListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$b);
+  return jsxRuntime.jsx("li", _objectSpread$b(_objectSpread$b({
+    ref: ref,
+    className: clsx('amsterdam-ordered-list__item', className)
+  }, restProps), {}, {
+    children: children
+  }));
+});
+OrderedListItem.displayName = 'OrderedListItem';
+
+var _excluded$a = ["children", "markers", "className"];
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var OrderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$markers = _ref.markers,
     markers = _ref$markers === void 0 ? true : _ref$markers,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$8);
-  return jsxRuntime.jsx("ol", _objectSpread$8(_objectSpread$8({
+    restProps = _objectWithoutProperties(_ref, _excluded$a);
+  return jsxRuntime.jsx("ol", _objectSpread$a(_objectSpread$a({
     ref: ref,
     className: clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)
   }, restProps), {}, {
@@ -1014,29 +1274,37 @@ var OrderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 OrderedList.displayName = 'OrderedList';
-var OrderedListItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$2);
-  return jsxRuntime.jsx("li", _objectSpread$8(_objectSpread$8({
+OrderedList.Item = OrderedListItem;
+
+var _excluded$9 = ["children", "className", "href"];
+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), !0).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; }
+var BreadcrumbItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    href = _ref.href,
+    restProps = _objectWithoutProperties(_ref, _excluded$9);
+  return jsxRuntime.jsx("li", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
+    className: clsx.clsx('amsterdam-breadcrumb__item', className),
     ref: ref,
-    className: clsx('amsterdam-ordered-list__item', className)
-  }, restProps), {}, {
-    children: children
+    children: jsxRuntime.jsx("a", {
+      className: "amsterdam-breadcrumb__link",
+      href: href,
+      children: children
+    })
   }));
 });
-OrderedListItem.displayName = 'OrderedListItem';
-OrderedList.Item = OrderedListItem;
+BreadcrumbItem.displayName = 'BreadcrumbItem';
 
-var _excluded$7 = ["children"],
-  _excluded2$1 = ["children", "href"];
-function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$8 = ["children", "className"];
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Breadcrumb = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded$7);
-  return jsxRuntime.jsx("nav", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: "amsterdam-breadcrumb",
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$8);
+  return jsxRuntime.jsx("nav", _objectSpread$8(_objectSpread$8({}, restProps), {}, {
+    className: clsx.clsx('amsterdam-breadcrumb', className),
     ref: ref,
     children: jsxRuntime.jsx("ol", {
       className: "amsterdam-breadcrumb__list",
@@ -1045,26 +1313,12 @@ var Breadcrumb = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 Breadcrumb.displayName = 'Breadcrumb';
-var BreadcrumbItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    href = _ref2.href,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$1);
-  return jsxRuntime.jsx("li", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: "amsterdam-breadcrumb__item",
-    ref: ref,
-    children: jsxRuntime.jsx("a", {
-      className: "amsterdam-breadcrumb__link",
-      href: href,
-      children: children
-    })
-  }));
-});
-BreadcrumbItem.displayName = 'BreadcrumbItem';
 Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Item.displayName = 'Breadcrumb.Item';
 
-var _excluded$6 = ["children", "variant", "icon", "onBackground", "className"];
-function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$7 = ["children", "variant", "icon", "onBackground", "className"];
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -1072,8 +1326,8 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     icon = _ref.icon,
     onBackground = _ref.onBackground,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded$6);
-  return jsxRuntime.jsxs("a", _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
+    otherProps = _objectWithoutProperties(_ref, _excluded$7);
+  return jsxRuntime.jsxs("a", _objectSpread$7(_objectSpread$7({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-link', {
       'amsterdam-link--standalone': variant === 'standalone',
@@ -1091,9 +1345,9 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$5 = ["children", "disabled", "variant"];
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$6 = ["children", "disabled", "variant"];
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getAppearance(variant) {
   switch (variant) {
     case 'secondary':
@@ -1109,8 +1363,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutProperties(_ref, _excluded$5);
-  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$6);
+  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$6(_objectSpread$6({}, restProps), {}, {
     appearance: getAppearance(variant),
     ref: ref,
     disabled: disabled,
@@ -1120,23 +1374,38 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
+var _excluded$5 = ["children", "className"];
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
+  return jsxRuntime.jsx("label", _objectSpread$5(_objectSpread$5({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-form-label', className),
+    children: children
+  }));
+});
+FormLabel.displayName = 'FormLabel';
+
 var _excluded$4 = ["children", "className"];
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$4);
-  return jsxRuntime.jsx("label", _objectSpread$4(_objectSpread$4({}, restProps), {}, {
+  return jsxRuntime.jsx("li", _objectSpread$4(_objectSpread$4({
     ref: ref,
-    className: clsx('amsterdam-form-label', className),
+    className: clsx('amsterdam-unordered-list__item', className)
+  }, restProps), {}, {
     children: children
   }));
 });
-FormLabel.displayName = 'FormLabel';
+UnorderedListItem.displayName = 'UnorderedListItem';
 
-var _excluded$3 = ["children", "markers", "className"],
-  _excluded2 = ["children", "className"];
+var _excluded$3 = ["children", "markers", "className"];
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UnorderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
@@ -1153,18 +1422,6 @@ var UnorderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   }));
 });
 UnorderedList.displayName = 'UnorderedList';
-var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2);
-  return jsxRuntime.jsx("li", _objectSpread$3(_objectSpread$3({
-    ref: ref,
-    className: clsx('amsterdam-unordered-list__item', className)
-  }, restProps), {}, {
-    children: children
-  }));
-});
-UnorderedListItem.displayName = 'UnorderedListItem';
 UnorderedList.Item = UnorderedListItem;
 
 var defaultValues = {
@@ -1421,6 +1678,7 @@ Grid.displayName = 'Grid';
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AspectRatio = AspectRatio;
+exports.Badge = Badge;
 exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
@@ -1433,10 +1691,13 @@ exports.Grid = Grid;
 exports.Header = Header;
 exports.Heading = Heading;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.Image = Image;
 exports.Link = Link;
+exports.LinkList = LinkList;
 exports.Logo = Logo;
 exports.Mark = Mark;
+exports.MegaMenu = MegaMenu;
 exports.OrderedList = OrderedList;
 exports.Overlap = Overlap;
 exports.PageHeading = PageHeading;
@@ -1448,6 +1709,7 @@ exports.SearchField = SearchField;
 exports.SkipLink = SkipLink;
 exports.Spotlight = Spotlight;
 exports.Switch = Switch;
+exports.Table = Table;
 exports.TextInput = TextInput;
 exports.TopTaskLink = TopTaskLink;
 exports.UnorderedList = UnorderedList;