@entur/datepicker 11.2.1-beta.1 → 11.2.1-beta.4

package/dist/datepicker.esm.js

@@ -1,759 +1,780 @@
-import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from "@entur/utils";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState } from "react";
-import { useDateFieldState, useDatePickerState, useTimeFieldState } from "@react-stately/datepicker";
-import { useDateSegment, useDateField, useDatePicker, useTimeField } from "@react-aria/datepicker";
-import { useLocale, I18nProvider } from "@react-aria/i18n";
-import classNames from "classnames";
-import { BaseFormControl, useVariant, useInputGroupContext, isFilled, TextField } from "@entur/form";
-import { toCalendarDateTime, CalendarDate, Time, getLocalTimeZone, GregorianCalendar, toTime, now, toZoned, today, toCalendarDate, startOfWeek, startOfYear, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, getWeeksInMonth, parseTime } from "@internationalized/date";
-import { CalendarDate as CalendarDate2, CalendarDateTime as CalendarDateTime2, Time as Time2, ZonedDateTime as ZonedDateTime2 } from "@internationalized/date";
-import { useCalendarCell, useCalendarGrid, useCalendar } from "@react-aria/calendar";
-import { useCalendarState } from "@react-stately/calendar";
-import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon, ClockIcon } from "@entur/icons";
-import { useButton } from "@react-aria/button";
-import { IconButton } from "@entur/button";
-import { VisuallyHidden } from "@entur/a11y";
-import { useFloating, offset, flip, shift, autoUpdate } from "@floating-ui/react-dom";
-import FocusLock from "react-focus-lock";
-import { space, zIndexes } from "@entur/tokens";
-import { Modal } from "@entur/modal";
-const FieldSegment = ({ segment, state, ...rest }) => {
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...segmentProps,
-      ref,
-      className: classNames("eds-date-and-time-field__segment", {
-        "eds-date-and-time-field__segment--placeholder": segment.isPlaceholder,
-        "eds-date-and-time-field__segment--dot-separator": segment.text === "." || segment.text === ":"
-      }),
-      tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex,
-      ...rest,
-      children: segment.text
+import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import React, { useRef, useEffect, useState } from 'react';
+import { useDateFieldState, useDatePickerState, useTimeFieldState } from '@react-stately/datepicker';
+import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@react-aria/datepicker';
+import { useLocale, I18nProvider } from '@react-aria/i18n';
+import classNames from 'classnames';
+import { BaseFormControl, useVariant, useInputGroupContext, isFilled, TextField } from '@entur/form';
+import { CalendarDate, Time, getLocalTimeZone, GregorianCalendar, toCalendarDateTime, toTime, now, toZoned, today, toCalendarDate, startOfWeek, startOfYear, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, getWeeksInMonth, parseTime } from '@internationalized/date';
+export { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from '@internationalized/date';
+import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
+import { useCalendarState } from '@react-stately/calendar';
+import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon, ClockIcon } from '@entur/icons';
+import { useButton } from '@react-aria/button';
+import { IconButton } from '@entur/button';
+import { VisuallyHidden } from '@entur/a11y';
+import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
+import FocusLock from 'react-focus-lock';
+import { space, zIndexes } from '@entur/tokens';
+import { Modal } from '@entur/modal';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  );
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var _excluded$b = ["segment", "state"];
+var FieldSegment = function FieldSegment(_ref) {
+  var segment = _ref.segment,
+    state = _ref.state,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var ref = useRef(null);
+  var _useDateSegment = useDateSegment(segment, state, ref),
+    segmentProps = _useDateSegment.segmentProps;
+  return React.createElement("div", _extends({}, segmentProps, {
+    ref: ref,
+    className: classNames('eds-date-and-time-field__segment', {
+      'eds-date-and-time-field__segment--placeholder': segment.isPlaceholder,
+      'eds-date-and-time-field__segment--dot-separator': segment.text === '.' || segment.text === ':'
+    }),
+    tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
+  }, rest), segment.text);
 };
-const nativeDateToDateTime = (date, timeZone, offset2) => {
+
+var nativeDateToDateTime = function nativeDateToDateTime(date, timeZone, offset) {
   if (timeZone) {
-    if (offset2) {
-      return new ZonedDateTime(
-        date.getFullYear(),
-        date.getMonth() + 1,
-        date.getDate(),
-        timeZone,
-        offset2,
-        date.getHours(),
-        date.getMinutes(),
-        date.getSeconds(),
-        date.getMilliseconds()
-      );
+    if (offset) {
+      return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
     }
     return parseAbsolute(date.toISOString(), timeZone);
   }
-  return new CalendarDateTime(
-    date.getFullYear(),
-    date.getMonth() + 1,
-    date.getDate(),
-    date.getHours(),
-    date.getMinutes(),
-    date.getSeconds(),
-    date.getMilliseconds()
-  );
+  return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
 };
-function nativeDateToDateValue(date, noTimeOnlyDate = false, timeZone, offset2) {
+/**
+ * Tar inn et JS Date-objekt og returnerer et av DateValue-objektene fra @internationalized/date-pakken
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
+ * @param {boolean} noTimeOnlyDate Hvis tidspunktet er irrelevant kan denne settes til true, da får man et CalendarDate-objekt uten tidspunkt tilbake
+ * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
+ * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
+ * @returns {CalendarDateTime | ZonedDateTime | CalendarDate | null} et av DateValue-objektene med verdier fra date eller null
+ */
+function nativeDateToDateValue(date, noTimeOnlyDate, timeZone, offset) {
+  if (noTimeOnlyDate === void 0) {
+    noTimeOnlyDate = false;
+  }
   if (date === null) return null;
-  if (noTimeOnlyDate)
-    return new CalendarDate(
-      date.getFullYear(),
-      date.getMonth() + 1,
-      date.getDate()
-    );
-  return nativeDateToDateTime(date, timeZone, offset2);
+  if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  return nativeDateToDateTime(date, timeZone, offset);
 }
-function nativeDateToTimeValue(date, noDateOnlyTime = false, timeZone, offset2) {
+/**
+ * Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
+ * @param {Date | null} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
+ * @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
+ * @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
+ * @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
+ * @returns {Time | CalendarDateTime | ZonedDateTime | null} et av TimeValue-objektene med verdier fra date eller null
+ */
+function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
+  if (noDateOnlyTime === void 0) {
+    noDateOnlyTime = false;
+  }
   if (date === null) return null;
-  if (noDateOnlyTime)
-    return new Time(
-      date.getHours(),
-      date.getMinutes(),
-      date.getSeconds(),
-      date.getMilliseconds()
-    );
-  return nativeDateToDateTime(date, timeZone, offset2);
+  if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+  return nativeDateToDateTime(date, timeZone, offset);
 }
+/**
+ * Tar inn et av Date- eller TimeValue-objektene fra \@internationalized/date-pakken og returnerer et JS Date-objekt
+ * @param {DateValue | TimeValue | null} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
+ * @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
+ * @returns {Date | null} et Date-objekt med verdier fra time eller null
+ */
 function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
   if (value === null) return null;
-  if (!("day" in value)) {
-    const date = /* @__PURE__ */ new Date();
+  // type is Time
+  if (!('day' in value)) {
+    var date = new Date();
     date.setHours(value.hour);
     date.setMinutes(value.minute);
     date.setSeconds(value.second);
     date.setMilliseconds(value.millisecond);
     return date;
   }
-  if (!("hour" in value)) {
-    return value.toDate(timeZoneForCalendarDateTime ?? getLocalTimeZone());
+  // type is CalendarDate
+  if (!('hour' in value)) {
+    return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
   }
-  if (!("timeZone" in value)) {
-    if (timeZoneForCalendarDateTime)
-      return value.toDate(timeZoneForCalendarDateTime);
+  // type is CalendarDateTime
+  if (!('timeZone' in value)) {
+    if (timeZoneForCalendarDateTime) return value.toDate(timeZoneForCalendarDateTime);
     return value.toDate(getLocalTimeZone());
   }
+  // type is ZonedDateTime
   return value.toDate();
 }
-const createCalendar = (identifier = "gregory") => {
+var createCalendar = function createCalendar(identifier) {
+  if (identifier === void 0) {
+    identifier = 'gregory';
+  }
   switch (identifier) {
-    case "gregory":
+    case 'gregory':
       return new GregorianCalendar();
     default:
-      throw new Error(`Unsupported calendar ${identifier}`);
+      throw new Error("Unsupported calendar " + identifier);
   }
 };
-const ariaLabelIfNorwegian = (norwegianAriaLabel, locale, propsCollection) => {
-  if (locale.toLowerCase() !== "no-no") return propsCollection["aria-label"];
+var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, locale, propsCollection) {
+  if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
   return norwegianAriaLabel;
 };
-const lastMillisecondOfDay = (dateValue) => toCalendarDateTime(dateValue.add({ days: 1 })).add({
-  milliseconds: -1
-});
-const convertValueToType = ({
-  value,
-  type,
-  timezone = "Europe/Oslo"
-}) => {
+var lastMillisecondOfDay = function lastMillisecondOfDay(dateValue) {
+  return toCalendarDateTime(dateValue.add({
+    days: 1
+  })).add({
+    milliseconds: -1
+  });
+};
+var convertValueToType = function convertValueToType(_ref) {
+  var value = _ref.value,
+    type = _ref.type,
+    _ref$timezone = _ref.timezone,
+    timezone = _ref$timezone === void 0 ? 'Europe/Oslo' : _ref$timezone;
   if (value === null) return null;
   switch (type) {
-    case "CalendarDate":
-      if (!("day" in value)) return today(timezone);
+    case 'CalendarDate':
+      if (!('day' in value)) return today(timezone);
       return toCalendarDate(value);
-    case "CalendarDateTime":
-      if (!("day" in value)) return toCalendarDateTime(today(timezone), value);
+    case 'CalendarDateTime':
+      if (!('day' in value)) return toCalendarDateTime(today(timezone), value);
       return toCalendarDateTime(value);
-    case "ZonedDateTime":
-      if (!("day" in value))
-        return toZoned(toCalendarDateTime(today(timezone), value), timezone);
+    case 'ZonedDateTime':
+      if (!('day' in value)) return toZoned(toCalendarDateTime(today(timezone), value), timezone);
       return toZoned(value, timezone);
-    case "Time":
-      if (!("hour" in value)) return toTime(now(timezone));
-      if (!("day" in value)) return value;
+    case 'Time':
+      if (!('hour' in value)) return toTime(now(timezone));
+      if (!('day' in value)) return value;
       return toTime(value);
     default:
       return value;
   }
 };
-const modulo = (a, b) => (a % b + b) % b;
-const focusSegment = (ref, segment) => {
+var modulo = function modulo(a, b) {
+  return (a % b + b) % b;
+};
+var focusSegment = function focusSegment(ref, segment) {
   if (ref.current) {
-    const segments = ref.current.querySelectorAll(
-      ".eds-date-and-time-field__segment"
-    );
-    const firstSegment = segments[0];
-    const lastSegment = segments[segments.length - 1];
+    var segments = ref.current.querySelectorAll('.eds-date-and-time-field__segment');
+    var firstSegment = segments[0];
+    var lastSegment = segments[segments.length - 1];
     switch (segment) {
-      case "first":
+      case 'first':
         return firstSegment.focus();
-      case "last":
+      case 'last':
         return lastSegment.focus();
     }
   }
 };
+/** Based on code from https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php */
 function getWeekNumberForDate(date) {
   if (date === null) return -1;
-  const calendarDate = convertValueToType({
+  var calendarDate = convertValueToType({
     value: date,
-    type: "CalendarDate"
+    type: 'CalendarDate'
+  });
+  var firstDayOfWeek = startOfWeek(calendarDate, 'no-NO');
+  var thursdayOfWeek = firstDayOfWeek.add({
+    days: 3
   });
-  const firstDayOfWeek = startOfWeek(calendarDate, "no-NO");
-  const thursdayOfWeek = firstDayOfWeek.add({ days: 3 });
-  const firstDayOfYearForThursday = startOfYear(thursdayOfWeek);
-  const weekNumber = Math.ceil(
-    (thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7
-  );
+  var firstDayOfYearForThursday = startOfYear(thursdayOfWeek);
+  var weekNumber = Math.ceil((thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7);
   return weekNumber;
 }
-function handleOnChange({
-  value,
-  selectedDate,
-  forcedReturnType,
-  onChange
-}) {
-  if (forcedReturnType !== void 0 || !selectedDate) {
-    return onChange?.(
-      convertValueToType({
-        value,
-        type: forcedReturnType ?? "ZonedDateTime",
-        timezone: value !== null && "timezone" in value ? value.timezone : void 0
-      })
-    );
+function handleOnChange(_ref2) {
+  var value = _ref2.value,
+    selectedDate = _ref2.selectedDate,
+    forcedReturnType = _ref2.forcedReturnType,
+    onChange = _ref2.onChange;
+  if (forcedReturnType !== undefined || !selectedDate) {
+    return onChange == null ? void 0 : onChange(convertValueToType({
+      value: value,
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
+      timezone: value !== null && 'timezone' in value ? value.timezone : undefined
+    }));
   }
-  onChange?.(value);
+  onChange == null || onChange(value);
 }
-const DateField = ({
-  selectedDate,
-  onChange,
-  label,
-  locale: customLocale,
-  showTimeZone,
-  showTime,
-  granularity = showTime ? "minute" : "day",
-  disabled,
-  readOnly,
-  isDisabled,
-  variant,
-  feedback,
-  validationVariant = "negative",
-  validationFeedback = "Ugyldig dato",
-  labelTooltip,
-  minDate,
-  maxDate,
-  forcedReturnType,
-  style,
-  className,
-  labelProps: parentLabelProps,
-  append,
-  prepend,
-  onValidate,
-  dateFieldRef: ref,
-  ...rest
-}) => {
-  const { locale } = useLocale();
-  const _props = {
-    ...rest,
-    label,
-    locale: customLocale ?? locale,
-    createCalendar,
+
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "readOnly", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "forcedReturnType", "style", "className", "labelProps", "append", "prepend", "onValidate", "dateFieldRef"];
+var DateField = function DateField(_ref) {
+  var selectedDate = _ref.selectedDate,
+    _onChange = _ref.onChange,
+    label = _ref.label,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    showTime = _ref.showTime,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    isDisabled = _ref.isDisabled,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    _ref$validationVarian = _ref.validationVariant,
+    validationVariant = _ref$validationVarian === void 0 ? 'negative' : _ref$validationVarian,
+    _ref$validationFeedba = _ref.validationFeedback,
+    validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
+    labelTooltip = _ref.labelTooltip,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    forcedReturnType = _ref.forcedReturnType,
+    style = _ref.style,
+    className = _ref.className,
+    parentLabelProps = _ref.labelProps,
+    append = _ref.append,
+    prepend = _ref.prepend,
+    onValidate = _ref.onValidate,
+    ref = _ref.dateFieldRef,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var _props = _extends({}, rest, {
+    label: label,
+    locale: customLocale != null ? customLocale : locale,
+    createCalendar: createCalendar,
     value: selectedDate,
-    onChange: (value) => handleOnChange({
-      value,
-      selectedDate,
-      forcedReturnType,
-      onChange
-    }),
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
     hideTimeZone: !showTimeZone,
-    granularity,
+    granularity: granularity,
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
-    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
     isDisabled: isDisabled || disabled || readOnly,
     shouldForceLeadingZeros: true
-  };
-  const state = useDateFieldState(_props);
-  const dateFieldRef = useRef(null);
-  const { labelProps, fieldProps } = useDateField(_props, state, dateFieldRef);
-  useEffect(() => onValidate?.(!state.isInvalid), [state.isInvalid]);
-  const id = useRandomId("datefield");
-  return /* @__PURE__ */ jsx(
-    ConditionalWrapper,
-    {
-      condition: customLocale !== void 0,
-      wrapper: (child) => /* @__PURE__ */ jsx(I18nProvider, { locale: customLocale, children: child }),
-      children: /* @__PURE__ */ jsx(
-        BaseFormControl,
-        {
-          append,
-          ariaAlertOnFeedback: true,
-          className: classNames("eds-datefield", className, {
-            "eds-datefield--has-tooltip": labelTooltip !== void 0
-          }),
-          disabled: isDisabled || disabled,
-          readOnly,
-          disableLabelAnimation: true,
-          feedback: feedback ?? (state.validationState === "invalid" ? validationFeedback : void 0),
-          label,
-          labelId: id,
-          labelProps: parentLabelProps ?? labelProps,
-          labelTooltip,
-          prepend,
-          ref: mergeRefs(ref, dateFieldRef),
-          style,
-          variant: variant ?? (state.isInvalid ? validationVariant : void 0),
-          ...fieldProps,
-          children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(FieldSegment, { segment, state }, i))
-        }
-      )
+  });
+  var state = useDateFieldState(_props);
+  var dateFieldRef = useRef(null);
+  var _useDateField = useDateField(_props, state, dateFieldRef),
+    labelProps = _useDateField.labelProps,
+    fieldProps = _useDateField.fieldProps;
+  useEffect(function () {
+    return onValidate == null ? void 0 : onValidate(!state.isInvalid);
+  }, [state.isInvalid]);
+  var id = useRandomId('datefield');
+  return React.createElement(ConditionalWrapper, {
+    condition: customLocale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: customLocale
+      }, child);
     }
-  );
+  }, React.createElement(BaseFormControl, _extends({
+    append: append,
+    ariaAlertOnFeedback: true,
+    className: classNames('eds-datefield', className, {
+      'eds-datefield--has-tooltip': labelTooltip !== undefined
+    }),
+    disabled: isDisabled || disabled,
+    readOnly: readOnly,
+    disableLabelAnimation: true,
+    feedback: feedback != null ? feedback : state.validationState === 'invalid' ? validationFeedback : undefined,
+    label: label,
+    labelId: id,
+    labelProps: parentLabelProps != null ? parentLabelProps : labelProps,
+    labelTooltip: labelTooltip,
+    prepend: prepend,
+    ref: mergeRefs(ref, dateFieldRef),
+    style: style,
+    variant: variant != null ? variant : state.isInvalid ? validationVariant : undefined
+  }, fieldProps), state.segments.map(function (segment, i) {
+    return React.createElement(FieldSegment, {
+      segment: segment,
+      state: state,
+      key: i
+    });
+  })));
 };
-const CalendarButton = ({
-  children,
-  className,
-  style,
-  ...props
-}) => {
-  const ref = useRef(null);
-  const { buttonProps } = useButton(props, ref);
-  return /* @__PURE__ */ jsx(IconButton, { ...buttonProps, ref, className, style, children });
+
+var _excluded$9 = ["children", "className", "style"];
+var CalendarButton = function CalendarButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var ref = useRef(null);
+  var _useButton = useButton(props, ref),
+    buttonProps = _useButton.buttonProps;
+  return React.createElement(IconButton, _extends({}, buttonProps, {
+    ref: ref,
+    className: className,
+    style: style
+  }), children);
 };
-const CalendarCell = ({
-  state,
-  date,
-  onSelectedCellClick = () => {
-    return;
-  },
-  onCellClick = () => {
-    return;
-  },
-  weekNumberString,
-  classNameForDate,
-  ariaLabelForDate,
-  ...rest
-}) => {
-  const cellRef = useRef(null);
-  const {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({ date }, state, cellRef);
-  const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date) ?? ""}`;
-  const cellCanBeSelected = !(isOutsideVisibleRange || isDisabled || isUnavailable);
-  return /* @__PURE__ */ jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...buttonProps,
-      "aria-label": ariaLabel,
-      "aria-hidden": isOutsideVisibleRange,
-      ref: cellRef,
-      hidden: isOutsideVisibleRange,
-      className: classNames("eds-datepicker__calendar__grid__cell", {
-        [classNameForDate?.(date) ?? ""]: !isOutsideVisibleRange,
-        "eds-datepicker__calendar__grid__cell--selected": isSelected,
-        "eds-datepicker__calendar__grid__cell--disabled": isDisabled || isUnavailable,
-        "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange,
-        "eds-datepicker__calendar__grid__cell--today": isEqualDay(
-          date,
-          now(state.timeZone ?? getLocalTimeZone())
-        )
-      }),
-      ...rest,
-      onClick: (e) => {
-        buttonProps.onClick && buttonProps.onClick(e);
+
+var _excluded$8 = ["state", "date", "onSelectedCellClick", "onCellClick", "weekNumberString", "classNameForDate", "ariaLabelForDate"];
+var CalendarCell = function CalendarCell(_ref) {
+  var _ariaLabelForDate, _classNameForDate, _state$timeZone, _classNames;
+  var state = _ref.state,
+    date = _ref.date,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    _ref$onCellClick = _ref.onCellClick,
+    onCellClick = _ref$onCellClick === void 0 ? function () {
+      return;
+    } : _ref$onCellClick,
+    weekNumberString = _ref.weekNumberString,
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  var cellRef = useRef(null);
+  var _useCalendarCell = useCalendarCell({
+      date: date
+    }, state, cellRef),
+    cellProps = _useCalendarCell.cellProps,
+    buttonProps = _useCalendarCell.buttonProps,
+    isSelected = _useCalendarCell.isSelected,
+    isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
+    isDisabled = _useCalendarCell.isDisabled,
+    isUnavailable = _useCalendarCell.isUnavailable,
+    formattedDate = _useCalendarCell.formattedDate;
+  var ariaLabel = "" + buttonProps['aria-label'] + weekNumberString + " " + ((_ariaLabelForDate = ariaLabelForDate == null ? void 0 : ariaLabelForDate(date)) != null ? _ariaLabelForDate : '');
+  var cellCanBeSelected = !(isOutsideVisibleRange || isDisabled || isUnavailable);
+  return React.createElement("td", _extends({}, cellProps, {
+    className: "eds-datepicker__calendar__grid__cell__td"
+  }), React.createElement("div", _extends({}, buttonProps, {
+    "aria-label": ariaLabel,
+    "aria-hidden": isOutsideVisibleRange,
+    ref: cellRef,
+    hidden: isOutsideVisibleRange,
+    className: classNames('eds-datepicker__calendar__grid__cell', (_classNames = {}, _classNames[(_classNameForDate = classNameForDate == null ? void 0 : classNameForDate(date)) != null ? _classNameForDate : ''] = !isOutsideVisibleRange, _classNames['eds-datepicker__calendar__grid__cell--selected'] = isSelected, _classNames['eds-datepicker__calendar__grid__cell--disabled'] = isDisabled || isUnavailable, _classNames['eds-datepicker__calendar__grid__cell--outside-month'] = isOutsideVisibleRange, _classNames['eds-datepicker__calendar__grid__cell--today'] = isEqualDay(date, now((_state$timeZone = state.timeZone) != null ? _state$timeZone : getLocalTimeZone())), _classNames))
+  }, rest, {
+    onClick: function onClick(e) {
+      buttonProps.onClick && buttonProps.onClick(e);
+      // Used to force close calendar on select
+      isSelected && onSelectedCellClick();
+      cellCanBeSelected && onCellClick();
+    },
+    onKeyUp: function onKeyUp(e) {
+      buttonProps.onKeyUp && buttonProps.onKeyUp(e);
+      if (e.key === 'Enter') {
+        // Used to force close calendar on select
         isSelected && onSelectedCellClick();
         cellCanBeSelected && onCellClick();
-      },
-      onKeyUp: (e) => {
-        buttonProps.onKeyUp && buttonProps.onKeyUp(e);
-        if (e.key === "Enter") {
-          isSelected && onSelectedCellClick();
-          cellCanBeSelected && onCellClick();
-        }
-      },
-      children: formattedDate
+      }
     }
-  ) });
+  }), formattedDate));
 };
-const CalendarGrid = ({
-  state,
-  navigationDescription,
-  onSelectedCellClick = () => {
-    return;
-  },
-  onCellClick = () => {
-    return;
-  },
-  showWeekNumbers,
-  weekNumberHeader,
-  classNameForDate,
-  ariaLabelForDate,
-  ...rest
-}) => {
-  const calendarGridId = useRandomId("eds-calendar");
-  const { locale } = useLocale();
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(rest, state);
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  const weeksArray = Array.from(Array(weeksInMonth).keys());
-  const weekDaysMapped = () => {
-    if (locale.toLowerCase().includes("no"))
-      return ["ma", "ti", "on", "to", "fr", "lø", "sø"];
-    if (locale.toLowerCase().includes("en")) {
-      if (weekDays[0] === "M")
-        return ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-      if (weekDays[0] === "S")
-        return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "onCellClick", "showWeekNumbers", "weekNumberHeader", "classNameForDate", "ariaLabelForDate"];
+var CalendarGrid = function CalendarGrid(_ref) {
+  var state = _ref.state,
+    navigationDescription = _ref.navigationDescription,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    _ref$onCellClick = _ref.onCellClick,
+    onCellClick = _ref$onCellClick === void 0 ? function () {
+      return;
+    } : _ref$onCellClick,
+    showWeekNumbers = _ref.showWeekNumbers,
+    weekNumberHeader = _ref.weekNumberHeader,
+    classNameForDate = _ref.classNameForDate,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var calendarGridId = useRandomId('eds-calendar');
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var _useCalendarGrid = useCalendarGrid(rest, state),
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
+  var weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  var weeksArray = Array.from(Array(weeksInMonth).keys());
+  var weekDaysMapped = function weekDaysMapped() {
+    if (locale.toLowerCase().includes('no')) return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
+    if (locale.toLowerCase().includes('en')) {
+      if (weekDays[0] === 'M') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+      if (weekDays[0] === 'S') return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
     }
-    return weekDays.map((day) => day.toLowerCase());
+    return weekDays.map(function (day) {
+      return day.toLowerCase();
+    });
   };
-  const getNavigationDescription = () => {
+  var getNavigationDescription = function getNavigationDescription() {
     if (navigationDescription) return navigationDescription;
-    if (locale.toLowerCase().includes("en"))
-      return "Use the arrow keys to navigate between dates";
-    return "Bruk piltastene til å navigere mellom datoer";
+    if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
+    return 'Bruk piltastene til å navigere mellom datoer';
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "table",
-      {
-        ...gridProps,
-        cellSpacing: "0",
-        className: "eds-datepicker__calendar__grid",
-        children: [
-          /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxs("tr", { children: [
-            showWeekNumbers && /* @__PURE__ */ jsx("th", { className: "eds-datepicker__calendar__grid__weeknumber-header", children: weekNumberHeader }),
-            weekDaysMapped().map((day) => /* @__PURE__ */ jsx("th", { children: day }, day))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeksArray.map((weekIndex) => {
-            const weekNumber = getWeekNumberForDate(
-              state.getDatesInWeek(weekIndex)[0]
-            );
-            return /* @__PURE__ */ jsxs("tr", { children: [
-              showWeekNumbers && /* @__PURE__ */ jsx(
-                "th",
-                {
-                  "aria-hidden": true,
-                  className: "eds-datepicker__calendar__grid__weeknumber",
-                  children: weekNumber
-                }
-              ),
-              state.getDatesInWeek(weekIndex).map(
-                (date, i) => date ? /* @__PURE__ */ jsx(
-                  CalendarCell,
-                  {
-                    state,
-                    date,
-                    "aria-describedby": calendarGridId + "description",
-                    weekNumberString: showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "",
-                    onSelectedCellClick,
-                    onCellClick,
-                    classNameForDate,
-                    ariaLabelForDate
-                  },
-                  `${date.month}.${date.day}`
-                ) : /* @__PURE__ */ jsx("td", {}, i)
-              )
-            ] }, weekIndex);
-          }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
-  ] });
+  return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
+    cellSpacing: "0",
+    className: "eds-datepicker__calendar__grid"
+  }), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, showWeekNumbers && React.createElement("th", {
+    className: "eds-datepicker__calendar__grid__weeknumber-header"
+  }, weekNumberHeader), weekDaysMapped().map(function (day) {
+    return React.createElement("th", {
+      key: day
+    }, day);
+  }))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
+    var weekNumber = getWeekNumberForDate(state.getDatesInWeek(weekIndex)[0]);
+    return React.createElement("tr", {
+      key: weekIndex
+    }, showWeekNumbers && React.createElement("th", {
+      "aria-hidden": true,
+      className: "eds-datepicker__calendar__grid__weeknumber"
+    }, weekNumber), state.getDatesInWeek(weekIndex).map(function (date, i) {
+      return date ? React.createElement(CalendarCell, {
+        key: date.month + "." + date.day,
+        state: state,
+        date: date,
+        "aria-describedby": calendarGridId + 'description',
+        weekNumberString: showWeekNumbers ? ", " + weekNumberHeader + " " + weekNumber + "," : '',
+        onSelectedCellClick: onSelectedCellClick,
+        onCellClick: onCellClick,
+        classNameForDate: classNameForDate,
+        ariaLabelForDate: ariaLabelForDate
+      }) : React.createElement("td", {
+        key: i
+      });
+    }));
+  }))), React.createElement(VisuallyHidden, {
+    id: calendarGridId + 'description'
+  }, getNavigationDescription()));
 };
-const Calendar = ({
-  locale: localOverride,
-  ...rest
-}) => {
-  const props = { isDisabled: rest.disabled, ...rest };
-  const { locale } = useLocale();
-  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(CalendarBase, { ...props }) });
+
+var _excluded$6 = ["locale"],
+  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "forcedReturnType", "style", "className", "navigationDescription", "onSelectedCellClick", "onCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
+var Calendar = function Calendar(_ref) {
+  var localOverride = _ref.locale,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var props = _extends({
+    isDisabled: rest.disabled
+  }, rest);
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  return React.createElement(I18nProvider, {
+    locale: localOverride != null ? localOverride : locale
+  }, React.createElement(CalendarBase, _extends({}, props)));
 };
-const CalendarBase = ({
-  selectedDate,
-  onChange,
-  minDate,
-  maxDate,
-  showWeekNumbers = false,
-  weekNumberHeader = "uke",
-  forcedReturnType,
-  style,
-  className,
-  navigationDescription,
-  onSelectedCellClick = () => {
-    return;
-  },
-  onCellClick = () => {
-    return;
-  },
-  classNameForDate,
-  ariaLabelForDate,
-  calendarRef,
-  ...rest
-}) => {
-  const { locale } = useLocale();
-  const _props = {
-    ...rest,
+var CalendarBase = function CalendarBase(_ref2) {
+  var selectedDate = _ref2.selectedDate,
+    _onChange = _ref2.onChange,
+    minDate = _ref2.minDate,
+    maxDate = _ref2.maxDate,
+    _ref2$showWeekNumbers = _ref2.showWeekNumbers,
+    showWeekNumbers = _ref2$showWeekNumbers === void 0 ? false : _ref2$showWeekNumbers,
+    _ref2$weekNumberHeade = _ref2.weekNumberHeader,
+    weekNumberHeader = _ref2$weekNumberHeade === void 0 ? 'uke' : _ref2$weekNumberHeade,
+    forcedReturnType = _ref2.forcedReturnType,
+    style = _ref2.style,
+    className = _ref2.className,
+    navigationDescription = _ref2.navigationDescription,
+    _ref2$onSelectedCellC = _ref2.onSelectedCellClick,
+    onSelectedCellClick = _ref2$onSelectedCellC === void 0 ? function () {
+      return;
+    } : _ref2$onSelectedCellC,
+    _ref2$onCellClick = _ref2.onCellClick,
+    onCellClick = _ref2$onCellClick === void 0 ? function () {
+      return;
+    } : _ref2$onCellClick,
+    classNameForDate = _ref2.classNameForDate,
+    ariaLabelForDate = _ref2.ariaLabelForDate,
+    calendarRef = _ref2.calendarRef,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  var _useLocale2 = useLocale(),
+    locale = _useLocale2.locale;
+  var _props = _extends({}, rest, {
     value: selectedDate,
-    onChange: (value) => handleOnChange({
-      value,
-      selectedDate,
-      forcedReturnType,
-      onChange
-    }),
-    locale,
-    createCalendar,
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: forcedReturnType,
+        onChange: _onChange
+      });
+    },
+    locale: locale,
+    createCalendar: createCalendar,
     minValue: minDate,
     maxValue: maxDate
-  };
-  const state = useCalendarState(_props);
-  const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(_props, state);
-  useEffect(
-    () => rest.onValidate?.(!state.isValueInvalid),
-    [state.isValueInvalid]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...calendarProps,
-      ref: calendarRef,
-      className: classNames("eds-datepicker__calendar", className),
-      style,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "eds-datepicker__calendar__header", children: [
-          /* @__PURE__ */ jsx(
-            CalendarButton,
-            {
-              ...prevButtonProps,
-              "aria-label": ariaLabelIfNorwegian(
-                "Forrige måned",
-                locale,
-                prevButtonProps
-              ),
-              children: /* @__PURE__ */ jsx(LeftArrowIcon, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { children: title }),
-          /* @__PURE__ */ jsx(
-            CalendarButton,
-            {
-              ...nextButtonProps,
-              "aria-label": ariaLabelIfNorwegian(
-                "Neste måned",
-                locale,
-                nextButtonProps
-              ),
-              children: /* @__PURE__ */ jsx(RightArrowIcon, { size: 20 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          CalendarGrid,
-          {
-            ...rest,
-            state,
-            navigationDescription,
-            onSelectedCellClick,
-            onCellClick,
-            classNameForDate,
-            ariaLabelForDate,
-            showWeekNumbers,
-            weekNumberHeader
-          }
-        )
-      ]
-    }
-  );
+  });
+  var state = useCalendarState(_props);
+  var _useCalendar = useCalendar(_props, state),
+    calendarProps = _useCalendar.calendarProps,
+    prevButtonProps = _useCalendar.prevButtonProps,
+    nextButtonProps = _useCalendar.nextButtonProps,
+    title = _useCalendar.title;
+  useEffect(function () {
+    return rest.onValidate == null ? void 0 : rest.onValidate(!state.isValueInvalid);
+  }, [state.isValueInvalid]);
+  return React.createElement("div", _extends({}, calendarProps, {
+    ref: calendarRef,
+    className: classNames('eds-datepicker__calendar', className),
+    style: style
+  }), React.createElement("div", {
+    className: "eds-datepicker__calendar__header"
+  }, React.createElement(CalendarButton, _extends({}, prevButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Forrige måned', locale, prevButtonProps)
+  }), React.createElement(LeftArrowIcon, {
+    size: 20
+  })), React.createElement("h2", null, title), React.createElement(CalendarButton, _extends({}, nextButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
+  }), React.createElement(RightArrowIcon, {
+    size: 20
+  }))), React.createElement(CalendarGrid, _extends({}, rest, {
+    state: state,
+    navigationDescription: navigationDescription,
+    onSelectedCellClick: onSelectedCellClick,
+    onCellClick: onCellClick,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate,
+    showWeekNumbers: showWeekNumbers,
+    weekNumberHeader: weekNumberHeader
+  })));
 };
-const DatePicker = ({
-  selectedDate,
-  locale,
-  disabled,
-  readOnly,
-  showTime,
-  showTimeZone = false,
-  classNameForDate,
-  className,
-  variant,
-  feedback,
-  validationVariant,
-  validationFeedback,
-  showWeekNumbers,
-  weekNumberHeader,
-  disableModal = false,
-  labelTooltip,
-  navigationDescription,
-  minDate,
-  maxDate,
-  modalTreshold = 1e3,
-  ariaLabelForDate,
-  append,
-  prepend,
-  granularity = showTime ? "minute" : "day",
-  ...rest
-}) => {
-  const CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
-  const datePickerRef = useRef(null);
-  const calendarRef = useRef(null);
-  const { width } = useWindowDimensions();
-  const _props = {
-    ...rest,
-    onChange: (value) => handleOnChange({
-      value,
-      selectedDate,
-      forcedReturnType: rest.forcedReturnType,
-      onChange: rest.onChange
-    }),
+
+var _excluded$5 = ["selectedDate", "locale", "disabled", "readOnly", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "ariaLabelForDate", "append", "prepend", "granularity"];
+var DatePicker = function DatePicker(_ref) {
+  var selectedDate = _ref.selectedDate,
+    locale = _ref.locale,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    showTime = _ref.showTime,
+    _ref$showTimeZone = _ref.showTimeZone,
+    showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
+    classNameForDate = _ref.classNameForDate,
+    className = _ref.className,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    validationVariant = _ref.validationVariant,
+    validationFeedback = _ref.validationFeedback,
+    showWeekNumbers = _ref.showWeekNumbers,
+    weekNumberHeader = _ref.weekNumberHeader,
+    _ref$disableModal = _ref.disableModal,
+    disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+    labelTooltip = _ref.labelTooltip,
+    navigationDescription = _ref.navigationDescription,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    _ref$modalTreshold = _ref.modalTreshold,
+    modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
+    ariaLabelForDate = _ref.ariaLabelForDate,
+    append = _ref.append,
+    prepend = _ref.prepend,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
+  var datePickerRef = useRef(null);
+  var calendarRef = useRef(null);
+  var _useWindowDimensions = useWindowDimensions(),
+    width = _useWindowDimensions.width;
+  var _props = _extends({}, rest, {
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: rest.forcedReturnType,
+        onChange: rest.onChange
+      });
+    },
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
-    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
     value: selectedDate,
-    granularity,
+    granularity: granularity,
     isDisabled: disabled || readOnly
-  };
-  const state = useDatePickerState(_props);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps
-  } = useDatePicker(_props, state, datePickerRef);
-  const { refs, floatingStyles, update } = useFloating({
-    whileElementsMounted: (ref, float, update2) => autoUpdate(ref, float, update2, { elementResize: false }),
-    placement: "bottom-start",
-    middleware: [
-      offset(space.extraSmall2),
-      flip(),
-      shift({ padding: space.extraSmall })
-    ]
   });
-  useOnClickOutside([calendarRef], () => state.setOpen(false));
-  useOnEscape(calendarRef, () => state.setOpen(false));
-  const calendarSharedProps = {
-    ...dialogProps,
-    ...calendarProps,
+  var state = useDatePickerState(_props);
+  var _useDatePicker = useDatePicker(_props, state, datePickerRef),
+    groupProps = _useDatePicker.groupProps,
+    labelProps = _useDatePicker.labelProps,
+    fieldProps = _useDatePicker.fieldProps,
+    buttonProps = _useDatePicker.buttonProps,
+    dialogProps = _useDatePicker.dialogProps,
+    calendarProps = _useDatePicker.calendarProps;
+  // calculations for floating-UI popover position
+  var _useFloating = useFloating({
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update, {
+          elementResize: false
+        });
+      },
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall2), flip(), shift({
+        padding: space.extraSmall
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    update = _useFloating.update;
+  useOnClickOutside([calendarRef], function () {
+    return state.setOpen(false);
+  });
+  useOnEscape(calendarRef, function () {
+    return state.setOpen(false);
+  });
+  var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
     // We don't use handleOnChange here since it's handled internally by Calendar
     onChange: rest.onChange,
     forcedReturnType: rest.forcedReturnType,
-    disabled,
-    navigationDescription,
-    onSelectedCellClick: () => state.setOpen(false),
+    disabled: disabled,
+    navigationDescription: navigationDescription,
+    onSelectedCellClick: function onSelectedCellClick() {
+      return state.setOpen(false);
+    },
     // onCellClick is a temporary fix solving an issue where the
     // calendar sometimes doesn't close on date selection
-    onCellClick: () => state.setOpen(false),
-    selectedDate,
-    minDate,
-    maxDate,
-    calendarRef,
-    classNameForDate,
-    ariaLabelForDate,
-    showWeekNumbers,
-    weekNumberHeader
-  };
-  const isModal = typeof width !== "undefined" && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
-  const popoverCalendar = /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: { ...floatingStyles, zIndex: zIndexes.popover },
-      ref: refs.setFloating,
-      children: /* @__PURE__ */ jsx(FocusLock, { disabled: !state.isOpen || isModal, returnFocus: true, children: state.isOpen && /* @__PURE__ */ jsx(Calendar, { ...calendarSharedProps }) })
-    }
-  );
-  const modalCalendar = /* @__PURE__ */ jsx(
-    Modal,
-    {
-      size: "small",
-      title: "",
-      open: state.isOpen,
-      onDismiss: () => state.setOpen(false),
-      className: "eds-datepicker__calendar-modal",
-      children: /* @__PURE__ */ jsx(Calendar, { ...calendarSharedProps })
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    ConditionalWrapper,
-    {
-      condition: locale !== void 0,
-      wrapper: (child) => /* @__PURE__ */ jsx(I18nProvider, { locale, children: child }),
-      children: [
-        /* @__PURE__ */ jsx(
-          DateField,
-          {
-            ...groupProps,
-            ...fieldProps,
-            ...rest,
-            append: !disabled && !readOnly && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-              append,
-              /* @__PURE__ */ jsx(
-                CalendarButton,
-                {
-                  ...buttonProps,
-                  onPress: () => {
-                    state.setOpen(!state.isOpen);
-                    update();
-                  },
-                  className: "eds-datepicker__open-calendar-button",
-                  children: /* @__PURE__ */ jsx(CalendarIcon, {})
-                }
-              )
-            ] }),
-            prepend,
-            className: classNames("eds-datepicker", className, {
-              "eds-datepicker--disabled": disabled
-            }),
-            disabled,
-            readOnly,
-            feedback,
-            labelProps,
-            labelTooltip,
-            maxDate,
-            minDate,
-            dateFieldRef: (node) => {
-              refs.setReference(node);
-              datePickerRef.current = node;
-            },
-            selectedDate,
-            showTime,
-            showTimeZone,
-            validationFeedback,
-            validationVariant,
-            variant
-          }
-        ),
-        isModal ? modalCalendar : popoverCalendar
-      ]
+    onCellClick: function onCellClick() {
+      return state.setOpen(false);
+    },
+    selectedDate: selectedDate,
+    minDate: minDate,
+    maxDate: maxDate,
+    calendarRef: calendarRef,
+    classNameForDate: classNameForDate,
+    ariaLabelForDate: ariaLabelForDate,
+    showWeekNumbers: showWeekNumbers,
+    weekNumberHeader: weekNumberHeader
+  });
+  var isModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  var popoverCalendar = React.createElement("div", {
+    style: _extends({}, floatingStyles, {
+      zIndex: zIndexes.popover
+    }),
+    ref: refs.setFloating
+  }, React.createElement(FocusLock, {
+    disabled: !state.isOpen || isModal,
+    returnFocus: true
+  }, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps))));
+  var modalCalendar = React.createElement(Modal, {
+    size: "small",
+    title: "",
+    open: state.isOpen,
+    onDismiss: function onDismiss() {
+      return state.setOpen(false);
+    },
+    className: "eds-datepicker__calendar-modal"
+  }, React.createElement(Calendar, _extends({}, calendarSharedProps)));
+  return React.createElement(ConditionalWrapper, {
+    condition: locale !== undefined,
+    wrapper: function wrapper(child) {
+      return React.createElement(I18nProvider, {
+        locale: locale
+      }, child);
     }
-  );
-};
-const NativeDatePicker = React.forwardRef(
-  ({
-    className,
-    style,
-    label,
-    onChange,
-    feedback,
-    variant,
-    disableLabelAnimation,
-    prepend = /* @__PURE__ */ jsx(DateIcon, { inline: true }),
-    ...rest
-  }, ref) => {
-    const nativedatepickerId = useRandomId("eds-nativetimepicker");
-    return /* @__PURE__ */ jsx(
-      BaseFormControl,
-      {
-        style,
-        className,
-        prepend,
-        label,
-        feedback,
-        variant,
-        labelId: nativedatepickerId,
-        disableLabelAnimation,
-        isFilled: true,
-        children: /* @__PURE__ */ jsx(
-          NativeDatePickerBase,
-          {
-            onChange,
-            "aria-labelledby": nativedatepickerId,
-            ref,
-            variant,
-            ...rest
-          }
-        )
+  }, React.createElement(DateField, _extends({}, groupProps, fieldProps, rest, {
+    append: !disabled && !readOnly && React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
       }
-    );
-  }
-);
-const NativeDatePickerBase = React.forwardRef(({ onChange, variant, value, ...rest }, ref) => {
-  const contextVariant = useVariant();
-  const currentVariant = variant || contextVariant;
-  const { isFilled: isDatepickerFilled, setFilled: setFiller } = useInputGroupContext();
-  useOnMount(() => {
+    }, append, React.createElement(CalendarButton, _extends({}, buttonProps, {
+      onPress: function onPress() {
+        state.setOpen(!state.isOpen);
+        update();
+      },
+      className: "eds-datepicker__open-calendar-button"
+    }), React.createElement(CalendarIcon, null))),
+    prepend: prepend,
+    className: classNames('eds-datepicker', className, {
+      'eds-datepicker--disabled': disabled
+    }),
+    disabled: disabled,
+    readOnly: readOnly,
+    feedback: feedback,
+    labelProps: labelProps,
+    labelTooltip: labelTooltip,
+    maxDate: maxDate,
+    minDate: minDate,
+    dateFieldRef: function dateFieldRef(node) {
+      refs.setReference(node);
+      datePickerRef.current = node;
+    },
+    selectedDate: selectedDate,
+    showTime: showTime,
+    showTimeZone: showTimeZone,
+    validationFeedback: validationFeedback,
+    validationVariant: validationVariant,
+    variant: variant
+  })), isModal ? modalCalendar : popoverCalendar);
+};
+
+var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
+  _excluded2$2 = ["onChange", "variant", "value"];
+var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    disableLabelAnimation = _ref.disableLabelAnimation,
+    _ref$prepend = _ref.prepend,
+    prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
+      inline: true
+    }) : _ref$prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var nativedatepickerId = useRandomId('eds-nativetimepicker');
+  return React.createElement(BaseFormControl, {
+    style: style,
+    className: className,
+    prepend: prepend,
+    label: label,
+    feedback: feedback,
+    variant: variant,
+    labelId: nativedatepickerId,
+    disableLabelAnimation: disableLabelAnimation,
+    isFilled: true
+  }, React.createElement(NativeDatePickerBase, _extends({
+    onChange: onChange,
+    "aria-labelledby": nativedatepickerId,
+    ref: ref,
+    variant: variant
+  }, rest)));
+});
+var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var onChange = _ref2.onChange,
+    variant = _ref2.variant,
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  var contextVariant = useVariant();
+  var currentVariant = variant || contextVariant;
+  var _useInputGroupContext = useInputGroupContext(),
+    isDatepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
+  useOnMount(function () {
     setFiller && !isDatepickerFilled && setFiller(true);
   });
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (value) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
       setFiller && isDatepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isDatepickerFilled]);
-  const handleChange = (event) => {
+  var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
@@ -763,243 +784,236 @@ const NativeDatePickerBase = React.forwardRef(({ onChange, variant, value, ...re
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      "aria-invalid": currentVariant === "error",
-      type: "date",
-      className: "eds-form-control eds-native-date-picker",
-      onChange: handleChange,
-      value,
-      ...rest
-    }
-  );
+  return React.createElement("input", _extends({
+    ref: ref,
+    "aria-invalid": currentVariant === 'error',
+    type: "date",
+    className: "eds-form-control eds-native-date-picker",
+    onChange: handleChange,
+    value: value
+  }, rest));
 });
-const TimePickerArrowButton = ({
-  direction,
-  onClick,
-  disabled,
-  readonly,
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      className: classNames(
-        "eds-timepicker__arrowbutton",
-        `eds-timepicker__arrowbutton--${direction}`,
-        { "eds-timepicker__arrowbutton--disabled": disabled }
-      ),
-      type: "button",
-      tabIndex: -1,
-      onClick,
-      "aria-label": ariaLabel,
-      disabled,
-      ...rest,
-      children: direction === "left" ? /* @__PURE__ */ jsx(LeftArrowIcon, {}) : /* @__PURE__ */ jsx(RightArrowIcon, {})
-    }
-  );
+
+var _excluded$3 = ["direction", "onClick", "disabled", "readonly", "aria-label"];
+var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
+  var direction = _ref.direction,
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    ariaLabel = _ref['aria-label'],
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement(IconButton, _extends({
+    className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
+      'eds-timepicker__arrowbutton--disabled': disabled
+    }),
+    type: "button",
+    tabIndex: -1,
+    onClick: onClick,
+    "aria-label": ariaLabel,
+    disabled: disabled
+  }, rest), direction === 'left' ? React.createElement(LeftArrowIcon, null) : React.createElement(RightArrowIcon, null));
 };
-const TimePicker = ({
-  selectedTime,
-  onChange,
-  disabled,
-  readOnly,
-  className,
-  style,
-  label,
-  labelTooltip,
-  feedback,
-  granularity,
-  variant,
-  locale: customLocale,
-  showTimeZone,
-  showSeconds = false,
-  minuteIncrementForArrowButtons = 30,
-  leftArrowButtonAriaLabel = `Trekk fra ${minuteIncrementForArrowButtons} minutter`,
-  rightArrowButtonAriaLabel = `Legg til ${minuteIncrementForArrowButtons} minutter`,
-  inputRef,
-  forcedReturnType,
-  forcedTimeZone,
-  append,
-  prepend,
-  ...rest
-}) => {
-  let { locale } = useLocale();
+
+var _excluded$2 = ["selectedTime", "onChange", "disabled", "readOnly", "className", "style", "label", "labelTooltip", "feedback", "granularity", "variant", "locale", "showTimeZone", "showSeconds", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef", "forcedReturnType", "forcedTimeZone", "append", "prepend"];
+var TimePicker = function TimePicker(_ref) {
+  var selectedTime = _ref.selectedTime,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    className = _ref.className,
+    style = _ref.style,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    feedback = _ref.feedback,
+    granularity = _ref.granularity,
+    variant = _ref.variant,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    _ref$showSeconds = _ref.showSeconds,
+    showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
+    _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
+    minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
+    _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
+    leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
+    _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
+    rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
+    inputRef = _ref.inputRef,
+    forcedReturnType = _ref.forcedReturnType,
+    forcedTimeZone = _ref.forcedTimeZone,
+    append = _ref.append,
+    prepend = _ref.prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
-  const timePickerId = useRandomId("eds-timepicker");
-  const timeZone = forcedTimeZone ?? (selectedTime !== null && "timezone" in selectedTime ? selectedTime.timezone : "Europe/Oslo");
-  const handleOnChange2 = (value) => {
-    if (forcedReturnType !== void 0 || !selectedTime) {
-      return onChange(
-        convertValueToType({
-          value,
-          type: forcedReturnType ?? "ZonedDateTime",
-          timezone: timeZone
-        })
-      );
+  var timePickerId = useRandomId('eds-timepicker');
+  var timeZone = forcedTimeZone != null ? forcedTimeZone : selectedTime !== null && 'timezone' in selectedTime ? selectedTime.timezone : 'Europe/Oslo';
+  var handleOnChange = function handleOnChange(value) {
+    if (forcedReturnType !== undefined || !selectedTime) {
+      return onChange(convertValueToType({
+        value: value,
+        type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime',
+        timezone: timeZone
+      }));
     }
     onChange(value);
   };
-  const state = useTimeFieldState({
-    onChange: handleOnChange2,
-    label,
-    locale,
+  var state = useTimeFieldState(_extends({
+    onChange: handleOnChange,
+    label: label,
+    locale: locale,
     value: selectedTime,
-    granularity: granularity ?? showSeconds ? "second" : "minute",
+    granularity: (granularity != null ? granularity : showSeconds) ? 'second' : 'minute',
     hideTimeZone: !showTimeZone,
     isDisabled: disabled || readOnly,
-    shouldForceLeadingZeros: true,
-    ...rest
-  });
-  const timeFieldRef = useRef(null);
-  const { labelProps, fieldProps } = useTimeField(
-    { ...rest, label },
-    state,
-    timeFieldRef
-  );
-  const id = useRandomId("timepicker");
-  const getCurrentTime = () => {
-    const getCurrentTimeWithCorrectType = convertValueToType({
+    shouldForceLeadingZeros: true
+  }, rest));
+  var timeFieldRef = useRef(null);
+  var _useTimeField = useTimeField(_extends({}, rest, {
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
+  var id = useRandomId('timepicker');
+  var getCurrentTime = function getCurrentTime() {
+    var getCurrentTimeWithCorrectType = convertValueToType({
       value: now(timeZone),
-      type: forcedReturnType ?? "ZonedDateTime"
+      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime'
     });
     return getCurrentTimeWithCorrectType;
   };
-  const handleOnClickArrowButton = (operation) => {
-    if (selectedTime === null) return handleOnChange2(getCurrentTime());
+  var handleOnClickArrowButton = function handleOnClickArrowButton(operation) {
+    if (selectedTime === null) return handleOnChange(getCurrentTime());
     switch (operation) {
-      case "add":
-        return handleOnChange2(
-          selectedTime.add({
-            minutes: minuteIncrementForArrowButtons - modulo(selectedTime.minute, minuteIncrementForArrowButtons)
-          })
-        );
-      case "subtract":
-        return handleOnChange2(
-          selectedTime.subtract({
-            minutes: modulo(selectedTime.minute - 1, minuteIncrementForArrowButtons) + 1
-          })
-        );
+      case 'add':
+        return handleOnChange(selectedTime.add({
+          minutes: minuteIncrementForArrowButtons - modulo(selectedTime.minute, minuteIncrementForArrowButtons)
+        }));
+      case 'subtract':
+        return handleOnChange(selectedTime.subtract({
+          minutes: modulo(selectedTime.minute - 1, minuteIncrementForArrowButtons) + 1
+        }));
     }
   };
-  return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(
-    BaseFormControl,
-    {
-      append: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-        append,
-        /* @__PURE__ */ jsx(
-          TimePickerArrowButton,
-          {
-            direction: "right",
-            disabled: disabled || readOnly,
-            "aria-label": rightArrowButtonAriaLabel,
-            onClick: () => handleOnClickArrowButton("add"),
-            onFocus: () => focusSegment(timeFieldRef, "last")
-          }
-        )
-      ] }),
-      ariaAlertOnFeedback: true,
-      "aria-describedby": timePickerId + "description",
-      className: classNames("eds-timepicker", className, {
-        "eds-timepicker--disabled": disabled,
-        "eds-timepicker--has-tooltip": labelTooltip !== void 0,
-        "eds-timepicker--readonly": readOnly
-      }),
-      disabled,
-      readOnly,
-      disableLabelAnimation: true,
-      feedback,
-      label,
-      labelId: id,
-      labelProps: {
-        ...labelProps,
-        "aria-describedby": timePickerId + "description"
+  return React.createElement(I18nProvider, {
+    locale: locale
+  }, React.createElement(BaseFormControl, {
+    append: React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, append, React.createElement(TimePickerArrowButton, {
+      direction: "right",
+      disabled: disabled || readOnly,
+      "aria-label": rightArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('add');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'last');
+      }
+    })),
+    ariaAlertOnFeedback: true,
+    "aria-describedby": timePickerId + 'description',
+    className: classNames('eds-timepicker', className, {
+      'eds-timepicker--disabled': disabled,
+      'eds-timepicker--has-tooltip': labelTooltip !== undefined,
+      'eds-timepicker--readonly': readOnly
+    }),
+    disabled: disabled,
+    readOnly: readOnly,
+    disableLabelAnimation: true,
+    feedback: feedback,
+    label: label,
+    labelId: id,
+    labelProps: _extends({}, labelProps, {
+      'aria-describedby': timePickerId + 'description'
+    }),
+    labelTooltip: labelTooltip,
+    prepend: React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, React.createElement(TimePickerArrowButton, {
+      direction: "left",
+      disabled: disabled || readOnly,
+      "aria-label": leftArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('subtract');
       },
-      labelTooltip,
-      prepend: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx(
-          TimePickerArrowButton,
-          {
-            direction: "left",
-            disabled: disabled || readOnly,
-            "aria-label": leftArrowButtonAriaLabel,
-            onClick: () => handleOnClickArrowButton("subtract"),
-            onFocus: () => focusSegment(timeFieldRef, "first")
-          }
-        ),
-        prepend
-      ] }),
-      ref: inputRef,
-      style,
-      variant,
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            ref: timeFieldRef,
-            ...fieldProps,
-            style: { display: "contents" },
-            children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
-              FieldSegment,
-              {
-                segment,
-                state,
-                "aria-describedby": timePickerId + "description"
-              },
-              i
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(VisuallyHidden, { id: timePickerId + "description", children: selectedTime !== null ? "valgt tid: " + selectedTime.hour.toString().padStart(2, "0") + ":" + selectedTime.minute.toString().padStart(2, "0") + (showSeconds ? ":" + selectedTime.second.toString().padStart(2, "0") : "") : "" })
-      ]
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'first');
+      }
+    }), prepend),
+    ref: inputRef,
+    style: style,
+    variant: variant
+  }, React.createElement("span", _extends({
+    ref: timeFieldRef
+  }, fieldProps, {
+    style: {
+      display: 'contents'
     }
-  ) });
+  }), state.segments.map(function (segment, i) {
+    return React.createElement(FieldSegment, {
+      segment: segment,
+      state: state,
+      key: i,
+      "aria-describedby": timePickerId + 'description'
+    });
+  })), React.createElement(VisuallyHidden, {
+    id: timePickerId + 'description'
+  }, selectedTime !== null ? 'valgt tid: ' + selectedTime.hour.toString().padStart(2, '0') + ':' + selectedTime.minute.toString().padStart(2, '0') + (showSeconds ? ':' + selectedTime.second.toString().padStart(2, '0') : '') : '')));
 };
-const NativeTimePicker = React.forwardRef(
-  ({ className, style, onChange, label, feedback, variant, prepend, ...rest }, ref) => {
-    const nativetimepickerId = useRandomId("eds-native-timepicker");
-    return /* @__PURE__ */ jsx(
-      BaseFormControl,
-      {
-        style,
-        className: classNames(className, "eds-native-timepicker"),
-        prepend,
-        label,
-        feedback,
-        variant,
-        labelId: nativetimepickerId,
-        disableLabelAnimation: true,
-        children: /* @__PURE__ */ jsx(
-          NativeTimePickerBase,
-          {
-            onChange,
-            "aria-labelledby": nativetimepickerId,
-            ref,
-            ...rest
-          }
-        )
-      }
-    );
-  }
-);
-const NativeTimePickerBase = React.forwardRef(({ onChange, value, ...rest }, ref) => {
-  const contextVariant = useVariant();
-  const currentVariant = rest.variant || contextVariant;
-  const { isFilled: isTimepickerFilled, setFilled: setFiller } = useInputGroupContext();
-  useOnMount(() => {
+
+var _excluded$1 = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
+  _excluded2$1 = ["onChange", "value"];
+var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    prepend = _ref.prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var nativetimepickerId = useRandomId('eds-native-timepicker');
+  return React.createElement(BaseFormControl, {
+    style: style,
+    className: classNames(className, 'eds-native-timepicker'),
+    prepend: prepend,
+    label: label,
+    feedback: feedback,
+    variant: variant,
+    labelId: nativetimepickerId,
+    disableLabelAnimation: true
+  }, React.createElement(NativeTimePickerBase, _extends({
+    onChange: onChange,
+    "aria-labelledby": nativetimepickerId,
+    ref: ref
+  }, rest)));
+});
+var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var onChange = _ref2.onChange,
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  var contextVariant = useVariant();
+  var currentVariant = rest.variant || contextVariant;
+  var _useInputGroupContext = useInputGroupContext(),
+    isTimepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
+  useOnMount(function () {
     setFiller && !isTimepickerFilled && setFiller(true);
   });
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (value) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
       setFiller && isTimepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isTimepickerFilled]);
-  const handleChange = (event) => {
+  var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
@@ -1009,224 +1023,211 @@ const NativeTimePickerBase = React.forwardRef(({ onChange, value, ...rest }, ref
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      "aria-invalid": currentVariant === "error",
-      type: "time",
-      className: "eds-form-control",
-      onChange: handleChange,
-      value,
-      ...rest
-    }
-  );
+  return React.createElement("input", _extends({
+    ref: ref,
+    "aria-invalid": currentVariant === 'error',
+    type: "time",
+    className: "eds-form-control",
+    onChange: handleChange,
+    value: value
+  }, rest));
 });
-const SimpleTimePicker = ({
-  append,
-  className,
-  disabled,
-  feedback,
-  showClockIcon = "right",
-  inputRef,
-  label,
-  labelTooltip,
-  onChange,
-  padding = "default",
-  prepend,
-  readOnly,
-  selectedTime,
-  showSeconds,
-  style,
-  variant,
-  ...rest
-}) => {
-  const [inputText, setInputText] = useState("");
-  const timeFieldRef = useRef(null);
-  const [lastValidSelectedTime, setLastValidSelectedTime] = useState(null);
-  const { locale } = useLocale();
-  const state = useTimeFieldState({
-    onChange,
-    label,
-    locale,
+
+var _excluded = ["append", "className", "disabled", "feedback", "showClockIcon", "inputRef", "label", "labelTooltip", "onChange", "padding", "prepend", "readOnly", "selectedTime", "showSeconds", "style", "variant"],
+  _excluded2 = ["onBlur", "onClick", "onDragStart", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPointerUp"];
+var inputResult;
+(function (inputResult) {
+  inputResult[inputResult["RESET_TIME"] = 0] = "RESET_TIME";
+  inputResult[inputResult["INVALID"] = 1] = "INVALID";
+})(inputResult || (inputResult = {}));
+var SimpleTimePicker = function SimpleTimePicker(_ref) {
+  var append = _ref.append,
+    disabled = _ref.disabled,
+    feedback = _ref.feedback,
+    _ref$showClockIcon = _ref.showClockIcon,
+    showClockIcon = _ref$showClockIcon === void 0 ? 'right' : _ref$showClockIcon,
+    inputRef = _ref.inputRef,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    onChange = _ref.onChange,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'default' : _ref$padding,
+    prepend = _ref.prepend,
+    readOnly = _ref.readOnly,
+    selectedTime = _ref.selectedTime,
+    showSeconds = _ref.showSeconds,
+    style = _ref.style,
+    variant = _ref.variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    inputText = _useState[0],
+    setInputText = _useState[1];
+  var timeFieldRef = useRef(null);
+  var _useState2 = useState(null),
+    lastValidSelectedTime = _useState2[0],
+    setLastValidSelectedTime = _useState2[1];
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var state = useTimeFieldState(_extends({
+    onChange: onChange,
+    label: label,
+    locale: locale,
     value: selectedTime,
     hideTimeZone: true,
     isDisabled: disabled,
-    isReadOnly: readOnly,
-    ...rest
-  });
-  const { labelProps, fieldProps } = useTimeField(
-    { ...rest, label },
-    state,
-    timeFieldRef
-  );
-  useEffect(() => {
+    isReadOnly: readOnly
+  }, rest));
+  var _useTimeField = useTimeField(_extends({}, rest, {
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
+  useEffect(function () {
     updateInputWithSelectedTime();
+    // @ts-expect-error TimeType and MappedTimeValue<TimeType> is actually the same
     if (selectedTime !== null) setLastValidSelectedTime(selectedTime);
-  }, [selectedTime?.toString()]);
-  const updateInputWithSelectedTime = () => {
-    const selectedTimeString = getStringFromTimeValue(selectedTime);
+  }, [selectedTime == null ? void 0 : selectedTime.toString()]);
+  var updateInputWithSelectedTime = function updateInputWithSelectedTime() {
+    var selectedTimeString = getStringFromTimeValue(selectedTime);
     setInputText(selectedTimeString);
-    const timeFieldIsFocused = document.activeElement === timeFieldRef?.current;
-    if (selectedTimeString === "" && !timeFieldIsFocused)
-      addPlaceholderToInput();
+    var timeFieldIsFocused = document.activeElement === (timeFieldRef == null ? void 0 : timeFieldRef.current);
+    if (selectedTimeString === '' && !timeFieldIsFocused) addPlaceholderToInput();
   };
-  const getStringFromTimeValue = (timeValue) => {
-    if (timeValue === null) return "";
-    const timeObject = "day" in timeValue ? toTime(timeValue) : timeValue;
+  var getStringFromTimeValue = function getStringFromTimeValue(timeValue) {
+    if (timeValue === null) return '';
+    var timeObject = 'day' in timeValue ? toTime(timeValue) : timeValue;
     if (showSeconds) return timeObject.toString().slice(0, 8);
     return timeObject.toString().slice(0, 5);
   };
-  const addPlaceholderToInput = () => {
-    if (showSeconds) setInputText("–– : –– : ––");
-    else setInputText("–– : ––");
+  var addPlaceholderToInput = function addPlaceholderToInput() {
+    if (showSeconds) setInputText('–– : –– : ––');else setInputText('–– : ––');
   };
-  const handleChangeTime = () => {
-    const newTime = getValueForOnChangeFromInput();
-    if (newTime === 1) {
+  var handleChangeTime = function handleChangeTime() {
+    var newTime = getValueForOnChangeFromInput();
+    if (newTime === inputResult.INVALID) {
       return updateInputWithSelectedTime();
     }
-    if (newTime?.toString() !== selectedTime?.toString()) onChange?.(newTime);
+    if ((newTime == null ? void 0 : newTime.toString()) !== (selectedTime == null ? void 0 : selectedTime.toString())) onChange == null || onChange(newTime);
   };
-  const getValueForOnChangeFromInput = () => {
-    const formatedTimeString = formatTimeString(inputText);
-    const newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
-    if (newTimeObject === 1) {
-      return 1;
+  var getValueForOnChangeFromInput = function getValueForOnChangeFromInput() {
+    var formatedTimeString = formatTimeString(inputText);
+    var newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
+    if (newTimeObject === inputResult.INVALID) {
+      return inputResult.INVALID;
     }
-    if (newTimeObject === 0) {
+    if (newTimeObject === inputResult.RESET_TIME) {
       return null;
     }
-    const updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
+    var updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
     return updatedSelectedTime;
   };
-  const formatTimeString = (timeString) => {
-    if (timeString.length === 0) return 0;
-    if (timeString.length < 3 || timeString.length > 8)
-      return 1;
-    const numberOfColons = (timeString.match(new RegExp(":", "g")) || []).length;
-    const stringLength = timeString.length;
+  var formatTimeString = function formatTimeString(timeString) {
+    if (timeString.length === 0) return inputResult.RESET_TIME;
+    if (timeString.length < 3 || timeString.length > 8) return inputResult.INVALID;
+    var numberOfColons = (timeString.match(new RegExp(':', 'g')) || []).length;
+    var stringLength = timeString.length;
+    // targets 'd:dd:dd' and 'dd:dd:dd'
     if (numberOfColons === 2 && stringLength >= 7) {
-      return timeString.padStart(8, "0");
+      return timeString.padStart(8, '0');
     }
+    // targets 'd:dd' and 'dd:dd'
     if (numberOfColons === 1) {
-      return timeString.padStart(5, "0");
+      return timeString.padStart(5, '0');
     }
-    if (stringLength > 6) return 1;
-    const stringLengthIsEven = stringLength % 2 == 0;
-    const hourString = stringLengthIsEven ? timeString.slice(0, 2) : timeString.slice(0, 1);
-    const minuteString = stringLengthIsEven ? timeString.slice(2, 4) : timeString.slice(1, 3);
-    const secondString = (() => {
-      const stringSlice = stringLengthIsEven ? timeString.slice(4, 6) : timeString.slice(3, 5);
-      if (stringSlice === "") return "00";
+    if (stringLength > 6) return inputResult.INVALID;
+    var stringLengthIsEven = stringLength % 2 == 0;
+    var hourString = stringLengthIsEven ? timeString.slice(0, 2) : timeString.slice(0, 1);
+    var minuteString = stringLengthIsEven ? timeString.slice(2, 4) : timeString.slice(1, 3);
+    var secondString = function () {
+      var stringSlice = stringLengthIsEven ? timeString.slice(4, 6) : timeString.slice(3, 5);
+      if (stringSlice === '') return '00';
       return stringSlice;
-    })();
-    const timeStringWithColon = hourString.padStart(2, "0") + ":" + minuteString + (showSeconds ? ":" + secondString : "");
+    }();
+    var timeStringWithColon = hourString.padStart(2, '0') + ':' + minuteString + (showSeconds ? ':' + secondString : '');
     return timeStringWithColon;
   };
-  const formatedTimeStringToTimeObject = (formatedTimeString) => {
-    if (formatedTimeString === 1) return 1;
-    if (formatedTimeString === 0)
-      return 0;
-    const isNumberTest = /^\d+$/;
-    const hourString = formatedTimeString.slice(0, 2);
-    const minuteString = formatedTimeString.slice(3, 5);
-    const secondString = formatedTimeString.slice(6, 8);
-    if (hourString.match(isNumberTest) && minuteString.match(isNumberTest) && (secondString === "" || secondString.match(isNumberTest))) {
+  var formatedTimeStringToTimeObject = function formatedTimeStringToTimeObject(formatedTimeString) {
+    if (formatedTimeString === inputResult.INVALID) return inputResult.INVALID;
+    if (formatedTimeString === inputResult.RESET_TIME) return inputResult.RESET_TIME;
+    var isNumberTest = /^\d+$/;
+    var hourString = formatedTimeString.slice(0, 2);
+    var minuteString = formatedTimeString.slice(3, 5);
+    var secondString = formatedTimeString.slice(6, 8);
+    if (hourString.match(isNumberTest) && minuteString.match(isNumberTest) && (secondString === '' || secondString.match(isNumberTest))) {
       try {
-        const timeObject = parseTime(formatedTimeString);
+        var timeObject = parseTime(formatedTimeString);
         return timeObject;
       } catch (e) {
-        return 1;
+        return inputResult.INVALID;
       }
     }
-    return 1;
+    return inputResult.INVALID;
   };
-  const getSelectedTimeWithTimeFromObject = (newTime) => {
-    const selectedTimeWithUpdateTime = (lastValidSelectedTime ?? new Time()).set({
+  var getSelectedTimeWithTimeFromObject = function getSelectedTimeWithTimeFromObject(newTime) {
+    var selectedTimeWithUpdateTime = (lastValidSelectedTime != null ? lastValidSelectedTime : new Time()).set({
       hour: newTime.hour,
       minute: newTime.minute,
       second: newTime.second
     });
     return selectedTimeWithUpdateTime;
   };
-  const {
-    onBlur,
-    onClick,
-    onDragStart,
-    onFocus,
-    onKeyDown,
-    onKeyUp,
-    onMouseDown,
-    onPointerDown,
-    onPointerUp,
-    ...usedFieldProps
-  } = fieldProps;
-  return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
-    TextField,
-    {
-      append: append || (showClockIcon === true || showClockIcon === "right" ? /* @__PURE__ */ jsx(ClockIcon, { onClick: () => timeFieldRef?.current?.focus(), inline: true }) : void 0),
-      className: classNames("eds-simple-timepicker", {
-        "eds-simple-timepicker--padding-large": padding === "large",
-        "eds-simple-timepicker--show-seconds": showSeconds,
-        "eds-simple-timepicker--hide-clock": !showClockIcon,
-        "eds-simple-timepicker--has-tooltip": labelTooltip !== void 0
-      }),
-      disabled,
-      disableLabelAnimation: true,
-      feedback,
-      label,
-      labelProps,
-      labelTooltip,
-      onBlur: () => {
-        handleChangeTime();
-        if (selectedTime === null) {
-          addPlaceholderToInput();
-        }
+  var usedFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded2);
+  return React.createElement(I18nProvider, {
+    locale: locale
+  }, React.createElement(TextField, _extends({
+    append: append || (showClockIcon === true || showClockIcon === 'right' ? React.createElement(ClockIcon, {
+      onClick: function onClick() {
+        var _timeFieldRef$current;
+        return timeFieldRef == null || (_timeFieldRef$current = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current.focus();
       },
-      onChange: (e) => setInputText(e.target.value),
-      onFocus: () => {
-        if (selectedTime === null) {
-          setInputText("");
-        }
-      },
-      onKeyDown: ({ key }) => {
-        if (key === "Enter") handleChangeTime();
-      },
-      placeholder: showSeconds ? "–– : –– : ––" : "–– : ––",
-      prepend: prepend || (showClockIcon === "left" ? /* @__PURE__ */ jsx(ClockIcon, { onClick: () => timeFieldRef?.current?.focus() }) : void 0),
-      readOnly,
-      ref: mergeRefs(timeFieldRef, inputRef),
-      style,
-      value: inputText,
-      variant,
-      ...usedFieldProps
-    }
-  ) });
-};
-warnAboutMissingStyles("datepicker", "form", "icons");
-export {
-  Calendar,
-  CalendarDate2 as CalendarDate,
-  CalendarDateTime2 as CalendarDateTime,
-  DateField,
-  DatePicker,
-  NativeDatePicker,
-  NativeTimePicker,
-  SimpleTimePicker,
-  Time2 as Time,
-  TimePicker,
-  ZonedDateTime2 as ZonedDateTime,
-  ariaLabelIfNorwegian,
-  convertValueToType,
-  createCalendar,
-  focusSegment,
-  getWeekNumberForDate,
-  handleOnChange,
-  lastMillisecondOfDay,
-  modulo,
-  nativeDateToDateValue,
-  nativeDateToTimeValue,
-  timeOrDateValueToNativeDate
+      inline: true
+    }) : undefined),
+    className: classNames('eds-simple-timepicker', {
+      'eds-simple-timepicker--padding-large': padding === 'large',
+      'eds-simple-timepicker--show-seconds': showSeconds,
+      'eds-simple-timepicker--hide-clock': !showClockIcon,
+      'eds-simple-timepicker--has-tooltip': labelTooltip !== undefined
+    }),
+    disabled: disabled,
+    disableLabelAnimation: true,
+    feedback: feedback,
+    label: label,
+    labelProps: labelProps,
+    labelTooltip: labelTooltip,
+    onBlur: function onBlur() {
+      handleChangeTime();
+      if (selectedTime === null) {
+        addPlaceholderToInput();
+      }
+    },
+    onChange: function onChange(e) {
+      return setInputText(e.target.value);
+    },
+    onFocus: function onFocus() {
+      if (selectedTime === null) {
+        setInputText('');
+      }
+    },
+    onKeyDown: function onKeyDown(_ref2) {
+      var key = _ref2.key;
+      if (key === 'Enter') handleChangeTime();
+    },
+    placeholder: showSeconds ? '–– : –– : ––' : '–– : ––',
+    prepend: prepend || (showClockIcon === 'left' ? React.createElement(ClockIcon, {
+      onClick: function onClick() {
+        var _timeFieldRef$current2;
+        return timeFieldRef == null || (_timeFieldRef$current2 = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current2.focus();
+      }
+    }) : undefined),
+    readOnly: readOnly,
+    ref: mergeRefs(timeFieldRef, inputRef),
+    style: style,
+    value: inputText,
+    variant: variant
+  }, usedFieldProps)));
 };
+
+warnAboutMissingStyles('datepicker', 'form', 'icons');
+
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, SimpleTimePicker, TimePicker, ariaLabelIfNorwegian, convertValueToType, createCalendar, focusSegment, getWeekNumberForDate, handleOnChange, lastMillisecondOfDay, modulo, nativeDateToDateValue, nativeDateToTimeValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map