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

package/dist/index.cjs.js

@@ -19,11 +19,10 @@ var chunk__default = /*#__PURE__*/_interopDefaultLegacy(chunk);
 
 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', {
@@ -48,11 +47,10 @@ Alert.displayName = 'Alert';
 
 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', {
@@ -77,9 +75,8 @@ AlertDialog.displayName = 'AlertDialog';
 
 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)
@@ -91,9 +88,8 @@ Article.displayName = 'Article';
 
 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)
@@ -105,10 +101,9 @@ Backdrop.displayName = 'Backdrop';
 
 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';
@@ -122,15 +117,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.
@@ -154,29 +149,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,
@@ -204,10 +196,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({
@@ -236,15 +228,14 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 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),
@@ -259,7 +250,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"
   }));
@@ -267,7 +257,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"
   }));
@@ -275,7 +264,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"
   }));
@@ -284,9 +272,8 @@ SubtleButton.displayName = 'SubtleButton';
 
 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)
@@ -298,27 +285,23 @@ ButtonGroup.displayName = 'ButtonGroup';
 
 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
@@ -328,7 +311,6 @@ var ButtonLink = /*#__PURE__*/react.forwardRef(function (_a, ref) {
       onKeyDown: onKeyDown
     });
   }
-
   return jsxRuntime.jsx("a", Object.assign({
     href: placeholder ? undefined : href,
     ref: ref,
@@ -350,8 +332,7 @@ ButtonLink.displayName = 'ButtonLink';
 
 var CalendarNavigation = function CalendarNavigation(_a) {
   var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
-
+    props = tslib.__rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     className: "utrecht-calendar__navigation"
   }, props, {
@@ -361,9 +342,8 @@ var CalendarNavigation = function CalendarNavigation(_a) {
 
 var CalendarButton = function CalendarButton(_a) {
   var children = _a.children,
-      className = _a.className,
-      props = tslib.__rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
   return jsxRuntime.jsx(Button, Object.assign({
     appearance: "subtle-button"
   }, props, {
@@ -375,8 +355,7 @@ var CalendarButton = function CalendarButton(_a) {
 
 var CalendarIcon = function CalendarIcon(_a) {
   var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
-
+    props = tslib.__rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     className: clsx.clsx('utrecht-calendar__icon')
   }, props, {
@@ -386,12 +365,11 @@ var CalendarIcon = function CalendarIcon(_a) {
 
 var CalendarNavigationButtons = function CalendarNavigationButtons(_a) {
   var onPreviousClick = _a.onPreviousClick,
-      onNextClick = _a.onNextClick,
-      previousIcon = _a.previousIcon,
-      nextIcon = _a.nextIcon,
-      children = _a.children,
-      props = tslib.__rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
-
+    onNextClick = _a.onNextClick,
+    previousIcon = _a.previousIcon,
+    nextIcon = _a.nextIcon,
+    children = _a.children,
+    props = tslib.__rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     className: "utrecht-calendar__navigation-buttons"
   }, {
@@ -413,9 +391,8 @@ var CalendarNavigationButtons = function CalendarNavigationButtons(_a) {
 
 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)
@@ -436,8 +413,7 @@ var CalendarNavigationLabel = function CalendarNavigationLabel(_ref) {
 
 var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
   var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
-
+    props = tslib.__rest(_a, ["children"]);
   return jsxRuntime.jsx("tbody", Object.assign({}, props, {
     className: "utrecht-calendar__table-days-container"
   }, {
@@ -447,8 +423,7 @@ var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
 
 var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
   var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
-
+    props = tslib.__rest(_a, ["children"]);
   return jsxRuntime.jsx("tr", Object.assign({}, props, {
     children: children
   }));
@@ -456,13 +431,12 @@ var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
 
 var CalendarTableDaysItemDay = function CalendarTableDaysItemDay(_a) {
   var day = _a.day,
-      dayOutOfTheMonth = _a.dayOutOfTheMonth,
-      isToday = _a.isToday,
-      emphasis = _a.emphasis,
-      selected = _a.selected,
-      disabled = _a.disabled,
-      props = tslib.__rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
-
+    dayOutOfTheMonth = _a.dayOutOfTheMonth,
+    isToday = _a.isToday,
+    emphasis = _a.emphasis,
+    selected = _a.selected,
+    disabled = _a.disabled,
+    props = tslib.__rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
   return jsxRuntime.jsx("td", {
     children: jsxRuntime.jsx(CalendarButton, Object.assign({
       className: clsx__default["default"]('utrecht-calendar__table-days-item-day', {
@@ -496,8 +470,7 @@ var CalendarTableWeeksContainer = function CalendarTableWeeksContainer(_ref) {
 
 var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
   var children = _a.children,
-      props = tslib.__rest(_a, ["children"]);
-
+    props = tslib.__rest(_a, ["children"]);
   return jsxRuntime.jsx("th", Object.assign({}, props, {
     className: "utrecht-calendar__table-weeks-item"
   }, {
@@ -507,9 +480,8 @@ var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
 
 var IconArrowLeft = function IconArrowLeft(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = tslib.__rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = tslib.__rest(_a, ["title", "titleId"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -530,9 +502,8 @@ var IconArrowLeft = function IconArrowLeft(_a) {
 
 var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = tslib.__rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = tslib.__rest(_a, ["title", "titleId"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -556,9 +527,8 @@ var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
 
 var IconArrowRight = function IconArrowRight(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = tslib.__rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = tslib.__rest(_a, ["title", "titleId"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -579,9 +549,8 @@ var IconArrowRight = function IconArrowRight(_a) {
 
 var IconArrowRightDouble = function IconArrowRightDouble(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = tslib.__rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = tslib.__rest(_a, ["title", "titleId"]);
   return jsxRuntime.jsxs("svg", Object.assign({
     fill: "none",
     width: "100%",
@@ -605,15 +574,13 @@ var IconArrowRightDouble = function IconArrowRightDouble(_a) {
 
 function createCalendar(today) {
   var start = dateFns.startOfWeek(dateFns.startOfMonth(today), {
-    weekStartsOn: 1
-    /* Monday */
-
+    weekStartsOn: 1 /* Monday */
   });
-  var end = dateFns.endOfWeek(dateFns.addWeeks(start, 5), {
-    weekStartsOn: 1
-    /* Monday */
 
+  var end = dateFns.endOfWeek(dateFns.addWeeks(start, 5), {
+    weekStartsOn: 1 /* Monday */
   });
+
   return dateFns.eachDayOfInterval({
     start: start,
     end: end
@@ -623,28 +590,24 @@ function createCalendar(today) {
  * Calendar Component
  * powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
  * */
-
-
 var Calendar = function Calendar(_ref) {
   var onCalendarClick = _ref.onCalendarClick,
-      events = _ref.events,
-      currentDate = _ref.currentDate,
-      _ref$locale = _ref.locale,
-      locale$1 = _ref$locale === void 0 ? locale.enUS : _ref$locale,
-      _ref$previousYearButt = _ref.previousYearButtonTitle,
-      previousYearButtonTitle = _ref$previousYearButt === void 0 ? 'Previous year' : _ref$previousYearButt,
-      _ref$nextYearButtonTi = _ref.nextYearButtonTitle,
-      nextYearButtonTitle = _ref$nextYearButtonTi === void 0 ? 'Next year' : _ref$nextYearButtonTi,
-      _ref$previousMonthBut = _ref.previousMonthButtonTitle,
-      previousMonthButtonTitle = _ref$previousMonthBut === void 0 ? 'Previous month' : _ref$previousMonthBut,
-      _ref$nextMonthButtonT = _ref.nextMonthButtonTitle,
-      nextMonthButtonTitle = _ref$nextMonthButtonT === void 0 ? 'Next month' : _ref$nextMonthButtonT;
-
+    events = _ref.events,
+    currentDate = _ref.currentDate,
+    _ref$locale = _ref.locale,
+    locale$1 = _ref$locale === void 0 ? locale.enUS : _ref$locale,
+    _ref$previousYearButt = _ref.previousYearButtonTitle,
+    previousYearButtonTitle = _ref$previousYearButt === void 0 ? 'Previous year' : _ref$previousYearButt,
+    _ref$nextYearButtonTi = _ref.nextYearButtonTitle,
+    nextYearButtonTitle = _ref$nextYearButtonTi === void 0 ? 'Next year' : _ref$nextYearButtonTi,
+    _ref$previousMonthBut = _ref.previousMonthButtonTitle,
+    previousMonthButtonTitle = _ref$previousMonthBut === void 0 ? 'Previous month' : _ref$previousMonthBut,
+    _ref$nextMonthButtonT = _ref.nextMonthButtonTitle,
+    nextMonthButtonTitle = _ref$nextMonthButtonT === void 0 ? 'Next month' : _ref$nextMonthButtonT;
   var _useState = react.useState(currentDate || new Date()),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
   var calendar = createCalendar(date);
   var start = dateFns.startOfWeek(date, {
     weekStartsOn: 1
@@ -664,7 +627,6 @@ var Calendar = function Calendar(_ref) {
       var currentEvent = events && events.length > 0 && events.find(function (e) {
         return dateFns.isSameDay(dateFns.endOfDay(dateFns.parseISO(e.date)), date);
       });
-
       if (currentEvent) {
         return {
           date: date,
@@ -768,13 +730,12 @@ var Calendar = function Calendar(_ref) {
 
 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",
@@ -793,9 +754,8 @@ Checkbox.displayName = 'Checkbox';
 
 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)
@@ -807,9 +767,8 @@ Code.displayName = 'Code';
 
 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)
@@ -825,11 +784,10 @@ CodeBlock.displayName = 'CodeBlock';
 
 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,
@@ -843,9 +801,8 @@ CustomRadioButton.displayName = 'CustomRadioButton';
 
 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)
@@ -857,10 +814,9 @@ Document.displayName = 'Document';
 
 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
@@ -871,9 +827,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
@@ -884,9 +839,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
@@ -897,11 +851,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'),
@@ -918,9 +872,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
@@ -932,9 +885,8 @@ DataListActions.displayName = 'DataListActions';
 
 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)
@@ -946,17 +898,16 @@ Emphasis.displayName = 'Emphasis';
 
 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)
@@ -979,11 +930,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,
@@ -997,9 +947,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)
@@ -1011,9 +960,8 @@ FieldsetLegend.displayName = 'FieldsetLegend';
 
 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)
@@ -1025,9 +973,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)
@@ -1039,11 +986,10 @@ FigureCaption.displayName = 'FigureCaption';
 
 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', {
@@ -1060,12 +1006,11 @@ FormField.displayName = 'FormField';
 
 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)
@@ -1077,12 +1022,11 @@ FormFieldDescription.displayName = 'FormFieldDescription';
 
 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)
@@ -1094,9 +1038,8 @@ FormLabel.displayName = 'FormLabel';
 
 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)
@@ -1108,9 +1051,8 @@ HTMLContent.displayName = 'HTMLContent';
 
 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)
@@ -1122,9 +1064,8 @@ Heading1.displayName = 'Heading1';
 
 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)
@@ -1136,9 +1077,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)
@@ -1150,9 +1090,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)
@@ -1164,9 +1103,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)
@@ -1178,9 +1116,8 @@ Heading6.displayName = 'Heading6';
 
 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)
@@ -1192,9 +1129,8 @@ HeadingGroup.displayName = 'HeadingGroup';
 
 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)
@@ -1206,9 +1142,8 @@ Icon.displayName = 'Icon';
 
 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', {
@@ -1220,13 +1155,12 @@ Image.displayName = 'Image';
 
 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,
@@ -1245,10 +1179,9 @@ LinkButton.displayName = 'LinkButton';
 
 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),
@@ -1278,9 +1211,8 @@ var ListSocialItem = function ListSocialItem(_ref2) {
 
 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)
@@ -1292,10 +1224,9 @@ Mark.displayName = 'Mark';
 
 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, {
@@ -1309,9 +1240,8 @@ NumberValue.displayName = 'NumberValue';
 
 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)
@@ -1323,9 +1253,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)
@@ -1337,9 +1266,8 @@ OrderedListItem.displayName = 'OrderedListItem';
 
 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)
@@ -1351,9 +1279,8 @@ Page.displayName = 'Page';
 
 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)
@@ -1364,9 +1291,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)
@@ -1378,9 +1304,8 @@ PageContentMain.displayName = 'PageContentMain';
 
 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)
@@ -1392,9 +1317,8 @@ PageFooter.displayName = 'PageFooter';
 
 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)
@@ -1406,11 +1330,10 @@ PageHeader.displayName = 'PageHeader';
 
 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)
@@ -1426,9 +1349,8 @@ Paragraph.displayName = 'Paragraph';
 
 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)
@@ -1440,11 +1362,10 @@ PreHeading.displayName = 'PreHeading';
 
 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",
@@ -1458,12 +1379,11 @@ RadioButton.displayName = 'RadioButton';
 
 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,
@@ -1477,12 +1397,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,
@@ -1494,11 +1413,11 @@ var SelectOption = /*#__PURE__*/react.forwardRef(function (_a, ref) {
 });
 SelectOption.displayName = 'SelectOption';
 
+// 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)
@@ -1508,9 +1427,8 @@ Separator.displayName = 'Separator';
 
 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
@@ -1525,11 +1443,10 @@ SkipLink.displayName = 'SkipLink';
 
 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', {
@@ -1547,9 +1464,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)
@@ -1561,9 +1477,8 @@ Strong.displayName = 'Strong';
 
 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)
@@ -1575,9 +1490,8 @@ Surface.displayName = 'Surface';
 
 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)
@@ -1589,9 +1503,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)
@@ -1603,9 +1516,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)
@@ -1617,9 +1529,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)
@@ -1631,9 +1542,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)
@@ -1645,9 +1555,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)
@@ -1659,9 +1568,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)
@@ -1673,9 +1581,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)
@@ -1687,12 +1594,11 @@ TableRow.displayName = 'TableRow';
 
 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),
@@ -1706,16 +1612,15 @@ Textarea.displayName = 'Textarea';
 
 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,
@@ -1732,9 +1637,8 @@ Textbox.displayName = 'Textbox';
 
 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, {
@@ -1748,9 +1652,8 @@ URLValue.displayName = 'URLValue';
 
 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, {
@@ -1764,9 +1667,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)