@amsterdam/design-system-react 0.2.0 → 0.4.0

package/dist/index.esm.js

@@ -1,19 +1,373 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { forwardRef, useState, useMemo, useId, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
-import { CloseIcon, ChevronLeftIcon, ChevronRightIcon, AlertIcon, CheckmarkIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx, { clsx as clsx$1 } from 'clsx';
+import { forwardRef, useId, useState, useMemo, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
+import { ChevronRightIcon, CloseIcon, SearchIcon, ChevronLeftIcon, AlertIcon, InfoIcon, CheckmarkIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Button as Button$1 } from '@utrecht/component-library-react';
 
-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$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__*/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 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__*/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 jsx("li", {
+    children: 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: [jsx(Icon, {
+        svg: icon !== null && icon !== void 0 ? icon : 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$T);
+  return 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__*/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 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$R);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$Q);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$P);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$O);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$N);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$M);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$L);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$K);
+  return jsx("div", {
+    className: "amsterdam-table",
+    children: 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$J);
+  return jsx("div", _objectSpread$O(_objectSpread$O({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-mega-menu', className),
+    children: children
+  }));
+});
+var MegaMenuListCategory = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
+  return 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$I);
+  return 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__*/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 ? CloseIcon : _ref$svg,
+    restProps = _objectWithoutProperties(_ref, _excluded$H);
+  return 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: [jsx(VisuallyHidden, {
+      children: label
+    }), 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$G);
+  return jsx("a", _objectSpread$L(_objectSpread$L({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-skip-link', 'amsterdam-visually-hidden', className),
+    children: children
+  }));
+});
+SkipLink.displayName = 'SkipLink';
+
+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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$F);
+  return jsx("div", _objectSpread$K(_objectSpread$K({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-overlap', className),
+    children: children
+  }));
+});
+Overlap.displayName = 'Overlap';
+
+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:
+      return 'h2';
+    case 3:
+      return 'h3';
+    case 4:
+      return 'h4';
+    default:
+      return 'h1';
+  }
+}
+var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    inverseColor = _ref.inverseColor,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 1 : _ref$level,
+    size = _ref.size,
+    restProps = _objectWithoutProperties(_ref, _excluded$E);
+  var HeadingX = getHeadingElement(level);
+  var sizeOrLevel = size ? size.split('-')[1] : level;
+  return jsx(HeadingX, _objectSpread$J(_objectSpread$J({
+    ref: ref,
+    className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
+  }, restProps), {}, {
+    children: children
+  }));
+});
+Heading.displayName = 'Heading';
+
+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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$x(_objectSpread$x({
+  return jsxs("svg", _objectSpread$I(_objectSpread$I({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -34,10 +388,10 @@ var LogoAmsterdam = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 LogoAmsterdam.displayName = 'LogoAmsterdam';
 
-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; }
+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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$w(_objectSpread$w({
+  return jsxs("svg", _objectSpread$H(_objectSpread$H({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -62,10 +416,10 @@ var LogoGgdAmsterdam = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 LogoGgdAmsterdam.displayName = 'LogoGgdAmsterdam';
 
-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; }
+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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$v(_objectSpread$v({
+  return jsxs("svg", _objectSpread$G(_objectSpread$G({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -90,10 +444,10 @@ var LogoStadsarchief = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 LogoStadsarchief.displayName = 'LogoStadsarchief';
 
-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; }
+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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$u(_objectSpread$u({
+  return jsxs("svg", _objectSpread$F(_objectSpread$F({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -118,10 +472,10 @@ var LogoStadsbankVanLening = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 LogoStadsbankVanLening.displayName = 'LogoStadsbankVanLening';
 
-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; }
+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__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$t(_objectSpread$t({
+  return jsxs("svg", _objectSpread$E(_objectSpread$E({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -146,9 +500,9 @@ var LogoVgaVerzekeringen = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 LogoVgaVerzekeringen.displayName = 'LogoVgaVerzekeringen';
 
-var _excluded$s = ["brand", "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 _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,
@@ -160,74 +514,172 @@ var Logo = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$brand = _ref.brand,
     brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$s);
+    restProps = _objectWithoutProperties(_ref, _excluded$D);
   var LogoComponent = logoConfig[brand];
-  return jsx(LogoComponent, _objectSpread$s(_objectSpread$s({}, restProps), {}, {
+  return jsx(LogoComponent, _objectSpread$D(_objectSpread$D({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-logo', className)
   }));
 });
 Logo.displayName = 'Logo';
 
-var _excluded$r = ["className", "size", "svg"];
-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 Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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__*/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$r);
-  return jsx("span", _objectSpread$r(_objectSpread$r({
-    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', size === 'level-7' && 'amsterdam-icon--size-7', className)
-  }, otherProps), {}, {
-    children: svg()
-  }));
+    _ref$logoBrand = _ref.logoBrand,
+    logoBrand = _ref$logoBrand === void 0 ? 'amsterdam' : _ref$logoBrand,
+    _ref$logoLink = _ref.logoLink,
+    logoLink = _ref$logoLink === void 0 ? '/' : _ref$logoLink,
+    _ref$logoLinkTitle = _ref.logoLinkTitle,
+    logoLinkTitle = _ref$logoLinkTitle === void 0 ? 'Ga naar de homepage' : _ref$logoLinkTitle,
+    title = _ref.title,
+    links = _ref.links,
+    menu = _ref.menu,
+    restProps = _objectWithoutProperties(_ref, _excluded$C);
+  return jsx(Fragment, {
+    children: jsxs("header", _objectSpread$C(_objectSpread$C({}, restProps), {}, {
+      ref: ref,
+      className: clsx('amsterdam-header', className),
+      children: [jsxs("a", {
+        href: logoLink,
+        className: "amsterdam-header__logo",
+        children: [jsx(VisuallyHidden, {
+          children: logoLinkTitle
+        }), jsx(Logo, {
+          brand: logoBrand
+        })]
+      }), links && jsx("div", {
+        className: "amsterdam-header__links",
+        children: links
+      }), menu && jsx("div", {
+        className: "amsterdam-header__menu",
+        children: menu
+      }), title && jsx("div", {
+        className: "amsterdam-header__title",
+        children: jsx(Heading, {
+          level: 1,
+          size: "level-3",
+          className: "amsterdam-header__title-heading",
+          children: title
+        })
+      })]
+    }))
+  });
 });
-Icon.displayName = 'Icon';
+Header.displayName = 'Header';
 
-var _excluded$q = ["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 VisuallyHidden = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$q);
-  return jsx("div", _objectSpread$q(_objectSpread$q({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$B);
+  return jsx("mark", _objectSpread$B(_objectSpread$B({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-visually-hidden', className),
+    className: clsx('amsterdam-mark', className),
     children: children
   }));
 });
-VisuallyHidden.displayName = 'VisuallyHidden';
+Mark.displayName = 'Mark';
 
-var _excluded$p = ["children", "className", "title", "actions"];
-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; }
-// TODO: Replace with ActionButton
-var DialogClose = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return jsxs("button", _objectSpread$p(_objectSpread$p({
+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__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$A);
+  return jsx("input", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
+    className: clsx('amsterdam-text-input', className),
     ref: ref,
-    className: "amsterdam-dialog__close",
-    formNoValidate: true
-  }, restProps), {}, {
+    type: "text"
+  }));
+});
+TextInput.displayName = 'TextInput';
+
+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__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$z);
+  return jsxs("button", _objectSpread$z(_objectSpread$z({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-search-field__button', className),
     children: [jsx(VisuallyHidden, {
-      children: "Sluiten"
+      children: "Zoeken"
     }), jsx(Icon, {
-      svg: CloseIcon,
-      size: "level-5"
+      svg: SearchIcon,
+      size: "level-6",
+      square: true
     })]
   }));
 });
-var Dialog = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    title = _ref2.title,
-    actions = _ref2.actions,
-    restProps = _objectWithoutProperties(_ref2, _excluded$p);
-  return jsx("dialog", _objectSpread$p(_objectSpread$p({}, restProps), {}, {
+SearchFieldButton.displayName = 'SearchFieldButton';
+
+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__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Zoeken' : _ref$label,
+    restProps = _objectWithoutProperties(_ref, _excluded$y);
+  var id = useId();
+  return jsxs(Fragment, {
+    children: [jsx("label", {
+      htmlFor: id,
+      children: jsx(VisuallyHidden, {
+        children: label
+      })
+    }), jsx("input", _objectSpread$y(_objectSpread$y({}, restProps), {}, {
+      autoComplete: "off",
+      className: clsx('amsterdam-search-field__input', className),
+      enterKeyHint: "search",
+      id: id,
+      ref: ref,
+      spellCheck: "false",
+      type: "search"
+    }))]
+  });
+});
+SearchFieldInput.displayName = 'SearchFieldInput';
+
+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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$x);
+  return jsx("form", _objectSpread$x(_objectSpread$x({
+    role: "search"
+  }, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-search-field', className),
+    children: children
+  }));
+});
+SearchField.Input = SearchFieldInput;
+SearchField.Button = SearchFieldButton;
+SearchField.displayName = 'SearchField';
+SearchField.Input.displayName = 'SearchField.Input';
+SearchField.Button.displayName = 'SearchField.Button';
+
+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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    title = _ref.title,
+    actions = _ref.actions,
+    restProps = _objectWithoutProperties(_ref, _excluded$w);
+  return jsx("dialog", _objectSpread$w(_objectSpread$w({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-dialog', className),
     children: jsxs("form", {
@@ -238,7 +690,10 @@ var Dialog = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         children: [jsx("span", {
           className: "amsterdam-dialog__title",
           children: title
-        }), jsx(DialogClose, {})]
+        }), jsx(IconButton, {
+          label: "Sluiten",
+          formNoValidate: true
+        })]
       }), jsx("article", {
         className: "amsterdam-dialog__article",
         children: children
@@ -250,24 +705,25 @@ var Dialog = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }));
 });
 Dialog.displayName = 'Dialog';
-DialogClose.displayName = 'DialogClose';
 
-var _excluded$o = ["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 _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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$o);
-  return jsx("img", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
+    _ref$cover = _ref.cover,
+    cover = _ref$cover === void 0 ? false : _ref$cover,
+    restProps = _objectWithoutProperties(_ref, _excluded$v);
+  return jsx("img", _objectSpread$v(_objectSpread$v({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-image', className)
+    className: clsx('amsterdam-image', cover && 'amsterdam-image--cover', className)
   }));
 });
 Image.displayName = 'Image';
 
-var _excluded$n = ["className", "maxVisiblePages", "onPageChange", "page", "totalPages"];
-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$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
  *
@@ -321,7 +777,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$page = _ref.page,
     page = _ref$page === void 0 ? 1 : _ref$page,
     totalPages = _ref.totalPages,
-    restProps = _objectWithoutProperties(_ref, _excluded$n);
+    restProps = _objectWithoutProperties(_ref, _excluded$u);
   var _useState = useState(page),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
@@ -346,7 +802,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (totalPages <= 1) {
     return null;
   }
-  return jsx("nav", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
+  return jsx("nav", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
     className: clsx('amsterdam-pagination', className),
     ref: ref,
     "aria-label": "Paginering",
@@ -361,7 +817,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
           type: "button",
           children: [jsx(Icon, {
             svg: ChevronLeftIcon,
-            size: "level-6"
+            size: "level-5"
           }), "vorige"]
         })
       }), range.map(function (pageNumberOrSpacer) {
@@ -391,7 +847,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
           type: "button",
           children: ["volgende", jsx(Icon, {
             svg: ChevronRightIcon,
-            size: "level-6"
+            size: "level-5"
           })]
         })
       })]
@@ -400,16 +856,16 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Pagination.displayName = 'Pagination';
 
-var _excluded$m = ["children", "className", "maxWidth"];
-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$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__*/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$m);
-  return jsx("div", _objectSpread$m(_objectSpread$m({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$t);
+  return jsx("div", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-screen', "amsterdam-screen--".concat(maxWidth), className),
     children: children
@@ -417,17 +873,17 @@ var Screen = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Screen.displayName = 'Screen';
 
-var _excluded$l = ["className", "id"];
-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$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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     id = _ref.id,
-    restProps = _objectWithoutProperties(_ref, _excluded$l);
+    restProps = _objectWithoutProperties(_ref, _excluded$s);
   var inputId = id || useId();
   return jsxs("div", {
     className: clsx('amsterdam-switch', className),
-    children: [jsx("input", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
+    children: [jsx("input", _objectSpread$s(_objectSpread$s({}, restProps), {}, {
       className: "amsterdam-switch__input",
       id: inputId,
       ref: ref,
@@ -441,36 +897,35 @@ var Switch = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$k = ["children", "className", "as", "color"];
-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 Highlight = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'div' : _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$k);
-  var Component = as;
-  return jsx(Component, _objectSpread$k(_objectSpread$k({}, restProps), {}, {
+    color = _ref$color === void 0 ? 'dark-blue' : _ref$color,
+    restProps = _objectWithoutProperties(_ref, _excluded$r);
+  return jsx(Tag, _objectSpread$r(_objectSpread$r({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-highlight', "amsterdam-highlight--".concat(color), className),
+    className: clsx('amsterdam-spotlight', "amsterdam-spotlight--".concat(color), className),
     children: children
   }));
 });
-Highlight.displayName = 'Highlight';
+Spotlight.displayName = 'Spotlight';
 
-var _excluded$j = ["children", "className", "inverseColor", "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; }
+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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
     size = _ref.size,
-    otherProps = _objectWithoutProperties(_ref, _excluded$j);
-  return jsx("p", _objectSpread$j(_objectSpread$j({
+    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+  return jsx("p", _objectSpread$q(_objectSpread$q({
     ref: ref,
     className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph--".concat(size), inverseColor && 'amsterdam-paragraph--inverse-color', className)
   }, otherProps), {}, {
@@ -479,17 +934,15 @@ var Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$i = ["children", "className", "tagline"],
-  _excluded2$6 = ["children", "className"],
-  _excluded3$2 = ["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 _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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     tagline = _ref.tagline,
-    restProps = _objectWithoutProperties(_ref, _excluded$i);
-  return jsxs("hgroup", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$p);
+  return jsxs("hgroup", _objectSpread$p(_objectSpread$p({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__heading-group', className),
     children: [children, jsx(Paragraph, {
@@ -499,22 +952,30 @@ var CardHeadingGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 CardHeadingGroup.displayName = 'CardHeadingGroup';
-var CardLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    otherProps = _objectWithoutProperties(_ref2, _excluded2$6);
-  return jsx("a", _objectSpread$i(_objectSpread$i({}, 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
+  return jsx("a", _objectSpread$o(_objectSpread$o({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__link', className),
     children: children
   }));
 });
 CardLink.displayName = 'CardLink';
-var Card = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded3$2);
-  return jsx("article", _objectSpread$i(_objectSpread$i({}, 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$n);
+  return jsx("article", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card', className),
     children: children
@@ -526,79 +987,63 @@ Card.displayName = 'Card';
 Card.HeadingGroup.displayName = 'Card.HeadingGroup';
 Card.Link.displayName = 'Card.Link';
 
-var _excluded$h = ["className", "size"],
-  _excluded2$5 = ["children", "className", "title", "severity", "closeable", "icon", "onClose"];
-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 AlertClose = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$h);
-  return jsxs("button", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-alert__close', className),
-    children: [jsx(VisuallyHidden, {
-      children: "Sluiten"
-    }), jsx(Icon, {
-      svg: 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: AlertIcon,
-  success: CheckmarkIcon
+  info: InfoIcon,
+  success: CheckmarkIcon,
+  warning: AlertIcon
 };
-var Alert = /*#__PURE__*/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 = useMemo(function () {
-    if (!icon || !severity) {
-      return null;
-    }
-    return jsx(Icon, {
-      size: alertSize,
-      svg: iconSvgBySeverity[severity]
-    });
-  }, [icon, severity, alertSize]);
-  return jsxs("div", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
+var Alert = /*#__PURE__*/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 jsxs(Element, _objectSpread$m(_objectSpread$m({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert', severity && "amsterdam-alert--".concat(severity), className),
-    children: [alertIcon && jsx("div", {
+    children: [jsx("div", {
       className: "amsterdam-alert__icon",
-      children: alertIcon
+      children: jsx(Icon, {
+        size: alertSize,
+        svg: iconSvgBySeverity[severity]
+      })
     }), jsxs("div", {
       className: "amsterdam-alert__content",
-      children: [title && jsx("span", {
-        className: "amsterdam-alert__title",
+      children: [title && jsx(Heading, {
+        level: headingLevel,
+        size: "level-4",
         children: title
       }), children]
-    }), closeable && jsx(AlertClose, {
+    }), closeable && jsx(IconButton, {
+      label: "Sluiten",
       size: alertSize,
       onClick: onClose
     })]
   }));
 });
 Alert.displayName = 'Alert';
-AlertClose.displayName = 'AlertClose';
 
-var _excluded$g = ["children", "className", "ratio"];
-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 _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__*/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$g);
-  return jsx("div", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$l);
+  return jsx("div", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-aspect-ratio', "amsterdam-aspect-ratio--".concat(ratio), className),
     children: children
@@ -606,39 +1051,45 @@ var AspectRatio = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 AspectRatio.displayName = 'AspectRatio';
 
-var _excluded$f = ["children", "className"],
-  _excluded2$4 = ["children", "className"],
-  _excluded3$1 = ["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 FooterTop = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$f);
-  return jsx(Highlight, _objectSpread$f(_objectSpread$f({}, restProps), {}, {
-    color: "blue",
+    restProps = _objectWithoutProperties(_ref, _excluded$k);
+  return 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__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$4);
-  return jsx("div", _objectSpread$f(_objectSpread$f({}, 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
+  return 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__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded3$1);
-  return jsx("footer", _objectSpread$f(_objectSpread$f({}, 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$i);
+  return jsx("footer", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer', className),
     children: children
@@ -650,70 +1101,54 @@ Footer.displayName = 'Footer';
 Footer.Top.displayName = 'Footer.Top';
 Footer.Bottom.displayName = 'Footer.Bottom';
 
-var _excluded$e = ["alignEnd", "children", "className"],
-  _excluded2$3 = ["children", "icon"],
-  _excluded3 = ["children", "icon"];
-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 PageMenu = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$e);
-  return jsx("ul", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-    className: clsx('amsterdam-page-menu', alignEnd && "amsterdam-page-menu--align-end", className),
-    ref: ref,
-    children: children
-  }));
-});
-var PageMenuLink = /*#__PURE__*/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 jsx("li", {
-    className: "amsterdam-page-menu__item",
-    children: jsxs("a", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+    children: jsxs("a", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
       ref: ref,
-      className: "amsterdam-page-menu__link",
+      className: clsx('amsterdam-page-menu__link', className),
       children: [children, icon && jsx(Icon, {
         svg: icon,
-        size: "level-7"
+        size: "level-6"
       })]
     }))
   });
 });
-var PageMenuButton = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var children = _ref3.children,
-    icon = _ref3.icon,
-    restProps = _objectWithoutProperties(_ref3, _excluded3);
-  return jsx("li", {
-    className: "amsterdam-page-menu__item",
-    children: jsxs("button", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-      type: "button",
-      ref: ref,
-      className: "amsterdam-page-menu__button",
-      children: [children, icon && jsx(Icon, {
-        svg: icon,
-        size: "level-7"
-      })]
-    }))
-  });
+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__*/forwardRef(function (_ref, ref) {
+  var alignEnd = _ref.alignEnd,
+    children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$g);
+  return 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';
-PageMenuButton.displayName = 'PageMenu.Button';
 PageMenu.Link = PageMenuLink;
-PageMenu.Button = PageMenuButton;
+PageMenu.Link.displayName = 'PageMenu.Link';
 
-var _excluded$d = ["className", "label", "description"];
-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$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__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     description = _ref.description,
-    restProps = _objectWithoutProperties(_ref, _excluded$d);
-  return jsxs("a", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$f);
+  return jsxs("a", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-top-task-link', className),
     "aria-label": "".concat(label, ", ").concat(description),
@@ -728,15 +1163,15 @@ var TopTaskLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 TopTaskLink.displayName = 'TopTaskLink';
 
-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 _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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$c);
-  return jsx("blockquote", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$e);
+  return jsx("blockquote", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-blockquote', inverseColor && 'amsterdam-blockquote--inverse-color', className),
     children: children
@@ -744,15 +1179,15 @@ var Blockquote = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Blockquote.displayName = 'Blockquote';
 
-var _excluded$b = ["children", "className", "invalid", "indeterminate"];
-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$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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
     indeterminate = _ref.indeterminate,
-    restProps = _objectWithoutProperties(_ref, _excluded$b);
+    restProps = _objectWithoutProperties(_ref, _excluded$d);
   var id = useId();
   var innerRef = useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
@@ -770,7 +1205,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // without a containing element
     jsxs("div", {
       className: clsx('amsterdam-checkbox', className),
-      children: [jsx("input", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
+      children: [jsx("input", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
         type: "checkbox",
         className: "amsterdam-checkbox__input",
         ref: innerRef,
@@ -788,15 +1223,15 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$a = ["children", "className", "inverseColor"];
-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$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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$a);
-  return jsx("h1", _objectSpread$a(_objectSpread$a({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$c);
+  return jsx("h1", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-page-heading', inverseColor && 'amsterdam-page-heading--inverse-color', className),
     children: children
@@ -804,81 +1239,70 @@ var PageHeading = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 PageHeading.displayName = 'PageHeading';
 
-var _excluded$9 = ["children", "markers", "className"],
-  _excluded2$2 = ["children", "className"];
-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 OrderedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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__*/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$9);
-  return jsx("ol", _objectSpread$9(_objectSpread$9({
+    restProps = _objectWithoutProperties(_ref, _excluded$b);
+  return jsx("li", _objectSpread$b(_objectSpread$b({
     ref: ref,
-    className: clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)
+    className: clsx('amsterdam-ordered-list__item', className)
   }, restProps), {}, {
     children: children
   }));
 });
-OrderedList.displayName = 'OrderedList';
-var OrderedListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$2);
-  return jsx("li", _objectSpread$9(_objectSpread$9({
+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__*/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$a);
+  return jsx("ol", _objectSpread$a(_objectSpread$a({
     ref: ref,
-    className: clsx('amsterdam-ordered-list__item', className)
+    className: clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)
   }, restProps), {}, {
     children: children
   }));
 });
-OrderedListItem.displayName = 'OrderedListItem';
+OrderedList.displayName = 'OrderedList';
 OrderedList.Item = OrderedListItem;
 
-var _excluded$8 = ["children", "className", "inverseColor", "level", "size"];
-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; }
-function getHeadingElement(level) {
-  switch (level) {
-    case 2:
-      return 'h2';
-    case 3:
-      return 'h3';
-    case 4:
-      return 'h4';
-    default:
-      return 'h1';
-  }
-}
-var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    inverseColor = _ref.inverseColor,
-    _ref$level = _ref.level,
-    level = _ref$level === void 0 ? 1 : _ref$level,
-    size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$8);
-  var HeadingX = getHeadingElement(level);
-  var sizeOrLevel = size ? size.split('-')[1] : level;
-  return jsx(HeadingX, _objectSpread$8(_objectSpread$8({
+    href = _ref.href,
+    restProps = _objectWithoutProperties(_ref, _excluded$9);
+  return jsx("li", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
+    className: clsx$1('amsterdam-breadcrumb__item', className),
     ref: ref,
-    className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
-  }, restProps), {}, {
-    children: children
+    children: jsx("a", {
+      className: "amsterdam-breadcrumb__link",
+      href: href,
+      children: children
+    })
   }));
 });
-Heading.displayName = 'Heading';
+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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded$7);
-  return jsx("nav", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: "amsterdam-breadcrumb",
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$8);
+  return jsx("nav", _objectSpread$8(_objectSpread$8({}, restProps), {}, {
+    className: clsx$1('amsterdam-breadcrumb', className),
     ref: ref,
     children: jsx("ol", {
       className: "amsterdam-breadcrumb__list",
@@ -887,26 +1311,12 @@ var Breadcrumb = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 Breadcrumb.displayName = 'Breadcrumb';
-var BreadcrumbItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    href = _ref2.href,
-    restProps = _objectWithoutProperties(_ref2, _excluded2$1);
-  return jsx("li", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: "amsterdam-breadcrumb__item",
-    ref: ref,
-    children: 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -914,8 +1324,8 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     icon = _ref.icon,
     onBackground = _ref.onBackground,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded$6);
-  return jsxs("a", _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
+    otherProps = _objectWithoutProperties(_ref, _excluded$7);
+  return jsxs("a", _objectSpread$7(_objectSpread$7({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-link', {
       'amsterdam-link--standalone': variant === 'standalone',
@@ -927,15 +1337,15 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, className),
     children: [variant === 'inList' && jsx(Icon, {
       svg: icon !== null && icon !== void 0 ? icon : ChevronRightIcon,
-      size: "level-6"
+      size: "level-5"
     }), children]
   }));
 });
 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':
@@ -951,8 +1361,8 @@ var Button = /*#__PURE__*/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 jsx(Button$1, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$6);
+  return jsx(Button$1, _objectSpread$6(_objectSpread$6({}, restProps), {}, {
     appearance: getAppearance(variant),
     ref: ref,
     disabled: disabled,
@@ -962,23 +1372,38 @@ var Button = /*#__PURE__*/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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
+  return 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__*/forwardRef(function (_ref, ref) {
+var UnorderedListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$4);
-  return jsx("label", _objectSpread$4(_objectSpread$4({}, restProps), {}, {
+  return 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__*/forwardRef(function (_ref, ref) {
@@ -995,18 +1420,6 @@ var UnorderedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 UnorderedList.displayName = 'UnorderedList';
-var UnorderedListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded2);
-  return 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 = {
@@ -1188,38 +1601,39 @@ var gridCellClasses = function gridCellClasses(span, start) {
     return [];
   }
   var classes = [];
-  if (typeof span === 'number') {
-    classes.push("amsterdam-grid-cell--span-".concat(span));
+  if (span === 'all' || typeof span === 'number') {
+    classes.push("amsterdam-grid__cell--span-".concat(span));
   } else if (span) {
     var narrow = span.narrow,
       medium = span.medium,
       wide = span.wide;
-    classes.push("amsterdam-grid-cell--span-".concat(narrow), "amsterdam-grid-cell--span-".concat(medium, "-medium"), "amsterdam-grid-cell--span-".concat(wide, "-wide"));
+    classes.push("amsterdam-grid__cell--span-".concat(narrow), "amsterdam-grid__cell--span-".concat(medium, "-medium"), "amsterdam-grid__cell--span-".concat(wide, "-wide"));
   }
   if (typeof start === 'number') {
-    classes.push("amsterdam-grid-cell--start-".concat(start));
+    classes.push("amsterdam-grid__cell--start-".concat(start));
   } else if (start) {
     var _narrow = start.narrow,
       _medium = start.medium,
       _wide = start.wide;
-    classes.push("amsterdam-grid-cell--start-".concat(_narrow), "amsterdam-grid-cell--start-".concat(_medium, "-medium"), "amsterdam-grid-cell--start-".concat(_wide, "-wide"));
+    classes.push("amsterdam-grid__cell--start-".concat(_narrow), "amsterdam-grid__cell--start-".concat(_medium, "-medium"), "amsterdam-grid__cell--start-".concat(_wide, "-wide"));
   }
   return classes;
 };
 
-var _excluded$1 = ["children", "className", "fullWidth", "span", "start"];
+var _excluded$1 = ["as", "children", "className", "span", "start"];
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var GridCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
+  var _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? 'div' : _ref$as,
+    children = _ref.children,
     className = _ref.className,
-    fullWidth = _ref.fullWidth,
     span = _ref.span,
     start = _ref.start,
     restProps = _objectWithoutProperties(_ref, _excluded$1);
-  return jsx("div", _objectSpread$1(_objectSpread$1({}, restProps), {}, {
+  return jsx(Tag, _objectSpread$1(_objectSpread$1({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-grid-cell', fullWidth && 'amsterdam-grid-cell--full-width', gridCellClasses(span, start), className),
+    className: clsx('amsterdam-grid__cell', gridCellClasses(span, start), className),
     children: children
   }));
 });
@@ -1258,7 +1672,6 @@ var Grid = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Grid.Cell = GridCell;
 Grid.displayName = 'Grid';
-GridCell.displayName = 'Grid.Cell';
 
-export { Accordion, Alert, AspectRatio, Blockquote, Breadcrumb, Button, Card, Checkbox, Dialog, Footer, FormLabel, Grid, GridCell, Heading, Highlight, Icon, Image, Link, Logo, OrderedList, PageHeading, PageMenu, Pagination, Paragraph, Screen, Switch, TopTaskLink, UnorderedList, VisuallyHidden };
+export { Accordion, Alert, AspectRatio, Badge, Blockquote, Breadcrumb, Button, Card, Checkbox, Dialog, Footer, FormLabel, Grid, Header, Heading, Icon, IconButton, Image, Link, LinkList, Logo, Mark, MegaMenu, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, Screen, SearchField, SkipLink, Spotlight, Switch, Table, TextInput, TopTaskLink, UnorderedList, VisuallyHidden };
 //# sourceMappingURL=index.esm.js.map