@utrecht/component-library-react 1.0.0-alpha.15 → 1.0.0-alpha.151

package/dist/index.esm.js

@@ -0,0 +1,1401 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx, { clsx as clsx$1 } from 'clsx';
+import { forwardRef, 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 { enUS } from 'date-fns/locale';
+import { chunk, toNumber } from 'lodash';
+
+var Article = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("article", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-article', className)
+  }, {
+    children: children
+  }));
+});
+Article.displayName = 'Article';
+
+var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-backdrop', className)
+  }, {
+    children: children
+  }));
+});
+Backdrop.displayName = 'Backdrop';
+
+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,
+      type = _a.type,
+      restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "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', className),
+    "aria-busy": busy || undefined,
+    disabled: disabled,
+    type: type || 'button'
+  }, {
+    children: children
+  }));
+});
+Button.displayName = 'Button';
+var PrimaryActionButton = function PrimaryActionButton(_a) {
+  var args = __rest(_a, []);
+
+  return jsx(Button, Object.assign({}, args, {
+    appearance: "primary-action-button"
+  }));
+};
+PrimaryActionButton.displayName = 'PrimaryActionButton';
+var SecondaryActionButton = function SecondaryActionButton(_a) {
+  var args = __rest(_a, []);
+
+  return jsx(Button, Object.assign({}, args, {
+    appearance: "secondary-action-button"
+  }));
+};
+SecondaryActionButton.displayName = 'SecondaryActionButton';
+var SubtleButton = function SubtleButton(_a) {
+  var args = __rest(_a, []);
+
+  return jsx(Button, Object.assign({}, args, {
+    appearance: "subtle-button"
+  }));
+};
+SubtleButton.displayName = 'SubtleButton';
+
+var ButtonGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("p", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-button-group', className)
+  }, {
+    children: children
+  }));
+});
+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.target.click();
+  }
+};
+
+var ButtonLink = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var appearance = _a.appearance,
+      children = _a.children,
+      className = _a.className,
+      external = _a.external,
+      role = _a.role,
+      restProps = __rest(_a, ["appearance", "children", "className", "external", "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
+    // using `Space`, so we need to implement that behaviour here
+    // to reach parity with the `button` element.
+    props = Object.assign(Object.assign({}, restProps), {
+      onKeyDown: onKeyDown
+    });
+  }
+
+  return jsx("a", Object.assign({}, props, {
+    ref: ref,
+    role: role,
+    className: clsx('utrecht-button-link', 'utrecht-button-link--html-a', {
+      'utrecht-button-link--external': external,
+      'utrecht-button-link--primary-action': appearance === 'primary-action-button',
+      'utrecht-button-link--secondary-action': appearance === 'secondary-action-button',
+      'utrecht-button-link--subtle': appearance === 'subtle-button'
+    }, className),
+    rel: external ? 'external noopener noreferrer' : undefined
+  }, {
+    children: children
+  }));
+});
+ButtonLink.displayName = 'ButtonLink';
+
+var CalendarNavigation = function CalendarNavigation(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsx("div", Object.assign({
+    className: "utrecht-calendar__navigation"
+  }, props, {
+    children: children
+  }));
+};
+
+var CalendarButton = function CalendarButton(_a) {
+  var children = _a.children,
+      className = _a.className,
+      props = __rest(_a, ["children", "className"]);
+
+  return jsx(Button, Object.assign({
+    appearance: "subtle-button"
+  }, props, {
+    className: clsx$1('utrecht-calendar__button', className)
+  }, {
+    children: children
+  }));
+};
+
+var CalendarIcon = function CalendarIcon(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsx("div", Object.assign({
+    className: clsx$1('utrecht-calendar__icon')
+  }, props, {
+    children: children
+  }));
+};
+
+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"]);
+
+  return jsxs("div", Object.assign({
+    className: "utrecht-calendar__navigation-buttons"
+  }, {
+    children: [jsx(CalendarButton, Object.assign({
+      onClick: onPreviousClick
+    }, props, {
+      children: jsx(CalendarIcon, {
+        children: previousIcon
+      })
+    })), children, jsx(CalendarButton, Object.assign({
+      onClick: onNextClick
+    }, props, {
+      children: jsx(CalendarIcon, {
+        children: nextIcon
+      })
+    }))]
+  }));
+};
+
+var Heading2 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h2", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-2', className)
+  }, {
+    children: children
+  }));
+});
+Heading2.displayName = 'Heading2';
+
+var CalendarNavigationLabel = function CalendarNavigationLabel(_ref) {
+  var label = _ref.label;
+  return jsx(Heading2, Object.assign({
+    className: "utrecht-calendar__navigation-label"
+  }, {
+    children: label
+  }));
+};
+
+var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsx("tbody", Object.assign({}, props, {
+    className: "utrecht-calendar__table-days-container"
+  }, {
+    children: children
+  }));
+};
+
+var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsx("tr", Object.assign({}, props, {
+    children: children
+  }));
+};
+
+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"]);
+
+  return jsx("td", {
+    children: jsx(CalendarButton, Object.assign({
+      className: clsx('utrecht-calendar__table-days-item-day', {
+        'utrecht-calendar__table-days-item-day--out-of-the-month': dayOutOfTheMonth
+      }, {
+        'utrecht-calendar__table-days-item-day--is-today': isToday
+      }, {
+        'utrecht-calendar__table-days-item-day--emphasis': emphasis
+      }, {
+        'utrecht-calendar__table-days-item-day--selected': selected
+      }),
+      disabled: disabled
+    }, props, {
+      children: day
+    }))
+  });
+};
+
+var CalendarTableWeeksContainer = function CalendarTableWeeksContainer(_ref) {
+  var children = _ref.children;
+  return jsx("thead", Object.assign({
+    className: "utrecht-calendar__table-weeks-container"
+  }, {
+    children: jsx("tr", Object.assign({
+      className: "utrecht-calendar__table-weeks-container-content"
+    }, {
+      children: children
+    }))
+  }));
+};
+
+var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsx("th", Object.assign({}, props, {
+    className: "utrecht-calendar__table-weeks-item"
+  }, {
+    children: children
+  }));
+};
+
+var IconArrowLeft = function IconArrowLeft(_a) {
+  var title = _a.title,
+      titleId = _a.titleId,
+      props = __rest(_a, ["title", "titleId"]);
+
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
+  var title = _a.title,
+      titleId = _a.titleId,
+      props = __rest(_a, ["title", "titleId"]);
+
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M17.59 18 19 16.59 14.42 12 19 7.41 17.59 6l-6 6 6 6Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m11 18 1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6 6 6Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+var IconArrowRight = function IconArrowRight(_a) {
+  var title = _a.title,
+      titleId = _a.titleId,
+      props = __rest(_a, ["title", "titleId"]);
+
+  return jsxs("svg", Object.assign({
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+var IconArrowRightDouble = function IconArrowRightDouble(_a) {
+  var title = _a.title,
+      titleId = _a.titleId,
+      props = __rest(_a, ["title", "titleId"]);
+
+  return jsxs("svg", Object.assign({
+    fill: "none",
+    width: "100%",
+    height: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props, {
+    children: [title ? jsx("title", Object.assign({
+      id: titleId
+    }, {
+      children: title
+    })) : null, jsx("path", {
+      d: "M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6-6-6Z",
+      fill: "currentColor"
+    }), jsx("path", {
+      d: "m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6-6-6Z",
+      fill: "currentColor"
+    })]
+  }));
+};
+
+function createCalendar(today) {
+  var start = startOfWeek(startOfMonth(today), {
+    weekStartsOn: 1
+    /* Monday */
+
+  });
+  var end = endOfWeek(addWeeks(start, 5), {
+    weekStartsOn: 1
+    /* Monday */
+
+  });
+  return eachDayOfInterval({
+    start: start,
+    end: end
+  });
+}
+/**
+ * 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;
+
+  var _useState = useState(currentDate || new Date()),
+      _useState2 = _slicedToArray(_useState, 2),
+      date = _useState2[0],
+      setDate$1 = _useState2[1];
+
+  var calendar = createCalendar(date);
+  var start = startOfWeek(date, {
+    weekStartsOn: 1
+  });
+  var end = endOfWeek(date, {
+    weekStartsOn: 1
+  });
+  var currentWeek = eachDayOfInterval({
+    start: start,
+    end: end
+  }).map(function (day) {
+    return day;
+  });
+  var chunksWeeks = chunk(calendar, calendar.length / 6);
+  var weeks = chunksWeeks.map(function (week) {
+    return week.map(function (date) {
+      var currentEvent = events && events.length > 0 && events.find(function (e) {
+        return isSameDay(endOfDay(parseISO(e.date)), date);
+      });
+
+      if (currentEvent) {
+        return {
+          date: date,
+          emphasis: currentEvent.emphasis,
+          selected: currentEvent.selected,
+          disabled: currentEvent.disabled
+        };
+      } else {
+        return {
+          date: date,
+          emphasis: false,
+          selected: false,
+          disabled: false
+        };
+      }
+    });
+  });
+  return jsxs("div", Object.assign({
+    className: "utrecht-calendar"
+  }, {
+    children: [jsx(CalendarNavigation, {
+      children: jsx(CalendarNavigationButtons, Object.assign({
+        previousIcon: jsx(IconArrowLeftDouble, {
+          title: previousYearButtonTitle
+        }),
+        nextIcon: jsx(IconArrowRightDouble, {
+          title: nextYearButtonTitle
+        }),
+        onPreviousClick: function onPreviousClick() {
+          return setDate$1(setYear(date, getYear(date) - 1));
+        },
+        onNextClick: function onNextClick() {
+          return setDate$1(addYears(date, 1));
+        }
+      }, {
+        children: jsx(CalendarNavigationButtons, Object.assign({
+          previousIcon: jsx(IconArrowLeft, {
+            title: previousMonthButtonTitle
+          }),
+          nextIcon: jsx(IconArrowRight, {
+            title: nextMonthButtonTitle
+          }),
+          onPreviousClick: function onPreviousClick() {
+            return setDate$1(setMonth(date, date.getMonth() - 1));
+          },
+          onNextClick: function onNextClick() {
+            return setDate$1(addMonths(date, 1));
+          }
+        }, {
+          children: jsx(CalendarNavigationLabel, {
+            label: format(date, 'LLLL Y', {
+              locale: locale
+            })
+          })
+        }))
+      }))
+    }), jsxs("table", Object.assign({
+      className: "utrecht-calendar__table",
+      role: "grid"
+    }, {
+      children: [jsx(CalendarTableWeeksContainer, {
+        children: currentWeek && currentWeek.length > 0 && currentWeek.map(function (day, index) {
+          return jsx(CalendarTableWeeksItem, Object.assign({
+            scope: "col",
+            abbr: format(day, 'EEEE', {
+              locale: locale
+            })
+          }, {
+            children: format(day, 'EEEEEE', {
+              locale: locale
+            })
+          }), index);
+        })
+      }), jsx(CalendarTableDaysContainer, {
+        children: weeks && weeks.length > 0 && weeks.map(function (week, index) {
+          return jsx(CalendarTableDaysItem, {
+            children: week.map(function (day, index) {
+              return jsx(CalendarTableDaysItemDay, {
+                isToday: isSameDay(date, day.date),
+                dayOutOfTheMonth: !isSameMonth(day.date, date),
+                onClick: function onClick(event) {
+                  var selectedDay = setDate(date, toNumber(event.target.textContent));
+                  setDate$1(selectedDay);
+                  onCalendarClick(formatISO(selectedDay));
+                },
+                "aria-label": format(day.date, 'eeee dd LLLL Y', {
+                  locale: locale
+                }),
+                day: day.date.getDate().toString(),
+                emphasis: day.emphasis,
+                selected: day.selected,
+                disabled: day.disabled
+              }, index);
+            })
+          }, index);
+        })
+      })]
+    }))]
+  }));
+};
+
+var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var disabled = _a.disabled,
+      invalid = _a.invalid,
+      required = _a.required,
+      className = _a.className,
+      restProps = __rest(_a, ["disabled", "invalid", "required", "className"]);
+
+  return jsx("input", Object.assign({}, restProps, {
+    ref: ref,
+    type: "checkbox",
+    className: clsx('utrecht-checkbox', 'utrecht-checkbox--html-input', disabled && 'utrecht-checkbox--disabled', invalid && 'utrecht-checkbox--invalid', required && 'utrecht-checkbox--required', className),
+    "aria-invalid": invalid || undefined,
+    disabled: disabled,
+    required: required
+  }));
+});
+Checkbox.displayName = 'Checkbox';
+
+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"]);
+
+  return jsx("input", Object.assign({
+    type: "radio",
+    "aria-invalid": invalid || undefined,
+    disabled: disabled,
+    required: required,
+    ref: ref,
+    className: clsx('utrecht-custom-radio-button', 'utrecht-custom-radio-button--html-input', disabled && 'utrecht-custom-radio-button--disabled', invalid && 'utrecht-custom-radio-button--invalid', className)
+  }, restProps));
+});
+CustomRadioButton.displayName = 'CustomRadioButton';
+
+var Document = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-document', className)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  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
+  }, {
+    children: children
+  }));
+});
+DataList.displayName = 'DataList';
+var DataListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    className: clsx('utrecht-data-list__item', className),
+    ref: ref
+  }, {
+    children: children
+  }));
+});
+DataListItem.displayName = 'DataListItem';
+var DataListKey = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("dt", Object.assign({}, restProps, {
+    className: clsx('utrecht-data-list__item-key', className),
+    ref: ref
+  }, {
+    children: children
+  }));
+});
+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;
+  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'),
+    translate: typeof notranslate === 'boolean' ? notranslate ? 'no' : 'yes' : undefined,
+    ref: ref
+  }, {
+    children: empty ? jsx("span", Object.assign({
+      "aria-label": emptyDescription
+    }, {
+      children: "-"
+    })) : children
+  }));
+});
+DataListValue.displayName = 'DataListValue';
+var DataListActions = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      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
+  }, {
+    children: children
+  }));
+});
+DataListActions.displayName = 'DataListActions';
+
+var Fieldset = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+      children = _a.children,
+      restProps = __rest(_a, ["className", "children"]);
+
+  return jsx("fieldset", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-form-fieldset', 'utrecht-form-fieldset--reset-fieldset', className)
+  }, {
+    children: children
+  }));
+});
+Fieldset.displayName = 'Fieldset';
+
+var FieldsetLegend = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+      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--reset-legend', className)
+  }, {
+    children: children
+  }));
+});
+FieldsetLegend.displayName = 'FieldsetLegend';
+
+var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+      children = _a.children,
+      restProps = __rest(_a, ["className", "children"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-form-field', 'utrecht-form-field--distanced', className)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  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)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  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)
+  }, {
+    children: children
+  }));
+});
+FormLabel.displayName = 'FormLabel';
+
+var HTMLContent = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-html', className)
+  }, {
+    children: children
+  }));
+});
+HTMLContent.displayName = 'HTMLContent';
+
+var Heading1 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h1", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-1', className)
+  }, {
+    children: children
+  }));
+});
+Heading1.displayName = 'Heading1';
+
+var Heading3 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h3", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-3', className)
+  }, {
+    children: children
+  }));
+});
+Heading3.displayName = 'Heading3';
+
+var Heading4 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h4", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-4', className)
+  }, {
+    children: children
+  }));
+});
+Heading4.displayName = 'Heading4';
+
+var Heading5 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h5", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-5', className)
+  }, {
+    children: children
+  }));
+});
+Heading5.displayName = 'Heading5';
+
+var Heading6 = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("h6", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-6', className)
+  }, {
+    children: children
+  }));
+});
+Heading6.displayName = 'Heading6';
+
+var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var level = _a.level,
+      restProps = __rest(_a, ["level"]);
+
+  var HeadingX = level === 2 ? Heading2 : level === 3 ? Heading3 : level === 4 ? Heading4 : level === 5 ? Heading5 : level === 6 ? Heading6 : Heading1;
+  return jsx(HeadingX, Object.assign({}, restProps, {
+    ref: ref
+  }));
+});
+Heading.displayName = 'Heading';
+
+var HeadingGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("hgroup", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-heading-group', className)
+  }, {
+    children: children
+  }));
+});
+HeadingGroup.displayName = 'HeadingGroup';
+
+var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+      photo = _a.photo,
+      restProps = __rest(_a, ["className", "photo"]);
+
+  return jsx("img", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-img', {
+      'utrecht-img--photo': photo
+    }, className)
+  }));
+});
+Image.displayName = 'Image';
+
+var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var boxContent = _a.boxContent,
+      children = _a.children,
+      className = _a.className,
+      external = _a.external,
+      restProps = __rest(_a, ["boxContent", "children", "className", "external"]);
+
+  return (// "utrecht-link--telephone" does not have a corresponding API,
+    // since it is primarily a basis for implementing input[href^="tel"].
+    // Telephone number rendering in React is best achieved using composition
+    // of the TelephoneValue component.
+    jsx("a", Object.assign({}, restProps, {
+      ref: ref,
+      className: clsx('utrecht-link', {
+        'utrecht-link--box-content': boxContent,
+        'utrecht-link--external': external
+      }, className),
+      rel: external ? 'external noopener noreferrer' : undefined
+    }, {
+      children: children
+    }))
+  );
+});
+Link.displayName = 'Link';
+
+var LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      inline = _a.inline,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "inline", "className"]);
+
+  return jsx("button", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-link-button', 'utrecht-link-button--html-button', {
+      'utrecht-link-button--inline': inline
+    }, className)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  return jsx("a", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-link-social', className),
+    rel: external ? 'external noopener noreferrer' : undefined
+  }, {
+    children: children
+  }));
+});
+LinkSocial.displayName = 'LinkSocial';
+
+var ListSocial = function ListSocial(_ref) {
+  var children = _ref.children;
+  return jsx("ul", Object.assign({
+    className: clsx('utrecht-list-social')
+  }, {
+    children: children
+  }));
+};
+var ListSocialItem = function ListSocialItem(_ref2) {
+  var children = _ref2.children;
+  return jsx("li", Object.assign({
+    className: clsx('utrecht-list-social__item')
+  }, {
+    children: children
+  }));
+};
+
+var NumberValue = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      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, {
+    ref: ref,
+    className: clsx('utrecht-value-number', className)
+  }, {
+    children: children
+  }));
+});
+NumberValue.displayName = 'NumberValue';
+
+var OrderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("ol", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-ordered-list', className)
+  }, {
+    children: children
+  }));
+});
+OrderedList.displayName = 'OrderedList';
+
+var OrderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("li", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-ordered-list__item', className)
+  }, {
+    children: children
+  }));
+});
+OrderedListItem.displayName = 'OrderedListItem';
+
+var Page = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-page', className)
+  }, {
+    children: children
+  }));
+});
+Page.displayName = 'Page';
+
+var PageContent = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-page-content', className)
+  }, {
+    children: children
+  }));
+});
+PageContent.displayName = 'PageContent';
+var PageContentMain = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("main", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-page-content__main', className)
+  }, {
+    children: children
+  }));
+});
+PageContentMain.displayName = 'PageContentMain';
+
+var PageFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("footer", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-page-footer', className)
+  }, {
+    children: children
+  }));
+});
+PageFooter.displayName = 'PageFooter';
+
+var PageHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("header", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-page-header', className)
+  }, {
+    children: children
+  }));
+});
+PageHeader.displayName = 'PageHeader';
+
+var Paragraph = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      lead = _a.lead,
+      restProps = __rest(_a, ["children", "className", "lead"]);
+
+  return jsx("p", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-paragraph', lead && 'utrecht-paragraph--lead', className)
+  }, {
+    children: children
+  }));
+});
+Paragraph.displayName = 'Paragraph';
+
+var PreHeading = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("p", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-pre-heading', className)
+  }, {
+    children: children
+  }));
+});
+PreHeading.displayName = 'PreHeading';
+
+var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var invalid = _a.invalid,
+      className = _a.className,
+      restProps = __rest(_a, ["invalid", "className"]);
+
+  return jsx("input", Object.assign({}, restProps, {
+    ref: ref,
+    type: "radio",
+    className: clsx('utrecht-radio-button', 'utrecht-radio-button--html-input', invalid && 'utrecht-radio-button--invalid', className)
+  }));
+});
+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"]);
+
+  return jsx("select", Object.assign({}, restProps, {
+    ref: ref,
+    "aria-invalid": invalid || undefined,
+    required: noscript ? required : false,
+    "aria-required": noscript ? undefined : required,
+    className: clsx('utrecht-select', 'utrecht-select--html-select', invalid && 'utrecht-select--invalid', required && 'utrecht-select--required', className)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  return jsx("option", Object.assign({}, restProps, {
+    ref: ref,
+    disabled: disabled,
+    value: value,
+    className: clsx('utrecht-select__option', disabled && 'utrecht-select__option--disabled', invalid && 'utrecht-select__option--invalid', className)
+  }, {
+    children: children
+  }));
+});
+SelectOption.displayName = 'SelectOption';
+
+var Separator = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className;
+      _a.children;
+      var restProps = __rest(_a, ["className", "children"]);
+
+  return jsx("hr", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-separator', className)
+  }));
+});
+Separator.displayName = 'Separator';
+
+var SkipLink = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("p", {
+    children: jsx("a", Object.assign({
+      ref: ref
+    }, restProps, {
+      className: clsx('utrecht-skip-link', 'utrecht-skip-link--visible-on-focus', className)
+    }, {
+      children: children
+    }))
+  });
+});
+SkipLink.displayName = 'SkipLink';
+
+var Surface = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("div", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-surface', className)
+  }, {
+    children: children
+  }));
+});
+Surface.displayName = 'Surface';
+
+var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("table", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table', className)
+  }, {
+    children: children
+  }));
+});
+Table.displayName = 'Table';
+
+var TableBody = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("tbody", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__body', className)
+  }, {
+    children: children
+  }));
+});
+TableBody.displayName = 'TableBody';
+
+var TableCaption = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("caption", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__caption', className)
+  }, {
+    children: children
+  }));
+});
+TableCaption.displayName = 'TableCaption';
+
+var TableCell = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("td", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__cell', className)
+  }, {
+    children: children
+  }));
+});
+TableCell.displayName = 'TableCell';
+
+var TableFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("tfoot", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__footer', className)
+  }, {
+    children: children
+  }));
+});
+TableFooter.displayName = 'TableFooter';
+
+var TableHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("thead", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__header', className)
+  }, {
+    children: children
+  }));
+});
+TableHeader.displayName = 'TableHeader';
+
+var TableHeaderCell = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("th", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__header-cell', className)
+  }, {
+    children: children
+  }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+var TableRow = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("tr", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-table__row', className)
+  }, {
+    children: children
+  }));
+});
+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"]);
+
+  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),
+    disabled: disabled,
+    readOnly: readOnly,
+    required: required,
+    "aria-invalid": invalid || undefined
+  }));
+});
+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"]);
+
+  return jsx("input", Object.assign({}, restProps, {
+    ref: ref,
+    type: type,
+    className: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly', required && 'utrecht-textbox--required', className),
+    maxLength: maxLength,
+    disabled: disabled,
+    readOnly: readOnly,
+    required: required,
+    "aria-invalid": invalid || undefined,
+    inputMode: inputMode || (type === 'number' ? 'numeric' : undefined)
+  }));
+});
+Textbox.displayName = 'Textbox';
+
+var URLValue = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("bdi", Object.assign({
+    translate: "no"
+  }, restProps, {
+    ref: ref,
+    className: clsx('utrecht-url', className)
+  }, {
+    children: children
+  }));
+});
+URLValue.displayName = 'URLValue';
+
+var UnorderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("ul", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-unordered-list', className)
+  }, {
+    children: children
+  }));
+});
+UnorderedList.displayName = 'UnorderedList';
+
+var UnorderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      className = _a.className,
+      restProps = __rest(_a, ["children", "className"]);
+
+  return jsx("li", Object.assign({}, restProps, {
+    ref: ref,
+    className: clsx('utrecht-unordered-list__item', className)
+  }, {
+    children: children
+  }));
+});
+UnorderedListItem.displayName = 'UnorderedListItem';
+
+export { Article, Backdrop, Button, ButtonGroup, ButtonLink, Calendar, Checkbox, CustomRadioButton, DataList, DataListActions, DataListItem, DataListKey, DataListValue, Document, Fieldset, FieldsetLegend, FormField, FormFieldDescription, FormLabel, HTMLContent, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, HeadingGroup, Image, Link, LinkButton, LinkSocial, ListSocial, ListSocialItem, NumberValue, OrderedList, OrderedListItem, Page, PageContent, PageFooter, PageHeader, Paragraph, PreHeading, PrimaryActionButton, RadioButton, SecondaryActionButton, Select, SelectOption, Separator, SkipLink, SubtleButton, Surface, Table, TableBody, TableCaption, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, Textarea, Textbox, URLValue, UnorderedList, UnorderedListItem };
+//# sourceMappingURL=index.esm.js.map