@amsterdam/design-system-react 0.1.3 → 0.1.4

package/README.md

@@ -16,11 +16,9 @@ TODO: add alpha, beta and production statuses to components. Also show in Storyb
 
 ## Getting started
 
-TODO: These packages haven't been published yet, so the following doesn't work at the moment. You can currently only use these instructions when locally linking the packages to a consumer project.
-
 Install the packages you need, for instance:
 
-`npm install @amsterdam/design-system-react @amsterdam/design-system-css @amsterdam/design-system-tokens @amsterdam/design-system-font`
+`npm install @amsterdam/design-system-react @amsterdam/design-system-css @amsterdam/design-system-tokens @amsterdam/design-system-assets`
 
 Import the packages you need.
 
@@ -29,7 +27,7 @@ import { Paragraph } from "@amsterdam/design-system-react";
 
 import "@amsterdam/design-system-css/dist/paragraph/paragraph.css";
 import "@amsterdam/design-system-tokens/dist/root.css";
-import "@amsterdam/design-system-font/static/index.css";
+import "@amsterdam/design-system-assets/font/index.css";
 
 function App() {
   return <Paragraph>Hello world</Paragraph>;

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { AccordionSection } from './AccordionSection';
+import { HeadingLevel } from '../Heading/Heading';
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    headingLevel: HeadingLevel;
+    section?: boolean;
+}
+export interface AccordionComponent extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>> & RefAttributes<HTMLDivElement> & AccordionProps> {
+    Section: typeof AccordionSection;
+}
+export declare const Accordion: AccordionComponent;

package/dist/Accordion/AccordionContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HeadingLevel } from '../Heading/Heading';
+export interface AccordionContextValue {
+    headingLevel: HeadingLevel;
+    section?: boolean;
+}
+declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export default AccordionContext;

package/dist/Accordion/AccordionSection.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import { HTMLAttributes } from 'react';
+export interface AccordionSectionProps extends HTMLAttributes<HTMLElement> {
+    label: string;
+    expanded?: boolean;
+}
+export declare const AccordionSection: import("react").ForwardRefExoticComponent<AccordionSectionProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export type { AccordionSectionProps } from './AccordionSection';

package/dist/Accordion/useFocusWithArrow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Accordion/useFocusWithArrows.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import type { KeyboardEvent, RefObject } from 'react';
+export declare const KeyboardKeys: {
+    ArrowUp: string;
+    ArrowDown: string;
+    ArrowRight: string;
+    ArrowLeft: string;
+    Home: string;
+    End: string;
+};
+/**
+ * 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
+ */
+declare const useFocusWithArrows: (ref: RefObject<HTMLDivElement>, rotating?: boolean, horizontally?: boolean) => {
+    keyDown: (e: KeyboardEvent) => void;
+};
+export default useFocusWithArrows;

package/dist/Heading/Heading.d.ts

@@ -4,11 +4,20 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import { HTMLAttributes } from 'react';
-type Levels = 1 | 2 | 3 | 4;
+export type HeadingLevel = 1 | 2 | 3 | 4;
+type Size = 'level-1' | 'level-2' | 'level-3' | 'level-4';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-    level?: Levels;
-    styleLevel?: Levels;
+    /**
+     * Het hiërarchische niveau van de titel.
+     */
+    level?: HeadingLevel;
+    /**
+     * De visuele grootte van de titel.
+     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
+     */
+    size?: Size;
 }
+export declare function getHeadingElement(level: HeadingLevel): "h2" | "h3" | "h4" | "h1";
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Heading/index.d.ts

@@ -1,2 +1,2 @@
-export { Heading } from './Heading';
 export type { HeadingProps } from './Heading';
+export { Heading } from './Heading';

package/dist/UnorderedList/UnorderedList.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+import React, { HTMLAttributes, LiHTMLAttributes, PropsWithChildren } from 'react';
+interface UnorderedListComponent extends React.ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>> {
+    Item: typeof UnorderedListItem;
+}
+export declare const UnorderedList: UnorderedListComponent;
+export type UnorderedListItemProps = LiHTMLAttributes<HTMLLIElement>;
+export declare const UnorderedListItem: React.ForwardRefExoticComponent<UnorderedListItemProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/UnorderedList/index.d.ts

@@ -0,0 +1 @@
+export { UnorderedList } from './UnorderedList';

package/dist/index.cjs.js

@@ -7,11 +7,12 @@ 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 = ["level", "styleLevel", "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; }
-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';
@@ -24,32 +25,33 @@ function getElement(level) {
   }
 }
 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$6);
-  var HeadingX = getElement(level);
-  return jsxRuntime.jsx(HeadingX, _objectSpread$6(_objectSpread$6({
+    _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$5 = ["className", "size", "svg"];
-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 _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$5);
-  return jsxRuntime.jsx("span", _objectSpread$5(_objectSpread$5({
+    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), {}, {
@@ -58,16 +60,16 @@ var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$4 = ["children", "variant", "onBackground", "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 _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$4);
-  return jsxRuntime.jsxs("a", _objectSpread$4(_objectSpread$4({}, otherProps), {}, {
+    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',
@@ -84,9 +86,9 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$3 = ["children", "disabled", "variant"];
-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 _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':
@@ -102,8 +104,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutProperties(_ref, _excluded$3);
-  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$3(_objectSpread$3({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
+  return jsxRuntime.jsx(componentLibraryReact.Button, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
     appearance: getAppearance(variant),
     ref: ref,
     disabled: disabled,
@@ -113,15 +115,15 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$2 = ["children", "size", "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 _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$2);
-  return jsxRuntime.jsx("p", _objectSpread$2(_objectSpread$2({
+    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), {}, {
@@ -130,14 +132,14 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$1 = ["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 _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 FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1);
-  return jsxRuntime.jsx("label", _objectSpread$1(_objectSpread$1({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$3);
+  return jsxRuntime.jsx("label", _objectSpread$3(_objectSpread$3({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-form-label', className),
     children: children
@@ -145,6 +147,210 @@ var FormLabel = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 FormLabel.displayName = 'FormLabel';
 
+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 UnorderedList = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$2);
+  return jsxRuntime.jsx("ul", _objectSpread$2(_objectSpread$2({
+    ref: ref,
+    className: clsx('amsterdam-unordered-list', className)
+  }, restProps), {}, {
+    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 = ["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 AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
+    children = _ref.children,
+    className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded$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 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; }
@@ -161,6 +367,7 @@ var List = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 List.displayName = 'List';
 
+exports.Accordion = Accordion;
 exports.Button = Button;
 exports.FormLabel = FormLabel;
 exports.Heading = Heading;
@@ -168,4 +375,5 @@ 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

@@ -7,5 +7,7 @@ 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';

package/dist/index.esm.js

@@ -2,14 +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 = ["level", "styleLevel", "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; }
-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';
@@ -22,32 +23,33 @@ function getElement(level) {
   }
 }
 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$6);
-  var HeadingX = getElement(level);
-  return jsx(HeadingX, _objectSpread$6(_objectSpread$6({
+    _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$5 = ["className", "size", "svg"];
-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 _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$5);
-  return jsx("span", _objectSpread$5(_objectSpread$5({
+    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), {}, {
@@ -56,16 +58,16 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$4 = ["children", "variant", "onBackground", "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 _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$4);
-  return jsxs("a", _objectSpread$4(_objectSpread$4({}, otherProps), {}, {
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
+  return jsxs("a", _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
     ref: ref,
     className: clsx('amsterdam-link', {
       'amsterdam-link--inline': variant === 'inline',
@@ -82,9 +84,9 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$3 = ["children", "disabled", "variant"];
-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 _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':
@@ -100,8 +102,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    restProps = _objectWithoutProperties(_ref, _excluded$3);
-  return jsx(Button$1, _objectSpread$3(_objectSpread$3({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$5);
+  return jsx(Button$1, _objectSpread$5(_objectSpread$5({}, restProps), {}, {
     appearance: getAppearance(variant),
     ref: ref,
     disabled: disabled,
@@ -111,15 +113,15 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$2 = ["children", "size", "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 _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$2);
-  return jsx("p", _objectSpread$2(_objectSpread$2({
+    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), {}, {
@@ -128,14 +130,14 @@ var Paragraph = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Paragraph.displayName = 'Paragraph';
 
-var _excluded$1 = ["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 _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 FormLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1);
-  return jsx("label", _objectSpread$1(_objectSpread$1({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$3);
+  return jsx("label", _objectSpread$3(_objectSpread$3({}, restProps), {}, {
     ref: ref,
     className: clsx('amsterdam-form-label', className),
     children: children
@@ -143,6 +145,210 @@ var FormLabel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 FormLabel.displayName = 'FormLabel';
 
+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 UnorderedList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded$2);
+  return jsx("ul", _objectSpread$2(_objectSpread$2({
+    ref: ref,
+    className: clsx('amsterdam-unordered-list', className)
+  }, restProps), {}, {
+    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 = ["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 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,
+    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 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; }
@@ -159,5 +365,5 @@ var List = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 List.displayName = 'List';
 
-export { Button, FormLabel, 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.3",
+  "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",
@@ -23,7 +23,7 @@
     "clean": "rimraf dist/",
     "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,7 +32,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@amsterdam/design-system-react-icons": "0.1.3",
+    "@amsterdam/design-system-react-icons": "0.1.4",
     "@utrecht/component-library-react": "1.0.0-alpha.340",
     "clsx": "1.2.1",
     "date-fns": "2.30.0"
@@ -79,5 +79,5 @@
     "react": "16 - 18",
     "react-dom": "16 - 18"
   },
-  "gitHead": "c11658e889d52c6a48a058bbbe332d4fe170c3c4"
+  "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
 }

package/dist/Details/Details.d.ts

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-import { HTMLAttributes } from 'react';
-import { Levels } from '../Heading/Heading';
-export interface DetailsProps extends HTMLAttributes<HTMLDetailsElement> {
-    summary: string;
-    headingLevel?: Levels;
-}
-export declare const Details: import("react").ForwardRefExoticComponent<DetailsProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDetailsElement>>;

package/dist/Details/index.d.ts

@@ -1,2 +0,0 @@
-export { Details } from './Details';
-export type { DetailsProps } from './Details';

package/dist/Icon.d.ts

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-import { HTMLAttributes } from 'react';
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-    size?: 'small' | 'medium' | 'large';
-}
-export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLElement>>;

package/dist/Link.d.ts

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-import { AnchorHTMLAttributes } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    variant?: 'standalone' | 'inList' | 'inline';
-    icon?: Function;
-}
-export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/RadioButton/RadioButton.d.ts

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-import { InputHTMLAttributes } from 'react';
-export type RadioButtonProps = InputHTMLAttributes<HTMLInputElement> & {
-    invalid?: boolean;
-};
-export declare const RadioButton: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    invalid?: boolean | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/RadioButton/index.d.ts

@@ -1 +0,0 @@
-export { RadioButton } from './RadioButton';

package/dist/Textbox/Textbox.d.ts

@@ -1,7 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export type TextboxTypes = 'number' | 'text';
-export interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
-    invalid?: boolean;
-    type?: TextboxTypes;
-}
-export declare const Textbox: import("react").ForwardRefExoticComponent<TextboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Textbox/Textbox.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/Textbox/index.d.ts

@@ -1 +0,0 @@
-export { Textbox } from './Textbox';