@amsterdam/design-system-react 0.1.2 → 0.1.4

package/dist/index.esm.js

@@ -2,51 +2,15 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { ChevronRight } from '@amsterdam/design-system-react-icons';
+import { forwardRef, createContext, useContext, useState, useId, useRef, useImperativeHandle } from 'react';
+import { ChevronRight, ChevronDown } from '@amsterdam/design-system-react-icons';
+import { Button as Button$1 } from '@utrecht/component-library-react';
+import _slicedToArray from '@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 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 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';
@@ -54,98 +18,352 @@ function getElement(level) {
       return 'h3';
     case 4:
       return 'h4';
-    case 5:
-      return 'h5';
-    case 6:
-      return 'h6';
     default:
       return 'h1';
   }
 }
 var Heading = /*#__PURE__*/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 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 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__*/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 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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    onBackground = _ref.onBackground,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
+  return 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' && jsx(Icon, {
+      svg: 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__*/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 jsx(Button$1, _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__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+  return 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__*/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 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 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__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    icon = _ref.icon,
-    variant = _ref.variant,
     restProps = _objectWithoutProperties(_ref, _excluded$2);
-  return 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 jsx("ul", _objectSpread$2(_objectSpread$2({
+    ref: ref,
+    className: clsx('amsterdam-unordered-list', className)
   }, restProps), {}, {
-    children: [variant === 'inList' && jsx(Icon, {
-      size: icon ? 'medium' : 'small',
-      children: icon ? icon : jsx(ChevronRight, {})
-    }), children, variant === 'inline' && icon && jsx(Icon, {
-      children: icon
-    })]
+    children: children
   }));
+});
+UnorderedList.displayName = 'UnorderedList';
+var UnorderedListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    restProps = _objectWithoutProperties(_ref2, _excluded2);
+  return jsx("li", _objectSpread$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__*/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__*/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 jsx("ul", _objectSpread$1(_objectSpread$1({
-    className: clsx('amsterdam-list', className)
-  }, restProps), {}, {
-    children: children
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useContext = useContext(AccordionContext),
+    headingLevel = _useContext.headingLevel,
+    section = _useContext.section;
+  var _useState = useState(expanded),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var HeadingX = getHeadingElement(headingLevel);
+  var id = useId();
+  var buttonId = "button-".concat(id);
+  var panelId = "panel-".concat(id);
+  return jsxs("div", _objectSpread$1(_objectSpread$1({
+    className: clsx('amsterdam-accordion__section', className),
+    ref: ref
+  }, otherProps), {}, {
+    children: [jsx(HeadingX, {
+      className: 'amsterdam-accordion__header',
+      children: jsxs("button", {
+        "aria-controls": panelId,
+        "aria-expanded": isExpanded,
+        className: "amsterdam-accordion__button",
+        id: buttonId,
+        onClick: function onClick() {
+          return setIsExpanded(!isExpanded);
+        },
+        type: "button",
+        children: [label, jsx(Icon, {
+          svg: ChevronDown,
+          size: "level-5"
+        })]
+      })
+    }), section ? jsx("section", {
+      id: panelId,
+      "aria-labelledby": buttonId,
+      className: clsx('amsterdam-accordion__panel', {
+        'amsterdam-accordion__panel--expanded': isExpanded
+      }),
+      children: children
+    }) : 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__*/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 = useRef(null);
+  // use a passed ref if it's there, otherwise use innerRef
+  useImperativeHandle(ref, function () {
+    return innerRef.current;
+  });
+  var _useFocusWithArrows = useFocusWithArrows(innerRef, true),
+    keyDown = _useFocusWithArrows.keyDown;
+  return jsx(AccordionContext.Provider, {
+    value: {
+      headingLevel: headingLevel,
+      section: section
+    },
+    children: 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__*/forwardRef(function (_ref, ref) {
+var List = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
-    variant = _ref.variant,
     className = _ref.className,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return jsx("p", _objectSpread(_objectSpread({
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return 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';
 
-export { Grid, GridItem, Heading, Icon, Link, List, Paragraph };
+export { Accordion, Button, FormLabel, Heading, Icon, Link, List, Paragraph, UnorderedList };
 //# 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.1.2",
+  "version": "0.1.4",
   "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",
@@ -21,9 +21,9 @@
     "build": "rollup -c",
     "build:watch": "rollup -c --watch",
     "clean": "rimraf dist/",
-    "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit",
+    "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
     "test": "jest --verbose",
-    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
+    "watch:test": "jest --verbose --watch"
   },
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -32,52 +32,52 @@
     "dist/"
   ],
   "dependencies": {
-    "@amsterdam/design-system-react-icons": "0.1.2",
+    "@amsterdam/design-system-react-icons": "0.1.4",
+    "@utrecht/component-library-react": "1.0.0-alpha.340",
     "clsx": "1.2.1",
-    "date-fns": "2.29.3"
+    "date-fns": "2.30.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@babel/plugin-transform-runtime": "7.19.6",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/runtime": "7.20.13",
+    "@babel/core": "7.22.5",
+    "@babel/plugin-transform-runtime": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-react": "7.22.5",
+    "@babel/runtime": "7.22.5",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
-    "@rollup/plugin-node-resolve": "15.0.1",
-    "@testing-library/dom": "8.20.0",
+    "@rollup/plugin-commonjs": "25.0.2",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/date-fns": "2.6.0",
-    "@types/jest": "29.4.0",
-    "@types/lodash": "4.14.191",
-    "@types/react": "18.0.27",
-    "@types/testing-library__jest-dom": "5.14.5",
-    "jest": "29.4.1",
-    "jest-environment-jsdom": "29.4.1",
+    "@types/jest": "29.5.2",
+    "@types/lodash": "4.14.195",
+    "@types/react": "18.2.14",
+    "@types/testing-library__jest-dom": "5.14.6",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
     "lodash": "4.17.21",
-    "next": "13.1.6",
+    "next": "13.4.7",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.21",
+    "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "3.14.0",
+    "rollup": "3.25.3",
     "rollup-plugin-delete": "2.0.0",
-    "rollup-plugin-filesize": "9.1.2",
-    "rollup-plugin-node-externals": "5.1.2",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-node-externals": "6.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-scss": "4.0.0",
-    "rollup-plugin-typescript2": "0.34.1",
-    "sass": "1.58.0",
-    "tslib": "2.5.0",
-    "typescript": "4.9.5"
+    "rollup-plugin-typescript2": "0.35.0",
+    "sass": "1.63.6",
+    "tslib": "2.6.0"
   },
   "peerDependencies": {
     "react": "16 - 18",
     "react-dom": "16 - 18"
   },
-  "gitHead": "89f67a928d30a512e8fa7f31b8dae925846fc411"
+  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
 }

package/dist/Grid.d.ts

@@ -1,5 +0,0 @@
-/**
- * @license EUPL-1.2
- */
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export declare const Grid: ({ children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/dist/GridItem.d.ts

@@ -1,11 +0,0 @@
-/**
- * @license EUPL-1.2
- */
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export interface GridItemProps extends HTMLAttributes<HTMLElement> {
-    spanSmall: 1 | 2 | 3 | 4;
-    startSmall?: 1 | 2 | 3 | 4;
-    spanLarge: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    startLarge?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-}
-export declare const GridItem: ({ spanSmall, startSmall, spanLarge, startLarge, children, className, ...restProps }: PropsWithChildren<GridItemProps>) => JSX.Element;

package/dist/Heading.d.ts

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2
- */
-import { HTMLAttributes } from 'react';
-type Levels = 1 | 2 | 3 | 4 | 5 | 6;
-export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-    level: Levels;
-    styleLevel: Levels;
-}
-export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLHeadingElement>>;
-export {};

package/dist/Icon.d.ts

@@ -1,5 +0,0 @@
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-    size?: 'small' | 'medium' | 'large';
-}
-export declare const Icon: ({ children, className, size, ...otherProps }: PropsWithChildren<IconProps>) => JSX.Element;

package/dist/Link.d.ts

@@ -1,9 +0,0 @@
-/**
- * @license EUPL-1.2
- */
-import { AnchorHTMLAttributes, PropsWithChildren, ReactElement } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    variant?: 'standalone' | 'inList' | 'inline';
-    icon?: ReactElement;
-}
-export declare const Link: ({ children, className, icon, variant, ...restProps }: PropsWithChildren<LinkProps>) => JSX.Element;