@equinor/eds-core-react 0.36.0 → 0.37.0

package/dist/eds-core-react.cjs

@@ -10,6 +10,11 @@ var edsIcons = require('@equinor/eds-icons');
 var ReactDom = require('react-dom');
 var downshift = require('downshift');
 var reactVirtual = require('@tanstack/react-virtual');
+var reactAria = require('react-aria');
+var calendar = require('@react-stately/calendar');
+var date = require('@internationalized/date');
+var datepicker = require('@react-stately/datepicker');
+var utils = require('@react-aria/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -314,7 +319,6 @@ _curry3(function mergeWithKey(fn, l, r) {
   }
   return result;
 });
-var mergeWithKey$1 = mergeWithKey;
 
 /**
  * Creates a new object with the own properties of the two provided objects.
@@ -347,7 +351,7 @@ var mergeWithKey$1 = mergeWithKey;
 
 var mergeDeepWithKey = /*#__PURE__*/
 _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
-  return mergeWithKey$1(function (k, lVal, rVal) {
+  return mergeWithKey(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
     } else {
@@ -355,7 +359,6 @@ _curry3(function mergeDeepWithKey(fn, lObj, rObj) {
     }
   }, lObj, rObj);
 });
-var mergeDeepWithKey$1 = mergeDeepWithKey;
 
 /**
  * Creates a new object with the own properties of the first object merged with
@@ -381,11 +384,10 @@ var mergeDeepWithKey$1 = mergeDeepWithKey;
 
 var mergeDeepRight = /*#__PURE__*/
 _curry2(function mergeDeepRight(lObj, rObj) {
-  return mergeDeepWithKey$1(function (k, lVal, rVal) {
+  return mergeDeepWithKey(function (k, lVal, rVal) {
     return rVal;
   }, lObj, rObj);
 });
-var mergeDeepRight$1 = mergeDeepRight;
 
 /**
  * Creates a new object with the own properties of the two provided objects. If
@@ -413,11 +415,10 @@ var mergeDeepRight$1 = mergeDeepRight;
 
 var mergeWith = /*#__PURE__*/
 _curry3(function mergeWith(fn, l, r) {
-  return mergeWithKey$1(function (_, _l, _r) {
+  return mergeWithKey(function (_, _l, _r) {
     return fn(_l, _r);
   }, l, r);
 });
-var mergeWith$1 = mergeWith;
 
 /**
  * Returns a partial copy of an object containing only the keys that satisfy
@@ -450,7 +451,6 @@ _curry2(function pickBy(test, obj) {
   }
   return result;
 });
-var pickBy$1 = pickBy;
 
 const {
   colors: {
@@ -486,7 +486,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$a = mergeDeepRight$1(button, {
+const primary$a = mergeDeepRight(button, {
   background: primaryColor$7,
   typography: {
     color: primaryWhite$2
@@ -504,7 +504,7 @@ const primary$a = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$5 = mergeDeepRight$1(primary$a, {
+const secondary$5 = mergeDeepRight(primary$a, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -518,7 +518,7 @@ const secondary$5 = mergeDeepRight$1(primary$a, {
     }
   }
 });
-const danger$6 = mergeDeepRight$1(primary$a, {
+const danger$6 = mergeDeepRight(primary$a, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -571,7 +571,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight$1(button, {
+const primary$9 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -600,7 +600,7 @@ const primary$9 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight$1(primary$9, {
+const secondary$4 = mergeDeepRight(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -619,7 +619,7 @@ const secondary$4 = mergeDeepRight$1(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight$1(primary$9, {
+const danger$5 = mergeDeepRight(primary$9, {
   typography: {
     color: dangerColor$2
   },
@@ -672,7 +672,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight$1(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$5
   },
@@ -691,7 +691,7 @@ const primary$8 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight$1(primary$8, {
+const secondary$3 = mergeDeepRight(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -704,7 +704,7 @@ const secondary$3 = mergeDeepRight$1(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight$1(primary$8, {
+const danger$4 = mergeDeepRight(primary$8, {
   typography: {
     color: dangerColor$1
   },
@@ -758,7 +758,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight$1(button, {
+const primary$7 = mergeDeepRight(button, {
   height: shape$4.icon_button.minHeight,
   width: shape$4.icon_button.minWidth,
   typography: {
@@ -776,7 +776,7 @@ const primary$7 = mergeDeepRight$1(button, {
   clickbound: {
     width: clicboundHeight$1,
     offset: {
-      top: '0',
+      top: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`,
       left: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`
     }
   },
@@ -814,7 +814,7 @@ const primary$7 = mergeDeepRight$1(button, {
     }
   }
 });
-const secondary$2 = mergeDeepRight$1(primary$7, {
+const secondary$2 = mergeDeepRight(primary$7, {
   typography: {
     color: secondaryColor
   },
@@ -827,7 +827,7 @@ const secondary$2 = mergeDeepRight$1(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight$1(primary$7, {
+const danger$3 = mergeDeepRight(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -862,8 +862,8 @@ const contained_icon = {
   clickbound: {
     width: clicboundHeight,
     offset: {
-      top: '0',
-      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
+      top: `${(parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2}px`,
+      left: `${(parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -888,9 +888,9 @@ const contained_icon = {
     }
   }
 };
-const primary$6 = mergeDeepRight$1(primary$a, contained_icon);
-const secondary$1 = mergeDeepRight$1(secondary$5, contained_icon);
-const danger$2 = mergeDeepRight$1(danger$6, contained_icon);
+const primary$6 = mergeDeepRight(primary$a, contained_icon);
+const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
+const danger$2 = mergeDeepRight(danger$6, contained_icon);
 
 const token$5 = {
   primary: {
@@ -970,7 +970,7 @@ const EdsProvider = ({
 };
 const useEds = () => react.useContext(EdsContext);
 
-const getVariant = (tokenSet, variant) => {
+const getVariant$1 = (tokenSet, variant) => {
   switch (variant) {
     case 'ghost':
       return tokenSet.ghost;
@@ -988,12 +988,12 @@ const getVariant = (tokenSet, variant) => {
 const getToken$1 = (variant, color) => {
   switch (color) {
     case 'danger':
-      return getVariant(token$5.danger, variant);
+      return getVariant$1(token$5.danger, variant);
     case 'secondary':
-      return getVariant(token$5.secondary, variant);
+      return getVariant$1(token$5.secondary, variant);
     case 'primary':
     default:
-      return getVariant(token$5.primary, variant);
+      return getVariant$1(token$5.primary, variant);
   }
 };
 const Inner = styled__default.default.span.withConfig({
@@ -1015,7 +1015,7 @@ const ButtonBase = styled__default.default.button.withConfig({
     hover,
     disabled
   } = states;
-  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, edsUtils.bordersTemplate(hover?.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, edsUtils.bordersTemplate(hover?.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
 const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
   color = 'primary',
@@ -1656,7 +1656,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight$1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
     default:
       return token;
   }
@@ -2195,7 +2195,7 @@ const label = {
 const LabelBase = styled__default.default.label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
-})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
+})(["display:flex;justify-content:space-between;align-items:flex-end;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
   $disabledText
 }) => $disabledText ? label.states.disabled.typography.color : label.typography.color);
 const Text$3 = styled__default.default.span.withConfig({
@@ -2398,7 +2398,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = mergeDeepRight$1(input$2, {
+const error$4 = mergeDeepRight(input$2, {
   boxShadow: 'none',
   outline: {
     color: danger__resting$1.rgba
@@ -2419,7 +2419,7 @@ const error$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const warning$4 = mergeDeepRight$1(input$2, {
+const warning$4 = mergeDeepRight(input$2, {
   boxShadow: 'none',
   outline: {
     color: warning__resting$1.rgba
@@ -2440,7 +2440,7 @@ const warning$4 = mergeDeepRight$1(input$2, {
     }
   }
 });
-const success$1 = mergeDeepRight$1(input$2, {
+const success$1 = mergeDeepRight(input$2, {
   boxShadow: 'none',
   outline: {
     color: success__resting$1.rgba
@@ -2633,7 +2633,7 @@ const input$1 = {
     }
   }
 };
-const error$3 = mergeDeepRight$1(input$1, {
+const error$3 = mergeDeepRight(input$1, {
   boxShadow: 'none',
   outline: {
     color: danger__resting.rgba
@@ -2661,7 +2661,7 @@ const error$3 = mergeDeepRight$1(input$1, {
     }
   }
 });
-const warning$3 = mergeDeepRight$1(input$1, {
+const warning$3 = mergeDeepRight(input$1, {
   boxShadow: 'none',
   outline: {
     color: warning__resting.rgba
@@ -2689,7 +2689,7 @@ const warning$3 = mergeDeepRight$1(input$1, {
     }
   }
 });
-const success = mergeDeepRight$1(input$1, {
+const success = mergeDeepRight(input$1, {
   boxShadow: 'none',
   outline: {
     color: success__resting.rgba
@@ -2901,15 +2901,21 @@ const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
     variant,
     ...other
   };
-  const adornmentsToTop = {
+  const leftAdornmentStyles = {
     style: {
       alignItems: 'flex-start'
     }
   };
+  const rigthAdornmentStyles = {
+    style: {
+      alignItems: 'flex-start',
+      pointerEvents: 'none'
+    }
+  };
   return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
     as: "textarea",
-    rightAdornmentsProps: adornmentsToTop,
-    leftAdornmentsProps: adornmentsToTop,
+    rightAdornmentsProps: rigthAdornmentStyles,
+    leftAdornmentsProps: leftAdornmentStyles,
     style: {
       height: 'auto'
     },
@@ -2947,13 +2953,14 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
   ...other
 }, ref) {
   const helperTextId = edsUtils.useId(null, 'helpertext');
+  const hasRightAdornments = Boolean(unit || inputIcon);
   let fieldProps = {
     'aria-invalid': variant === 'error' || undefined,
     disabled,
     placeholder,
     id,
     variant,
-    rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    rightAdornments: hasRightAdornments && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [inputIcon, /*#__PURE__*/jsxRuntime.jsx("span", {
         children: unit
       })]
@@ -7349,7 +7356,7 @@ const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs({
     }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
   const allCrumbs = react.Children.toArray(children).map((child, index) =>
-  
+  /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   jsxRuntime.jsxs(react.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
@@ -7634,7 +7641,7 @@ const Item = styled__default.default.button.attrs(({
   $active
 }) => $active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
   disabled
-}) => disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, edsUtils.outlineTemplate(focus$2.outline)));
+}) => disabled ? styled.css(["*{color:", ";}svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}&:focus-visible{z-index:3;", "}"], hover.background, edsUtils.outlineTemplate(focus$2.outline)));
 const Content = styled__default.default.div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
@@ -9335,7 +9342,7 @@ const selectTokens = {
     }
   }
 };
-const multiSelect = mergeDeepRight$1(selectTokens, {
+const multiSelect = mergeDeepRight(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -9438,7 +9445,7 @@ const AutocompleteNoOptions = styled__default.default(AutocompleteOption).withCo
 })(({
   theme
 }) => styled.css(["color:", ";"], theme.entities.noOptions.typography.color));
-const StyledButton = styled__default.default(Button$1).withConfig({
+const StyledButton$1 = styled__default.default(Button$1).withConfig({
   displayName: "Autocomplete__StyledButton",
   componentId: "sc-yvif0e-4"
 })(({
@@ -9473,9 +9480,9 @@ const findIndex = ({
 };
 const isEvent = (val, key) => /^on[A-Z](.*)/.test(key) && typeof val === 'function';
 function mergeEventsFromRight(props1, props2) {
-  const events1 = pickBy$1(isEvent, props1);
-  const events2 = pickBy$1(isEvent, props2);
-  return mergeWith$1((event1, event2) => {
+  const events1 = pickBy(isEvent, props1);
+  const events2 = pickBy(isEvent, props2);
+  return mergeWith((event1, event2) => {
     return (...args) => {
       event1(...args);
       event2(...args);
@@ -9936,7 +9943,7 @@ function AutocompleteInner(props, ref) {
     setTypedInputValue('');
   };
   const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
-  const showNoOptions = isOpen && !availableItems.length && inputValue.length > 0 && noOptionsText.length > 0;
+  const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
   const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
 
   //temporary fix when inside dialog. Should be replaced by popover api when it is ready
@@ -10063,7 +10070,7 @@ function AutocompleteInner(props, ref) {
           rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
               size: 16
-            }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+            }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
               variant: "ghost_icon",
               disabled: disabled || readOnly,
               "aria-label": 'clear options',
@@ -10073,7 +10080,7 @@ function AutocompleteInner(props, ref) {
                 data: edsIcons.close,
                 size: 16
               })
-            }), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+            }), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
               variant: "ghost_icon",
               ...getToggleButtonProps({
                 disabled: disabled || readOnly
@@ -10973,6 +10980,1136 @@ SideBar.Button.displayName = 'SideBar.Button';
 SideBar.Accordion.displayName = 'SideBar.Accordion';
 SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 
+const StyledCell = styled__default.default(Typography).withConfig({
+  displayName: "CalendarCell__StyledCell",
+  componentId: "sc-y5ycmg-0"
+})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}&:focus{outline:2px dashed rgba(0,112,121,1);}", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
+  $selected
+}) => $selected && `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba};`, ({
+  $hidden
+}) => $hidden && `visibility: hidden;`, ({
+  $highlight
+}) => {
+  switch ($highlight) {
+    case 'SINGLE':
+    case 'NONE':
+    case 'BOTH':
+      return 'border-radius: 50%;';
+    case 'END':
+      return 'border-radius: 0% 50% 50% 0;';
+    case 'START':
+      return 'border-radius: 50% 0% 0% 50%;';
+    case 'RANGE':
+      return '';
+  }
+}, ({
+  $disabled
+}) => $disabled && `
+
+    color: ${edsTokens.tokens.colors.interactive.disabled__text.rgba};
+    &:hover {
+      background-color: transparent;
+    cursor: not-allowed;
+    }
+    `, ({
+  $selected,
+  $disabled
+}) => {
+  if ($selected && $disabled) {
+    return `background-color: ${edsTokens.tokens.colors.interactive.warning__highlight.rgba};
+      &:hover {
+        background-color: ${edsTokens.tokens.colors.interactive.warning__highlight.rgba};
+      }`;
+  }
+}, ({
+  $density
+}) => {
+  switch ($density) {
+    case 'compact':
+      return `
+        height: 32px;
+        width: 32px;
+        padding: 2px;
+        `;
+    case 'comfortable':
+      return `
+          height: 40px;
+          width: 40px;
+          padding: 4px;
+          `;
+  }
+});
+const StyledTd = styled__default.default.td.withConfig({
+  displayName: "CalendarCell__StyledTd",
+  componentId: "sc-y5ycmg-1"
+})(["border:0;border-spacing:0;"]);
+
+/**
+ * CalendarCell is used to represent a single cell in {@link Calendar} and {@link RangeCalendar}
+ */
+function CalendarCell({
+  state,
+  date
+}) {
+  const ref = react.useRef(null);
+  const {
+    density
+  } = useEds();
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = reactAria.useCalendarCell({
+    date
+  }, state, ref);
+
+  /**
+   * Determines how the selection should be highlighted
+   * If range is selected, it will highlight start - end, with differing border-radius
+   */
+  const isHighlight = react.useMemo(() => {
+    if (isSelected && 'highlightedRange' in state) {
+      const start = state.highlightedRange.start;
+      const end = state.highlightedRange.end;
+      const startSame = start.day === date.day && start.month === date.month && start.year === date.year;
+      const endSame = end.day === date.day && end.month === date.month && end.year === date.year;
+      if (startSame && endSame) {
+        return 'BOTH';
+      }
+      if (startSame) {
+        return 'START';
+      } else if (endSame) {
+        return 'END';
+      } else {
+        return 'RANGE';
+      }
+    } else if (isSelected) {
+      return 'SINGLE';
+    }
+    return 'NONE';
+  }, [date.day, date.month, date.year, isSelected, state]);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTd, {
+    ...cellProps,
+    style: {
+      border: 0,
+      borderSpacing: 0,
+      padding: 0
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledCell, {
+      ...buttonProps,
+      as: 'div',
+      ref: ref,
+      tabIndex: 0,
+      $hidden: isOutsideVisibleRange,
+      className: `cell ${isSelected ? 'selected' : ''} ${isUnavailable ? 'unavailable' : ''}${isDisabled ? 'disabled' : ''}`,
+      $selected: isSelected,
+      $highlight: isHighlight,
+      $disabled: isDisabled || isUnavailable,
+      $density: density,
+      children: formattedDate
+    })
+  });
+}
+
+// Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop
+/* eslint-disable jsx-a11y/no-autofocus */
+const Grid = styled__default.default.div.withConfig({
+  displayName: "YearGrid__Grid",
+  componentId: "sc-1l9jho8-0"
+})(["display:grid;grid-template-columns:repeat(6,1fr);grid-gap:8px;margin:8px;"]);
+const GridColumn = styled__default.default.button.withConfig({
+  displayName: "YearGrid__GridColumn",
+  componentId: "sc-1l9jho8-1"
+})(["background-color:transparent;outline:none;border:none;display:flex;justify-content:center;cursor:pointer;padding:8px;font-size:", ";font-family:", ";font-weight:", ";line-height:", ";color:", ";border-radius:999px;", ";&:hover{background-color:#f0f0f0;}&:focus{outline:2px dashed ", ";}"], edsTokens.tokens.typography.navigation.button.fontSize, edsTokens.tokens.typography.navigation.button.fontFamily, edsTokens.tokens.typography.navigation.button.fontWeight, edsTokens.tokens.typography.navigation.button.lineHeight, edsTokens.tokens.colors.text.static_icons__default.rgba, ({
+  $active
+}) => $active ? `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba}` : '', edsTokens.tokens.colors.interactive.primary__resting.rgba);
+const GridFocusManager = ({
+  year: selectedYear,
+  setFocusedYear
+}) => {
+  const focusManager = reactAria.useFocusManager();
+  const onKeyDown = e => {
+    const target = e.currentTarget;
+    const parent = target.parentElement;
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        focusManager.focusNext({
+          wrap: true
+        });
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        focusManager.focusPrevious({
+          wrap: true
+        });
+        break;
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          const selfIndex = Array.from(parent.children).indexOf(target);
+          const focusElement = Array.from(parent.children).at(selfIndex + 5);
+          focusManager.focusNext({
+            from: focusElement
+          });
+          break;
+        }
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          const selfIndex = Array.from(parent.children).indexOf(target);
+          const focusElement = Array.from(parent.children).at(selfIndex - 5);
+          focusManager.focusPrevious({
+            from: focusElement
+          });
+          break;
+        }
+    }
+  };
+  const years = Array.from({
+    length: 36
+  }, (_, i) => i + (selectedYear - 30 / 2));
+  return years.map(year => /*#__PURE__*/jsxRuntime.jsx(GridColumn, {
+    $active: selectedYear === year,
+    onKeyDown: onKeyDown,
+    onClick: () => setFocusedYear(year),
+    "aria-label": `Set year to ${year}`,
+    tabIndex: 0,
+    children: year
+  }, year));
+};
+const YearGrid = ({
+  setFocusedYear,
+  year: selectedYear
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(Grid, {
+    children: /*#__PURE__*/jsxRuntime.jsx(reactAria.FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(GridFocusManager, {
+        year: selectedYear,
+        setFocusedYear: setFocusedYear
+      })
+    })
+  });
+};
+
+/* eslint-disable react/no-array-index-key */
+
+function CalendarGrid({
+  state,
+  showYearPicker,
+  setShowYearPicker,
+  ...props
+}) {
+  const {
+    locale
+  } = reactAria.useLocale();
+  const {
+    gridProps,
+    headerProps,
+    weekDays
+  } = reactAria.useCalendarGrid({
+    ...props,
+    weekdayStyle: 'long'
+  }, state);
+
+  // Get the number of weeks in the month so that we can render the proper number of rows.
+  const howManyWeeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
+  const weeksInMonthArray = [...new Array(howManyWeeksInMonth).keys()];
+  return showYearPicker ? /*#__PURE__*/jsxRuntime.jsx(YearGrid, {
+    year: state.focusedDate.year,
+    setFocusedYear: year => {
+      state.setFocusedDate(state.focusedDate.set({
+        year
+      }));
+      setShowYearPicker(false);
+    }
+  }) : /*#__PURE__*/jsxRuntime.jsxs("table", {
+    ...gridProps,
+    style: {
+      borderSpacing: '0px'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+      ...headerProps,
+      children: /*#__PURE__*/jsxRuntime.jsx("tr", {
+        children: weekDays.map((day, index) => /*#__PURE__*/jsxRuntime.jsx("th", {
+          style: {
+            textAlign: 'center'
+          },
+          abbr: day,
+          children: day.charAt(0).toLocaleUpperCase()
+        }, `${day}-${index}`))
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+      children: weeksInMonthArray.map(weekIndex => /*#__PURE__*/jsxRuntime.jsx("tr", {
+        children: state.getDatesInWeek(weekIndex).map((date, i) => date ? /*#__PURE__*/jsxRuntime.jsx(CalendarCell, {
+          state: state,
+          date: date
+        }, date.toString()) : /*#__PURE__*/jsxRuntime.jsx("td", {}, `placeholder-${i}`))
+      }, weekIndex))
+    })]
+  });
+}
+
+const HeaderWrapper = styled__default.default.div.withConfig({
+  displayName: "CalendarHeader__HeaderWrapper",
+  componentId: "sc-kuy15-0"
+})(["display:flex;justify-content:space-between;align-items:center;text-transform:capitalize;width:100%;"]);
+function TodayPicker({
+  onClick,
+  disabled
+}) {
+  const today = new Date();
+  return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
+    disabled: disabled,
+    onClick: () => onClick(new date.CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())),
+    variant: 'ghost',
+    style: {
+      marginLeft: 16
+    },
+    children: "Today"
+  });
+}
+const HeaderActions = styled__default.default.div.withConfig({
+  displayName: "CalendarHeader__HeaderActions",
+  componentId: "sc-kuy15-1"
+})(["display:flex;align-items:center;width:100%;"]);
+
+/**
+ * The default header for the calendar components if no custom header is provided
+ */
+function CalendarHeader({
+  state,
+  title,
+  previousMonthDisabled,
+  nextMonthDisabled,
+  showYearPicker,
+  setShowYearPicker
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(HeaderWrapper, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(HeaderActions, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
+        variant: 'ghost_icon',
+        "aria-label": 'Previous month',
+        disabled: previousMonthDisabled || showYearPicker,
+        onClick: () => state.focusPreviousPage(),
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: edsIcons.chevron_left
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          flex: '1 1 auto'
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs(Button$1, {
+        onClick: () => setShowYearPicker(!showYearPicker),
+        "data-testid": 'heading',
+        "aria-live": 'polite',
+        variant: 'ghost',
+        style: {
+          fontSize: edsTokens.tokens.typography.heading.h5.fontSize,
+          textTransform: 'capitalize'
+        },
+        children: [title, /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: showYearPicker ? edsIcons.chevron_up : edsIcons.chevron_down
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(TodayPicker, {
+        disabled: showYearPicker,
+        onClick: v => state.setFocusedDate(v)
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          flex: '1 1 auto'
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
+        variant: 'ghost_icon',
+        onClick: () => state.focusNextPage(),
+        disabled: nextMonthDisabled || showYearPicker,
+        "aria-label": 'Next month',
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          data: edsIcons.chevron_right
+        })
+      })]
+    })
+  });
+}
+
+const CalendarWrapper = styled__default.default.div.withConfig({
+  displayName: "CalendarWrapper",
+  componentId: "sc-14hqwiu-0"
+})(["display:grid;grid-gap:16px;max-height:80vh;width:max-content;max-width:560px;overflow:auto;"]);
+
+const Calendar = /*#__PURE__*/react.forwardRef(({
+  Header,
+  Footer,
+  ...props
+}, ref) => {
+  const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const {
+    locale
+  } = reactAria.useLocale();
+  const calendarState = calendar.useCalendarState({
+    ...props,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const {
+    calendarProps,
+    prevButtonProps,
+    nextButtonProps,
+    title
+  } = reactAria.useCalendar(props, calendarState);
+  return /*#__PURE__*/jsxRuntime.jsxs(CalendarWrapper, {
+    ref: ref,
+    ...calendarProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Popover.Header, {
+      style: {
+        width: '100%'
+      },
+      children: Header ? /*#__PURE__*/jsxRuntime.jsx(Header, {
+        month: calendarState.focusedDate.month,
+        state: calendarState,
+        setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
+          month
+        })),
+        setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
+          year
+        })),
+        year: calendarState.focusedDate.year
+      }) : /*#__PURE__*/jsxRuntime.jsx(CalendarHeader, {
+        state: calendarState,
+        title: title,
+        previousMonthDisabled: prevButtonProps.isDisabled,
+        nextMonthDisabled: nextButtonProps.isDisabled,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
+      className: "calendar",
+      style: {
+        height: 'fit-content'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
+        state: calendarState,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
+        month: calendarState.focusedDate.month,
+        state: calendarState,
+        setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
+          month
+        })),
+        setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
+          year
+        })),
+        year: calendarState.focusedDate.year
+      })
+    })]
+  });
+});
+Calendar.displayName = 'Calendar';
+
+const getVariant = variant => {
+  if (variant === 'error') {
+    return edsTokens.tokens.colors.interactive.danger__resting.rgba;
+  }
+  if (variant === 'success') {
+    return edsTokens.tokens.colors.interactive.success__resting.rgba;
+  }
+  if (variant === 'warning') {
+    return edsTokens.tokens.colors.interactive.warning__resting.rgba;
+  }
+  return edsTokens.tokens.colors.interactive.primary__resting.rgba;
+};
+const getVariantText = variant => {
+  if (variant === 'error') {
+    return edsTokens.tokens.colors.interactive.danger__text.rgba;
+  }
+  if (variant === 'success') {
+    return edsTokens.tokens.colors.interactive.success__text.rgba;
+  }
+  if (variant === 'warning') {
+    return edsTokens.tokens.colors.interactive.warning__text.rgba;
+  }
+  return edsTokens.tokens.typography.input.text.color;
+};
+const StyledInputFieldWrapper = styled__default.default.div.withConfig({
+  displayName: "FieldWrapper__StyledInputFieldWrapper",
+  componentId: "sc-1h0kqs9-0"
+})(["display:flex;align-items:center;background-color:", ";height:", ";padding:0 8px;", " ", " color:", ";cursor:default;"], edsTokens.tokens.colors.ui.background__light.rgba, ({
+  $density
+}) => $density === 'compact' ? '24px' : '36px', ({
+  $variant,
+  $disabled,
+  $readonly
+}) => {
+  if (!$variant && !$readonly) {
+    return `&:focus-within:not(.invalid) {
+    outline: 2px solid
+      ${edsTokens.tokens.colors.interactive.primary__resting.rgba};
+  }
+
+  ${!$disabled && `&:not(:focus-within) {
+    box-shadow: inset 0 -1px 0 0 ${edsTokens.tokens.colors.text.static_icons__tertiary.rgba};`}
+  }
+  `;
+  }
+  return `outline: 2px solid ${getVariant($variant)};`;
+}, ({
+  $readonly
+}) => {
+  return $readonly && `background-color: ${edsTokens.tokens.colors.ui.background__default.rgba};
+      outline: none;`;
+}, p => getVariantText(p.$variant));
+/**
+ * Applies styles around the date input fields (density, color etc.)
+ */
+const InputFieldWrapper = /*#__PURE__*/react.forwardRef(({
+  children,
+  color,
+  disabled,
+  readonly,
+  ...props
+}, ref) => {
+  const {
+    density
+  } = useEds();
+  // As the props returned are designed for react-aria, some of them are not valid DOM props (i.e. onPress).
+  // The filterDOMProps-method strips out the invalid props, but it also removes event listeners due to casing
+  const filteredProps = utils.filterDOMProps(props);
+  // filterDOMProps also strips event handlers
+  const eventHandlers = Object.keys(props).filter(k => k.startsWith('on')).reduce((a, b) => ({
+    ...a,
+    [b]: props[b]
+  }), {});
+  return /*#__PURE__*/jsxRuntime.jsx(StyledInputFieldWrapper, {
+    ref: ref,
+    $density: density,
+    $variant: color,
+    $disabled: disabled ?? false,
+    $readonly: readonly ?? false,
+    ...filteredProps,
+    ...eventHandlers,
+    children: children
+  });
+});
+const FieldWrapper = /*#__PURE__*/react.forwardRef(({
+  children,
+  pickerRef,
+  calendar,
+  isOpen,
+  setIsOpen,
+  label,
+  readonly,
+  ...props
+}, ref) => {
+  react.useEffect(() => {
+    if (isOpen === false) {
+      // Focus the first segment in the input field
+      const segment = ref.current?.querySelector('.segment');
+      segment?.focus();
+    }
+  }, [ref, isOpen, pickerRef]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
+      readOnly: readonly,
+      label: label,
+      onKeyDownCapture: event => {
+        const isIconTarget = event.target instanceof SVGSVGElement;
+        if (!isIconTarget && (event.code === 'Space' || event.code === 'Enter')) {
+          setIsOpen(true);
+        }
+      },
+      ...props,
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
+      open: isOpen ?? false,
+      onClose: () => setIsOpen(false),
+      anchorEl: ref.current,
+      placement: 'bottom-start',
+      withinPortal: true,
+      children: calendar
+    })]
+  });
+});
+InputFieldWrapper.displayName = 'InputFieldWrapper';
+FieldWrapper.displayName = 'FieldWrapper';
+
+const Segment = styled__default.default.div.withConfig({
+  displayName: "DateSegment__Segment",
+  componentId: "sc-19uidpx-0"
+})(["color:", ";font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", ""], edsTokens.tokens.typography.input.text.color, edsTokens.tokens.typography.input.text.fontFamily, edsTokens.tokens.colors.interactive.primary__resting.rgba, edsTokens.tokens.colors.ui.background__medium.rgba, ({
+  $disabled
+}) => $disabled && `color: ${edsTokens.tokens.colors.interactive.disabled__text.rgba};`);
+
+/**
+ * DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)
+ */
+function DateSegment({
+  segment,
+  state
+}) {
+  const ref = react.useRef(null);
+  const {
+    segmentProps
+  } = reactAria.useDateSegment(segment, state, ref);
+  return /*#__PURE__*/jsxRuntime.jsx(Segment, {
+    ...segmentProps,
+    $invalid: state.isInvalid,
+    $disabled: state.isDisabled,
+    $placeholder: segment.isPlaceholder,
+    style: {
+      padding: segment.type === 'literal' ? '0 2px' : '0'
+    },
+    onKeyDown: e => {
+      if (e.code === 'Enter' || e.code === 'Space') {
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (segmentProps.onKeyDown) {
+        segmentProps.onKeyDown(e);
+      }
+    },
+    ref: ref,
+    className: `segment ${segment.isPlaceholder ? 'placeholder' : ''}`,
+    children: segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0')
+  });
+}
+
+// In some cases we need to use the index as key
+/* eslint-disable react/no-array-index-key */
+/**
+ * A field that wraps segments for inputting a date / date-time
+ */
+const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const {
+    locale
+  } = reactAria.useLocale();
+  const state = datepicker.useDateFieldState({
+    ...props,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const {
+    fieldProps
+  } = reactAria.useDateField({
+    ...props,
+    // Type-casting as react-aria expects string | ReactNode, but we only pass strings
+    'aria-label': props.label ?? 'Date input field'
+  }, state, ref);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...fieldProps,
+    style: {
+      display: 'flex'
+    },
+    ref: ref,
+    children: state.segments.map((segment, i) => /*#__PURE__*/jsxRuntime.jsx(DateSegment, {
+      segment: segment,
+      state: state
+    }, i))
+  });
+});
+DateFieldSegments.displayName = 'SingleDateField';
+
+/**
+ * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * Encapsulates styling / functionality for typing a date
+ */
+const DateField = /*#__PURE__*/react.forwardRef(function ({
+  fieldProps,
+  groupProps,
+  variant,
+  dateCreateProps,
+  ...props
+}, ref) {
+  const state = datepicker.useDateFieldState(dateCreateProps);
+  const inputRef = react.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs(InputFieldWrapper, {
+    ...groupProps,
+    readonly: fieldProps.isReadOnly,
+    disabled: state.isDisabled,
+    color: state.isInvalid ? 'warning' : variant,
+    ref: ref,
+    className: `field ${state.isInvalid ? 'invalid' : 'valid'}`,
+    children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
+      ...state,
+      ...fieldProps,
+      ref: inputRef
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        flex: '1 1 auto'
+      }
+    }), props.rightAdornments]
+  });
+});
+DateField.displayName = 'DateField';
+
+const intl = new Intl.DateTimeFormat();
+const defaultTimezone = intl.resolvedOptions().timeZone;
+const DatePickerContext = /*#__PURE__*/react.createContext({
+  timezone: defaultTimezone
+});
+const DatePickerProvider = ({
+  timezone,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerContext.Provider, {
+    value: {
+      timezone: timezone ?? defaultTimezone
+    },
+    children: children
+  });
+};
+
+const useConvertedValidationFunctions = (minValue, maxValue, isDateUnavailable, timezone) => {
+  const tz = timezone ?? defaultTimezone;
+  const _minValue = minValue ? date.toCalendarDate(date.fromDate(minValue, tz)) : undefined;
+  const _maxValue = maxValue ? date.toCalendarDate(date.fromDate(maxValue, tz)) : undefined;
+  const _minTimeValue = minValue ? date.fromDate(minValue, tz) : undefined;
+  const _maxTimeValue = maxValue ? date.fromDate(maxValue, tz) : undefined;
+  const _isDateUnavailable = value => isDateUnavailable ? isDateUnavailable(value.toDate(tz)) : false;
+  return {
+    _minValue,
+    _maxValue,
+    _isDateUnavailable,
+    _minTimeValue,
+    _maxTimeValue
+  };
+};
+
+const StyledButton = styled__default.default(Button$2).withConfig({
+  displayName: "Toggle__StyledButton",
+  componentId: "sc-1bwqcj7-0"
+})(["height:24px;width:24px;"]);
+
+/**
+ * Toggle component encapsulates the reset and open calendar buttons
+ */
+const Toggle = ({
+  reset,
+  setOpen,
+  open,
+  icon,
+  disabled,
+  buttonProps,
+  valueString,
+  readonly
+}) => {
+  return readonly || disabled ? null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+      disabled: disabled,
+      variant: 'ghost_icon',
+      "aria-label": 'Reset',
+      onClick: () => {
+        reset();
+      },
+      onKeyDown: e => {
+        if (e.code === 'Enter' || e.code === 'Space') {
+          e.preventDefault();
+          e.stopPropagation();
+          reset();
+        }
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: edsIcons.close
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+      ...utils.filterDOMProps(buttonProps),
+      disabled: disabled,
+      "aria-label": valueString ? `Change date, ${valueString}` : `Change date`,
+      variant: 'ghost_icon',
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(!open);
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: icon
+      })
+    })]
+  });
+};
+
+const getCalendarDate = (value, timezone, showTimeInput = false) => {
+  if (!value) return null;
+  return showTimeInput ? date.toCalendarDateTime(date.fromDate(value, timezone)) : date.toCalendarDate(date.fromDate(value, timezone));
+};
+
+const DatePicker = /*#__PURE__*/react.forwardRef(({
+  onChange,
+  label,
+  value,
+  isDateUnavailable,
+  minValue,
+  maxValue,
+  Footer,
+  Header,
+  timezone,
+  defaultValue,
+  showTimeInput,
+  granularity,
+  disabled: isDisabled,
+  readOnly: isReadOnly,
+  ...props
+}, forwardedRef) => {
+  timezone = timezone ?? defaultTimezone;
+  const [innerValue, setInnerValue] = react.useState(() => {
+    const initialValue = value ?? defaultValue;
+    if (initialValue) {
+      if (showTimeInput) {
+        return date.toCalendarDateTime(date.fromDate(initialValue, timezone));
+      } else {
+        return date.toCalendarDate(date.fromDate(initialValue, timezone));
+      }
+    }
+    return null;
+  });
+  const [isOpen, setIsOpen] = react.useState(null);
+  const inputRef = react.useRef(null);
+  const pickerRef = react.useRef(null);
+  const ref = forwardedRef || inputRef;
+  const {
+    _minValue,
+    _maxValue,
+    _isDateUnavailable
+  } = useConvertedValidationFunctions(minValue, maxValue, isDateUnavailable, timezone);
+  const _onChange = react.useCallback(value => {
+    // Set internal value
+    if (value) {
+      setInnerValue(showTimeInput ? date.toCalendarDateTime(value) : date.toCalendarDate(value));
+    } else {
+      setInnerValue(null);
+    }
+    // Close the picker after selecting a date
+    if (isOpen) {
+      setIsOpen(false);
+    }
+    // Call onChange callback from props
+    if (onChange) {
+      if (!value) {
+        onChange(null);
+      } else {
+        const date = value.toDate(timezone);
+        onChange(date);
+      }
+    }
+  }, [onChange, isOpen, showTimeInput, timezone]);
+  const _value = getCalendarDate(value, timezone, showTimeInput) ?? innerValue;
+  const {
+    locale
+  } = reactAria.useLocale();
+  const dateCreateProps = {
+    ...props,
+    isDisabled,
+    value: _value,
+    hideTimeZone: true,
+    locale,
+    createCalendar: date.createCalendar,
+    onChange: _onChange,
+    minValue: _minValue,
+    maxValue: _maxValue,
+    isDateUnavailable: _isDateUnavailable,
+    label: label || 'Date picker',
+    isReadOnly,
+    granularity
+  };
+  const pickerState = datepicker.useDatePickerState(dateCreateProps);
+  const {
+    groupProps,
+    buttonProps,
+    fieldProps,
+    calendarProps
+  } = reactAria.useDatePicker(dateCreateProps, pickerState, ref);
+  const helperProps = pickerState.displayValidation.isInvalid ? {
+    text: pickerState.displayValidation.validationErrors.join('\n'),
+    color: edsTokens.tokens.colors.interactive.warning__text.rgba,
+    icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+      size: 16,
+      data: edsIcons.warning_outlined
+    })
+  } : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+    timezone: timezone,
+    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+      isOpen: isOpen,
+      readonly: fieldProps.isReadOnly,
+      pickerRef: pickerRef,
+      ref: ref,
+      setIsOpen: setIsOpen,
+      label: label,
+      calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
+        ref: pickerRef,
+        Footer: Footer,
+        Header: Header,
+        ...calendarProps
+      }),
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      color: pickerState.isInvalid ? 'warning' : props.variant,
+      helperProps: helperProps ?? props.helperProps,
+      children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
+        fieldProps: fieldProps,
+        groupProps: groupProps,
+        dateCreateProps: dateCreateProps,
+        ref: ref,
+        onChange: _onChange,
+        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+          setOpen: setIsOpen,
+          open: isOpen,
+          icon: edsIcons.calendar,
+          disabled: isDisabled,
+          readonly: isReadOnly,
+          reset: () => _onChange(null),
+          buttonProps: buttonProps,
+          valueString: pickerState.formatValue(locale, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit'
+          })
+        }),
+        variant: props.variant
+      })
+    })
+  });
+});
+DatePicker.displayName = 'DatePicker';
+
+const RangeCalendar = /*#__PURE__*/react.forwardRef(({
+  Header,
+  Footer,
+  ...props
+}, ref) => {
+  const [showYearPicker, setShowYearPicker] = react.useState(false);
+  const {
+    locale
+  } = reactAria.useLocale();
+  const state = calendar.useRangeCalendarState({
+    ...props,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const {
+    calendarProps,
+    title
+  } = reactAria.useRangeCalendar(props, state, ref);
+  return /*#__PURE__*/jsxRuntime.jsxs(CalendarWrapper, {
+    ...calendarProps,
+    ref: ref,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Popover.Header, {
+      children: Header ? /*#__PURE__*/jsxRuntime.jsx(Header, {
+        month: state.focusedDate.month,
+        state: state,
+        setMonth: month => state.setFocusedDate(state.focusedDate.set({
+          month
+        })),
+        setYear: year => state.setFocusedDate(state.focusedDate.set({
+          year
+        })),
+        year: state.focusedDate.year
+      }) : /*#__PURE__*/jsxRuntime.jsx(CalendarHeader, {
+        state: state,
+        title: title,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
+      children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
+        state: state,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
+        month: state.focusedDate.month,
+        state: state,
+        setMonth: month => state.setFocusedDate(state.focusedDate.set({
+          month
+        })),
+        setYear: year => state.setFocusedDate(state.focusedDate.set({
+          year
+        })),
+        year: state.focusedDate.year
+      })
+    })]
+  });
+});
+RangeCalendar.displayName = 'RangeCalendar';
+
+/**
+ * DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.
+ */
+const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
+  const fromRef = react.useRef(null);
+  const toRef = react.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs(InputFieldWrapper, {
+    ref: ref,
+    readonly: props.startFieldProps.isReadOnly,
+    className: "field",
+    disabled: props.disabled,
+    color: props.variant,
+    ...props.groupProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
+      ...props.startFieldProps,
+      ref: fromRef
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      as: 'span',
+      variant: 'text',
+      group: 'input',
+      style: {
+        padding: '0 4px'
+      },
+      children: "\u2014"
+    }), /*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
+      ...props.endFieldProps,
+      ref: toRef
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        flex: '1 1 auto'
+      }
+    }), props.rightAdornments]
+  });
+});
+DateRangeField.displayName = 'DateRangeField';
+
+const DateRangePicker = /*#__PURE__*/react.forwardRef(({
+  onChange,
+  label,
+  value,
+  isDateUnavailable,
+  minValue,
+  maxValue,
+  Footer,
+  Header,
+  timezone,
+  defaultValue,
+  disabled: isDisabled,
+  readOnly: isReadOnly,
+  ...props
+}, forwardedRef) => {
+  timezone = timezone ?? defaultTimezone;
+  const [innerValue, setInnerValue] = react.useState(() => {
+    const initialValue = value ?? defaultValue;
+    if (initialValue) {
+      return {
+        start: initialValue.from ? date.toCalendarDate(date.fromDate(initialValue.from, timezone)) : null,
+        end: initialValue.to ? date.toCalendarDate(date.fromDate(initialValue.to, timezone)) : null
+      };
+    }
+  });
+  const [isOpen, setIsOpen] = react.useState(null);
+  const inputRef = react.useRef(null);
+  const pickerRef = react.useRef(null);
+  const ref = forwardedRef || inputRef;
+  const {
+    locale
+  } = reactAria.useLocale();
+  const {
+    _minValue,
+    _maxValue,
+    _isDateUnavailable
+  } = useConvertedValidationFunctions(minValue, maxValue, isDateUnavailable, timezone);
+  const _onChange = react.useCallback(rangeValue => {
+    setInnerValue(rangeValue);
+    // Close picker on selecting date
+    if (isOpen) {
+      setIsOpen(false);
+    }
+    // Propagate change
+    if (onChange) {
+      if (!rangeValue) onChange(null);else {
+        onChange({
+          from: rangeValue.start?.toDate(timezone) ?? null,
+          to: rangeValue.end?.toDate(timezone) ?? null
+        });
+      }
+    }
+  }, [onChange, isOpen, timezone]);
+  const _value = value ? {
+    start: getCalendarDate(value.from, timezone),
+    end: getCalendarDate(value.to, timezone)
+  } : innerValue;
+  const dateRangePickerStateProps = {
+    maxValue: _maxValue,
+    minValue: _minValue,
+    isDateUnavailable: _isDateUnavailable,
+    onChange: _onChange,
+    label: label ?? 'Date-range',
+    value: _value,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly
+  };
+  const state = datepicker.useDateRangePickerState(dateRangePickerStateProps);
+  const {
+    groupProps,
+    startFieldProps,
+    endFieldProps,
+    buttonProps,
+    calendarProps
+  } = reactAria.useDateRangePicker(dateRangePickerStateProps, state, ref);
+  const helperProps = state.displayValidation.isInvalid ? {
+    text: state.displayValidation.validationErrors.join('\n'),
+    color: edsTokens.tokens.colors.interactive.warning__text.rgba,
+    icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+      size: 16,
+      data: edsIcons.warning_outlined
+    })
+  } : undefined;
+  const formattedValue = state.formatValue(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: '2-digit'
+  });
+  const valueString = formattedValue ? Object.values(formattedValue).join(' - ') : null;
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+    timezone: timezone,
+    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+      isOpen: isOpen,
+      color: state.isInvalid ? 'warning' : props.variant,
+      helperProps: helperProps ?? props.helperProps,
+      readonly: startFieldProps.isReadOnly,
+      ref: ref,
+      pickerRef: pickerRef,
+      setIsOpen: setIsOpen,
+      label: label,
+      calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
+        ref: pickerRef,
+        maxValue: _maxValue,
+        minValue: _minValue,
+        isDateUnavailable: _isDateUnavailable,
+        Footer: Footer,
+        Header: Header,
+        ...calendarProps
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
+        startFieldProps: startFieldProps,
+        endFieldProps: endFieldProps,
+        groupProps: groupProps,
+        ref: ref,
+        variant: props.variant,
+        disabled: isDisabled,
+        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+          buttonProps: buttonProps,
+          disabled: isDisabled,
+          readonly: isReadOnly,
+          reset: () => {
+            _onChange(null);
+          },
+          setOpen: setIsOpen,
+          open: isOpen,
+          icon: edsIcons.calendar_date_range,
+          valueString: valueString
+        })
+      })
+    })
+  });
+});
+DateRangePicker.displayName = 'DateRangePicker';
+
 exports.Accordion = Accordion;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
@@ -10983,6 +12120,8 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.DotProgress = DotProgress;