@utrecht/component-library-react/dist/css-module/index.mjs

React component library bundle for the Municipality of Utrecht based on the NL Design System architecture

import css from '@utrecht/accordion-css/dist/index.mjs';
export { Button, PrimaryActionButton, SecondaryActionButton, SubtleButton } from '@utrecht/button-react/dist/css';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { forwardRef, useId, useRef, useState, createElement, useImperativeHandle, useEffect } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Button } from '@utrecht/button-react';
import clsx, { clsx as clsx$1 } from 'clsx';
import css$1 from '@utrecht/alert-css/dist/index.mjs';
import css$2 from '@utrecht/alert-dialog-css/dist/index.mjs';
import css$3 from '@utrecht/article-css/dist/index.mjs';
import css$4 from '@utrecht/backdrop-css/dist/index.mjs';
import css$5 from '@utrecht/badge-counter-css/dist/index.mjs';
import css$6 from '@utrecht/badge-list-css/dist/index.mjs';
import css$7 from '@utrecht/blockquote-css/dist/index.mjs';
import css$8 from '@utrecht/breadcrumb-nav-css/dist/index.mjs';
import { Link } from '@utrecht/link-react';
export { ButtonGroup } from '@utrecht/button-group-react/dist/css';
import css$9 from '@utrecht/button-link-css/dist/index.mjs';
export { Checkbox } from '@utrecht/checkbox-react/dist/css';
import css$a from '@utrecht/code-css/dist/index.mjs';
import css$b from '@utrecht/code-block-css/dist/index.mjs';
import css$c from '@utrecht/color-sample-css/dist/index.mjs';
import css$d from '@utrecht/column-layout-css/dist/index.mjs';
export { Combobox, ComboboxPopover } from '@utrecht/combobox-react/dist/css';
import css$e from '@utrecht/currency-data-css/dist/index.mjs';
export { DataBadge } from '@utrecht/data-badge-react/dist/css';
import css$f from '@utrecht/document-css/dist/index.mjs';
import css$g from '@utrecht/data-list-css/dist/index.mjs';
import css$h from '@utrecht/drawer-css/dist/index.mjs';
import css$i from '@utrecht/emphasis-css/dist/index.mjs';
export { Fieldset, FieldsetLegend } from '@utrecht/fieldset-react/dist/css';
import css$j from '@utrecht/figure-css/dist/index.mjs';
export { FormField } from '@utrecht/form-field-react/dist/css';
export { FormFieldCheckbox } from '@utrecht/form-field-checkbox-react/dist/css';
export { FormFieldDescription } from '@utrecht/form-field-description-react/dist/css';
export { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react/dist/css';
import css$k from '@utrecht/textarea-css/dist/index.mjs';
import { FormField } from '@utrecht/form-field-react';
import { FormFieldDescription } from '@utrecht/form-field-description-react';
import { FormFieldErrorMessage } from '@utrecht/form-field-error-message-react';
import { FormLabel } from '@utrecht/form-label-react';
export { Textbox } from '@utrecht/textbox-react/dist/css';
import { Textbox } from '@utrecht/textbox-react';
export { FormLabel } from '@utrecht/form-label-react/dist/css';
import css$l from '@utrecht/form-toggle-css/dist/index.mjs';
import css$m from '@utrecht/html-content-css/dist/index.mjs';
import heading1css from '@utrecht/heading-1-css/dist/index.mjs';
import heading2css from '@utrecht/heading-2-css/dist/index.mjs';
import heading3css from '@utrecht/heading-3-css/dist/index.mjs';
import heading4css from '@utrecht/heading-4-css/dist/index.mjs';
import heading5css from '@utrecht/heading-5-css/dist/index.mjs';
import heading6css from '@utrecht/heading-6-css/dist/index.mjs';
import css$n from '@utrecht/heading-group-css/dist/index.mjs';
import css$o from '@utrecht/iban-data-css/dist/index.mjs';
import css$p from '@utrecht/icon-css/dist/index.mjs';
import css$q from '@utrecht/index-char-nav-css/dist/index.mjs';
import css$r from '@utrecht/img-css/dist/index.mjs';
export { Link } from '@utrecht/link-react/dist/css';
import css$s from '@utrecht/link-button-css/dist/index.mjs';
import css$t from '@utrecht/link-list-css/dist/index.mjs';
import css$u from '@utrecht/link-social-css/dist/index.mjs';
export { Listbox, ListboxOption, ListboxOptionGroup } from '@utrecht/listbox-react/dist/css';
import css$v from '@utrecht/list-social-css/dist/index.mjs';
import css$w from '@utrecht/logo-css/dist/index.mjs';
import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import _extends from '@babel/runtime/helpers/extends';
import css$x from '@utrecht/mark-css/dist/index.mjs';
import css$y from '@utrecht/multiline-data-css/dist/index.mjs';
import css$z from '@utrecht/nav-bar-css/dist/index.mjs';
import css$A from '@utrecht/nav-list-css/dist/index.mjs';
import css$B from '@utrecht/number-badge-css/dist/index.mjs';
import css$C from '@utrecht/number-data-css/dist/index.mjs';
import css$D from '@utrecht/open-forms-container-css/dist/index.mjs';
export { OpenFormsContainer } from '@utrecht/open-forms-container-react';
import css$E from '@utrecht/ordered-list-css/dist/index.mjs';
import css$F from '@utrecht/page-css/dist/index.mjs';
import css$G from '@utrecht/page-content-css/dist/index.mjs';
import css$H from '@utrecht/page-footer-css/dist/index.mjs';
import css$I from '@utrecht/page-header-css/dist/index.mjs';
import css$J from '@utrecht/paragraph-css/dist/index.mjs';
import css$K from '@utrecht/data-placeholder-css/dist/index.mjs';
import css$L from '@utrecht/pre-heading-css/dist/index.mjs';
import css$M from '@utrecht/preserve-data-css/dist/index.mjs';
export { RadioButton } from '@utrecht/radio-button-react/dist/css';
import css$N from '@utrecht/rich-text-css/dist/index.mjs';
import '@utrecht/button-group-react';
import '@utrecht/checkbox-react';
import '@utrecht/combobox-react';
import '@utrecht/data-badge-react';
import '@utrecht/fieldset-react';
import '@utrecht/form-field-checkbox-react';
import '@utrecht/listbox-react';
import '@utrecht/radio-button-react';
import css$O from '@utrecht/select-css/dist/index.mjs';
import css$P from '@utrecht/separator-css/dist/index.mjs';
import css$Q from '@utrecht/skip-link-css/dist/index.mjs';
import css$R from '@utrecht/spotlight-section-css/dist/index.mjs';
import css$S from '@utrecht/badge-status-css/dist/index.mjs';
import css$T from '@utrecht/subscript-css/dist/index.mjs';
import css$U from '@utrecht/superscript-css/dist/index.mjs';
import css$V from '@utrecht/surface-css/dist/index.mjs';
import css$W from '@utrecht/table-css/dist/index.mjs';
import css$X from '@utrecht/table-of-contents-css/dist/index.mjs';
import css$Y from '@utrecht/url-data-css/dist/index.mjs';
import css$Z from '@utrecht/unordered-list-css/dist/index.mjs';

var insertStyle = function insertStyle(css) {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    head.appendChild(style);
  }
};

var _excluded$1h = ["level", "className"];
function ownKeys$1i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var HTMLHeading = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var level = _ref.level,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1h);
  var HeadingX = level === 1 ? 'h1' : level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'p';
  return jsx(HeadingX, _objectSpread$1i(_objectSpread$1i({
    className: clsx(className)
  }, restProps), {}, {
    ref: ref
  }));
});
HTMLHeading.displayName = 'HTMLHeading';

var _excluded$1g = ["appearance", "className", "level"];
function ownKeys$1h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Heading = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var appearance = _ref.appearance,
    className = _ref.className,
    level = _ref.level,
    restProps = _objectWithoutProperties(_ref, _excluded$1g);
  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$1h(_objectSpread$1h({
    className: clsx(headingClassName, className)
  }, restProps), {}, {
    ref: ref
  }));
});
Heading.displayName = 'Heading';

var _excluded$1f = ["id", "label", "className", "headingLevel", "expanded", "disabled", "section", "children", "buttonRef", "onActivate", "onButtonBlur", "onButtonFocus", "icon"],
  _excluded2$7 = ["children", "group", "headingLevel", "heading"];
function ownKeys$1g(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var IconChevronDown = function IconChevronDown() {
  return jsxs("svg", {
    id: "Layer_1",
    xmlns: "http://www.w3.org/2000/svg",
    width: "14",
    height: "8",
    viewBox: "0 0 14 8",
    fill: "currentColor",
    children: [jsx("defs", {
      children: jsx("clipPath", {
        id: "clippath",
        children: jsx("rect", {
          width: "14",
          height: "8",
          style: {
            fill: 'none',
            strokeWidth: '0px'
          }
        })
      })
    }), jsx("g", {
      style: {
        clipPath: 'url(#clippath)'
      },
      children: jsx("path", {
        d: "m7,8c-.26,0-.51-.1-.71-.29L.29,1.71C-.1,1.32-.1.68.29.29S1.32-.1,1.71.29l5.29,5.29L12.29.29c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-6,6c-.2.2-.45.29-.71.29Z",
        style: {
          strokeWidth: '0px'
        }
      })
    })]
  });
};
/**
 * 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,
    className = _ref.className,
    _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,
    icon = _ref.icon,
    props = _objectWithoutProperties(_ref, _excluded$1f);
  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 iconStart = icon ? icon : icon === null ? null : jsx(IconChevronDown, {});
  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", _objectSpread$1g(_objectSpread$1g({
    className: clsx('utrecht-accordion__section', className),
    id: id,
    ref: ref
  }, props), {}, {
    children: [jsx(HTMLHeading, {
      level: headingLevel,
      className: clsx('utrecht-accordion__header'),
      children: jsxs(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: [iconStart && jsx("span", {
          className: "utrecht-accordion__button-icon",
          children: iconStart
        }), jsx("span", {
          className: "utrecht-accordion__button-label",
          children: label
        })]
      })
    }), section ? jsx("section", _objectSpread$1g(_objectSpread$1g({
      id: panelId,
      "aria-labelledby": buttonId
    }, panelAttributes), {}, {
      children: children
    })) : jsx("div", _objectSpread$1g(_objectSpread$1g({
      id: panelId
    }, 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, _excluded2$7);
  var headingId = useId();
  return jsxs(Fragment, {
    children: [!!heading && typeof headingLevel === 'number' && jsx(Heading, {
      level: headingLevel,
      children: heading
    }), jsx("div", _objectSpread$1g(_objectSpread$1g({
      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) {
  // 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 || (_nextSection$current = nextSection.current) === null || _nextSection$current === void 0 || _nextSection$current.focus();
    },
    focusFirstSection: function focusFirstSection() {
      var _firstSection$current;
      var firstSection = firstItem(buttonRefs);
      firstSection === null || firstSection === void 0 || (_firstSection$current = firstSection.current) === null || _firstSection$current === 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 || (_previousSection$curr = previousSection.current) === null || _previousSection$curr === void 0 || _previousSection$curr.focus();
    },
    focusLastSection: function focusLastSection() {
      var _firstSection$current2;
      var firstSection = lastItem(buttonRefs);
      firstSection === null || firstSection === void 0 || (_firstSection$current2 = firstSection.current) === null || _firstSection$current2 === void 0 || _firstSection$current2.focus();
    }
  };
};
var AccordionProvider = function AccordionProvider(_ref4) {
  var sections = _ref4.sections,
    icon = _ref4.icon,
    heading = _ref4.heading,
    headingLevel = _ref4.headingLevel;
  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();
  };
  var sectionHeadingLevel = typeof headingLevel === 'number' ? headingLevel + (heading ? 1 : 0) : undefined;
  return jsx(Accordion, {
    heading: heading,
    headingLevel: headingLevel,
    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$1g(_objectSpread$1g({}, section), {}, {
              expanded: !section.expanded
            });
          } else {
            return section;
          }
        }));
      };
      return /*#__PURE__*/createElement(AccordionSection, _objectSpread$1g(_objectSpread$1g({
        headingLevel: sectionHeadingLevel
      }, section), {}, {
        icon: icon,
        ref: refs[index],
        buttonRef: buttonRefs[index],
        key: index,
        onButtonFocus: handleButtonFocus,
        onButtonBlur: handleButtonBlur,
        onActivate: handleActivate
      }), section.body);
    })
  });
};
AccordionProvider.displayName = 'AccordionProvider';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css);

var _excluded$1e = ["children", "className", "icon", "type", "role"];
function ownKeys$1f(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var enumGuard = function enumGuard(values) {
  return function (x) {
    return values.includes(x);
  };
};
var TYPES = ['error', 'warning', 'info', 'ok'];
var isAlertType = enumGuard(TYPES);
var typeToRole = {
  info: 'status',
  ok: 'status',
  warning: 'alert',
  error: 'alert'
};
var Alert = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    icon = _ref.icon,
    type = _ref.type,
    role = _ref.role,
    restProps = _objectWithoutProperties(_ref, _excluded$1e);
  var computedType = isAlertType(type) ? type : 'info';
  var computedRole = role || typeToRole[computedType];
  return jsxs("div", _objectSpread$1f(_objectSpread$1f({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-alert', {
      'utrecht-alert--error': computedType === 'error',
      'utrecht-alert--info': computedType === 'info',
      'utrecht-alert--ok': computedType === 'ok',
      'utrecht-alert--warning': computedType === 'warning'
    }, className),
    children: [icon && jsx("div", {
      className: "utrecht-alert__icon",
      children: icon
    }), jsx("div", {
      className: "utrecht-alert__content",
      children: jsx("div", {
        className: "utrecht-alert__message",
        role: computedRole,
        children: children
      })
    })]
  }));
});
Alert.displayName = 'Alert';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$1);

var _excluded$1d = ["children", "className", "icon", "type"];
function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AlertDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    icon = _ref.icon,
    type = _ref.type,
    restProps = _objectWithoutProperties(_ref, _excluded$1d);
  return jsxs("dialog", _objectSpread$1e(_objectSpread$1e({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-alert-dialog', {
      'utrecht-alert-dialog--error': type === 'error',
      'utrecht-alert-dialog--info': type === 'info',
      'utrecht-alert-dialog--warning': type === 'warning',
      className: className
    }),
    children: [icon && jsx("div", {
      className: "utrecht-alert-dialog__icon",
      children: icon
    }), jsx("div", {
      className: "utrecht-alert-dialog__message",
      children: children
    })]
  }));
});
AlertDialog.displayName = 'AlertDialog';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$2);

var _excluded$1c = ["children", "className"];
function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Article = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1c);
  return jsx("article", _objectSpread$1d(_objectSpread$1d({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-article', className),
    children: children
  }));
});
Article.displayName = 'Article';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$3);

var _excluded$1b = ["children", "className"];
function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Backdrop = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1b);
  return jsx("div", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-backdrop', className),
    children: children
  }));
});
Backdrop.displayName = 'Backdrop';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$4);

var _excluded$1a = ["children", "className", "value"];
function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BadgeCounter = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    value = _ref.value,
    restProps = _objectWithoutProperties(_ref, _excluded$1a);
  var props = _objectSpread$1b({
    children: children,
    className: clsx('utrecht-badge-counter', className)
  }, restProps);
  return typeof value !== 'undefined' ? jsx("data", _objectSpread$1b(_objectSpread$1b({}, props), {}, {
    value: value,
    ref: ref
  })) : jsx("span", _objectSpread$1b(_objectSpread$1b({}, props), {}, {
    ref: ref
  }));
});
BadgeCounter.displayName = 'BadgeCounter';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$5);

var _excluded$19 = ["children", "className"];
function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BadgeList = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$19);
  return jsx("div", _objectSpread$1a(_objectSpread$1a({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-badge-list', className),
    children: children
  }));
});
BadgeList.displayName = 'BadgeList';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$6);

var _excluded$18 = ["aside", "attribution", "className", "children", "cite", "figure", "caption", "lang"];
function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Blockquote = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var aside = _ref.aside,
    attribution = _ref.attribution,
    className = _ref.className,
    children = _ref.children,
    cite = _ref.cite,
    figure = _ref.figure,
    caption = _ref.caption,
    lang = _ref.lang,
    restProps = _objectWithoutProperties(_ref, _excluded$18);
  var quote = children;
  var captionElement = caption || attribution ? jsx("figcaption", {
    className: "utrecht-blockquote__caption",
    children: caption || attribution
  }) : null;
  var blockquoteAttrs = {
    cite: cite,
    lang: lang
  };
  return aside && (figure || captionElement) ? jsx("aside", _objectSpread$19(_objectSpread$19({
    className: clsx('utrecht-blockquote', className)
  }, restProps), {}, {
    children: jsxs("figure", {
      className: clsx('utrecht-blockquote__figure'),
      children: [jsx("blockquote", _objectSpread$19(_objectSpread$19({
        className: "utrecht-blockquote__quote"
      }, blockquoteAttrs), {}, {
        ref: ref,
        children: quote
      })), captionElement]
    })
  })) : aside ? jsx("aside", _objectSpread$19(_objectSpread$19({
    className: clsx('utrecht-blockquote', className)
  }, restProps), {}, {
    children: jsx("blockquote", _objectSpread$19(_objectSpread$19({
      className: "utrecht-blockquote__quote"
    }, blockquoteAttrs), {}, {
      ref: ref,
      children: quote
    }))
  })) : figure || captionElement ? jsxs("figure", _objectSpread$19(_objectSpread$19({
    className: clsx('utrecht-blockquote', className)
  }, restProps), {}, {
    children: [jsx("blockquote", _objectSpread$19(_objectSpread$19({
      className: "utrecht-blockquote__quote"
    }, blockquoteAttrs), {}, {
      ref: ref,
      children: quote
    })), captionElement]
  })) : jsx("blockquote", _objectSpread$19(_objectSpread$19(_objectSpread$19({
    className: clsx('utrecht-blockquote', 'utrecht-blockquote--html-blockquote', className)
  }, blockquoteAttrs), restProps), {}, {
    ref: ref,
    children: quote
  }));
});
Blockquote.displayName = 'Blockquote';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$7);

var _excluded$17 = ["appearance", "children", "className", "headingLevel", "label"],
  _excluded2$6 = ["className", "children"],
  _excluded3$3 = ["className", "children"],
  _excluded4$2 = ["children", "disabled", "current", "href", "index", "rel", "role", "Link", "className"];
function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useMicrodataItem = function useMicrodataItem(_ref) {
  var prop = _ref.prop,
    type = _ref.type;
  return {
    itemScope: true,
    itemType: type,
    itemProp: prop
  };
};
var useMicrodataProp = function useMicrodataProp(prop) {
  return {
    itemProp: prop
  };
};
var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var appearance = _ref2.appearance,
    children = _ref2.children,
    className = _ref2.className,
    _ref2$headingLevel = _ref2.headingLevel,
    headingLevel = _ref2$headingLevel === void 0 ? 2 : _ref2$headingLevel,
    label = _ref2.label,
    restProps = _objectWithoutProperties(_ref2, _excluded$17);
  var headingId = label ? useId() : undefined;
  return jsxs("nav", _objectSpread$18(_objectSpread$18({}, restProps), {}, {
    ref: ref,
    className: clsx('utrecht-breadcrumb-nav', 'utrecht-breadcrumb-nav--html-ol', {
      'utrecht-breadcrumb-nav--arrows': appearance === 'arrows'
    }, className),
    "aria-labelledby": headingId,
    children: [label && jsx(Heading, {
      id: headingId,
      className: "utrecht-breadcrumb-nav__heading",
      level: headingLevel,
      "aria-hidden": "true",
      children: label
    }), jsx("ol", _objectSpread$18(_objectSpread$18({
      className: "utrecht-breadcrumb-nav__list utrecht-breadcrumb-nav__list--html-ol"
    }, useMicrodataItem({
      type: 'https://schema.org/BreadcrumbList'
    })), {}, {
      children: children
    }))]
  }));
});
BreadcrumbNav.displayName = 'BreadcrumbNav';
var BreadcrumbNavItem = /*#__PURE__*/forwardRef(function (_ref3, ref) {
  var className = _ref3.className,
    children = _ref3.children,
    restProps = _objectWithoutProperties(_ref3, _excluded2$6);
  return jsx("li", _objectSpread$18(_objectSpread$18(_objectSpread$18({
    className: clsx('utrecht-breadcrumb-nav__item', className)
  }, useMicrodataItem({
    type: 'https://schema.org/ListItem',
    prop: 'itemListElement'
  })), {}, {
    ref: ref
  }, restProps), {}, {
    children: children
  }));
});
BreadcrumbNavItem.displayName = 'BreadcrumbNavItem';
var BreadcrumbNavSeparator = /*#__PURE__*/forwardRef(function (_ref4, ref) {
  var className = _ref4.className,
    children = _ref4.children,
    restProps = _objectWithoutProperties(_ref4, _excluded3$3);
  return jsx("li", _objectSpread$18(_objectSpread$18({
    "aria-hidden": "true",
    hidden: true,
    style: {
      display: 'var(--_utrecht-breadcrumb-nav-separator-display, block)'
    },
    className: clsx('utrecht-breadcrumb-nav__separator', 'utrecht-breadcrumb-nav__separator--html-li', className),
    ref: ref
  }, restProps), {}, {
    children: children
  }));
});
BreadcrumbNavSeparator.displayName = 'BreadcrumbNavSeparator';
var BreadcrumbNavLink = /*#__PURE__*/forwardRef(function (_ref5, ref) {
  var children = _ref5.children,
    disabled = _ref5.disabled,
    current = _ref5.current,
    href = _ref5.href,
    index = _ref5.index,
    rel = _ref5.rel,
    role = _ref5.role,
    _ref5$Link = _ref5.Link,
    Link$1 = _ref5$Link === void 0 ? Link : _ref5$Link,
    className = _ref5.className,
    restProps = _objectWithoutProperties(_ref5, _excluded4$2);
  var DefaultLinkComponent = Link$1;
  var LinkComponent = Link$1 || DefaultLinkComponent;
  return jsx(BreadcrumbNavItem, {
    children: jsxs(LinkComponent, _objectSpread$18(_objectSpread$18(_objectSpread$18({
      className: clsx('utrecht-breadcrumb-nav__link', className, {
        'utrecht-breadcrumb-nav__link--current': current,
        'utrecht-breadcrumb-nav__link--disabled': disabled,
        'utrecht-breadcrumb-nav__link--first': index === 0
      }),
      href: disabled ? undefined : href,
      rel: rel,
      role: role || (disabled ? 'link' : undefined),
      "aria-current": current && 'page',
      "aria-disabled": disabled ? 'true' : undefined
    }, useMicrodataProp('item')), restProps), {}, {
      ref: ref,
      children: [jsx("span", _objectSpread$18(_objectSpread$18({
        className: "utrecht-breadcrumb-nav__text"
      }, useMicrodataProp('name')), {}, {
        children: children
      })), typeof index === 'number' ? jsx("meta", _objectSpread$18(_objectSpread$18({}, useMicrodataProp('position')), {}, {
        content: String(index + 1)
      })) : null]
    }))
  });
});
BreadcrumbNavLink.displayName = 'BreadcrumbNavLink';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$8);

var _excluded$16 = ["appearance", "children", "className", "external", "href", "placeholder", "role"];
function ownKeys$17(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$17(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$17(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var onKeyDown = function onKeyDown(evt) {
  var _evt$target;
  if (evt.key === ' ' && typeof ((_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.click) === 'function') {
    // Prevent other side-effects, such as scrolling
    evt.preventDefault();
    // Navigate to the link target
    evt.target.click();
  }
};
var ButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var appearance = _ref.appearance,
    children = _ref.children,
    className = _ref.className,
    external = _ref.external,
    href = _ref.href,
    placeholder = _ref.placeholder,
    role = _ref.role,
    restProps = _objectWithoutProperties(_ref, _excluded$16);
  var props = restProps;
  if (role === 'button') {
    // When this link is announced as button by accessibility tools,
    // it should also behave like a button. Links are not activated
    // using `Space`, so we need to implement that behaviour here
    // to reach parity with the `button` element.
    props = _objectSpread$17(_objectSpread$17({}, restProps), {}, {
      onKeyDown: onKeyDown
    });
  }
  return jsx("a", _objectSpread$17(_objectSpread$17({
    href: placeholder ? undefined : href,
    ref: ref,
    role: role || (placeholder ? 'link' : undefined),
    className: clsx('utrecht-button-link', 'utrecht-button-link--html-a', {
      'utrecht-button-link--external': external,
      'utrecht-button-link--primary-action': appearance === 'primary-action-button',
      'utrecht-button-link--secondary-action': appearance === 'secondary-action-button',
      'utrecht-button-link--subtle': appearance === 'subtle-button',
      'utrecht-button-link--placeholder': placeholder
    }, className),
    rel: external ? 'external noopener noreferrer' : undefined,
    "aria-disabled": placeholder ? 'true' : undefined
  }, props), {}, {
    children: children
  }));
});
ButtonLink.displayName = 'ButtonLink';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$9);

var _excluded$15 = ["children", "className"];
function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Code = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$15);
  return jsx("code", _objectSpread$16(_objectSpread$16({
    ref: ref,
    className: clsx('utrecht-code', className)
  }, restProps), {}, {
    children: children
  }));
});
Code.displayName = 'Code';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$a);

var _excluded$14 = ["children", "className"];
function ownKeys$15(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$15(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$15(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$15(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$14);
  return jsx("pre", _objectSpread$15(_objectSpread$15({
    ref: ref,
    className: clsx('utrecht-code-block', className)
  }, restProps), {}, {
    children: jsx("code", {
      className: "utrecht-code-block__content",
      children: children
    })
  }));
});
CodeBlock.displayName = 'CodeBlock';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$b);

var _excluded$13 = ["children", "className", "color", "style"];
function ownKeys$14(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$14(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$14(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$14(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ColorSample = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    color = _ref.color,
    style = _ref.style,
    restProps = _objectWithoutProperties(_ref, _excluded$13);
  return jsx("data", _objectSpread$14(_objectSpread$14({
    ref: ref,
    className: clsx('utrecht-color-sample', className),
    style: _objectSpread$14(_objectSpread$14({}, style), {}, {
      color: color
    }),
    value: color
  }, restProps), {}, {
    children: children
  }));
});
ColorSample.displayName = 'ColorSample';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$c);

var _excluded$12 = ["children", "className", "rule"];
function ownKeys$13(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$13(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$13(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$13(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ColumnLayout = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    rule = _ref.rule,
    restProps = _objectWithoutProperties(_ref, _excluded$12);
  return jsx("div", _objectSpread$13(_objectSpread$13({
    className: clsx('utrecht-column-layout', {
      'utrecht-column-layout--rule': rule
    }, className),
    ref: ref
  }, restProps), {}, {
    children: children
  }));
});
ColumnLayout.displayName = 'ColumnLayout';

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
insertStyle(css$d);

var _excluded$11 = ["children", "currency", "amount", "locale", "className"];
function ownKeys$12(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$12(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$12(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$12(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var formatLabel = function formatLabel(locale, currency, amount) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
    minimumFractionDigits: Number.isInteger(amount) ? 0 : undefined,
    useGrouping: false
  }).format(amount)
  // Remove whitespace
  .replace(/[\s]+/g, '')
  // Replace dash (U+002D) with minus sign (U+2212)
  .replace('-', "\u2212");
};
var formatVisually = function formatVisually(locale, currency, amount) {
  var formatted = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
  // Replace dash (U+002D) with minus sign (U+2212)
  formatted = formatted.replace(/-/, "\u2212");
  // Move the minus to before the currency
  if ((locale === 'nl' || locale === 'nl-NL') && /\u2212/.test(formatted)) {
    formatted = formatted.replace(/(.+)\u2212(.+)/, "\u2212 $1$2");
  }
  // Replace white space with non-breaking space
  formatted = formatted.replace(/ /g, "\xA0");
  return formatted;
};
var CurrencyData = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    _ref$currency = _ref.currency,
    currency = _ref$currency === void 0 ? 'EUR' : _ref$currency,
    amount = _ref.amount,
    _ref$locale = _ref.locale,
    locale = _ref$locale === void 0 ? 'nl-NL' : _ref$locale,
    className = _ref.className,
    restProps = _objectWit