@amsterdam/design-system-react 0.7.1 → 0.8.0

package/dist/index.cjs.js

@@ -3,23 +3,102 @@
 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 designSystemReactIcons = require('@amsterdam/design-system-react-icons');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
-var _excluded$15 = ["className", "size", "square", "svg"];
-function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1d = ["children", "className"];
+function ownKeys$1j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectOption = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1d);
+  return jsxRuntime.jsx("option", _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select__option', className),
+    children: children
+  }));
+});
+SelectOption.displayName = 'Select.Option';
+
+var _excluded$1c = ["children", "className"];
+function ownKeys$1i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectOptionGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1c);
+  return jsxRuntime.jsx("optgroup", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select__group', className),
+    children: children
+  }));
+});
+SelectOptionGroup.displayName = 'Select.Group';
+
+var _excluded$1b = ["children", "className", "invalid"];
+function ownKeys$1h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    invalid = _ref.invalid,
+    restProps = _objectWithoutProperties(_ref, _excluded$1b);
+  return jsxRuntime.jsx("select", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select', invalid && 'ams-select--invalid', className),
+    "aria-invalid": invalid || undefined,
+    children: children
+  }));
+});
+SelectRoot.displayName = 'Select';
+var Select = Object.assign(SelectRoot, {
+  Option: SelectOption,
+  Group: SelectOptionGroup
+});
+
+var _excluded$1a = ["className"];
+function ownKeys$1g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TimeInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1a);
+  return jsxRuntime.jsx("input", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-time-input', className),
+    type: "time"
+  }));
+});
+TimeInput.displayName = 'TimeInput';
+
+var _excluded$19 = ["className"];
+function ownKeys$1f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DateInput = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$19);
+  return jsxRuntime.jsx("input", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-date-input', className),
+    type: "date"
+  }));
+});
+DateInput.displayName = 'DateInput';
+
+var _excluded$18 = ["className", "size", "square", "svg"];
+function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'level-3' : _ref$size,
     square = _ref.square,
     svg = _ref.svg,
-    otherProps = _objectWithoutProperties(_ref, _excluded$15);
-  return jsxRuntime.jsx("span", _objectSpread$1b(_objectSpread$1b({
+    otherProps = _objectWithoutProperties(_ref, _excluded$18);
+  return jsxRuntime.jsx("span", _objectSpread$1e(_objectSpread$1e({
     ref: ref,
     className: clsx('ams-icon', size === 'level-3' && 'ams-icon--size-3', size === 'level-4' && 'ams-icon--size-4', size === 'level-5' && 'ams-icon--size-5', size === 'level-6' && 'ams-icon--size-6', square && 'ams-icon--square', className)
   }, otherProps), {}, {
@@ -28,29 +107,29 @@ var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$14 = ["className", "cover"];
-function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$17 = ["className", "cover"];
+function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$cover = _ref.cover,
     cover = _ref$cover === void 0 ? false : _ref$cover,
-    restProps = _objectWithoutProperties(_ref, _excluded$14);
-  return jsxRuntime.jsx("img", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$17);
+  return jsxRuntime.jsx("img", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-image', cover && 'ams-image--cover', className)
   }));
 });
 Image.displayName = 'Image';
 
-var _excluded$13 = ["children", "className"];
-function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$16 = ["children", "className"];
+function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VisuallyHidden = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$13);
-  return jsxRuntime.jsx("span", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$16);
+  return jsxRuntime.jsx("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-visually-hidden', className),
     children: children
@@ -58,9 +137,9 @@ var VisuallyHidden = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 VisuallyHidden.displayName = 'VisuallyHidden';
 
-var _excluded$12 = ["label", "imageSrc", "className", "color"];
-function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$15 = ["label", "imageSrc", "className", "color"];
+function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Content = function Content(_ref) {
   var imageSrc = _ref.imageSrc,
     initials = _ref.initials;
@@ -87,10 +166,10 @@ var Avatar = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     className = _ref2.className,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'dark-blue' : _ref2$color,
-    restProps = _objectWithoutProperties(_ref2, _excluded$12);
+    restProps = _objectWithoutProperties(_ref2, _excluded$15);
   var initials = label.slice(0, 2).toUpperCase();
   var a11yLabel = initials.length === 0 ? 'Gebruiker' : "Initialen gebruiker: ".concat(initials);
-  return jsxRuntime.jsxs("span", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+  return jsxRuntime.jsxs("span", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-avatar', "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
     children: [jsxRuntime.jsx(VisuallyHidden, {
@@ -103,15 +182,15 @@ var Avatar = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$11 = ["className", "length", "maxLength"];
-function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$14 = ["className", "length", "maxLength"];
+function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormFieldCharacterCounter = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     length = _ref.length,
     maxLength = _ref.maxLength,
-    restProps = _objectWithoutProperties(_ref, _excluded$11);
-  return jsxRuntime.jsx("div", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$14);
+  return jsxRuntime.jsx("div", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-form-field-character-counter', length > maxLength && 'ams-form-field-character-counter--error', className),
     role: "status",
@@ -120,6 +199,56 @@ var FormFieldCharacterCounter = /*#__PURE__*/react.forwardRef(function (_ref, re
 });
 FormFieldCharacterCounter.displayName = 'FormFieldCharacterCounter';
 
+var _excluded$13 = ["children", "className"];
+function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListDetails = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$13);
+  return jsxRuntime.jsx("dd", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list__details', className),
+    children: children
+  }));
+});
+DescriptionListDetails.displayName = 'DescriptionList.Details';
+
+var _excluded$12 = ["children", "className"];
+function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListTerm = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$12);
+  return jsxRuntime.jsx("dt", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list__term', className),
+    children: children
+  }));
+});
+DescriptionListTerm.displayName = 'DescriptionList.Term';
+
+var _excluded$11 = ["children", "className", "inverseColor"];
+function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    inverseColor = _ref.inverseColor,
+    restProps = _objectWithoutProperties(_ref, _excluded$11);
+  return jsxRuntime.jsx("dl", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list', inverseColor && 'ams-description-list--inverse-color', className),
+    children: children
+  }));
+});
+DescriptionListRoot.displayName = 'DescriptionList';
+var DescriptionList = Object.assign(DescriptionListRoot, {
+  Term: DescriptionListTerm,
+  Details: DescriptionListDetails
+});
+
 var _excluded$10 = ["as", "children", "className", "gap"];
 function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -721,9 +850,6 @@ var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Overlap.displayName = 'Overlap';
 
-var _excluded$D = ["children", "className", "inverseColor", "level", "size"];
-function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getHeadingElement(level) {
   switch (level) {
     case 2:
@@ -736,6 +862,10 @@ function getHeadingElement(level) {
       return 'h1';
   }
 }
+
+var _excluded$D = ["children", "className", "inverseColor", "level", "size"];
+function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -1043,7 +1173,7 @@ var SearchFieldButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
       children: "Zoeken"
     }), jsxRuntime.jsx(Icon, {
       svg: designSystemReactIcons.SearchIcon,
-      size: "level-6",
+      size: "level-5",
       square: true
     })]
   }));
@@ -1271,18 +1401,19 @@ var Pagination = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Pagination.displayName = 'Pagination';
 
-var _excluded$t = ["children", "className", "maxWidth"];
+var _excluded$t = ["children", "className", "fullHeight", "maxWidth"];
 function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Screen = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    fullHeight = _ref.fullHeight,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 'wide' : _ref$maxWidth,
     restProps = _objectWithoutProperties(_ref, _excluded$t);
   return jsxRuntime.jsx("div", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
     ref: ref,
-    className: clsx('ams-screen', "ams-screen--".concat(maxWidth), className),
+    className: clsx('ams-screen', fullHeight && 'ams-screen--full-height', "ams-screen--".concat(maxWidth), className),
     children: children
   }));
 });
@@ -1537,16 +1668,18 @@ var PageMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 PageMenuLink.displayName = 'PageMenu.Link';
 
-var _excluded$g = ["alignEnd", "children", "className"];
+var _excluded$g = ["alignEnd", "children", "className", "wrap"];
 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 PageMenuRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var alignEnd = _ref.alignEnd,
     children = _ref.children,
     className = _ref.className,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? true : _ref$wrap,
     restProps = _objectWithoutProperties(_ref, _excluded$g);
   return jsxRuntime.jsx("ul", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
-    className: clsx('ams-page-menu', alignEnd && "ams-page-menu--align-end", className),
+    className: clsx('ams-page-menu', alignEnd && "ams-page-menu--align-end", !wrap && "ams-page-menu--no-wrap", className),
     ref: ref,
     children: children
   }));
@@ -1782,17 +1915,17 @@ Button.displayName = 'Button';
 var _excluded$5 = ["children", "className"];
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$5);
   return jsxRuntime.jsx("label", _objectSpread$5(_objectSpread$5({}, restProps), {}, {
     ref: ref,
-    className: clsx('ams-form-label', className),
+    className: clsx('ams-label', className),
     children: children
   }));
 });
-FormLabel.displayName = 'FormLabel';
+Label.displayName = 'Label';
 
 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; }
@@ -1878,10 +2011,11 @@ var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
           return setIsExpanded(!isExpanded);
         },
         type: "button",
-        children: [label, jsxRuntime.jsx(Icon, {
+        children: [jsxRuntime.jsx(Icon, {
           svg: designSystemReactIcons.ChevronDownIcon,
-          size: "level-5"
-        })]
+          size: "level-5",
+          className: "ams-accordion__icon"
+        }), label]
       })
     }), section ? jsxRuntime.jsx("section", {
       id: panelId,
@@ -2028,17 +2162,19 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Column = Column;
+exports.DateInput = DateInput;
+exports.DescriptionList = DescriptionList;
 exports.Dialog = Dialog;
 exports.Fieldset = Fieldset;
 exports.Footer = Footer;
 exports.FormFieldCharacterCounter = FormFieldCharacterCounter;
-exports.FormLabel = FormLabel;
 exports.Grid = Grid;
 exports.Header = Header;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Image = Image;
+exports.Label = Label;
 exports.Link = Link;
 exports.LinkList = LinkList;
 exports.Logo = Logo;
@@ -2054,6 +2190,7 @@ exports.Radio = Radio;
 exports.Row = Row;
 exports.Screen = Screen;
 exports.SearchField = SearchField;
+exports.Select = Select;
 exports.SkipLink = SkipLink;
 exports.Spotlight = Spotlight;
 exports.Switch = Switch;
@@ -2061,6 +2198,7 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
+exports.TimeInput = TimeInput;
 exports.TopTaskLink = TopTaskLink;
 exports.UnorderedList = UnorderedList;
 exports.VisuallyHidden = VisuallyHidden;

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,5 +1,33 @@
 import * as react from 'react';
-import { HTMLAttributes, PropsWithChildren, InputHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, SelectHTMLAttributes, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
+
+type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
+
+type SelectProps = {
+    /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
+    invalid?: boolean;
+} & PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>>;
+declare const Select: react.ForwardRefExoticComponent<{
+    /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
+    invalid?: boolean | undefined;
+} & SelectHTMLAttributes<HTMLSelectElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLSelectElement>> & {
+    Option: react.ForwardRefExoticComponent<SelectOptionProps & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<HTMLOptionElement>>;
+    Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<HTMLOptGroupElement>>;
+};
+
+type TimeInputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type DateInputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
 
 declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
 type AvatarColor = (typeof avatarColors)[number];
@@ -23,6 +51,26 @@ declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAtt
     maxLength: number;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type DescriptionListProps = {
+    inverseColor?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
+declare const DescriptionList: react.ForwardRefExoticComponent<{
+    inverseColor?: boolean | undefined;
+} & HTMLAttributes<HTMLDListElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDListElement>> & {
+    Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<HTMLElement>>;
+    Details: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
 declare const rowGapSizes: Array<string>;
 type RowTag = 'article' | 'div' | 'section';
 type RowGap = (typeof rowGapSizes)[number];
@@ -31,15 +79,15 @@ type RowProps = {
     as?: RowTag;
     /** The amount of vertical space between the row’s children. */
     gap?: RowGap;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Row: react.ForwardRefExoticComponent<{
     /** The element to render the row with. */
     as?: RowTag | undefined;
     /** The amount of vertical space between the row’s children. */
     gap?: string | undefined;
-} & HTMLAttributes<HTMLDivElement> & {
+} & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<unknown>>;
 
 type RadioProps = {
     invalid?: boolean;
@@ -94,15 +142,15 @@ type ColumnProps = {
     as?: ColumnTag;
     /** The amount of vertical space between the column’s children. */
     gap?: ColumnGap;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Column: react.ForwardRefExoticComponent<{
     /** The element to render the column with. */
     as?: ColumnTag | undefined;
     /** The amount of vertical space between the column’s children. */
     gap?: string | undefined;
-} & HTMLAttributes<HTMLDivElement> & {
+} & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<unknown>>;
 
 type FieldsetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
     legend: string;
@@ -273,10 +321,10 @@ declare const Dialog: react.ForwardRefExoticComponent<{
 } & react.RefAttributes<HTMLDialogElement>>;
 
 type ImageProps = {
-    cover?: Boolean;
+    cover?: boolean;
 } & ImgHTMLAttributes<HTMLImageElement>;
 declare const Image: react.ForwardRefExoticComponent<{
-    cover?: Boolean | undefined;
+    cover?: boolean | undefined;
 } & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
 
 type PaginationProps = {
@@ -318,9 +366,15 @@ declare const Pagination: react.ForwardRefExoticComponent<{
 
 type ScreenMaxWidth = 'wide' | 'x-wide';
 type ScreenProps = {
+    /** Whether the screen should stretch to the full height of the viewport. */
+    fullHeight?: boolean;
+    /** The maximum width of the screen. */
     maxWidth?: ScreenMaxWidth;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Screen: react.ForwardRefExoticComponent<{
+    /** Whether the screen should stretch to the full height of the viewport. */
+    fullHeight?: boolean | undefined;
+    /** The maximum width of the screen. */
     maxWidth?: ScreenMaxWidth | undefined;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode;
@@ -342,7 +396,7 @@ declare const Spotlight: react.ForwardRefExoticComponent<{
     color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<unknown>>;
 
 type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
@@ -470,6 +524,10 @@ type PageMenuProps = {
      * If the menu itself aligns to the end of its container, you should set this to `true`.
      */
     alignEnd?: boolean;
+    /**
+     * Whether menu items should wrap if they don’t fit on a single row.
+     */
+    wrap?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const PageMenu: react.ForwardRefExoticComponent<{
     /**
@@ -477,6 +535,10 @@ declare const PageMenu: react.ForwardRefExoticComponent<{
      * If the menu itself aligns to the end of its container, you should set this to `true`.
      */
     alignEnd?: boolean | undefined;
+    /**
+     * Whether menu items should wrap if they don’t fit on a single row.
+     */
+    wrap?: boolean | undefined;
 } & HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLUListElement>> & {
@@ -612,7 +674,7 @@ declare const Paragraph: react.ForwardRefExoticComponent<{
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
-declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
+declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLLabelElement>>;
 
@@ -645,10 +707,12 @@ declare const Icon: react.ForwardRefExoticComponent<{
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
 
 type AccordionProps = {
+    /** The hierarchical level of the accordion title within the document. */
     headingLevel: HeadingLevel;
     section?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Accordion: react.ForwardRefExoticComponent<{
+    /** The hierarchical level of the accordion title within the document. */
     headingLevel: HeadingLevel;
     section?: boolean | undefined;
 } & HTMLAttributes<HTMLDivElement> & {
@@ -680,7 +744,7 @@ type GridCellSpanAndStartProps = {
 };
 type GridCellProps = {
     as?: 'article' | 'div' | 'section';
-} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type GridColumnNumbers = {
@@ -707,7 +771,7 @@ type GridProps = {
     gapVertical?: 'none' | 'small' | 'large';
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
-    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLDivElement>>;
+    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
 };
 
-export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, FormLabel, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };
+export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };

package/dist/index.esm.js

@@ -1,23 +1,102 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { PersonalLoginIcon, ChevronRightIcon, CloseIcon, SearchIcon, ChevronLeftIcon, AlertIcon, InfoIcon, CheckmarkIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
 import clsx, { clsx as clsx$1 } from 'clsx';
 import { forwardRef, useId, createContext, useContext, startTransition, useState, useRef, useImperativeHandle, useMemo, useEffect } from 'react';
+import { PersonalLoginIcon, ChevronRightIcon, CloseIcon, SearchIcon, ChevronLeftIcon, AlertIcon, InfoIcon, CheckmarkIcon, ChevronDownIcon } from '@amsterdam/design-system-react-icons';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
-var _excluded$15 = ["className", "size", "square", "svg"];
-function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$1d = ["children", "className"];
+function ownKeys$1j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectOption = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1d);
+  return jsx("option", _objectSpread$1j(_objectSpread$1j({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select__option', className),
+    children: children
+  }));
+});
+SelectOption.displayName = 'Select.Option';
+
+var _excluded$1c = ["children", "className"];
+function ownKeys$1i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectOptionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1c);
+  return jsx("optgroup", _objectSpread$1i(_objectSpread$1i({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select__group', className),
+    children: children
+  }));
+});
+SelectOptionGroup.displayName = 'Select.Group';
+
+var _excluded$1b = ["children", "className", "invalid"];
+function ownKeys$1h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SelectRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    invalid = _ref.invalid,
+    restProps = _objectWithoutProperties(_ref, _excluded$1b);
+  return jsx("select", _objectSpread$1h(_objectSpread$1h({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-select', invalid && 'ams-select--invalid', className),
+    "aria-invalid": invalid || undefined,
+    children: children
+  }));
+});
+SelectRoot.displayName = 'Select';
+var Select = Object.assign(SelectRoot, {
+  Option: SelectOption,
+  Group: SelectOptionGroup
+});
+
+var _excluded$1a = ["className"];
+function ownKeys$1g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TimeInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$1a);
+  return jsx("input", _objectSpread$1g(_objectSpread$1g({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-time-input', className),
+    type: "time"
+  }));
+});
+TimeInput.displayName = 'TimeInput';
+
+var _excluded$19 = ["className"];
+function ownKeys$1f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DateInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$19);
+  return jsx("input", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-date-input', className),
+    type: "date"
+  }));
+});
+DateInput.displayName = 'DateInput';
+
+var _excluded$18 = ["className", "size", "square", "svg"];
+function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'level-3' : _ref$size,
     square = _ref.square,
     svg = _ref.svg,
-    otherProps = _objectWithoutProperties(_ref, _excluded$15);
-  return jsx("span", _objectSpread$1b(_objectSpread$1b({
+    otherProps = _objectWithoutProperties(_ref, _excluded$18);
+  return jsx("span", _objectSpread$1e(_objectSpread$1e({
     ref: ref,
     className: clsx('ams-icon', size === 'level-3' && 'ams-icon--size-3', size === 'level-4' && 'ams-icon--size-4', size === 'level-5' && 'ams-icon--size-5', size === 'level-6' && 'ams-icon--size-6', square && 'ams-icon--square', className)
   }, otherProps), {}, {
@@ -26,29 +105,29 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$14 = ["className", "cover"];
-function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$17 = ["className", "cover"];
+function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Image = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$cover = _ref.cover,
     cover = _ref$cover === void 0 ? false : _ref$cover,
-    restProps = _objectWithoutProperties(_ref, _excluded$14);
-  return jsx("img", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$17);
+  return jsx("img", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-image', cover && 'ams-image--cover', className)
   }));
 });
 Image.displayName = 'Image';
 
-var _excluded$13 = ["children", "className"];
-function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$16 = ["children", "className"];
+function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VisuallyHidden = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$13);
-  return jsx("span", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$16);
+  return jsx("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-visually-hidden', className),
     children: children
@@ -56,9 +135,9 @@ var VisuallyHidden = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 VisuallyHidden.displayName = 'VisuallyHidden';
 
-var _excluded$12 = ["label", "imageSrc", "className", "color"];
-function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$15 = ["label", "imageSrc", "className", "color"];
+function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Content = function Content(_ref) {
   var imageSrc = _ref.imageSrc,
     initials = _ref.initials;
@@ -85,10 +164,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     className = _ref2.className,
     _ref2$color = _ref2.color,
     color = _ref2$color === void 0 ? 'dark-blue' : _ref2$color,
-    restProps = _objectWithoutProperties(_ref2, _excluded$12);
+    restProps = _objectWithoutProperties(_ref2, _excluded$15);
   var initials = label.slice(0, 2).toUpperCase();
   var a11yLabel = initials.length === 0 ? 'Gebruiker' : "Initialen gebruiker: ".concat(initials);
-  return jsxs("span", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+  return jsxs("span", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-avatar', "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
     children: [jsx(VisuallyHidden, {
@@ -101,15 +180,15 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$11 = ["className", "length", "maxLength"];
-function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded$14 = ["className", "length", "maxLength"];
+function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormFieldCharacterCounter = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     length = _ref.length,
     maxLength = _ref.maxLength,
-    restProps = _objectWithoutProperties(_ref, _excluded$11);
-  return jsx("div", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$14);
+  return jsx("div", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
     ref: ref,
     className: clsx('ams-form-field-character-counter', length > maxLength && 'ams-form-field-character-counter--error', className),
     role: "status",
@@ -118,6 +197,56 @@ var FormFieldCharacterCounter = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 FormFieldCharacterCounter.displayName = 'FormFieldCharacterCounter';
 
+var _excluded$13 = ["children", "className"];
+function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListDetails = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$13);
+  return jsx("dd", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list__details', className),
+    children: children
+  }));
+});
+DescriptionListDetails.displayName = 'DescriptionList.Details';
+
+var _excluded$12 = ["children", "className"];
+function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListTerm = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$12);
+  return jsx("dt", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list__term', className),
+    children: children
+  }));
+});
+DescriptionListTerm.displayName = 'DescriptionList.Term';
+
+var _excluded$11 = ["children", "className", "inverseColor"];
+function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DescriptionListRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    inverseColor = _ref.inverseColor,
+    restProps = _objectWithoutProperties(_ref, _excluded$11);
+  return jsx("dl", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+    ref: ref,
+    className: clsx('ams-description-list', inverseColor && 'ams-description-list--inverse-color', className),
+    children: children
+  }));
+});
+DescriptionListRoot.displayName = 'DescriptionList';
+var DescriptionList = Object.assign(DescriptionListRoot, {
+  Term: DescriptionListTerm,
+  Details: DescriptionListDetails
+});
+
 var _excluded$10 = ["as", "children", "className", "gap"];
 function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -719,9 +848,6 @@ var Overlap = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Overlap.displayName = 'Overlap';
 
-var _excluded$D = ["children", "className", "inverseColor", "level", "size"];
-function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function getHeadingElement(level) {
   switch (level) {
     case 2:
@@ -734,6 +860,10 @@ function getHeadingElement(level) {
       return 'h1';
   }
 }
+
+var _excluded$D = ["children", "className", "inverseColor", "level", "size"];
+function ownKeys$J(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$J(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$J(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$J(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -1041,7 +1171,7 @@ var SearchFieldButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       children: "Zoeken"
     }), jsx(Icon, {
       svg: SearchIcon,
-      size: "level-6",
+      size: "level-5",
       square: true
     })]
   }));
@@ -1269,18 +1399,19 @@ var Pagination = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Pagination.displayName = 'Pagination';
 
-var _excluded$t = ["children", "className", "maxWidth"];
+var _excluded$t = ["children", "className", "fullHeight", "maxWidth"];
 function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Screen = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    fullHeight = _ref.fullHeight,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 'wide' : _ref$maxWidth,
     restProps = _objectWithoutProperties(_ref, _excluded$t);
   return jsx("div", _objectSpread$t(_objectSpread$t({}, restProps), {}, {
     ref: ref,
-    className: clsx('ams-screen', "ams-screen--".concat(maxWidth), className),
+    className: clsx('ams-screen', fullHeight && 'ams-screen--full-height', "ams-screen--".concat(maxWidth), className),
     children: children
   }));
 });
@@ -1535,16 +1666,18 @@ var PageMenuLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 PageMenuLink.displayName = 'PageMenu.Link';
 
-var _excluded$g = ["alignEnd", "children", "className"];
+var _excluded$g = ["alignEnd", "children", "className", "wrap"];
 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 PageMenuRoot = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var alignEnd = _ref.alignEnd,
     children = _ref.children,
     className = _ref.className,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? true : _ref$wrap,
     restProps = _objectWithoutProperties(_ref, _excluded$g);
   return jsx("ul", _objectSpread$g(_objectSpread$g({}, restProps), {}, {
-    className: clsx('ams-page-menu', alignEnd && "ams-page-menu--align-end", className),
+    className: clsx('ams-page-menu', alignEnd && "ams-page-menu--align-end", !wrap && "ams-page-menu--no-wrap", className),
     ref: ref,
     children: children
   }));
@@ -1780,17 +1913,17 @@ Button.displayName = 'Button';
 var _excluded$5 = ["children", "className"];
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FormLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Label = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded$5);
   return jsx("label", _objectSpread$5(_objectSpread$5({}, restProps), {}, {
     ref: ref,
-    className: clsx('ams-form-label', className),
+    className: clsx('ams-label', className),
     children: children
   }));
 });
-FormLabel.displayName = 'FormLabel';
+Label.displayName = 'Label';
 
 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; }
@@ -1876,10 +2009,11 @@ var AccordionSection = /*#__PURE__*/forwardRef(function (_ref, ref) {
           return setIsExpanded(!isExpanded);
         },
         type: "button",
-        children: [label, jsx(Icon, {
+        children: [jsx(Icon, {
           svg: ChevronDownIcon,
-          size: "level-5"
-        })]
+          size: "level-5",
+          className: "ams-accordion__icon"
+        }), label]
       })
     }), section ? jsx("section", {
       id: panelId,
@@ -2015,5 +2149,5 @@ var Grid = Object.assign(GridRoot, {
   Cell: GridCell
 });
 
-export { Accordion, Alert, AspectRatio, Avatar, Badge, Blockquote, Breadcrumb, Button, Card, Checkbox, Column, Dialog, Fieldset, Footer, FormFieldCharacterCounter, FormLabel, Grid, Header, Heading, Icon, IconButton, Image, Link, LinkList, Logo, Mark, MegaMenu, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, Radio, Row, Screen, SearchField, SkipLink, Spotlight, Switch, Table, Tabs, TextArea, TextInput, TopTaskLink, UnorderedList, VisuallyHidden };
+export { Accordion, Alert, AspectRatio, Avatar, Badge, Blockquote, Breadcrumb, Button, Card, Checkbox, Column, DateInput, DescriptionList, Dialog, Fieldset, Footer, FormFieldCharacterCounter, Grid, Header, Heading, Icon, IconButton, Image, Label, Link, LinkList, Logo, Mark, MegaMenu, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, Radio, Row, Screen, SearchField, Select, SkipLink, Spotlight, Switch, Table, Tabs, TextArea, TextInput, TimeInput, TopTaskLink, UnorderedList, VisuallyHidden };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.8.0",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -24,43 +24,43 @@
     "dist/"
   ],
   "dependencies": {
+    "@babel/runtime": "7.24.4",
     "clsx": "2.1.0",
     "@amsterdam/design-system-react-icons": "0.1.12"
   },
   "devDependencies": {
-    "@babel/core": "7.24.1",
-    "@babel/plugin-transform-runtime": "7.24.1",
-    "@babel/preset-env": "7.24.1",
+    "@babel/core": "7.24.4",
+    "@babel/plugin-transform-runtime": "7.24.3",
+    "@babel/preset-env": "7.24.4",
     "@babel/preset-react": "7.24.1",
-    "@babel/runtime": "7.24.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/pluginutils": "5.1.0",
-    "@testing-library/dom": "9.3.4",
+    "@testing-library/dom": "10.0.0",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.2",
+    "@testing-library/react": "15.0.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.17.0",
-    "@types/react": "18.2.67",
+    "@types/react": "18.2.79",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
-    "next": "14.1.4",
+    "next": "14.2.1",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.37",
+    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "4.13.0",
+    "rollup": "4.14.3",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.0.1",
+    "rollup-plugin-node-externals": "7.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.72.0",
+    "sass": "1.75.0",
     "tslib": "2.6.2"
   },
   "peerDependencies": {