@amsterdam/design-system-react 0.1.7 → 0.1.8

package/dist/index.cjs.js

@@ -3,22 +3,36 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
-var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
 var clsx = require('clsx');
-var React = require('react');
-var componentLibraryReact = require('@utrecht/component-library-react');
+var react = require('react');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
+var componentLibraryReact = require('@utrecht/component-library-react');
 
-var _excluded$k = ["className", "size", "svg"];
-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 Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded$q = ["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 Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$q);
+  return jsxRuntime.jsx("img", _objectSpread$q(_objectSpread$q({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-image', className)
+  }));
+});
+Image.displayName = 'Image';
+
+var _excluded$p = ["className", "size", "svg"];
+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 Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'level-3' : _ref$size,
     svg = _ref.svg,
-    otherProps = _objectWithoutProperties(_ref, _excluded$k);
-  return jsxRuntime.jsx("span", _objectSpread$k(_objectSpread$k({
+    otherProps = _objectWithoutProperties(_ref, _excluded$p);
+  return jsxRuntime.jsx("span", _objectSpread$p(_objectSpread$p({
     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), {}, {
@@ -27,14 +41,275 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$j = ["children", "className"];
+var _excluded$o = ["className", "maxVisiblePages", "onPageChange", "page", "totalPages"];
+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; }
+/**
+ * This returns an array of the range, including spacers
+ *
+ * @example
+ * currentPage = 4, totalPages = 7, maxVisiblePages = 7
+ * // returns [1, 2, 3, 4, 5, 6, 7]
+ *
+ * @example
+ * currentPage = 5, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 4, 5, 6, 'lastSpacer', 100]
+ *
+ * @example
+ * currentPage = 97, totalPages = 100, maxVisiblePages = 7
+ * // returns [1, 'firstSpacer', 96, 97, 98, 99, 100]
+ */
+function getRange(currentPage, totalPages, maxVisiblePages) {
+  // the total amount of visible pages is whatever's lower, totalPages or maxVisiblePages
+  // maxVisiblePages has a lower limit of 5
+  var visiblePages = Math.min(totalPages, Math.max(maxVisiblePages, 5));
+  var min = 1;
+  // the center part of the range starts with the current page minus half of the visible pages
+  var centerStartPage = currentPage - Math.floor(visiblePages / 2);
+  // centerStartPage has a lower limit of 1
+  centerStartPage = Math.max(centerStartPage, min);
+  // centerStartPage has an upper limit of 1 plus total pages minus visible pages
+  centerStartPage = Math.min(centerStartPage, min + totalPages - visiblePages);
+  var pages = Array.from({
+    length: visiblePages
+  }, function (_el, i) {
+    return centerStartPage + i;
+  }).reduce(function (acc, pageNr, index) {
+    if (index === 0 && pageNr !== 1) {
+      return [1, 'firstSpacer'];
+    }
+    if (totalPages > visiblePages && index === visiblePages - 2 && currentPage < totalPages - 2) {
+      return [].concat(_toConsumableArray(acc), ['lastSpacer', totalPages]);
+    }
+    // Skip a number when spacer is already added
+    if (acc.includes('firstSpacer') && index === 1 || acc.includes('lastSpacer') && index === visiblePages - 1) {
+      return acc;
+    }
+    return [].concat(_toConsumableArray(acc), [pageNr]);
+  }, []);
+  return pages;
+}
+var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$maxVisiblePages = _ref.maxVisiblePages,
+    maxVisiblePages = _ref$maxVisiblePages === void 0 ? 7 : _ref$maxVisiblePages,
+    onPageChange = _ref.onPageChange,
+    _ref$page = _ref.page,
+    page = _ref$page === void 0 ? 1 : _ref$page,
+    totalPages = _ref.totalPages,
+    restProps = _objectWithoutProperties(_ref, _excluded$o);
+  var _useState = react.useState(page),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  // Get array of page numbers and / or spacers
+  var range = react.useMemo(function () {
+    return getRange(currentPage, totalPages, maxVisiblePages);
+  }, [currentPage, totalPages, maxVisiblePages]);
+  var onChangePage = function onChangePage(newPage) {
+    if (onPageChange !== undefined) {
+      onPageChange(newPage);
+    }
+    setCurrentPage(newPage);
+  };
+  var onPrevious = function onPrevious() {
+    onChangePage(currentPage - 1);
+  };
+  var onNext = function onNext() {
+    onChangePage(currentPage + 1);
+  };
+  // Don't show pagination if you only have one page
+  if (totalPages <= 1) {
+    return null;
+  }
+  return jsxRuntime.jsx("nav", _objectSpread$o(_objectSpread$o({}, restProps), {}, {
+    className: clsx('amsterdam-pagination', className),
+    ref: ref,
+    "aria-label": "Paginering",
+    children: jsxRuntime.jsxs("ol", {
+      className: "amsterdam-pagination__list",
+      children: [jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsxs("button", {
+          "aria-label": "Vorige pagina",
+          className: "amsterdam-pagination__button",
+          disabled: currentPage === 1,
+          onClick: onPrevious,
+          type: "button",
+          children: [jsxRuntime.jsx(Icon, {
+            svg: designSystemReactIcons.ChevronLeftIcon,
+            size: "level-6"
+          }), "vorige"]
+        })
+      }), range.map(function (pageNumberOrSpacer) {
+        return typeof pageNumberOrSpacer === 'number' ? jsxRuntime.jsx("li", {
+          children: jsxRuntime.jsx("button", {
+            "aria-current": pageNumberOrSpacer === currentPage ? true : undefined,
+            "aria-label": pageNumberOrSpacer === currentPage ? "Pagina ".concat(pageNumberOrSpacer) : "Ga naar pagina ".concat(pageNumberOrSpacer),
+            className: clsx('amsterdam-pagination__button', pageNumberOrSpacer === currentPage && 'amsterdam-pagination__button--current'),
+            onClick: function onClick() {
+              return pageNumberOrSpacer !== currentPage && onChangePage(pageNumberOrSpacer);
+            },
+            tabIndex: pageNumberOrSpacer === currentPage ? -1 : 0,
+            type: "button",
+            children: pageNumberOrSpacer
+          })
+        }, pageNumberOrSpacer) : jsxRuntime.jsx("li", {
+          "aria-hidden": true,
+          "data-testid": pageNumberOrSpacer,
+          children: "\u2026"
+        }, pageNumberOrSpacer);
+      }), jsxRuntime.jsx("li", {
+        children: jsxRuntime.jsxs("button", {
+          "aria-label": "Volgende pagina",
+          className: "amsterdam-pagination__button",
+          disabled: currentPage === totalPages,
+          onClick: onNext,
+          type: "button",
+          children: ["volgende", jsxRuntime.jsx(Icon, {
+            svg: designSystemReactIcons.ChevronRightIcon,
+            size: "level-6"
+          })]
+        })
+      })]
+    })
+  }));
+});
+Pagination.displayName = 'Pagination';
+
+var _excluded$n = ["children", "className", "maxWidth"];
+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 Screen = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 'wide' : _ref$maxWidth,
+    restProps = _objectWithoutProperties(_ref, _excluded$n);
+  return jsxRuntime.jsx("div", _objectSpread$n(_objectSpread$n({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-screen', "amsterdam-screen--".concat(maxWidth), className),
+    children: children
+  }));
+});
+Screen.displayName = 'Screen';
+
+var _excluded$m = ["className", "id"];
+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 Switch = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    id = _ref.id,
+    restProps = _objectWithoutProperties(_ref, _excluded$m);
+  var inputId = id || react.useId();
+  return jsxRuntime.jsxs("div", {
+    className: clsx('amsterdam-switch', className),
+    children: [jsxRuntime.jsx("input", _objectSpread$m(_objectSpread$m({}, restProps), {}, {
+      className: "amsterdam-switch__input",
+      id: inputId,
+      ref: ref,
+      type: "checkbox",
+      role: "switch"
+    })), jsxRuntime.jsx("label", {
+      className: "amsterdam-switch__label",
+      htmlFor: inputId
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+var _excluded$l = ["children", "className", "as", "color"];
+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 Highlight = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'blue' : _ref$color,
+    restProps = _objectWithoutProperties(_ref, _excluded$l);
+  var Component = as;
+  return jsxRuntime.jsx(Component, _objectSpread$l(_objectSpread$l({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-highlight', "amsterdam-highlight--".concat(color), className),
+    children: children
+  }));
+});
+Highlight.displayName = 'Highlight';
+
+var _excluded$k = ["children", "className", "inverseColor", "size"];
+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 Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    inverseColor = _ref.inverseColor,
+    size = _ref.size,
+    otherProps = _objectWithoutProperties(_ref, _excluded$k);
+  return jsxRuntime.jsx("p", _objectSpread$k(_objectSpread$k({
+    ref: ref,
+    className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph--".concat(size), inverseColor && 'amsterdam-paragraph--inverse-color', className)
+  }, otherProps), {}, {
+    children: children
+  }));
+});
+Paragraph.displayName = 'Paragraph';
+
+var _excluded$j = ["children", "className", "tagline"],
+  _excluded2$6 = ["children", "className"],
+  _excluded3$2 = ["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 VisuallyHidden = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var CardHeadingGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    tagline = _ref.tagline,
     restProps = _objectWithoutProperties(_ref, _excluded$j);
-  return jsxRuntime.jsx("div", _objectSpread$j(_objectSpread$j({}, restProps), {}, {
+  return jsxRuntime.jsxs("hgroup", _objectSpread$j(_objectSpread$j({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-card__heading-group', className),
+    children: [children, jsxRuntime.jsx(Paragraph, {
+      size: "small",
+      children: tagline
+    })]
+  }));
+});
+CardHeadingGroup.displayName = 'CardHeadingGroup';
+var CardLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    otherProps = _objectWithoutProperties(_ref2, _excluded2$6);
+  return jsxRuntime.jsx("a", _objectSpread$j(_objectSpread$j({}, otherProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-card__link', className),
+    children: children
+  }));
+});
+CardLink.displayName = 'CardLink';
+var Card = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    restProps = _objectWithoutProperties(_ref3, _excluded3$2);
+  return jsxRuntime.jsx("article", _objectSpread$j(_objectSpread$j({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-card', className),
+    children: children
+  }));
+});
+Card.HeadingGroup = CardHeadingGroup;
+Card.Link = CardLink;
+Card.displayName = 'Card';
+Card.HeadingGroup.displayName = 'Card.HeadingGroup';
+Card.Link.displayName = 'Card.Link';
+
+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 VisuallyHidden = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$i);
+  return jsxRuntime.jsx("div", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-visually-hidden', className),
     children: children
@@ -42,30 +317,30 @@ var VisuallyHidden = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 VisuallyHidden.displayName = 'VisuallyHidden';
 
-var _excluded$i = ["className", "size"],
+var _excluded$h = ["className", "size"],
   _excluded2$5 = ["children", "className", "title", "severity", "closeable", "icon", "onClose"];
-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 AlertClose = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     size = _ref.size,
-    restProps = _objectWithoutProperties(_ref, _excluded$i);
-  return jsxRuntime.jsxs("button", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$h);
+  return jsxRuntime.jsxs("button", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert__close', className),
     children: [jsxRuntime.jsx(VisuallyHidden, {
       children: "Sluiten"
     }), jsxRuntime.jsx(Icon, {
-      svg: designSystemReactIcons.Close,
+      svg: designSystemReactIcons.CloseIcon,
       size: size
     })]
   }));
 });
 var iconSvgBySeverity = {
-  error: designSystemReactIcons.Alert,
-  success: designSystemReactIcons.Checkmark
+  error: designSystemReactIcons.AlertIcon,
+  success: designSystemReactIcons.CheckmarkIcon
 };
-var Alert = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var Alert = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     className = _ref2.className,
     title = _ref2.title,
@@ -75,7 +350,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onClose = _ref2.onClose,
     restProps = _objectWithoutProperties(_ref2, _excluded2$5);
   var alertSize = title ? 'level-5' : 'level-6';
-  var alertIcon = React.useMemo(function () {
+  var alertIcon = react.useMemo(function () {
     if (!icon || !severity) {
       return null;
     }
@@ -84,7 +359,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       svg: iconSvgBySeverity[severity]
     });
   }, [icon, severity, alertSize]);
-  return jsxRuntime.jsxs("div", _objectSpread$i(_objectSpread$i({}, restProps), {}, {
+  return jsxRuntime.jsxs("div", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-alert', severity && "amsterdam-alert--".concat(severity), className),
     children: [alertIcon && jsxRuntime.jsx("div", {
@@ -105,109 +380,55 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 Alert.displayName = 'Alert';
 AlertClose.displayName = 'AlertClose';
 
-var _excluded$h = ["children", "className", "ratio"];
-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 AspectRatio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$ratio = _ref.ratio,
-    ratio = _ref$ratio === void 0 ? 'square' : _ref$ratio,
-    restProps = _objectWithoutProperties(_ref, _excluded$h);
-  return jsxRuntime.jsx("div", _objectSpread$h(_objectSpread$h({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-aspect-ratio', "amsterdam-aspect-ratio--".concat(ratio), className),
-    children: children
-  }));
-});
-AspectRatio.displayName = 'AspectRatio';
-
-var _excluded$g = ["children", "gridColumns", "className"];
+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 gridColumnClassNames = function gridColumnClassNames(gridColumns) {
-  if (!gridColumns) {
-    return '';
-  }
-  if (typeof gridColumns === 'number') {
-    return "amsterdam-grid-column-span-".concat(gridColumns);
-  }
-  var start = gridColumns.start,
-    span = gridColumns.span;
-  return clsx(start && "amsterdam-grid-column-start-".concat(start), span && "amsterdam-grid-column-span-".concat(span));
-};
-var GridCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var AspectRatio = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    gridColumns = _ref.gridColumns,
     className = _ref.className,
+    _ref$ratio = _ref.ratio,
+    ratio = _ref$ratio === void 0 ? 'square' : _ref$ratio,
     restProps = _objectWithoutProperties(_ref, _excluded$g);
   return jsxRuntime.jsx("div", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-grid-cell', gridColumnClassNames(gridColumns), className),
+    className: clsx('amsterdam-aspect-ratio', "amsterdam-aspect-ratio--".concat(ratio), className),
     children: children
   }));
 });
-GridCell.displayName = 'GridCell';
+AspectRatio.displayName = 'AspectRatio';
 
-var _excluded$f = ["children", "className"];
+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 PageGrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var FooterTop = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$f);
   return jsxRuntime.jsx("div", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-page-grid', className),
-    children: children
-  }));
-});
-PageGrid.displayName = 'PageGrid';
-
-var _excluded$e = ["children", "className"],
-  _excluded2$4 = ["children", "className"],
-  _excluded3$1 = ["children", "className"],
-  _excluded4 = ["children", "className"];
-function ownKeys$e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FooterTop = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$e);
-  return jsxRuntime.jsx(PageGrid, _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer__top', className),
     children: children
   }));
 });
 FooterTop.displayName = 'FooterTop';
-var FooterColumn = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var FooterBottom = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded2$4);
-  return jsxRuntime.jsx(GridCell, _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+  return jsxRuntime.jsx("div", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
     ref: ref,
-    className: clsx('amsterdam-footer__column', className),
+    className: clsx('amsterdam-footer__bottom', className),
     children: children
   }));
 });
-FooterColumn.displayName = 'FooterColumn';
-var FooterBottom = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+FooterBottom.displayName = 'FooterBottom';
+var Footer = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
   var children = _ref3.children,
     className = _ref3.className,
     restProps = _objectWithoutProperties(_ref3, _excluded3$1);
-  return jsxRuntime.jsx("div", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
-    ref: ref,
-    className: clsx('amsterdam-footer__bottom', className),
-    children: children
-  }));
-});
-FooterBottom.displayName = 'FooterBottom';
-var Footer = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
-  var children = _ref4.children,
-    className = _ref4.className,
-    restProps = _objectWithoutProperties(_ref4, _excluded4);
-  return jsxRuntime.jsx("footer", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
+  return jsxRuntime.jsx("footer", _objectSpread$f(_objectSpread$f({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-footer', className),
     children: children
@@ -215,34 +436,32 @@ var Footer = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 });
 Footer.Top = FooterTop;
 Footer.Bottom = FooterBottom;
-Footer.Column = FooterColumn;
 Footer.displayName = 'Footer';
 Footer.Top.displayName = 'Footer.Top';
 Footer.Bottom.displayName = 'Footer.Bottom';
-Footer.Column.displayName = 'Footer.Column';
 
-var _excluded$d = ["children", "className"],
+var _excluded$e = ["children", "className"],
   _excluded2$3 = ["children", "icon"],
   _excluded3 = ["children", "icon"];
-function ownKeys$d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var PageMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$d);
-  return jsxRuntime.jsx("ul", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$e);
+  return jsxRuntime.jsx("ul", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
     className: clsx('amsterdam-page-menu', className),
     ref: ref,
     children: children
   }));
 });
-var PageMenuLink = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var PageMenuLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     icon = _ref2.icon,
     restProps = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsxRuntime.jsx("li", {
     className: "amsterdam-page-menu__item",
-    children: jsxRuntime.jsxs("a", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    children: jsxRuntime.jsxs("a", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
       ref: ref,
       className: "amsterdam-page-menu__link",
       children: [children, icon && jsxRuntime.jsx(Icon, {
@@ -252,13 +471,13 @@ var PageMenuLink = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }))
   });
 });
-var PageMenuButton = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+var PageMenuButton = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
   var children = _ref3.children,
     icon = _ref3.icon,
     restProps = _objectWithoutProperties(_ref3, _excluded3);
   return jsxRuntime.jsx("li", {
     className: "amsterdam-page-menu__item",
-    children: jsxRuntime.jsxs("button", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
+    children: jsxRuntime.jsxs("button", _objectSpread$e(_objectSpread$e({}, restProps), {}, {
       type: "button",
       ref: ref,
       className: "amsterdam-page-menu__button",
@@ -275,22 +494,22 @@ PageMenuButton.displayName = 'PageMenu.Button';
 PageMenu.Link = PageMenuLink;
 PageMenu.Button = PageMenuButton;
 
-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__*/React.forwardRef(function (_ref, ref) {
+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 TopTaskLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     description = _ref.description,
-    restProps = _objectWithoutProperties(_ref, _excluded$c);
-  return jsxRuntime.jsxs("a", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$d);
+  return jsxRuntime.jsxs("a", _objectSpread$d(_objectSpread$d({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-top-task-link', className),
-    "aria-label": "".concat(label).concat(description ? ", ".concat(description) : ''),
+    "aria-label": "".concat(label, ", ").concat(description),
     children: [jsxRuntime.jsx("span", {
       className: "amsterdam-top-task-link__label",
       children: label
-    }), description && jsxRuntime.jsx("span", {
+    }), jsxRuntime.jsx("span", {
       className: "amsterdam-top-task-link__description",
       children: description
     })]
@@ -298,15 +517,15 @@ var TopTaskLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TopTaskLink.displayName = 'TopTaskLink';
 
-var _excluded$b = ["children", "className", "inverseColor"];
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Blockquote = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 Blockquote = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$b);
-  return jsxRuntime.jsx("blockquote", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$c);
+  return jsxRuntime.jsx("blockquote", _objectSpread$c(_objectSpread$c({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-blockquote', inverseColor && 'amsterdam-blockquote--inverse-color', className),
     children: children
@@ -314,23 +533,23 @@ var Blockquote = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Blockquote.displayName = 'Blockquote';
 
-var _excluded$a = ["children", "className", "invalid", "indeterminate"];
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     invalid = _ref.invalid,
     indeterminate = _ref.indeterminate,
-    restProps = _objectWithoutProperties(_ref, _excluded$a);
-  var id = React.useId();
-  var innerRef = React.useRef(null);
+    restProps = _objectWithoutProperties(_ref, _excluded$b);
+  var id = react.useId();
+  var innerRef = react.useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
-  React.useImperativeHandle(ref, function () {
+  react.useImperativeHandle(ref, function () {
     return innerRef.current;
   });
   // set input to indeterminate
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (innerRef.current) {
       innerRef.current.indeterminate = Boolean(indeterminate);
     }
@@ -340,7 +559,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // without a containing element
     jsxRuntime.jsxs("div", {
       className: clsx('amsterdam-checkbox', className),
-      children: [jsxRuntime.jsx("input", _objectSpread$a(_objectSpread$a({}, restProps), {}, {
+      children: [jsxRuntime.jsx("input", _objectSpread$b(_objectSpread$b({}, restProps), {}, {
         type: "checkbox",
         className: "amsterdam-checkbox__input",
         ref: innerRef,
@@ -358,15 +577,15 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$9 = ["children", "className", "inverseColor"];
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var PageHeading = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 PageHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     inverseColor = _ref.inverseColor,
-    restProps = _objectWithoutProperties(_ref, _excluded$9);
-  return jsxRuntime.jsx("h1", _objectSpread$9(_objectSpread$9({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$a);
+  return jsxRuntime.jsx("h1", _objectSpread$a(_objectSpread$a({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-page-heading', inverseColor && 'amsterdam-page-heading--inverse-color', className),
     children: children
@@ -374,17 +593,17 @@ var PageHeading = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PageHeading.displayName = 'PageHeading';
 
-var _excluded$8 = ["children", "markers", "className"],
+var _excluded$9 = ["children", "markers", "className"],
   _excluded2$2 = ["children", "className"];
-function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var OrderedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$markers = _ref.markers,
     markers = _ref$markers === void 0 ? true : _ref$markers,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$8);
-  return jsxRuntime.jsx("ol", _objectSpread$8(_objectSpread$8({
+    restProps = _objectWithoutProperties(_ref, _excluded$9);
+  return jsxRuntime.jsx("ol", _objectSpread$9(_objectSpread$9({
     ref: ref,
     className: clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)
   }, restProps), {}, {
@@ -392,11 +611,11 @@ var OrderedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 OrderedList.displayName = 'OrderedList';
-var OrderedListItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var OrderedListItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded2$2);
-  return jsxRuntime.jsx("li", _objectSpread$8(_objectSpread$8({
+  return jsxRuntime.jsx("li", _objectSpread$9(_objectSpread$9({
     ref: ref,
     className: clsx('amsterdam-ordered-list__item', className)
   }, restProps), {}, {
@@ -406,9 +625,9 @@ var OrderedListItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 OrderedListItem.displayName = 'OrderedListItem';
 OrderedList.Item = OrderedListItem;
 
-var _excluded$7 = ["children", "className", "inverseColor", "level", "size"];
-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", "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:
@@ -421,17 +640,17 @@ function getHeadingElement(level) {
       return 'h1';
   }
 }
-var Heading = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Heading = /*#__PURE__*/react.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$7);
+    restProps = _objectWithoutProperties(_ref, _excluded$8);
   var HeadingX = getHeadingElement(level);
   var sizeOrLevel = size ? size.split('-')[1] : level;
-  return jsxRuntime.jsx(HeadingX, _objectSpread$7(_objectSpread$7({
+  return jsxRuntime.jsx(HeadingX, _objectSpread$8(_objectSpread$8({
     ref: ref,
     className: clsx('amsterdam-heading', "amsterdam-heading--".concat(sizeOrLevel), inverseColor && 'amsterdam-heading--inverse-color', className)
   }, restProps), {}, {
@@ -440,14 +659,14 @@ var Heading = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Heading.displayName = 'Heading';
 
-var _excluded$6 = ["children"],
+var _excluded$7 = ["children"],
   _excluded2$1 = ["children", "href"];
-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 Breadcrumb = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 Breadcrumb = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded$6);
-  return jsxRuntime.jsx("nav", _objectSpread$6(_objectSpread$6({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$7);
+  return jsxRuntime.jsx("nav", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
     className: "amsterdam-breadcrumb",
     ref: ref,
     children: jsxRuntime.jsx("ol", {
@@ -457,11 +676,11 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 Breadcrumb.displayName = 'Breadcrumb';
-var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var BreadcrumbItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     href = _ref2.href,
     restProps = _objectWithoutProperties(_ref2, _excluded2$1);
-  return jsxRuntime.jsx("li", _objectSpread$6(_objectSpread$6({}, restProps), {}, {
+  return jsxRuntime.jsx("li", _objectSpread$7(_objectSpread$7({}, restProps), {}, {
     className: "amsterdam-breadcrumb-item",
     ref: ref,
     children: jsxRuntime.jsx("a", {
@@ -474,18 +693,18 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$5 = ["children", "variant", "icon", "onBackground", "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 Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+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 Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'standalone' : _ref$variant,
     icon = _ref.icon,
     onBackground = _ref.onBackground,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded$5);
-  return jsxRuntime.jsxs("a", _objectSpread$5(_objectSpread$5({}, otherProps), {}, {
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
+  return jsxRuntime.jsxs("a", _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-link', {
       'amsterdam-link--standalone': variant === 'standalone',
@@ -496,16 +715,16 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'amsterdam-link--on-background-dark': onBackground === 'dark'
     }, className),
     children: [variant === 'inList' && jsxRuntime.jsx(Icon, {
-      svg: icon !== null && icon !== void 0 ? icon : designSystemReactIcons.ChevronRight,
+      svg: icon !== null && icon !== void 0 ? icon : designSystemReactIcons.ChevronRightIcon,
       size: "level-7"
     }), children]
   }));
 });
 Link.displayName = 'Link';
 
-var _excluded$4 = ["children", "disabled", "variant"];
-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 _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; }
 function getAppearance(variant) {
   switch (variant) {
     case 'secondary':
@@ -516,13 +735,13 @@ function getAppearance(variant) {
       return 'primary-action-button';
   }
 }
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutProperties(_ref, _excluded$4);
-  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$4(_objectSpread$4({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
+  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
     appearance: getAppearance(variant),
     ref: ref,
     disabled: disabled,
@@ -532,33 +751,14 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$3 = ["children", "className", "gridColumns", "inverseColor", "size"];
-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 Paragraph = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    gridColumns = _ref.gridColumns,
-    inverseColor = _ref.inverseColor,
-    size = _ref.size,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
-  return jsxRuntime.jsx("p", _objectSpread$3(_objectSpread$3({
-    ref: ref,
-    className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph--".concat(size), inverseColor && 'amsterdam-paragraph--inverse-color', gridColumnClassNames(gridColumns), className)
-  }, otherProps), {}, {
-    children: children
-  }));
-});
-Paragraph.displayName = 'Paragraph';
-
-var _excluded$2 = ["children", "className"];
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FormLabel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded$4 = ["children", "className"];
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$2);
-  return jsxRuntime.jsx("label", _objectSpread$2(_objectSpread$2({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$4);
+  return jsxRuntime.jsx("label", _objectSpread$4(_objectSpread$4({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-form-label', className),
     children: children
@@ -566,17 +766,17 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 FormLabel.displayName = 'FormLabel';
 
-var _excluded$1 = ["children", "markers", "className"],
+var _excluded$3 = ["children", "markers", "className"],
   _excluded2 = ["children", "className"];
-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 UnorderedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var UnorderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$markers = _ref.markers,
     markers = _ref$markers === void 0 ? true : _ref$markers,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1);
-  return jsxRuntime.jsx("ul", _objectSpread$1(_objectSpread$1({
+    restProps = _objectWithoutProperties(_ref, _excluded$3);
+  return jsxRuntime.jsx("ul", _objectSpread$3(_objectSpread$3({
     ref: ref,
     className: clsx('amsterdam-unordered-list', !markers && 'amsterdam-unordered-list--no-markers', className)
   }, restProps), {}, {
@@ -584,11 +784,11 @@ var UnorderedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 UnorderedList.displayName = 'UnorderedList';
-var UnorderedListItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded2);
-  return jsxRuntime.jsx("li", _objectSpread$1(_objectSpread$1({
+  return jsxRuntime.jsx("li", _objectSpread$3(_objectSpread$3({
     ref: ref,
     className: clsx('amsterdam-unordered-list__item', className)
   }, restProps), {}, {
@@ -602,30 +802,30 @@ var defaultValues = {
   headingLevel: 1,
   section: true
 };
-var AccordionContext = /*#__PURE__*/React.createContext(defaultValues);
+var AccordionContext = /*#__PURE__*/react.createContext(defaultValues);
 
-var _excluded = ["label", "expanded", "children", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !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 AccordionSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded$2 = ["label", "expanded", "children", "className"];
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     _ref$expanded = _ref.expanded,
     expanded = _ref$expanded === void 0 ? false : _ref$expanded,
     children = _ref.children,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useContext = React.useContext(AccordionContext),
+    otherProps = _objectWithoutProperties(_ref, _excluded$2);
+  var _useContext = react.useContext(AccordionContext),
     headingLevel = _useContext.headingLevel,
     section = _useContext.section;
-  var _useState = React.useState(expanded),
+  var _useState = react.useState(expanded),
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
     setIsExpanded = _useState2[1];
   var HeadingX = getHeadingElement(headingLevel);
-  var id = React.useId();
+  var id = react.useId();
   var buttonId = "button-".concat(id);
   var panelId = "panel-".concat(id);
-  return jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+  return jsxRuntime.jsxs("div", _objectSpread$2(_objectSpread$2({
     className: clsx('amsterdam-accordion__section', className),
     ref: ref
   }, otherProps), {}, {
@@ -641,7 +841,7 @@ var AccordionSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         type: "button",
         children: [label, jsxRuntime.jsx(Icon, {
-          svg: designSystemReactIcons.ChevronDown,
+          svg: designSystemReactIcons.ChevronDownIcon,
           size: "level-5"
         })]
       })
@@ -702,7 +902,7 @@ var useFocusWithArrows = function useFocusWithArrows(ref) {
           {
             if (getIndex(activeElement) !== focusableEls.length - 1) {
               el = focusableEls[getIndex(activeElement) + 1];
-              // If there is nothing focussed yet, set the focus on the first element
+              // If there is nothing focused yet, set the focus on the first element
               if (activeElement && !focusableEls.includes(activeElement)) {
                 el = focusableEls[0];
               }
@@ -742,15 +942,15 @@ var useFocusWithArrows = function useFocusWithArrows(ref) {
   };
 };
 
-var Accordion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Accordion = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     headingLevel = _ref.headingLevel,
     _ref$section = _ref.section,
     section = _ref$section === void 0 ? true : _ref$section;
-  var innerRef = React.useRef(null);
+  var innerRef = react.useRef(null);
   // use a passed ref if it's there, otherwise use innerRef
-  React.useImperativeHandle(ref, function () {
+  react.useImperativeHandle(ref, function () {
     return innerRef.current;
   });
   var _useFocusWithArrows = useFocusWithArrows(innerRef, true),
@@ -772,26 +972,108 @@ Accordion.displayName = 'Accordion';
 Accordion.Section = AccordionSection;
 Accordion.Section.displayName = 'Accordion.Section';
 
+var gridCellClasses = function gridCellClasses(span, start) {
+  if (!span && !start) {
+    return [];
+  }
+  var classes = [];
+  if (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"));
+  }
+  if (typeof start === 'number') {
+    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"));
+  }
+  return classes;
+};
+
+var _excluded$1 = ["children", "className", "fullWidth", "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__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    fullWidth = _ref.fullWidth,
+    span = _ref.span,
+    start = _ref.start,
+    restProps = _objectWithoutProperties(_ref, _excluded$1);
+  return jsxRuntime.jsx("div", _objectSpread$1(_objectSpread$1({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-grid-cell', fullWidth && 'amsterdam-grid-cell--full-width', gridCellClasses(span, start), className),
+    children: children
+  }));
+});
+GridCell.displayName = 'Grid.Cell';
+
+var _excluded = ["children", "className", "density", "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) {
+  var classes = [];
+  if (paddingVertical) {
+    return ["amsterdam-grid--padding-vertical--".concat(paddingVertical)];
+  }
+  if (paddingBottom) {
+    classes.push("amsterdam-grid--padding-bottom--".concat(paddingBottom));
+  }
+  if (paddingTop) {
+    classes.push("amsterdam-grid--padding-top--".concat(paddingTop));
+  }
+  return classes;
+};
+var Grid = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$density = _ref.density,
+    density = _ref$density === void 0 ? 'low' : _ref$density,
+    paddingBottom = _ref.paddingBottom,
+    paddingTop = _ref.paddingTop,
+    paddingVertical = _ref.paddingVertical,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-grid', density && "amsterdam-grid--density-".concat(density), paddingClasses(paddingBottom, paddingTop, paddingVertical), className),
+    children: children
+  }));
+});
+Grid.Cell = GridCell;
+Grid.displayName = 'Grid';
+GridCell.displayName = 'Grid.Cell';
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AspectRatio = AspectRatio;
 exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Footer = Footer;
 exports.FormLabel = FormLabel;
+exports.Grid = Grid;
 exports.GridCell = GridCell;
 exports.Heading = Heading;
+exports.Highlight = Highlight;
 exports.Icon = Icon;
+exports.Image = Image;
 exports.Link = Link;
 exports.OrderedList = OrderedList;
-exports.PageGrid = PageGrid;
 exports.PageHeading = PageHeading;
 exports.PageMenu = PageMenu;
+exports.Pagination = Pagination;
 exports.Paragraph = Paragraph;
+exports.Screen = Screen;
+exports.Switch = Switch;
 exports.TopTaskLink = TopTaskLink;
 exports.UnorderedList = UnorderedList;
 exports.VisuallyHidden = VisuallyHidden;
-exports.gridColumnClassNames = gridColumnClassNames;
 //# sourceMappingURL=index.cjs.js.map