@entur/datepicker 11.2.1-beta.9 → 11.2.1

package/dist/datepicker.esm.js

@@ -1,780 +1,759 @@
-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]);
+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
     }
-    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);
+  );
 };
-
-var nativeDateToDateTime = function nativeDateToDateTime(date, timeZone, offset) {
+const nativeDateToDateTime = (date, timeZone, offset2) => {
   if (timeZone) {
-    if (offset) {
-      return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+    if (offset2) {
+      return new ZonedDateTime(
+        date.getFullYear(),
+        date.getMonth() + 1,
+        date.getDate(),
+        timeZone,
+        offset2,
+        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()
+  );
 };
-/**
- * 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;
-  }
+function nativeDateToDateValue(date, noTimeOnlyDate = false, timeZone, offset2) {
   if (date === null) return null;
-  if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-  return nativeDateToDateTime(date, timeZone, offset);
+  if (noTimeOnlyDate)
+    return new CalendarDate(
+      date.getFullYear(),
+      date.getMonth() + 1,
+      date.getDate()
+    );
+  return nativeDateToDateTime(date, 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;
-  }
+function nativeDateToTimeValue(date, noDateOnlyTime = false, timeZone, offset2) {
   if (date === null) return null;
-  if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
-  return nativeDateToDateTime(date, timeZone, offset);
+  if (noDateOnlyTime)
+    return new Time(
+      date.getHours(),
+      date.getMinutes(),
+      date.getSeconds(),
+      date.getMilliseconds()
+    );
+  return nativeDateToDateTime(date, timeZone, offset2);
 }
-/**
- * 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;
-  // type is Time
-  if (!('day' in value)) {
-    var date = new Date();
+  if (!("day" in value)) {
+    const date = /* @__PURE__ */ new Date();
     date.setHours(value.hour);
     date.setMinutes(value.minute);
     date.setSeconds(value.second);
     date.setMilliseconds(value.millisecond);
     return date;
   }
-  // type is CalendarDate
-  if (!('hour' in value)) {
-    return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
+  if (!("hour" in value)) {
+    return value.toDate(timeZoneForCalendarDateTime ?? getLocalTimeZone());
   }
-  // type is CalendarDateTime
-  if (!('timeZone' in value)) {
-    if (timeZoneForCalendarDateTime) return value.toDate(timeZoneForCalendarDateTime);
+  if (!("timeZone" in value)) {
+    if (timeZoneForCalendarDateTime)
+      return value.toDate(timeZoneForCalendarDateTime);
     return value.toDate(getLocalTimeZone());
   }
-  // type is ZonedDateTime
   return value.toDate();
 }
-var createCalendar = function createCalendar(identifier) {
-  if (identifier === void 0) {
-    identifier = 'gregory';
-  }
+const createCalendar = (identifier = "gregory") => {
   switch (identifier) {
-    case 'gregory':
+    case "gregory":
       return new GregorianCalendar();
     default:
-      throw new Error("Unsupported calendar " + identifier);
+      throw new Error(`Unsupported calendar ${identifier}`);
   }
 };
-var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, locale, propsCollection) {
-  if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
+const ariaLabelIfNorwegian = (norwegianAriaLabel, locale, propsCollection) => {
+  if (locale.toLowerCase() !== "no-no") return propsCollection["aria-label"];
   return norwegianAriaLabel;
 };
-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;
+const lastMillisecondOfDay = (dateValue) => toCalendarDateTime(dateValue.add({ days: 1 })).add({
+  milliseconds: -1
+});
+const convertValueToType = ({
+  value,
+  type,
+  timezone = "Europe/Oslo"
+}) => {
   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;
   }
 };
-var modulo = function modulo(a, b) {
-  return (a % b + b) % b;
-};
-var focusSegment = function focusSegment(ref, segment) {
+const modulo = (a, b) => (a % b + b) % b;
+const focusSegment = (ref, segment) => {
   if (ref.current) {
-    var segments = ref.current.querySelectorAll('.eds-date-and-time-field__segment');
-    var firstSegment = segments[0];
-    var lastSegment = segments[segments.length - 1];
+    const segments = ref.current.querySelectorAll(
+      ".eds-date-and-time-field__segment"
+    );
+    const firstSegment = segments[0];
+    const 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;
-  var calendarDate = convertValueToType({
+  const calendarDate = convertValueToType({
     value: date,
-    type: 'CalendarDate'
-  });
-  var firstDayOfWeek = startOfWeek(calendarDate, 'no-NO');
-  var thursdayOfWeek = firstDayOfWeek.add({
-    days: 3
+    type: "CalendarDate"
   });
-  var firstDayOfYearForThursday = startOfYear(thursdayOfWeek);
-  var weekNumber = Math.ceil((thursdayOfWeek.compare(firstDayOfYearForThursday) + 1) / 7);
+  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
+  );
   return weekNumber;
 }
-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
-    }));
+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
+      })
+    );
   }
-  onChange == null || onChange(value);
+  onChange?.(value);
 }
-
-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,
+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,
     value: selectedDate,
-    onChange: function onChange(value) {
-      return handleOnChange({
-        value: value,
-        selectedDate: selectedDate,
-        forcedReturnType: forcedReturnType,
-        onChange: _onChange
-      });
-    },
+    onChange: (value) => handleOnChange({
+      value,
+      selectedDate,
+      forcedReturnType,
+      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 != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
     isDisabled: isDisabled || disabled || readOnly,
     shouldForceLeadingZeros: true
-  });
-  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);
+  };
+  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))
+        }
+      )
     }
-  }, 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
-    });
-  })));
+  );
 };
-
-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 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$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
+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);
         isSelected && onSelectedCellClick();
         cellCanBeSelected && onCellClick();
-      }
+      },
+      onKeyUp: (e) => {
+        buttonProps.onKeyUp && buttonProps.onKeyUp(e);
+        if (e.key === "Enter") {
+          isSelected && onSelectedCellClick();
+          cellCanBeSelected && onCellClick();
+        }
+      },
+      children: formattedDate
     }
-  }), formattedDate));
+  ) });
 };
-
-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'];
+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"];
     }
-    return weekDays.map(function (day) {
-      return day.toLowerCase();
-    });
+    return weekDays.map((day) => day.toLowerCase());
   };
-  var getNavigationDescription = function getNavigationDescription() {
+  const 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 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()));
+  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() })
+  ] });
 };
-
-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 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 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, {
+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,
     value: selectedDate,
-    onChange: function onChange(value) {
-      return handleOnChange({
-        value: value,
-        selectedDate: selectedDate,
-        forcedReturnType: forcedReturnType,
-        onChange: _onChange
-      });
-    },
-    locale: locale,
-    createCalendar: createCalendar,
+    onChange: (value) => handleOnChange({
+      value,
+      selectedDate,
+      forcedReturnType,
+      onChange
+    }),
+    locale,
+    createCalendar,
     minValue: minDate,
     maxValue: maxDate
-  });
-  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 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 _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
-      });
-    },
+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
+    }),
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
-    maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
+    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
     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 })
+    ]
   });
-  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, {
+  useOnClickOutside([calendarRef], () => state.setOpen(false));
+  useOnEscape(calendarRef, () => state.setOpen(false));
+  const calendarSharedProps = {
+    ...dialogProps,
+    ...calendarProps,
     // We don't use handleOnChange here since it's handled internally by Calendar
     onChange: rest.onChange,
     forcedReturnType: rest.forcedReturnType,
-    disabled: disabled,
-    navigationDescription: navigationDescription,
-    onSelectedCellClick: function onSelectedCellClick() {
-      return state.setOpen(false);
-    },
+    disabled,
+    navigationDescription,
+    onSelectedCellClick: () => state.setOpen(false),
     // onCellClick is a temporary fix solving an issue where the
     // calendar sometimes doesn't close on date selection
-    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);
+    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 }) })
     }
-  }, React.createElement(DateField, _extends({}, groupProps, fieldProps, rest, {
-    append: !disabled && !readOnly && React.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, 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);
+  );
+  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
+      ]
+    }
+  );
 };
-
-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 () {
+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
+          }
+        )
+      }
+    );
+  }
+);
+const NativeDatePickerBase = React.forwardRef(({ onChange, variant, value, ...rest }, ref) => {
+  const contextVariant = useVariant();
+  const currentVariant = variant || contextVariant;
+  const { isFilled: isDatepickerFilled, setFilled: setFiller } = useInputGroupContext();
+  useOnMount(() => {
     setFiller && !isDatepickerFilled && setFiller(true);
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (value) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
       setFiller && isDatepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isDatepickerFilled]);
-  var handleChange = function handleChange(event) {
+  const handleChange = (event) => {
     if (isFilled(event.target)) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
@@ -784,236 +763,243 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       onChange(event);
     }
   };
-  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));
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      "aria-invalid": currentVariant === "error",
+      type: "date",
+      className: "eds-form-control eds-native-date-picker",
+      onChange: handleChange,
+      value,
+      ...rest
+    }
+  );
 });
-
-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 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$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;
+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();
   if (customLocale) locale = customLocale;
-  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
-      }));
+  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
+        })
+      );
     }
     onChange(value);
   };
-  var state = useTimeFieldState(_extends({
-    onChange: handleOnChange,
-    label: label,
-    locale: locale,
+  const state = useTimeFieldState({
+    onChange: handleOnChange2,
+    label,
+    locale,
     value: selectedTime,
-    granularity: (granularity != null ? granularity : showSeconds) ? 'second' : 'minute',
+    granularity: granularity ?? showSeconds ? "second" : "minute",
     hideTimeZone: !showTimeZone,
     isDisabled: disabled || readOnly,
-    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({
+    shouldForceLeadingZeros: true,
+    ...rest
+  });
+  const timeFieldRef = useRef(null);
+  const { labelProps, fieldProps } = useTimeField(
+    { ...rest, label },
+    state,
+    timeFieldRef
+  );
+  const id = useRandomId("timepicker");
+  const getCurrentTime = () => {
+    const getCurrentTimeWithCorrectType = convertValueToType({
       value: now(timeZone),
-      type: forcedReturnType != null ? forcedReturnType : 'ZonedDateTime'
+      type: forcedReturnType ?? "ZonedDateTime"
     });
     return getCurrentTimeWithCorrectType;
   };
-  var handleOnClickArrowButton = function handleOnClickArrowButton(operation) {
-    if (selectedTime === null) return handleOnChange(getCurrentTime());
+  const handleOnClickArrowButton = (operation) => {
+    if (selectedTime === null) return handleOnChange2(getCurrentTime());
     switch (operation) {
-      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
-        }));
+      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
+          })
+        );
     }
   };
-  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');
+  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"
       },
-      onFocus: function onFocus() {
-        return focusSegment(timeFieldRef, 'first');
-      }
-    }), prepend),
-    ref: inputRef,
-    style: style,
-    variant: variant
-  }, React.createElement("span", _extends({
-    ref: timeFieldRef
-  }, fieldProps, {
-    style: {
-      display: 'contents'
+      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") : "") : "" })
+      ]
     }
-  }), 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') : '') : '')));
+  ) });
 };
-
-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 () {
+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(() => {
     setFiller && !isTimepickerFilled && setFiller(true);
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (value) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
       setFiller && isTimepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isTimepickerFilled]);
-  var handleChange = function handleChange(event) {
+  const handleChange = (event) => {
     if (isFilled(event.target)) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
@@ -1023,211 +1009,224 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       onChange(event);
     }
   };
-  return React.createElement("input", _extends({
-    ref: ref,
-    "aria-invalid": currentVariant === 'error',
-    type: "time",
-    className: "eds-form-control",
-    onChange: handleChange,
-    value: value
-  }, rest));
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      "aria-invalid": currentVariant === "error",
+      type: "time",
+      className: "eds-form-control",
+      onChange: handleChange,
+      value,
+      ...rest
+    }
+  );
 });
-
-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,
+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,
     value: selectedTime,
     hideTimeZone: true,
     isDisabled: disabled,
-    isReadOnly: readOnly
-  }, rest));
-  var _useTimeField = useTimeField(_extends({}, rest, {
-      label: label
-    }), state, timeFieldRef),
-    labelProps = _useTimeField.labelProps,
-    fieldProps = _useTimeField.fieldProps;
-  useEffect(function () {
+    isReadOnly: readOnly,
+    ...rest
+  });
+  const { labelProps, fieldProps } = useTimeField(
+    { ...rest, label },
+    state,
+    timeFieldRef
+  );
+  useEffect(() => {
     updateInputWithSelectedTime();
-    // @ts-expect-error TimeType and MappedTimeValue<TimeType> is actually the same
     if (selectedTime !== null) setLastValidSelectedTime(selectedTime);
-  }, [selectedTime == null ? void 0 : selectedTime.toString()]);
-  var updateInputWithSelectedTime = function updateInputWithSelectedTime() {
-    var selectedTimeString = getStringFromTimeValue(selectedTime);
+  }, [selectedTime?.toString()]);
+  const updateInputWithSelectedTime = () => {
+    const selectedTimeString = getStringFromTimeValue(selectedTime);
     setInputText(selectedTimeString);
-    var timeFieldIsFocused = document.activeElement === (timeFieldRef == null ? void 0 : timeFieldRef.current);
-    if (selectedTimeString === '' && !timeFieldIsFocused) addPlaceholderToInput();
+    const timeFieldIsFocused = document.activeElement === timeFieldRef?.current;
+    if (selectedTimeString === "" && !timeFieldIsFocused)
+      addPlaceholderToInput();
   };
-  var getStringFromTimeValue = function getStringFromTimeValue(timeValue) {
-    if (timeValue === null) return '';
-    var timeObject = 'day' in timeValue ? toTime(timeValue) : timeValue;
+  const getStringFromTimeValue = (timeValue) => {
+    if (timeValue === null) return "";
+    const timeObject = "day" in timeValue ? toTime(timeValue) : timeValue;
     if (showSeconds) return timeObject.toString().slice(0, 8);
     return timeObject.toString().slice(0, 5);
   };
-  var addPlaceholderToInput = function addPlaceholderToInput() {
-    if (showSeconds) setInputText('–– : –– : ––');else setInputText('–– : ––');
+  const addPlaceholderToInput = () => {
+    if (showSeconds) setInputText("–– : –– : ––");
+    else setInputText("–– : ––");
   };
-  var handleChangeTime = function handleChangeTime() {
-    var newTime = getValueForOnChangeFromInput();
-    if (newTime === inputResult.INVALID) {
+  const handleChangeTime = () => {
+    const newTime = getValueForOnChangeFromInput();
+    if (newTime === 1) {
       return updateInputWithSelectedTime();
     }
-    if ((newTime == null ? void 0 : newTime.toString()) !== (selectedTime == null ? void 0 : selectedTime.toString())) onChange == null || onChange(newTime);
+    if (newTime?.toString() !== selectedTime?.toString()) onChange?.(newTime);
   };
-  var getValueForOnChangeFromInput = function getValueForOnChangeFromInput() {
-    var formatedTimeString = formatTimeString(inputText);
-    var newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
-    if (newTimeObject === inputResult.INVALID) {
-      return inputResult.INVALID;
+  const getValueForOnChangeFromInput = () => {
+    const formatedTimeString = formatTimeString(inputText);
+    const newTimeObject = formatedTimeStringToTimeObject(formatedTimeString);
+    if (newTimeObject === 1) {
+      return 1;
     }
-    if (newTimeObject === inputResult.RESET_TIME) {
+    if (newTimeObject === 0) {
       return null;
     }
-    var updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
+    const updatedSelectedTime = getSelectedTimeWithTimeFromObject(newTimeObject);
     return updatedSelectedTime;
   };
-  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'
+  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;
     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 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';
+    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";
       return stringSlice;
-    }();
-    var timeStringWithColon = hourString.padStart(2, '0') + ':' + minuteString + (showSeconds ? ':' + secondString : '');
+    })();
+    const timeStringWithColon = hourString.padStart(2, "0") + ":" + minuteString + (showSeconds ? ":" + secondString : "");
     return timeStringWithColon;
   };
-  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))) {
+  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))) {
       try {
-        var timeObject = parseTime(formatedTimeString);
+        const timeObject = parseTime(formatedTimeString);
         return timeObject;
       } catch (e) {
-        return inputResult.INVALID;
+        return 1;
       }
     }
-    return inputResult.INVALID;
+    return 1;
   };
-  var getSelectedTimeWithTimeFromObject = function getSelectedTimeWithTimeFromObject(newTime) {
-    var selectedTimeWithUpdateTime = (lastValidSelectedTime != null ? lastValidSelectedTime : new Time()).set({
+  const getSelectedTimeWithTimeFromObject = (newTime) => {
+    const selectedTimeWithUpdateTime = (lastValidSelectedTime ?? new Time()).set({
       hour: newTime.hour,
       minute: newTime.minute,
       second: newTime.second
     });
     return selectedTimeWithUpdateTime;
   };
-  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();
+  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();
+        }
       },
-      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)));
+      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
 };
-
-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