@amsterdam/design-system-react 0.1.9 → 0.3.0

package/dist/index.esm.js

@@ -1,19 +1,83 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useState, useMemo, useId, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
+import { forwardRef, useId, useState, useMemo, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
+import { SearchIcon, CloseIcon, ChevronLeftIcon, ChevronRightIcon, AlertIcon, CheckmarkIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
 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 _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$A = ["children", "className"];
+function ownKeys$F(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SkipLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$A);
+  return jsx("a", _objectSpread$F(_objectSpread$F({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-skip-link', 'amsterdam-visually-hidden', className),
+    children: children
+  }));
+});
+SkipLink.displayName = 'SkipLink';
+
+var _excluded$z = ["children", "className"];
+function ownKeys$E(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Overlap = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$z);
+  return jsx("div", _objectSpread$E(_objectSpread$E({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-overlap', className),
+    children: children
+  }));
+});
+Overlap.displayName = 'Overlap';
+
+var _excluded$y = ["children", "className", "inverseColor", "level", "size"];
+function ownKeys$D(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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$y);
+  var HeadingX = getHeadingElement(level);
+  var sizeOrLevel = size ? size.split('-')[1] : level;
+  return jsx(HeadingX, _objectSpread$D(_objectSpread$D({
+    ref: ref,
+    className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
+  }, restProps), {}, {
+    children: children
+  }));
+});
+Heading.displayName = 'Heading';
+
+function ownKeys$C(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LogoAmsterdam = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$x(_objectSpread$x({
+  return jsxs("svg", _objectSpread$C(_objectSpread$C({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -34,10 +98,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$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 LogoGgdAmsterdam = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$w(_objectSpread$w({
+  return jsxs("svg", _objectSpread$B(_objectSpread$B({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -62,10 +126,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$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 LogoStadsarchief = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$v(_objectSpread$v({
+  return jsxs("svg", _objectSpread$A(_objectSpread$A({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -90,10 +154,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$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 LogoStadsbankVanLening = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$u(_objectSpread$u({
+  return jsxs("svg", _objectSpread$z(_objectSpread$z({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -118,10 +182,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$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 LogoVgaVerzekeringen = /*#__PURE__*/forwardRef(function (props, ref) {
-  return jsxs("svg", _objectSpread$t(_objectSpread$t({
+  return jsxs("svg", _objectSpread$y(_objectSpread$y({
     className: "amsterdam-logo",
     "aria-hidden": "true",
     focusable: "false",
@@ -146,9 +210,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$x = ["brand", "className"];
+function ownKeys$x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var logoConfig = {
   amsterdam: LogoAmsterdam,
   'ggd-amsterdam': LogoGgdAmsterdam,
@@ -160,55 +224,200 @@ 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$x);
   var LogoComponent = logoConfig[brand];
-  return jsx(LogoComponent, _objectSpread$s(_objectSpread$s({}, restProps), {}, {
+  return jsx(LogoComponent, _objectSpread$x(_objectSpread$x({}, 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 _excluded$w = ["children", "className"];
+function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var VisuallyHidden = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$w);
+  return jsx("div", _objectSpread$w(_objectSpread$w({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-visually-hidden', className),
+    children: children
+  }));
+});
+VisuallyHidden.displayName = 'VisuallyHidden';
+
+var _excluded$v = ["className", "logoBrand", "logoLink", "logoLinkTitle", "title", "links", "menu"];
+function ownKeys$v(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Header = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _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$v);
+  return jsx(Fragment, {
+    children: jsxs("header", _objectSpread$v(_objectSpread$v({}, 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
+        })
+      })]
+    }))
+  });
+});
+Header.displayName = 'Header';
+
+var _excluded$u = ["children", "className"];
+function ownKeys$u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Mark = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$u);
+  return jsx("mark", _objectSpread$u(_objectSpread$u({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-mark', className),
+    children: children
+  }));
+});
+Mark.displayName = 'Mark';
+
+var _excluded$t = ["className"];
+function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$t);
+  return jsx("input", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
+    className: clsx('amsterdam-text-input', className),
+    ref: ref,
+    type: "text"
+  }));
+});
+TextInput.displayName = 'TextInput';
+
+var _excluded$s = ["className", "size", "svg"];
+function ownKeys$s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Icon = /*#__PURE__*/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({
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
+  return jsx("span", _objectSpread$s(_objectSpread$s({
     ref: ref,
-    className: clsx('amsterdam-icon', size === 'level-3' && 'amsterdam-icon--size-3', size === 'level-4' && 'amsterdam-icon--size-4', size === 'level-5' && 'amsterdam-icon--size-5', size === 'level-6' && 'amsterdam-icon--size-6', size === 'level-7' && 'amsterdam-icon--size-7', className)
+    className: clsx('amsterdam-icon', size === 'level-3' && 'amsterdam-icon--size-3', size === 'level-4' && 'amsterdam-icon--size-4', size === 'level-5' && 'amsterdam-icon--size-5', size === 'level-6' && 'amsterdam-icon--size-6', className)
   }, otherProps), {}, {
     children: svg()
   }));
 });
 Icon.displayName = 'Icon';
 
-var _excluded$q = ["children", "className"];
+var _excluded$r = ["className"];
+function ownKeys$r(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// TODO: replace this with IconButton when that's done
+var SearchFieldButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$r);
+  return jsxs("button", _objectSpread$r(_objectSpread$r({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-search-field__button', className),
+    children: [jsx(VisuallyHidden, {
+      children: "Zoeken"
+    }), jsx(Icon, {
+      svg: SearchIcon,
+      size: "level-6"
+    })]
+  }));
+});
+SearchFieldButton.displayName = 'SearchFieldButton';
+
+var _excluded$q = ["className", "label"];
 function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var VisuallyHidden = /*#__PURE__*/forwardRef(function (_ref, ref) {
+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$q);
+  var id = useId();
+  return jsxs(Fragment, {
+    children: [jsx("label", {
+      htmlFor: id,
+      children: jsx(VisuallyHidden, {
+        children: label
+      })
+    }), jsx("input", _objectSpread$q(_objectSpread$q({}, 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$p = ["children", "className"];
+function ownKeys$p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SearchField = /*#__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$p);
+  return jsx("form", _objectSpread$p(_objectSpread$p({
+    role: "search"
+  }, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-visually-hidden', className),
+    className: clsx('amsterdam-search-field', className),
     children: children
   }));
 });
-VisuallyHidden.displayName = 'VisuallyHidden';
+SearchField.Input = SearchFieldInput;
+SearchField.Button = SearchFieldButton;
+SearchField.displayName = 'SearchField';
+SearchField.Input.displayName = 'SearchField.Input';
+SearchField.Button.displayName = 'SearchField.Button';
 
-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; }
+var _excluded$o = ["children", "className", "title", "actions"];
+function ownKeys$o(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // TODO: Replace with ActionButton
 var DialogClose = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var restProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return jsxs("button", _objectSpread$p(_objectSpread$p({
+  return jsxs("button", _objectSpread$o(_objectSpread$o({
     ref: ref,
     className: "amsterdam-dialog__close",
     formNoValidate: true
@@ -226,8 +435,8 @@ var Dialog = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     className = _ref2.className,
     title = _ref2.title,
     actions = _ref2.actions,
-    restProps = _objectWithoutProperties(_ref2, _excluded$p);
-  return jsx("dialog", _objectSpread$p(_objectSpread$p({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref2, _excluded$o);
+  return jsx("dialog", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-dialog', className),
     children: jsxs("form", {
@@ -252,22 +461,24 @@ 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$n = ["className", "cover"];
+function ownKeys$n(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$n);
+  return jsx("img", _objectSpread$n(_objectSpread$n({}, 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$m = ["className", "maxVisiblePages", "onPageChange", "page", "totalPages"];
+function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * This returns an array of the range, including spacers
  *
@@ -321,7 +532,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$m);
   var _useState = useState(page),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
@@ -346,7 +557,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$m(_objectSpread$m({}, restProps), {}, {
     className: clsx('amsterdam-pagination', className),
     ref: ref,
     "aria-label": "Paginering",
@@ -361,7 +572,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 +602,7 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
           type: "button",
           children: ["volgende", jsx(Icon, {
             svg: ChevronRightIcon,
-            size: "level-6"
+            size: "level-5"
           })]
         })
       })]
@@ -400,16 +611,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$l = ["children", "className", "maxWidth"];
+function ownKeys$l(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$l);
+  return jsx("div", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-screen', "amsterdam-screen--".concat(maxWidth), className),
     children: children
@@ -417,17 +628,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$k = ["className", "id"];
+function ownKeys$k(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Switch = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     id = _ref.id,
-    restProps = _objectWithoutProperties(_ref, _excluded$l);
+    restProps = _objectWithoutProperties(_ref, _excluded$k);
   var inputId = id || useId();
   return jsxs("div", {
     className: clsx('amsterdam-switch', className),
-    children: [jsx("input", _objectSpread$l(_objectSpread$l({}, restProps), {}, {
+    children: [jsx("input", _objectSpread$k(_objectSpread$k({}, restProps), {}, {
       className: "amsterdam-switch__input",
       id: inputId,
       ref: ref,
@@ -441,36 +652,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$j = ["children", "className", "as", "color"];
+function ownKeys$j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
+  return jsx(Tag, _objectSpread$j(_objectSpread$j({}, 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$i = ["children", "className", "inverseColor", "size"];
+function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$i);
+  return jsx("p", _objectSpread$i(_objectSpread$i({
     ref: ref,
     className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph--".concat(size), inverseColor && 'amsterdam-paragraph--inverse-color', className)
   }, otherProps), {}, {
@@ -479,17 +689,17 @@ var Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$i = ["children", "className", "tagline"],
+var _excluded$h = ["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; }
+  _excluded3$1 = ["children", "className"];
+function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$h);
+  return jsxs("hgroup", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__heading-group', className),
     children: [children, jsx(Paragraph, {
@@ -503,7 +713,7 @@ 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), {}, {
+  return jsx("a", _objectSpread$h(_objectSpread$h({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card__link', className),
     children: children
@@ -513,8 +723,8 @@ 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), {}, {
+    restProps = _objectWithoutProperties(_ref3, _excluded3$1);
+  return jsx("article", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-card', className),
     children: children
@@ -526,15 +736,15 @@ Card.displayName = 'Card';
 Card.HeadingGroup.displayName = 'Card.HeadingGroup';
 Card.Link.displayName = 'Card.Link';
 
-var _excluded$h = ["className", "size"],
+var _excluded$g = ["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; }
+function ownKeys$g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AlertClose = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$h);
-  return jsxs("button", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$g);
+  return jsxs("button", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert__close', className),
     children: [jsx(VisuallyHidden, {
@@ -568,7 +778,7 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       svg: iconSvgBySeverity[severity]
     });
   }, [icon, severity, alertSize]);
-  return jsxs("div", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
+  return jsxs("div", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert', severity && "amsterdam-alert--".concat(severity), className),
     children: [alertIcon && jsx("div", {
@@ -589,16 +799,16 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 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$f = ["children", "className", "ratio"];
+function ownKeys$f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$f);
+  return jsx("div", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-aspect-ratio', "amsterdam-aspect-ratio--".concat(ratio), className),
     children: children
@@ -606,16 +816,16 @@ var AspectRatio = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 AspectRatio.displayName = 'AspectRatio';
 
-var _excluded$f = ["children", "className"],
+var _excluded$e = ["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; }
+  _excluded3 = ["children", "className"];
+function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FooterTop = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$f);
-  return jsx(Highlight, _objectSpread$f(_objectSpread$f({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$e);
+  return jsx(Spotlight, _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     color: "blue",
     ref: ref,
     className: clsx('amsterdam-footer__top', className),
@@ -627,7 +837,7 @@ 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), {}, {
+  return jsx("div", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer__bottom', className),
     children: children
@@ -637,8 +847,8 @@ 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), {}, {
+    restProps = _objectWithoutProperties(_ref3, _excluded3);
+  return jsx("footer", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer', className),
     children: children
@@ -650,17 +860,17 @@ Footer.displayName = 'Footer';
 Footer.Top.displayName = 'Footer.Top';
 Footer.Bottom.displayName = 'Footer.Bottom';
 
-var _excluded$e = ["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 _excluded$d = ["alignEnd", "children", "className"],
+  _excluded2$3 = ["children", "icon"];
+function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageMenu = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
+  var alignEnd = _ref.alignEnd,
+    children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$e);
-  return jsx("ul", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-    className: clsx('amsterdam-page-menu', className),
+    restProps = _objectWithoutProperties(_ref, _excluded$d);
+  return jsx("ul", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    className: clsx('amsterdam-page-menu', alignEnd && "amsterdam-page-menu--align-end", className),
     ref: ref,
     children: children
   }));
@@ -671,48 +881,29 @@ var PageMenuLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     restProps = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsx("li", {
     className: "amsterdam-page-menu__item",
-    children: jsxs("a", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+    children: jsxs("a", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
       ref: ref,
       className: "amsterdam-page-menu__link",
       children: [children, icon && jsx(Icon, {
         svg: icon,
-        size: "level-7"
-      })]
-    }))
-  });
-});
-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"
+        size: "level-6"
       })]
     }))
   });
 });
 PageMenu.displayName = 'PageMenu';
 PageMenuLink.displayName = 'PageMenu.Link';
-PageMenuButton.displayName = 'PageMenu.Button';
 PageMenu.Link = PageMenuLink;
-PageMenu.Button = PageMenuButton;
 
-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$c = ["className", "label", "description"];
+function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$c);
+  return jsxs("a", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-top-task-link', className),
     "aria-label": "".concat(label, ", ").concat(description),
@@ -727,15 +918,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$b = ["children", "className", "inverseColor"];
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$b);
+  return jsx("blockquote", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-blockquote', inverseColor && 'amsterdam-blockquote--inverse-color', className),
     children: children
@@ -743,15 +934,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$a = ["children", "className", "invalid", "indeterminate"];
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$a);
   var id = useId();
   var innerRef = useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
@@ -769,7 +960,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$a(_objectSpread$a({}, restProps), {}, {
         type: "checkbox",
         className: "amsterdam-checkbox__input",
         ref: innerRef,
@@ -787,15 +978,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$9 = ["children", "className", "inverseColor"];
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var 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$9);
+  return jsx("h1", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-page-heading', inverseColor && 'amsterdam-page-heading--inverse-color', className),
     children: children
@@ -803,17 +994,17 @@ var PageHeading = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 PageHeading.displayName = 'PageHeading';
 
-var _excluded$9 = ["children", "markers", "className"],
+var _excluded$8 = ["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; }
+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 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$9);
-  return jsx("ol", _objectSpread$9(_objectSpread$9({
+    restProps = _objectWithoutProperties(_ref, _excluded$8);
+  return jsx("ol", _objectSpread$8(_objectSpread$8({
     ref: ref,
     className: clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)
   }, restProps), {}, {
@@ -825,7 +1016,7 @@ 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({
+  return jsx("li", _objectSpread$8(_objectSpread$8({
     ref: ref,
     className: clsx('amsterdam-ordered-list__item', className)
   }, restProps), {}, {
@@ -835,40 +1026,6 @@ var OrderedListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 OrderedListItem.displayName = 'OrderedListItem';
 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 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({
-    ref: ref,
-    className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
-  }, restProps), {}, {
-    children: children
-  }));
-});
-Heading.displayName = 'Heading';
-
 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; }
@@ -891,10 +1048,10 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     href = _ref2.href,
     restProps = _objectWithoutProperties(_ref2, _excluded2$1);
   return jsx("li", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
-    className: "amsterdam-breadcrumb-item",
+    className: "amsterdam-breadcrumb__item",
     ref: ref,
     children: jsx("a", {
-      className: "amsterdam-breadcrumb-item__link",
+      className: "amsterdam-breadcrumb__link",
       href: href,
       children: children
     })
@@ -926,7 +1083,7 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, className),
     children: [variant === 'inList' && jsx(Icon, {
       svg: icon !== null && icon !== void 0 ? icon : ChevronRightIcon,
-      size: "level-7"
+      size: "level-5"
     }), children]
   }));
 });
@@ -1187,44 +1344,45 @@ 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
   }));
 });
 GridCell.displayName = 'Grid.Cell';
 
-var _excluded = ["children", "className", "density", "paddingBottom", "paddingTop", "paddingVertical"];
+var _excluded = ["children", "className", "compact", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
 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 paddingClasses = function paddingClasses(paddingBottom, paddingTop, paddingVertical) {
@@ -1243,21 +1401,20 @@ var paddingClasses = function paddingClasses(paddingBottom, paddingTop, paddingV
 var Grid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    _ref$density = _ref.density,
-    density = _ref$density === void 0 ? 'low' : _ref$density,
+    compact = _ref.compact,
+    gapVertical = _ref.gapVertical,
     paddingBottom = _ref.paddingBottom,
     paddingTop = _ref.paddingTop,
     paddingVertical = _ref.paddingVertical,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return jsx("div", _objectSpread(_objectSpread({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-grid', density && "amsterdam-grid--density-".concat(density), paddingClasses(paddingBottom, paddingTop, paddingVertical), className),
+    className: clsx('amsterdam-grid', compact && "amsterdam-grid--compact", gapVertical && "amsterdam-grid--gap-vertical--".concat(gapVertical), paddingClasses(paddingBottom, paddingTop, paddingVertical), className),
     children: children
   }));
 });
 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, Blockquote, Breadcrumb, Button, Card, Checkbox, Dialog, Footer, FormLabel, Grid, Header, Heading, Icon, Image, Link, Logo, Mark, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, Screen, SearchField, SkipLink, Spotlight, Switch, TextInput, TopTaskLink, UnorderedList, VisuallyHidden };
 //# sourceMappingURL=index.esm.js.map