@entur/datepicker 3.0.7 → 4.0.0-RC.1

package/dist/datepicker.cjs.development.js

@@ -4,26 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('@entur/utils');
 var React = require('react');
-var ReactDatepicker = require('react-datepicker');
-var dateFns = require('date-fns');
-var locale = require('date-fns/locale');
-var classNames = require('classnames');
-var icons = require('@entur/icons');
-var typography = require('@entur/typography');
-var button = require('@entur/button');
-var form = require('@entur/form');
-var tooltip = require('@entur/tooltip');
-require('react-datepicker/dist/react-datepicker.css');
+var datepicker$1 = require('@react-stately/datepicker');
 var datepicker = require('@react-aria/datepicker');
 var i18n = require('@react-aria/i18n');
-var datepicker$1 = require('@react-stately/datepicker');
+var classNames = require('classnames');
+var form = require('@entur/form');
 var date = require('@internationalized/date');
+var calendar = require('@react-aria/calendar');
+var calendar$1 = require('@react-stately/calendar');
+var icons = require('@entur/icons');
+var button = require('@react-aria/button');
+var button$1 = require('@entur/button');
+var a11y = require('@entur/a11y');
+var reactDom = require('@floating-ui/react-dom');
+var FocusLock = require('react-focus-lock');
+var tokens = require('@entur/tokens');
+var modal = require('@entur/modal');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDatepicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatepicker);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -58,432 +60,540 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   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__default["default"].createElement("div", {
-    className: "eds-datepicker__calender__header"
-  }, React__default["default"].createElement(button.IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--left",
-    onClick: decreaseMonth,
-    disabled: prevMonthButtonDisabled,
-    "aria-label": previousMonthAriaLabel + " (" + getMonthName(currentMonthIndex - 1, locale) + ")"
-  }, React__default["default"].createElement(icons.LeftArrowIcon, null)), React__default["default"].createElement(typography.Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, getMonthName(currentMonthIndex, locale)), React__default["default"].createElement(typography.Heading3, {
-    className: "eds-datepicker__calender__header__month-text"
-  }, date == null ? void 0 : date.getFullYear()), React__default["default"].createElement(button.IconButton, {
-    type: "button",
-    className: "eds-datepicker__calender__header__month-button--right",
-    onClick: increaseMonth,
-    disabled: nextMonthButtonDisabled,
-    "aria-label": nextMonthAriaLabel + " (" + getMonthName(currentMonthIndex + 1, locale) + ")"
-  }, React__default["default"].createElement(icons.RightArrowIcon, null)));
-};
+var FieldSegment = function FieldSegment(_ref) {
+  var segment = _ref.segment,
+      state = _ref.state;
+  var ref = React.useRef(null);
+
+  var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
+      segmentProps = _useDateSegment.segmentProps;
 
-function getMonthName(monthIndex, locale) {
-  var year = new Date().getFullYear();
-  var formatter = new Intl.DateTimeFormat(locale.code, {
-    month: 'long'
+  var is12HourFormatted = state.segments.some(function (segment) {
+    return segment.text === 'AM' || segment.text === 'PM';
   });
-  return formatter.format(new Date(year, monthIndex));
-}
 
-var _excluded$4 = ["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__default["default"].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$4);
+  var segmentDisplayText = function segmentDisplayText() {
+    if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
 
-  React__default["default"].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);
+    if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
+    return segment.text;
+  };
+
+  return React__default["default"].createElement("div", _extends({}, segmentProps, {
+    ref: ref,
+    className: classNames__default["default"]('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 === '.'
+    }),
+    tabIndex: state.isDisabled ? -1 : segmentProps.tabIndex
+  }), segmentDisplayText());
+};
+
+/**
+ * Tar inn et JS Date-objekt og returnerer et av Date- eller TimeValue-objektene fra @internationalized/date-pakken
+ * @param {Date} date JS Date-objekt som ønskes konvertert til et Date- eller 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 {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 {Time | CalendarDateTime | ZonedDateTime | CalendarDate} et av Time- eller DateValue-objektene med verdier fra date
+ */
+
+var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date$1, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
+  if (noDateOnlyTime === void 0) {
+    noDateOnlyTime = false;
   }
 
-  function handleOnBlur(event) {
-    onBlurInput(event);
+  if (noTimeOnlyDate === void 0) {
+    noTimeOnlyDate = false;
   }
 
-  var handleOnFocus = function handleOnFocus() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current7;
+  if (timeZone) {
+    if (offset) {
+      return new date.ZonedDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), timeZone, offset, date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
+    }
 
-      return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
-    });
-  };
+    return date.parseAbsolute(date$1.toISOString(), timeZone);
+  }
 
-  var handleOnClickInputField = function handleOnClickInputField(event) {
-    setShouldFocusOnCalendarButtonAfterSelect(false);
-    onClick && onClick(event);
-  };
+  if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
+  if (noTimeOnlyDate) return new date.CalendarDate(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate());
+  return new date.CalendarDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
+};
+/**
+ * Tar inn et av Date- eller TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
+ * @param {DateValue | TimeValue} 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} 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 handleOnClickCalendarButton = function handleOnClickCalendarButton() {
-    toggleCalendarGUI();
-    setFocusToCalendarGUI();
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-  };
+var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
+  // @ts-expect-error .day does not exist on Time-object
+  if (!value.day) {
+    // type is Time
+    var date$1 = new Date(); // @ts-expect-error hour does not exist on CalendarDate
 
-  var calendarButtonAriaLabel = function calendarButtonAriaLabel() {
-    var _inputRef$current8;
+    date$1.setHours(value.hour); // @ts-expect-error minute does not exist on CalendarDate
 
-    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;
-  };
+    date$1.setMinutes(value.minute); // @ts-expect-error second does not exist on CalendarDate
 
-  return React__default["default"].createElement(form.TextField, _extends({
-    style: style,
-    label: label,
-    placeholder: inputPlaceholder,
-    prepend: prepend,
-    feedback: feedback,
-    variant: variant,
-    disableLabelAnimation: disableLabelAnimation,
-    ref: utils.mergeRefs(ref, inputRef, forwardRef),
-    onClick: handleOnClickInputField,
-    ariaAlertOnFeedback: true,
-    append: !hideCalendarButton && React__default["default"].createElement(tooltip.Tooltip, {
-      placement: "top",
-      content: calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen,
-      disableHoverListener: disabled,
-      disableFocusListener: disabled
-    }, React__default["default"].createElement(button.IconButton, {
-      id: calendarButtonId,
-      type: "button",
-      onClick: handleOnClickCalendarButton,
-      tabIndex: calendarGUIIsOpen() ? -1 : 0,
-      "aria-label": calendarButtonAriaLabel()
-    }, React__default["default"].createElement(icons.CalendarIcon, null)))
-  }, rest));
-});
+    date$1.setSeconds(value.second);
+    return date$1;
+  } // @ts-expect-error .day does not exist on Time-object
 
-var _excluded$3 = ["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"];
-ReactDatepicker.registerLocale('nb', locale.nb);
-var DatePicker = /*#__PURE__*/React__default["default"].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$1 = _ref$locale === void 0 ? locale.nb : _ref$locale,
-      open = _ref.open,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var datepickerId = utils.useRandomId('eds-datepicker');
-  var datepickerRef = React.useRef(null);
-  var inputRef = React__default["default"].useRef(null);
-  var calendarButton = document.getElementById(datepickerId + '-button');
+  if (!value.hour) {
+    // type is CalendarDate
+    // @ts-expect-error .toDate(timeZone) does not exist in type Time
+    return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : date.getLocalTimeZone());
+  } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
 
-  var _useState = React.useState(false),
-      showValidation = _useState[0],
-      setShowValidation = _useState[1];
 
-  var _useState2 = React.useState(false),
-      shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
-      setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+  if (!value.timeZone) {
+    // type is CalendarDateTime
+    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
+    value.second);
+  } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
 
 
-  React__default["default"].useEffect(function () {
-    return validateInput();
-  }, [selectedDate]);
+  return value.toDate();
+};
+var createCalendar = function createCalendar(identifier) {
+  if (identifier === void 0) {
+    identifier = 'gregory';
+  }
 
-  var handleOnChange = function handleOnChange(date, event) {
-    var _inputRef$current;
+  switch (identifier) {
+    case 'gregory':
+      return new date.GregorianCalendar();
 
-    if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
-      calendarButton == null ? void 0 : calendarButton.focus();
-      setShouldFocusOnCalendarButtonAfterSelect(false);
-    } else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+    default:
+      throw new Error("Unsupported calendar " + identifier);
+  }
+};
+var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, locale, propsCollection) {
+  if (locale.toLowerCase() !== 'no-no') return propsCollection['aria-label'];
+  return norwegianAriaLabel;
+};
 
-    onChange(date, event);
-  };
+var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "style", "className", "labelProps", "append"];
+var DateField = /*#__PURE__*/React__default["default"].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);
 
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    setShowValidation(false);
+  var _useLocale = i18n.useLocale(),
+      locale = _useLocale.locale;
 
-    if (event.key === 'Enter') {
-      if (!datePickerGUIIsOpen()) {
-        // onBlurInput will validate if calendar is open
-        validateInput();
-        forceUpdateInputFormat();
-      }
+  var state = datepicker$1.useDateFieldState(_extends({}, rest, {
+    locale: customLocale != null ? customLocale : locale,
+    createCalendar: createCalendar,
+    value: value === null ? undefined : value,
+    hideTimeZone: !showTimeZone,
+    granularity: showTime ? 'minute' : granularity
+  }));
+  var dateFieldRef = React.useRef(null);
 
-      focusAndSelectInputField();
-    } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
-      forceUpdateInputFormat();
-    } else if (event.key === 'Escape') {
-      forceUpdateInputFormat();
-      focusAndSelectInputField();
-      if (datePickerGUIIsOpen()) toggleCalendarGUI();
+  var _useDateField = datepicker.useDateField(_extends({}, rest, {
+    label: label,
+    isDisabled: disabled || rest.isDisabled
+  }), state, dateFieldRef),
+      labelProps = _useDateField.labelProps,
+      fieldProps = _useDateField.fieldProps;
+
+  var id = utils.useRandomId('datefield');
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: customLocale !== undefined,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: customLocale
+      }, child);
     }
+  }, React__default["default"].createElement(form.BaseFormControl, _extends({
+    style: style,
+    className: classNames__default["default"]('eds-datefield', className),
+    labelId: id,
+    ref: utils.mergeRefs(dateFieldRef, ref),
+    disabled: state.isDisabled,
+    disableLabelAnimation: true,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelProps: parentLabelProps != null ? parentLabelProps : labelProps
+  }, fieldProps, {
+    variant: (variant != null ? variant : state.validationState === 'invalid') ? validationVariant : undefined,
+    feedback: (feedback != null ? feedback : state.validationState === 'invalid') ? validationFeedback : undefined,
+    append: append,
+    ariaAlertOnFeedback: true
+  }), state.segments.map(function (segment, i) {
+    return React__default["default"].createElement(FieldSegment, {
+      segment: segment,
+      state: state,
+      key: i
+    });
+  })));
+});
 
-    onKeyDown(event);
-  };
-
-  var handleOnClickOutside = function handleOnClickOutside() {
-    return setShouldFocusOnCalendarButtonAfterSelect(false);
-  };
+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);
 
-  var handleOnBlurInput = function handleOnBlurInput() {
-    if (datePickerGUIIsOpen()) return;
-    validateInput();
-    forceUpdateInputFormat();
-  };
+  var ref = React.useRef(null);
 
-  var validateInput = function validateInput() {
-    var _inputRef$current2;
+  var _useButton = button.useButton(props, ref),
+      buttonProps = _useButton.buttonProps;
 
-    setShowValidation(false);
-    var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value;
-    if (!inputValue) return;
-    var inputValueParsedWithAllDateFormats = dateFormats.map(function (format) {
-      return dateFns.parse(inputValue, format, new Date(), {
-        locale: locale$1
-      });
-    });
-    var parsedDateFromInputIsTheSameAsSelectedDate = selectedDate && inputValueParsedWithAllDateFormats.some(function (dateFormat) {
-      return dateFns.isSameDay(dateFormat, selectedDate);
-    });
+  return React__default["default"].createElement(button$1.IconButton, _extends({}, buttonProps, {
+    ref: ref,
+    className: className,
+    style: style
+  }), children);
+};
 
-    if (parsedDateFromInputIsTheSameAsSelectedDate) {
-      // valid date inputted
-      setShowValidation(false);
-    } else {
-      // invalid date inputted
-      setShowValidation(true);
+var _excluded$6 = ["state", "date", "onSelectedCellClick"];
+var CalendarCell = function CalendarCell(_ref) {
+  var _state$timeZone;
+
+  var state = _ref.state,
+      date$1 = _ref.date,
+      _ref$onSelectedCellCl = _ref.onSelectedCellClick,
+      onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
+    return;
+  } : _ref$onSelectedCellCl,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+
+  var cellRef = React.useRef(null);
+
+  var _useCalendarCell = calendar.useCalendarCell({
+    date: date$1
+  }, 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__default["default"].createElement("td", _extends({}, cellProps, {
+    className: "eds-datepicker__calendar__grid__cell__td"
+  }), React__default["default"].createElement("div", _extends({}, buttonProps, {
+    ref: cellRef,
+    hidden: isOutsideVisibleRange,
+    className: classNames__default["default"]('eds-datepicker__calendar__grid__cell', {
+      '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': date.isEqualDay(date$1, date.now((_state$timeZone = state.timeZone) != null ? _state$timeZone : date.getLocalTimeZone()))
+    })
+  }, rest, {
+    onClick: function onClick(e) {
+      buttonProps.onClick && buttonProps.onClick(e);
+      isSelected && onSelectedCellClick();
     }
-  };
+  }), formattedDate));
+};
 
-  var getFeedbackAndVariant = function getFeedbackAndVariant() {
-    if (feedback) return {
-      feedback: feedback,
-      variant: variant
-    };
-    if (!hideValidation && showValidation) return {
-      feedback: validationFeedback,
-      variant: validationVariant
-    };
-    return {
-      feedback: '',
-      variant: undefined
-    };
-  };
+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);
 
-  var focusAndSelectInputField = function focusAndSelectInputField() {
-    return requestAnimationFrame(function () {
-      var _inputRef$current3;
+  var calendarGridId = utils.useRandomId('eds-calendar');
 
-      return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
-    });
-  };
+  var _useLocale = i18n.useLocale(),
+      locale = _useLocale.locale;
+
+  var _useCalendarGrid = calendar.useCalendarGrid(rest, state),
+      gridProps = _useCalendarGrid.gridProps,
+      headerProps = _useCalendarGrid.headerProps,
+      weekDays = _useCalendarGrid.weekDays;
 
-  var forceUpdateInputFormat = function forceUpdateInputFormat() {
-    var _datepickerRef$curren;
+  var weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
+  var weeksArray = Array.from(Array(weeksInMonth).keys());
 
-    return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
-      inputValue: null
+  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'];
+    return weekDays.map(function (day) {
+      return day.toLowerCase();
     });
   };
 
-  var toggleCalendarGUI = function toggleCalendarGUI() {
-    var _datepickerRef$curren2;
-
-    return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
+  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';
   };
 
-  var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
-    if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("table", _extends({}, gridProps, {
+    cellSpacing: "0",
+    className: "eds-datepicker__calendar__grid"
+  }), React__default["default"].createElement("thead", _extends({}, headerProps), React__default["default"].createElement("tr", null, weekDaysMapped().map(function (day, index) {
+    return React__default["default"].createElement("th", {
+      key: index
+    }, day);
+  }))), React__default["default"].createElement("tbody", null, weeksArray.map(function (weekIndex) {
+    return React__default["default"].createElement("tr", {
+      key: weekIndex
+    }, state.getDatesInWeek(weekIndex).map(function (date, i) {
+      return date ? React__default["default"].createElement(CalendarCell, {
+        key: i,
+        state: state,
+        date: date,
+        "aria-describedby": calendarGridId + 'description',
+        onSelectedCellClick: onSelectedCellClick
+      }) : React__default["default"].createElement("td", {
+        key: i
+      });
+    }));
+  }))), React__default["default"].createElement(a11y.VisuallyHidden, {
+    id: calendarGridId + 'description'
+  }, getNavigationDescription()));
+};
 
-    requestAnimationFrame(function () {
-      var _datepickerRef$curren3;
+var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
+var Calendar = /*#__PURE__*/React__default["default"].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);
+
+  var _useLocale = i18n.useLocale(),
+      locale = _useLocale.locale;
 
-      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"]');
+  var state = calendar$1.useCalendarState(_extends({}, rest, {
+    onChange: onChange,
+    locale: customLocale != null ? customLocale : locale,
+    createCalendar: createCalendar
+  }));
+
+  var _useCalendar = calendar.useCalendar(rest, state),
+      calendarProps = _useCalendar.calendarProps,
+      prevButtonProps = _useCalendar.prevButtonProps,
+      nextButtonProps = _useCalendar.nextButtonProps,
+      title = _useCalendar.title;
+
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: customLocale,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: customLocale
+      }, child);
+    }
+  }, React__default["default"].createElement("div", _extends({}, calendarProps, {
+    ref: ref,
+    className: "eds-datepicker__calendar",
+    style: style
+  }), React__default["default"].createElement("div", {
+    className: "eds-datepicker__calendar__header"
+  }, React__default["default"].createElement(CalendarButton, _extends({}, prevButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Forrige måned', locale, prevButtonProps)
+  }), React__default["default"].createElement(icons.LeftArrowIcon, {
+    size: 20
+  })), React__default["default"].createElement("h2", null, title), React__default["default"].createElement(CalendarButton, _extends({}, nextButtonProps, {
+    "aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
+  }), React__default["default"].createElement(icons.RightArrowIcon, {
+    size: 20
+  }))), React__default["default"].createElement(CalendarGrid, {
+    state: state,
+    navigationDescription: navigationDescription,
+    onSelectedCellClick: onSelectedCellClick
+  })));
+});
 
-      if (dateToSetFocusTo !== null) {
-        var _datepickerRef$curren4;
+var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
+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);
 
-        (_datepickerRef$curren4 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren4.setBlur();
-        dateToSetFocusTo.focus({
-          preventScroll: true
-        });
-      }
+  var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
+  var datePickerRef = React.useRef(null);
+  var calendarRef = React.useRef(null);
+  var dateFieldRef = React.useRef(null);
+
+  var _useWindowDimensions = utils.useWindowDimensions(),
+      width = _useWindowDimensions.width;
+
+  var state = datepicker$1.useDatePickerState(_extends({}, rest, {
+    minValue: minValue,
+    maxValue: maxValue,
+    value: value,
+    onChange: onChange
+  }));
+
+  var _useDatePicker = datepicker.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
+
+
+  var _useFloating = reactDom.useFloating({
+    whileElementsMounted: reactDom.autoUpdate,
+    placement: 'bottom-start',
+    middleware: [reactDom.offset(tokens.space.extraSmall), reactDom.flip(), reactDom.shift({
+      padding: tokens.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);
     });
-    setShouldFocusOnCalendarButtonAfterSelect(true);
-    setShowValidation(false);
   };
 
-  var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
-    var _datepickerRef$curren5;
+  utils.useOnClickOutside([calendarRef], function () {
+    state.setOpen(false);
+  });
+  utils.useOnEscape(calendarRef, function () {
+    state.setOpen(false);
+  });
 
-    return (_datepickerRef$curren5 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren5.isCalendarOpen();
-  };
+  var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
+    disabled: calendarProps.isDisabled,
+    navigationDescription: navigationDescription,
+    onSelectedCellClick: function onSelectedCellClick() {
+      return state.setOpen(false);
+    },
+    onChange: onChangeCalendar
+  });
 
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ReactDatepicker__default["default"], _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$1,
-    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';
+  var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
+  var popoverCalendar = React__default["default"].createElement("div", {
+    // styling for floating-UI popover
+    style: {
+      position: strategy,
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      zIndex: tokens.zIndexes.popover
     },
-    weekDayClassName: function weekDayClassName() {
-      return 'eds-datepicker__calender__day-name';
+    ref: function ref(node) {
+      floating(node);
+    }
+  }, React__default["default"].createElement(FocusLock__default["default"], {
+    disabled: !state.isOpen || useModal,
+    returnFocus: true
+  }, state.isOpen && React__default["default"].createElement(Calendar, _extends({}, calendarSharedProps, {
+    ref: calendarRef
+  }))));
+  var modalCalendar = React__default["default"].createElement(modal.Modal, {
+    size: "small",
+    title: "",
+    open: state.isOpen,
+    onDismiss: function onDismiss() {
+      return state.setOpen(false);
     },
-    className: classNames__default["default"](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__default["default"].createElement(DatePickerHeader, {
-        date: date,
-        changeYear: changeYear,
-        changeMonth: changeMonth,
-        increaseMonth: increaseMonth,
-        decreaseMonth: decreaseMonth,
-        prevMonthButtonDisabled: prevMonthButtonDisabled,
-        nextMonthButtonDisabled: nextMonthButtonDisabled,
-        previousMonthAriaLabel: previousMonthAriaLabel,
-        nextMonthAriaLabel: nextMonthAriaLabel,
-        locale: locale$1
-      });
+    closeOnClickOutside: true,
+    className: "eds-datepicker__calendar-modal"
+  }, React__default["default"].createElement(Calendar, _extends({}, calendarSharedProps)));
+  return React__default["default"].createElement(utils.ConditionalWrapper, {
+    condition: locale !== undefined,
+    wrapper: function wrapper(child) {
+      return React__default["default"].createElement(i18n.I18nProvider, {
+        locale: locale
+      }, child);
+    }
+  }, React__default["default"].createElement("div", {
+    className: classNames__default["default"]('eds-datepicker', className)
+  }, React__default["default"].createElement("div", _extends({}, groupProps, {
+    ref: function ref(node) {
+      datePickerRef.current = node;
+      reference(node);
     },
-    customInput: React__default["default"].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
+    id: undefined,
+    className: "eds-datepicker__datefield__wrapper"
+  }), React__default["default"].createElement(DateField, _extends({}, fieldProps, {
+    selectedDate: state.value,
+    label: rest.label,
+    labelProps: labelProps,
+    showTime: showTime,
+    showTimeZone: showTimeZone,
+    ref: dateFieldRef,
+    variant: variant,
+    feedback: feedback,
+    validationVariant: validationVariant,
+    validationFeedback: validationFeedback,
+    labelTooltip: labelTooltip,
+    className: classNames__default["default"]('eds-datepicker__datefield', {
+      'eds-datepicker__datefield--disabled': fieldProps.isDisabled
     })
-  }, rest)));
-});
+  })), !fieldProps.isDisabled && React__default["default"].createElement(CalendarButton, _extends({}, buttonProps, {
+    onPress: function onPress() {
+      return state.setOpen(!state.isOpen);
+    },
+    className: "eds-datepicker__open-calendar-button"
+  }), React__default["default"].createElement(icons.CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
+};
 
 var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
     _excluded2$1 = ["onChange", "variant", "value"];
@@ -565,39 +675,12 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, rest));
 });
 
-var TimeSegment = function TimeSegment(_ref) {
-  var segment = _ref.segment,
-      state = _ref.state;
-  var ref = React.useRef(null);
-
-  var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
-      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 (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
-    return segment.text;
-  };
-
-  return React__default["default"].createElement("div", _extends({}, segmentProps, {
-    ref: ref,
-    className: classNames__default["default"]('eds-timepicker__segment', {
-      'eds-timepicker__segment--placeholder': segment.isPlaceholder
-    })
-  }), segmentDisplayText());
-};
-
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
       ariaLabel = _ref['aria-label'];
-  return React__default["default"].createElement(button.IconButton, {
+  return React__default["default"].createElement(button$1.IconButton, {
     className: classNames__default["default"]('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
       'eds-timepicker__arrowbutton--disabled': disabled
     }),
@@ -706,7 +789,7 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     variant: variant,
     feedback: feedback
   }), state.segments.map(function (segment, i) {
-    return React__default["default"].createElement(TimeSegment, {
+    return React__default["default"].createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
@@ -794,71 +877,16 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
   }, rest));
 });
 
-/**
- * Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
- * @param {Date} 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} et av TimeValue-objektene med verdier fra date
- */
-
-var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTime, timeZone, offset) {
-  if (noDateOnlyTime === void 0) {
-    noDateOnlyTime = false;
-  }
-
-  if (timeZone) {
-    if (offset) {
-      return new date.ZonedDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), timeZone, offset, date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
-    }
-
-    return date.parseAbsolute(date$1.toISOString(), timeZone);
-  }
-
-  if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
-  return new date.CalendarDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
-};
-/**
- * Tar inn et av TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
- * @param {TimeValue} time Et tidspunkt på TimeValue-formatet som ønsket konvertert til et JS Date-objekt
- * @param {string} timeZoneForCalendarDateTime Tidssonen time er i. Fungerer kun med typen er CalendarDateTime
- * @returns {Date} et Date-objekt med verdier fra time
- */
-// This function uses a lot of @ts-expect-error to make it work with all TimeValue types. Sorry ...
-
-var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCalendarDateTime) {
-  // @ts-expect-error .day does not exist on Time-object
-  if (!time.day) {
-    // type is Time
-    var date = new Date();
-    date.setHours(time.hour);
-    date.setMinutes(time.minute);
-    date.setSeconds(time.second);
-    return date;
-  } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
-
-
-  if (!time.timeZone) {
-    // type is CalendarDateTime
-    if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
-      return time.toDate(timeZoneForCalendarDateTime);
-    return new Date( // @ts-expect-error not in type Time
-    time.year, // @ts-expect-error not in type Time
-    time.month - 1, // @ts-expect-error not in type Time
-    time.day, time.hour, time.minute, time.second);
-  } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
-
-
-  return time.toDate();
-};
-
 utils.warnAboutMissingStyles('datepicker', 'form', 'icons');
 
+exports.Calendar = Calendar;
+exports.DateField = DateField;
 exports.DatePicker = DatePicker;
 exports.NativeDatePicker = NativeDatePicker;
 exports.NativeTimePicker = NativeTimePicker;
 exports.TimePicker = TimePicker;
-exports.nativeDateToTimeValue = nativeDateToTimeValue;
-exports.timeValueToNativeDate = timeValueToNativeDate;
+exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
+exports.createCalendar = createCalendar;
+exports.nativeDateToTimeOrDateValue = nativeDateToTimeOrDateValue;
+exports.timeOrDateValueToNativeDate = timeOrDateValueToNativeDate;
 //# sourceMappingURL=datepicker.cjs.development.js.map