@entur/datepicker 4.0.0-RC.0 → 4.0.0-RC.2

package/dist/datepicker.esm.js

@@ -1,22 +1,16 @@
-import { mergeRefs, useRandomId, ConditionalWrapper, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import React, { useRef, useState } from 'react';
-import ReactDatepicker, { registerLocale } from 'react-datepicker';
-import { parse, isSameDay } from 'date-fns';
-import { nb } from 'date-fns/locale';
-import classNames from 'classnames';
-import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon } from '@entur/icons';
-import { Heading3 } from '@entur/typography';
-import { IconButton } from '@entur/button';
-import { TextField, BaseFormControl, useVariant, useInputGroupContext, isFilled } from '@entur/form';
-import { Tooltip } from '@entur/tooltip';
-import 'react-datepicker/dist/react-datepicker.css';
+import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import React, { useRef } 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 } from '@entur/form';
 import { ZonedDateTime, parseAbsolute, Time, CalendarDate, CalendarDateTime, getLocalTimeZone, GregorianCalendar, isEqualDay, now, getWeeksInMonth } from '@internationalized/date';
 import { useCalendarCell, useCalendarGrid, useCalendar } from '@react-aria/calendar';
 import { useCalendarState } from '@react-stately/calendar';
+import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon } 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';
@@ -24,484 +18,47 @@ import { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
-var DatePickerHeader = function DatePickerHeader(_ref) {
-  var _date$getMonth;
-
-  var date = _ref.date,
-      decreaseMonth = _ref.decreaseMonth,
-      increaseMonth = _ref.increaseMonth,
-      prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
-      nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
-      nextMonthAriaLabel = _ref.nextMonthAriaLabel,
-      previousMonthAriaLabel = _ref.previousMonthAriaLabel,
-      locale = _ref.locale;
-  var currentMonthIndex = (_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0;
-  return React.createElement("div", {
-    className: "eds-datepicker__calender__header"
-  }, React.createElement(IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--left",
-    onClick: decreaseMonth,
-    disabled: prevMonthButtonDisabled,
-    "aria-label": previousMonthAriaLabel + " (" + getMonthName(currentMonthIndex - 1, locale) + ")"
-  }, React.createElement(LeftArrowIcon, null)), React.createElement(Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, getMonthName(currentMonthIndex, locale)), React.createElement(Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, date == null ? void 0 : date.getFullYear()), React.createElement(IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--right",
-    onClick: increaseMonth,
-    disabled: nextMonthButtonDisabled,
-    "aria-label": nextMonthAriaLabel + " (" + getMonthName(currentMonthIndex + 1, locale) + ")"
-  }, React.createElement(RightArrowIcon, null)));
-};
-
-function getMonthName(monthIndex, locale) {
-  var year = new Date().getFullYear();
-  var formatter = new Intl.DateTimeFormat(locale.code, {
-    month: 'long'
-  });
-  return formatter.format(new Date(year, monthIndex));
-}
-
-var _excluded$a = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
-var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var style = _ref.style,
-      label = _ref.label,
-      inputPlaceholder = _ref.inputPlaceholder,
-      prepend = _ref.prepend,
-      feedback = _ref.feedback,
-      variant = _ref.variant,
-      disabled = _ref.disabled,
-      calendarButtonTooltipOpen = _ref.calendarButtonTooltipOpen,
-      calendarButtonTooltipClose = _ref.calendarButtonTooltipClose,
-      hideCalendarButton = _ref.hideCalendarButton,
-      disableLabelAnimation = _ref.disableLabelAnimation,
-      inputRef = _ref.inputRef,
-      calendarButtonId = _ref.calendarButtonId,
-      forwardRef = _ref.forwardRef,
-      toggleCalendarGUI = _ref.toggleCalendarGUI,
-      onKeyDownInput = _ref.onKeyDownInput,
-      onBlurInput = _ref.onBlurInput,
-      selectedDate = _ref.selectedDate,
-      setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
-      setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
-      calendarGUIIsOpen = _ref.calendarGUIIsOpen,
-      onClick = _ref.onClick,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
-  React.useEffect(function () {
-    var _inputRef$current, _inputRef$current2, _inputRef$current3;
-
-    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.addEventListener('keydown', handleOnKeyDown);
-    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.addEventListener('blur', handleOnBlur);
-    (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.addEventListener('focus', handleOnFocus);
-    return function () {
-      var _inputRef$current4, _inputRef$current5, _inputRef$current6;
-
-      (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.removeEventListener('keydown', handleOnKeyDown);
-      (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.removeEventListener('blur', handleOnBlur);
-      (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.removeEventListener('focus', handleOnFocus);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputRef, selectedDate]);
-
-  function handleOnKeyDown(event) {
-    onKeyDownInput(event);
-  }
-
-  function handleOnBlur(event) {
-    onBlurInput(event);
-  }
-
-  var handleOnFocus = function handleOnFocus() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current7;
-
-      return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
-    });
-  };
-
-  var handleOnClickInputField = function handleOnClickInputField(event) {
-    setShouldFocusOnCalendarButtonAfterSelect(false);
-    onClick && onClick(event);
-  };
-
-  var handleOnClickCalendarButton = function handleOnClickCalendarButton() {
-    toggleCalendarGUI();
-    setFocusToCalendarGUI();
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-  };
-
-  var calendarButtonAriaLabel = function calendarButtonAriaLabel() {
-    var _inputRef$current8;
-
-    var buttonStateText = calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen;
-    var currentSelectionText = selectedDate ? ((_inputRef$current8 = inputRef.current) == null ? void 0 : _inputRef$current8.value) + " valgt" : 'Ingen dato valgt';
-    return buttonStateText + ", " + currentSelectionText;
-  };
-
-  return React.createElement(TextField, _extends({
-    style: style,
-    label: label,
-    placeholder: inputPlaceholder,
-    prepend: prepend,
-    feedback: feedback,
-    variant: variant,
-    disableLabelAnimation: disableLabelAnimation,
-    ref: mergeRefs(ref, inputRef, forwardRef),
-    onClick: handleOnClickInputField,
-    ariaAlertOnFeedback: true,
-    append: !hideCalendarButton && React.createElement(Tooltip, {
-      placement: "top",
-      content: calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen,
-      disableHoverListener: disabled,
-      disableFocusListener: disabled
-    }, React.createElement(IconButton, {
-      id: calendarButtonId,
-      type: "button",
-      onClick: handleOnClickCalendarButton,
-      tabIndex: calendarGUIIsOpen() ? -1 : 0,
-      "aria-label": calendarButtonAriaLabel()
-    }, React.createElement(CalendarIcon, null)))
-  }, rest));
-});
-
-var _excluded$9 = ["style", "className", "selectedDate", "label", "placeholder", "onChange", "onKeyDown", "dateFormats", "minDate", "maxDate", "inline", "disabled", "prepend", "feedback", "variant", "validationFeedback", "validationVariant", "disableLabelAnimation", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "hideCalendar", "hideValidation", "weekLabel", "chooseDayAriaLabelPrefix", "previousMonthAriaLabel", "nextMonthAriaLabel", "locale", "open"];
-registerLocale('nb', nb);
-var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var style = _ref.style,
-      className = _ref.className,
-      selectedDate = _ref.selectedDate,
-      label = _ref.label,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'dd.mm.yyyy' : _ref$placeholder,
-      onChange = _ref.onChange,
-      _ref$onKeyDown = _ref.onKeyDown,
-      onKeyDown = _ref$onKeyDown === void 0 ? function () {
-    return null;
-  } : _ref$onKeyDown,
-      _ref$dateFormats = _ref.dateFormats,
-      dateFormats = _ref$dateFormats === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'] : _ref$dateFormats,
-      minDate = _ref.minDate,
-      maxDate = _ref.maxDate,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      disabled = _ref.disabled,
-      prepend = _ref.prepend,
-      _ref$feedback = _ref.feedback,
-      feedback = _ref$feedback === void 0 ? '' : _ref$feedback,
-      variant = _ref.variant,
-      _ref$validationFeedba = _ref.validationFeedback,
-      validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
-      _ref$validationVarian = _ref.validationVariant,
-      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
-      _ref$disableLabelAnim = _ref.disableLabelAnimation,
-      disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
-      _ref$calendarButtonTo = _ref.calendarButtonTooltipOpen,
-      calendarButtonTooltipOpen = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
-      _ref$calendarButtonTo2 = _ref.calendarButtonTooltipClose,
-      calendarButtonTooltipClose = _ref$calendarButtonTo2 === void 0 ? 'Lukk\xa0kalender' : _ref$calendarButtonTo2,
-      _ref$hideCalendarButt = _ref.hideCalendarButton,
-      hideCalendarButton = _ref$hideCalendarButt === void 0 ? false : _ref$hideCalendarButt,
-      _ref$hideCalendar = _ref.hideCalendar,
-      hideCalendar = _ref$hideCalendar === void 0 ? false : _ref$hideCalendar,
-      _ref$hideValidation = _ref.hideValidation,
-      hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
-      _ref$weekLabel = _ref.weekLabel,
-      weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
-      _ref$chooseDayAriaLab = _ref.chooseDayAriaLabelPrefix,
-      chooseDayAriaLabelPrefix = _ref$chooseDayAriaLab === void 0 ? 'Velg' : _ref$chooseDayAriaLab,
-      _ref$previousMonthAri = _ref.previousMonthAriaLabel,
-      previousMonthAriaLabel = _ref$previousMonthAri === void 0 ? 'Forrige måned' : _ref$previousMonthAri,
-      _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
-      nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Neste måned' : _ref$nextMonthAriaLab,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? nb : _ref$locale,
-      open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  var datepickerId = useRandomId('eds-datepicker');
-  var datepickerRef = useRef(null);
-  var inputRef = React.useRef(null);
-  var calendarButton = document.getElementById(datepickerId + '-button');
-
-  var _useState = useState(false),
-      showValidation = _useState[0],
-      setShowValidation = _useState[1];
-
-  var _useState2 = useState(false),
-      shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
-      setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
-  React.useEffect(function () {
-    return validateInput();
-  }, [selectedDate]);
-
-  var handleOnChange = function handleOnChange(date, event) {
-    var _inputRef$current;
-
-    if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
-      calendarButton == null ? void 0 : calendarButton.focus();
-      setShouldFocusOnCalendarButtonAfterSelect(false);
-    } else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-
-    onChange(date, event);
-  };
-
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    setShowValidation(false);
-
-    if (event.key === 'Enter') {
-      if (!datePickerGUIIsOpen()) {
-        // onBlurInput will validate if calendar is open
-        validateInput();
-        forceUpdateInputFormat();
-      }
-
-      focusAndSelectInputField();
-    } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
-      forceUpdateInputFormat();
-    } else if (event.key === 'Escape') {
-      forceUpdateInputFormat();
-      focusAndSelectInputField();
-      if (datePickerGUIIsOpen()) toggleCalendarGUI();
-    }
-
-    onKeyDown(event);
-  };
-
-  var handleOnClickOutside = function handleOnClickOutside() {
-    return setShouldFocusOnCalendarButtonAfterSelect(false);
-  };
-
-  var handleOnBlurInput = function handleOnBlurInput() {
-    if (datePickerGUIIsOpen()) return;
-    validateInput();
-    forceUpdateInputFormat();
-  };
-
-  var validateInput = function validateInput() {
-    var _inputRef$current2;
-
-    setShowValidation(false);
-    var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value;
-    if (!inputValue) return;
-    var inputValueParsedWithAllDateFormats = dateFormats.map(function (format) {
-      return parse(inputValue, format, new Date(), {
-        locale: locale
-      });
-    });
-    var parsedDateFromInputIsTheSameAsSelectedDate = selectedDate && inputValueParsedWithAllDateFormats.some(function (dateFormat) {
-      return isSameDay(dateFormat, selectedDate);
-    });
-
-    if (parsedDateFromInputIsTheSameAsSelectedDate) {
-      // valid date inputted
-      setShowValidation(false);
-    } else {
-      // invalid date inputted
-      setShowValidation(true);
-    }
-  };
-
-  var getFeedbackAndVariant = function getFeedbackAndVariant() {
-    if (feedback) return {
-      feedback: feedback,
-      variant: variant
-    };
-    if (!hideValidation && showValidation) return {
-      feedback: validationFeedback,
-      variant: validationVariant
-    };
-    return {
-      feedback: '',
-      variant: undefined
-    };
-  };
-
-  var focusAndSelectInputField = function focusAndSelectInputField() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current3;
-
-      return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
-    });
-  };
-
-  var forceUpdateInputFormat = function forceUpdateInputFormat() {
-    var _datepickerRef$curren;
-
-    return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
-      inputValue: null
-    });
-  };
-
-  var toggleCalendarGUI = function toggleCalendarGUI() {
-    var _datepickerRef$curren2;
-
-    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
-  };
-
-  var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
-    if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
-
-    requestAnimationFrame(function () {
-      var _datepickerRef$curren3;
-
-      var datepickerGUIWrapper = // @ts-expect-error .calendar does actually exist in ReactDatePicker ref
-      (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.calendar.componentNode;
-      var dateToSetFocusTo = selectedDate ? datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[tabindex="0"]') : datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[aria-current="date"]');
-
-      if (dateToSetFocusTo !== null) {
-        var _datepickerRef$curren4;
-
-        (_datepickerRef$curren4 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren4.setBlur();
-        dateToSetFocusTo.focus({
-          preventScroll: true
-        });
-      }
-    });
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-    setShowValidation(false);
-  };
-
-  var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
-    var _datepickerRef$curren5;
-
-    return (_datepickerRef$curren5 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren5.isCalendarOpen();
-  };
-
-  return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
-    selected: selectedDate,
-    minDate: minDate,
-    maxDate: maxDate,
-    dateFormat: dateFormats,
-    showWeekNumbers: true,
-    weekLabel: weekLabel,
-    onChange: handleOnChange,
-    onClickOutside: handleOnClickOutside,
-    id: datepickerId,
-    ariaLabelledBy: datepickerId,
-    showPopperArrow: false,
-    locale: locale,
-    inline: inline,
-    disabled: disabled,
-    preventOpenOnFocus: true,
-    chooseDayAriaLabelPrefix: chooseDayAriaLabelPrefix,
-    open: hideCalendar ? false : open,
-    ref: datepickerRef,
-    calendarClassName: "eds-datepicker__calender",
-    dayClassName: function dayClassName() {
-      return 'eds-datepicker__calender__day';
-    },
-    weekDayClassName: function weekDayClassName() {
-      return 'eds-datepicker__calender__day-name';
-    },
-    className: classNames(className, 'eds-datepicker__input'),
-    highlightDates: [{
-      'eds-datepicker__calender__day--today': [new Date()]
-    }, {
-      'eds-datepicker__calender__day--selected': selectedDate ? [selectedDate] : []
-    }],
-    renderCustomHeader: function renderCustomHeader(_ref2) {
-      var date = _ref2.date,
-          changeYear = _ref2.changeYear,
-          changeMonth = _ref2.changeMonth,
-          decreaseMonth = _ref2.decreaseMonth,
-          increaseMonth = _ref2.increaseMonth,
-          prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
-          nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
-      return React.createElement(DatePickerHeader, {
-        date: date,
-        changeYear: changeYear,
-        changeMonth: changeMonth,
-        increaseMonth: increaseMonth,
-        decreaseMonth: decreaseMonth,
-        prevMonthButtonDisabled: prevMonthButtonDisabled,
-        nextMonthButtonDisabled: nextMonthButtonDisabled,
-        previousMonthAriaLabel: previousMonthAriaLabel,
-        nextMonthAriaLabel: nextMonthAriaLabel,
-        locale: locale
-      });
-    },
-    customInput: React.createElement(DatePickerInput, {
-      style: style,
-      label: label,
-      inputPlaceholder: placeholder,
-      calendarButtonTooltipOpen: calendarButtonTooltipOpen,
-      calendarButtonTooltipClose: calendarButtonTooltipClose,
-      prepend: prepend,
-      feedback: getFeedbackAndVariant().feedback,
-      variant: getFeedbackAndVariant().variant,
-      inputRef: inputRef,
-      calendarButtonId: datepickerId + '-button',
-      forwardRef: ref,
-      onKeyDownInput: handleOnKeyDown,
-      onBlurInput: handleOnBlurInput,
-      onFocus: undefined,
-      toggleCalendarGUI: toggleCalendarGUI,
-      setFocusToCalendarGUI: setFocusToCalendarGUI,
-      setShouldFocusOnCalendarButtonAfterSelect: setShouldFocusOnCalendarButtonAfterSelect,
-      calendarGUIIsOpen: datePickerGUIIsOpen,
-      disableLabelAnimation: disableLabelAnimation,
-      hideCalendarButton: hideCalendarButton,
-      selectedDate: selectedDate
-    })
-  }, rest)));
-});
-
 var FieldSegment = function FieldSegment(_ref) {
   var segment = _ref.segment,
-      state = _ref.state;
+    state = _ref.state;
   var ref = useRef(null);
-
   var _useDateSegment = useDateSegment(segment, state, ref),
-      segmentProps = _useDateSegment.segmentProps;
-
+    segmentProps = _useDateSegment.segmentProps;
   var is12HourFormatted = state.segments.some(function (segment) {
     return segment.text === 'AM' || segment.text === 'PM';
   });
-
   var segmentDisplayText = function segmentDisplayText() {
-    if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
-
+    if (is12HourFormatted) return segment.text;
+    // if number add '0' padding to start when one digit
     if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
     return segment.text;
   };
-
   return React.createElement("div", _extends({}, segmentProps, {
     ref: ref,
     className: classNames('eds-date-and-time-field__segment', {
@@ -521,24 +78,19 @@ var FieldSegment = function FieldSegment(_ref) {
  * @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 | CalendarDate} et av Time- eller DateValue-objektene med verdier fra date
  */
-
 var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
   if (noDateOnlyTime === void 0) {
     noDateOnlyTime = false;
   }
-
   if (noTimeOnlyDate === void 0) {
     noTimeOnlyDate = false;
   }
-
   if (timeZone) {
     if (offset) {
       return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
     }
-
     return parseAbsolute(date.toISOString(), timeZone);
   }
-
   if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
   if (noTimeOnlyDate) return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
@@ -550,54 +102,55 @@ var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date, noD
  * @returns {Date} et Date-objekt med verdier fra time
  */
 // This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
-
 var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
   // @ts-expect-error .day does not exist on Time-object
   if (!value.day) {
     // type is Time
-    var date = new Date(); // @ts-expect-error hour does not exist on CalendarDate
-
-    date.setHours(value.hour); // @ts-expect-error minute does not exist on CalendarDate
-
-    date.setMinutes(value.minute); // @ts-expect-error second does not exist on CalendarDate
-
+    var date = new Date();
+    // @ts-expect-error hour does not exist on CalendarDate
+    date.setHours(value.hour);
+    // @ts-expect-error minute does not exist on CalendarDate
+    date.setMinutes(value.minute);
+    // @ts-expect-error second does not exist on CalendarDate
     date.setSeconds(value.second);
     return date;
-  } // @ts-expect-error .day does not exist on Time-object
-
-
+  }
+  // @ts-expect-error .day does not exist on Time-object
   if (!value.hour) {
     // type is CalendarDate
     // @ts-expect-error .toDate(timeZone) does not exist in type Time
     return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : getLocalTimeZone());
-  } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
-
-
+  }
+  // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
   if (!value.timeZone) {
     // type is CalendarDateTime
-    if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
+    if (timeZoneForCalendarDateTime)
+      // @ts-expect-error .toDate(timeZone) does not exist in type Time
       return value.toDate(timeZoneForCalendarDateTime);
-    return new Date( // @ts-expect-error not in type Time
-    value.year, // @ts-expect-error not in type Time
-    value.month - 1, // @ts-expect-error not in type Time
-    value.day, // @ts-expect-error not in type CalendarDate
-    value.hour, // @ts-expect-error not in type CalendarDate
-    value.minute, // @ts-expect-error not in type CalendarDate
+    return new Date(
+    // @ts-expect-error not in type Time
+    value.year,
+    // @ts-expect-error not in type Time
+    value.month - 1,
+    // @ts-expect-error not in type Time
+    value.day,
+    // @ts-expect-error not in type CalendarDate
+    value.hour,
+    // @ts-expect-error not in type CalendarDate
+    value.minute,
+    // @ts-expect-error not in type CalendarDate
     value.second);
-  } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
-
-
+  }
+  // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
   return value.toDate();
 };
 var createCalendar = function createCalendar(identifier) {
   if (identifier === void 0) {
     identifier = 'gregory';
   }
-
   switch (identifier) {
     case 'gregory':
       return new GregorianCalendar();
-
     default:
       throw new Error("Unsupported calendar " + identifier);
   }
@@ -610,29 +163,27 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
 var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
 var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var value = _ref.selectedDate,
-      label = _ref.label,
-      customLocale = _ref.locale,
-      showTimeZone = _ref.showTimeZone,
-      showTime = _ref.showTime,
-      _ref$granularity = _ref.granularity,
-      granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
-      disabled = _ref.disabled,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
-      _ref$validationVarian = _ref.validationVariant,
-      validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
-      _ref$validationFeedba = _ref.validationFeedback,
-      validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
-      labelTooltip = _ref.labelTooltip,
-      style = _ref.style,
-      className = _ref.className,
-      parentLabelProps = _ref.labelProps,
-      append = _ref.append,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
+    label = _ref.label,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    showTime = _ref.showTime,
+    _ref$granularity = _ref.granularity,
+    granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
+    disabled = _ref.disabled,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    _ref$validationVarian = _ref.validationVariant,
+    validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
+    _ref$validationFeedba = _ref.validationFeedback,
+    validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
+    labelTooltip = _ref.labelTooltip,
+    style = _ref.style,
+    className = _ref.className,
+    parentLabelProps = _ref.labelProps,
+    append = _ref.append,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useDateFieldState(_extends({}, rest, {
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
@@ -641,14 +192,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     granularity: showTime ? 'minute' : granularity
   }));
   var dateFieldRef = useRef(null);
-
   var _useDateField = useDateField(_extends({}, rest, {
-    label: label,
-    isDisabled: disabled || rest.isDisabled
-  }), state, dateFieldRef),
-      labelProps = _useDateField.labelProps,
-      fieldProps = _useDateField.fieldProps;
-
+      label: label,
+      isDisabled: disabled || rest.isDisabled
+    }), state, dateFieldRef),
+    labelProps = _useDateField.labelProps,
+    fieldProps = _useDateField.fieldProps;
   var id = useRandomId('datefield');
   return React.createElement(ConditionalWrapper, {
     condition: customLocale !== undefined,
@@ -684,15 +233,12 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 var _excluded$7 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var ref = useRef(null);
-
   var _useButton = useButton(props, ref),
-      buttonProps = _useButton.buttonProps;
-
+    buttonProps = _useButton.buttonProps;
   return React.createElement(IconButton, _extends({}, buttonProps, {
     ref: ref,
     className: className,
@@ -703,28 +249,24 @@ var CalendarButton = function CalendarButton(_ref) {
 var _excluded$6 = ["state", "date", "onSelectedCellClick"];
 var CalendarCell = function CalendarCell(_ref) {
   var _state$timeZone;
-
   var state = _ref.state,
-      date = _ref.date,
-      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-    return;
-  } : _ref$onSelectedCellCl,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
+    date = _ref.date,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   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;
-
+      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;
   return React.createElement("td", _extends({}, cellProps, {
     className: "eds-datepicker__calendar__grid__cell__td"
   }), React.createElement("div", _extends({}, buttonProps, {
@@ -747,26 +289,21 @@ var CalendarCell = function CalendarCell(_ref) {
 var _excluded$5 = ["state", "navigationDescription", "onSelectedCellClick"];
 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,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
+    navigationDescription = _ref.navigationDescription,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var calendarGridId = useRandomId('eds-calendar');
-
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var _useCalendarGrid = useCalendarGrid(rest, state),
-      gridProps = _useCalendarGrid.gridProps,
-      headerProps = _useCalendarGrid.headerProps,
-      weekDays = _useCalendarGrid.weekDays;
-
+    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() === 'no-no' || locale.toLowerCase() === 'no') return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
     if (weekDays.toString() === 'M,T,W,T,F,S,S') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
@@ -774,13 +311,11 @@ var CalendarGrid = function CalendarGrid(_ref) {
       return day.toLowerCase();
     });
   };
-
   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';
   };
-
   return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
     cellSpacing: "0",
     className: "eds-datepicker__calendar__grid"
@@ -810,30 +345,26 @@ var CalendarGrid = function CalendarGrid(_ref) {
 var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
 var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-      customLocale = _ref.locale,
-      style = _ref.style,
-      navigationDescription = _ref.navigationDescription,
-      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
-      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
-    return;
-  } : _ref$onSelectedCellCl,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
+    customLocale = _ref.locale,
+    style = _ref.style,
+    navigationDescription = _ref.navigationDescription,
+    _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+    onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+      return;
+    } : _ref$onSelectedCellCl,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   var state = useCalendarState(_extends({}, rest, {
     onChange: onChange,
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar
   }));
-
   var _useCalendar = useCalendar(rest, state),
-      calendarProps = _useCalendar.calendarProps,
-      prevButtonProps = _useCalendar.prevButtonProps,
-      nextButtonProps = _useCalendar.nextButtonProps,
-      title = _useCalendar.title;
-
+    calendarProps = _useCalendar.calendarProps,
+    prevButtonProps = _useCalendar.prevButtonProps,
+    nextButtonProps = _useCalendar.nextButtonProps,
+    title = _useCalendar.title;
   return React.createElement(ConditionalWrapper, {
     condition: customLocale,
     wrapper: function wrapper(child) {
@@ -863,85 +394,76 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 
 var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
-var DatePickerBeta = function DatePickerBeta(_ref) {
+var DatePicker = function DatePicker(_ref) {
   var value = _ref.selectedDate,
-      onChange = _ref.onChange,
-      locale = _ref.locale,
-      isDisabled = _ref.disabled,
-      showTime = _ref.showTime,
-      _ref$showTimeZone = _ref.showTimeZone,
-      showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
-      className = _ref.className,
-      variant = _ref.variant,
-      feedback = _ref.feedback,
-      validationVariant = _ref.validationVariant,
-      validationFeedback = _ref.validationFeedback,
-      _ref$disableModal = _ref.disableModal,
-      disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
-      labelTooltip = _ref.labelTooltip,
-      navigationDescription = _ref.navigationDescription,
-      minValue = _ref.minDate,
-      maxValue = _ref.maxDate,
-      _ref$modalTreshold = _ref.modalTreshold,
-      modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+    onChange = _ref.onChange,
+    locale = _ref.locale,
+    isDisabled = _ref.disabled,
+    showTime = _ref.showTime,
+    _ref$showTimeZone = _ref.showTimeZone,
+    showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
+    className = _ref.className,
+    variant = _ref.variant,
+    feedback = _ref.feedback,
+    validationVariant = _ref.validationVariant,
+    validationFeedback = _ref.validationFeedback,
+    _ref$disableModal = _ref.disableModal,
+    disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
+    labelTooltip = _ref.labelTooltip,
+    navigationDescription = _ref.navigationDescription,
+    minValue = _ref.minDate,
+    maxValue = _ref.maxDate,
+    _ref$modalTreshold = _ref.modalTreshold,
+    modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = useRef(null);
   var calendarRef = useRef(null);
   var dateFieldRef = useRef(null);
-
   var _useWindowDimensions = useWindowDimensions(),
-      width = _useWindowDimensions.width;
-
+    width = _useWindowDimensions.width;
   var state = useDatePickerState(_extends({}, rest, {
     minValue: minValue,
     maxValue: maxValue,
     value: value,
     onChange: onChange
   }));
-
   var _useDatePicker = useDatePicker(_extends({
-    isDisabled: isDisabled,
-    minValue: minValue,
-    maxValue: maxValue,
-    autoFocus: true
-  }, rest), 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
-
-
+      isDisabled: isDisabled,
+      minValue: minValue,
+      maxValue: maxValue
+    }, rest), 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: autoUpdate,
-    placement: 'bottom-start',
-    middleware: [offset(space.extraSmall), flip(), shift({
-      padding: space.extraSmall
-    })]
-  }),
-      x = _useFloating.x,
-      y = _useFloating.y,
-      reference = _useFloating.reference,
-      floating = _useFloating.floating,
-      strategy = _useFloating.strategy;
-
+      whileElementsMounted: autoUpdate,
+      placement: 'bottom-start',
+      middleware: [offset(space.extraSmall), flip(), shift({
+        padding: space.extraSmall
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy;
   var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
     // Necessary to avoid state update on unmounted component
     requestAnimationFrame(function () {
       calendarProps.onChange && calendarProps.onChange(newSelectedDate);
     });
   };
-
   useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
   useOnEscape(calendarRef, function () {
     state.setOpen(false);
   });
-
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
     disabled: calendarProps.isDisabled,
     navigationDescription: navigationDescription,
@@ -950,7 +472,6 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
     },
     onChange: onChangeCalendar
   });
-
   var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
     // styling for floating-UI popover
@@ -1019,21 +540,20 @@ var DatePickerBeta = function DatePickerBeta(_ref) {
 };
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
-    _excluded2$1 = ["onChange", "variant", "value"];
+  _excluded2$1 = ["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$2);
-
+    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$2);
   var nativedatepickerId = useRandomId('eds-nativetimepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -1054,17 +574,14 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
-      variant = _ref2.variant,
-      value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-
+    variant = _ref2.variant,
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isDatepickerFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isDatepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
     setFiller && !isDatepickerFilled && setFiller(true);
   });
@@ -1075,19 +592,16 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       setFiller && isDatepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isDatepickerFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isDatepickerFilled && setFiller(true);
     } else {
       setFiller && isDatepickerFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React.createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',
@@ -1100,9 +614,9 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
-      onClick = _ref.onClick,
-      disabled = _ref.disabled,
-      ariaLabel = _ref['aria-label'];
+    onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    ariaLabel = _ref['aria-label'];
   return React.createElement(IconButton, {
     className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
       'eds-timepicker__arrowbutton--disabled': disabled
@@ -1118,27 +632,25 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
 var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
 var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selectedTime = _ref.selectedTime,
-      onChange = _ref.onChange,
-      disabled = _ref.disabled,
-      className = _ref.className,
-      style = _ref.style,
-      label = _ref.label,
-      labelTooltip = _ref.labelTooltip,
-      feedback = _ref.feedback,
-      variant = _ref.variant,
-      customLocale = _ref.locale,
-      showTimeZone = _ref.showTimeZone,
-      _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,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    style = _ref.style,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    customLocale = _ref.locale,
+    showTimeZone = _ref.showTimeZone,
+    _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,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var _useLocale = useLocale(),
-      locale = _useLocale.locale;
-
+    locale = _useLocale.locale;
   if (customLocale) locale = customLocale;
   var state = useTimeFieldState(_extends({
     onChange: onChange,
@@ -1149,15 +661,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isDisabled: disabled
   }, rest));
   var timeFieldRef = useRef(null);
-
   var _useTimeField = useTimeField(_extends({}, rest, {
-    label: label
-  }), state, timeFieldRef),
-      labelProps = _useTimeField.labelProps,
-      fieldProps = _useTimeField.fieldProps;
-
+      label: label
+    }), state, timeFieldRef),
+    labelProps = _useTimeField.labelProps,
+    fieldProps = _useTimeField.fieldProps;
   var id = useRandomId('timepicker');
-
   var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
     if (someSegmentIsUndefined) {
       setTimeToNearestMinuteIncrement();
@@ -1165,11 +674,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       addMinutesToSelectedTime(minutes);
     }
   };
-
   var someSegmentIsUndefined = state.segments.some(function (segment) {
     return segment.text === '––';
   });
-
   var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
     var currentTime = now(getLocalTimeZone());
     var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
@@ -1178,15 +685,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     onChange(newTime);
   };
-
   var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
     var _state$value;
-
     state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
       minutes: minutes
     }));
   };
-
   return React.createElement(I18nProvider, {
     locale: locale
   }, React.createElement("div", {
@@ -1228,17 +732,16 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 
 var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
-    _excluded2 = ["onChange", "value"];
+  _excluded2 = ["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);
-
+    style = _ref.style,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    feedback = _ref.feedback,
+    variant = _ref.variant,
+    prepend = _ref.prepend,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var nativetimepickerId = useRandomId('eds-native-timepicker');
   return React.createElement(BaseFormControl, {
     style: style,
@@ -1257,16 +760,13 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onChange = _ref2.onChange,
-      value = _ref2.value,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
+    value = _ref2.value,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var contextVariant = useVariant();
   var currentVariant = rest.variant || contextVariant;
-
   var _useInputGroupContext = useInputGroupContext(),
-      isTimepickerFilled = _useInputGroupContext.isFilled,
-      setFiller = _useInputGroupContext.setFilled;
-
+    isTimepickerFilled = _useInputGroupContext.isFilled,
+    setFiller = _useInputGroupContext.setFilled;
   useOnMount(function () {
     setFiller && !isTimepickerFilled && setFiller(true);
   });
@@ -1277,19 +777,16 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       setFiller && isTimepickerFilled && setFiller(false);
     }
   }, [value, setFiller, isTimepickerFilled]);
-
   var handleChange = function handleChange(event) {
     if (isFilled(event.target)) {
       setFiller && !isTimepickerFilled && setFiller(true);
     } else {
       setFiller && isTimepickerFilled && setFiller(false);
     }
-
     if (onChange) {
       onChange(event);
     }
   };
-
   return React.createElement("input", _extends({
     ref: ref,
     "aria-invalid": currentVariant === 'error',
@@ -1302,5 +799,5 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 
 warnAboutMissingStyles('datepicker', 'form', 'icons');
 
-export { Calendar, DateField, DatePicker, DatePickerBeta, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeOrDateValue, timeOrDateValueToNativeDate };
+export { Calendar, DateField, DatePicker, NativeDatePicker, NativeTimePicker, TimePicker, ariaLabelIfNorwegian, createCalendar, nativeDateToTimeOrDateValue, timeOrDateValueToNativeDate };
 //# sourceMappingURL=datepicker.esm.js.map