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

package/dist/index.esm.js

@@ -3,17 +3,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx, { clsx as clsx$1 } from 'clsx';
 import { forwardRef, useId, useState } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, setDate, formatISO, startOfMonth, addWeeks } from 'date-fns';
+import { startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, setDate, formatISO, startOfMonth, addWeeks } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import chunk from 'lodash.chunk';
 
 var Alert = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      icon = _a.icon,
-      type = _a.type,
-      restProps = __rest(_a, ["children", "className", "icon", "type"]);
-
+    className = _a.className,
+    icon = _a.icon,
+    type = _a.type,
+    restProps = __rest(_a, ["children", "className", "icon", "type"]);
   return jsxs("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-alert', {
@@ -38,11 +37,10 @@ Alert.displayName = 'Alert';
 
 var AlertDialog = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      icon = _a.icon,
-      type = _a.type,
-      restProps = __rest(_a, ["children", "className", "icon", "type"]);
-
+    className = _a.className,
+    icon = _a.icon,
+    type = _a.type,
+    restProps = __rest(_a, ["children", "className", "icon", "type"]);
   return jsxs("dialog", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-alert-dialog', {
@@ -67,9 +65,8 @@ AlertDialog.displayName = 'AlertDialog';
 
 var Article = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("article", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-article', className)
@@ -81,9 +78,8 @@ Article.displayName = 'Article';
 
 var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-backdrop', className)
@@ -95,10 +91,9 @@ Backdrop.displayName = 'Backdrop';
 
 var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      className = _a.className,
-      level = _a.level,
-      restProps = __rest(_a, ["appearance", "className", "level"]);
-
+    className = _a.className,
+    level = _a.level,
+    restProps = __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';
@@ -112,15 +107,15 @@ Heading.displayName = 'Heading';
 
 var Link = /*#__PURE__*/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 = __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 = __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.
@@ -144,29 +139,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__*/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 = __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 = __rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
   var headingId = label ? useId() : undefined;
   return jsxs("nav", Object.assign({}, restProps, {
     ref: ref,
@@ -194,10 +186,10 @@ var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_a, ref) {
 BreadcrumbNav.displayName = 'BreadcrumbNav';
 var BreadcrumbLink = /*#__PURE__*/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 jsx("li", Object.assign({
     className: "utrecht-breadcrumb__item"
   }, useMicrodataItem({
@@ -226,15 +218,14 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 var Button = /*#__PURE__*/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 = __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 = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
   return jsx("button", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-button', busy && 'utrecht-button--busy', disabled && 'utrecht-button--disabled', type === 'submit' && 'utrecht-button--submit', appearance === 'primary-action-button' && 'utrecht-button--primary-action', appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', appearance === 'subtle-button' && 'utrecht-button--subtle', hint === 'danger' && 'utrecht-button--danger', hint === 'warning' && 'utrecht-button--warning', hint === 'ready' && 'utrecht-button--ready', pressed === true && 'utrecht-button--pressed', className),
@@ -249,7 +240,6 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
 Button.displayName = 'Button';
 var PrimaryActionButton = function PrimaryActionButton(_a) {
   var args = __rest(_a, []);
-
   return jsx(Button, Object.assign({}, args, {
     appearance: "primary-action-button"
   }));
@@ -257,7 +247,6 @@ var PrimaryActionButton = function PrimaryActionButton(_a) {
 PrimaryActionButton.displayName = 'PrimaryActionButton';
 var SecondaryActionButton = function SecondaryActionButton(_a) {
   var args = __rest(_a, []);
-
   return jsx(Button, Object.assign({}, args, {
     appearance: "secondary-action-button"
   }));
@@ -265,7 +254,6 @@ var SecondaryActionButton = function SecondaryActionButton(_a) {
 SecondaryActionButton.displayName = 'SecondaryActionButton';
 var SubtleButton = function SubtleButton(_a) {
   var args = __rest(_a, []);
-
   return jsx(Button, Object.assign({}, args, {
     appearance: "subtle-button"
   }));
@@ -274,9 +262,8 @@ SubtleButton.displayName = 'SubtleButton';
 
 var ButtonGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-button-group', className)
@@ -288,27 +275,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__*/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 = __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 = __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
@@ -318,7 +301,6 @@ var ButtonLink = /*#__PURE__*/forwardRef(function (_a, ref) {
       onKeyDown: onKeyDown
     });
   }
-
   return jsx("a", Object.assign({
     href: placeholder ? undefined : href,
     ref: ref,
@@ -340,8 +322,7 @@ ButtonLink.displayName = 'ButtonLink';
 
 var CalendarNavigation = function CalendarNavigation(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
-
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     className: "utrecht-calendar__navigation"
   }, props, {
@@ -351,9 +332,8 @@ var CalendarNavigation = function CalendarNavigation(_a) {
 
 var CalendarButton = function CalendarButton(_a) {
   var children = _a.children,
-      className = _a.className,
-      props = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
   return jsx(Button, Object.assign({
     appearance: "subtle-button"
   }, props, {
@@ -365,8 +345,7 @@ var CalendarButton = function CalendarButton(_a) {
 
 var CalendarIcon = function CalendarIcon(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
-
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     className: clsx$1('utrecht-calendar__icon')
   }, props, {
@@ -376,12 +355,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 = __rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
-
+    onNextClick = _a.onNextClick,
+    previousIcon = _a.previousIcon,
+    nextIcon = _a.nextIcon,
+    children = _a.children,
+    props = __rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
   return jsxs("div", Object.assign({
     className: "utrecht-calendar__navigation-buttons"
   }, {
@@ -403,9 +381,8 @@ var CalendarNavigationButtons = function CalendarNavigationButtons(_a) {
 
 var Heading2 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h2", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-2', className)
@@ -426,8 +403,7 @@ var CalendarNavigationLabel = function CalendarNavigationLabel(_ref) {
 
 var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
-
+    props = __rest(_a, ["children"]);
   return jsx("tbody", Object.assign({}, props, {
     className: "utrecht-calendar__table-days-container"
   }, {
@@ -437,8 +413,7 @@ var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
 
 var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
-
+    props = __rest(_a, ["children"]);
   return jsx("tr", Object.assign({}, props, {
     children: children
   }));
@@ -446,13 +421,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 = __rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
-
+    dayOutOfTheMonth = _a.dayOutOfTheMonth,
+    isToday = _a.isToday,
+    emphasis = _a.emphasis,
+    selected = _a.selected,
+    disabled = _a.disabled,
+    props = __rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
   return jsx("td", {
     children: jsx(CalendarButton, Object.assign({
       className: clsx('utrecht-calendar__table-days-item-day', {
@@ -486,8 +460,7 @@ var CalendarTableWeeksContainer = function CalendarTableWeeksContainer(_ref) {
 
 var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
-
+    props = __rest(_a, ["children"]);
   return jsx("th", Object.assign({}, props, {
     className: "utrecht-calendar__table-weeks-item"
   }, {
@@ -497,9 +470,8 @@ var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
 
 var IconArrowLeft = function IconArrowLeft(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = __rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = __rest(_a, ["title", "titleId"]);
   return jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -520,9 +492,8 @@ var IconArrowLeft = function IconArrowLeft(_a) {
 
 var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = __rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = __rest(_a, ["title", "titleId"]);
   return jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -546,9 +517,8 @@ var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
 
 var IconArrowRight = function IconArrowRight(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = __rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = __rest(_a, ["title", "titleId"]);
   return jsxs("svg", Object.assign({
     width: "100%",
     height: "100%",
@@ -569,9 +539,8 @@ var IconArrowRight = function IconArrowRight(_a) {
 
 var IconArrowRightDouble = function IconArrowRightDouble(_a) {
   var title = _a.title,
-      titleId = _a.titleId,
-      props = __rest(_a, ["title", "titleId"]);
-
+    titleId = _a.titleId,
+    props = __rest(_a, ["title", "titleId"]);
   return jsxs("svg", Object.assign({
     fill: "none",
     width: "100%",
@@ -595,15 +564,13 @@ var IconArrowRightDouble = function IconArrowRightDouble(_a) {
 
 function createCalendar(today) {
   var start = startOfWeek(startOfMonth(today), {
-    weekStartsOn: 1
-    /* Monday */
-
+    weekStartsOn: 1 /* Monday */
   });
-  var end = endOfWeek(addWeeks(start, 5), {
-    weekStartsOn: 1
-    /* Monday */
 
+  var end = endOfWeek(addWeeks(start, 5), {
+    weekStartsOn: 1 /* Monday */
   });
+
   return eachDayOfInterval({
     start: start,
     end: end
@@ -613,28 +580,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 = _ref$locale === void 0 ? 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 = _ref$locale === void 0 ? 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 = useState(currentDate || new Date()),
-      _useState2 = _slicedToArray(_useState, 2),
-      date = _useState2[0],
-      setDate$1 = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    date = _useState2[0],
+    setDate$1 = _useState2[1];
   var calendar = createCalendar(date);
   var start = startOfWeek(date, {
     weekStartsOn: 1
@@ -654,7 +617,6 @@ var Calendar = function Calendar(_ref) {
       var currentEvent = events && events.length > 0 && events.find(function (e) {
         return isSameDay(endOfDay(parseISO(e.date)), date);
       });
-
       if (currentEvent) {
         return {
           date: date,
@@ -758,13 +720,12 @@ var Calendar = function Calendar(_ref) {
 
 var Checkbox = /*#__PURE__*/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 = __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 = __rest(_a, ["appearance", "disabled", "invalid", "required", "className"]);
   return jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: "checkbox",
@@ -783,9 +744,8 @@ Checkbox.displayName = 'Checkbox';
 
 var Code = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("code", Object.assign({
     ref: ref,
     className: clsx('utrecht-code', className)
@@ -797,9 +757,8 @@ Code.displayName = 'Code';
 
 var CodeBlock = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("pre", Object.assign({
     ref: ref,
     className: clsx('utrecht-code-block', className)
@@ -815,11 +774,10 @@ CodeBlock.displayName = 'CodeBlock';
 
 var CustomRadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      required = _a.required,
-      className = _a.className,
-      invalid = _a.invalid,
-      restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
-
+    required = _a.required,
+    className = _a.className,
+    invalid = _a.invalid,
+    restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
   return jsx("input", Object.assign({
     type: "radio",
     "aria-invalid": invalid || undefined,
@@ -833,9 +791,8 @@ CustomRadioButton.displayName = 'CustomRadioButton';
 
 var Document = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-document', className)
@@ -847,10 +804,9 @@ Document.displayName = 'Document';
 
 var DataList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var appearance = _a.appearance,
-      children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["appearance", "children", "className"]);
-
+    children = _a.children,
+    className = _a.className,
+    restProps = __rest(_a, ["appearance", "children", "className"]);
   return jsx("dl", Object.assign({}, restProps, {
     className: clsx('utrecht-data-list', 'utrecht-data-list--html-dl', appearance === 'rows' && 'utrecht-data-list--rows', className),
     ref: ref
@@ -861,9 +817,8 @@ var DataList = /*#__PURE__*/forwardRef(function (_a, ref) {
 DataList.displayName = 'DataList';
 var DataListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     className: clsx('utrecht-data-list__item', className),
     ref: ref
@@ -874,9 +829,8 @@ var DataListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
 DataListItem.displayName = 'DataListItem';
 var DataListKey = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("dt", Object.assign({}, restProps, {
     className: clsx('utrecht-data-list__item-key', className),
     ref: ref
@@ -887,11 +841,11 @@ var DataListKey = /*#__PURE__*/forwardRef(function (_a, ref) {
 DataListKey.displayName = 'DataListKey';
 var DataListValue = /*#__PURE__*/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 jsx("dd", Object.assign({
     className: clsx('utrecht-data-list__item-value', 'utrecht-data-list__item-value--html-dd', className, multiline && 'utrecht-data-list__item-value--multiline'),
@@ -908,9 +862,8 @@ var DataListValue = /*#__PURE__*/forwardRef(function (_ref, ref) {
 DataListValue.displayName = 'DataListValue';
 var DataListActions = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("dd", Object.assign({}, restProps, {
     className: clsx('utrecht-data-list__actions', 'utrecht-data-list__actions--html-dd', className),
     ref: ref
@@ -922,9 +875,8 @@ DataListActions.displayName = 'DataListActions';
 
 var Emphasis = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("em", Object.assign({
     ref: ref,
     className: clsx('utrecht-emphasis', 'utrecht-emphasis--stressed', className)
@@ -936,17 +888,16 @@ Emphasis.displayName = 'Emphasis';
 
 var Fieldset = /*#__PURE__*/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 = __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 = __rest(_a, ['aria-describedby', 'aria-label', 'aria-labelledby', "className", "children", "disabled", "form", "invalid", "name", "role"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-form-fieldset', disabled && 'utrecht-form-fieldset--disabled', invalid && 'utrecht-form-fieldset--invalid', className)
@@ -969,11 +920,10 @@ var Fieldset = /*#__PURE__*/forwardRef(function (_a, ref) {
 Fieldset.displayName = 'Fieldset';
 var FieldsetOnly = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      disabled = _a.disabled,
-      invalid = _a.invalid,
-      restProps = __rest(_a, ["className", "children", "disabled", "invalid"]);
-
+    children = _a.children,
+    disabled = _a.disabled,
+    invalid = _a.invalid,
+    restProps = __rest(_a, ["className", "children", "disabled", "invalid"]);
   return jsx("fieldset", Object.assign({}, restProps, {
     ref: ref,
     "aria-invalid": invalid || undefined,
@@ -987,9 +937,8 @@ FieldsetOnly.displayName = 'Fieldset';
 
 var FieldsetLegend = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = __rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = __rest(_a, ["className", "children"]);
   return jsx("legend", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--html-legend', className)
@@ -1001,9 +950,8 @@ FieldsetLegend.displayName = 'FieldsetLegend';
 
 var Figure = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = __rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = __rest(_a, ["className", "children"]);
   return jsx("figure", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-figure', className)
@@ -1015,9 +963,8 @@ Figure.displayName = 'Figure';
 
 var FigureCaption = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      restProps = __rest(_a, ["className", "children"]);
-
+    children = _a.children,
+    restProps = __rest(_a, ["className", "children"]);
   return jsx("figcaption", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-figure__caption', className)
@@ -1029,11 +976,10 @@ FigureCaption.displayName = 'FigureCaption';
 
 var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      children = _a.children,
-      invalid = _a.invalid,
-      type = _a.type,
-      restProps = __rest(_a, ["className", "children", "invalid", "type"]);
-
+    children = _a.children,
+    invalid = _a.invalid,
+    type = _a.type,
+    restProps = __rest(_a, ["className", "children", "invalid", "type"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-form-field', {
@@ -1050,12 +996,11 @@ FormField.displayName = 'FormField';
 
 var FormFieldDescription = /*#__PURE__*/forwardRef(function (_a, ref) {
   var invalid = _a.invalid,
-      valid = _a.valid,
-      warning = _a.warning,
-      className = _a.className,
-      children = _a.children,
-      restProps = __rest(_a, ["invalid", "valid", "warning", "className", "children"]);
-
+    valid = _a.valid,
+    warning = _a.warning,
+    className = _a.className,
+    children = _a.children,
+    restProps = __rest(_a, ["invalid", "valid", "warning", "className", "children"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-form-field-description', invalid && 'utrecht-form-field-description--invalid', valid && 'utrecht-form-field-description--valid', warning && 'utrecht-form-field-description--warning', className)
@@ -1067,12 +1012,11 @@ FormFieldDescription.displayName = 'FormFieldDescription';
 
 var FormLabel = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      type = _a.type,
-      disabled = _a.disabled,
-      checked = _a.checked,
-      restProps = __rest(_a, ["children", "className", "type", "disabled", "checked"]);
-
+    className = _a.className,
+    type = _a.type,
+    disabled = _a.disabled,
+    checked = _a.checked,
+    restProps = __rest(_a, ["children", "className", "type", "disabled", "checked"]);
   return jsx("label", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-form-label', type && "utrecht-form-label--".concat(type), disabled && 'utrecht-form-label--disabled', checked && 'utrecht-form-label--checked', className)
@@ -1084,9 +1028,8 @@ FormLabel.displayName = 'FormLabel';
 
 var HTMLContent = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-html', className)
@@ -1098,9 +1041,8 @@ HTMLContent.displayName = 'HTMLContent';
 
 var Heading1 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h1", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-1', className)
@@ -1112,9 +1054,8 @@ Heading1.displayName = 'Heading1';
 
 var Heading3 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h3", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-3', className)
@@ -1126,9 +1067,8 @@ Heading3.displayName = 'Heading3';
 
 var Heading4 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h4", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-4', className)
@@ -1140,9 +1080,8 @@ Heading4.displayName = 'Heading4';
 
 var Heading5 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h5", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-5', className)
@@ -1154,9 +1093,8 @@ Heading5.displayName = 'Heading5';
 
 var Heading6 = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("h6", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-6', className)
@@ -1168,9 +1106,8 @@ Heading6.displayName = 'Heading6';
 
 var HeadingGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("hgroup", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-heading-group', className)
@@ -1182,9 +1119,8 @@ HeadingGroup.displayName = 'HeadingGroup';
 
 var Icon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("span", Object.assign({
     ref: ref,
     className: clsx('utrecht-icon', className)
@@ -1196,9 +1132,8 @@ Icon.displayName = 'Icon';
 
 var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
-      photo = _a.photo,
-      restProps = __rest(_a, ["className", "photo"]);
-
+    photo = _a.photo,
+    restProps = __rest(_a, ["className", "photo"]);
   return jsx("img", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-img', {
@@ -1210,13 +1145,12 @@ Image.displayName = 'Image';
 
 var LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      disabled = _a.disabled,
-      inline = _a.inline,
-      className = _a.className,
-      pressed = _a.pressed,
-      type = _a.type,
-      restProps = __rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
-
+    disabled = _a.disabled,
+    inline = _a.inline,
+    className = _a.className,
+    pressed = _a.pressed,
+    type = _a.type,
+    restProps = __rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
   return jsx("button", Object.assign({
     ref: ref,
     "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
@@ -1235,10 +1169,9 @@ LinkButton.displayName = 'LinkButton';
 
 var LinkSocial = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      external = _a.external,
-      restProps = __rest(_a, ["children", "className", "external"]);
-
+    className = _a.className,
+    external = _a.external,
+    restProps = __rest(_a, ["children", "className", "external"]);
   return jsx("a", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-link-social', className),
@@ -1268,9 +1201,8 @@ var ListSocialItem = function ListSocialItem(_ref2) {
 
 var Mark = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("mark", Object.assign({
     ref: ref,
     className: clsx('utrecht-mark', className)
@@ -1282,10 +1214,9 @@ Mark.displayName = 'Mark';
 
 var NumberValue = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      value = _a.value,
-      restProps = __rest(_a, ["children", "className", "value"]);
-
+    className = _a.className,
+    value = _a.value,
+    restProps = __rest(_a, ["children", "className", "value"]);
   return jsx("data", Object.assign({
     value: typeof value === 'string' || typeof value === 'number' ? String(value) : undefined
   }, restProps, {
@@ -1299,9 +1230,8 @@ NumberValue.displayName = 'NumberValue';
 
 var OrderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("ol", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-ordered-list', className)
@@ -1313,9 +1243,8 @@ OrderedList.displayName = 'OrderedList';
 
 var OrderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("li", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-ordered-list__item', className)
@@ -1327,9 +1256,8 @@ OrderedListItem.displayName = 'OrderedListItem';
 
 var Page = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-page', className)
@@ -1341,9 +1269,8 @@ Page.displayName = 'Page';
 
 var PageContent = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-page-content', className)
@@ -1354,9 +1281,8 @@ var PageContent = /*#__PURE__*/forwardRef(function (_a, ref) {
 PageContent.displayName = 'PageContent';
 var PageContentMain = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("main", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-page-content__main', className)
@@ -1368,9 +1294,8 @@ PageContentMain.displayName = 'PageContentMain';
 
 var PageFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("footer", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-page-footer', className)
@@ -1382,9 +1307,8 @@ PageFooter.displayName = 'PageFooter';
 
 var PageHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("header", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-page-header', className)
@@ -1396,11 +1320,10 @@ PageHeader.displayName = 'PageHeader';
 
 var Paragraph = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      lead = _a.lead,
-      small = _a.small,
-      restProps = __rest(_a, ["children", "className", "lead", "small"]);
-
+    className = _a.className,
+    lead = _a.lead,
+    small = _a.small,
+    restProps = __rest(_a, ["children", "className", "lead", "small"]);
   return jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-paragraph', lead && 'utrecht-paragraph--lead', small && 'utrecht-paragraph--small', className)
@@ -1416,9 +1339,8 @@ Paragraph.displayName = 'Paragraph';
 
 var PreHeading = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("p", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-pre-heading', className)
@@ -1430,11 +1352,10 @@ PreHeading.displayName = 'PreHeading';
 
 var RadioButton = /*#__PURE__*/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 = __rest(_a, ["appearance", "invalid", "className"]);
-
+    appearance = _a$appearance === void 0 ? 'utrecht-radio-button' : _a$appearance,
+    invalid = _a.invalid,
+    className = _a.className,
+    restProps = __rest(_a, ["appearance", "invalid", "className"]);
   return jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: "radio",
@@ -1448,12 +1369,11 @@ RadioButton.displayName = 'RadioButton';
 
 var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
   var invalid = _a.invalid,
-      required = _a.required,
-      className = _a.className,
-      noscript = _a.noscript,
-      children = _a.children,
-      restProps = __rest(_a, ["invalid", "required", "className", "noscript", "children"]);
-
+    required = _a.required,
+    className = _a.className,
+    noscript = _a.noscript,
+    children = _a.children,
+    restProps = __rest(_a, ["invalid", "required", "className", "noscript", "children"]);
   return jsx("select", Object.assign({}, restProps, {
     ref: ref,
     "aria-invalid": invalid || undefined,
@@ -1467,12 +1387,11 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
 Select.displayName = 'Select';
 var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      invalid = _a.invalid,
-      value = _a.value,
-      children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["disabled", "invalid", "value", "children", "className"]);
-
+    invalid = _a.invalid,
+    value = _a.value,
+    children = _a.children,
+    className = _a.className,
+    restProps = __rest(_a, ["disabled", "invalid", "value", "children", "className"]);
   return jsx("option", Object.assign({}, restProps, {
     ref: ref,
     disabled: disabled,
@@ -1484,11 +1403,11 @@ var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
 });
 SelectOption.displayName = 'SelectOption';
 
+// Do not pass `children` along with `restProps` and use _children as it's unused
 var Separator = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className;
-      _a.children;
-      var restProps = __rest(_a, ["className", "children"]);
-
+    _a.children;
+    var restProps = __rest(_a, ["className", "children"]);
   return jsx("hr", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-separator', className)
@@ -1498,9 +1417,8 @@ Separator.displayName = 'Separator';
 
 var SkipLink = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("p", {
     children: jsx("a", Object.assign({
       ref: ref
@@ -1515,11 +1433,10 @@ SkipLink.displayName = 'SkipLink';
 
 var SpotlightSection = /*#__PURE__*/forwardRef(function (_a, ref) {
   var aside = _a.aside,
-      children = _a.children,
-      className = _a.className,
-      type = _a.type,
-      restProps = __rest(_a, ["aside", "children", "className", "type"]);
-
+    children = _a.children,
+    className = _a.className,
+    type = _a.type,
+    restProps = __rest(_a, ["aside", "children", "className", "type"]);
   var props = Object.assign(Object.assign({}, restProps), {
     ref: ref,
     className: clsx('utrecht-spotlight-section', {
@@ -1537,9 +1454,8 @@ SpotlightSection.displayName = 'SpotlightSection';
 
 var Strong = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("strong", Object.assign({
     ref: ref,
     className: clsx('utrecht-emphasis', 'utrecht-emphasis--strong', className)
@@ -1551,9 +1467,8 @@ Strong.displayName = 'Strong';
 
 var Surface = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("div", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-surface', className)
@@ -1565,9 +1480,8 @@ Surface.displayName = 'Surface';
 
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("table", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table', className)
@@ -1579,9 +1493,8 @@ Table.displayName = 'Table';
 
 var TableBody = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("tbody", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__body', className)
@@ -1593,9 +1506,8 @@ TableBody.displayName = 'TableBody';
 
 var TableCaption = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("caption", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__caption', className)
@@ -1607,9 +1519,8 @@ TableCaption.displayName = 'TableCaption';
 
 var TableCell = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("td", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__cell', className)
@@ -1621,9 +1532,8 @@ TableCell.displayName = 'TableCell';
 
 var TableFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("tfoot", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__footer', className)
@@ -1635,9 +1545,8 @@ TableFooter.displayName = 'TableFooter';
 
 var TableHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("thead", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__header', className)
@@ -1649,9 +1558,8 @@ TableHeader.displayName = 'TableHeader';
 
 var TableHeaderCell = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("th", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__header-cell', className)
@@ -1663,9 +1571,8 @@ TableHeaderCell.displayName = 'TableHeaderCell';
 
 var TableRow = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("tr", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-table__row', className)
@@ -1677,12 +1584,11 @@ TableRow.displayName = 'TableRow';
 
 var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
-      invalid = _a.invalid,
-      readOnly = _a.readOnly,
-      required = _a.required,
-      className = _a.className,
-      restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
-
+    invalid = _a.invalid,
+    readOnly = _a.readOnly,
+    required = _a.required,
+    className = _a.className,
+    restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
   return jsx("textarea", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly', required && 'utrecht-textarea--required', className),
@@ -1696,16 +1602,15 @@ Textarea.displayName = 'Textarea';
 
 var Textbox = /*#__PURE__*/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 = __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 = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
   return jsx("input", Object.assign({}, restProps, {
     ref: ref,
     type: type,
@@ -1722,9 +1627,8 @@ Textbox.displayName = 'Textbox';
 
 var URLValue = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("bdi", Object.assign({
     translate: "no"
   }, restProps, {
@@ -1738,9 +1642,8 @@ URLValue.displayName = 'URLValue';
 
 var UnorderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("ul", Object.assign({
     role: "list"
   }, restProps, {
@@ -1754,9 +1657,8 @@ UnorderedList.displayName = 'UnorderedList';
 
 var UnorderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
-      className = _a.className,
-      restProps = __rest(_a, ["children", "className"]);
-
+    className = _a.className,
+    restProps = __rest(_a, ["children", "className"]);
   return jsx("li", Object.assign({}, restProps, {
     ref: ref,
     className: clsx('utrecht-unordered-list__item', className)