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

package/dist/css-module/index.mjs

@@ -1,8 +1,9 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { forwardRef, useId, useRef, useState, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useId } from 'react';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
 
@@ -33,19 +34,326 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$S = ".utrecht-alert{background-color:var(--_utrecht-alert-background-color,var(--utrecht-alert-background-color));border-color:var(--_utrecht-alert-border-color,var(--utrecht-alert-border-color));border-style:solid;border-width:var(--_utrecht-alert-border-width,var(--utrecht-alert-border-width,0));color:var(--_utrecht-alert-color,var(--utrecht-alert-color));display:grid;gap:var(--utrecht-alert-icon-gap);grid-template-areas:\"icon message\";grid-template-columns:0fr 100fr;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color,var(--utrecht-alert-icon-color));grid-area:icon}.utrecht-alert__message{grid-area:message}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}";
-styleInject(css_248z$S);
+var css_248z$T = ".utrecht-accordion__button{--utrecht-button-focus-scale:1;--utrecht-button-hover-scale:1;--utrecht-button-inline-size:100%;--utrecht-button-subtle-background-color:var(--utrecht-accordion-button-background-color);--utrecht-button-subtle-color:var(--utrecht-accordion-button-color);--utrecht-button-subtle-hover-background-color:var(--utrecht-accordion-button-hover-background-color);--utrecht-button-subtle-hover-border-color:var(--utrecht-accordion-button-hover-border-color);--utrecht-button-subtle-border-color:var(--utrecht-accordion-button-border-color);--utrecht-button-subtle-border-width:var(--utrecht-accordion-button-border-width);justify-content:start!important;padding-inline-end:var(--utrecht-accordion-button-padding-inline-end);position:relative}.utrecht-accordion__button[aria-expanded]:after{background-color:var(--utrecht-accordion-button-icon-background-color);background-position:50%;background-repeat:no-repeat;content:\"\";height:var(--utrecht-accordion-button-icon-size);inset-block-start:0;inset-inline-end:0;position:absolute;width:var(--utrecht-accordion-button-icon-size)}.utrecht-accordion__button[aria-expanded=false]:after{background-image:var(--utrecht-accordion-icon-arrow-down,url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='m15.866 4.135-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E\"))}.utrecht-accordion__button[aria-expanded=true]:after{background-image:var(--utrecht-accordion-icon-arrow-up,url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='m5.223 9.457 5.32-5.322 5.322 5.322'/%3E%3C/svg%3E\"));background-position:50%;background-repeat:no-repeat;content:\"\"}.utrecht-accordion__body{border-color:var(--utrecht-accordion-body-border-color);border-style:solid;border-top:none;border-width:var(--utrecht-accordion-body-border-width);padding-block-end:var(--utrecht-accordion-body-padding-block-end);padding-block-start:var(--utrecht-accordion-body-padding-block-start);padding-inline-end:var(--utrecht-accordion-body-padding-inline-end);padding-inline-start:var(--utrecht-accordion-body-padding-inline-start)}";
+styleInject(css_248z$T);
 
-var _excluded$11 = ["children", "className", "icon", "type"];
+var _excluded$12 = ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"];
+function ownKeys$12(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$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$12(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$12(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Button = /*#__PURE__*/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$12);
+  return jsx("button", _objectSpread$12(_objectSpread$12({}, 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 jsx(Button, _objectSpread$12(_objectSpread$12({}, args), {}, {
+    appearance: "primary-action-button"
+  }));
+};
+PrimaryActionButton.displayName = 'PrimaryActionButton';
+var SecondaryActionButton = function SecondaryActionButton(_ref3) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return jsx(Button, _objectSpread$12(_objectSpread$12({}, args), {}, {
+    appearance: "secondary-action-button"
+  }));
+};
+SecondaryActionButton.displayName = 'SecondaryActionButton';
+var SubtleButton = function SubtleButton(_ref4) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return jsx(Button, _objectSpread$12(_objectSpread$12({}, args), {}, {
+    appearance: "subtle-button"
+  }));
+};
+SubtleButton.displayName = 'SubtleButton';
+
+var _excluded$11 = ["appearance", "className", "level"];
 function ownKeys$11(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$11(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var appearance = _ref.appearance,
+    className = _ref.className,
+    level = _ref.level,
+    restProps = _objectWithoutProperties(_ref, _excluded$11);
+  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 jsx(HeadingX, _objectSpread$11(_objectSpread$11({
+    className: clsx(headingClassName, className)
+  }, restProps), {}, {
+    ref: ref
+  }));
+});
+Heading.displayName = 'Heading';
+
+var _excluded$10 = ["children", "group", "headingLevel", "heading"];
+function ownKeys$10(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$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(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__*/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 || 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 jsxs("div", {
+    className: clsx('utrecht-accordion__section'),
+    id: id,
+    ref: ref,
+    children: [jsx(Heading, {
+      level: headingLevel,
+      className: clsx('utrecht-accordion__header'),
+      children: 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 ? jsx("section", _objectSpread$10(_objectSpread$10({
+      id: panelId,
+      "aria-labelledby": buttonId
+    }, panelAttributes), {}, {
+      children: children
+    })) : jsx("div", _objectSpread$10(_objectSpread$10({}, panelAttributes), {}, {
+      children: children
+    }))]
+  });
+});
+AccordionSection.displayName = 'AccordionSection';
+var Accordion = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+    group = _ref2.group,
+    headingLevel = _ref2.headingLevel,
+    heading = _ref2.heading,
+    props = _objectWithoutProperties(_ref2, _excluded$10);
+  var headingId = useId();
+  return jsxs(Fragment, {
+    children: [!!heading && typeof headingLevel === 'number' && jsx(Heading, {
+      level: headingLevel,
+      children: heading
+    }), jsx("div", _objectSpread$10(_objectSpread$10({
+      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 useRef(null);
+  });
+  var buttonRefs = sections.map(function (_) {
+    return 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 = 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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeElement = _useState2[0],
+    setActiveElement = _useState2[1];
+  var _useState3 = 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 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$10(_objectSpread$10({}, section), {}, {
+              expanded: !section.expanded
+            });
+          } else {
+            return section;
+          }
+        }));
+      };
+      return /*#__PURE__*/createElement(AccordionSection, _objectSpread$10(_objectSpread$10({}, section), {}, {
+        ref: refs[index],
+        buttonRef: buttonRefs[index],
+        key: index,
+        onButtonFocus: handleButtonFocus,
+        onButtonBlur: handleButtonBlur,
+        onActivate: handleActivate
+      }), section.body);
+    })
+  });
+};
+AccordionProvider.displayName = 'AccordionProvider';
+
+var css_248z$S = ".utrecht-alert{background-color:var(--_utrecht-alert-background-color,var(--utrecht-alert-background-color));border-color:var(--_utrecht-alert-border-color,var(--utrecht-alert-border-color));border-style:solid;border-width:var(--_utrecht-alert-border-width,var(--utrecht-alert-border-width,0));color:var(--_utrecht-alert-color,var(--utrecht-alert-color));display:grid;gap:var(--utrecht-alert-icon-gap);grid-template-areas:\"icon message\";grid-template-columns:0fr 100fr;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-start, 0));padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color,var(--utrecht-alert-icon-color));grid-area:icon}.utrecht-alert__message{grid-area:message}.utrecht-alert--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert--ok{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-ok-color);--_utrecht-alert-background-color:var(--utrecht-alert-ok-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-ok-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-ok-border-width);--_utrecht-alert-color:var(--utrecht-alert-ok-color)}.utrecht-alert--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}.utrecht-alert--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}";
+styleInject(css_248z$S);
+
+var _excluded$$ = ["children", "className", "icon", "type"];
+function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Alert = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     icon = _ref.icon,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$11);
-  return jsxs("div", _objectSpread$11(_objectSpread$11({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$$);
+  return jsxs("div", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-alert', {
       'utrecht-alert--error': type === 'error',
@@ -67,16 +375,16 @@ Alert.displayName = 'Alert';
 var css_248z$R = ".utrecht-alert-dialog:not(dialog:not([open])){--utrecht-alert-dialog-margin-block-start:auto;--utrecht-alert-dialog-margin-block-end:auto;background-color:var(--_utrecht-alert-background-color,var(--utrecht-alert-background-color));border-color:var(--utrecht-alert-dialog-border-color);border-radius:var(--utrecht-alert-dialog-border-radius,0);border-style:solid;border-width:var(--utrecht-alert-dialog-border-width,0);box-shadow:var(--utrecht-alert-dialog-box-shadow);color:var(--_utrecht-alert-color,var(--utrecht-alert-color));display:grid;gap:var(--utrecht-alert-icon-gap);grid-template-areas:\"icon message\";grid-template-columns:0fr 100fr;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-alert-margin-block-start, 0));max-block-size:var(--utrecht-alert-dialog-max-block-size);max-inline-size:var(--utrecht-alert-dialog-max-inline-size);min-block-size:var(--utrecht-alert-dialog-min-block-size);min-inline-size:var(--utrecht-alert-dialog-min-inline-size);padding-block-end:var(--utrecht-alert-padding-block-end);padding-block-start:var(--utrecht-alert-padding-block-start);padding-inline-end:var(--utrecht-alert-padding-inline-end);padding-inline-start:var(--utrecht-alert-padding-inline-start)}.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-opacity);--_utrecht-backdrop-fade-in-animation-duration:var(--utrecht-backdrop-fade-in-animation-duration,0);animation-duration:min(var(--utrecht-motion-max-animation-duration,var(--_utrecht-backdrop-fade-in-animation-duration)),var(--_utrecht-backdrop-fade-in-animation-duration,0));animation-name:utrecht-backdrop-fade-in;animation-timing-function:ease-in-out;background-color:var(--utrecht-backdrop-background-color);color:var(--utrecht-backdrop-color);opacity:var(--_utrecht-backdrop-opacity);user-select:none}@keyframes utrecht-backdrop-fade-in{0%{opacity:0}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion:reduce){.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency:reduce){.utrecht-alert-dialog::backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}}.utrecht-alert-dialog__icon{--utrecht-icon-color:var(--_utrecht-alert-icon-color,var(--utrecht-alert-icon-color));grid-area:icon}.utrecht-alert-dialog__message{grid-area:message}.utrecht-alert-dialog--error{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-error-color);--_utrecht-alert-background-color:var(--utrecht-alert-error-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-error-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-error-border-width);--_utrecht-alert-color:var(--utrecht-alert-error-color)}.utrecht-alert-dialog--info{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-info-color);--_utrecht-alert-background-color:var(--utrecht-alert-info-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-info-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-info-border-width);--_utrecht-alert-color:var(--utrecht-alert-info-color)}.utrecht-alert-dialog--warning{--_utrecht-alert-icon-color:var(--utrecht-alert-icon-warning-color);--_utrecht-alert-background-color:var(--utrecht-alert-warning-background-color);--_utrecht-alert-border-color:var(--utrecht-alert-warning-border-color);--_utrecht-alert-border-width:var(--utrecht-alert-warning-border-width);--_utrecht-alert-color:var(--utrecht-alert-warning-color)}";
 styleInject(css_248z$R);
 
-var _excluded$10 = ["children", "className", "icon", "type"];
-function ownKeys$10(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$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$_ = ["children", "className", "icon", "type"];
+function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AlertDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     icon = _ref.icon,
     type = _ref.type,
-    restProps = _objectWithoutProperties(_ref, _excluded$10);
-  return jsxs("dialog", _objectSpread$10(_objectSpread$10({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$_);
+  return jsxs("dialog", _objectSpread$_(_objectSpread$_({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-alert-dialog', {
       'utrecht-alert-dialog--error': type === 'error',
@@ -98,14 +406,14 @@ AlertDialog.displayName = 'AlertDialog';
 var css_248z$Q = ".utrecht-article{max-inline-size:var(--utrecht-article-max-inline-size)}";
 styleInject(css_248z$Q);
 
-var _excluded$$ = ["children", "className"];
-function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$Z = ["children", "className"];
+function ownKeys$Z(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$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Article = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$$);
-  return jsx("article", _objectSpread$$(_objectSpread$$({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$Z);
+  return jsx("article", _objectSpread$Z(_objectSpread$Z({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-article', className),
     children: children
@@ -116,14 +424,14 @@ Article.displayName = 'Article';
 var css_248z$P = ".utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-opacity);--_utrecht-backdrop-fade-in-animation-duration:var(--utrecht-backdrop-fade-in-animation-duration,0);animation-duration:min(var(--utrecht-motion-max-animation-duration,var(--_utrecht-backdrop-fade-in-animation-duration)),var(--_utrecht-backdrop-fade-in-animation-duration,0));animation-name:utrecht-backdrop-fade-in;animation-timing-function:ease-in-out;background-color:var(--utrecht-backdrop-background-color);bottom:0;color:var(--utrecht-backdrop-color);display:block;left:0;opacity:var(--_utrecht-backdrop-opacity);position:absolute;right:0;top:0;user-select:none;z-index:var(--utrecht-backdrop-z-index)}@keyframes utrecht-backdrop-fade-in{0%{opacity:0}to{opacity:var(--_utrecht-backdrop-opacity)}}@media (prefers-reduced-motion:reduce){.utrecht-backdrop{--_utrecht-backdrop-fade-in-animation-duration:0}}@media (prefers-reduced-transparency:reduce){.utrecht-backdrop{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}}.utrecht-backdrop--reduced-motion{--_utrecht-backdrop-fade-in-animation-duration:0}.utrecht-backdrop--reduced-transparency{--_utrecht-backdrop-opacity:var(--utrecht-backdrop-reduced-transparency-opacity,100%)}.utrecht-backdrop--viewport{position:fixed}";
 styleInject(css_248z$P);
 
-var _excluded$_ = ["children", "className"];
-function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$Y = ["children", "className"];
+function ownKeys$Y(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$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Backdrop = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded$_);
-  return jsx("div", _objectSpread$_(_objectSpread$_({}, restProps), {}, {
+    restProps = _objectWithoutProperties(_ref, _excluded$Y);
+  return jsx("div", _objectSpread$Y(_objectSpread$Y({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-backdrop', className),
     children: children
@@ -134,28 +442,9 @@ Backdrop.displayName = 'Backdrop';
 var css_248z$O = ".utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{block-size:0;inline-size:0;inset-block-start:50%;inset-inline-start:100%}.utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color,var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform,inherit)}.utrecht-breadcrumb__heading{display:none}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end,8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start,8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end,8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start,8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(var(--utrecht-breadcrumb-block-size)*-1);position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(var(--utrecht-breadcrumb-block-size)*-1);margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus:after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus:after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}";
 styleInject(css_248z$O);
 
-var _excluded$Z = ["appearance", "className", "level"];
-function ownKeys$Z(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$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var appearance = _ref.appearance,
-    className = _ref.className,
-    level = _ref.level,
-    restProps = _objectWithoutProperties(_ref, _excluded$Z);
-  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 jsx(HeadingX, _objectSpread$Z(_objectSpread$Z({
-    className: clsx(headingClassName, className)
-  }, restProps), {}, {
-    ref: ref
-  }));
-});
-Heading.displayName = 'Heading';
-
-var _excluded$Y = ["boxContent", "children", "className", "external", "href", "placeholder", "role"];
-function ownKeys$Y(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$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$X = ["boxContent", "children", "className", "external", "href", "placeholder", "role"];
+function ownKeys$X(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$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var boxContent = _ref.boxContent,
     children = _ref.children,
@@ -164,13 +453,13 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     href = _ref.href,
     placeholder = _ref.placeholder,
     role = _ref.role,
-    restProps = _objectWithoutProperties(_ref, _excluded$Y);
+    restProps = _objectWithoutProperties(_ref, _excluded$X);
   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.
-    jsx("a", _objectSpread$Y(_objectSpread$Y({
+    jsx("a", _objectSpread$X(_objectSpread$X({
       href: placeholder ? undefined : href,
       ref: ref,
       role: role || (placeholder ? 'link' : undefined),
@@ -188,9 +477,9 @@ var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$X = ["appearance", "children", "className", "headingLevel", "label"];
-function ownKeys$X(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$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$W = ["appearance", "children", "className", "headingLevel", "label"];
+function ownKeys$W(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$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(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;
@@ -212,9 +501,9 @@ var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     _ref2$headingLevel = _ref2.headingLevel,
     headingLevel = _ref2$headingLevel === void 0 ? 2 : _ref2$headingLevel,
     label = _ref2.label,
-    restProps = _objectWithoutProperties(_ref2, _excluded$X);
+    restProps = _objectWithoutProperties(_ref2, _excluded$W);
   var headingId = label ? useId() : undefined;
-  return jsxs("nav", _objectSpread$X(_objectSpread$X({}, restProps), {}, {
+  return jsxs("nav", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
     ref: ref,
     className: clsx('utrecht-breadcrumb', {
       'utrecht-breadcrumb--arrows': appearance === 'arrows'
@@ -226,7 +515,7 @@ var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       level: headingLevel,
       "aria-hidden": "true",
       children: label
-    }), jsx("ol", _objectSpread$X(_objectSpread$X({
+    }), jsx("ol", _objectSpread$W(_objectSpread$W({
       className: "utrecht-breadcrumb__list"
     }, useMicrodataItem({
       type: 'https://schema.org/BreadcrumbList'
@@ -242,24 +531,24 @@ var BreadcrumbLink = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     href = _ref3.href,
     index = _ref3.index,
     rel = _ref3.rel;
-  return jsx("li", _objectSpread$X(_objectSpread$X({
+  return jsx("li", _objectSpread$W(_objectSpread$W({
     className: "utrecht-breadcrumb__item"
   }, useMicrodataItem({
     type: 'https://schema.org/ListItem',
     prop: 'itemListElement'
   })), {}, {
-    children: jsxs(Link, _objectSpread$X(_objectSpread$X({
+    children: jsxs(Link, _objectSpread$W(_objectSpread$W({
       className: "utrecht-breadcrumb__link",
       href: href,
       rel: rel,
       "aria-current": current && 'location'
     }, useMicrodataProp('item')), {}, {
       ref: ref,
-      children: [jsx("span", _objectSpread$X(_objectSpread$X({
+      children: [jsx("span", _objectSpread$W(_objectSpread$W({
         className: "utrecht-breadcrumb__text"
       }, useMicrodataProp('name')), {}, {
         children: children
-      })), typeof index === 'number' ? jsx("meta", _objectSpread$X(_objectSpread$X({}, useMicrodataProp('position')), {}, {
+      })), typeof index === 'number' ? jsx("meta", _objectSpread$W(_objectSpread$W({}, useMicrodataProp('position')), {}, {
         content: String(index + 1)
       })) : null]
     }))
@@ -270,52 +559,6 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 var css_248z$N = ".utrecht-button{--_utrecht-button-background-color:var(\n    --_utrecht-button-hint-background-color,var(--_utrecht-button-appearance-background-color,var(--utrecht-button-background-color))\n  );--_utrecht-button-color:var(\n    --_utrecht-button-hint-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-color))\n  );--_utrecht-button-border-color:var(\n    --_utrecht-button-hint-border-color,var(--_utrecht-button-appearance-border-color,var(--utrecht-button-border-color,transparent))\n  );--_utrecht-button-border-bottom-color:var(\n    --_utrecht-button-hint-border-bottom-color,var(\n      --_utrecht-button-hint-border-color,var(\n        --_utrecht-button-appearance-border-bottom-color,var(\n          --_utrecht-button-appearance-border-color,var(--utrecht-button-border-bottom-color,var(--utrecht-button-border-color,transparent))\n        )\n      )\n    )\n  );--_utrecht-button-disabled-background-color:var(\n    --_utrecht-button-hint-disabled-background-color,var(\n      --_utrecht-button-appearance-disabled-background-color,var(--utrecht-button-disabled-background-color,var(--utrecht-button-background-color))\n    )\n  );--_utrecht-button-disabled-border-color:var(\n    --_utrecht-button-hint-disabled-border-color,var(\n      --_utrecht-button-appearance-disabled-border-color,var(--utrecht-button-disabled-border-color,var(--utrecht-button-border-color))\n    )\n  );--_utrecht-button-disabled-color:var(\n    --_utrecht-button-hint-disabled-color,var(--_utrecht-button-appearance-disabled-color,var(--utrecht-button-disabled-color,var(--utrecht-button-color)))\n  );--_utrecht-button-focus-background-color:var(\n    --_utrecht-button-hint-focus-background-color,var(\n      --_utrecht-button-hint-background-color,var(\n        --_utrecht-button-appearance-focus-background-color,var(\n          --_utrecht-button-appearance-background-color,var(--utrecht-button-focus-background-color,var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-focus-border-color:var(\n    --_utrecht-button-hint-focus-border-color,var(\n      --_utrecht-button-hint-border-color,var(\n        --_utrecht-button-appearance-focus-border-color,var(\n          --_utrecht-button-appearance-border-color,var(--utrecht-button-focus-border-color,var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-focus-color:var(\n    --_utrecht-button-hint-focus-color,var(\n      --_utrecht-button-hint-color,var(\n        --_utrecht-button-appearance-focus-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-focus-color,var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-hover-background-color:var(\n    --_utrecht-button-hint-hover-background-color,var(\n      --_utrecht-button-hint-background-color,var(\n        --_utrecht-button-appearance-hover-background-color,var(\n          --_utrecht-button-appearance-background-color,var(--utrecht-button-hover-background-color,var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-hover-border-color:var(\n    --_utrecht-button-hint-hover-border-color,var(\n      --_utrecht-button-hint-border-color,var(\n        --_utrecht-button-appearance-hover-border-color,var(\n          --_utrecht-button-appearance-border-color,var(--utrecht-button-hover-border-color,var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-hover-color:var(\n    --_utrecht-button-hint-hover-color,var(\n      --_utrecht-button-hint-color,var(\n        --_utrecht-button-appearance-hover-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-hover-color,var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-active-background-color:var(\n    --_utrecht-button-hint-active-background-color,var(\n      --_utrecht-button-hint-background-color,var(\n        --_utrecht-button-appearance-active-background-color,var(\n          --_utrecht-button-appearance-background-color,var(--utrecht-button-active-background-color,var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-active-border-color:var(\n    --_utrecht-button-hint-active-border-color,var(\n      --_utrecht-button-hint-border-color,var(\n        --_utrecht-button-appearance-active-border-color,var(\n          --_utrecht-button-appearance-border-color,var(--utrecht-button-active-border-color,var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-active-color:var(\n    --_utrecht-button-hint-active-color,var(\n      --_utrecht-button-hint-color,var(\n        --_utrecht-button-appearance-active-color,var(--_utrecht-button-appearance-color,var(--utrecht-button-active-color,var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-border-width:var(--_utrecht-button-appearance-border-width,var(--utrecht-button-border-width,0));--_utrecht-button-border-bottom-width:var(\n    --utrecht-button-border-bottom-width,var(--_utrecht-button-border-width,0)\n  );--utrecht-icon-size:var(--utrecht-button-icon-size,1em);align-items:center;background-color:var(--_utrecht-button-background-color);border-color:var(--_utrecht-button-border-color);border-bottom-color:var(--_utrecht-button-border-bottom-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);border-bottom-width:var(--_utrecht-button-border-bottom-width);box-sizing:border-box;color:var(--_utrecht-button-color);cursor:var(--utrecht-action-activate-cursor);display:inline-flex;font-family:var(--utrecht-button-font-family,var(--utrecht-document-font-family));font-size:var(--utrecht-button-font-size,var(--utrecht-document-font-family));font-weight:var(--_utrecht-button-appearance-font-weight,var(--utrecht-button-font-weight));gap:var(--utrecht-button-icon-gap);inline-size:var(--utrecht-button-inline-size,auto);justify-content:center;letter-spacing:var(--utrecht-button-letter-spacing);line-height:var(--utrecht-button-line-height);min-block-size:var(--utrecht-button-min-block-size,44px);min-inline-size:var(--utrecht-button-min-inline-size,44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);text-transform:var(--utrecht-button-text-transform);user-select:none}.utrecht-button--distanced{margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start)}.utrecht-button--submit{cursor:var(--utrecht-action-submit-cursor)}.utrecht-button--busy{cursor:var(--utrecht-action-busy-cursor)}.utrecht-button--pressed{background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--disabled,.utrecht-button:disabled{background-color:var(--_utrecht-button-disabled-background-color);border-color:var(--_utrecht-button-disabled-border-color);color:var(--_utrecht-button-disabled-color);cursor:var(--utrecht-action-disabled-cursor)}.utrecht-button--active,.utrecht-button:active:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-button--focus:not(.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale,1)}.utrecht-button:focus,.utrecht-button:focus:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert)}.utrecht-button:focus:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale,1)}.utrecht-button:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-button--hover:not(:disabled,.utrecht-button--disabled),.utrecht-button:hover:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale,1)}.utrecht-button--primary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-primary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-primary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-primary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-primary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-primary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-primary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-primary-action-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-primary-action-disabled-background-color\n  );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-primary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-primary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-primary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-primary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-primary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-primary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-primary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-primary-action-hover-color)}.utrecht-button--secondary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-secondary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-secondary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-secondary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-secondary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-secondary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-secondary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-secondary-action-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-secondary-action-disabled-background-color\n  );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-secondary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-secondary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-secondary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-secondary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-secondary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-secondary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-secondary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-secondary-action-hover-color)}.utrecht-button--subtle{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-subtle-disabled-background-color\n  );--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-subtle-hover-color)}.utrecht-button--primary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-danger-hover-color)}.utrecht-button--primary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-ready-hover-color)}.utrecht-button--primary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-warning-hover-color)}.utrecht-button--secondary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-danger-hover-color)}.utrecht-button--secondary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-ready-hover-color)}.utrecht-button--secondary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-warning-hover-color)}.utrecht-button--subtle.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-danger-hover-color)}.utrecht-button--subtle.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-ready-hover-color)}.utrecht-button--subtle.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-warning-hover-color)}";
 styleInject(css_248z$N);
 
-var _excluded$W = ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"];
-function ownKeys$W(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$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Button = /*#__PURE__*/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$W);
-  return jsx("button", _objectSpread$W(_objectSpread$W({}, 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 jsx(Button, _objectSpread$W(_objectSpread$W({}, args), {}, {
-    appearance: "primary-action-button"
-  }));
-};
-PrimaryActionButton.displayName = 'PrimaryActionButton';
-var SecondaryActionButton = function SecondaryActionButton(_ref3) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  return jsx(Button, _objectSpread$W(_objectSpread$W({}, args), {}, {
-    appearance: "secondary-action-button"
-  }));
-};
-SecondaryActionButton.displayName = 'SecondaryActionButton';
-var SubtleButton = function SubtleButton(_ref4) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
-  return jsx(Button, _objectSpread$W(_objectSpread$W({}, args), {}, {
-    appearance: "subtle-button"
-  }));
-};
-SubtleButton.displayName = 'SubtleButton';
-
 var css_248z$M = ".utrecht-button-group,.utrecht-button-group--distanced{background-color:var(--utrecht-button-group-background-color);display:flex;gap:var(--utrecht-button-group-inline-gap,1em);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-button-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-button-group-margin-block-start, 0));min-block-size:var(--utrecht-button-block-size);padding-block-end:var(--utrecht-button-group-padding-block-end);padding-block-start:var(--utrecht-button-group-padding-block-start)}.utrecht-button-group--horizontal .utrecht-link-button,.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-link-button,.utrecht-button-group__link-button--horizontal{--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0}.utrecht-button-group--vertical{flex-direction:column;gap:var(--utrecht-button-group-block-gap,1em)}";
 styleInject(css_248z$M);
 
@@ -1616,5 +1859,5 @@ var UnorderedListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 UnorderedListItem.displayName = 'UnorderedListItem';
 
-export { Alert, AlertDialog, Article, Backdrop, BreadcrumbLink, BreadcrumbNav, Button, ButtonGroup, ButtonLink, Checkbox, Code, CodeBlock, DataBadge, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
+export { Accordion, AccordionProvider, AccordionSection, Alert, AlertDialog, Article, Backdrop, BreadcrumbLink, BreadcrumbNav, Button, ButtonGroup, ButtonLink, Checkbox, Code, CodeBlock, DataBadge, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Emphasis, Fieldset, FieldsetLegend, Figure, FigureCaption, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Icon, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, Mark, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SpotlightSection, Strong, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
 //# sourceMappingURL=index.mjs.map