@equinor/eds-core-react 0.36.1 → 0.38.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 }; }
 
@@ -167,8 +172,12 @@ const button = {
   }
 };
 
+var _placeholder = {
+  '@@functional/placeholder': true
+};
+
 function _isPlaceholder(a) {
-  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+  return a === _placeholder;
 }
 
 /**
@@ -179,7 +188,6 @@ function _isPlaceholder(a) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry1(fn) {
   return function f1(a) {
     if (arguments.length === 0 || _isPlaceholder(a)) {
@@ -198,7 +206,6 @@ function _curry1(fn) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry2(fn) {
   return function f2(a, b) {
     switch (arguments.length) {
@@ -226,7 +233,6 @@ function _curry2(fn) {
  * @param {Function} fn The function to curry.
  * @return {Function} The curried function.
  */
-
 function _curry3(fn) {
   return function f3(a, b, c) {
     switch (arguments.length) {
@@ -295,9 +301,7 @@ function _isObject(x) {
  *      //=> { a: true, b: true, thing: 'bar', values: [10, 20, 15, 35] }
  * @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
  */
-
-var mergeWithKey = /*#__PURE__*/
-_curry3(function mergeWithKey(fn, l, r) {
+var mergeWithKey = /*#__PURE__*/_curry3(function mergeWithKey(fn, l, r) {
   var result = {};
   var k;
   l = l || {};
@@ -314,7 +318,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.
@@ -344,10 +347,8 @@ var mergeWithKey$1 = mergeWithKey;
  *                         { b: true, c: { thing: 'bar', values: [15, 35] }});
  *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
  */
-
-var mergeDeepWithKey = /*#__PURE__*/
-_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
-  return mergeWithKey$1(function (k, lVal, rVal) {
+var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+  return mergeWithKey(function (k, lVal, rVal) {
     if (_isObject(lVal) && _isObject(rVal)) {
       return mergeDeepWithKey(fn, lVal, rVal);
     } else {
@@ -355,7 +356,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
@@ -378,14 +378,11 @@ var mergeDeepWithKey$1 = mergeDeepWithKey;
  *                       { age: 40, contact: { email: 'baa@example.com' }});
  *      //=> { name: 'fred', age: 40, contact: { email: 'baa@example.com' }}
  */
-
-var mergeDeepRight = /*#__PURE__*/
-_curry2(function mergeDeepRight(lObj, rObj) {
-  return mergeDeepWithKey$1(function (k, lVal, rVal) {
+var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
+  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
@@ -410,14 +407,11 @@ var mergeDeepRight$1 = mergeDeepRight;
  *                  { b: true, values: [15, 35] });
  *      //=> { a: true, b: true, values: [10, 20, 15, 35] }
  */
-
-var mergeWith = /*#__PURE__*/
-_curry3(function mergeWith(fn, l, r) {
-  return mergeWithKey$1(function (_, _l, _r) {
+var mergeWith = /*#__PURE__*/_curry3(function mergeWith(fn, 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
@@ -439,9 +433,7 @@ var mergeWith$1 = mergeWith;
  *      const isUpperCase = (val, key) => key.toUpperCase() === key;
  *      R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}
  */
-
-var pickBy = /*#__PURE__*/
-_curry2(function pickBy(test, obj) {
+var pickBy = /*#__PURE__*/_curry2(function pickBy(test, obj) {
   var result = {};
   for (var prop in obj) {
     if (test(obj[prop], prop, obj)) {
@@ -450,7 +442,6 @@ _curry2(function pickBy(test, obj) {
   }
   return result;
 });
-var pickBy$1 = pickBy;
 
 const {
   colors: {
@@ -486,7 +477,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$a = mergeDeepRight$1(button, {
+const primary$a = mergeDeepRight(button, {
   background: primaryColor$7,
   typography: {
     color: primaryWhite$2
@@ -504,7 +495,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 +509,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 +562,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight$1(button, {
+const primary$9 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$6
   },
@@ -600,7 +591,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 +610,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 +663,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight$1(button, {
+const primary$8 = mergeDeepRight(button, {
   typography: {
     color: primaryColor$5
   },
@@ -691,7 +682,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 +695,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 +749,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 +767,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 +805,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 +818,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 +853,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 +879,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 +961,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 +979,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 +1006,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 +1647,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 +2186,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 +2389,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 +2410,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 +2431,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 +2624,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 +2652,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 +2680,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 +2892,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 +2944,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 +7347,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 +7632,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 +9333,7 @@ const selectTokens = {
     }
   }
 };
-const multiSelect = mergeDeepRight$1(selectTokens, {
+const multiSelect = mergeDeepRight(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -9428,19 +9426,25 @@ const StyledList = styled__default.default(List$1).withConfig({
 })(({
   theme
 }) => styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border)));
+const StyledPopover = styled__default.default('div').withConfig({
+  shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
+}).withConfig({
+  displayName: "Autocomplete__StyledPopover",
+  componentId: "sc-yvif0e-2"
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;"]);
 const HelperText = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "Autocomplete__HelperText",
-  componentId: "sc-yvif0e-2"
+  componentId: "sc-yvif0e-3"
 })(["margin-top:8px;margin-left:8px;"]);
 const AutocompleteNoOptions = styled__default.default(AutocompleteOption).withConfig({
   displayName: "Autocomplete__AutocompleteNoOptions",
-  componentId: "sc-yvif0e-3"
+  componentId: "sc-yvif0e-4"
 })(({
   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"
+  componentId: "sc-yvif0e-5"
 })(({
   theme: {
     entities: {
@@ -9473,9 +9477,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);
@@ -9524,6 +9528,20 @@ const findPrevIndex = ({
   }
   return prevIndex;
 };
+
+/*When a user clicks the StyledList scrollbar, the input looses focus which breaks downshift
+ * keyboard navigation in the list. This code returns focus to the input on mouseUp
+ */
+const handleListFocus = e => {
+  e.preventDefault();
+  e.stopPropagation();
+  window?.addEventListener('mouseup', () => {
+    e.relatedTarget?.focus();
+  }, {
+    once: true
+  });
+};
+const defaultOptionDisabled = () => false;
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9542,7 +9560,7 @@ function AutocompleteInner(props, ref) {
     allowSelectAll,
     initialSelectedOptions = [],
     disablePortal,
-    optionDisabled = () => false,
+    optionDisabled = defaultOptionDisabled,
     optionsFilter,
     autoWidth,
     placeholder,
@@ -9557,6 +9575,9 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+  if (disablePortal) {
+    console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
+  }
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = react.useState(options);
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
@@ -9571,13 +9592,8 @@ function AutocompleteInner(props, ref) {
     if (showSelectAll) return [AllSymbol, ..._availableItems];
     return _availableItems;
   }, [_availableItems, showSelectAll]);
-  const toggleAllSelected = () => {
-    if (selectedItems.length === inputOptions.length) {
-      setSelectedItems([]);
-    } else {
-      setSelectedItems(inputOptions);
-    }
-  };
+
+  //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
     const availableHash = JSON.stringify(inputOptions);
     const optionsHash = JSON.stringify(options);
@@ -9588,7 +9604,6 @@ function AutocompleteInner(props, ref) {
   react.useEffect(() => {
     setAvailableItems(inputOptions);
   }, [inputOptions]);
-  const disabledItems = react.useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
   const {
     density
   } = useEds();
@@ -9624,15 +9639,27 @@ function AutocompleteInner(props, ref) {
     addSelectedItem,
     removeSelectedItem,
     selectedItems,
-    reset: resetSelection,
     setSelectedItems
   } = downshift.useMultipleSelection(multipleSelectionProps);
+  const enabledItems = react.useMemo(() => {
+    const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
+    return inputOptions.filter(x => !disabledItemsSet.has(x));
+  }, [inputOptions, optionDisabled]);
+  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(optionDisabled)), [selectedItems, optionDisabled]);
+  const selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = react.useMemo(() => {
-    if (!inputOptions || !selectedItems) return 'NONE';
-    if (inputOptions.length === selectedItems.length) return 'ALL';
-    if (inputOptions.length != selectedItems.length && selectedItems.length > 0) return 'SOME';
+    if (!enabledItems || !selectedEnabledItems) return 'NONE';
+    if (enabledItems.length === selectedEnabledItems.length) return 'ALL';
+    if (enabledItems.length != selectedEnabledItems.length && selectedEnabledItems.length > 0) return 'SOME';
     return 'NONE';
-  }, [inputOptions, selectedItems]);
+  }, [enabledItems, selectedEnabledItems]);
+  const toggleAllSelected = () => {
+    if (selectedEnabledItems.length === enabledItems.length) {
+      setSelectedItems([...selectedDisabledItemsSet]);
+    } else {
+      setSelectedItems([...enabledItems, ...selectedDisabledItemsSet]);
+    }
+  };
   const getLabel = react.useCallback(item => {
     //note: non strict check for null or undefined to allow 0
     if (item == null) {
@@ -9691,7 +9718,14 @@ function AutocompleteInner(props, ref) {
       highlightedIndex,
       type
     }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+      if (type == downshift.useCombobox.stateChangeTypes.InputClick || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp && !isOpen) {
+        //needs delay for dropdown to render before calling scroll
+        setTimeout(() => {
+          rowVirtualizer.scrollToIndex(highlightedIndex, {
+            align: allowSelectAll ? 'center' : 'auto'
+          });
+        }, 1);
+      } else if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
         rowVirtualizer.scrollToIndex(highlightedIndex, {
           align: allowSelectAll ? 'center' : 'auto'
         });
@@ -9802,7 +9836,7 @@ function AutocompleteInner(props, ref) {
     }
   }
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -9894,11 +9928,6 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
-  react.useEffect(() => {
-    if (isControlled) {
-      setSelectedItems(selectedOptions);
-    }
-  }, [isControlled, selectedOptions, setSelectedItems]);
   const {
     x,
     y,
@@ -9907,8 +9936,8 @@ function AutocompleteInner(props, ref) {
     strategy
   } = react$1.useFloating({
     placement: 'bottom-start',
-    middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
-      padding: 8
+    middleware: [react$1.offset(4), react$1.flip({
+      boundary: document?.body
     }), react$1.size({
       apply({
         rects,
@@ -9930,25 +9959,31 @@ function AutocompleteInner(props, ref) {
       return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
+  edsUtils.useIsomorphicLayoutEffect(() => {
+    if (isOpen) {
+      refs.floating.current.showPopover();
+    } else {
+      refs.floating.current.hidePopover();
+    }
+  }, [isOpen, refs.floating]);
   const clear = () => {
     resetCombobox();
-    resetSelection();
+    //dont clear items if they are selected and disabled
+    setSelectedItems([...selectedDisabledItemsSet]);
     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
-  const inDialog = edsUtils.useIsInDialog(refs.domReference.current);
-  const optionsList = /*#__PURE__*/jsxRuntime.jsx("div", {
+  const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
+    popover: "manual",
     ...getFloatingProps({
       ref: refs.setFloating,
+      onFocus: handleListFocus,
       style: {
         position: strategy,
         top: y || 0,
-        left: x || 0,
-        zIndex: 1500
+        left: x || 0
       }
     }),
     children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, {
@@ -10063,7 +10098,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 +10108,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
@@ -10092,10 +10127,7 @@ function AutocompleteInner(props, ref) {
         color: variant ? tokens.variants[variant].typography.color : undefined,
         text: helperText,
         icon: helperIcon
-      }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
-        id: "eds-autocomplete-container",
-        children: optionsList
-      })]
+      }), optionsList]
     })
   });
 }
@@ -10973,6 +11005,1182 @@ 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 intl = new Intl.DateTimeFormat();
+const defaultTimezone = intl.resolvedOptions().timeZone;
+const DatePickerContext = /*#__PURE__*/react.createContext({
+  timezone: defaultTimezone
+});
+const DatePickerProvider = ({
+  timezone,
+  formatOptions,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerContext.Provider, {
+    value: {
+      timezone: timezone ?? defaultTimezone,
+      formatOptions
+    },
+    children: children
+  });
+};
+const useDatePickerContext = () => react.useContext(DatePickerContext);
+
+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 {
+    formatOptions,
+    timezone
+  } = useDatePickerContext();
+  const formatter = reactAria.useDateFormatter(formatOptions);
+  const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
+  const part = parts.find(p => p.type === segment.type);
+  const value = part?.value ?? segment.text;
+  const [focus, setFocus] = react.useState(false);
+  const ref = react.useRef(null);
+  const {
+    segmentProps
+  } = reactAria.useDateSegment(segment, state, ref);
+  return /*#__PURE__*/jsxRuntime.jsx(Segment, {
+    ...segmentProps,
+    onFocus: e => {
+      setFocus(true);
+      segmentProps.onFocus(e);
+    },
+    onBlur: e => {
+      setFocus(false);
+      segmentProps.onBlur(e);
+    },
+    $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: focus ? segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0') : value
+  });
+}
+
+// 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 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,
+  formatOptions,
+  ...props
+}, forwardedRef) => {
+  timezone = timezone ?? defaultTimezone;
+  formatOptions = formatOptions ?? {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
+  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;
+
+  // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
+  react.useEffect(() => {
+    if (!defaultValue && !value) setInnerValue(null);
+  }, [defaultValue, value]);
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+    timezone: timezone,
+    formatOptions: formatOptions,
+    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,
+  formatOptions,
+  disabled: isDisabled,
+  readOnly: isReadOnly,
+  ...props
+}, forwardedRef) => {
+  timezone = timezone ?? defaultTimezone;
+  formatOptions = formatOptions ?? {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  };
+  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;
+
+  // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
+  react.useEffect(() => {
+    const val = defaultValue ?? value;
+    if (!defaultValue && !value) setInnerValue(null);
+    if (!val?.from && !val?.to) setInnerValue(null);
+  }, [defaultValue, value]);
+  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+    timezone: timezone,
+    formatOptions: formatOptions,
+    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 +12191,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;