@utrecht/component-library-react 1.0.0-alpha.211 → 1.0.0-alpha.212

package/dist/css-module/index.js

@@ -43,11 +43,10 @@ styleInject(css_248z$S);
 
 var Alert = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      icon = _a.icon,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["children", "className", "icon", "type"]);
-
+    className = _a.className,
+    icon = _a.icon,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["children", "className", "icon", "type"]);
   return jsxRuntime.jsxs("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-alert', {
@@ -75,11 +74,10 @@ styleInject(css_248z$R);
 
 var AlertDialog = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      icon = _a.icon,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["children", "className", "icon", "type"]);
-
+    className = _a.className,
+    icon = _a.icon,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["children", "className", "icon", "type"]);
   return jsxRuntime.jsxs("dialog", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-alert-dialog', {
@@ -107,9 +105,8 @@ styleInject(css_248z$Q);
 
 var Article = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("article", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-article', className)
@@ -124,9 +121,8 @@ styleInject(css_248z$P);
 
 var Backdrop = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-backdrop', className)
@@ -141,10 +137,9 @@ styleInject(css_248z$O);
 
 var Heading = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      className = _a.className,
-      level = _a.level,
-      restProps = tslib.__rest(_a, ["appearance", "className", "level"]);
-
+    className = _a.className,
+    level = _a.level,
+    restProps = tslib.__rest(_a, ["appearance", "className", "level"]);
   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';
@@ -158,15 +153,15 @@ Heading.displayName = 'Heading';
 
 var Link = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var boxContent = _a.boxContent,
-      children = _a.children,
-      className = _a.className,
-      external = _a.external,
-      href = _a.href,
-      placeholder = _a.placeholder,
-      role = _a.role,
-      restProps = tslib.__rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
-
-  return (// "utrecht-link--telephone" does not have a corresponding API,
+    children = _a.children,
+    className = _a.className,
+    external = _a.external,
+    href = _a.href,
+    placeholder = _a.placeholder,
+    role = _a.role,
+    restProps = tslib.__rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
+  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.
@@ -190,29 +185,26 @@ Link.displayName = 'Link';
 
 var useMicrodataItem = function useMicrodataItem(_ref) {
   var prop = _ref.prop,
-      type = _ref.type;
+    type = _ref.type;
   return {
     itemScope: true,
     itemType: type,
     itemProp: prop
   };
 };
-
 var useMicrodataProp = function useMicrodataProp(prop) {
   return {
     itemProp: prop
   };
 };
-
 var BreadcrumbNav = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      children = _a.children,
-      className = _a.className,
-      _a$headingLevel = _a.headingLevel,
-      headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
-      label = _a.label,
-      restProps = tslib.__rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
-
+    children = _a.children,
+    className = _a.className,
+    _a$headingLevel = _a.headingLevel,
+    headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
+    label = _a.label,
+    restProps = tslib.__rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
   var headingId = label ? react.useId() : undefined;
   return jsxRuntime.jsxs("nav", Object.assign({}, restProps, {
     ref: ref,
@@ -240,10 +232,10 @@ var BreadcrumbNav = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 BreadcrumbNav.displayName = 'BreadcrumbNav';
 var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
-      current = _ref2.current,
-      href = _ref2.href,
-      index = _ref2.index,
-      rel = _ref2.rel;
+    current = _ref2.current,
+    href = _ref2.href,
+    index = _ref2.index,
+    rel = _ref2.rel;
   return jsxRuntime.jsx("li", Object.assign({
     className: "utrecht-breadcrumb__item"
   }, useMicrodataItem({
@@ -275,15 +267,14 @@ styleInject(css_248z$N);
 
 var Button = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      busy = _a.busy,
-      disabled = _a.disabled,
-      children = _a.children,
-      className = _a.className,
-      hint = _a.hint,
-      pressed = _a.pressed,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
-
+    busy = _a.busy,
+    disabled = _a.disabled,
+    children = _a.children,
+    className = _a.className,
+    hint = _a.hint,
+    pressed = _a.pressed,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
   return jsxRuntime.jsx("button", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('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),
@@ -298,7 +289,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 Button.displayName = 'Button';
 var PrimaryActionButton = function PrimaryActionButton(_a) {
   var args = tslib.__rest(_a, []);
-
   return jsxRuntime.jsx(Button, Object.assign({}, args, {
     appearance: "primary-action-button"
   }));
@@ -306,7 +296,6 @@ var PrimaryActionButton = function PrimaryActionButton(_a) {
 PrimaryActionButton.displayName = 'PrimaryActionButton';
 var SecondaryActionButton = function SecondaryActionButton(_a) {
   var args = tslib.__rest(_a, []);
-
   return jsxRuntime.jsx(Button, Object.assign({}, args, {
     appearance: "secondary-action-button"
   }));
@@ -314,7 +303,6 @@ var SecondaryActionButton = function SecondaryActionButton(_a) {
 SecondaryActionButton.displayName = 'SecondaryActionButton';
 var SubtleButton = function SubtleButton(_a) {
   var args = tslib.__rest(_a, []);
-
   return jsxRuntime.jsx(Button, Object.assign({}, args, {
     appearance: "subtle-button"
   }));
@@ -326,9 +314,8 @@ styleInject(css_248z$M);
 
 var ButtonGroup = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-button-group', className)
@@ -343,27 +330,23 @@ styleInject(css_248z$L);
 
 var onKeyDown = function onKeyDown(evt) {
   var _a;
-
   if (evt.key === ' ' && typeof ((_a = evt.target) === null || _a === void 0 ? void 0 : _a.click) === 'function') {
     // Prevent other side-effects, such as scrolling
-    evt.preventDefault(); // Navigate to the link target
-
+    evt.preventDefault();
+    // Navigate to the link target
     evt.target.click();
   }
 };
-
 var ButtonLink = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      children = _a.children,
-      className = _a.className,
-      external = _a.external,
-      href = _a.href,
-      placeholder = _a.placeholder,
-      role = _a.role,
-      restProps = tslib.__rest(_a, ["appearance", "children", "className", "external", "href", "placeholder", "role"]);
-
+    children = _a.children,
+    className = _a.className,
+    external = _a.external,
+    href = _a.href,
+    placeholder = _a.placeholder,
+    role = _a.role,
+    restProps = tslib.__rest(_a, ["appearance", "children", "className", "external", "href", "placeholder", "role"]);
   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
@@ -373,7 +356,6 @@ var ButtonLink = /*#__PURE__*/react.forwardRef(function (_a, ref) {
       onKeyDown: onKeyDown
     });
   }
-
   return jsxRuntime.jsx("a", Object.assign({
     href: placeholder ? undefined : href,
     ref: ref,
@@ -401,13 +383,12 @@ styleInject(css_248z$J);
 
 var Checkbox = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var _a$appearance = _a.appearance,
-      appearance = _a$appearance === void 0 ? 'custom' : _a$appearance,
-      disabled = _a.disabled,
-      invalid = _a.invalid,
-      required = _a.required,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["appearance", "disabled", "invalid", "required", "className"]);
-
+    appearance = _a$appearance === void 0 ? 'custom' : _a$appearance,
+    disabled = _a.disabled,
+    invalid = _a.invalid,
+    required = _a.required,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["appearance", "disabled", "invalid", "required", "className"]);
   return jsxRuntime.jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: "checkbox",
@@ -429,9 +410,8 @@ styleInject(css_248z$I);
 
 var Code = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("code", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-code', className)
@@ -446,9 +426,8 @@ styleInject(css_248z$H);
 
 var CodeBlock = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("pre", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-code-block', className)
@@ -467,11 +446,10 @@ styleInject(css_248z$G);
 
 var CustomRadioButton = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      required = _a.required,
-      className = _a.className,
-      invalid = _a.invalid,
-      restProps = tslib.__rest(_a, ["disabled", "required", "className", "invalid"]);
-
+    required = _a.required,
+    className = _a.className,
+    invalid = _a.invalid,
+    restProps = tslib.__rest(_a, ["disabled", "required", "className", "invalid"]);
   return jsxRuntime.jsx("input", Object.assign({
     type: "radio",
     "aria-invalid": invalid || undefined,
@@ -488,9 +466,8 @@ styleInject(css_248z$F);
 
 var Document = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-document', className)
@@ -505,10 +482,9 @@ styleInject(css_248z$E);
 
 var DataList = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["appearance", "children", "className"]);
-
+    children = _a.children,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["appearance", "children", "className"]);
   return jsxRuntime.jsx("dl", Object.assign({}, restProps, {
     className: clsx__default["default"]('utrecht-data-list', 'utrecht-data-list--html-dl', appearance === 'rows' && 'utrecht-data-list--rows', className),
     ref: ref
@@ -519,9 +495,8 @@ var DataList = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 DataList.displayName = 'DataList';
 var DataListItem = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     className: clsx__default["default"]('utrecht-data-list__item', className),
     ref: ref
@@ -532,9 +507,8 @@ var DataListItem = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 DataListItem.displayName = 'DataListItem';
 var DataListKey = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("dt", Object.assign({}, restProps, {
     className: clsx__default["default"]('utrecht-data-list__item-key', className),
     ref: ref
@@ -545,11 +519,11 @@ var DataListKey = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 DataListKey.displayName = 'DataListKey';
 var DataListValue = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var value = _ref.value,
-      children = _ref.children,
-      className = _ref.className,
-      emptyDescription = _ref.emptyDescription,
-      multiline = _ref.multiline,
-      notranslate = _ref.notranslate;
+    children = _ref.children,
+    className = _ref.className,
+    emptyDescription = _ref.emptyDescription,
+    multiline = _ref.multiline,
+    notranslate = _ref.notranslate;
   var empty = value === '' || value === null;
   return jsxRuntime.jsx("dd", Object.assign({
     className: clsx__default["default"]('utrecht-data-list__item-value', 'utrecht-data-list__item-value--html-dd', className, multiline && 'utrecht-data-list__item-value--multiline'),
@@ -566,9 +540,8 @@ var DataListValue = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 DataListValue.displayName = 'DataListValue';
 var DataListActions = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("dd", Object.assign({}, restProps, {
     className: clsx__default["default"]('utrecht-data-list__actions', 'utrecht-data-list__actions--html-dd', className),
     ref: ref
@@ -583,9 +556,8 @@ styleInject(css_248z$D);
 
 var Emphasis = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("em", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-emphasis', 'utrecht-emphasis--stressed', className)
@@ -600,17 +572,16 @@ styleInject(css_248z$C);
 
 var Fieldset = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var ariaDescribedby = _a['aria-describedby'],
-      ariaLabel = _a['aria-label'],
-      ariaLabelledby = _a['aria-labelledby'],
-      className = _a.className,
-      children = _a.children,
-      disabled = _a.disabled,
-      form = _a.form,
-      invalid = _a.invalid,
-      name = _a.name,
-      role = _a.role,
-      restProps = tslib.__rest(_a, ['aria-describedby', 'aria-label', 'aria-labelledby', "className", "children", "disabled", "form", "invalid", "name", "role"]);
-
+    ariaLabel = _a['aria-label'],
+    ariaLabelledby = _a['aria-labelledby'],
+    className = _a.className,
+    children = _a.children,
+    disabled = _a.disabled,
+    form = _a.form,
+    invalid = _a.invalid,
+    name = _a.name,
+    role = _a.role,
+    restProps = tslib.__rest(_a, ['aria-describedby', 'aria-label', 'aria-labelledby', "className", "children", "disabled", "form", "invalid", "name", "role"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-form-fieldset', disabled && 'utrecht-form-fieldset--disabled', invalid && 'utrecht-form-fieldset--invalid', className)
@@ -633,11 +604,10 @@ var Fieldset = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 Fieldset.displayName = 'Fieldset';
 var FieldsetOnly = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      disabled = _a.disabled,
-      invalid = _a.invalid,
-      restProps = tslib.__rest(_a, ["className", "children", "disabled", "invalid"]);
-
+    children = _a.children,
+    disabled = _a.disabled,
+    invalid = _a.invalid,
+    restProps = tslib.__rest(_a, ["className", "children", "disabled", "invalid"]);
   return jsxRuntime.jsx("fieldset", Object.assign({}, restProps, {
     ref: ref,
     "aria-invalid": invalid || undefined,
@@ -651,9 +621,8 @@ FieldsetOnly.displayName = 'Fieldset';
 
 var FieldsetLegend = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["className", "children"]);
   return jsxRuntime.jsx("legend", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--html-legend', className)
@@ -668,9 +637,8 @@ styleInject(css_248z$B);
 
 var Figure = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["className", "children"]);
   return jsxRuntime.jsx("figure", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-figure', className)
@@ -682,9 +650,8 @@ Figure.displayName = 'Figure';
 
 var FigureCaption = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["className", "children"]);
   return jsxRuntime.jsx("figcaption", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-figure__caption', className)
@@ -699,11 +666,10 @@ styleInject(css_248z$A);
 
 var FormField = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      invalid = _a.invalid,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["className", "children", "invalid", "type"]);
-
+    children = _a.children,
+    invalid = _a.invalid,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["className", "children", "invalid", "type"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-form-field', {
@@ -723,12 +689,11 @@ styleInject(css_248z$z);
 
 var FormFieldDescription = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var invalid = _a.invalid,
-      valid = _a.valid,
-      warning = _a.warning,
-      className = _a.className,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["invalid", "valid", "warning", "className", "children"]);
-
+    valid = _a.valid,
+    warning = _a.warning,
+    className = _a.className,
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["invalid", "valid", "warning", "className", "children"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-form-field-description', invalid && 'utrecht-form-field-description--invalid', valid && 'utrecht-form-field-description--valid', warning && 'utrecht-form-field-description--warning', className)
@@ -743,12 +708,11 @@ styleInject(css_248z$y);
 
 var FormLabel = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      type = _a.type,
-      disabled = _a.disabled,
-      checked = _a.checked,
-      restProps = tslib.__rest(_a, ["children", "className", "type", "disabled", "checked"]);
-
+    className = _a.className,
+    type = _a.type,
+    disabled = _a.disabled,
+    checked = _a.checked,
+    restProps = tslib.__rest(_a, ["children", "className", "type", "disabled", "checked"]);
   return jsxRuntime.jsx("label", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-form-label', type && "utrecht-form-label--".concat(type), disabled && 'utrecht-form-label--disabled', checked && 'utrecht-form-label--checked', className)
@@ -763,9 +727,8 @@ styleInject(css_248z$x);
 
 var HTMLContent = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-html', className)
@@ -795,9 +758,8 @@ styleInject(css_248z$r);
 
 var Heading1 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h1", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-1', className)
@@ -809,9 +771,8 @@ Heading1.displayName = 'Heading1';
 
 var Heading2 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h2", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-2', className)
@@ -823,9 +784,8 @@ Heading2.displayName = 'Heading2';
 
 var Heading3 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h3", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-3', className)
@@ -837,9 +797,8 @@ Heading3.displayName = 'Heading3';
 
 var Heading4 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h4", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-4', className)
@@ -851,9 +810,8 @@ Heading4.displayName = 'Heading4';
 
 var Heading5 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h5", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-5', className)
@@ -865,9 +823,8 @@ Heading5.displayName = 'Heading5';
 
 var Heading6 = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("h6", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-6', className)
@@ -882,9 +839,8 @@ styleInject(css_248z$q);
 
 var HeadingGroup = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("hgroup", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-heading-group', className)
@@ -899,9 +855,8 @@ styleInject(css_248z$p);
 
 var Icon = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("span", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-icon', className)
@@ -916,9 +871,8 @@ styleInject(css_248z$o);
 
 var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className,
-      photo = _a.photo,
-      restProps = tslib.__rest(_a, ["className", "photo"]);
-
+    photo = _a.photo,
+    restProps = tslib.__rest(_a, ["className", "photo"]);
   return jsxRuntime.jsx("img", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-img', {
@@ -936,13 +890,12 @@ styleInject(css_248z$m);
 
 var LinkButton = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      disabled = _a.disabled,
-      inline = _a.inline,
-      className = _a.className,
-      pressed = _a.pressed,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
-
+    disabled = _a.disabled,
+    inline = _a.inline,
+    className = _a.className,
+    pressed = _a.pressed,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
   return jsxRuntime.jsx("button", Object.assign({
     ref: ref,
     "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
@@ -964,10 +917,9 @@ styleInject(css_248z$l);
 
 var LinkSocial = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      external = _a.external,
-      restProps = tslib.__rest(_a, ["children", "className", "external"]);
-
+    className = _a.className,
+    external = _a.external,
+    restProps = tslib.__rest(_a, ["children", "className", "external"]);
   return jsxRuntime.jsx("a", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-link-social', className),
@@ -1003,9 +955,8 @@ styleInject(css_248z$j);
 
 var Mark = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("mark", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-mark', className)
@@ -1020,10 +971,9 @@ styleInject(css_248z$i);
 
 var NumberValue = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      value = _a.value,
-      restProps = tslib.__rest(_a, ["children", "className", "value"]);
-
+    className = _a.className,
+    value = _a.value,
+    restProps = tslib.__rest(_a, ["children", "className", "value"]);
   return jsxRuntime.jsx("data", Object.assign({
     value: typeof value === 'string' || typeof value === 'number' ? String(value) : undefined
   }, restProps, {
@@ -1040,9 +990,8 @@ styleInject(css_248z$h);
 
 var OrderedList = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("ol", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-ordered-list', className)
@@ -1054,9 +1003,8 @@ OrderedList.displayName = 'OrderedList';
 
 var OrderedListItem = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("li", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-ordered-list__item', className)
@@ -1071,9 +1019,8 @@ styleInject(css_248z$g);
 
 var Page = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-page', className)
@@ -1088,9 +1035,8 @@ styleInject(css_248z$f);
 
 var PageContent = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-page-content', className)
@@ -1101,9 +1047,8 @@ var PageContent = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 PageContent.displayName = 'PageContent';
 var PageContentMain = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("main", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-page-content__main', className)
@@ -1118,9 +1063,8 @@ styleInject(css_248z$e);
 
 var PageFooter = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("footer", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-page-footer', className)
@@ -1135,9 +1079,8 @@ styleInject(css_248z$d);
 
 var PageHeader = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("header", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-page-header', className)
@@ -1152,11 +1095,10 @@ styleInject(css_248z$c);
 
 var Paragraph = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      lead = _a.lead,
-      small = _a.small,
-      restProps = tslib.__rest(_a, ["children", "className", "lead", "small"]);
-
+    className = _a.className,
+    lead = _a.lead,
+    small = _a.small,
+    restProps = tslib.__rest(_a, ["children", "className", "lead", "small"]);
   return jsxRuntime.jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-paragraph', lead && 'utrecht-paragraph--lead', small && 'utrecht-paragraph--small', className)
@@ -1175,9 +1117,8 @@ styleInject(css_248z$b);
 
 var PreHeading = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-pre-heading', className)
@@ -1192,11 +1133,10 @@ styleInject(css_248z$a);
 
 var RadioButton = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var _a$appearance = _a.appearance,
-      appearance = _a$appearance === void 0 ? 'utrecht-radio-button' : _a$appearance,
-      invalid = _a.invalid,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["appearance", "invalid", "className"]);
-
+    appearance = _a$appearance === void 0 ? 'utrecht-radio-button' : _a$appearance,
+    invalid = _a.invalid,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["appearance", "invalid", "className"]);
   return jsxRuntime.jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: "radio",
@@ -1213,12 +1153,11 @@ styleInject(css_248z$9);
 
 var Select = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var invalid = _a.invalid,
-      required = _a.required,
-      className = _a.className,
-      noscript = _a.noscript,
-      children = _a.children,
-      restProps = tslib.__rest(_a, ["invalid", "required", "className", "noscript", "children"]);
-
+    required = _a.required,
+    className = _a.className,
+    noscript = _a.noscript,
+    children = _a.children,
+    restProps = tslib.__rest(_a, ["invalid", "required", "className", "noscript", "children"]);
   return jsxRuntime.jsx("select", Object.assign({}, restProps, {
     ref: ref,
     "aria-invalid": invalid || undefined,
@@ -1232,12 +1171,11 @@ var Select = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 Select.displayName = 'Select';
 var SelectOption = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      invalid = _a.invalid,
-      value = _a.value,
-      children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["disabled", "invalid", "value", "children", "className"]);
-
+    invalid = _a.invalid,
+    value = _a.value,
+    children = _a.children,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["disabled", "invalid", "value", "children", "className"]);
   return jsxRuntime.jsx("option", Object.assign({}, restProps, {
     ref: ref,
     disabled: disabled,
@@ -1252,11 +1190,11 @@ SelectOption.displayName = 'SelectOption';
 var css_248z$8 = ".utrecht-separator{border-color:var(--utrecht-separator-color);border-style:solid;border-width:0 0 var(--utrecht-separator-block-size) 0;margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-separator-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-separator-margin-block-start, 0))}.utrecht-separator--distanced{--utrecht-space-around:1}";
 styleInject(css_248z$8);
 
+// Do not pass `children` along with `restProps` and use _children as it's unused
 var Separator = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var className = _a.className;
-      _a.children;
-      var restProps = tslib.__rest(_a, ["className", "children"]);
-
+    _a.children;
+    var restProps = tslib.__rest(_a, ["className", "children"]);
   return jsxRuntime.jsx("hr", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-separator', className)
@@ -1269,9 +1207,8 @@ styleInject(css_248z$7);
 
 var SkipLink = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("p", {
     children: jsxRuntime.jsx("a", Object.assign({
       ref: ref
@@ -1289,11 +1226,10 @@ styleInject(css_248z$6);
 
 var SpotlightSection = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var aside = _a.aside,
-      children = _a.children,
-      className = _a.className,
-      type = _a.type,
-      restProps = tslib.__rest(_a, ["aside", "children", "className", "type"]);
-
+    children = _a.children,
+    className = _a.className,
+    type = _a.type,
+    restProps = tslib.__rest(_a, ["aside", "children", "className", "type"]);
   var props = Object.assign(Object.assign({}, restProps), {
     ref: ref,
     className: clsx__default["default"]('utrecht-spotlight-section', {
@@ -1311,9 +1247,8 @@ SpotlightSection.displayName = 'SpotlightSection';
 
 var Strong = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("strong", Object.assign({
     ref: ref,
     className: clsx__default["default"]('utrecht-emphasis', 'utrecht-emphasis--strong', className)
@@ -1328,9 +1263,8 @@ styleInject(css_248z$5);
 
 var Surface = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-surface', className)
@@ -1345,9 +1279,8 @@ styleInject(css_248z$4);
 
 var Table = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("table", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table', className)
@@ -1359,9 +1292,8 @@ Table.displayName = 'Table';
 
 var TableBody = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("tbody", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__body', className)
@@ -1373,9 +1305,8 @@ TableBody.displayName = 'TableBody';
 
 var TableCaption = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("caption", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__caption', className)
@@ -1387,9 +1318,8 @@ TableCaption.displayName = 'TableCaption';
 
 var TableCell = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("td", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__cell', className)
@@ -1401,9 +1331,8 @@ TableCell.displayName = 'TableCell';
 
 var TableFooter = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("tfoot", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__footer', className)
@@ -1415,9 +1344,8 @@ TableFooter.displayName = 'TableFooter';
 
 var TableHeader = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("thead", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__header', className)
@@ -1429,9 +1357,8 @@ TableHeader.displayName = 'TableHeader';
 
 var TableHeaderCell = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("th", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__header-cell', className)
@@ -1443,9 +1370,8 @@ TableHeaderCell.displayName = 'TableHeaderCell';
 
 var TableRow = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("tr", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-table__row', className)
@@ -1460,12 +1386,11 @@ styleInject(css_248z$3);
 
 var Textarea = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      invalid = _a.invalid,
-      readOnly = _a.readOnly,
-      required = _a.required,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
-
+    invalid = _a.invalid,
+    readOnly = _a.readOnly,
+    required = _a.required,
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
   return jsxRuntime.jsx("textarea", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly', required && 'utrecht-textarea--required', className),
@@ -1482,16 +1407,15 @@ styleInject(css_248z$2);
 
 var Textbox = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      invalid = _a.invalid,
-      readOnly = _a.readOnly,
-      required = _a.required,
-      className = _a.className,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'text' : _a$type,
-      maxLength = _a.maxLength,
-      inputMode = _a.inputMode,
-      restProps = tslib.__rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
-
+    invalid = _a.invalid,
+    readOnly = _a.readOnly,
+    required = _a.required,
+    className = _a.className,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? 'text' : _a$type,
+    maxLength = _a.maxLength,
+    inputMode = _a.inputMode,
+    restProps = tslib.__rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
   return jsxRuntime.jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: type,
@@ -1511,9 +1435,8 @@ styleInject(css_248z$1);
 
 var URLValue = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("bdi", Object.assign({
     translate: "no"
   }, restProps, {
@@ -1530,9 +1453,8 @@ styleInject(css_248z);
 
 var UnorderedList = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("ul", Object.assign({
     role: "list"
   }, restProps, {
@@ -1546,9 +1468,8 @@ UnorderedList.displayName = 'UnorderedList';
 
 var UnorderedListItem = /*#__PURE__*/react.forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx("li", Object.assign({}, restProps, {
     ref: ref,
     className: clsx__default["default"]('utrecht-unordered-list__item', className)