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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/.jest-test-results.json +1 -1
  2. package/dist/css-module/index.js +345 -404
  3. package/dist/css-module/index.js.map +1 -1
  4. package/dist/css-module/index.mjs +266 -319
  5. package/dist/css-module/index.mjs.map +1 -1
  6. package/dist/index.cjs.js +389 -469
  7. package/dist/index.cjs.js.map +1 -1
  8. package/dist/index.esm.js +310 -382
  9. package/dist/index.esm.js.map +1 -1
  10. package/package.json +23 -23
package/dist/index.esm.js CHANGED
@@ -1,19 +1,44 @@
1
- import { __rest } from 'tslib';
2
1
  import { jsxs, jsx } from 'react/jsx-runtime';
3
2
  import clsx, { clsx as clsx$1 } from 'clsx';
4
3
  import { forwardRef, useId, useState } from 'react';
5
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
6
- import { eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, setDate, formatISO, startOfMonth, addWeeks } from 'date-fns';
5
+ import { startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, endOfDay, parseISO, setYear, getYear, addYears, setMonth, addMonths, format, isSameMonth, setDate, formatISO, startOfMonth, addWeeks } from 'date-fns';
7
6
  import { enUS } from 'date-fns/locale';
8
7
  import chunk from 'lodash.chunk';
9
8
 
9
+ /******************************************************************************
10
+ Copyright (c) Microsoft Corporation.
11
+
12
+ Permission to use, copy, modify, and/or distribute this software for any
13
+ purpose with or without fee is hereby granted.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
16
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
17
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
18
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
+ PERFORMANCE OF THIS SOFTWARE.
22
+ ***************************************************************************** */
23
+
24
+ function __rest(s, e) {
25
+ var t = {};
26
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
27
+ t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
29
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
30
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
31
+ t[p[i]] = s[p[i]];
32
+ }
33
+ return t;
34
+ }
35
+
10
36
  var Alert = /*#__PURE__*/forwardRef(function (_a, ref) {
11
37
  var children = _a.children,
12
- className = _a.className,
13
- icon = _a.icon,
14
- type = _a.type,
15
- restProps = __rest(_a, ["children", "className", "icon", "type"]);
16
-
38
+ className = _a.className,
39
+ icon = _a.icon,
40
+ type = _a.type,
41
+ restProps = __rest(_a, ["children", "className", "icon", "type"]);
17
42
  return jsxs("div", Object.assign({}, restProps, {
18
43
  ref: ref,
19
44
  className: clsx('utrecht-alert', {
@@ -38,11 +63,10 @@ Alert.displayName = 'Alert';
38
63
 
39
64
  var AlertDialog = /*#__PURE__*/forwardRef(function (_a, ref) {
40
65
  var children = _a.children,
41
- className = _a.className,
42
- icon = _a.icon,
43
- type = _a.type,
44
- restProps = __rest(_a, ["children", "className", "icon", "type"]);
45
-
66
+ className = _a.className,
67
+ icon = _a.icon,
68
+ type = _a.type,
69
+ restProps = __rest(_a, ["children", "className", "icon", "type"]);
46
70
  return jsxs("dialog", Object.assign({}, restProps, {
47
71
  ref: ref,
48
72
  className: clsx('utrecht-alert-dialog', {
@@ -67,9 +91,8 @@ AlertDialog.displayName = 'AlertDialog';
67
91
 
68
92
  var Article = /*#__PURE__*/forwardRef(function (_a, ref) {
69
93
  var children = _a.children,
70
- className = _a.className,
71
- restProps = __rest(_a, ["children", "className"]);
72
-
94
+ className = _a.className,
95
+ restProps = __rest(_a, ["children", "className"]);
73
96
  return jsx("article", Object.assign({}, restProps, {
74
97
  ref: ref,
75
98
  className: clsx('utrecht-article', className)
@@ -81,9 +104,8 @@ Article.displayName = 'Article';
81
104
 
82
105
  var Backdrop = /*#__PURE__*/forwardRef(function (_a, ref) {
83
106
  var children = _a.children,
84
- className = _a.className,
85
- restProps = __rest(_a, ["children", "className"]);
86
-
107
+ className = _a.className,
108
+ restProps = __rest(_a, ["children", "className"]);
87
109
  return jsx("div", Object.assign({}, restProps, {
88
110
  ref: ref,
89
111
  className: clsx('utrecht-backdrop', className)
@@ -95,10 +117,9 @@ Backdrop.displayName = 'Backdrop';
95
117
 
96
118
  var Heading = /*#__PURE__*/forwardRef(function (_a, ref) {
97
119
  var appearance = _a.appearance,
98
- className = _a.className,
99
- level = _a.level,
100
- restProps = __rest(_a, ["appearance", "className", "level"]);
101
-
120
+ className = _a.className,
121
+ level = _a.level,
122
+ restProps = __rest(_a, ["appearance", "className", "level"]);
102
123
  var appearances = ['utrecht-heading-1', 'utrecht-heading-2', 'utrecht-heading-3', 'utrecht-heading-4', 'utrecht-heading-5', 'utrecht-heading-6'];
103
124
  var HeadingX = level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : level === 5 ? 'h5' : level === 6 ? 'h6' : 'h1';
104
125
  var headingClassName = appearance && appearances.indexOf(appearance) !== -1 ? appearance : appearances[level - 1] || 'utrecht-heading-1';
@@ -112,15 +133,15 @@ Heading.displayName = 'Heading';
112
133
 
113
134
  var Link = /*#__PURE__*/forwardRef(function (_a, ref) {
114
135
  var boxContent = _a.boxContent,
115
- children = _a.children,
116
- className = _a.className,
117
- external = _a.external,
118
- href = _a.href,
119
- placeholder = _a.placeholder,
120
- role = _a.role,
121
- restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
122
-
123
- return (// "utrecht-link--telephone" does not have a corresponding API,
136
+ children = _a.children,
137
+ className = _a.className,
138
+ external = _a.external,
139
+ href = _a.href,
140
+ placeholder = _a.placeholder,
141
+ role = _a.role,
142
+ restProps = __rest(_a, ["boxContent", "children", "className", "external", "href", "placeholder", "role"]);
143
+ return (
144
+ // "utrecht-link--telephone" does not have a corresponding API,
124
145
  // since it is primarily a basis for implementing input[href^="tel"].
125
146
  // Telephone number rendering in React is best achieved using composition
126
147
  // of the TelephoneValue component.
@@ -144,29 +165,26 @@ Link.displayName = 'Link';
144
165
 
145
166
  var useMicrodataItem = function useMicrodataItem(_ref) {
146
167
  var prop = _ref.prop,
147
- type = _ref.type;
168
+ type = _ref.type;
148
169
  return {
149
170
  itemScope: true,
150
171
  itemType: type,
151
172
  itemProp: prop
152
173
  };
153
174
  };
154
-
155
175
  var useMicrodataProp = function useMicrodataProp(prop) {
156
176
  return {
157
177
  itemProp: prop
158
178
  };
159
179
  };
160
-
161
180
  var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_a, ref) {
162
181
  var appearance = _a.appearance,
163
- children = _a.children,
164
- className = _a.className,
165
- _a$headingLevel = _a.headingLevel,
166
- headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
167
- label = _a.label,
168
- restProps = __rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
169
-
182
+ children = _a.children,
183
+ className = _a.className,
184
+ _a$headingLevel = _a.headingLevel,
185
+ headingLevel = _a$headingLevel === void 0 ? 2 : _a$headingLevel,
186
+ label = _a.label,
187
+ restProps = __rest(_a, ["appearance", "children", "className", "headingLevel", "label"]);
170
188
  var headingId = label ? useId() : undefined;
171
189
  return jsxs("nav", Object.assign({}, restProps, {
172
190
  ref: ref,
@@ -194,10 +212,10 @@ var BreadcrumbNav = /*#__PURE__*/forwardRef(function (_a, ref) {
194
212
  BreadcrumbNav.displayName = 'BreadcrumbNav';
195
213
  var BreadcrumbLink = /*#__PURE__*/forwardRef(function (_ref2, ref) {
196
214
  var children = _ref2.children,
197
- current = _ref2.current,
198
- href = _ref2.href,
199
- index = _ref2.index,
200
- rel = _ref2.rel;
215
+ current = _ref2.current,
216
+ href = _ref2.href,
217
+ index = _ref2.index,
218
+ rel = _ref2.rel;
201
219
  return jsx("li", Object.assign({
202
220
  className: "utrecht-breadcrumb__item"
203
221
  }, useMicrodataItem({
@@ -226,15 +244,14 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
226
244
 
227
245
  var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
228
246
  var appearance = _a.appearance,
229
- busy = _a.busy,
230
- disabled = _a.disabled,
231
- children = _a.children,
232
- className = _a.className,
233
- hint = _a.hint,
234
- pressed = _a.pressed,
235
- type = _a.type,
236
- restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
237
-
247
+ busy = _a.busy,
248
+ disabled = _a.disabled,
249
+ children = _a.children,
250
+ className = _a.className,
251
+ hint = _a.hint,
252
+ pressed = _a.pressed,
253
+ type = _a.type,
254
+ restProps = __rest(_a, ["appearance", "busy", "disabled", "children", "className", "hint", "pressed", "type"]);
238
255
  return jsx("button", Object.assign({}, restProps, {
239
256
  ref: ref,
240
257
  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 +266,6 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
249
266
  Button.displayName = 'Button';
250
267
  var PrimaryActionButton = function PrimaryActionButton(_a) {
251
268
  var args = __rest(_a, []);
252
-
253
269
  return jsx(Button, Object.assign({}, args, {
254
270
  appearance: "primary-action-button"
255
271
  }));
@@ -257,7 +273,6 @@ var PrimaryActionButton = function PrimaryActionButton(_a) {
257
273
  PrimaryActionButton.displayName = 'PrimaryActionButton';
258
274
  var SecondaryActionButton = function SecondaryActionButton(_a) {
259
275
  var args = __rest(_a, []);
260
-
261
276
  return jsx(Button, Object.assign({}, args, {
262
277
  appearance: "secondary-action-button"
263
278
  }));
@@ -265,7 +280,6 @@ var SecondaryActionButton = function SecondaryActionButton(_a) {
265
280
  SecondaryActionButton.displayName = 'SecondaryActionButton';
266
281
  var SubtleButton = function SubtleButton(_a) {
267
282
  var args = __rest(_a, []);
268
-
269
283
  return jsx(Button, Object.assign({}, args, {
270
284
  appearance: "subtle-button"
271
285
  }));
@@ -274,9 +288,8 @@ SubtleButton.displayName = 'SubtleButton';
274
288
 
275
289
  var ButtonGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
276
290
  var children = _a.children,
277
- className = _a.className,
278
- restProps = __rest(_a, ["children", "className"]);
279
-
291
+ className = _a.className,
292
+ restProps = __rest(_a, ["children", "className"]);
280
293
  return jsx("p", Object.assign({}, restProps, {
281
294
  ref: ref,
282
295
  className: clsx('utrecht-button-group', className)
@@ -288,27 +301,23 @@ ButtonGroup.displayName = 'ButtonGroup';
288
301
 
289
302
  var onKeyDown = function onKeyDown(evt) {
290
303
  var _a;
291
-
292
304
  if (evt.key === ' ' && typeof ((_a = evt.target) === null || _a === void 0 ? void 0 : _a.click) === 'function') {
293
305
  // Prevent other side-effects, such as scrolling
294
- evt.preventDefault(); // Navigate to the link target
295
-
306
+ evt.preventDefault();
307
+ // Navigate to the link target
296
308
  evt.target.click();
297
309
  }
298
310
  };
299
-
300
311
  var ButtonLink = /*#__PURE__*/forwardRef(function (_a, ref) {
301
312
  var appearance = _a.appearance,
302
- children = _a.children,
303
- className = _a.className,
304
- external = _a.external,
305
- href = _a.href,
306
- placeholder = _a.placeholder,
307
- role = _a.role,
308
- restProps = __rest(_a, ["appearance", "children", "className", "external", "href", "placeholder", "role"]);
309
-
313
+ children = _a.children,
314
+ className = _a.className,
315
+ external = _a.external,
316
+ href = _a.href,
317
+ placeholder = _a.placeholder,
318
+ role = _a.role,
319
+ restProps = __rest(_a, ["appearance", "children", "className", "external", "href", "placeholder", "role"]);
310
320
  var props = restProps;
311
-
312
321
  if (role === 'button') {
313
322
  // When this link is announced as button by accessibility tools,
314
323
  // it should also behave like a button. Links are not activated
@@ -318,7 +327,6 @@ var ButtonLink = /*#__PURE__*/forwardRef(function (_a, ref) {
318
327
  onKeyDown: onKeyDown
319
328
  });
320
329
  }
321
-
322
330
  return jsx("a", Object.assign({
323
331
  href: placeholder ? undefined : href,
324
332
  ref: ref,
@@ -340,8 +348,7 @@ ButtonLink.displayName = 'ButtonLink';
340
348
 
341
349
  var CalendarNavigation = function CalendarNavigation(_a) {
342
350
  var children = _a.children,
343
- props = __rest(_a, ["children"]);
344
-
351
+ props = __rest(_a, ["children"]);
345
352
  return jsx("div", Object.assign({
346
353
  className: "utrecht-calendar__navigation"
347
354
  }, props, {
@@ -351,9 +358,8 @@ var CalendarNavigation = function CalendarNavigation(_a) {
351
358
 
352
359
  var CalendarButton = function CalendarButton(_a) {
353
360
  var children = _a.children,
354
- className = _a.className,
355
- props = __rest(_a, ["children", "className"]);
356
-
361
+ className = _a.className,
362
+ props = __rest(_a, ["children", "className"]);
357
363
  return jsx(Button, Object.assign({
358
364
  appearance: "subtle-button"
359
365
  }, props, {
@@ -365,8 +371,7 @@ var CalendarButton = function CalendarButton(_a) {
365
371
 
366
372
  var CalendarIcon = function CalendarIcon(_a) {
367
373
  var children = _a.children,
368
- props = __rest(_a, ["children"]);
369
-
374
+ props = __rest(_a, ["children"]);
370
375
  return jsx("div", Object.assign({
371
376
  className: clsx$1('utrecht-calendar__icon')
372
377
  }, props, {
@@ -376,12 +381,11 @@ var CalendarIcon = function CalendarIcon(_a) {
376
381
 
377
382
  var CalendarNavigationButtons = function CalendarNavigationButtons(_a) {
378
383
  var onPreviousClick = _a.onPreviousClick,
379
- onNextClick = _a.onNextClick,
380
- previousIcon = _a.previousIcon,
381
- nextIcon = _a.nextIcon,
382
- children = _a.children,
383
- props = __rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
384
-
384
+ onNextClick = _a.onNextClick,
385
+ previousIcon = _a.previousIcon,
386
+ nextIcon = _a.nextIcon,
387
+ children = _a.children,
388
+ props = __rest(_a, ["onPreviousClick", "onNextClick", "previousIcon", "nextIcon", "children"]);
385
389
  return jsxs("div", Object.assign({
386
390
  className: "utrecht-calendar__navigation-buttons"
387
391
  }, {
@@ -403,9 +407,8 @@ var CalendarNavigationButtons = function CalendarNavigationButtons(_a) {
403
407
 
404
408
  var Heading2 = /*#__PURE__*/forwardRef(function (_a, ref) {
405
409
  var children = _a.children,
406
- className = _a.className,
407
- restProps = __rest(_a, ["children", "className"]);
408
-
410
+ className = _a.className,
411
+ restProps = __rest(_a, ["children", "className"]);
409
412
  return jsx("h2", Object.assign({}, restProps, {
410
413
  ref: ref,
411
414
  className: clsx('utrecht-heading-2', className)
@@ -426,8 +429,7 @@ var CalendarNavigationLabel = function CalendarNavigationLabel(_ref) {
426
429
 
427
430
  var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
428
431
  var children = _a.children,
429
- props = __rest(_a, ["children"]);
430
-
432
+ props = __rest(_a, ["children"]);
431
433
  return jsx("tbody", Object.assign({}, props, {
432
434
  className: "utrecht-calendar__table-days-container"
433
435
  }, {
@@ -437,8 +439,7 @@ var CalendarTableDaysContainer = function CalendarTableDaysContainer(_a) {
437
439
 
438
440
  var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
439
441
  var children = _a.children,
440
- props = __rest(_a, ["children"]);
441
-
442
+ props = __rest(_a, ["children"]);
442
443
  return jsx("tr", Object.assign({}, props, {
443
444
  children: children
444
445
  }));
@@ -446,13 +447,12 @@ var CalendarTableDaysItem = function CalendarTableDaysItem(_a) {
446
447
 
447
448
  var CalendarTableDaysItemDay = function CalendarTableDaysItemDay(_a) {
448
449
  var day = _a.day,
449
- dayOutOfTheMonth = _a.dayOutOfTheMonth,
450
- isToday = _a.isToday,
451
- emphasis = _a.emphasis,
452
- selected = _a.selected,
453
- disabled = _a.disabled,
454
- props = __rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
455
-
450
+ dayOutOfTheMonth = _a.dayOutOfTheMonth,
451
+ isToday = _a.isToday,
452
+ emphasis = _a.emphasis,
453
+ selected = _a.selected,
454
+ disabled = _a.disabled,
455
+ props = __rest(_a, ["day", "dayOutOfTheMonth", "isToday", "emphasis", "selected", "disabled"]);
456
456
  return jsx("td", {
457
457
  children: jsx(CalendarButton, Object.assign({
458
458
  className: clsx('utrecht-calendar__table-days-item-day', {
@@ -486,8 +486,7 @@ var CalendarTableWeeksContainer = function CalendarTableWeeksContainer(_ref) {
486
486
 
487
487
  var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
488
488
  var children = _a.children,
489
- props = __rest(_a, ["children"]);
490
-
489
+ props = __rest(_a, ["children"]);
491
490
  return jsx("th", Object.assign({}, props, {
492
491
  className: "utrecht-calendar__table-weeks-item"
493
492
  }, {
@@ -497,9 +496,8 @@ var CalendarTableWeeksItem = function CalendarTableWeeksItem(_a) {
497
496
 
498
497
  var IconArrowLeft = function IconArrowLeft(_a) {
499
498
  var title = _a.title,
500
- titleId = _a.titleId,
501
- props = __rest(_a, ["title", "titleId"]);
502
-
499
+ titleId = _a.titleId,
500
+ props = __rest(_a, ["title", "titleId"]);
503
501
  return jsxs("svg", Object.assign({
504
502
  width: "100%",
505
503
  height: "100%",
@@ -520,9 +518,8 @@ var IconArrowLeft = function IconArrowLeft(_a) {
520
518
 
521
519
  var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
522
520
  var title = _a.title,
523
- titleId = _a.titleId,
524
- props = __rest(_a, ["title", "titleId"]);
525
-
521
+ titleId = _a.titleId,
522
+ props = __rest(_a, ["title", "titleId"]);
526
523
  return jsxs("svg", Object.assign({
527
524
  width: "100%",
528
525
  height: "100%",
@@ -546,9 +543,8 @@ var IconArrowLeftDouble = function IconArrowLeftDouble(_a) {
546
543
 
547
544
  var IconArrowRight = function IconArrowRight(_a) {
548
545
  var title = _a.title,
549
- titleId = _a.titleId,
550
- props = __rest(_a, ["title", "titleId"]);
551
-
546
+ titleId = _a.titleId,
547
+ props = __rest(_a, ["title", "titleId"]);
552
548
  return jsxs("svg", Object.assign({
553
549
  width: "100%",
554
550
  height: "100%",
@@ -569,9 +565,8 @@ var IconArrowRight = function IconArrowRight(_a) {
569
565
 
570
566
  var IconArrowRightDouble = function IconArrowRightDouble(_a) {
571
567
  var title = _a.title,
572
- titleId = _a.titleId,
573
- props = __rest(_a, ["title", "titleId"]);
574
-
568
+ titleId = _a.titleId,
569
+ props = __rest(_a, ["title", "titleId"]);
575
570
  return jsxs("svg", Object.assign({
576
571
  fill: "none",
577
572
  width: "100%",
@@ -595,15 +590,13 @@ var IconArrowRightDouble = function IconArrowRightDouble(_a) {
595
590
 
596
591
  function createCalendar(today) {
597
592
  var start = startOfWeek(startOfMonth(today), {
598
- weekStartsOn: 1
599
- /* Monday */
600
-
593
+ weekStartsOn: 1 /* Monday */
601
594
  });
602
- var end = endOfWeek(addWeeks(start, 5), {
603
- weekStartsOn: 1
604
- /* Monday */
605
595
 
596
+ var end = endOfWeek(addWeeks(start, 5), {
597
+ weekStartsOn: 1 /* Monday */
606
598
  });
599
+
607
600
  return eachDayOfInterval({
608
601
  start: start,
609
602
  end: end
@@ -613,28 +606,24 @@ function createCalendar(today) {
613
606
  * Calendar Component
614
607
  * powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
615
608
  * */
616
-
617
-
618
609
  var Calendar = function Calendar(_ref) {
619
610
  var onCalendarClick = _ref.onCalendarClick,
620
- events = _ref.events,
621
- currentDate = _ref.currentDate,
622
- _ref$locale = _ref.locale,
623
- locale = _ref$locale === void 0 ? enUS : _ref$locale,
624
- _ref$previousYearButt = _ref.previousYearButtonTitle,
625
- previousYearButtonTitle = _ref$previousYearButt === void 0 ? 'Previous year' : _ref$previousYearButt,
626
- _ref$nextYearButtonTi = _ref.nextYearButtonTitle,
627
- nextYearButtonTitle = _ref$nextYearButtonTi === void 0 ? 'Next year' : _ref$nextYearButtonTi,
628
- _ref$previousMonthBut = _ref.previousMonthButtonTitle,
629
- previousMonthButtonTitle = _ref$previousMonthBut === void 0 ? 'Previous month' : _ref$previousMonthBut,
630
- _ref$nextMonthButtonT = _ref.nextMonthButtonTitle,
631
- nextMonthButtonTitle = _ref$nextMonthButtonT === void 0 ? 'Next month' : _ref$nextMonthButtonT;
632
-
611
+ events = _ref.events,
612
+ currentDate = _ref.currentDate,
613
+ _ref$locale = _ref.locale,
614
+ locale = _ref$locale === void 0 ? enUS : _ref$locale,
615
+ _ref$previousYearButt = _ref.previousYearButtonTitle,
616
+ previousYearButtonTitle = _ref$previousYearButt === void 0 ? 'Previous year' : _ref$previousYearButt,
617
+ _ref$nextYearButtonTi = _ref.nextYearButtonTitle,
618
+ nextYearButtonTitle = _ref$nextYearButtonTi === void 0 ? 'Next year' : _ref$nextYearButtonTi,
619
+ _ref$previousMonthBut = _ref.previousMonthButtonTitle,
620
+ previousMonthButtonTitle = _ref$previousMonthBut === void 0 ? 'Previous month' : _ref$previousMonthBut,
621
+ _ref$nextMonthButtonT = _ref.nextMonthButtonTitle,
622
+ nextMonthButtonTitle = _ref$nextMonthButtonT === void 0 ? 'Next month' : _ref$nextMonthButtonT;
633
623
  var _useState = useState(currentDate || new Date()),
634
- _useState2 = _slicedToArray(_useState, 2),
635
- date = _useState2[0],
636
- setDate$1 = _useState2[1];
637
-
624
+ _useState2 = _slicedToArray(_useState, 2),
625
+ date = _useState2[0],
626
+ setDate$1 = _useState2[1];
638
627
  var calendar = createCalendar(date);
639
628
  var start = startOfWeek(date, {
640
629
  weekStartsOn: 1
@@ -654,7 +643,6 @@ var Calendar = function Calendar(_ref) {
654
643
  var currentEvent = events && events.length > 0 && events.find(function (e) {
655
644
  return isSameDay(endOfDay(parseISO(e.date)), date);
656
645
  });
657
-
658
646
  if (currentEvent) {
659
647
  return {
660
648
  date: date,
@@ -758,13 +746,12 @@ var Calendar = function Calendar(_ref) {
758
746
 
759
747
  var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
760
748
  var _a$appearance = _a.appearance,
761
- appearance = _a$appearance === void 0 ? 'custom' : _a$appearance,
762
- disabled = _a.disabled,
763
- invalid = _a.invalid,
764
- required = _a.required,
765
- className = _a.className,
766
- restProps = __rest(_a, ["appearance", "disabled", "invalid", "required", "className"]);
767
-
749
+ appearance = _a$appearance === void 0 ? 'custom' : _a$appearance,
750
+ disabled = _a.disabled,
751
+ invalid = _a.invalid,
752
+ required = _a.required,
753
+ className = _a.className,
754
+ restProps = __rest(_a, ["appearance", "disabled", "invalid", "required", "className"]);
768
755
  return jsx("input", Object.assign({}, restProps, {
769
756
  ref: ref,
770
757
  type: "checkbox",
@@ -783,9 +770,8 @@ Checkbox.displayName = 'Checkbox';
783
770
 
784
771
  var Code = /*#__PURE__*/forwardRef(function (_a, ref) {
785
772
  var children = _a.children,
786
- className = _a.className,
787
- restProps = __rest(_a, ["children", "className"]);
788
-
773
+ className = _a.className,
774
+ restProps = __rest(_a, ["children", "className"]);
789
775
  return jsx("code", Object.assign({
790
776
  ref: ref,
791
777
  className: clsx('utrecht-code', className)
@@ -797,9 +783,8 @@ Code.displayName = 'Code';
797
783
 
798
784
  var CodeBlock = /*#__PURE__*/forwardRef(function (_a, ref) {
799
785
  var children = _a.children,
800
- className = _a.className,
801
- restProps = __rest(_a, ["children", "className"]);
802
-
786
+ className = _a.className,
787
+ restProps = __rest(_a, ["children", "className"]);
803
788
  return jsx("pre", Object.assign({
804
789
  ref: ref,
805
790
  className: clsx('utrecht-code-block', className)
@@ -815,11 +800,10 @@ CodeBlock.displayName = 'CodeBlock';
815
800
 
816
801
  var CustomRadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
817
802
  var disabled = _a.disabled,
818
- required = _a.required,
819
- className = _a.className,
820
- invalid = _a.invalid,
821
- restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
822
-
803
+ required = _a.required,
804
+ className = _a.className,
805
+ invalid = _a.invalid,
806
+ restProps = __rest(_a, ["disabled", "required", "className", "invalid"]);
823
807
  return jsx("input", Object.assign({
824
808
  type: "radio",
825
809
  "aria-invalid": invalid || undefined,
@@ -833,9 +817,8 @@ CustomRadioButton.displayName = 'CustomRadioButton';
833
817
 
834
818
  var Document = /*#__PURE__*/forwardRef(function (_a, ref) {
835
819
  var children = _a.children,
836
- className = _a.className,
837
- restProps = __rest(_a, ["children", "className"]);
838
-
820
+ className = _a.className,
821
+ restProps = __rest(_a, ["children", "className"]);
839
822
  return jsx("div", Object.assign({}, restProps, {
840
823
  ref: ref,
841
824
  className: clsx('utrecht-document', className)
@@ -847,10 +830,9 @@ Document.displayName = 'Document';
847
830
 
848
831
  var DataList = /*#__PURE__*/forwardRef(function (_a, ref) {
849
832
  var appearance = _a.appearance,
850
- children = _a.children,
851
- className = _a.className,
852
- restProps = __rest(_a, ["appearance", "children", "className"]);
853
-
833
+ children = _a.children,
834
+ className = _a.className,
835
+ restProps = __rest(_a, ["appearance", "children", "className"]);
854
836
  return jsx("dl", Object.assign({}, restProps, {
855
837
  className: clsx('utrecht-data-list', 'utrecht-data-list--html-dl', appearance === 'rows' && 'utrecht-data-list--rows', className),
856
838
  ref: ref
@@ -861,9 +843,8 @@ var DataList = /*#__PURE__*/forwardRef(function (_a, ref) {
861
843
  DataList.displayName = 'DataList';
862
844
  var DataListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
863
845
  var children = _a.children,
864
- className = _a.className,
865
- restProps = __rest(_a, ["children", "className"]);
866
-
846
+ className = _a.className,
847
+ restProps = __rest(_a, ["children", "className"]);
867
848
  return jsx("div", Object.assign({}, restProps, {
868
849
  className: clsx('utrecht-data-list__item', className),
869
850
  ref: ref
@@ -874,9 +855,8 @@ var DataListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
874
855
  DataListItem.displayName = 'DataListItem';
875
856
  var DataListKey = /*#__PURE__*/forwardRef(function (_a, ref) {
876
857
  var children = _a.children,
877
- className = _a.className,
878
- restProps = __rest(_a, ["children", "className"]);
879
-
858
+ className = _a.className,
859
+ restProps = __rest(_a, ["children", "className"]);
880
860
  return jsx("dt", Object.assign({}, restProps, {
881
861
  className: clsx('utrecht-data-list__item-key', className),
882
862
  ref: ref
@@ -887,11 +867,11 @@ var DataListKey = /*#__PURE__*/forwardRef(function (_a, ref) {
887
867
  DataListKey.displayName = 'DataListKey';
888
868
  var DataListValue = /*#__PURE__*/forwardRef(function (_ref, ref) {
889
869
  var value = _ref.value,
890
- children = _ref.children,
891
- className = _ref.className,
892
- emptyDescription = _ref.emptyDescription,
893
- multiline = _ref.multiline,
894
- notranslate = _ref.notranslate;
870
+ children = _ref.children,
871
+ className = _ref.className,
872
+ emptyDescription = _ref.emptyDescription,
873
+ multiline = _ref.multiline,
874
+ notranslate = _ref.notranslate;
895
875
  var empty = value === '' || value === null;
896
876
  return jsx("dd", Object.assign({
897
877
  className: clsx('utrecht-data-list__item-value', 'utrecht-data-list__item-value--html-dd', className, multiline && 'utrecht-data-list__item-value--multiline'),
@@ -908,9 +888,8 @@ var DataListValue = /*#__PURE__*/forwardRef(function (_ref, ref) {
908
888
  DataListValue.displayName = 'DataListValue';
909
889
  var DataListActions = /*#__PURE__*/forwardRef(function (_a, ref) {
910
890
  var children = _a.children,
911
- className = _a.className,
912
- restProps = __rest(_a, ["children", "className"]);
913
-
891
+ className = _a.className,
892
+ restProps = __rest(_a, ["children", "className"]);
914
893
  return jsx("dd", Object.assign({}, restProps, {
915
894
  className: clsx('utrecht-data-list__actions', 'utrecht-data-list__actions--html-dd', className),
916
895
  ref: ref
@@ -922,9 +901,8 @@ DataListActions.displayName = 'DataListActions';
922
901
 
923
902
  var Emphasis = /*#__PURE__*/forwardRef(function (_a, ref) {
924
903
  var children = _a.children,
925
- className = _a.className,
926
- restProps = __rest(_a, ["children", "className"]);
927
-
904
+ className = _a.className,
905
+ restProps = __rest(_a, ["children", "className"]);
928
906
  return jsx("em", Object.assign({
929
907
  ref: ref,
930
908
  className: clsx('utrecht-emphasis', 'utrecht-emphasis--stressed', className)
@@ -936,17 +914,16 @@ Emphasis.displayName = 'Emphasis';
936
914
 
937
915
  var Fieldset = /*#__PURE__*/forwardRef(function (_a, ref) {
938
916
  var ariaDescribedby = _a['aria-describedby'],
939
- ariaLabel = _a['aria-label'],
940
- ariaLabelledby = _a['aria-labelledby'],
941
- className = _a.className,
942
- children = _a.children,
943
- disabled = _a.disabled,
944
- form = _a.form,
945
- invalid = _a.invalid,
946
- name = _a.name,
947
- role = _a.role,
948
- restProps = __rest(_a, ['aria-describedby', 'aria-label', 'aria-labelledby', "className", "children", "disabled", "form", "invalid", "name", "role"]);
949
-
917
+ ariaLabel = _a['aria-label'],
918
+ ariaLabelledby = _a['aria-labelledby'],
919
+ className = _a.className,
920
+ children = _a.children,
921
+ disabled = _a.disabled,
922
+ form = _a.form,
923
+ invalid = _a.invalid,
924
+ name = _a.name,
925
+ role = _a.role,
926
+ restProps = __rest(_a, ['aria-describedby', 'aria-label', 'aria-labelledby', "className", "children", "disabled", "form", "invalid", "name", "role"]);
950
927
  return jsx("div", Object.assign({}, restProps, {
951
928
  ref: ref,
952
929
  className: clsx('utrecht-form-fieldset', disabled && 'utrecht-form-fieldset--disabled', invalid && 'utrecht-form-fieldset--invalid', className)
@@ -969,11 +946,10 @@ var Fieldset = /*#__PURE__*/forwardRef(function (_a, ref) {
969
946
  Fieldset.displayName = 'Fieldset';
970
947
  var FieldsetOnly = /*#__PURE__*/forwardRef(function (_a, ref) {
971
948
  var className = _a.className,
972
- children = _a.children,
973
- disabled = _a.disabled,
974
- invalid = _a.invalid,
975
- restProps = __rest(_a, ["className", "children", "disabled", "invalid"]);
976
-
949
+ children = _a.children,
950
+ disabled = _a.disabled,
951
+ invalid = _a.invalid,
952
+ restProps = __rest(_a, ["className", "children", "disabled", "invalid"]);
977
953
  return jsx("fieldset", Object.assign({}, restProps, {
978
954
  ref: ref,
979
955
  "aria-invalid": invalid || undefined,
@@ -987,9 +963,8 @@ FieldsetOnly.displayName = 'Fieldset';
987
963
 
988
964
  var FieldsetLegend = /*#__PURE__*/forwardRef(function (_a, ref) {
989
965
  var className = _a.className,
990
- children = _a.children,
991
- restProps = __rest(_a, ["className", "children"]);
992
-
966
+ children = _a.children,
967
+ restProps = __rest(_a, ["className", "children"]);
993
968
  return jsx("legend", Object.assign({}, restProps, {
994
969
  ref: ref,
995
970
  className: clsx('utrecht-form-fieldset__legend', 'utrecht-form-fieldset__legend--html-legend', className)
@@ -1001,9 +976,8 @@ FieldsetLegend.displayName = 'FieldsetLegend';
1001
976
 
1002
977
  var Figure = /*#__PURE__*/forwardRef(function (_a, ref) {
1003
978
  var className = _a.className,
1004
- children = _a.children,
1005
- restProps = __rest(_a, ["className", "children"]);
1006
-
979
+ children = _a.children,
980
+ restProps = __rest(_a, ["className", "children"]);
1007
981
  return jsx("figure", Object.assign({}, restProps, {
1008
982
  ref: ref,
1009
983
  className: clsx('utrecht-figure', className)
@@ -1015,9 +989,8 @@ Figure.displayName = 'Figure';
1015
989
 
1016
990
  var FigureCaption = /*#__PURE__*/forwardRef(function (_a, ref) {
1017
991
  var className = _a.className,
1018
- children = _a.children,
1019
- restProps = __rest(_a, ["className", "children"]);
1020
-
992
+ children = _a.children,
993
+ restProps = __rest(_a, ["className", "children"]);
1021
994
  return jsx("figcaption", Object.assign({}, restProps, {
1022
995
  ref: ref,
1023
996
  className: clsx('utrecht-figure__caption', className)
@@ -1029,11 +1002,10 @@ FigureCaption.displayName = 'FigureCaption';
1029
1002
 
1030
1003
  var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
1031
1004
  var className = _a.className,
1032
- children = _a.children,
1033
- invalid = _a.invalid,
1034
- type = _a.type,
1035
- restProps = __rest(_a, ["className", "children", "invalid", "type"]);
1036
-
1005
+ children = _a.children,
1006
+ invalid = _a.invalid,
1007
+ type = _a.type,
1008
+ restProps = __rest(_a, ["className", "children", "invalid", "type"]);
1037
1009
  return jsx("div", Object.assign({}, restProps, {
1038
1010
  ref: ref,
1039
1011
  className: clsx('utrecht-form-field', {
@@ -1050,12 +1022,11 @@ FormField.displayName = 'FormField';
1050
1022
 
1051
1023
  var FormFieldDescription = /*#__PURE__*/forwardRef(function (_a, ref) {
1052
1024
  var invalid = _a.invalid,
1053
- valid = _a.valid,
1054
- warning = _a.warning,
1055
- className = _a.className,
1056
- children = _a.children,
1057
- restProps = __rest(_a, ["invalid", "valid", "warning", "className", "children"]);
1058
-
1025
+ valid = _a.valid,
1026
+ warning = _a.warning,
1027
+ className = _a.className,
1028
+ children = _a.children,
1029
+ restProps = __rest(_a, ["invalid", "valid", "warning", "className", "children"]);
1059
1030
  return jsx("div", Object.assign({}, restProps, {
1060
1031
  ref: ref,
1061
1032
  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 +1038,11 @@ FormFieldDescription.displayName = 'FormFieldDescription';
1067
1038
 
1068
1039
  var FormLabel = /*#__PURE__*/forwardRef(function (_a, ref) {
1069
1040
  var children = _a.children,
1070
- className = _a.className,
1071
- type = _a.type,
1072
- disabled = _a.disabled,
1073
- checked = _a.checked,
1074
- restProps = __rest(_a, ["children", "className", "type", "disabled", "checked"]);
1075
-
1041
+ className = _a.className,
1042
+ type = _a.type,
1043
+ disabled = _a.disabled,
1044
+ checked = _a.checked,
1045
+ restProps = __rest(_a, ["children", "className", "type", "disabled", "checked"]);
1076
1046
  return jsx("label", Object.assign({}, restProps, {
1077
1047
  ref: ref,
1078
1048
  className: clsx('utrecht-form-label', type && "utrecht-form-label--".concat(type), disabled && 'utrecht-form-label--disabled', checked && 'utrecht-form-label--checked', className)
@@ -1084,9 +1054,8 @@ FormLabel.displayName = 'FormLabel';
1084
1054
 
1085
1055
  var HTMLContent = /*#__PURE__*/forwardRef(function (_a, ref) {
1086
1056
  var children = _a.children,
1087
- className = _a.className,
1088
- restProps = __rest(_a, ["children", "className"]);
1089
-
1057
+ className = _a.className,
1058
+ restProps = __rest(_a, ["children", "className"]);
1090
1059
  return jsx("div", Object.assign({}, restProps, {
1091
1060
  ref: ref,
1092
1061
  className: clsx('utrecht-html', className)
@@ -1098,9 +1067,8 @@ HTMLContent.displayName = 'HTMLContent';
1098
1067
 
1099
1068
  var Heading1 = /*#__PURE__*/forwardRef(function (_a, ref) {
1100
1069
  var children = _a.children,
1101
- className = _a.className,
1102
- restProps = __rest(_a, ["children", "className"]);
1103
-
1070
+ className = _a.className,
1071
+ restProps = __rest(_a, ["children", "className"]);
1104
1072
  return jsx("h1", Object.assign({}, restProps, {
1105
1073
  ref: ref,
1106
1074
  className: clsx('utrecht-heading-1', className)
@@ -1112,9 +1080,8 @@ Heading1.displayName = 'Heading1';
1112
1080
 
1113
1081
  var Heading3 = /*#__PURE__*/forwardRef(function (_a, ref) {
1114
1082
  var children = _a.children,
1115
- className = _a.className,
1116
- restProps = __rest(_a, ["children", "className"]);
1117
-
1083
+ className = _a.className,
1084
+ restProps = __rest(_a, ["children", "className"]);
1118
1085
  return jsx("h3", Object.assign({}, restProps, {
1119
1086
  ref: ref,
1120
1087
  className: clsx('utrecht-heading-3', className)
@@ -1126,9 +1093,8 @@ Heading3.displayName = 'Heading3';
1126
1093
 
1127
1094
  var Heading4 = /*#__PURE__*/forwardRef(function (_a, ref) {
1128
1095
  var children = _a.children,
1129
- className = _a.className,
1130
- restProps = __rest(_a, ["children", "className"]);
1131
-
1096
+ className = _a.className,
1097
+ restProps = __rest(_a, ["children", "className"]);
1132
1098
  return jsx("h4", Object.assign({}, restProps, {
1133
1099
  ref: ref,
1134
1100
  className: clsx('utrecht-heading-4', className)
@@ -1140,9 +1106,8 @@ Heading4.displayName = 'Heading4';
1140
1106
 
1141
1107
  var Heading5 = /*#__PURE__*/forwardRef(function (_a, ref) {
1142
1108
  var children = _a.children,
1143
- className = _a.className,
1144
- restProps = __rest(_a, ["children", "className"]);
1145
-
1109
+ className = _a.className,
1110
+ restProps = __rest(_a, ["children", "className"]);
1146
1111
  return jsx("h5", Object.assign({}, restProps, {
1147
1112
  ref: ref,
1148
1113
  className: clsx('utrecht-heading-5', className)
@@ -1154,9 +1119,8 @@ Heading5.displayName = 'Heading5';
1154
1119
 
1155
1120
  var Heading6 = /*#__PURE__*/forwardRef(function (_a, ref) {
1156
1121
  var children = _a.children,
1157
- className = _a.className,
1158
- restProps = __rest(_a, ["children", "className"]);
1159
-
1122
+ className = _a.className,
1123
+ restProps = __rest(_a, ["children", "className"]);
1160
1124
  return jsx("h6", Object.assign({}, restProps, {
1161
1125
  ref: ref,
1162
1126
  className: clsx('utrecht-heading-6', className)
@@ -1168,9 +1132,8 @@ Heading6.displayName = 'Heading6';
1168
1132
 
1169
1133
  var HeadingGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
1170
1134
  var children = _a.children,
1171
- className = _a.className,
1172
- restProps = __rest(_a, ["children", "className"]);
1173
-
1135
+ className = _a.className,
1136
+ restProps = __rest(_a, ["children", "className"]);
1174
1137
  return jsx("hgroup", Object.assign({}, restProps, {
1175
1138
  ref: ref,
1176
1139
  className: clsx('utrecht-heading-group', className)
@@ -1182,9 +1145,8 @@ HeadingGroup.displayName = 'HeadingGroup';
1182
1145
 
1183
1146
  var Icon = /*#__PURE__*/forwardRef(function (_a, ref) {
1184
1147
  var children = _a.children,
1185
- className = _a.className,
1186
- restProps = __rest(_a, ["children", "className"]);
1187
-
1148
+ className = _a.className,
1149
+ restProps = __rest(_a, ["children", "className"]);
1188
1150
  return jsx("span", Object.assign({
1189
1151
  ref: ref,
1190
1152
  className: clsx('utrecht-icon', className)
@@ -1196,9 +1158,8 @@ Icon.displayName = 'Icon';
1196
1158
 
1197
1159
  var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
1198
1160
  var className = _a.className,
1199
- photo = _a.photo,
1200
- restProps = __rest(_a, ["className", "photo"]);
1201
-
1161
+ photo = _a.photo,
1162
+ restProps = __rest(_a, ["className", "photo"]);
1202
1163
  return jsx("img", Object.assign({}, restProps, {
1203
1164
  ref: ref,
1204
1165
  className: clsx('utrecht-img', {
@@ -1210,13 +1171,12 @@ Image.displayName = 'Image';
1210
1171
 
1211
1172
  var LinkButton = /*#__PURE__*/forwardRef(function (_a, ref) {
1212
1173
  var children = _a.children,
1213
- disabled = _a.disabled,
1214
- inline = _a.inline,
1215
- className = _a.className,
1216
- pressed = _a.pressed,
1217
- type = _a.type,
1218
- restProps = __rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
1219
-
1174
+ disabled = _a.disabled,
1175
+ inline = _a.inline,
1176
+ className = _a.className,
1177
+ pressed = _a.pressed,
1178
+ type = _a.type,
1179
+ restProps = __rest(_a, ["children", "disabled", "inline", "className", "pressed", "type"]);
1220
1180
  return jsx("button", Object.assign({
1221
1181
  ref: ref,
1222
1182
  "aria-pressed": typeof pressed === 'boolean' ? pressed : undefined,
@@ -1235,10 +1195,9 @@ LinkButton.displayName = 'LinkButton';
1235
1195
 
1236
1196
  var LinkSocial = /*#__PURE__*/forwardRef(function (_a, ref) {
1237
1197
  var children = _a.children,
1238
- className = _a.className,
1239
- external = _a.external,
1240
- restProps = __rest(_a, ["children", "className", "external"]);
1241
-
1198
+ className = _a.className,
1199
+ external = _a.external,
1200
+ restProps = __rest(_a, ["children", "className", "external"]);
1242
1201
  return jsx("a", Object.assign({}, restProps, {
1243
1202
  ref: ref,
1244
1203
  className: clsx('utrecht-link-social', className),
@@ -1268,9 +1227,8 @@ var ListSocialItem = function ListSocialItem(_ref2) {
1268
1227
 
1269
1228
  var Mark = /*#__PURE__*/forwardRef(function (_a, ref) {
1270
1229
  var children = _a.children,
1271
- className = _a.className,
1272
- restProps = __rest(_a, ["children", "className"]);
1273
-
1230
+ className = _a.className,
1231
+ restProps = __rest(_a, ["children", "className"]);
1274
1232
  return jsx("mark", Object.assign({
1275
1233
  ref: ref,
1276
1234
  className: clsx('utrecht-mark', className)
@@ -1282,10 +1240,9 @@ Mark.displayName = 'Mark';
1282
1240
 
1283
1241
  var NumberValue = /*#__PURE__*/forwardRef(function (_a, ref) {
1284
1242
  var children = _a.children,
1285
- className = _a.className,
1286
- value = _a.value,
1287
- restProps = __rest(_a, ["children", "className", "value"]);
1288
-
1243
+ className = _a.className,
1244
+ value = _a.value,
1245
+ restProps = __rest(_a, ["children", "className", "value"]);
1289
1246
  return jsx("data", Object.assign({
1290
1247
  value: typeof value === 'string' || typeof value === 'number' ? String(value) : undefined
1291
1248
  }, restProps, {
@@ -1299,9 +1256,8 @@ NumberValue.displayName = 'NumberValue';
1299
1256
 
1300
1257
  var OrderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
1301
1258
  var children = _a.children,
1302
- className = _a.className,
1303
- restProps = __rest(_a, ["children", "className"]);
1304
-
1259
+ className = _a.className,
1260
+ restProps = __rest(_a, ["children", "className"]);
1305
1261
  return jsx("ol", Object.assign({}, restProps, {
1306
1262
  ref: ref,
1307
1263
  className: clsx('utrecht-ordered-list', className)
@@ -1313,9 +1269,8 @@ OrderedList.displayName = 'OrderedList';
1313
1269
 
1314
1270
  var OrderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
1315
1271
  var children = _a.children,
1316
- className = _a.className,
1317
- restProps = __rest(_a, ["children", "className"]);
1318
-
1272
+ className = _a.className,
1273
+ restProps = __rest(_a, ["children", "className"]);
1319
1274
  return jsx("li", Object.assign({}, restProps, {
1320
1275
  ref: ref,
1321
1276
  className: clsx('utrecht-ordered-list__item', className)
@@ -1327,9 +1282,8 @@ OrderedListItem.displayName = 'OrderedListItem';
1327
1282
 
1328
1283
  var Page = /*#__PURE__*/forwardRef(function (_a, ref) {
1329
1284
  var children = _a.children,
1330
- className = _a.className,
1331
- restProps = __rest(_a, ["children", "className"]);
1332
-
1285
+ className = _a.className,
1286
+ restProps = __rest(_a, ["children", "className"]);
1333
1287
  return jsx("div", Object.assign({}, restProps, {
1334
1288
  ref: ref,
1335
1289
  className: clsx('utrecht-page', className)
@@ -1341,9 +1295,8 @@ Page.displayName = 'Page';
1341
1295
 
1342
1296
  var PageContent = /*#__PURE__*/forwardRef(function (_a, ref) {
1343
1297
  var children = _a.children,
1344
- className = _a.className,
1345
- restProps = __rest(_a, ["children", "className"]);
1346
-
1298
+ className = _a.className,
1299
+ restProps = __rest(_a, ["children", "className"]);
1347
1300
  return jsx("div", Object.assign({}, restProps, {
1348
1301
  ref: ref,
1349
1302
  className: clsx('utrecht-page-content', className)
@@ -1354,9 +1307,8 @@ var PageContent = /*#__PURE__*/forwardRef(function (_a, ref) {
1354
1307
  PageContent.displayName = 'PageContent';
1355
1308
  var PageContentMain = /*#__PURE__*/forwardRef(function (_a, ref) {
1356
1309
  var children = _a.children,
1357
- className = _a.className,
1358
- restProps = __rest(_a, ["children", "className"]);
1359
-
1310
+ className = _a.className,
1311
+ restProps = __rest(_a, ["children", "className"]);
1360
1312
  return jsx("main", Object.assign({}, restProps, {
1361
1313
  ref: ref,
1362
1314
  className: clsx('utrecht-page-content__main', className)
@@ -1368,9 +1320,8 @@ PageContentMain.displayName = 'PageContentMain';
1368
1320
 
1369
1321
  var PageFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
1370
1322
  var children = _a.children,
1371
- className = _a.className,
1372
- restProps = __rest(_a, ["children", "className"]);
1373
-
1323
+ className = _a.className,
1324
+ restProps = __rest(_a, ["children", "className"]);
1374
1325
  return jsx("footer", Object.assign({}, restProps, {
1375
1326
  ref: ref,
1376
1327
  className: clsx('utrecht-page-footer', className)
@@ -1382,9 +1333,8 @@ PageFooter.displayName = 'PageFooter';
1382
1333
 
1383
1334
  var PageHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
1384
1335
  var children = _a.children,
1385
- className = _a.className,
1386
- restProps = __rest(_a, ["children", "className"]);
1387
-
1336
+ className = _a.className,
1337
+ restProps = __rest(_a, ["children", "className"]);
1388
1338
  return jsx("header", Object.assign({}, restProps, {
1389
1339
  ref: ref,
1390
1340
  className: clsx('utrecht-page-header', className)
@@ -1396,11 +1346,10 @@ PageHeader.displayName = 'PageHeader';
1396
1346
 
1397
1347
  var Paragraph = /*#__PURE__*/forwardRef(function (_a, ref) {
1398
1348
  var children = _a.children,
1399
- className = _a.className,
1400
- lead = _a.lead,
1401
- small = _a.small,
1402
- restProps = __rest(_a, ["children", "className", "lead", "small"]);
1403
-
1349
+ className = _a.className,
1350
+ lead = _a.lead,
1351
+ small = _a.small,
1352
+ restProps = __rest(_a, ["children", "className", "lead", "small"]);
1404
1353
  return jsx("p", Object.assign({}, restProps, {
1405
1354
  ref: ref,
1406
1355
  className: clsx('utrecht-paragraph', lead && 'utrecht-paragraph--lead', small && 'utrecht-paragraph--small', className)
@@ -1416,9 +1365,8 @@ Paragraph.displayName = 'Paragraph';
1416
1365
 
1417
1366
  var PreHeading = /*#__PURE__*/forwardRef(function (_a, ref) {
1418
1367
  var children = _a.children,
1419
- className = _a.className,
1420
- restProps = __rest(_a, ["children", "className"]);
1421
-
1368
+ className = _a.className,
1369
+ restProps = __rest(_a, ["children", "className"]);
1422
1370
  return jsx("p", Object.assign({}, restProps, {
1423
1371
  ref: ref,
1424
1372
  className: clsx('utrecht-pre-heading', className)
@@ -1430,11 +1378,10 @@ PreHeading.displayName = 'PreHeading';
1430
1378
 
1431
1379
  var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
1432
1380
  var _a$appearance = _a.appearance,
1433
- appearance = _a$appearance === void 0 ? 'utrecht-radio-button' : _a$appearance,
1434
- invalid = _a.invalid,
1435
- className = _a.className,
1436
- restProps = __rest(_a, ["appearance", "invalid", "className"]);
1437
-
1381
+ appearance = _a$appearance === void 0 ? 'utrecht-radio-button' : _a$appearance,
1382
+ invalid = _a.invalid,
1383
+ className = _a.className,
1384
+ restProps = __rest(_a, ["appearance", "invalid", "className"]);
1438
1385
  return jsx("input", Object.assign({}, restProps, {
1439
1386
  ref: ref,
1440
1387
  type: "radio",
@@ -1448,12 +1395,11 @@ RadioButton.displayName = 'RadioButton';
1448
1395
 
1449
1396
  var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
1450
1397
  var invalid = _a.invalid,
1451
- required = _a.required,
1452
- className = _a.className,
1453
- noscript = _a.noscript,
1454
- children = _a.children,
1455
- restProps = __rest(_a, ["invalid", "required", "className", "noscript", "children"]);
1456
-
1398
+ required = _a.required,
1399
+ className = _a.className,
1400
+ noscript = _a.noscript,
1401
+ children = _a.children,
1402
+ restProps = __rest(_a, ["invalid", "required", "className", "noscript", "children"]);
1457
1403
  return jsx("select", Object.assign({}, restProps, {
1458
1404
  ref: ref,
1459
1405
  "aria-invalid": invalid || undefined,
@@ -1467,12 +1413,11 @@ var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
1467
1413
  Select.displayName = 'Select';
1468
1414
  var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
1469
1415
  var disabled = _a.disabled,
1470
- invalid = _a.invalid,
1471
- value = _a.value,
1472
- children = _a.children,
1473
- className = _a.className,
1474
- restProps = __rest(_a, ["disabled", "invalid", "value", "children", "className"]);
1475
-
1416
+ invalid = _a.invalid,
1417
+ value = _a.value,
1418
+ children = _a.children,
1419
+ className = _a.className,
1420
+ restProps = __rest(_a, ["disabled", "invalid", "value", "children", "className"]);
1476
1421
  return jsx("option", Object.assign({}, restProps, {
1477
1422
  ref: ref,
1478
1423
  disabled: disabled,
@@ -1484,11 +1429,11 @@ var SelectOption = /*#__PURE__*/forwardRef(function (_a, ref) {
1484
1429
  });
1485
1430
  SelectOption.displayName = 'SelectOption';
1486
1431
 
1432
+ // Do not pass `children` along with `restProps` and use _children as it's unused
1487
1433
  var Separator = /*#__PURE__*/forwardRef(function (_a, ref) {
1488
1434
  var className = _a.className;
1489
- _a.children;
1490
- var restProps = __rest(_a, ["className", "children"]);
1491
-
1435
+ _a.children;
1436
+ var restProps = __rest(_a, ["className", "children"]);
1492
1437
  return jsx("hr", Object.assign({}, restProps, {
1493
1438
  ref: ref,
1494
1439
  className: clsx('utrecht-separator', className)
@@ -1498,9 +1443,8 @@ Separator.displayName = 'Separator';
1498
1443
 
1499
1444
  var SkipLink = /*#__PURE__*/forwardRef(function (_a, ref) {
1500
1445
  var children = _a.children,
1501
- className = _a.className,
1502
- restProps = __rest(_a, ["children", "className"]);
1503
-
1446
+ className = _a.className,
1447
+ restProps = __rest(_a, ["children", "className"]);
1504
1448
  return jsx("p", {
1505
1449
  children: jsx("a", Object.assign({
1506
1450
  ref: ref
@@ -1515,11 +1459,10 @@ SkipLink.displayName = 'SkipLink';
1515
1459
 
1516
1460
  var SpotlightSection = /*#__PURE__*/forwardRef(function (_a, ref) {
1517
1461
  var aside = _a.aside,
1518
- children = _a.children,
1519
- className = _a.className,
1520
- type = _a.type,
1521
- restProps = __rest(_a, ["aside", "children", "className", "type"]);
1522
-
1462
+ children = _a.children,
1463
+ className = _a.className,
1464
+ type = _a.type,
1465
+ restProps = __rest(_a, ["aside", "children", "className", "type"]);
1523
1466
  var props = Object.assign(Object.assign({}, restProps), {
1524
1467
  ref: ref,
1525
1468
  className: clsx('utrecht-spotlight-section', {
@@ -1537,9 +1480,8 @@ SpotlightSection.displayName = 'SpotlightSection';
1537
1480
 
1538
1481
  var Strong = /*#__PURE__*/forwardRef(function (_a, ref) {
1539
1482
  var children = _a.children,
1540
- className = _a.className,
1541
- restProps = __rest(_a, ["children", "className"]);
1542
-
1483
+ className = _a.className,
1484
+ restProps = __rest(_a, ["children", "className"]);
1543
1485
  return jsx("strong", Object.assign({
1544
1486
  ref: ref,
1545
1487
  className: clsx('utrecht-emphasis', 'utrecht-emphasis--strong', className)
@@ -1551,9 +1493,8 @@ Strong.displayName = 'Strong';
1551
1493
 
1552
1494
  var Surface = /*#__PURE__*/forwardRef(function (_a, ref) {
1553
1495
  var children = _a.children,
1554
- className = _a.className,
1555
- restProps = __rest(_a, ["children", "className"]);
1556
-
1496
+ className = _a.className,
1497
+ restProps = __rest(_a, ["children", "className"]);
1557
1498
  return jsx("div", Object.assign({}, restProps, {
1558
1499
  ref: ref,
1559
1500
  className: clsx('utrecht-surface', className)
@@ -1565,9 +1506,8 @@ Surface.displayName = 'Surface';
1565
1506
 
1566
1507
  var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
1567
1508
  var children = _a.children,
1568
- className = _a.className,
1569
- restProps = __rest(_a, ["children", "className"]);
1570
-
1509
+ className = _a.className,
1510
+ restProps = __rest(_a, ["children", "className"]);
1571
1511
  return jsx("table", Object.assign({}, restProps, {
1572
1512
  ref: ref,
1573
1513
  className: clsx('utrecht-table', className)
@@ -1579,9 +1519,8 @@ Table.displayName = 'Table';
1579
1519
 
1580
1520
  var TableBody = /*#__PURE__*/forwardRef(function (_a, ref) {
1581
1521
  var children = _a.children,
1582
- className = _a.className,
1583
- restProps = __rest(_a, ["children", "className"]);
1584
-
1522
+ className = _a.className,
1523
+ restProps = __rest(_a, ["children", "className"]);
1585
1524
  return jsx("tbody", Object.assign({}, restProps, {
1586
1525
  ref: ref,
1587
1526
  className: clsx('utrecht-table__body', className)
@@ -1593,9 +1532,8 @@ TableBody.displayName = 'TableBody';
1593
1532
 
1594
1533
  var TableCaption = /*#__PURE__*/forwardRef(function (_a, ref) {
1595
1534
  var children = _a.children,
1596
- className = _a.className,
1597
- restProps = __rest(_a, ["children", "className"]);
1598
-
1535
+ className = _a.className,
1536
+ restProps = __rest(_a, ["children", "className"]);
1599
1537
  return jsx("caption", Object.assign({}, restProps, {
1600
1538
  ref: ref,
1601
1539
  className: clsx('utrecht-table__caption', className)
@@ -1607,9 +1545,8 @@ TableCaption.displayName = 'TableCaption';
1607
1545
 
1608
1546
  var TableCell = /*#__PURE__*/forwardRef(function (_a, ref) {
1609
1547
  var children = _a.children,
1610
- className = _a.className,
1611
- restProps = __rest(_a, ["children", "className"]);
1612
-
1548
+ className = _a.className,
1549
+ restProps = __rest(_a, ["children", "className"]);
1613
1550
  return jsx("td", Object.assign({}, restProps, {
1614
1551
  ref: ref,
1615
1552
  className: clsx('utrecht-table__cell', className)
@@ -1621,9 +1558,8 @@ TableCell.displayName = 'TableCell';
1621
1558
 
1622
1559
  var TableFooter = /*#__PURE__*/forwardRef(function (_a, ref) {
1623
1560
  var children = _a.children,
1624
- className = _a.className,
1625
- restProps = __rest(_a, ["children", "className"]);
1626
-
1561
+ className = _a.className,
1562
+ restProps = __rest(_a, ["children", "className"]);
1627
1563
  return jsx("tfoot", Object.assign({}, restProps, {
1628
1564
  ref: ref,
1629
1565
  className: clsx('utrecht-table__footer', className)
@@ -1635,9 +1571,8 @@ TableFooter.displayName = 'TableFooter';
1635
1571
 
1636
1572
  var TableHeader = /*#__PURE__*/forwardRef(function (_a, ref) {
1637
1573
  var children = _a.children,
1638
- className = _a.className,
1639
- restProps = __rest(_a, ["children", "className"]);
1640
-
1574
+ className = _a.className,
1575
+ restProps = __rest(_a, ["children", "className"]);
1641
1576
  return jsx("thead", Object.assign({}, restProps, {
1642
1577
  ref: ref,
1643
1578
  className: clsx('utrecht-table__header', className)
@@ -1649,9 +1584,8 @@ TableHeader.displayName = 'TableHeader';
1649
1584
 
1650
1585
  var TableHeaderCell = /*#__PURE__*/forwardRef(function (_a, ref) {
1651
1586
  var children = _a.children,
1652
- className = _a.className,
1653
- restProps = __rest(_a, ["children", "className"]);
1654
-
1587
+ className = _a.className,
1588
+ restProps = __rest(_a, ["children", "className"]);
1655
1589
  return jsx("th", Object.assign({}, restProps, {
1656
1590
  ref: ref,
1657
1591
  className: clsx('utrecht-table__header-cell', className)
@@ -1663,9 +1597,8 @@ TableHeaderCell.displayName = 'TableHeaderCell';
1663
1597
 
1664
1598
  var TableRow = /*#__PURE__*/forwardRef(function (_a, ref) {
1665
1599
  var children = _a.children,
1666
- className = _a.className,
1667
- restProps = __rest(_a, ["children", "className"]);
1668
-
1600
+ className = _a.className,
1601
+ restProps = __rest(_a, ["children", "className"]);
1669
1602
  return jsx("tr", Object.assign({}, restProps, {
1670
1603
  ref: ref,
1671
1604
  className: clsx('utrecht-table__row', className)
@@ -1677,12 +1610,11 @@ TableRow.displayName = 'TableRow';
1677
1610
 
1678
1611
  var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
1679
1612
  var disabled = _a.disabled,
1680
- invalid = _a.invalid,
1681
- readOnly = _a.readOnly,
1682
- required = _a.required,
1683
- className = _a.className,
1684
- restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
1685
-
1613
+ invalid = _a.invalid,
1614
+ readOnly = _a.readOnly,
1615
+ required = _a.required,
1616
+ className = _a.className,
1617
+ restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className"]);
1686
1618
  return jsx("textarea", Object.assign({}, restProps, {
1687
1619
  ref: ref,
1688
1620
  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 +1628,15 @@ Textarea.displayName = 'Textarea';
1696
1628
 
1697
1629
  var Textbox = /*#__PURE__*/forwardRef(function (_a, ref) {
1698
1630
  var disabled = _a.disabled,
1699
- invalid = _a.invalid,
1700
- readOnly = _a.readOnly,
1701
- required = _a.required,
1702
- className = _a.className,
1703
- _a$type = _a.type,
1704
- type = _a$type === void 0 ? 'text' : _a$type,
1705
- maxLength = _a.maxLength,
1706
- inputMode = _a.inputMode,
1707
- restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
1708
-
1631
+ invalid = _a.invalid,
1632
+ readOnly = _a.readOnly,
1633
+ required = _a.required,
1634
+ className = _a.className,
1635
+ _a$type = _a.type,
1636
+ type = _a$type === void 0 ? 'text' : _a$type,
1637
+ maxLength = _a.maxLength,
1638
+ inputMode = _a.inputMode,
1639
+ restProps = __rest(_a, ["disabled", "invalid", "readOnly", "required", "className", "type", "maxLength", "inputMode"]);
1709
1640
  return jsx("input", Object.assign({}, restProps, {
1710
1641
  ref: ref,
1711
1642
  type: type,
@@ -1722,9 +1653,8 @@ Textbox.displayName = 'Textbox';
1722
1653
 
1723
1654
  var URLValue = /*#__PURE__*/forwardRef(function (_a, ref) {
1724
1655
  var children = _a.children,
1725
- className = _a.className,
1726
- restProps = __rest(_a, ["children", "className"]);
1727
-
1656
+ className = _a.className,
1657
+ restProps = __rest(_a, ["children", "className"]);
1728
1658
  return jsx("bdi", Object.assign({
1729
1659
  translate: "no"
1730
1660
  }, restProps, {
@@ -1738,9 +1668,8 @@ URLValue.displayName = 'URLValue';
1738
1668
 
1739
1669
  var UnorderedList = /*#__PURE__*/forwardRef(function (_a, ref) {
1740
1670
  var children = _a.children,
1741
- className = _a.className,
1742
- restProps = __rest(_a, ["children", "className"]);
1743
-
1671
+ className = _a.className,
1672
+ restProps = __rest(_a, ["children", "className"]);
1744
1673
  return jsx("ul", Object.assign({
1745
1674
  role: "list"
1746
1675
  }, restProps, {
@@ -1754,9 +1683,8 @@ UnorderedList.displayName = 'UnorderedList';
1754
1683
 
1755
1684
  var UnorderedListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
1756
1685
  var children = _a.children,
1757
- className = _a.className,
1758
- restProps = __rest(_a, ["children", "className"]);
1759
-
1686
+ className = _a.className,
1687
+ restProps = __rest(_a, ["children", "className"]);
1760
1688
  return jsx("li", Object.assign({}, restProps, {
1761
1689
  ref: ref,
1762
1690
  className: clsx('utrecht-unordered-list__item', className)