@utrecht/component-library-react 1.0.0-alpha.270 → 1.0.0-alpha.271

package/dist/css-module/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.cjs.js

@@ -1,27 +1,331 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var react = require('react');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var chunk = require('lodash.chunk');
 
-var _excluded$1d = ["children", "className", "icon", "type"];
+var _excluded$1e = ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"];
+function ownKeys$1e(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$1e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var appearance = _ref.appearance,
+    busy = _ref.busy,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    className = _ref.className,
+    hint = _ref.hint,
+    pressed = _ref.pressed,
+    type = _ref.type,
+    restProps = _objectWithoutProperties(_ref, _excluded$1e);
+  return jsxRuntime.jsx("button", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
+    ref: ref,
+    className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),
+    "aria-busy": busy || undefined,
+    "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
+    disabled: disabled,
+    type: type || 'button',
+    children: children
+  }));
+});
+Button.displayName = 'Button';
+var PrimaryActionButton = function PrimaryActionButton(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return jsxRuntime.jsx(Button, _objectSpread$1e(_objectSpread$1e({}, args), {}, {
+    appearance: "primary-action-button"
+  }));
+};
+PrimaryActionButton.displayName = 'PrimaryActionButton';
+var SecondaryActionButton = function SecondaryActionButton(_ref3) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return jsxRuntime.jsx(Button, _objectSpread$1e(_objectSpread$1e({}, args), {}, {
+    appearance: "secondary-action-button"
+  }));
+};
+SecondaryActionButton.displayName = 'SecondaryActionButton';
+var SubtleButton = function SubtleButton(_ref4) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return jsxRuntime.jsx(Button, _objectSpread$1e(_objectSpread$1e({}, args), {}, {
+    appearance: "subtle-button"
+  }));
+};
+SubtleButton.displayName = 'SubtleButton';
+
+var _excluded$1d = ["appearance", "className", "level"];
 function ownKeys$1d(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$1d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var appearance = _ref.appearance,
+    className = _ref.className,
+    level = _ref.level,
+    restProps = _objectWithoutProperties(_ref, _excluded$1d);
+  var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
+  var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
+  var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
+  return jsxRuntime.jsx(HeadingX, _objectSpread$1d(_objectSpread$1d({
+    className: clsx(headingClassName, className)
+  }, restProps), {}, {
+    ref: ref
+  }));
+});
+Heading.displayName = 'Heading';
+
+var _excluded$1c = ["children", "group", "headingLevel", "heading"];
+function ownKeys$1c(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$1c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Find the first item in an array
+ */
+var firstItem = function firstItem(items) {
+  return items.length >= 1 ? items[0] : undefined;
+};
+/**
+ * Find the last item in an array
+ */
+var lastItem = function lastItem(items) {
+  return items.length >= 1 ? items[items.length - 1] : undefined;
+};
+/**
+ * Find the next item in an array, compared to an item in the array
+ */
+var nextItem = function nextItem(items, item) {
+  var currentIndex = item ? items.indexOf(item) : -1;
+  return currentIndex >= 0 && currentIndex + 1 <= items.length - 1 ? items[currentIndex + 1] : undefined;
+};
+/**
+ * Find the previous item in an array, compared to an item in the array
+ */
+var previousItem = function previousItem(items, item) {
+  var currentIndex = item ? items.indexOf(item) : -1;
+  return currentIndex >= 0 && currentIndex - 1 <= items.length - 1 ? items[currentIndex - 1] : undefined;
+};
+var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 1 : _ref$headingLevel,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
+    disabled = _ref.disabled,
+    section = _ref.section,
+    children = _ref.children,
+    buttonRef = _ref.buttonRef,
+    onActivate = _ref.onActivate,
+    onButtonBlur = _ref.onButtonBlur,
+    onButtonFocus = _ref.onButtonFocus;
+  var panelAttributes = {
+    className: clsx('utrecht-accordion__panel', {
+      'utrecht-accordion__panel--expanded': expanded
+    }),
+    // Use the `hidden` attribute so the toggle works even without CSS
+    hidden: !expanded,
+    // Use the `aria-hidden` attribute too, so it even works when CSS
+    // doesn't use `display: none` to make transitions.
+    'aria-hidden': !expanded
+  };
+  var idPrefix = 'utrecht-accordion';
+  var idSuffix = id || react.useId();
+  var buttonId = "".concat(idPrefix).concat(idSuffix, "-button");
+  var panelId = "".concat(idPrefix).concat(idSuffix, "-panel");
+  // We render `__section` as `div` for a specific reasons:
+  // - when a user navigates to the `region` landmark we want the first
+  //   content of the landmark to be the actual content, instead of starting
+  //   with the button that controls the region.
+  // - we only want expanded sections to show up as landmarks
+  return jsxRuntime.jsxs("div", {
+    className: clsx('utrecht-accordion__section'),
+    id: id,
+    ref: ref,
+    children: [jsxRuntime.jsx(Heading, {
+      level: headingLevel,
+      className: clsx('utrecht-accordion__header'),
+      children: jsxRuntime.jsx(Button, {
+        className: clsx('utrecht-accordion__button'),
+        appearance: "subtle-button",
+        "aria-expanded": expanded === true,
+        "aria-controls": panelId,
+        disabled: disabled,
+        id: buttonId,
+        onClick: function onClick() {
+          return typeof onActivate === 'function' && onActivate(ref);
+        },
+        onFocus: function onFocus() {
+          return typeof onButtonFocus === 'function' && onButtonFocus(ref);
+        },
+        onBlur: function onBlur() {
+          return typeof onButtonBlur === 'function' && onButtonBlur(ref);
+        },
+        ref: buttonRef,
+        children: label
+      })
+    }), section ? jsxRuntime.jsx("section", _objectSpread$1c(_objectSpread$1c({
+      id: panelId,
+      "aria-labelledby": buttonId
+    }, panelAttributes), {}, {
+      children: children
+    })) : jsxRuntime.jsx("div", _objectSpread$1c(_objectSpread$1c({}, panelAttributes), {}, {
+      children: children
+    }))]
+  });
+});
+AccordionSection.displayName = 'AccordionSection';
+var Accordion = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    group = _ref2.group,
+    headingLevel = _ref2.headingLevel,
+    heading = _ref2.heading,
+    props = _objectWithoutProperties(_ref2, _excluded$1c);
+  var headingId = react.useId();
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!!heading && typeof headingLevel === 'number' && jsxRuntime.jsx(Heading, {
+      level: headingLevel,
+      children: heading
+    }), jsxRuntime.jsx("div", _objectSpread$1c(_objectSpread$1c({
+      className: clsx('utrecht-accordion'),
+      role: group ? 'group' : undefined,
+      "aria-labelledby": group ? headingId : undefined
+    }, props), {}, {
+      ref: ref,
+      children: children
+    }))]
+  });
+});
+Accordion.displayName = 'Accordion';
+var useAccordion = function useAccordion(sections, ref) {
+  console.log('useAccordion');
+  // const sections: AccordionSectionProviderProps[] = [];
+  var refs = sections.map(function (_) {
+    return react.useRef(null);
+  });
+  var buttonRefs = sections.map(function (_) {
+    return react.useRef(null);
+  });
+  return {
+    ref: ref,
+    refs: refs,
+    buttonRefs: buttonRefs,
+    /* ForwardedRef of the last section to receive focus */
+    activeElement: null,
+    /* ForwardedRef for each section, in document order */
+    sections: sections,
+    focusNextSection: function focusNextSection(activeElement) {
+      var _nextSection$current;
+      var index = refs.indexOf(activeElement);
+      var buttonRef = index >= 0 ? buttonRefs[index] : undefined;
+      var nextSection = buttonRef ? nextItem(buttonRefs, buttonRef) : undefined;
+      nextSection === null || nextSection === void 0 ? void 0 : (_nextSection$current = nextSection.current) === null || _nextSection$current === void 0 ? void 0 : _nextSection$current.focus();
+    },
+    focusFirstSection: function focusFirstSection() {
+      var _firstSection$current;
+      var firstSection = firstItem(buttonRefs);
+      console.log(refs);
+      firstSection === null || firstSection === void 0 ? void 0 : (_firstSection$current = firstSection.current) === null || _firstSection$current === void 0 ? void 0 : _firstSection$current.focus();
+    },
+    focusPreviousSection: function focusPreviousSection(activeElement) {
+      var _previousSection$curr;
+      var index = refs.indexOf(activeElement);
+      var buttonRef = index >= 0 ? buttonRefs[index] : undefined;
+      var previousSection = buttonRef ? previousItem(buttonRefs, buttonRef) : undefined;
+      previousSection === null || previousSection === void 0 ? void 0 : (_previousSection$curr = previousSection.current) === null || _previousSection$curr === void 0 ? void 0 : _previousSection$curr.focus();
+    },
+    focusLastSection: function focusLastSection() {
+      var _firstSection$current2;
+      var firstSection = lastItem(buttonRefs);
+      firstSection === null || firstSection === void 0 ? void 0 : (_firstSection$current2 = firstSection.current) === null || _firstSection$current2 === void 0 ? void 0 : _firstSection$current2.focus();
+    }
+  };
+};
+var AccordionProvider = function AccordionProvider(_ref4) {
+  var sections = _ref4.sections;
+  var ref = react.useRef(null);
+  var _useAccordion = useAccordion(sections, ref),
+    refs = _useAccordion.refs,
+    buttonRefs = _useAccordion.buttonRefs,
+    focusNextSection = _useAccordion.focusNextSection,
+    focusFirstSection = _useAccordion.focusFirstSection,
+    focusLastSection = _useAccordion.focusLastSection,
+    focusPreviousSection = _useAccordion.focusPreviousSection;
+  var _useState = react.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeElement = _useState2[0],
+    setActiveElement = _useState2[1];
+  var _useState3 = react.useState(sections),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sectionsState = _useState4[0],
+    setSectionsState = _useState4[1];
+  var handleButtonFocus = function handleButtonFocus(ref) {
+    setActiveElement(ref);
+  };
+  var handleButtonBlur = function handleButtonBlur(_) {
+    setActiveElement(null);
+  };
+  var handleKeyDown = function handleKeyDown(evt) {
+    if (evt.code === 'End') {
+      focusLastSection();
+    } else if (evt.code === 'Home') {
+      focusFirstSection();
+    } else if (evt.code === 'ArrowDown') {
+      if (activeElement) {
+        focusNextSection(activeElement);
+      }
+    } else if (evt.code === 'ArrowUp') {
+      if (activeElement) {
+        focusPreviousSection(activeElement);
+      }
+    } else {
+      // Do not `preventDefault()`
+      return;
+    }
+    // Prevent scrolling the page
+    evt.preventDefault();
+  };
+  return jsxRuntime.jsx(Accordion, {
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    children: sectionsState.map(function (section, index) {
+      var handleActivate = function handleActivate(ref) {
+        var activatedIndex = refs.indexOf(ref);
+        // const activatedSection = activatedIndex >= 0 ? sections[index] : undefined;
+        setSectionsState(sectionsState.map(function (section, index) {
+          if (index === activatedIndex) {
+            return _objectSpread$1c(_objectSpread$1c({}, section), {}, {
+              expanded: !section.expanded
+            });
+          } else {
+            return section;
+          }
+        }));
+      };
+      return /*#__PURE__*/react.createElement(AccordionSection, _objectSpread$1c(_objectSpread$1c({}, section), {}, {
+        ref: refs[index],
+        buttonRef: buttonRefs[index],
+        key: index,
+        onButtonFocus: handleButtonFocus,
+        onButtonBlur: handleButtonBlur,
+        onActivate: handleActivate
+      }), section.body);
+    })
+  });
+};
+AccordionProvider.displayName = 'AccordionProvider';
+
+var _excluded$1b = ["children", "className", "icon", "type"];
+function ownKeys$1b(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$1b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     icon = _ref.icon,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$1d);
-  return jsxRuntime.jsxs("div", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1b);
+  return jsxRuntime.jsxs("div", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-alert', {
       'utrecht-alert--error': type === 'error',
@@ -40,16 +344,16 @@ var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Alert.displayName = 'Alert';
 
-var _excluded$1c = ["children", "className", "icon", "type"];
-function ownKeys$1c(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$1c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$1a = ["children", "className", "icon", "type"];
+function ownKeys$1a(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$1a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AlertDialog = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     icon = _ref.icon,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$1c);
-  return jsxRuntime.jsxs("dialog", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$1a);
+  return jsxRuntime.jsxs("dialog", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-alert-dialog', {
       'utrecht-alert-dialog--error': type === 'error',
@@ -68,14 +372,14 @@ var AlertDialog = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 AlertDialog.displayName = 'AlertDialog';
 
-var _excluded$1b = ["children", "className"];
-function ownKeys$1b(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$1b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$19 = ["children", "className"];
+function ownKeys$19(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$19(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$19(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$19(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Article = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1b);
-  return jsxRuntime.jsx("article", _objectSpread$1b(_objectSpread$1b({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$19);
+  return jsxRuntime.jsx("article", _objectSpread$19(_objectSpread$19({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-article', className),
     children: children
@@ -83,14 +387,14 @@ var Article = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Article.displayName = 'Article';
 
-var _excluded$1a = ["children", "className"];
-function ownKeys$1a(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$1a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$18 = ["children", "className"];
+function ownKeys$18(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$18(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$18(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$18(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Backdrop = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$1a);
-  return jsxRuntime.jsx("div", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$18);
+  return jsxRuntime.jsx("div", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-backdrop', className),
     children: children
@@ -98,28 +402,9 @@ var Backdrop = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Backdrop.displayName = 'Backdrop';
 
-var _excluded$19 = ["appearance", "className", "level"];
-function ownKeys$19(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$19(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$19(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$19(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var appearance = _ref.appearance,
-    className = _ref.className,
-    level = _ref.level,
-    restProps = _objectWithoutProperties(_ref, _excluded$19);
-  var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
-  var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
-  var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
-  return jsxRuntime.jsx(HeadingX, _objectSpread$19(_objectSpread$19({
-    className: clsx(headingClassName, className)
-  }, restProps), {}, {
-    ref: ref
-  }));
-});
-Heading.displayName = 'Heading';
-
-var _excluded$18 = ["boxContent", "children", "className", "external", "href", "placeholder", "role"];
-function ownKeys$18(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$18(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$18(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$18(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$17 = ["boxContent", "children", "className", "external", "href", "placeholder", "role"];
+function ownKeys$17(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$17(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$17(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$17(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var boxContent = _ref.boxContent,
     children = _ref.children,
@@ -128,13 +413,13 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     href = _ref.href,
     placeholder = _ref.placeholder,
     role = _ref.role,
-    restProps = _objectWithoutProperties(_ref, _excluded$18);
+    restProps = _objectWithoutProperties(_ref, _excluded$17);
   return (
     // "utrecht-link--telephone" does not have a corresponding API,
     // since it is primarily a basis for implementing input[href^="tel"].
     // Telephone number rendering in React is best achieved using composition
     // of the TelephoneValue component.
-    jsxRuntime.jsx("a", _objectSpread$18(_objectSpread$18({
+    jsxRuntime.jsx("a", _objectSpread$17(_objectSpread$17({
       href: placeholder ? undefined : href,
       ref: ref,
       role: role || (placeholder ? 'link' : undefined),
@@ -152,9 +437,9 @@ var Link = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$17 = ["appearance", "children", "className", "headingLevel", "label"];
-function ownKeys$17(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$17(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$17(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$17(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$16 = ["appearance", "children", "className", "headingLevel", "label"];
+function ownKeys$16(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$16(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$16(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$16(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useMicrodataItem = function useMicrodataItem(_ref) {
   var prop = _ref.prop,
     type = _ref.type;
@@ -176,9 +461,9 @@ var BreadcrumbNav = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     _ref2$headingLevel = _ref2.headingLevel,
     headingLevel = _ref2$headingLevel === void 0 ? 2 : _ref2$headingLevel,
     label = _ref2.label,
-    restProps = _objectWithoutProperties(_ref2, _excluded$17);
+    restProps = _objectWithoutProperties(_ref2, _excluded$16);
   var headingId = label ? react.useId() : undefined;
-  return jsxRuntime.jsxs("nav", _objectSpread$17(_objectSpread$17({}, restProps), {}, {
+  return jsxRuntime.jsxs("nav", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-breadcrumb', {
       'utrecht-breadcrumb--arrows': appearance === 'arrows'
@@ -190,7 +475,7 @@ var BreadcrumbNav = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
       level: headingLevel,
       "aria-hidden": "true",
       children: label
-    }), jsxRuntime.jsx("ol", _objectSpread$17(_objectSpread$17({
+    }), jsxRuntime.jsx("ol", _objectSpread$16(_objectSpread$16({
       className: "utrecht-breadcrumb__list"
     }, useMicrodataItem({
       type: 'https://schema.org/BreadcrumbList'
@@ -206,24 +491,24 @@ var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
     href = _ref3.href,
     index = _ref3.index,
     rel = _ref3.rel;
-  return jsxRuntime.jsx("li", _objectSpread$17(_objectSpread$17({
+  return jsxRuntime.jsx("li", _objectSpread$16(_objectSpread$16({
     className: "utrecht-breadcrumb__item"
   }, useMicrodataItem({
     type: 'https://schema.org/ListItem',
     prop: 'itemListElement'
   })), {}, {
-    children: jsxRuntime.jsxs(Link, _objectSpread$17(_objectSpread$17({
+    children: jsxRuntime.jsxs(Link, _objectSpread$16(_objectSpread$16({
       className: "utrecht-breadcrumb__link",
       href: href,
       rel: rel,
       "aria-current": current && 'location'
     }, useMicrodataProp('item')), {}, {
       ref: ref,
-      children: [jsxRuntime.jsx("span", _objectSpread$17(_objectSpread$17({
+      children: [jsxRuntime.jsx("span", _objectSpread$16(_objectSpread$16({
         className: "utrecht-breadcrumb__text"
       }, useMicrodataProp('name')), {}, {
         children: children
-      })), typeof index === 'number' ? jsxRuntime.jsx("meta", _objectSpread$17(_objectSpread$17({}, useMicrodataProp('position')), {}, {
+      })), typeof index === 'number' ? jsxRuntime.jsx("meta", _objectSpread$16(_objectSpread$16({}, useMicrodataProp('position')), {}, {
         content: String(index + 1)
       })) : null]
     }))
@@ -231,52 +516,6 @@ var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref3, ref) {
 });
 BreadcrumbLink.displayName = 'BreadcrumbLink';
 
-var _excluded$16 = ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"];
-function ownKeys$16(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$16(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$16(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$16(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
-  var appearance = _ref.appearance,
-    busy = _ref.busy,
-    disabled = _ref.disabled,
-    children = _ref.children,
-    className = _ref.className,
-    hint = _ref.hint,
-    pressed = _ref.pressed,
-    type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$16);
-  return jsxRuntime.jsx("button", _objectSpread$16(_objectSpread$16({}, restProps), {}, {
-    ref: ref,
-    className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),
-    "aria-busy": busy || undefined,
-    "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
-    disabled: disabled,
-    type: type || 'button',
-    children: children
-  }));
-});
-Button.displayName = 'Button';
-var PrimaryActionButton = function PrimaryActionButton(_ref2) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return jsxRuntime.jsx(Button, _objectSpread$16(_objectSpread$16({}, args), {}, {
-    appearance: "primary-action-button"
-  }));
-};
-PrimaryActionButton.displayName = 'PrimaryActionButton';
-var SecondaryActionButton = function SecondaryActionButton(_ref3) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  return jsxRuntime.jsx(Button, _objectSpread$16(_objectSpread$16({}, args), {}, {
-    appearance: "secondary-action-button"
-  }));
-};
-SecondaryActionButton.displayName = 'SecondaryActionButton';
-var SubtleButton = function SubtleButton(_ref4) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
-  return jsxRuntime.jsx(Button, _objectSpread$16(_objectSpread$16({}, args), {}, {
-    appearance: "subtle-button"
-  }));
-};
-SubtleButton.displayName = 'SubtleButton';
-
 var _excluded$15 = ["children", "className"];
 function ownKeys$15(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$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$15(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$15(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -1835,6 +2074,9 @@ var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 UnorderedListItem.displayName = 'UnorderedListItem';
 
+exports.Accordion = Accordion;
+exports.AccordionProvider = AccordionProvider;
+exports.AccordionSection = AccordionSection;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
 exports.Article = Article;

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

@@ -2,6 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2022 Robbert Broersma
  */
+export { Accordion, AccordionProvider, AccordionSection } from './Accordion';
 export { Alert } from './Alert';
 export { AlertDialog } from './AlertDialog';
 export { Article } from './Article';