@amsterdam/design-system-react 0.1.2 → 0.1.4

package/dist/index.cjs.js

@@ -6,49 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var react = require('react');
 var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
+var componentLibraryReact = require('@utrecht/component-library-react');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 
-var _excluded$6 = ["children", "className"];
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Grid = function Grid(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$6);
-  return jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({
-    className: clsx('amsterdam-grid', className)
-  }, restProps), {}, {
-    children: children
-  }));
-};
-
-var _excluded$5 = ["spanSmall", "startSmall", "spanLarge", "startLarge", "children", "className"];
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var GridItem = function GridItem(_ref) {
-  var _ref$spanSmall = _ref.spanSmall,
-    spanSmall = _ref$spanSmall === void 0 ? 4 : _ref$spanSmall,
-    startSmall = _ref.startSmall,
-    _ref$spanLarge = _ref.spanLarge,
-    spanLarge = _ref$spanLarge === void 0 ? 12 : _ref$spanLarge,
-    startLarge = _ref.startLarge,
-    children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$5);
-  var maxSpanSmall = startSmall && 5 - startSmall;
-  var actualSpanSmall = maxSpanSmall && spanSmall > maxSpanSmall ? maxSpanSmall : spanSmall;
-  var maxSpanLarge = startLarge && 13 - startLarge;
-  var actualSpanLarge = maxSpanLarge && spanLarge > maxSpanLarge ? maxSpanLarge : spanLarge;
-  return jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({
-    className: clsx("amsterdam-col-span-".concat(actualSpanSmall), "amsterdam-col-span-".concat(actualSpanLarge, "--large"), startSmall && "amsterdam-col-start-".concat(startSmall), startLarge && "amsterdam-col-start-".concat(startLarge, "--large"), className)
-  }, restProps), {}, {
-    children: children
-  }));
-};
-
-var _excluded$4 = ["level", "styleLevel", "children", "className"];
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function getElement(level) {
+var _excluded$8 = ["children", "className", "level", "size"];
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function getHeadingElement(level) {
   switch (level) {
     case 2:
       return 'h2';
@@ -56,104 +20,360 @@ function getElement(level) {
       return 'h3';
     case 4:
       return 'h4';
-    case 5:
-      return 'h5';
-    case 6:
-      return 'h6';
     default:
       return 'h1';
   }
 }
 var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var _ref$level = _ref.level,
-    level = _ref$level === void 0 ? 1 : _ref$level,
-    styleLevel = _ref.styleLevel,
-    children = _ref.children,
+  var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$4);
-  var HeadingX = getElement(level);
-  return jsxRuntime.jsx(HeadingX, _objectSpread$4(_objectSpread$4({
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 1 : _ref$level,
+    size = _ref.size,
+    restProps = _objectWithoutProperties(_ref, _excluded$8);
+  var HeadingX = getHeadingElement(level);
+  var sizeOrLevel = size ? size.split('-')[1] : level;
+  return jsxRuntime.jsx(HeadingX, _objectSpread$8(_objectSpread$8({
     ref: ref,
-    className: clsx('amsterdam-heading', "amsterdam-heading-".concat(styleLevel || level), className)
+    className: clsx('amsterdam-heading', "amsterdam-heading-".concat(sizeOrLevel), className)
   }, restProps), {}, {
     children: children
   }));
 });
 Heading.displayName = 'Heading';
 
-var _excluded$3 = ["children", "className", "size"];
+var _excluded$7 = ["className", "size", "svg"];
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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$7);
+  return jsxRuntime.jsx("span", _objectSpread$7(_objectSpread$7({
+    ref: ref,
+    className: clsx('amsterdam-icon', size === 'level-3' && 'amsterdam-icon-size-3', size === 'level-4' && 'amsterdam-icon-size-4', size === 'level-5' && 'amsterdam-icon-size-5', size === 'level-6' && 'amsterdam-icon-size-6', size === 'level-7' && 'amsterdam-icon-size-7', className)
+  }, otherProps), {}, {
+    children: svg()
+  }));
+});
+Icon.displayName = 'Icon';
+
+var _excluded$6 = ["children", "variant", "onBackground", "className"];
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    onBackground = _ref.onBackground,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
+  return jsxRuntime.jsxs("a", _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-link', {
+      'amsterdam-link--inline': variant === 'inline',
+      'amsterdam-link--standalone-bold': variant === 'standaloneBold',
+      'amsterdam-link--in-list': variant === 'inList',
+      'amsterdam-link--on-background-light': onBackground === 'light',
+      'amsterdam-link--on-background-dark': onBackground === 'dark'
+    }, className),
+    children: [variant === 'inList' && jsxRuntime.jsx(Icon, {
+      svg: designSystemReactIcons.ChevronRight,
+      size: "level-7"
+    }), children]
+  }));
+});
+Link.displayName = 'Link';
+
+var _excluded$5 = ["children", "disabled", "variant"];
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function getAppearance(variant) {
+  switch (variant) {
+    case 'secondary':
+      return 'secondary-action-button';
+    case 'tertiary':
+      return 'subtle-button';
+    default:
+      return 'primary-action-button';
+  }
+}
+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$5);
+  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
+    appearance: getAppearance(variant),
+    ref: ref,
+    disabled: disabled,
+    className: clsx('amsterdam-button', variant === 'secondary' && 'amsterdam-button--secondary'),
+    children: children
+  }));
+});
+Button.displayName = 'Button';
+
+var _excluded$4 = ["children", "size", "className"];
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+  return jsxRuntime.jsx("p", _objectSpread$4(_objectSpread$4({
+    ref: ref,
+    className: clsx('amsterdam-paragraph', size && "amsterdam-paragraph-".concat(size), className)
+  }, otherProps), {}, {
+    children: children
+  }));
+});
+Paragraph.displayName = 'Paragraph';
+
+var _excluded$3 = ["children", "className"];
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Icon = function Icon(_ref) {
+var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    otherProps = _objectWithoutProperties(_ref, _excluded$3);
-  return jsxRuntime.jsx("span", _objectSpread$3(_objectSpread$3({
-    className: clsx('amsterdam-icon', size === 'small' && 'amsterdam-icon-small', size === 'medium' && 'amsterdam-icon-medium', size === 'large' && 'amsterdam-icon-large', className)
-  }, otherProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$3);
+  return jsxRuntime.jsx("label", _objectSpread$3(_objectSpread$3({}, restProps), {}, {
+    ref: ref,
+    className: clsx('amsterdam-form-label', className),
     children: children
   }));
-};
+});
+FormLabel.displayName = 'FormLabel';
 
-var _excluded$2 = ["children", "className", "icon", "variant"];
+var _excluded$2 = ["children", "className"],
+  _excluded2 = ["children", "className"];
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Link = function Link(_ref) {
+var UnorderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
-    variant = _ref.variant,
     restProps = _objectWithoutProperties(_ref, _excluded$2);
-  return jsxRuntime.jsxs("a", _objectSpread$2(_objectSpread$2({
-    className: clsx('amsterdam-link', variant === 'standalone' && 'amsterdam-link-standalone', variant === 'inList' && 'amsterdam-link-inlist', variant === 'inline' && 'amsterdam-link-inline', className)
+  return jsxRuntime.jsx("ul", _objectSpread$2(_objectSpread$2({
+    ref: ref,
+    className: clsx('amsterdam-unordered-list', className)
   }, restProps), {}, {
-    children: [variant === 'inList' && jsxRuntime.jsx(Icon, {
-      size: icon ? 'medium' : 'small',
-      children: icon ? icon : jsxRuntime.jsx(designSystemReactIcons.ChevronRight, {})
-    }), children, variant === 'inline' && icon && jsxRuntime.jsx(Icon, {
-      children: icon
-    })]
+    children: children
   }));
+});
+UnorderedList.displayName = 'UnorderedList';
+var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
+  return jsxRuntime.jsx("li", _objectSpread$2(_objectSpread$2({
+    ref: ref,
+    className: clsx('amsterdam-unordered-list__item', className)
+  }, restProps), {}, {
+    children: children
+  }));
+});
+UnorderedListItem.displayName = 'UnorderedListItem';
+UnorderedList.Item = UnorderedListItem;
+
+var defaultValues = {
+  headingLevel: 1,
+  section: true
 };
+var AccordionContext = /*#__PURE__*/react.createContext(defaultValues);
 
-var _excluded$1 = ["children", "className"];
+var _excluded$1 = ["label", "expanded", "children", "className"];
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var List = function List(_ref) {
-  var children = _ref.children,
+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,
-    restProps = _objectWithoutProperties(_ref, _excluded$1);
-  return jsxRuntime.jsx("ul", _objectSpread$1(_objectSpread$1({
-    className: clsx('amsterdam-list', className)
-  }, restProps), {}, {
-    children: children
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useContext = react.useContext(AccordionContext),
+    headingLevel = _useContext.headingLevel,
+    section = _useContext.section;
+  var _useState = react.useState(expanded),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var HeadingX = getHeadingElement(headingLevel);
+  var id = react.useId();
+  var buttonId = "button-".concat(id);
+  var panelId = "panel-".concat(id);
+  return jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
+    className: clsx('amsterdam-accordion__section', className),
+    ref: ref
+  }, otherProps), {}, {
+    children: [jsxRuntime.jsx(HeadingX, {
+      className: 'amsterdam-accordion__header',
+      children: jsxRuntime.jsxs("button", {
+        "aria-controls": panelId,
+        "aria-expanded": isExpanded,
+        className: "amsterdam-accordion__button",
+        id: buttonId,
+        onClick: function onClick() {
+          return setIsExpanded(!isExpanded);
+        },
+        type: "button",
+        children: [label, jsxRuntime.jsx(Icon, {
+          svg: designSystemReactIcons.ChevronDown,
+          size: "level-5"
+        })]
+      })
+    }), section ? jsxRuntime.jsx("section", {
+      id: panelId,
+      "aria-labelledby": buttonId,
+      className: clsx('amsterdam-accordion__panel', {
+        'amsterdam-accordion__panel--expanded': isExpanded
+      }),
+      children: children
+    }) : jsxRuntime.jsx("div", {
+      id: panelId,
+      "aria-labelledby": buttonId,
+      className: clsx('amsterdam-accordion__panel', {
+        'amsterdam-accordion__panel--expanded': isExpanded
+      }),
+      children: children
+    })]
   }));
+});
+AccordionSection.displayName = 'AccordionSection';
+
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+var KeyboardKeys = {
+  ArrowUp: 'ArrowUp',
+  ArrowDown: 'ArrowDown',
+  ArrowRight: 'ArrowRight',
+  ArrowLeft: 'ArrowLeft',
+  Home: 'Home',
+  End: 'End'
+};
+/**
+ * Focus on children with arrow keys and home / end buttons.
+ *
+ * @param ref Component ref
+ * @param rotating Jump to first item from last or vice versa
+ * @param horizontally In case you need to navigate horizontally, using left / right arrow buttons
+ */
+var useFocusWithArrows = function useFocusWithArrows(ref) {
+  var rotating = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var horizontally = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var next = horizontally ? KeyboardKeys.ArrowRight : KeyboardKeys.ArrowDown;
+  var previous = horizontally ? KeyboardKeys.ArrowLeft : KeyboardKeys.ArrowUp;
+  var keyDown = function keyDown(e) {
+    if (ref.current) {
+      var element = ref.current;
+      var activeElement = window.document.activeElement;
+      var focusableEls = Array.from(element.querySelectorAll('.amsterdam-accordion__button'));
+      var getIndex = function getIndex(el) {
+        return el && focusableEls.includes(el) ? focusableEls.indexOf(el) : 0;
+      };
+      var el;
+      switch (e.key) {
+        case next:
+          {
+            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 (activeElement && !focusableEls.includes(activeElement)) {
+                el = focusableEls[0];
+              }
+            } else if (rotating) {
+              el = focusableEls[0];
+            }
+            break;
+          }
+        case previous:
+          {
+            if (getIndex(activeElement) !== 0) {
+              el = focusableEls[getIndex(activeElement) - 1];
+            } else if (rotating) {
+              el = focusableEls[focusableEls.length - 1];
+            }
+            break;
+          }
+        case KeyboardKeys.Home:
+          {
+            el = focusableEls[0];
+            break;
+          }
+        case KeyboardKeys.End:
+          {
+            el = focusableEls[focusableEls.length - 1];
+            break;
+          }
+      }
+      if ((e.key === KeyboardKeys.ArrowDown || e.key === KeyboardKeys.ArrowUp || e.key === KeyboardKeys.ArrowLeft || e.key === KeyboardKeys.ArrowRight || e.key === KeyboardKeys.Home || e.key === KeyboardKeys.End) && el instanceof HTMLElement) {
+        el.focus();
+        e.preventDefault();
+      }
+    }
+  };
+  return {
+    keyDown: keyDown
+  };
 };
 
-var _excluded = ["children", "variant", "className"];
+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);
+  // use a passed ref if it's there, otherwise use innerRef
+  react.useImperativeHandle(ref, function () {
+    return innerRef.current;
+  });
+  var _useFocusWithArrows = useFocusWithArrows(innerRef, true),
+    keyDown = _useFocusWithArrows.keyDown;
+  return jsxRuntime.jsx(AccordionContext.Provider, {
+    value: {
+      headingLevel: headingLevel,
+      section: section
+    },
+    children: jsxRuntime.jsx("div", {
+      className: clsx('amsterdam-accordion', className),
+      onKeyDown: keyDown,
+      ref: innerRef,
+      children: children
+    })
+  });
+});
+Accordion.displayName = 'Accordion';
+Accordion.Section = AccordionSection;
+Accordion.Section.displayName = 'Accordion.Section';
+
+var _excluded = ["children", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+var List = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    variant = _ref.variant,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return jsxRuntime.jsx("p", _objectSpread(_objectSpread({
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return jsxRuntime.jsx("ul", _objectSpread(_objectSpread({
     ref: ref,
-    className: clsx('amsterdam-paragraph', variant === 'intro' && 'amsterdam-paragraph-intro', variant === 'small' && 'amsterdam-paragraph-small', className)
-  }, otherProps), {}, {
+    className: clsx('amsterdam-list', className)
+  }, restProps), {}, {
     children: children
   }));
 });
-Paragraph.displayName = 'Paragraph';
+List.displayName = 'List';
 
-exports.Grid = Grid;
-exports.GridItem = GridItem;
+exports.Accordion = Accordion;
+exports.Button = Button;
+exports.FormLabel = FormLabel;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.Link = Link;
 exports.List = List;
 exports.Paragraph = Paragraph;
+exports.UnorderedList = UnorderedList;
 //# sourceMappingURL=index.cjs.js.map

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,10 +1,13 @@
-/**
- * @license EUPL-1.2
- */
-export { Grid } from './Grid';
-export { GridItem } from './GridItem';
-export { Heading } from './Heading';
-export { Icon } from './Icon';
-export { Link } from './Link';
-export { List } from './List';
-export { Paragraph } from './Paragraph';
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+export * from './Heading';
+export * from './Link';
+export * from './Button/';
+export * from './Paragraph';
+export * from './FormLabel';
+export * from './UnorderedList';
+export * from './Icon';
+export * from './Accordion';
+export { List } from './List';