@equinor/eds-core-react 0.15.0-dev.20211116 → 0.16.0

package/dist/core-react.cjs.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('focus-visible');
-var _extends = require('@babel/runtime/helpers/extends');
-var React$1 = require('react');
+var React = require('react');
 var styled = require('styled-components');
 var edsTokens = require('@equinor/eds-tokens');
 var R = require('ramda');
+var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
 var ReactDom = require('react-dom');
 var reactPopper = require('react-popper');
@@ -35,8 +34,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var R__namespace = /*#__PURE__*/_interopNamespace(R);
 var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
@@ -86,7 +84,7 @@ const {
     compact__standard: compactClickboundHeight$1
   }
 } = edsTokens.tokens;
-const button = {
+const button$1 = {
   background: 'transparent',
   height: buttonHeight,
   typography: { ...buttonTypography,
@@ -107,7 +105,7 @@ const button = {
     height: clicboundHeight$1,
     width: '100%',
     offset: {
-      top: `${(parseInt(clicboundHeight$1) - parseInt(buttonHeight)) / 2 + 1}px`,
+      top: "".concat((parseInt(clicboundHeight$1) - parseInt(buttonHeight)) / 2 + 1, "px"),
       left: '0'
     }
   },
@@ -157,7 +155,7 @@ const button = {
         height: compactClickboundHeight$1,
         width: '100%',
         offset: {
-          top: `${(parseInt(compactClickboundHeight$1) - parseInt(compactButtonHeight)) / 2 + 1}px`,
+          top: "".concat((parseInt(compactClickboundHeight$1) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
           left: '0'
         }
       }
@@ -199,7 +197,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = R__namespace.mergeDeepRight(button, {
+const primary$9 = R__namespace.mergeDeepRight(button$1, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -284,7 +282,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = R__namespace.mergeDeepRight(button, {
+const primary$8 = R__namespace.mergeDeepRight(button$1, {
   typography: {
     color: primaryColor$7
   },
@@ -385,7 +383,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = R__namespace.mergeDeepRight(button, {
+const primary$7 = R__namespace.mergeDeepRight(button$1, {
   typography: {
     color: primaryColor$6
   },
@@ -466,7 +464,7 @@ const {
   },
   shape: shape$2
 } = edsTokens.tokens;
-const primary$6 = R__namespace.mergeDeepRight(button, {
+const primary$6 = R__namespace.mergeDeepRight(button$1, {
   height: shape$2.icon_button.minHeight,
   width: shape$2.icon_button.minWidth,
   typography: {
@@ -485,7 +483,7 @@ const primary$6 = R__namespace.mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: `${(parseInt(clicboundHeight) - parseInt(shape$2.icon_button.minWidth)) / 2}px`
+      left: "".concat((parseInt(clicboundHeight) - parseInt(shape$2.icon_button.minWidth)) / 2, "px")
     }
   },
   states: {
@@ -516,7 +514,7 @@ const primary$6 = R__namespace.mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: `${(parseInt(compactClickboundHeight) - parseInt(shape$2._modes.compact.icon_button.minWidth)) / 2}px`
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$2._modes.compact.icon_button.minWidth)) / 2, "px")
         }
       }
     }
@@ -585,7 +583,7 @@ const shorthand = token => {
     return null;
   }
 
-  return `${width} ${style} ${color}`;
+  return "".concat(width, " ").concat(style, " ").concat(color);
 };
 
 const bordersTemplate = border => {
@@ -654,41 +652,34 @@ const typographyTemplate = (typography, link) => {
     return '';
   }
 
-  let base = `
-  margin: 0;
-  color: ${typography.color};
-  font-family: ${typography.fontFamily};
-  font-size: ${typography.fontSize};
-  font-weight: ${typography.fontWeight};
-  line-height: ${typography.lineHeight};
-  `;
+  let base = "\n  margin: 0;\n  color: ".concat(typography.color, ";\n  font-family: ").concat(typography.fontFamily, ";\n  font-size: ").concat(typography.fontSize, ";\n  font-weight: ").concat(typography.fontWeight, ";\n  line-height: ").concat(typography.lineHeight, ";\n  ");
 
   if (typography.fontStyle) {
-    base += `\nfont-style: ${typography.fontStyle};`;
+    base += "\nfont-style: ".concat(typography.fontStyle, ";");
   }
 
   if (typography.letterSpacing) {
-    base += `\nletter-spacing: ${typography.letterSpacing};`;
+    base += "\nletter-spacing: ".concat(typography.letterSpacing, ";");
   }
 
   if (typography.textTransform) {
-    base += `\ntext-transform: ${typography.textTransform};`;
+    base += "\ntext-transform: ".concat(typography.textTransform, ";");
   }
 
   if (typography.textDecoration) {
-    base += `\ntext-decoration: ${typography.textDecoration};`;
+    base += "\ntext-decoration: ".concat(typography.textDecoration, ";");
   }
 
   if (typography.textAlign) {
-    base += `\ntext-align: ${typography.textAlign};`;
+    base += "\ntext-align: ".concat(typography.textAlign, ";");
   }
 
   if (typography.fontFeature) {
-    base += `\nfont-feature-settings: ${typography.fontFeature};`;
+    base += "\nfont-feature-settings: ".concat(typography.fontFeature, ";");
   }
 
   if (link) {
-    base += `\ncursor: pointer;`;
+    base += "\ncursor: pointer;";
   }
 
   return base;
@@ -732,7 +723,7 @@ const setReactInputValue = (input, value) => {
 };
 
 const useOutsideClick = (el, callback) => {
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const handleClick = e => {
       if (el && !el.contains(e.target)) {
         callback(e);
@@ -748,7 +739,7 @@ const useOutsideClick = (el, callback) => {
 
 /** Returns a memoized function that calls passed refs sequentially with passed element */
 const useCombinedRefs = (...refs) => {
-  return React$1.useCallback(element => refs.forEach(ref => {
+  return React.useCallback(element => refs.forEach(ref => {
     if (typeof ref === 'function') {
       ref(element);
     } else if (ref && typeof ref === 'object') {
@@ -796,7 +787,7 @@ var KEY;
 })(KEY || (KEY = {}));
 
 const useGlobalKeyPress = (targetKey, callback) => {
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const handleGlobalKeyPress = e => {
       const {
         key
@@ -817,19 +808,19 @@ const useGlobalKeyPress = (targetKey, callback) => {
 };
 
 const useId = (idOverride, type) => {
-  const [defaultId, setDefaultId] = React$1.useState(idOverride);
+  const [defaultId, setDefaultId] = React.useState(idOverride);
   const id = idOverride || defaultId;
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (defaultId == null) {
-      setDefaultId(`eds-${type ? type + `-` : ''}${Math.round(Math.random() * 1e5)}`);
+      setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
     }
   }, [defaultId, type]);
   return id;
 };
 
 const useIsMounted = () => {
-  const [isMounted, setIsMounted] = React$1.useState(null);
-  React$1.useEffect(() => {
+  const [isMounted, setIsMounted] = React.useState(null);
+  React.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
   }, []);
@@ -837,7 +828,7 @@ const useIsMounted = () => {
 };
 
 const useAutoResize = (targetEl, maxHeight) => {
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     const handleResize = () => {
       targetEl.style.height = 'auto';
       const {
@@ -856,7 +847,7 @@ const useAutoResize = (targetEl, maxHeight) => {
         }
 
         if (newHeight > clientHeight) {
-          targetEl.style.height = `${newHeight}px`;
+          targetEl.style.height = "".concat(newHeight, "px");
         }
       }
     };
@@ -872,7 +863,7 @@ const useAutoResize = (targetEl, maxHeight) => {
   }, [targetEl, maxHeight]);
 };
 
-const useToken = (options, token) => React$1.useCallback(() => {
+const useToken = (options, token) => React.useCallback(() => {
   const {
     density
   } = options;
@@ -885,7 +876,7 @@ const useToken = (options, token) => React$1.useCallback(() => {
 }, [options, token]);
 
 const useHideBodyScroll = overflowState => {
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     document.body.style.overflow = 'hidden';
     return () => {
       document.body.style.overflow = overflowState;
@@ -901,25 +892,28 @@ const FullWidthInner = styled__default['default'].span.withConfig({
   displayName: "InnerFullWidth__FullWidthInner",
   componentId: "sc-qeawkb-1"
 })(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
-const InnerFullWidth = /*#__PURE__*/React$1.forwardRef(function InnerFullWidth({
+const InnerFullWidth = /*#__PURE__*/React.forwardRef(function InnerFullWidth({
   children
 }, ref) {
   // We need everything in elements for proper flexing 💪
-  const updatedChildren = React$1.Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/React.createElement(FullWidthCenterContent, null, child) : child);
-  return /*#__PURE__*/React.createElement(FullWidthInner, {
-    ref: ref
-  }, updatedChildren);
+  const updatedChildren = React.Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsxRuntime.jsx(FullWidthCenterContent, {
+    children: child
+  }) : child);
+  return /*#__PURE__*/jsxRuntime.jsx(FullWidthInner, {
+    ref: ref,
+    children: updatedChildren
+  });
 });
 
 const initalState$3 = {
   density: 'comfortable'
 };
-const EdsContext = /*#__PURE__*/React$1.createContext(initalState$3);
+const EdsContext = /*#__PURE__*/React.createContext(initalState$3);
 const EdsProvider = ({
   children,
   density = 'comfortable'
 }) => {
-  const [state, setState] = React$1.useState({ ...initalState$3,
+  const [state, setState] = React.useState({ ...initalState$3,
     density
   });
 
@@ -927,7 +921,7 @@ const EdsProvider = ({
     density
   }));
 
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (typeof density !== 'undefined' && density !== state.density) {
       setDensity(density);
     }
@@ -935,11 +929,12 @@ const EdsProvider = ({
   const value = {
     density: state.density
   };
-  return /*#__PURE__*/React.createElement(EdsContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
+    value: value,
+    children: children
+  });
 };
-const useEds = () => React$1.useContext(EdsContext);
+const useEds = () => React.useContext(EdsContext);
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {
@@ -993,9 +988,9 @@ const ButtonBase = styled__default['default'].button.withConfig({
     hover,
     disabled
   } = states;
-  return styled.css(["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{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["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{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
-const Button = /*#__PURE__*/React$1.forwardRef(function Button({
+const Button = /*#__PURE__*/React.forwardRef(function Button({
   color = 'primary',
   variant = 'contained',
   children,
@@ -1023,9 +1018,16 @@ const Button = /*#__PURE__*/React$1.forwardRef(function Button({
     tabIndex,
     ...other
   };
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(ButtonBase, buttonProps, fullWidth ? /*#__PURE__*/React.createElement(InnerFullWidth, null, children) : /*#__PURE__*/React.createElement(Inner, null, children)));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(ButtonBase, { ...buttonProps,
+      children: fullWidth ? /*#__PURE__*/jsxRuntime.jsx(InnerFullWidth, {
+        children: children
+      }) : /*#__PURE__*/jsxRuntime.jsx(Inner, {
+        children: children
+      })
+    })
+  });
 });
 
 const {
@@ -1122,7 +1124,7 @@ const findTypography = (variantName, group) => {
 
 const findColor = (inputColor = null) => typeof colors$7[inputColor] === 'undefined' ? inputColor : colors$7[inputColor];
 
-const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
+const toVariantName = (variant, bold = false, italic = false, link = false) => "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : '');
 
 const StyledTypography$1 = styled__default['default'].p.withConfig({
   displayName: "Typography__StyledTypography",
@@ -1139,8 +1141,8 @@ const StyledTypography$1 = styled__default['default'].p.withConfig({
 }) => //https://caniuse.com/#feat=css-line-clamp
 lines > 0 && styled.css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines), ({
   link: link$1
-}) => link$1 && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], outlineTemplate(link.states.focus.outline)));
-const Typography = /*#__PURE__*/React$1.forwardRef(function Typography({
+}) => link$1 && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
+const Typography = /*#__PURE__*/React.forwardRef(function Typography({
   variant = 'body_short',
   children,
   bold,
@@ -1156,17 +1158,19 @@ const Typography = /*#__PURE__*/React$1.forwardRef(function Typography({
   const typography = findTypography(variantName, group);
 
   if (typeof typography === 'undefined') {
-    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
+    throw new Error("Typography variant not found for variant \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(group || '', "\""));
   }
 
-  return /*#__PURE__*/React.createElement(StyledTypography$1, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTypography$1, {
     as: as,
     typography: { ...typography,
       ...token
     },
     link: link,
-    ref: ref
-  }, other), children);
+    ref: ref,
+    ...other,
+    children: children
+  });
 }); // Typography.displayName = 'EdsTypography'
 
 const {
@@ -1320,35 +1324,38 @@ const TableBase$1 = styled__default['default'].table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
-const Table$1 = /*#__PURE__*/React$1.forwardRef(function Table({
+const Table$1 = /*#__PURE__*/React.forwardRef(function Table({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(TableBase$1, _extends__default['default']({}, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, { ...props,
+    ref: ref,
+    children: children
+  });
 }); // Table.displayName = 'EdsTable'
 
 const initalState$2 = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/React$1.createContext(initalState$2);
+const InnerContext = /*#__PURE__*/React.createContext(initalState$2);
 
 const TableBase = styled__default['default'].tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/React$1.forwardRef(function Body({
+const Body = /*#__PURE__*/React.forwardRef(function Body({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(InnerContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'body'
-    }
-  }, /*#__PURE__*/React.createElement(TableBase, _extends__default['default']({}, props, {
-    ref: ref
-  }), children));
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(TableBase, { ...props,
+      ref: ref,
+      children: children
+    })
+  });
 });
 
 const StyledTableCell$1 = styled__default['default'].td.withConfig({
@@ -1370,7 +1377,7 @@ const StyledTableCell$1 = styled__default['default'].td.withConfig({
   const base = styled.css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/React$1.forwardRef(function TableDataCell({
+const TableDataCell = /*#__PURE__*/React.forwardRef(function TableDataCell({
   children,
   variant = 'text',
   ...rest
@@ -1381,11 +1388,13 @@ const TableDataCell = /*#__PURE__*/React$1.forwardRef(function TableDataCell({
   const token = useToken({
     density
   }, applyVariant(variant, tableCell));
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(StyledTableCell$1, _extends__default['default']({}, rest, {
-    ref: ref
-  }), children));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, { ...rest,
+      ref: ref,
+      children: children
+    })
+  });
 });
 
 const {
@@ -1536,7 +1545,7 @@ const CellInner = styled__default['default'].div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/React$1.forwardRef(function TableHeaderCell({
+const TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell({
   children,
   sort,
   ...rest
@@ -1547,33 +1556,41 @@ const TableHeaderCell = /*#__PURE__*/React$1.forwardRef(function TableHeaderCell
   const token = useToken({
     density
   }, token$5);
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(StyledTableCell, _extends__default['default']({
-    "aria-sort": sort
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(CellInner, null, children)));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
+      "aria-sort": sort,
+      ...rest,
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx(CellInner, {
+        children: children
+      })
+    })
+  });
 });
 
-const Cell = /*#__PURE__*/React$1.forwardRef(function Cell({ ...rest
+const Cell = /*#__PURE__*/React.forwardRef(function Cell({ ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(InnerContext.Consumer, null, ({
-    variant,
-    sticky
-  }) => {
-    switch (variant) {
-      case 'head':
-        return /*#__PURE__*/React.createElement(TableHeaderCell, _extends__default['default']({
-          ref: ref,
-          sticky: sticky
-        }, rest));
+  return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Consumer, {
+    children: ({
+      variant,
+      sticky
+    }) => {
+      switch (variant) {
+        case 'head':
+          return /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
+            ref: ref,
+            sticky: sticky,
+            ...rest
+          });
 
-      default:
-      case 'body':
-        return /*#__PURE__*/React.createElement(TableDataCell, _extends__default['default']({
-          ref: ref
-        }, rest));
+        default:
+        case 'body':
+          return /*#__PURE__*/jsxRuntime.jsx(TableDataCell, {
+            ref: ref,
+            ...rest
+          });
+      }
     }
   });
 });
@@ -1609,19 +1626,21 @@ const StyledTableHead = styled__default['default'].thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token$4.border), token$4.background);
-const Head = /*#__PURE__*/React$1.forwardRef(function Head({
+const Head = /*#__PURE__*/React.forwardRef(function Head({
   children,
   sticky,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(InnerContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
     value: {
       variant: 'head',
       sticky
-    }
-  }, /*#__PURE__*/React.createElement(StyledTableHead, _extends__default['default']({}, props, {
-    ref: ref
-  }), children));
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableHead, { ...props,
+      ref: ref,
+      children: children
+    })
+  });
 });
 
 const {
@@ -1664,14 +1683,15 @@ const StyledRow = styled__default['default'].tr.withConfig({
     }
   };
 });
-const Row = /*#__PURE__*/React$1.forwardRef(function Row({ ...props
+const Row = /*#__PURE__*/React.forwardRef(function Row({ ...props
 }, ref) {
   const {
     children
   } = props;
-  return /*#__PURE__*/React.createElement(StyledRow, _extends__default['default']({}, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledRow, { ...props,
+    ref: ref,
+    children: children
+  });
 });
 
 const StyledCaption = styled__default['default'].caption.withConfig({
@@ -1682,10 +1702,10 @@ const StyledCaption = styled__default['default'].caption.withConfig({
 }) => ({
   captionSide
 }));
-const Caption = /*#__PURE__*/React$1.forwardRef(function Caption(props, ref) {
-  return /*#__PURE__*/React.createElement(StyledCaption, _extends__default['default']({}, props, {
+const Caption = /*#__PURE__*/React.forwardRef(function Caption(props, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCaption, { ...props,
     ref: ref
-  }));
+  });
 });
 
 const Table = Table$1;
@@ -1725,12 +1745,12 @@ const dividerHeight = 1;
 
 const reduceByValue = subtractValue => valueWithUnit => {
   const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return `${parseInt(valueAndUnit[0]) - subtractValue}` + valueAndUnit[1];
+  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
 };
 
 const reduceValueByDividerHeight = reduceByValue(dividerHeight);
 const baseDivider$1 = {
-  height: `${dividerHeight}px`
+  height: "".concat(dividerHeight, "px")
 };
 const divider$1 = {
   lighter: {
@@ -1772,7 +1792,7 @@ const StyledDivider$3 = styled__default['default'].hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/React$1.forwardRef(function Divider({
+const Divider = /*#__PURE__*/React.forwardRef(function Divider({
   color = 'medium',
   variant = 'medium',
   ...rest
@@ -1785,19 +1805,19 @@ const Divider = /*#__PURE__*/React$1.forwardRef(function Divider({
     dividerHeight: baseDivider.height,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledDivider$3, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledDivider$3, { ...props,
     ref: ref
-  }));
+  });
 });
 
 const initalState$1 = {
   isFocused: false
 };
-const TextFieldContext = /*#__PURE__*/React$1.createContext(initalState$1);
+const TextFieldContext = /*#__PURE__*/React.createContext(initalState$1);
 const TextFieldProvider = ({
   children
 }) => {
-  const [state, setState] = React$1.useState(initalState$1);
+  const [state, setState] = React.useState(initalState$1);
 
   const handleFocus = () => {
     setState(prevState => ({ ...prevState,
@@ -1816,11 +1836,12 @@ const TextFieldProvider = ({
     handleBlur,
     isFocused: state.isFocused
   };
-  return /*#__PURE__*/React.createElement(TextFieldContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(TextFieldContext.Provider, {
+    value: value,
+    children: children
+  });
 };
-const useTextField = () => React$1.useContext(TextFieldContext);
+const useTextField = () => React.useContext(TextFieldContext);
 
 const {
   colors: {
@@ -2020,7 +2041,7 @@ const StyledInput = styled__default['default'].input.withConfig({
   } = theme;
   return styled.css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
-const Input$5 = /*#__PURE__*/React$1.forwardRef(function Input({
+const Input$5 = /*#__PURE__*/React.forwardRef(function Input({
   variant = 'default',
   disabled = false,
   type = 'text',
@@ -2040,9 +2061,11 @@ const Input$5 = /*#__PURE__*/React$1.forwardRef(function Input({
     disabled,
     ...other
   };
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(StyledInput, inputProps));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledInput, { ...inputProps
+    })
+  });
 });
 
 const {
@@ -2114,7 +2137,7 @@ const StyledIcon$2 = styled__default['default'].div.withConfig({
 
   return styled.css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
 });
-const InputIcon = /*#__PURE__*/React$1.forwardRef(function InputIcon({
+const InputIcon = /*#__PURE__*/React.forwardRef(function InputIcon({
   size = 24,
   variant = 'default',
   isDisabled = false,
@@ -2135,9 +2158,12 @@ const InputIcon = /*#__PURE__*/React$1.forwardRef(function InputIcon({
     isFocused,
     size
   };
-  return /*#__PURE__*/React.createElement(StyledIcon$2, _extends__default['default']({
-    ref: ref
-  }, iconProps, other), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledIcon$2, {
+    ref: ref,
+    ...iconProps,
+    ...other,
+    children: children
+  });
 });
 
 const {
@@ -2279,7 +2305,7 @@ const Variation$2 = ({
   density
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {
@@ -2306,7 +2332,7 @@ const StyledTextarea = styled__default['default'].textarea.withConfig({
   displayName: "Textarea__StyledTextarea",
   componentId: "sc-2yjdcc-0"
 })(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation$2, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-const Textarea = /*#__PURE__*/React$1.forwardRef(function Textarea({
+const Textarea = /*#__PURE__*/React.forwardRef(function Textarea({
   variant = 'default',
   disabled = false,
   type = 'text',
@@ -2315,7 +2341,7 @@ const Textarea = /*#__PURE__*/React$1.forwardRef(function Textarea({
 }, ref) {
   const actualVariant = variant === 'default' ? 'input' : variant;
   const inputVariant = tokens$6[actualVariant];
-  const [textareaEl, setTextareaEl] = React$1.useState(null);
+  const [textareaEl, setTextareaEl] = React.useState(null);
   const {
     density
   } = useEds();
@@ -2345,7 +2371,8 @@ const Textarea = /*#__PURE__*/React$1.forwardRef(function Textarea({
     density,
     ...other
   };
-  return /*#__PURE__*/React.createElement(StyledTextarea, inputProps);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTextarea, { ...inputProps
+  });
 });
 
 const {
@@ -2360,10 +2387,10 @@ const Variation$1 = ({
   var _token$border, _token$border2, _token$border3, _token$border4;
 
   if (!variant) {
-    return ``;
+    return "";
   }
 
-  return styled.css(["box-shadow:", ";", ""], isFocused ? `none` : variant === 'default' ? `inset 0 -1px 0 0 ${((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)}` : `0 0 0 1px ${((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)}`, isFocused && outlineTemplate(token.states.focus.outline));
+  return styled.css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
 };
 
 const StrippedInput = styled__default['default'](Input$5).withConfig({
@@ -2403,7 +2430,7 @@ const Adornments = styled__default['default'].div.withConfig({
   marginTop: theme.spacings.top,
   alignSelf: 'start'
 });
-const Field = /*#__PURE__*/React$1.forwardRef(function Field({
+const Field = /*#__PURE__*/React.forwardRef(function Field({
   multiline,
   variant,
   disabled,
@@ -2462,15 +2489,22 @@ const Field = /*#__PURE__*/React$1.forwardRef(function Field({
     rowsMax,
     ref: ref
   };
-  return /*#__PURE__*/React.createElement(InputWrapper$2, inputWrapperProps, multiline ? /*#__PURE__*/React.createElement(StrippedTextarea, textareaProps) : /*#__PURE__*/React.createElement(StrippedInput, inputProps), (inputIcon || unit) && /*#__PURE__*/React.createElement(Adornments, {
-    multiline: multiline
-  }, unit && /*#__PURE__*/React.createElement(Unit, {
-    isDisabled: disabled
-  }, unit), inputIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    isDisabled: disabled,
-    variant: variant,
-    size: iconSize
-  }, inputIcon)));
+  return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper$2, { ...inputWrapperProps,
+    children: [multiline ? /*#__PURE__*/jsxRuntime.jsx(StrippedTextarea, { ...textareaProps
+    }) : /*#__PURE__*/jsxRuntime.jsx(StrippedInput, { ...inputProps
+    }), (inputIcon || unit) && /*#__PURE__*/jsxRuntime.jsxs(Adornments, {
+      multiline: multiline,
+      children: [unit && /*#__PURE__*/jsxRuntime.jsx(Unit, {
+        isDisabled: disabled,
+        children: unit
+      }), inputIcon && /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
+        isDisabled: disabled,
+        variant: variant,
+        size: iconSize,
+        children: inputIcon
+      })]
+    })]
+  });
 });
 
 const {
@@ -2510,7 +2544,7 @@ const Text$2 = styled__default['default'].span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-const Label$1 = /*#__PURE__*/React$1.forwardRef(function Label(props, ref) {
+const Label$1 = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
   const {
     label = '',
     meta,
@@ -2521,10 +2555,16 @@ const Label$1 = /*#__PURE__*/React$1.forwardRef(function Label(props, ref) {
     /*#__PURE__*/
 
     /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
-    React.createElement(LabelBase, _extends__default['default']({
+    jsxRuntime.jsxs(LabelBase, {
       ref: ref,
-      disabledText: disabled
-    }, other), /*#__PURE__*/React.createElement(Text$2, null, label), meta && /*#__PURE__*/React.createElement(Text$2, null, meta))
+      disabledText: disabled,
+      ...other,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Text$2, {
+        children: label
+      }), meta && /*#__PURE__*/jsxRuntime.jsx(Text$2, {
+        children: meta
+      })]
+    })
   );
 }); // Label.displayName = 'eds-text-field-label'
 
@@ -2580,7 +2620,7 @@ const Variation = ({
   isDisabled
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {
@@ -2612,7 +2652,7 @@ const Text$1 = styled__default['default'].p.withConfig({
 })(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), ({
   spacings
 }) => spacings.left, Variation);
-const TextfieldHelperText = /*#__PURE__*/React$1.forwardRef(function TextfieldHelperText({
+const TextfieldHelperText = /*#__PURE__*/React.forwardRef(function TextfieldHelperText({
   helperText: helperText$1,
   icon,
   variant = 'default',
@@ -2629,27 +2669,30 @@ const TextfieldHelperText = /*#__PURE__*/React$1.forwardRef(function TextfieldHe
     disabledColor: helperVariant.disabledColor,
     focusColor: helperVariant.focusColor
   };
-  return /*#__PURE__*/React.createElement(Container$4, _extends__default['default']({
-    ref: ref
-  }, rest, {
-    spacings: spacings
-  }), icon && /*#__PURE__*/React.createElement(InputIcon, {
-    isDisabled: isDisabled,
-    colors: colors,
-    size: 16
-  }, icon), /*#__PURE__*/React.createElement(Text$1, {
-    variant: helperVariant,
-    isFocused: isFocused,
-    isDisabled: isDisabled,
-    spacings: spacings
-  }, helperText$1));
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$4, {
+    ref: ref,
+    ...rest,
+    spacings: spacings,
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
+      isDisabled: isDisabled,
+      colors: colors,
+      size: 16,
+      children: icon
+    }), /*#__PURE__*/jsxRuntime.jsx(Text$1, {
+      variant: helperVariant,
+      isFocused: isFocused,
+      isDisabled: isDisabled,
+      spacings: spacings,
+      children: helperText$1
+    })]
+  });
 });
 
 const Container$3 = styled__default['default'].div.withConfig({
   displayName: "TextField__Container",
   componentId: "sc-o1nc07-0"
 })(["min-width:100px;width:100%;"]);
-const TextField = /*#__PURE__*/React$1.forwardRef(function TextField({
+const TextField = /*#__PURE__*/React.forwardRef(function TextField({
   id,
   label,
   meta,
@@ -2703,9 +2746,17 @@ const TextField = /*#__PURE__*/React$1.forwardRef(function TextField({
   const token = useToken({
     density
   }, textfield$1);
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(Container$3, containerProps, /*#__PURE__*/React.createElement(TextFieldProvider, null, showLabel && /*#__PURE__*/React.createElement(Label$1, labelProps), /*#__PURE__*/React.createElement(Field, inputProps), showHelperText && /*#__PURE__*/React.createElement(TextfieldHelperText, helperProps))));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(Container$3, { ...containerProps,
+      children: /*#__PURE__*/jsxRuntime.jsxs(TextFieldProvider, {
+        children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, { ...labelProps
+        }), /*#__PURE__*/jsxRuntime.jsx(Field, { ...inputProps
+        }), showHelperText && /*#__PURE__*/jsxRuntime.jsx(TextfieldHelperText, { ...helperProps
+        })]
+      })
+    })
+  });
 });
 
 let _icons = {};
@@ -2733,7 +2784,7 @@ const customIcon = icon => ({
 
 const transform = ({
   rotation
-}) => rotation ? `transform: rotate(${rotation}deg)` : '';
+}) => rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
 
 const StyledSvg = styled__default['default'].svg.attrs(({
   height,
@@ -2742,8 +2793,8 @@ const StyledSvg = styled__default['default'].svg.attrs(({
 }) => ({
   name: null,
   xmlns: 'http://www.w3.org/2000/svg',
-  height: `${height}px`,
-  width: `${width}px`,
+  height: "".concat(height, "px"),
+  width: "".concat(width, "px"),
   fill
 })).withConfig({
   displayName: "Icon__StyledSvg",
@@ -2756,12 +2807,12 @@ const StyledPath$2 = styled__default['default'].path.attrs(({
   size: null,
   fillRule: 'evenodd',
   clipRule: 'evenodd',
-  transform: size / height !== 1 ? `scale(${size / height})` : null
+  transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
 })).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const Icon$2 = /*#__PURE__*/React$1.forwardRef(function Icon({
+const Icon$2 = /*#__PURE__*/React.forwardRef(function Icon({
   size = 24,
   color = 'currentColor',
   name,
@@ -2777,14 +2828,14 @@ const Icon$2 = /*#__PURE__*/React$1.forwardRef(function Icon({
   } = data ? customIcon(data) : get(name);
 
   if (typeof icon === 'undefined') {
-    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
+    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
   let svgProps = {
     height: size,
     width: size,
     fill: color,
-    viewBox: `0 0 ${size} ${size}`,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
     className,
     rotation,
     name,
@@ -2800,7 +2851,7 @@ const Icon$2 = /*#__PURE__*/React$1.forwardRef(function Icon({
   let titleId = '';
 
   if (title) {
-    titleId = `${icon.prefix}-${icon.name}-${count}`;
+    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
     svgProps = { ...svgProps,
       title,
       role: 'img',
@@ -2809,13 +2860,17 @@ const Icon$2 = /*#__PURE__*/React$1.forwardRef(function Icon({
     };
   }
 
-  return /*#__PURE__*/React.createElement(StyledSvg, _extends__default['default']({}, svgProps, rest, {
-    ref: ref
-  }), title && /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title), /*#__PURE__*/React.createElement(StyledPath$2, _extends__default['default']({
-    "data-testid": "eds-icon-path"
-  }, pathProps)));
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledSvg, { ...svgProps,
+    ...rest,
+    ref: ref,
+    children: [title && /*#__PURE__*/jsxRuntime.jsx("title", {
+      id: titleId,
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, {
+      "data-testid": "eds-icon-path",
+      ...pathProps
+    })]
+  });
 }); // Icon.displayName = 'EdsIcon'
 
 const Icon$1 = Icon$2;
@@ -2839,32 +2894,35 @@ const StyledList$1 = styled__default['default'].ul.withConfig({
 })(["", " ", ""], ({
   as
 }) => as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography$d));
-const List$2 = /*#__PURE__*/React$1.forwardRef(function List({
+const List$2 = /*#__PURE__*/React.forwardRef(function List({
   children,
   variant = 'bullet',
   ...props
 }, ref) {
   const as = variant === 'numbered' ? 'ol' : 'ul';
-  return /*#__PURE__*/React.createElement(StyledList$1, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledList$1, {
     as: as,
-    ref: ref
-  }, props), children);
+    ref: ref,
+    ...props,
+    children: children
+  });
 }); // List.displayName = 'List'
 
-const ListItem$4 = /*#__PURE__*/React$1.forwardRef(function ListItem({
+const ListItem$2 = /*#__PURE__*/React.forwardRef(function ListItem({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement("li", _extends__default['default']({}, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx("li", { ...props,
+    ref: ref,
+    children: children
+  });
 }); // ListItem.displayName = 'ListItem'
 
 const List$1 = List$2;
-List$1.Item = ListItem$4;
+List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
-const Accordion$1 = /*#__PURE__*/React$1.forwardRef(function Accordion({
+const Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion({
   headerLevel = 'h2',
   chevronPosition = 'left',
   children,
@@ -2872,21 +2930,22 @@ const Accordion$1 = /*#__PURE__*/React$1.forwardRef(function Accordion({
   ...props
 }, ref) {
   const accordionId = useId(id, 'accordion');
-  const AccordionItems = React$1.Children.map(children, (child, index) => {
+  const AccordionItems = React.Children.map(children, (child, index) => {
     if (!child) return null;
-    return /*#__PURE__*/React$1.cloneElement(child, {
+    return /*#__PURE__*/React.cloneElement(child, {
       accordionId,
       index,
       headerLevel,
       chevronPosition
     });
   });
-  return /*#__PURE__*/React.createElement("div", _extends__default['default']({}, props, {
-    ref: ref
-  }), AccordionItems);
+  return /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
+    ref: ref,
+    children: AccordionItems
+  });
 }); // Accordion.displayName = 'Accordion'
 
-const AccordionItem = /*#__PURE__*/React$1.forwardRef(function AccordionItem({
+const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionItem({
   headerLevel,
   chevronPosition,
   index = 0,
@@ -2896,16 +2955,16 @@ const AccordionItem = /*#__PURE__*/React$1.forwardRef(function AccordionItem({
   disabled,
   ...props
 }, ref) {
-  const [expanded, setExpanded] = React$1.useState(isExpanded);
+  const [expanded, setExpanded] = React.useState(isExpanded);
 
   const toggleExpanded = () => {
     setExpanded(!expanded);
   };
 
-  const Children = React$1.Children.map(children, (child, childIndex) => {
-    const headerId = `${accordionId}-header-${index + 1}`;
-    const panelId = `${accordionId}-panel-${index + 1}`;
-    return childIndex === 0 ? /*#__PURE__*/React$1.cloneElement(child, {
+  const Children = React.Children.map(children, (child, childIndex) => {
+    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
+    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    return childIndex === 0 ? /*#__PURE__*/React.cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,
       id: headerId,
@@ -2914,18 +2973,19 @@ const AccordionItem = /*#__PURE__*/React$1.forwardRef(function AccordionItem({
       chevronPosition,
       parentIndex: index,
       disabled
-    }) : /*#__PURE__*/React$1.cloneElement(child, {
+    }) : /*#__PURE__*/React.cloneElement(child, {
       hidden: !expanded,
       id: panelId,
       headerId
     });
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setExpanded(isExpanded);
   }, [isExpanded]);
-  return /*#__PURE__*/React.createElement("div", _extends__default['default']({}, props, {
-    ref: ref
-  }), Children);
+  return /*#__PURE__*/jsxRuntime.jsx("div", { ...props,
+    ref: ref,
+    children: Children
+  });
 }); // AccordionItem.displayName = 'AccordionItem'
 
 const {
@@ -3048,16 +3108,17 @@ const StyledAccordionHeaderTitle = styled__default['default'].span.withConfig({
 
   return isExpanded && !disabled ? (_tokens$entities$head = accordion.entities.header.states.active.typography) === null || _tokens$entities$head === void 0 ? void 0 : _tokens$entities$head.color : 'inherit';
 });
-const AccordionHeaderTitle = /*#__PURE__*/React$1.forwardRef(function AccordionHeaderTitle({
+const AccordionHeaderTitle = /*#__PURE__*/React.forwardRef(function AccordionHeaderTitle({
   isExpanded,
   disabled,
   children
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledAccordionHeaderTitle, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     isExpanded: isExpanded,
-    disabled: disabled
-  }, children);
+    disabled: disabled,
+    children: children
+  });
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
 
 const {
@@ -3081,7 +3142,7 @@ const StyledAccordionHeader = styled__default['default'].div.attrs(({
 })).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), ({
+})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), outlineTemplate(header$2.states.focus.outline), ({
   parentIndex
 }) => parentIndex === 0 ? null : 'none', header$2.background, header$2.height, ({
   disabled
@@ -3107,7 +3168,7 @@ const StyledIcon$1 = styled__default['default'](Icon$1).withConfig({
 } : {
   marginLeft: '16px'
 });
-const AccordionHeader = /*#__PURE__*/React$1.forwardRef(function AccordionHeader({
+const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
   parentIndex,
   headerLevel,
   chevronPosition,
@@ -3145,23 +3206,24 @@ const AccordionHeader = /*#__PURE__*/React$1.forwardRef(function AccordionHeader
     }
   };
 
-  const chevron = /*#__PURE__*/React.createElement(StyledIcon$1, {
-    key: `${id}-icon`,
+  const chevron = /*#__PURE__*/jsxRuntime.jsx(StyledIcon$1, {
     data: isExpanded ? edsIcons.chevron_up : edsIcons.chevron_down,
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  });
-  const headerChildren = React$1.Children.map(children, child => {
+  }, "".concat(id, "-icon"));
+
+  const headerChildren = React.Children.map(children, child => {
     if (typeof child === 'string') {
-      return /*#__PURE__*/React.createElement(AccordionHeaderTitle, {
+      return /*#__PURE__*/jsxRuntime.jsx(AccordionHeaderTitle, {
         isExpanded: isExpanded,
-        disabled: disabled
-      }, child);
+        disabled: disabled,
+        children: child
+      });
     }
 
-    if ( /*#__PURE__*/React$1.isValidElement(child) && child.type === AccordionHeaderTitle) {
-      return /*#__PURE__*/React$1.cloneElement(child, {
+    if ( /*#__PURE__*/React.isValidElement(child) && child.type === AccordionHeaderTitle) {
+      return /*#__PURE__*/React.cloneElement(child, {
         isExpanded,
         disabled
       });
@@ -3170,17 +3232,18 @@ const AccordionHeader = /*#__PURE__*/React$1.forwardRef(function AccordionHeader
     return child;
   });
   const newChildren = [chevron, headerChildren];
-  return /*#__PURE__*/React.createElement(StyledAccordionHeader, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeader, {
     isExpanded: isExpanded,
     parentIndex: parentIndex,
     as: headerLevel,
-    disabled: disabled
-  }, props, {
+    disabled: disabled,
+    ...props,
     panelId: panelId,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    ref: ref
-  }), chevronPosition === 'left' ? newChildren : newChildren.reverse());
+    ref: ref,
+    children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+  });
 }); // AccordionHeader.displayName = 'EdsAccordionHeader'
 
 const {
@@ -3198,20 +3261,21 @@ const StyledAccordionPanel = styled__default['default'].div.attrs(({
   displayName: "AccordionPanel__StyledAccordionPanel",
   componentId: "sc-suplv4-0"
 })(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(accordion.border), spacingsTemplate(panel$1.spacings), header$1.background);
-const AccordionPanel = /*#__PURE__*/React$1.forwardRef(function AccordionPanel({
+const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPanel({
   id,
   headerId,
   hidden,
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledAccordionPanel, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, {
     headerId: headerId,
     id: id,
-    hidden: hidden
-  }, props, {
-    ref: ref
-  }), children);
+    hidden: hidden,
+    ...props,
+    ref: ref,
+    children: children
+  });
 }); // AccordionPanel.displayName = 'eds-accordion-panel'
 
 const Accordion = Accordion$1;
@@ -3224,7 +3288,7 @@ Accordion.Header.displayName = 'Accordion.Header';
 Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
 Accordion.Panel.displayName = 'Accordion.Panel';
 
-const TabsContext = /*#__PURE__*/React$1.createContext({
+const TabsContext = /*#__PURE__*/React.createContext({
   variant: 'minWidth',
   handleChange: () => null,
   activeTab: 0,
@@ -3234,7 +3298,7 @@ const TabsContext = /*#__PURE__*/React$1.createContext({
 const TabsProvider = TabsContext.Provider;
 TabsContext.Consumer;
 
-const Tabs$1 = /*#__PURE__*/React$1.forwardRef(function Tabs({
+const Tabs$1 = /*#__PURE__*/React.forwardRef(function Tabs({
   activeTab = 0,
   onChange,
   onBlur,
@@ -3244,7 +3308,7 @@ const Tabs$1 = /*#__PURE__*/React$1.forwardRef(function Tabs({
   ...props
 }, ref) {
   const tabsId = useId(id, 'tabs');
-  const [tabsFocused, setTabsFocused] = React$1.useState(false);
+  const [tabsFocused, setTabsFocused] = React.useState(false);
   let blurTimer;
 
   const handleBlur = e => {
@@ -3270,20 +3334,21 @@ const Tabs$1 = /*#__PURE__*/React$1.forwardRef(function Tabs({
     onFocus && onFocus(e);
   };
 
-  return /*#__PURE__*/React.createElement(TabsProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
     value: {
       activeTab,
       handleChange: onChange,
       tabsId,
       variant,
       tabsFocused
-    }
-  }, /*#__PURE__*/React.createElement("div", _extends__default['default']({
-    ref: ref
-  }, props, {
-    onBlur: handleBlur,
-    onFocus: handleFocus
-  })));
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      ...props,
+      onBlur: handleBlur,
+      onFocus: handleFocus
+    })
+  });
 });
 
 const variants$1 = {
@@ -3298,7 +3363,7 @@ const StyledTabList = styled__default['default'].div.attrs(() => ({
 })(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], ({
   variant
 }) => variants$1[variant]);
-const TabList = /*#__PURE__*/React$1.forwardRef(function TabsList({
+const TabList = /*#__PURE__*/React.forwardRef(function TabsList({
   children = [],
   ...props
 }, ref) {
@@ -3308,22 +3373,22 @@ const TabList = /*#__PURE__*/React$1.forwardRef(function TabsList({
     tabsId,
     variant = 'minWidth',
     tabsFocused
-  } = React$1.useContext(TabsContext);
-  const currentTab = React$1.useRef(activeTab);
-  const selectedTabRef = React$1.useCallback(node => {
+  } = React.useContext(TabsContext);
+  const currentTab = React.useRef(activeTab);
+  const selectedTabRef = React.useCallback(node => {
     if (node !== null && tabsFocused) {
       node.focus();
     }
   }, [tabsFocused]);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     currentTab.current = activeTab;
   }, [activeTab]);
-  const Tabs = React$1.Children.map(children, (child, index) => {
+  const Tabs = React.Children.map(children, (child, index) => {
     const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
     useCombinedRefs(child.ref, selectedTabRef) : child.ref;
-    return /*#__PURE__*/React$1.cloneElement(child, {
-      id: `${tabsId}-tab-${index + 1}`,
-      'aria-controls': `${tabsId}-panel-${index + 1}`,
+    return /*#__PURE__*/React.cloneElement(child, {
+      id: "".concat(tabsId, "-tab-").concat(index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
       active: index === activeTab,
       index,
       onClick: () => handleChange(index),
@@ -3360,12 +3425,13 @@ const TabList = /*#__PURE__*/React$1.forwardRef(function TabsList({
     }
   };
 
-  return /*#__PURE__*/React.createElement(StyledTabList, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTabList, {
     onKeyDown: handleKeyPress,
-    ref: ref
-  }, props, {
-    variant: variant
-  }), Tabs);
+    ref: ref,
+    ...props,
+    variant: variant,
+    children: Tabs
+  });
 });
 
 const {
@@ -3509,9 +3575,9 @@ const StyledTab = styled__default['default'].button.attrs(({
 })).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
+})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
   active
-}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), ({
+}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), ({
   active
 }) => active ? tab.states.active.states.hover.typography.color : tab.typography.color, ({
   disabled
@@ -3520,28 +3586,31 @@ const StyledTab = styled__default['default'].button.attrs(({
 }) => disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), ({
   active
 }) => active && bordersTemplate(tab.states.active.border));
-const Tab = /*#__PURE__*/React$1.forwardRef(function Tab(props, ref) {
-  return /*#__PURE__*/React.createElement(StyledTab, _extends__default['default']({
-    ref: ref
-  }, props));
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
+    ref: ref,
+    ...props
+  });
 });
 
-const TabPanels = /*#__PURE__*/React$1.forwardRef(function TabPanels({
+const TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels({
   children,
   ...props
 }, ref) {
   const {
     activeTab,
     tabsId
-  } = React$1.useContext(TabsContext);
-  const Panels = React$1.Children.map(children, (child, index) => /*#__PURE__*/React$1.cloneElement(child, {
-    id: `${tabsId}-panel-${index + 1}`,
-    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
+  } = React.useContext(TabsContext);
+  const Panels = React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    id: "".concat(tabsId, "-panel-").concat(index + 1),
+    'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
     hidden: activeTab !== index
   }));
-  return /*#__PURE__*/React.createElement("div", _extends__default['default']({
-    ref: ref
-  }, props), Panels);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    ...props,
+    children: Panels
+  });
 });
 
 const {
@@ -3555,12 +3624,14 @@ const StyledTabPanel = styled__default['default'].div.attrs(() => ({
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline));
-const TabPanel = /*#__PURE__*/React$1.forwardRef(function TabPanel({ ...props
+})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel({ ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledTabPanel, _extends__default['default']({
-    ref: ref
-  }, props), props.children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTabPanel, {
+    ref: ref,
+    ...props,
+    children: props.children
+  });
 });
 
 const Tabs = Tabs$1;
@@ -3638,12 +3709,12 @@ const {
 const StyledCard = styled__default['default'].div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";", ""], ({
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], ({
   background
 }) => background, ({
   cursor
-}) => cursor, bordersTemplate(primary$3.border), spacingsTemplate(primary$3.spacings));
-const Card$1 = /*#__PURE__*/React$1.forwardRef(function Card({
+}) => cursor, bordersTemplate(primary$3.border));
+const Card$1 = /*#__PURE__*/React.forwardRef(function Card({
   children,
   variant = 'default',
   onClick,
@@ -3658,18 +3729,22 @@ const Card$1 = /*#__PURE__*/React$1.forwardRef(function Card({
     cursor,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledCard, _extends__default['default']({}, props, {
-    onClick: onClick
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, { ...props,
+    onClick: onClick,
+    children: children
+  });
 });
 
+const {
+  spacings: spacings$8
+} = primary$4;
 const StyledCardActions = styled__default['default'].div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";"], ({
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], ({
   justifyContent
-}) => justifyContent);
-const CardActions = /*#__PURE__*/React$1.forwardRef(function CardActions({
+}) => justifyContent, spacings$8.right, spacings$8.left, spacings$8.top, spacings$8.bottom);
+const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
   children,
   alignRight = false,
   meta = '',
@@ -3681,9 +3756,30 @@ const CardActions = /*#__PURE__*/React$1.forwardRef(function CardActions({
     justifyContent,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledCardActions, props, children, meta !== '' && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption"
-  }, meta));
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledCardActions, { ...props,
+    children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+      variant: "caption",
+      children: meta
+    })]
+  });
+});
+
+const {
+  spacings: spacings$7
+} = primary$4;
+const StyledCardContent = styled__default['default'].div.withConfig({
+  displayName: "CardContent__StyledCardContent",
+  componentId: "sc-esm4ym-0"
+})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$7.right, spacings$7.left, spacings$7.bottom);
+const CardContent = /*#__PURE__*/React.forwardRef(function CardContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, {
+    ref: ref,
+    ...props,
+    children: children
+  });
 });
 
 const {
@@ -3693,10 +3789,10 @@ const {
 const StyledCardMedia = styled__default['default'].div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:100%;&:last-child{margin-bottom:8px;}", ""], ({
+})(["display:flex;width:auto;", ""], ({
   fullWidth
-}) => fullWidth ? styled.css(["> *{width:calc(100% + ", " + ", ");margin-left:-", ";margin-right:-", ";}&:first-child{margin-top:-", ";img{border-top-right-radius:", ";border-top-left-radius:", ";}}"], spacings$6.left, spacings$6.right, spacings$6.left, spacings$6.right, spacings$6.top, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius) : styled.css(["> *{width:100%;}"]));
-const CardMedia = /*#__PURE__*/React$1.forwardRef(function CardMedia({
+}) => fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.right, spacings$6.left, spacings$6.right, spacings$6.bottom, spacings$6.left));
+const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia({
   children,
   fullWidth = false,
   ...rest
@@ -3705,7 +3801,9 @@ const CardMedia = /*#__PURE__*/React$1.forwardRef(function CardMedia({
     ref,
     fullWidth
   };
-  return /*#__PURE__*/React.createElement(StyledCardMedia, props, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCardMedia, { ...props,
+    children: children
+  });
 });
 
 const {
@@ -3714,37 +3812,43 @@ const {
 const StyledCardHeader = styled__default['default'].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;>:not(:first-child){margin-left:", ";}"], spacings$5.left);
-const CardHeader = /*#__PURE__*/React$1.forwardRef(function CardHeader({
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.left, spacings$5.top, spacings$5.bottom);
+const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader({
   children,
   ...rest
 }, ref) {
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/React.createElement(StyledCardHeader, props, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCardHeader, { ...props,
+    children: children
+  });
 });
 
 const StyledCardHeaderTitle = styled__default['default'].div.withConfig({
   displayName: "CardHeaderTitle__StyledCardHeaderTitle",
   componentId: "sc-11m80r3-0"
 })(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
-const CardHeaderTitle = /*#__PURE__*/React$1.forwardRef(function CardHeaderTitle({
+const CardHeaderTitle = /*#__PURE__*/React.forwardRef(function CardHeaderTitle({
   children,
   ...rest
 }, ref) {
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/React.createElement(StyledCardHeaderTitle, props, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCardHeaderTitle, { ...props,
+    children: children
+  });
 });
 
 const Card = Card$1;
 Card.Actions = CardActions;
+Card.Content = CardContent;
 Card.Header = CardHeader;
 Card.Media = CardMedia;
 Card.HeaderTitle = CardHeaderTitle;
 Card.Actions.displayName = 'Card.Actions';
+Card.Content.displayName = 'Card.Content';
 Card.Header.displayName = 'Card.Header';
 Card.Media.displayName = 'Card.Media';
 Card.HeaderTitle.displayName = 'Card.HeaderTitle';
@@ -3789,57 +3893,64 @@ const StyledTopBar = styled__default['default'].header.withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], height$3, background$d, spacings$4.left, bordersTemplate(border$4), spacingsTemplate(spacings$4), typographyTemplate(typography$b));
-const TopBar$1 = /*#__PURE__*/React$1.forwardRef(function TopBar({
+const TopBar$1 = /*#__PURE__*/React.forwardRef(function TopBar({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledTopBar, _extends__default['default']({}, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
+    ref: ref,
+    children: children
+  });
 }); // TopBar.displayName = 'eds-topbar'
 
 const StyledActions$1 = styled__default['default'].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
-})(["grid-area:right;text-align:right;"]);
-const Actions$1 = /*#__PURE__*/React$1.forwardRef(function Actions({
+})(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
+const Actions$1 = /*#__PURE__*/React.forwardRef(function Actions({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledActions$1, _extends__default['default']({
-    ref: ref
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledActions$1, {
+    ref: ref,
+    ...props,
+    children: children
+  });
 }); // Actions.displayName = 'eds-topbar-actions'
 
 const StyledHeader = styled__default['default'].div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
-const Header$1 = /*#__PURE__*/React$1.forwardRef(function Header({
+const Header$2 = /*#__PURE__*/React.forwardRef(function Header({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledHeader, _extends__default['default']({
-    ref: ref
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, {
+    ref: ref,
+    ...props,
+    children: children
+  });
 }); // Header.displayName = 'eds-topbar-header'
 
 const StyledCustomContent$1 = styled__default['default'].div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-const CustomContent$1 = /*#__PURE__*/React$1.forwardRef(function CustomContent({
+const CustomContent$1 = /*#__PURE__*/React.forwardRef(function CustomContent({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledCustomContent$1, _extends__default['default']({
-    ref: ref
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCustomContent$1, {
+    ref: ref,
+    ...props,
+    children: children
+  });
 }); // CustomContent.displayName = 'eds-topbar-customcontent'
 
 const TopBar = TopBar$1;
 TopBar.Actions = Actions$1;
-TopBar.Header = Header$1;
+TopBar.Header = Header$2;
 TopBar.CustomContent = CustomContent$1;
 TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
@@ -3937,16 +4048,16 @@ const StyledPaper = styled__default['default'].div.withConfig({
 })(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
   elevation
 }) => elevation);
-const Paper = /*#__PURE__*/React$1.forwardRef(function Paper({
+const Paper = /*#__PURE__*/React.forwardRef(function Paper({
   elevation: elevation$1,
   ...rest
 }, ref) {
   const props = { ...rest,
     elevation: elevation[elevation$1] || 'none'
   };
-  return /*#__PURE__*/React.createElement(StyledPaper, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
     ref: ref
-  }));
+  });
 });
 
 const StyledDialog = styled__default['default'](Paper).attrs(() => ({
@@ -3959,15 +4070,16 @@ const StyledDialog = styled__default['default'](Paper).attrs(() => ({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
 })(["width:", ";background:", ";display:grid;", " ", " ", ""], dialog.width, dialog.background, typographyTemplate(dialog.typography), spacingsTemplate(dialog.spacings), bordersTemplate(dialog.border));
-const Dialog$1 = /*#__PURE__*/React$1.forwardRef(function Dialog({
+const Dialog$1 = /*#__PURE__*/React.forwardRef(function Dialog({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledDialog, _extends__default['default']({
-    elevation: "above_scrim"
-  }, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
+    elevation: "above_scrim",
+    ...props,
+    ref: ref,
+    children: children
+  });
 }); // Dialog.displayName = 'EdsDialog'
 
 const StyledActions = styled__default['default'].div.withConfig({
@@ -3976,13 +4088,15 @@ const StyledActions = styled__default['default'].div.withConfig({
 })(["min-height:", ";", " align-self:end;justify-self:start;", ""], dialog.entities.actions.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
   children
 }) => !children && styled.css(["min-height:initial;height:'8px';"]));
-const Actions = /*#__PURE__*/React$1.forwardRef(function Actions({
+const Actions = /*#__PURE__*/React.forwardRef(function Actions({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledActions, _extends__default['default']({
-    ref: ref
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
 }); // Actions.displayName = 'EdsDialogActions'
 
 const StyledTitle = styled__default['default'].div.withConfig({
@@ -3995,17 +4109,21 @@ const StyledDivider$2 = styled__default['default'](Divider).withConfig({
   displayName: "Title__StyledDivider",
   componentId: "sc-i4qfl5-1"
 })(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
-const Title = /*#__PURE__*/React$1.forwardRef(function Title({
+const Title = /*#__PURE__*/React.forwardRef(function Title({
   children,
   ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTitle, _extends__default['default']({
-    id: "eds-dialog-title",
-    ref: ref
-  }, rest), children), children && /*#__PURE__*/React.createElement(StyledDivider$2, {
-    color: "medium",
-    variant: "small"
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    }), children && /*#__PURE__*/jsxRuntime.jsx(StyledDivider$2, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
 });
 
 const StyledCustomContent = styled__default['default'].div.withConfig({
@@ -4018,7 +4136,7 @@ const StyledDivider$1 = styled__default['default'](Divider).withConfig({
   displayName: "CustomContent__StyledDivider",
   componentId: "sc-17fsw6x-1"
 })(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
-const CustomContent = /*#__PURE__*/React$1.forwardRef(function CustomContent({
+const CustomContent = /*#__PURE__*/React.forwardRef(function CustomContent({
   children,
   scrollable = false,
   ...rest
@@ -4028,12 +4146,16 @@ const CustomContent = /*#__PURE__*/React$1.forwardRef(function CustomContent({
     ref,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCustomContent, _extends__default['default']({
-    id: "eds-dialog-customcontent"
-  }, props), children), children && scrollable && /*#__PURE__*/React.createElement(StyledDivider$1, {
-    color: "medium",
-    variant: "small"
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledCustomContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsxRuntime.jsx(StyledDivider$1, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
 });
 
 const Dialog = Dialog$1;
@@ -4072,7 +4194,7 @@ const ScrimContent = styled__default['default'].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-const Scrim = /*#__PURE__*/React$1.forwardRef(function Scrim({
+const Scrim = /*#__PURE__*/React.forwardRef(function Scrim({
   children,
   onClose,
   isDismissable = false,
@@ -4103,11 +4225,14 @@ const Scrim = /*#__PURE__*/React$1.forwardRef(function Scrim({
     event.stopPropagation();
   };
 
-  return /*#__PURE__*/React.createElement(StyledScrim, _extends__default['default']({
-    onClick: handleMouseClose
-  }, props), /*#__PURE__*/React.createElement(ScrimContent, {
-    onClick: handleContentClick
-  }, children));
+  return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
+    onClick: handleMouseClose,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(ScrimContent, {
+      onClick: handleContentClick,
+      children: children
+    })
+  });
 });
 
 const {
@@ -4224,32 +4349,38 @@ const TocLabel = styled__default['default'](Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
 })(["", ""], typographyTemplate(tableOfContents.typography));
-const TableOfContents$1 = /*#__PURE__*/React$1.forwardRef(function TableOfContents({
+const TableOfContents$1 = /*#__PURE__*/React.forwardRef(function TableOfContents({
   children,
   sticky = false,
   label = '',
   ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledTableOfContents, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledTableOfContents, {
     ref: ref,
     label: label,
-    sticky: sticky
-  }, rest), /*#__PURE__*/React.createElement(TocLabel, {
-    variant: "overline"
-  }, label), /*#__PURE__*/React.createElement(TocList, null, children));
+    sticky: sticky,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx(TocLabel, {
+      variant: "overline",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(TocList, {
+      children: children
+    })]
+  });
 });
 
 const StyledLinkItem = styled__default['default'].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
 })(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
-const LinkItem = /*#__PURE__*/React$1.forwardRef(function LinkItem({
+const LinkItem = /*#__PURE__*/React.forwardRef(function LinkItem({
   children,
   ...props
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledLinkItem, _extends__default['default']({}, props, {
-    ref: ref
-  }), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledLinkItem, { ...props,
+    ref: ref,
+    children: children
+  });
 });
 
 const TableOfContents = TableOfContents$1;
@@ -4309,11 +4440,11 @@ const StyledSideSheet = styled__default['default'].div.withConfig({
 })(["height:100%;position:absolute;z-index:200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";"], background$7, ({
   width
 }) => width, bordersTemplate(border$3), spacingsTemplate(spacings$3));
-const Header = styled__default['default'].div.withConfig({
+const Header$1 = styled__default['default'].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
-const SideSheet = /*#__PURE__*/React$1.forwardRef(function SideSheet({
+const SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet({
   variant = 'medium',
   title = '',
   children,
@@ -4326,19 +4457,24 @@ const SideSheet = /*#__PURE__*/React$1.forwardRef(function SideSheet({
     width: variants[variant]
   }; // Controller must set open={false} when pressing the close button
 
-  return open && /*#__PURE__*/React.createElement(StyledSideSheet, _extends__default['default']({}, props, {
-    id: "side-sheet"
-  }), /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h2"
-  }, title), /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost_icon",
-    onClick: onClose,
-    title: "Close",
-    "aria-label": "Close sidesheet"
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    name: "clear",
-    data: edsIcons.clear
-  }))), children);
+  return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, { ...props,
+    id: "side-sheet",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        variant: "h2",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        variant: "ghost_icon",
+        onClick: onClose,
+        title: "Close",
+        "aria-label": "Close sidesheet",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+          name: "clear",
+          data: edsIcons.clear
+        })
+      })]
+    }), children]
+  });
 });
 
 const {
@@ -4537,7 +4673,7 @@ const StyledChips = styled__default['default'].div.attrs(({
 })).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), ({
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), ({
   clickable
 }) => clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
   variant
@@ -4559,7 +4695,7 @@ const StyledChips = styled__default['default'].div.attrs(({
 }) => deletable && styled.css(["padding-right:4px;"]), ({
   onlyChild
 }) => onlyChild ? styled.css(["padding-left:8px;"]) : '');
-const Chip = /*#__PURE__*/React$1.forwardRef(function Chip({
+const Chip = /*#__PURE__*/React.forwardRef(function Chip({
   children,
   onDelete,
   disabled = false,
@@ -4598,10 +4734,10 @@ const Chip = /*#__PURE__*/React$1.forwardRef(function Chip({
     }
   };
 
-  const resizedChildren = React$1.Children.map(children, child => {
+  const resizedChildren = React.Children.map(children, child => {
     // We force size on Icon & Avatar component
     if (child.props) {
-      return /*#__PURE__*/React$1.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         size: 16,
         disabled
       });
@@ -4618,17 +4754,18 @@ const Chip = /*#__PURE__*/React$1.forwardRef(function Chip({
     }
   };
 
-  return /*#__PURE__*/React.createElement(StyledChips, _extends__default['default']({}, chipProps, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledChips, { ...chipProps,
     onClick: event => clickable && handleClick(event),
-    onKeyPress: handleKeyPress
-  }), resizedChildren, onDelete && /*#__PURE__*/React.createElement(Icon, {
-    name: "close",
-    title: "close",
-    disabled: disabled,
-    variant: variant,
-    onClick: onDeleteClick,
-    size: 16
-  }));
+    onKeyPress: handleKeyPress,
+    children: [resizedChildren, onDelete && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      name: "close",
+      title: "close",
+      disabled: disabled,
+      variant: variant,
+      onClick: onDeleteClick,
+      size: 16
+    })]
+  });
 }); // Chip.displayName = 'eds-chip'
 
 const avatar = {
@@ -4655,22 +4792,24 @@ const StyledImage = styled__default['default'].img.withConfig({
 })(["height:100%;text-align:center;color:transparent;", ";"], ({
   disabled
 }) => disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity));
-const Avatar = /*#__PURE__*/React$1.forwardRef(function Avatar({
+const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
   src = null,
   alt,
   size = 24,
   disabled = false,
   ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledAvatar, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, {
     size: size,
     disabled: disabled,
-    ref: ref
-  }, rest), /*#__PURE__*/React.createElement(StyledImage, {
-    src: src,
-    alt: alt,
-    disabled: disabled
-  }));
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledImage, {
+      src: src,
+      alt: alt,
+      disabled: disabled
+    })
+  });
 });
 Avatar.displayName = 'Avatar';
 
@@ -4763,6 +4902,13 @@ const search = {
         },
         height: '36px'
       }
+    },
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        right: small$2
+      }
     }
   }
 };
@@ -4776,7 +4922,8 @@ const {
   clickbound,
   entities: {
     icon: icon$1,
-    placeholder
+    placeholder,
+    button
   },
   states: states$2
 } = search;
@@ -4794,13 +4941,13 @@ const Input$4 = styled__default['default'].input.withConfig({
 })(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography$7), ({
   disabled
 }) => disabled && styled.css(["cursor:not-allowed;"]));
-const InsideButton = styled__default['default'].div.withConfig({
+const InsideButton = styled__default['default'](Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon$1.border), icon$1.clickbound.offset.top, icon$1.clickbound.height, ({
+})(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, ({
   isActive
-}) => isActive && styled.css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon$1.states.hover.background));
-const Search = /*#__PURE__*/React$1.forwardRef(function Search({
+}) => isActive && styled.css(["visibility:visible;"]));
+const Search = /*#__PURE__*/React.forwardRef(function Search({
   onChange,
   defaultValue = '',
   value,
@@ -4812,12 +4959,12 @@ const Search = /*#__PURE__*/React$1.forwardRef(function Search({
 }, ref) {
   const isControlled = typeof value !== 'undefined';
   const isActive = isControlled && value !== '' || defaultValue !== '';
-  const inputRef = React$1.useRef(null);
-  const [state, setState] = React$1.useState({
+  const inputRef = React.useRef(null);
+  const [state, setState] = React.useState({
     isActive,
     isFocused: false
   });
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setState(prevState => ({ ...prevState,
       isActive
     }));
@@ -4909,8 +5056,6 @@ const Search = /*#__PURE__*/React$1.forwardRef(function Search({
   }, value, defaultValue);
   const clearButtonProps = {
     isActive: state.isActive,
-    size,
-    role: 'button',
     onClick: e => {
       e.stopPropagation();
 
@@ -4919,16 +5064,22 @@ const Search = /*#__PURE__*/React$1.forwardRef(function Search({
       }
     }
   };
-  return /*#__PURE__*/React.createElement(Container$2, containerProps, /*#__PURE__*/React.createElement(Icon$1, {
-    data: edsIcons.search,
-    "aria-hidden": true,
-    size: size
-  }), /*#__PURE__*/React.createElement(Input$4, inputProps), /*#__PURE__*/React.createElement(InsideButton, _extends__default['default']({}, clearButtonProps, {
-    "aria-label": "Clear search"
-  }), /*#__PURE__*/React.createElement(Icon$1, {
-    data: edsIcons.close,
-    size: size
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(Container$2, { ...containerProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+      data: edsIcons.search,
+      "aria-hidden": true,
+      size: size
+    }), /*#__PURE__*/jsxRuntime.jsx(Input$4, { ...inputProps
+    }), /*#__PURE__*/jsxRuntime.jsx(InsideButton, { ...clearButtonProps,
+      "aria-label": 'clear search',
+      title: "clear",
+      variant: "ghost_icon",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        data: edsIcons.close,
+        size: 16
+      })
+    })]
+  });
 }); // Search.displayName = 'eds-search'
 
 const {
@@ -5074,12 +5225,13 @@ const StyledMinMax = styled__default['default'].span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
 })(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output$1.typography), track$3.spacings.top);
-const MinMax = /*#__PURE__*/React$1.forwardRef(function MinMax({
+const MinMax = /*#__PURE__*/React.forwardRef(function MinMax({
   children
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledMinMax, {
-    ref: ref
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledMinMax, {
+    ref: ref,
+    children: children
+  });
 });
 
 const {
@@ -5094,16 +5246,17 @@ const StyledOutput = styled__default['default'].output.withConfig({
 })(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], ({
   value
 }) => value, typographyTemplate(output.typography), slider.background, track$2.spacings.top);
-const Output = /*#__PURE__*/React$1.forwardRef(function Output({
+const Output = /*#__PURE__*/React.forwardRef(function Output({
   children,
   value,
   htmlFor
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledOutput, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledOutput, {
     ref: ref,
     value: value,
-    htmlFor: htmlFor
-  }, children);
+    htmlFor: htmlFor,
+    children: children
+  });
 });
 
 const {
@@ -5124,8 +5277,8 @@ const StyledSliderInput = styled__default['default'].input.attrs(() => ({
 })).withConfig({
   displayName: "SliderInput__StyledSliderInput",
   componentId: "sc-17orw4f-0"
-})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track$1, track$1);
-const SliderInput = /*#__PURE__*/React$1.forwardRef(function SliderInput({
+})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), outlineTemplate(handle$1.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track$1, track$1);
+const SliderInput = /*#__PURE__*/React.forwardRef(function SliderInput({
   value,
   min,
   max,
@@ -5137,7 +5290,7 @@ const SliderInput = /*#__PURE__*/React$1.forwardRef(function SliderInput({
   disabled,
   ...restProps
 }, ref) {
-  return /*#__PURE__*/React.createElement(StyledSliderInput, _extends__default['default']({}, restProps, {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSliderInput, { ...restProps,
     value: value,
     ref: ref,
     min: min,
@@ -5154,7 +5307,7 @@ const SliderInput = /*#__PURE__*/React$1.forwardRef(function SliderInput({
       onKeyUp(event);
     },
     disabled: disabled
-  }));
+  });
 });
 SliderInput.displayName = 'SliderInput';
 
@@ -5167,7 +5320,7 @@ const {
 } = slider;
 const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
 const fakeTrackBgHover = styled.css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
+  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
 });
 const trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
@@ -5209,7 +5362,7 @@ const SrOnlyLabel = styled__default['default'].label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-const Slider = /*#__PURE__*/React$1.forwardRef(function Slider({
+const Slider = /*#__PURE__*/React.forwardRef(function Slider({
   min = 0,
   max = 100,
   value = [40, 60],
@@ -5224,9 +5377,9 @@ const Slider = /*#__PURE__*/React$1.forwardRef(function Slider({
   ...rest
 }, ref) {
   const isRangeSlider = Array.isArray(value);
-  const [sliderValue, setSliderValue] = React$1.useState(isRangeSlider ? value : [value]);
-  const minRange = React$1.useRef(null);
-  const maxRange = React$1.useRef(null);
+  const [sliderValue, setSliderValue] = React.useState(isRangeSlider ? value : [value]);
+  const minRange = React.useRef(null);
+  const maxRange = React.useRef(null);
 
   const onValueChange = (event, valueArrIdx) => {
     const target = event.target;
@@ -5295,81 +5448,100 @@ const Slider = /*#__PURE__*/React$1.forwardRef(function Slider({
     }
   };
 
-  const inputIdA = `${ariaLabelledby}-thumb-a`;
-  const inputIdB = `${ariaLabelledby}-thumb-b`;
-  const inputId = `${ariaLabelledby}-thumb`;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isRangeSlider ? /*#__PURE__*/React.createElement(RangeWrapper, _extends__default['default']({}, rest, {
-    ref: ref,
-    role: "group",
-    "aria-labelledby": ariaLabelledby,
-    valA: sliderValue[0],
-    valB: sliderValue[1],
-    max: max,
-    min: min,
-    disabled: disabled,
-    onMouseMove: findClosestRange
-  }), minMaxDots && /*#__PURE__*/React.createElement(WrapperGroupLabelDots, null), /*#__PURE__*/React.createElement(SrOnlyLabel, {
-    htmlFor: inputIdA
-  }, "Value A"), /*#__PURE__*/React.createElement(SliderInput, {
-    type: "range",
-    ref: minRange,
-    value: sliderValue[0],
-    max: max,
-    min: min,
-    id: inputIdA,
-    step: step,
-    onChange: event => {
-      onValueChange(event, 0);
-    },
-    onMouseUp: event => handleCommitedValue(event),
-    onKeyUp: event => handleKeyUp(event),
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Output, {
-    htmlFor: inputIdA,
-    value: sliderValue[0]
-  }, getFormattedText(sliderValue[0])), minMaxValues && /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(min)), /*#__PURE__*/React.createElement(SrOnlyLabel, {
-    htmlFor: inputIdB
-  }, "Value B"), /*#__PURE__*/React.createElement(SliderInput, {
-    type: "range",
-    value: sliderValue[1],
-    min: min,
-    max: max,
-    id: inputIdB,
-    step: step,
-    ref: maxRange,
-    onChange: event => {
-      onValueChange(event, 1);
-    },
-    onMouseUp: event => handleCommitedValue(event),
-    onKeyUp: event => handleKeyUp(event),
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Output, {
-    htmlFor: inputIdB,
-    value: sliderValue[1]
-  }, getFormattedText(sliderValue[1])), minMaxValues && /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(max))) : /*#__PURE__*/React.createElement(Wrapper, _extends__default['default']({}, rest, {
-    ref: ref,
-    max: max,
-    min: min,
-    value: sliderValue[0],
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(SliderInput, {
-    type: "range",
-    value: sliderValue[0],
-    min: min,
-    max: max,
-    step: step,
-    id: inputId,
-    onChange: event => {
-      onValueChange(event);
-    },
-    disabled: disabled,
-    "aria-labelledby": ariaLabelledby,
-    onMouseUp: event => handleCommitedValue(event),
-    onKeyUp: event => handleKeyUp(event)
-  }), /*#__PURE__*/React.createElement(Output, {
-    htmlFor: inputId,
-    value: sliderValue[0]
-  }, getFormattedText(sliderValue[0])), minMaxDots && /*#__PURE__*/React.createElement(WrapperGroupLabelDots, null), minMaxValues && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(min)), /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(max)))));
+  const inputIdA = "".concat(ariaLabelledby, "-thumb-a");
+  const inputIdB = "".concat(ariaLabelledby, "-thumb-b");
+  const inputId = "".concat(ariaLabelledby, "-thumb");
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, { ...rest,
+      ref: ref,
+      role: "group",
+      "aria-labelledby": ariaLabelledby,
+      valA: sliderValue[0],
+      valB: sliderValue[1],
+      max: max,
+      min: min,
+      disabled: disabled,
+      onMouseMove: findClosestRange,
+      children: [minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
+        htmlFor: inputIdA,
+        children: "Value A"
+      }), /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
+        type: "range",
+        ref: minRange,
+        value: sliderValue[0],
+        max: max,
+        min: min,
+        id: inputIdA,
+        step: step,
+        onChange: event => {
+          onValueChange(event, 0);
+        },
+        onMouseUp: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event),
+        disabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsx(Output, {
+        htmlFor: inputIdA,
+        value: sliderValue[0],
+        children: getFormattedText(sliderValue[0])
+      }), minMaxValues && /*#__PURE__*/jsxRuntime.jsx(MinMax, {
+        children: getFormattedText(min)
+      }), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
+        htmlFor: inputIdB,
+        children: "Value B"
+      }), /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
+        type: "range",
+        value: sliderValue[1],
+        min: min,
+        max: max,
+        id: inputIdB,
+        step: step,
+        ref: maxRange,
+        onChange: event => {
+          onValueChange(event, 1);
+        },
+        onMouseUp: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event),
+        disabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsx(Output, {
+        htmlFor: inputIdB,
+        value: sliderValue[1],
+        children: getFormattedText(sliderValue[1])
+      }), minMaxValues && /*#__PURE__*/jsxRuntime.jsx(MinMax, {
+        children: getFormattedText(max)
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(Wrapper, { ...rest,
+      ref: ref,
+      max: max,
+      min: min,
+      value: sliderValue[0],
+      disabled: disabled,
+      children: [/*#__PURE__*/jsxRuntime.jsx(SliderInput, {
+        type: "range",
+        value: sliderValue[0],
+        min: min,
+        max: max,
+        step: step,
+        id: inputId,
+        onChange: event => {
+          onValueChange(event);
+        },
+        disabled: disabled,
+        "aria-labelledby": ariaLabelledby,
+        onMouseUp: event => handleCommitedValue(event),
+        onKeyUp: event => handleKeyUp(event)
+      }), /*#__PURE__*/jsxRuntime.jsx(Output, {
+        htmlFor: inputId,
+        value: sliderValue[0],
+        children: getFormattedText(sliderValue[0])
+      }), minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), minMaxValues && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(MinMax, {
+          children: getFormattedText(min)
+        }), /*#__PURE__*/jsxRuntime.jsx(MinMax, {
+          children: getFormattedText(max)
+        })]
+      })]
+    })
+  });
 });
 
 const {
@@ -5444,7 +5616,7 @@ const TooltipArrow = styled__default['default'].svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-const Tooltip = /*#__PURE__*/React$1.forwardRef(function Tooltip({
+const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
   title,
   placement = 'bottom',
   children,
@@ -5453,12 +5625,12 @@ const Tooltip = /*#__PURE__*/React$1.forwardRef(function Tooltip({
   ...rest
 }, ref) {
   const isMounted = useIsMounted();
-  const [popperEl, setPopperEl] = React$1.useState(null);
-  const [arrowRef, setArrowRef] = React$1.useState(null);
-  const [open, setOpen] = React$1.useState(false);
-  const openTimer = React$1.useRef();
+  const [popperEl, setPopperEl] = React.useState(null);
+  const [arrowRef, setArrowRef] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const openTimer = React.useRef();
   const tooltipRef = useCombinedRefs(setPopperEl, ref);
-  const anchorRef = React$1.useRef();
+  const anchorRef = React.useRef();
   const combinedChilddRef = useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
   const tooltipId = useId(id, 'tooltip');
   const containerId = 'eds-tooltip-container';
@@ -5467,7 +5639,7 @@ const Tooltip = /*#__PURE__*/React$1.forwardRef(function Tooltip({
     setTimeout,
     clearTimeout
   } = window;
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (document.getElementById(containerId) === null) {
       const tooltipContainerElement = document.createElement('div');
       tooltipContainerElement.id = containerId;
@@ -5504,7 +5676,7 @@ const Tooltip = /*#__PURE__*/React$1.forwardRef(function Tooltip({
     ...attributes.popper
   };
   const childProps = children.props;
-  const updatedChildren = /*#__PURE__*/React$1.cloneElement(children, {
+  const updatedChildren = /*#__PURE__*/React.cloneElement(children, {
     ref: combinedChilddRef,
     'aria-describedby': open ? tooltipId : null,
     onMouseOver: joinHandlers(openTooltip, childProps.onMouseOver),
@@ -5514,20 +5686,26 @@ const Tooltip = /*#__PURE__*/React$1.forwardRef(function Tooltip({
     onBlur: joinHandlers(closeTooltip, childProps.onBlur),
     onFocus: joinHandlers(openTooltip, childProps.onFocus)
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldOpen && open && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/React.createElement(StyledTooltip, _extends__default['default']({
-    id: tooltipId,
-    role: "tooltip",
-    ref: tooltipRef,
-    style: styles.popper
-  }, props), title, /*#__PURE__*/React.createElement(ArrowWrapper$1, {
-    ref: setArrowRef,
-    style: styles.arrow,
-    className: "arrow"
-  }, /*#__PURE__*/React.createElement(TooltipArrow, {
-    className: "arrowSvg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
-  })))), document.getElementById(containerId)), updatedChildren);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [shouldOpen && open && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
+      id: tooltipId,
+      role: "tooltip",
+      ref: tooltipRef,
+      style: styles.popper,
+      ...props,
+      children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsxRuntime.jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
+        })
+      })]
+    }), document.getElementById(containerId)), updatedChildren]
+  });
 });
 
 const {
@@ -5605,14 +5783,16 @@ const StyledSnackbarAction = styled__default['default'].div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
 })(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], snackbar.entities.actions.spacings.left, snackbar.entities.actions.spacings.top, snackbar.entities.actions.spacings.bottom);
-const SnackbarAction = /*#__PURE__*/React$1.forwardRef(function SnackbarAction({
+const SnackbarAction = /*#__PURE__*/React.forwardRef(function SnackbarAction({
   children,
   ...rest
 }, ref) {
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/React.createElement(StyledSnackbarAction, props, React$1.Children.only(children));
+  return /*#__PURE__*/jsxRuntime.jsx(StyledSnackbarAction, { ...props,
+    children: React.Children.only(children)
+  });
 });
 
 const StyledSnackbar = styled__default['default'](Paper).attrs(() => ({
@@ -5629,7 +5809,7 @@ const StyledSnackbar = styled__default['default'](Paper).attrs(() => ({
   left: placement.includes('left') ? snackbar.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
   transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
 }), snackbar.entities.button.typography.color);
-const Snackbar$1 = /*#__PURE__*/React$1.forwardRef(function Snackbar({
+const Snackbar$1 = /*#__PURE__*/React.forwardRef(function Snackbar({
   open = false,
   autoHideDuration = 7000,
   onClose,
@@ -5637,13 +5817,13 @@ const Snackbar$1 = /*#__PURE__*/React$1.forwardRef(function Snackbar({
   children,
   ...rest
 }, ref) {
-  const [visible, setVisible] = React$1.useState(open);
-  const timer = React$1.useRef();
+  const [visible, setVisible] = React.useState(open);
+  const timer = React.useRef();
   const {
     setTimeout,
     clearTimeout
   } = window;
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setVisible(open);
     timer.current = setTimeout(() => {
       setVisible(false);
@@ -5659,9 +5839,13 @@ const Snackbar$1 = /*#__PURE__*/React$1.forwardRef(function Snackbar({
     placement,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, visible && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/React.createElement(StyledSnackbar, _extends__default['default']({
-    elevation: "overlay"
-  }, props), children), document.body));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: visible && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
+      elevation: "overlay",
+      ...props,
+      children: children
+    }), document.body)
+  });
 });
 
 const Snackbar = Snackbar$1;
@@ -5757,7 +5941,7 @@ const PopoverArrow = styled__default['default'].svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
 })(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], popover.entities.arrow.width, popover.entities.arrow.height, popover.background);
-const Popover$1 = /*#__PURE__*/React$1.forwardRef(function Popover({
+const Popover$1 = /*#__PURE__*/React.forwardRef(function Popover({
   children,
   placement = 'bottom',
   anchorEl,
@@ -5765,8 +5949,8 @@ const Popover$1 = /*#__PURE__*/React$1.forwardRef(function Popover({
   onClose,
   ...rest
 }, ref) {
-  const [popperEl, setPopperEl] = React$1.useState(null);
-  const [arrowRef, setArrowRef] = React$1.useState(null);
+  const [popperEl, setPopperEl] = React.useState(null);
+  const [arrowRef, setArrowRef] = React.useState(null);
   const popoverRef = useCombinedRefs(ref, setPopperEl);
   useOutsideClick(popperEl, e => {
     if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
@@ -5787,29 +5971,34 @@ const Popover$1 = /*#__PURE__*/React$1.forwardRef(function Popover({
     ...rest,
     ...attributes.popper
   };
-  return /*#__PURE__*/React.createElement(PopoverPaper, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
     ref: popoverRef,
     elevation: "overlay",
     style: styles.popper,
-    "data-testid": "popover"
-  }, props), /*#__PURE__*/React.createElement(ArrowWrapper, {
-    ref: setArrowRef,
-    style: styles.arrow,
-    className: "arrow"
-  }, /*#__PURE__*/React.createElement(PopoverArrow, {
-    className: "arrowSvg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
-  }))), children, /*#__PURE__*/React.createElement(StyledCloseButton, {
-    onClick: onClose,
-    variant: "ghost_icon",
-    "data-testid": "popover-close",
-    "aria-label": "Close popover"
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    name: "close",
-    data: edsIcons.close,
-    size: 24
-  })));
+    "data-testid": "popover",
+    ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
+      ref: setArrowRef,
+      style: styles.arrow,
+      className: "arrow",
+      children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    }), children, /*#__PURE__*/jsxRuntime.jsx(StyledCloseButton, {
+      onClick: onClose,
+      variant: "ghost_icon",
+      "data-testid": "popover-close",
+      "aria-label": "Close popover",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+        name: "close",
+        data: edsIcons.close,
+        size: 24
+      })
+    })]
+  });
 });
 
 const StyledPopoverTitle = styled__default['default'].div.withConfig({
@@ -5820,30 +6009,36 @@ const StyledDivider = styled__default['default'](Divider).withConfig({
   displayName: "PopoverTitle__StyledDivider",
   componentId: "sc-1ben8su-1"
 })(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
-const PopoverTitle = /*#__PURE__*/React$1.forwardRef(function PopoverTitle({
+const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle({
   children,
   ...rest
 }, ref) {
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(StyledPopoverTitle, null, children), /*#__PURE__*/React.createElement(StyledDivider, {
-    variant: "small"
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledPopoverTitle, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx(StyledDivider, {
+      variant: "small"
+    })]
+  });
 });
 
 const ContentWrapper = styled__default['default'].div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
 })(["overflow:hidden;"]);
-const PopoverContent = /*#__PURE__*/React$1.forwardRef(function PopoverContent({
+const PopoverContent = /*#__PURE__*/React.forwardRef(function PopoverContent({
   children,
   ...rest
 }, ref) {
   const props = { ...rest,
     ref
   };
-  return /*#__PURE__*/React.createElement(ContentWrapper, props, children);
+  return /*#__PURE__*/jsxRuntime.jsx(ContentWrapper, { ...props,
+    children: children
+  });
 }); // PopoverContent.displayName = 'eds-popover-content'
 
 const Popover = Popover$1;
@@ -5953,14 +6148,14 @@ const StyledBannerIcon = styled__default['default'].span.withConfig({
 })(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(enabled$2.entities.icon.border), ({
   variant
 }) => variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, enabled$2.entities.icon.width, enabled$2.entities.icon.height, enabled$2.spacings.right);
-const BannerIcon = /*#__PURE__*/React$1.forwardRef(function BannerIcon({
+const BannerIcon = /*#__PURE__*/React.forwardRef(function BannerIcon({
   children,
   variant = 'info',
   ...rest
 }, ref) {
-  const childrenWithColor = React$1.Children.map(children, child => {
+  const childrenWithColor = React.Children.map(children, child => {
     const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
-    return /*#__PURE__*/React$1.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/React$1.cloneElement(child, {
+    return /*#__PURE__*/React.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/React.cloneElement(child, {
       color
     }) || child;
   });
@@ -5968,9 +6163,11 @@ const BannerIcon = /*#__PURE__*/React$1.forwardRef(function BannerIcon({
     ref,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledBannerIcon, _extends__default['default']({
-    variant: variant
-  }, props), childrenWithColor);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledBannerIcon, {
+    variant: variant,
+    ...props,
+    children: childrenWithColor
+  });
 });
 
 const StyledBanner = styled__default['default'].div.withConfig({
@@ -5990,34 +6187,36 @@ const NonMarginDivider = styled__default['default'](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
   componentId: "sc-1ju451i-2"
 })(["margin:0;height:2px;"]);
-const Banner$1 = /*#__PURE__*/React$1.forwardRef(function Banner({
+const Banner$1 = /*#__PURE__*/React.forwardRef(function Banner({
   children,
   className,
   ...rest
 }, ref) {
-  const childrenWhereBannerIcon = React$1.Children.map(children, child => {
-    return /*#__PURE__*/React$1.isValidElement(child) && child.type === BannerIcon;
+  const childrenWhereBannerIcon = React.Children.map(children, child => {
+    return /*#__PURE__*/React.isValidElement(child) && child.type === BannerIcon;
   });
   const hasIcon = childrenWhereBannerIcon.some(bool => bool);
   const props = {
     ref,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledBanner, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
     className: className,
-    role: "alert"
-  }), /*#__PURE__*/React.createElement(Content$1, {
-    hasIcon: hasIcon
-  }, children), /*#__PURE__*/React.createElement(NonMarginDivider, {
-    color: "light"
-  }));
+    role: "alert",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
+      hasIcon: hasIcon,
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx(NonMarginDivider, {
+      color: "light"
+    })]
+  });
 });
 
 const StyledBannerMessage = styled__default['default'](Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",
   componentId: "sc-1lfqos1-0"
 })([""]);
-const BannerMessage = /*#__PURE__*/React$1.forwardRef(function BannerMessage({
+const BannerMessage = /*#__PURE__*/React.forwardRef(function BannerMessage({
   children,
   ...rest
 }, ref) {
@@ -6025,9 +6224,11 @@ const BannerMessage = /*#__PURE__*/React$1.forwardRef(function BannerMessage({
     ref,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledBannerMessage, _extends__default['default']({
-    variant: "body_long"
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledBannerMessage, {
+    variant: "body_long",
+    ...props,
+    children: children
+  });
 });
 
 const {
@@ -6044,7 +6245,7 @@ const StyledBannerActions = styled__default['default'].div.withConfig({
   marginTop: enabled.spacings.top,
   marginLeft: '0'
 });
-const BannerActions = /*#__PURE__*/React$1.forwardRef(function BannerActions({
+const BannerActions = /*#__PURE__*/React.forwardRef(function BannerActions({
   children,
   placement = 'left',
   ...rest
@@ -6053,9 +6254,11 @@ const BannerActions = /*#__PURE__*/React$1.forwardRef(function BannerActions({
     ref,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(StyledBannerActions, _extends__default['default']({
-    placement: placement
-  }, props), children);
+  return /*#__PURE__*/jsxRuntime.jsx(StyledBannerActions, {
+    placement: placement,
+    ...props,
+    children: children
+  });
 });
 
 const Banner = Banner$1;
@@ -6100,7 +6303,7 @@ const IndeterminateProgressBar = styled__default['default'].div.withConfig({
   displayName: "LinearProgress__IndeterminateProgressBar",
   componentId: "sc-5orxpi-2"
 })(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary$2.entities.progress.background, indeterminate$2);
-const LinearProgress = /*#__PURE__*/React$1.forwardRef(function LinearProgress({
+const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress({
   variant = 'indeterminate',
   value = null,
   ...rest
@@ -6116,18 +6319,19 @@ const LinearProgress = /*#__PURE__*/React$1.forwardRef(function LinearProgress({
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = `translateX(${transform}%)`;
+      barStyle = "translateX(".concat(transform, "%)");
     }
   }
 
   const transformStyle = {
     transform: barStyle
   };
-  return /*#__PURE__*/React.createElement(Track$2, _extends__default['default']({}, props, {
-    role: "progressbar"
-  }), variant === 'indeterminate' ? /*#__PURE__*/React.createElement(IndeterminateProgressBar, null) : /*#__PURE__*/React.createElement(ProgressBar, {
-    style: transformStyle
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Track$2, { ...props,
+    role: "progressbar",
+    children: variant === 'indeterminate' ? /*#__PURE__*/jsxRuntime.jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
+      style: transformStyle
+    })
+  });
 }); // LinearProgress.displayName = 'eds-linear-progress'
 
 const {
@@ -6206,7 +6410,7 @@ const getToken = color => {
   };
 };
 
-const CircularProgress = /*#__PURE__*/React$1.forwardRef(function CircularProgress({
+const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress({
   variant = 'indeterminate',
   value = null,
   size = 48,
@@ -6225,7 +6429,7 @@ const CircularProgress = /*#__PURE__*/React$1.forwardRef(function CircularProgre
 
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
+    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
     props['aria-valuenow'] = progress;
 
     if (value !== undefined) {
@@ -6235,31 +6439,32 @@ const CircularProgress = /*#__PURE__*/React$1.forwardRef(function CircularProgre
     }
   }
 
-  return /*#__PURE__*/React.createElement(Svg$4, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Svg$4, { ...props,
     viewBox: "24 24 48 48",
     role: "progressbar",
     height: size,
     width: size,
-    preserveAspectRatio: "xMidYMid meet"
-  }), /*#__PURE__*/React.createElement(TrackCircle, {
-    style: trackStyle,
-    cx: 48,
-    cy: 48,
-    r: (48 - thickness) / 2,
-    fill: "none",
-    strokeWidth: thickness,
-    stroke: token.background
-  }), /*#__PURE__*/React.createElement(ProgressCircle, {
-    style: trackStyle,
-    cx: 48,
-    cy: 48,
-    r: (48 - thickness) / 2,
-    fill: "none",
-    strokeLinecap: "round",
-    strokeWidth: thickness,
-    strokeDasharray: variant === 'determinate' ? circumference : 48,
-    stroke: token.entities.progress.background
-  }));
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsxRuntime.jsx(TrackCircle, {
+      style: trackStyle,
+      cx: 48,
+      cy: 48,
+      r: (48 - thickness) / 2,
+      fill: "none",
+      strokeWidth: thickness,
+      stroke: token.background
+    }), /*#__PURE__*/jsxRuntime.jsx(ProgressCircle, {
+      style: trackStyle,
+      cx: 48,
+      cy: 48,
+      r: (48 - thickness) / 2,
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: thickness,
+      strokeDasharray: variant === 'determinate' ? circumference : 48,
+      stroke: token.entities.progress.background
+    })]
+  });
 }); // CircularProgress.displayName = 'eds-circular-progress'
 
 const {
@@ -6284,7 +6489,7 @@ const Svg$3 = styled__default['default'].svg.withConfig({
   variant,
   progress
 }) => variant === 'indeterminate' ? styled.css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : styled.css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused'));
-const StarProgress = /*#__PURE__*/React$1.forwardRef(function StarProgress({
+const StarProgress = /*#__PURE__*/React.forwardRef(function StarProgress({
   variant = 'indeterminate',
   value = null,
   size = 48,
@@ -6307,27 +6512,28 @@ const StarProgress = /*#__PURE__*/React$1.forwardRef(function StarProgress({
     }
   }
 
-  return /*#__PURE__*/React.createElement(Svg$3, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Svg$3, { ...props,
     role: "progressbar",
     width: width,
     height: height,
     viewBox: "0 0 40 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    preserveAspectRatio: "xMidYMid meet"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M32.756 34.6798L29.482 36.5817C29.4139 36.6219 29.3295 36.6227 29.2606 36.5829L25.9476 34.7151C25.7975 34.6306 25.7967 34.4149 25.9456 34.3284L29.2397 32.4256C29.3077 32.3858 29.3914 32.3858 29.4603 32.4248L32.754 34.2931C32.9033 34.3784 32.9041 34.5929 32.756 34.6798Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M25.9596 45.4706L22.6655 43.5867C22.5966 43.5469 22.554 43.4744 22.554 43.396V41.4289V39.5922C22.5519 39.4204 22.7381 39.3109 22.8878 39.397L26.1819 41.2981C26.25 41.3379 26.2926 41.4104 26.2934 41.4896V43.4268V45.2762C26.2947 45.4472 26.1085 45.5559 25.9596 45.4706Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12.3022 47.7037V44.9795V42.6544C12.3022 42.5495 12.3576 42.4515 12.4482 42.3986L14.1262 41.4062L16.8143 39.8188C17.0119 39.7019 17.2617 39.8442 17.2625 40.0739L17.2633 42.7627V45.1456C17.2633 45.251 17.2079 45.3486 17.1165 45.4015L12.7496 47.9587C12.552 48.0748 12.3031 47.9325 12.3022 47.7037Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M0.221343 34.2106L6.76939 30.4056C6.90636 30.326 7.07449 30.3256 7.21227 30.4023L13.8378 34.1401C14.138 34.3095 14.14 34.7413 13.8415 34.9131L7.25492 38.7182C7.11795 38.7977 6.94941 38.7985 6.81204 38.7206L0.225854 34.9836C-0.0734986 34.8139 -0.075549 34.3833 0.221343 34.2106Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M6.03876 9.125L16.9237 15.5151C17.1513 15.6484 17.2903 15.8912 17.2903 16.1549V28.8331C17.2903 29.4076 16.665 29.7647 16.1704 29.4728L5.28546 23.0264C5.05869 22.8919 4.92008 22.6479 4.9209 22.3855V9.76307C4.92254 9.1902 5.54503 8.83467 6.03876 9.125Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
-  }));
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M32.756 34.6798L29.482 36.5817C29.4139 36.6219 29.3295 36.6227 29.2606 36.5829L25.9476 34.7151C25.7975 34.6306 25.7967 34.4149 25.9456 34.3284L29.2397 32.4256C29.3077 32.3858 29.3914 32.3858 29.4603 32.4248L32.754 34.2931C32.9033 34.3784 32.9041 34.5929 32.756 34.6798Z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M25.9596 45.4706L22.6655 43.5867C22.5966 43.5469 22.554 43.4744 22.554 43.396V41.4289V39.5922C22.5519 39.4204 22.7381 39.3109 22.8878 39.397L26.1819 41.2981C26.25 41.3379 26.2926 41.4104 26.2934 41.4896V43.4268V45.2762C26.2947 45.4472 26.1085 45.5559 25.9596 45.4706Z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M12.3022 47.7037V44.9795V42.6544C12.3022 42.5495 12.3576 42.4515 12.4482 42.3986L14.1262 41.4062L16.8143 39.8188C17.0119 39.7019 17.2617 39.8442 17.2625 40.0739L17.2633 42.7627V45.1456C17.2633 45.251 17.2079 45.3486 17.1165 45.4015L12.7496 47.9587C12.552 48.0748 12.3031 47.9325 12.3022 47.7037Z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M0.221343 34.2106L6.76939 30.4056C6.90636 30.326 7.07449 30.3256 7.21227 30.4023L13.8378 34.1401C14.138 34.3095 14.14 34.7413 13.8415 34.9131L7.25492 38.7182C7.11795 38.7977 6.94941 38.7985 6.81204 38.7206L0.225854 34.9836C-0.0734986 34.8139 -0.075549 34.3833 0.221343 34.2106Z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M6.03876 9.125L16.9237 15.5151C17.1513 15.6484 17.2903 15.8912 17.2903 16.1549V28.8331C17.2903 29.4076 16.665 29.7647 16.1704 29.4728L5.28546 23.0264C5.05869 22.8919 4.92008 22.6479 4.9209 22.3855V9.76307C4.92254 9.1902 5.54503 8.83467 6.03876 9.125Z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
+    })]
+  });
 }); // StarProgress.displayName = 'eds-star-progress'
 
 const {
@@ -6380,7 +6586,7 @@ const getColor = color => {
   return color;
 };
 
-const DotProgress = /*#__PURE__*/React$1.forwardRef(function DotProgress({
+const DotProgress = /*#__PURE__*/React.forwardRef(function DotProgress({
   color = 'neutral',
   size = 32,
   ...rest
@@ -6391,25 +6597,26 @@ const DotProgress = /*#__PURE__*/React$1.forwardRef(function DotProgress({
   };
   const height = size / 4;
   const width = size;
-  return /*#__PURE__*/React.createElement(Svg$2, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Svg$2, { ...props,
     role: "progressbar",
     viewBox: "0 0 16 4",
     height: height,
     width: width,
-    preserveAspectRatio: "xMidYMid meet"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 2,
-    cy: 2,
-    r: 2
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 8,
-    cy: 2,
-    r: 2
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: 14,
-    cy: 2,
-    r: 2
-  }));
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: 2,
+      cy: 2,
+      r: 2
+    }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: 8,
+      cy: 2,
+      r: 2
+    }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: 14,
+      cy: 2,
+      r: 2
+    })]
+  });
 });
 
 const Progress = {
@@ -6464,7 +6671,7 @@ const OrderedList$1 = styled__default['default'].ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
 })(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
-const ListItem$3 = styled__default['default'].li.withConfig({
+const ListItem$1 = styled__default['default'].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:inline-block;"]);
@@ -6476,7 +6683,7 @@ const Collapsed = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
-const Breadcrumbs$1 = /*#__PURE__*/React$1.forwardRef(function Breadcrumbs({
+const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
   children,
   collapse,
   ...rest
@@ -6484,7 +6691,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React$1.forwardRef(function Breadcrumbs({
   const props = { ...rest,
     ref
   };
-  const [expanded, setExpanded] = React$1.useState(false);
+  const [expanded, setExpanded] = React.useState(false);
 
   const collapsedCrumbs = allCrumbs => {
     const handleExpandClick = e => {
@@ -6502,35 +6709,47 @@ const Breadcrumbs$1 = /*#__PURE__*/React$1.forwardRef(function Breadcrumbs({
       return allCrumbs;
     }
 
-    return [allCrumbs[0], /*#__PURE__*/React.createElement(React$1.Fragment, {
-      key: "collapsed"
-    }, /*#__PURE__*/React.createElement(ListItem$3, null, /*#__PURE__*/React.createElement(Collapsed, {
-      link: true,
-      role: "button",
-      variant: "body_short",
-      onClick: handleExpandClick,
-      onKeyPress: handleExpandClick,
-      tabIndex: 0
-    }, "\u2026")), /*#__PURE__*/React.createElement("li", {
-      "aria-hidden": true
-    }, /*#__PURE__*/React.createElement(Separator, {
-      variant: "body_short"
-    }, "/"))), allCrumbs[allCrumbs.length - 1]];
+    return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
+          link: true,
+          role: "button",
+          variant: "body_short",
+          onClick: handleExpandClick,
+          onKeyPress: handleExpandClick,
+          tabIndex: 0,
+          children: "\u2026"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("li", {
+        "aria-hidden": true,
+        children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
+          variant: "body_short",
+          children: "/"
+        })
+      })]
+    }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
   };
 
-  const allCrumbs = React$1.Children.toArray(children).map((child, index) =>
+  const allCrumbs = React.Children.toArray(children).map((child, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  React.createElement(React$1.Fragment, {
-    key: `breadcrumb-${index}`
-  }, /*#__PURE__*/React.createElement(ListItem$3, null, child), index !== React$1.Children.toArray(children).length - 1 && /*#__PURE__*/React.createElement("li", {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(Separator, {
-    variant: "body_short"
-  }, "/"))));
-  return /*#__PURE__*/React.createElement("nav", _extends__default['default']({}, props, {
-    "aria-label": "breadcrumbs"
-  }), /*#__PURE__*/React.createElement(OrderedList$1, null, collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs));
+  jsxRuntime.jsxs(React.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
+      children: child
+    }), index !== React.Children.toArray(children).length - 1 && /*#__PURE__*/jsxRuntime.jsx("li", {
+      "aria-hidden": true,
+      children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
+        variant: "body_short",
+        children: "/"
+      })
+    })]
+  }, "breadcrumb-".concat(index)));
+  return /*#__PURE__*/jsxRuntime.jsx("nav", { ...props,
+    "aria-label": "breadcrumbs",
+    children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
+      children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
+    })
+  });
 }); // Breadcrumbs.displayName = 'eds-breadcrumbs'
 
 const {
@@ -6545,7 +6764,7 @@ const StyledTypography = styled__default['default'](Typography).withConfig({
 }) => styled.css({
   maxWidth
 }));
-const Breadcrumb = /*#__PURE__*/React$1.forwardRef(function Breadcrumb({
+const Breadcrumb = /*#__PURE__*/React.forwardRef(function Breadcrumb({
   children,
   maxWidth,
   href,
@@ -6558,15 +6777,20 @@ const Breadcrumb = /*#__PURE__*/React$1.forwardRef(function Breadcrumb({
   };
   const showTooltip = maxWidth > 0;
   const isHrefDefined = href !== undefined;
-  const crumb = /*#__PURE__*/React.createElement(StyledTypography, _extends__default['default']({
+
+  const crumb = /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
     link: isHrefDefined,
     as: isHrefDefined ? null : 'span',
-    variant: "body_short"
-  }, props), children);
-  return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+    variant: "body_short",
+    ...props,
+    children: children
+  });
+
+  return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
     title: children,
-    placement: "top"
-  }, crumb) : crumb;
+    placement: "top",
+    children: crumb
+  }) : crumb;
 });
 
 const Breadcrumbs = Breadcrumbs$1;
@@ -6577,11 +6801,11 @@ const initalState = {
   focusedIndex: -1,
   onClose: null
 };
-const MenuContext = /*#__PURE__*/React$1.createContext(initalState);
+const MenuContext = /*#__PURE__*/React.createContext(initalState);
 const MenuProvider = ({
   children
 }) => {
-  const [state, setState] = React$1.useState(initalState);
+  const [state, setState] = React.useState(initalState);
   const {
     focusedIndex,
     onClose
@@ -6594,8 +6818,13 @@ const MenuProvider = ({
   };
 
   const setOnClose = onClose => {
+    const onCloseHelper = () => {
+      onClose();
+      setFocusedIndex(-1);
+    };
+
     setState(prevState => ({ ...prevState,
-      onClose
+      onClose: onCloseHelper
     }));
   };
 
@@ -6605,11 +6834,12 @@ const MenuProvider = ({
     setOnClose,
     onClose
   };
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(MenuContext.Provider, {
+    value: value,
+    children: children
+  });
 };
-const useMenu = () => React$1.useContext(MenuContext);
+const useMenu = () => React.useContext(MenuContext);
 
 const {
   colors: {
@@ -6754,26 +6984,26 @@ const {
     icon
   }
 } = menu;
-const ListItem$2 = styled__default['default'].li.attrs(({
+const Item = styled__default['default'].button.attrs(({
   isFocused
 }) => ({
   role: 'menuitem',
   tabIndex: isFocused ? -1 : 0
 })).withConfig({
-  displayName: "MenuItem__ListItem",
+  displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography$2), ({
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography$2), ({
   theme
 }) => spacingsTemplate(theme.entities.item.spacings), ({
   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{", "}"], hover.background, outlineTemplate(focus.outline)));
+}) => 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, outlineTemplate(focus.outline)));
 const Content = styled__default['default'].div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-const MenuItem = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(function MenuItem({
+const MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function MenuItem({
   children,
   disabled,
   index = 0,
@@ -6797,7 +7027,7 @@ const MenuItem = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(func
     disabled,
     isFocused
   };
-  return /*#__PURE__*/React.createElement(ListItem$2, _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(Item, { ...props,
     ref: useCombinedRefs(ref, el => {
       if (el !== null && isFocused) {
         el.focus();
@@ -6805,22 +7035,25 @@ const MenuItem = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(func
     }),
     onFocus: () => toggleFocus(index),
     onClick: e => {
-      if (!disabled && onClick) {
+      if (onClick) {
         onClick(e);
 
         if (onClose !== null) {
           onClose(e);
         }
       }
-    }
-  }), /*#__PURE__*/React.createElement(Content, null, children));
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Content, {
+      children: children
+    })
+  });
 }));
 MenuItem.displayName = 'MenuItem';
 
-const ListItem$1 = styled__default['default'].li.attrs(() => ({
+const Header = styled__default['default'].div.attrs(() => ({
   tabIndex: 0
 })).withConfig({
-  displayName: "MenuSection__ListItem",
+  displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
 const MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props) {
@@ -6829,25 +7062,32 @@ const MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(prop
     title,
     index
   } = props;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, index !== 0 && /*#__PURE__*/React__namespace.createElement("li", null, /*#__PURE__*/React__namespace.createElement(Divider, {
-    variant: "small"
-  })), title && /*#__PURE__*/React__namespace.createElement(ListItem$1, null, /*#__PURE__*/React__namespace.createElement(Typography, {
-    group: "navigation",
-    variant: "label"
-  }, title)), children);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [index !== 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(Divider, {
+        variant: "small"
+      })
+    }), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        group: "navigation",
+        variant: "label",
+        children: title
+      })
+    }), children]
+  });
 }); // MenuSection.displayName = 'EdsMenuSection'
 
-const List = styled__default['default'].ul.withConfig({
+const List = styled__default['default'].div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
-})(["position:relative;list-style:none;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
+})(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
 
 function isIndexable(item) {
-  if ( /*#__PURE__*/React$1.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
+  if ( /*#__PURE__*/React.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
   return false;
 }
 
-const MenuList = /*#__PURE__*/React$1.forwardRef(function MenuList({
+const MenuList = /*#__PURE__*/React.forwardRef(function MenuList({
   children,
   focus,
   ...rest
@@ -6857,28 +7097,28 @@ const MenuList = /*#__PURE__*/React$1.forwardRef(function MenuList({
     setFocusedIndex
   } = useMenu();
   let index = -1;
-  const focusableIndexs = React$1.useMemo(() => [], []);
-  const updatedChildren = React$1.useMemo(() => React$1.Children.map(children, child => {
+  const focusableIndexs = React.useMemo(() => [], []);
+  const updatedChildren = React.useMemo(() => React.Children.map(children, child => {
     if (child.type === MenuSection) {
-      const updatedGrandChildren = React$1.Children.map(child.props.children, grandChild => {
+      const updatedGrandChildren = React.Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
-        return /*#__PURE__*/React$1.cloneElement(grandChild, {
+        return /*#__PURE__*/React.cloneElement(grandChild, {
           index
         });
       });
-      return /*#__PURE__*/React$1.cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/React.cloneElement(child, null, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
-      return /*#__PURE__*/React$1.cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         index
       });
     }
   }), [children, focusableIndexs, index]);
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (focus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
@@ -6914,12 +7154,13 @@ const MenuList = /*#__PURE__*/React$1.forwardRef(function MenuList({
     }
   };
 
-  return /*#__PURE__*/React.createElement(List, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(List, {
     onKeyDown: handleKeyPress,
-    role: "menu"
-  }, rest, {
-    ref: ref
-  }), updatedChildren);
+    role: "menu",
+    ...rest,
+    ref: ref,
+    children: updatedChildren
+  });
 }); // MenuList.displayName = 'EdsMenuList'
 
 const {
@@ -6933,7 +7174,7 @@ const MenuPaper = styled__default['default'](Paper).withConfig({
 }) => styled.css({
   visibility: open ? null : 'hidden'
 }));
-const MenuContainer = /*#__PURE__*/React$1.forwardRef(function MenuContainer({
+const MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer({
   children,
   anchorEl,
   onClose: onCloseCallback,
@@ -6945,7 +7186,7 @@ const MenuContainer = /*#__PURE__*/React$1.forwardRef(function MenuContainer({
     setOnClose,
     onClose
   } = useMenu();
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
@@ -6958,13 +7199,20 @@ const MenuContainer = /*#__PURE__*/React$1.forwardRef(function MenuContainer({
   useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
+      anchorEl.focus();
     }
   });
-  return /*#__PURE__*/React.createElement(MenuList, _extends__default['default']({}, rest, {
-    ref: ref
-  }), children);
+  useGlobalKeyPress('Enter', () => {
+    if (open && onClose !== null) {
+      if (window.document.contains(anchorEl)) anchorEl.focus();
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(MenuList, { ...rest,
+    ref: ref,
+    children: children
+  });
 });
-const Menu$1 = /*#__PURE__*/React$1.forwardRef(function Menu({
+const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu({
   anchorEl,
   open,
   placement = 'auto',
@@ -6972,7 +7220,7 @@ const Menu$1 = /*#__PURE__*/React$1.forwardRef(function Menu({
   className,
   ...rest
 }, ref) {
-  const [containerEl, setContainerEl] = React$1.useState(null);
+  const [containerEl, setContainerEl] = React.useState(null);
   const isMounted = useIsMounted();
   const {
     density
@@ -6997,14 +7245,21 @@ const Menu$1 = /*#__PURE__*/React$1.forwardRef(function Menu({
     open,
     containerEl
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMounted && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(MenuPaper, _extends__default['default']({
-    elevation: "raised",
-    ref: setContainerEl
-  }, props), /*#__PURE__*/React.createElement(MenuProvider, null, /*#__PURE__*/React.createElement(MenuContainer, _extends__default['default']({}, menuProps, {
-    ref: ref
-  }))))), document.body));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: isMounted && /*#__PURE__*/ReactDom__namespace.createPortal( /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+      theme: token,
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
+        elevation: "raised",
+        ref: setContainerEl,
+        ...props,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
+          children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, { ...menuProps,
+            ref: ref
+          })
+        })
+      })
+    }), document.body)
+  });
 });
 
 const Menu = Menu$1;
@@ -7050,7 +7305,7 @@ const pagination = {
   }
 };
 
-const PaginationItem = /*#__PURE__*/React$1.forwardRef(function PaginationItem({
+const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem({
   page,
   selected,
   onClick,
@@ -7063,13 +7318,15 @@ const PaginationItem = /*#__PURE__*/React$1.forwardRef(function PaginationItem({
     ...rest
   };
   const background = selected ? pagination.entities.item.states.active.background : null;
-  return /*#__PURE__*/React.createElement(Button, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
     style: {
       background
     },
     variant: "ghost_icon",
-    onClick: onClick ? onClick : undefined
-  }, props), page);
+    onClick: onClick ? onClick : undefined,
+    ...props,
+    children: page
+  });
 });
 
 function PaginationControl(pages, activePage) {
@@ -7151,10 +7408,10 @@ const Text = styled__default['default'](Typography).withConfig({
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
+  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
-const Pagination = /*#__PURE__*/React$1.forwardRef(function Pagination({
+const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
   totalItems,
   defaultPage = 1,
   withItemIndicator,
@@ -7166,7 +7423,7 @@ const Pagination = /*#__PURE__*/React$1.forwardRef(function Pagination({
 
   const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
 
-  const [activePage, setActivePage] = React$1.useState(defaultPage);
+  const [activePage, setActivePage] = React.useState(defaultPage);
   const currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
 
   const currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
@@ -7184,7 +7441,7 @@ const Pagination = /*#__PURE__*/React$1.forwardRef(function Pagination({
 
   const isMounted = useIsMounted();
   const items = PaginationControl(pages, activePage);
-  React$1.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (isMounted) {
       setActivePage(1);
       onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
@@ -7196,60 +7453,66 @@ const Pagination = /*#__PURE__*/React$1.forwardRef(function Pagination({
     withItemIndicator,
     ...rest
   };
-  const pagination = /*#__PURE__*/React.createElement(Navigation, _extends__default['default']({
-    "aria-label": "pagination"
-  }, props), /*#__PURE__*/React.createElement(OrderedList, {
-    style: {
-      gridTemplateColumns: `repeat(${columns}, 48px)`
-    }
-  }, /*#__PURE__*/React.createElement(ListItem, {
-    key: "previous"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost_icon",
-    onClick: activePage > 1 ? event => {
-      onPageChange(event, activePage - 1);
-    } : undefined,
-    disabled: activePage === 1,
-    "aria-label": "Go to previous page"
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    name: "chevron_left"
-  }))), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ?
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  React.createElement(ListItem, {
-    key: `list-item ${index}`
-  }, /*#__PURE__*/React.createElement(PaginationItem, _extends__default['default']({}, page, {
-    "aria-label": getAriaLabel(page, activePage),
-    "aria-current": activePage,
-    page: page,
-    selected: page === activePage,
-    onClick: event => {
-      onPageChange(event, page);
-    }
-  }))) : /*#__PURE__*/React.createElement(ListItem // eslint-disable-next-line react/no-array-index-key
-  , {
-    key: `ellipsis-${index}`
-  }, /*#__PURE__*/React.createElement(StyledIcon, {
-    name: "more_horizontal",
-    "aria-label": "Ellipsis of pages"
-  }))) : undefined, /*#__PURE__*/React.createElement(ListItem, {
-    key: "next"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "ghost_icon",
-    onClick: activePage < pages ? event => {
-      onPageChange(event, activePage + 1);
-    } : undefined,
-    "aria-label": "Go to next page",
-    disabled: activePage === pages
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    name: "chevron_right"
-  })))));
-  return withItemIndicator ? /*#__PURE__*/React.createElement(FlexContainer, null, /*#__PURE__*/React.createElement(Text, null, currentItemFirst !== currentItemLast ? `${currentItemFirst}
-              ${' - '}
-              ${currentItemLast}
-              ${' of '}
-              ${totalItems}
-              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`), pagination) : pagination;
+
+  const pagination = /*#__PURE__*/jsxRuntime.jsx(Navigation, {
+    "aria-label": "pagination",
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(OrderedList, {
+      style: {
+        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost_icon",
+          onClick: activePage > 1 ? event => {
+            onPageChange(event, activePage - 1);
+          } : undefined,
+          disabled: activePage === 1,
+          "aria-label": "Go to previous page",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            name: "chevron_left"
+          })
+        })
+      }, "previous"), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ?
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      jsxRuntime.jsx(ListItem, {
+        children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, { ...page,
+          "aria-label": getAriaLabel(page, activePage),
+          "aria-current": activePage,
+          page: page,
+          selected: page === activePage,
+          onClick: event => {
+            onPageChange(event, page);
+          }
+        })
+      }, "list-item ".concat(index)) : /*#__PURE__*/jsxRuntime.jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      , {
+        children: /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+          name: "more_horizontal",
+          "aria-label": "Ellipsis of pages"
+        })
+      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          variant: "ghost_icon",
+          onClick: activePage < pages ? event => {
+            onPageChange(event, activePage + 1);
+          } : undefined,
+          "aria-label": "Go to next page",
+          disabled: activePage === pages,
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            name: "chevron_right"
+          })
+        })
+      }, "next")]
+    })
+  });
+
+  return withItemIndicator ? /*#__PURE__*/jsxRuntime.jsxs(FlexContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
+      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
+    }), pagination]
+  }) : pagination;
 });
 
 const {
@@ -7325,7 +7588,7 @@ const StyledSelect = styled__default['default'].select.withConfig({
 })(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
   theme
 }) => styled.css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
-const NativeSelect = /*#__PURE__*/React$1.forwardRef(function NativeSelect({
+const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect({
   label,
   children,
   className,
@@ -7359,9 +7622,15 @@ const NativeSelect = /*#__PURE__*/React$1.forwardRef(function NativeSelect({
     meta
   };
   const showLabel = label || meta;
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(Container$1, containerProps, showLabel && /*#__PURE__*/React.createElement(Label$1, labelProps), /*#__PURE__*/React.createElement(StyledSelect, selectProps, children)));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container$1, { ...containerProps,
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, { ...labelProps
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, { ...selectProps,
+        children: children
+      })]
+    })
+  });
 });
 
 const {
@@ -7509,7 +7778,7 @@ const PaddedStyledListItem$1 = styled__default['default'](StyledListItem).withCo
 })(["", ""], ({
   theme
 }) => spacingsTemplate(theme.spacings));
-const SingleSelect = /*#__PURE__*/React$1.forwardRef(function SingleSelect({
+const SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect({
   items = [],
   label,
   meta,
@@ -7521,7 +7790,7 @@ const SingleSelect = /*#__PURE__*/React$1.forwardRef(function SingleSelect({
   handleSelectedItemChange,
   ...other
 }, ref) {
-  const [inputItems, setInputItems] = React$1.useState(items);
+  const [inputItems, setInputItems] = React.useState(items);
   const isControlled = selectedOption !== undefined ? true : false;
   const {
     density
@@ -7529,7 +7798,7 @@ const SingleSelect = /*#__PURE__*/React$1.forwardRef(function SingleSelect({
   const token = useToken({
     density
   }, select);
-  React$1.useEffect(() => {
+  React.useEffect(() => {
     setInputItems(items);
   }, [items]);
   let comboboxProps = {
@@ -7577,51 +7846,61 @@ const SingleSelect = /*#__PURE__*/React$1.forwardRef(function SingleSelect({
     }
   };
 
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(Container, {
-    className: className,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Label$1, _extends__default['default']({}, getLabelProps(), {
-    label: label,
-    meta: meta,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(StyledInputWrapper, getComboboxProps(), /*#__PURE__*/React.createElement(PaddedInput, _extends__default['default']({}, getInputProps({
-    disabled: disabled
-  }), {
-    readOnly: readOnly,
-    onFocus: openSelect,
-    onClick: openSelect
-  }, other)), Boolean(inputValue) && /*#__PURE__*/React.createElement(StyledButton, {
-    variant: "ghost_icon",
-    disabled: disabled || readOnly,
-    "aria-label": 'clear options',
-    title: "clear",
-    onClick: reset,
-    style: {
-      right: 32
-    }
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    data: edsIcons.close,
-    size: 16
-  })), /*#__PURE__*/React.createElement(StyledButton, _extends__default['default']({
-    variant: "ghost_icon"
-  }, getToggleButtonProps({
-    disabled: disabled || readOnly
-  }), {
-    "aria-label": 'toggle options',
-    title: "open"
-  }), /*#__PURE__*/React.createElement(Icon$1, {
-    data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
-  }))), /*#__PURE__*/React.createElement(StyledList, getMenuProps(), isOpen && inputItems.map((item, index) => /*#__PURE__*/React.createElement(PaddedStyledListItem$1, _extends__default['default']({
-    highlighted: highlightedIndex === index ? 'true' : 'false',
-    active: selectedItem === item ? 'true' : 'false',
-    key: `${item}`
-  }, getItemProps({
-    item,
-    index,
-    disabled: disabled
-  })), item)))));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
+        label: label,
+        meta: meta,
+        disabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsxs(StyledInputWrapper, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps({
+            disabled: disabled
+          }),
+          readOnly: readOnly,
+          onFocus: openSelect,
+          onClick: openSelect,
+          ...other
+        }), Boolean(inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          style: {
+            right: 32
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: edsIcons.close,
+            size: 16
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          ...getToggleButtonProps({
+            disabled: disabled || readOnly
+          }),
+          "aria-label": 'toggle options',
+          title: "open",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps(),
+        children: isOpen && inputItems.map((item, index) => /*#__PURE__*/jsxRuntime.jsx(PaddedStyledListItem$1, {
+          highlighted: highlightedIndex === index ? 'true' : 'false',
+          active: selectedItem === item ? 'true' : 'false',
+          ...getItemProps({
+            item,
+            index,
+            disabled: disabled
+          }),
+          children: item
+        }, "".concat(item)))
+      })]
+    })
+  });
 });
 
 const {
@@ -7712,6 +7991,7 @@ const checkbox = {
   }
 };
 
+/* eslint camelcase: "off" */
 const StyledPath$1 = styled__default['default'].path.attrs(({
   icon
 }) => ({
@@ -7729,13 +8009,15 @@ const Input$3 = styled__default['default'].input.attrs(({
 })).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
   theme,
   iconSize
 }) => parseFloat(theme.clickbound.height) / iconSize, ({
   disabled
 }) => disabled ? 'not-allowed' : 'pointer', ({
   theme
+}) => outlineTemplate(theme.states.focus.outline), ({
+  theme
 }) => outlineTemplate(theme.states.focus.outline));
 const Svg$1 = styled__default['default'].svg.attrs(({
   height,
@@ -7759,7 +8041,7 @@ const InputWrapper$1 = styled__default['default'].span.withConfig({
 }) => spacingsTemplate(theme.spacings), ({
   disabled
 }) => disabled ? 'transparent' : checkbox.states.hover.background);
-const CheckboxInput = /*#__PURE__*/React$1.forwardRef(function CheckboxInput({
+const CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput({
   disabled = false,
   indeterminate,
   ...rest
@@ -7781,32 +8063,38 @@ const CheckboxInput = /*#__PURE__*/React$1.forwardRef(function CheckboxInput({
     ['data-indeterminate']: indeterminate,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(InputWrapper$1, inputWrapperProps, /*#__PURE__*/React.createElement(Input$3, _extends__default['default']({
-    iconSize: iconSize
-  }, inputProps)), indeterminate ? /*#__PURE__*/React.createElement(Svg$1, {
-    width: iconSize,
-    height: iconSize,
-    viewBox: `0 0 ${iconSize} ${iconSize}`,
-    fill: fill,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(StyledPath$1, {
-    icon: edsIcons.checkbox_indeterminate,
-    name: "indeterminate"
-  })) : /*#__PURE__*/React.createElement(Svg$1, {
-    width: iconSize,
-    height: iconSize,
-    viewBox: `0 0 ${iconSize} ${iconSize}`,
-    fill: fill,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(StyledPath$1, {
-    icon: edsIcons.checkbox,
-    name: "checked"
-  }), /*#__PURE__*/React.createElement(StyledPath$1, {
-    icon: edsIcons.checkbox_outline,
-    name: "not-checked"
-  }))));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(InputWrapper$1, { ...inputWrapperProps,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input$3, {
+        iconSize: iconSize,
+        ...inputProps
+      }), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
+        width: iconSize,
+        height: iconSize,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        fill: fill,
+        "aria-hidden": true,
+        children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
+          icon: edsIcons.checkbox_indeterminate,
+          name: "indeterminate"
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
+        width: iconSize,
+        height: iconSize,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        fill: fill,
+        "aria-hidden": true,
+        children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
+          icon: edsIcons.checkbox,
+          name: "checked"
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
+          icon: edsIcons.checkbox_outline,
+          name: "not-checked"
+        })]
+      })]
+    })
+  });
 });
 
 const PaddedStyledListItem = styled__default['default'](StyledListItem).withConfig({
@@ -7815,7 +8103,7 @@ const PaddedStyledListItem = styled__default['default'](StyledListItem).withConf
 })(["display:flex;align-items:center;", ""], ({
   theme
 }) => spacingsTemplate(theme.spacings));
-const MultiSelect = /*#__PURE__*/React$1.forwardRef(function MultiSelect({
+const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
   items = [],
   initialSelectedItems = [],
   label,
@@ -7828,7 +8116,7 @@ const MultiSelect = /*#__PURE__*/React$1.forwardRef(function MultiSelect({
   ...other
 }, ref) {
   const isControlled = selectedOptions ? true : false;
-  const [inputValue, setInputValue] = React$1.useState('');
+  const [inputValue, setInputValue] = React.useState('');
   const {
     density
   } = useEds();
@@ -7923,7 +8211,7 @@ const MultiSelect = /*#__PURE__*/React$1.forwardRef(function MultiSelect({
       }
     }
   });
-  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
+  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -7931,59 +8219,72 @@ const MultiSelect = /*#__PURE__*/React$1.forwardRef(function MultiSelect({
     }
   };
 
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, /*#__PURE__*/React.createElement(Container, {
-    className: className,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Label$1, _extends__default['default']({}, getLabelProps(), {
-    label: label,
-    meta: meta,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(StyledInputWrapper, getComboboxProps(), /*#__PURE__*/React.createElement(PaddedInput, _extends__default['default']({}, getInputProps(getDropdownProps({
-    preventKeyAction: isOpen,
-    disabled: disabled
-  })), {
-    placeholder: placeholderText,
-    readOnly: readOnly,
-    onFocus: openSelect
-  }, other)), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/React.createElement(StyledButton, {
-    variant: "ghost_icon",
-    disabled: disabled || readOnly,
-    "aria-label": 'clear options',
-    title: "clear",
-    onClick: reset,
-    style: {
-      right: 32
-    }
-  }, /*#__PURE__*/React.createElement(Icon$1, {
-    data: edsIcons.close,
-    size: 16
-  })), /*#__PURE__*/React.createElement(StyledButton, _extends__default['default']({
-    variant: "ghost_icon"
-  }, getToggleButtonProps({
-    disabled: disabled || readOnly
-  }), {
-    "aria-label": 'toggle options',
-    title: "open"
-  }), /*#__PURE__*/React.createElement(Icon$1, {
-    data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
-  }))), /*#__PURE__*/React.createElement(StyledList, getMenuProps(), isOpen && getFilteredItems(items).map((item, index) => /*#__PURE__*/React.createElement(PaddedStyledListItem, _extends__default['default']({
-    key: `${item}`,
-    highlighted: highlightedIndex === index ? 'true' : 'false'
-  }, getItemProps({
-    item,
-    index,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(CheckboxInput, {
-    checked: selectedItems.includes(item),
-    value: item,
-    onChange: () => {
-      return null;
-    }
-  }), /*#__PURE__*/React.createElement("span", null, item))))));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container, {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$1, { ...getLabelProps(),
+        label: label,
+        meta: meta,
+        disabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsxs(StyledInputWrapper, { ...getComboboxProps(),
+        children: [/*#__PURE__*/jsxRuntime.jsx(PaddedInput, { ...getInputProps(getDropdownProps({
+            preventKeyAction: isOpen,
+            disabled: disabled
+          })),
+          placeholder: placeholderText,
+          readOnly: readOnly,
+          onFocus: openSelect,
+          ...other
+        }), Boolean(selectedItems.length || inputValue) && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          disabled: disabled || readOnly,
+          "aria-label": 'clear options',
+          title: "clear",
+          onClick: reset,
+          style: {
+            right: 32
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: edsIcons.close,
+            size: 16
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+          variant: "ghost_icon",
+          ...getToggleButtonProps({
+            disabled: disabled || readOnly
+          }),
+          "aria-label": 'toggle options',
+          title: "open",
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
+            data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps(),
+        children: isOpen && getFilteredItems(items).map((item, index) => /*#__PURE__*/jsxRuntime.jsxs(PaddedStyledListItem, {
+          highlighted: highlightedIndex === index ? 'true' : 'false',
+          ...getItemProps({
+            item,
+            index,
+            disabled: disabled
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxInput, {
+            checked: selectedItems.includes(item),
+            value: item,
+            onChange: () => {
+              return null;
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: item
+          })]
+        }, "".concat(item)))
+      })]
+    })
+  });
 });
 
+/* eslint camelcase: "off" */
 const StyledLabel$2 = styled__default['default'].label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
@@ -7994,25 +8295,28 @@ const LabelText$1 = styled__default['default'].span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
 })(["", ";"], typographyTemplate(checkbox.typography));
-const Checkbox = /*#__PURE__*/React$1.forwardRef(function Checkbox({
+const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox({
   label,
   disabled = false,
   indeterminate,
   className,
   ...rest
 }, ref) {
-  return label ? /*#__PURE__*/React.createElement(StyledLabel$2, {
-    disabled: disabled,
-    className: className
-  }, /*#__PURE__*/React.createElement(CheckboxInput, _extends__default['default']({}, rest, {
+  return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
     disabled: disabled,
-    ref: ref,
-    indeterminate: indeterminate
-  })), /*#__PURE__*/React.createElement(LabelText$1, null, label)) : /*#__PURE__*/React.createElement(CheckboxInput, _extends__default['default']({}, rest, {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxInput, { ...rest,
+      disabled: disabled,
+      ref: ref,
+      indeterminate: indeterminate
+    }), /*#__PURE__*/jsxRuntime.jsx(LabelText$1, {
+      children: label
+    })]
+  }) : /*#__PURE__*/jsxRuntime.jsx(CheckboxInput, { ...rest,
     disabled: disabled,
     ref: ref,
     indeterminate: indeterminate
-  }));
+  });
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -8104,6 +8408,7 @@ const comfortable$1 = {
   }
 };
 
+/* eslint camelcase: "off" */
 const Input$2 = styled__default['default'].input.attrs(({
   type = 'radio'
 }) => ({
@@ -8111,13 +8416,15 @@ const Input$2 = styled__default['default'].input.attrs(({
 })).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
   theme,
   iconSize
 }) => parseFloat(theme.clickbound.height) / iconSize, ({
   disabled
 }) => disabled ? 'not-allowed' : 'pointer', ({
   theme
+}) => outlineTemplate(theme.states.focus.outline), ({
+  theme
 }) => outlineTemplate(theme.states.focus.outline));
 const StyledLabel$1 = styled__default['default'].label.withConfig({
   displayName: "Radio__StyledLabel",
@@ -8163,7 +8470,7 @@ const InputWrapper = styled__default['default'].span.withConfig({
 }) => disabled ? 'not-allowed' : 'pointer', ({
   disabled
 }) => disabled ? 'transparent' : comfortable$1.states.hover.background);
-const Radio = /*#__PURE__*/React$1.forwardRef(function Radio({
+const Radio = /*#__PURE__*/React.forwardRef(function Radio({
   label,
   disabled = false,
   className,
@@ -8177,39 +8484,46 @@ const Radio = /*#__PURE__*/React$1.forwardRef(function Radio({
   }, comfortable$1);
   const iconSize = 24;
   const fill = disabled ? comfortable$1.states.disabled.background : comfortable$1.background;
-  const renderSVG = React$1.useMemo(() => {
-    return /*#__PURE__*/React.createElement(Svg, {
+  const renderSVG = React.useMemo(() => {
+    return /*#__PURE__*/jsxRuntime.jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: `0 0 ${iconSize} ${iconSize}`,
+      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
       fill: fill,
-      "aria-hidden": true
-    }, /*#__PURE__*/React.createElement(StyledPath, {
-      icon: edsIcons.radio_button_selected,
-      name: "selected"
-    }), /*#__PURE__*/React.createElement(StyledPath, {
-      icon: edsIcons.radio_button_unselected,
-      name: "unselected"
-    }));
+      "aria-hidden": true,
+      children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
+        icon: edsIcons.radio_button_selected,
+        name: "selected"
+      }), /*#__PURE__*/jsxRuntime.jsx(StyledPath, {
+        icon: edsIcons.radio_button_unselected,
+        name: "unselected"
+      })]
+    });
   }, [fill]);
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, label ? /*#__PURE__*/React.createElement(StyledLabel$1, {
-    disabled: disabled,
-    className: className
-  }, /*#__PURE__*/React.createElement(InputWrapper, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Input$2, _extends__default['default']({}, rest, {
-    ref: ref,
-    disabled: disabled,
-    iconSize: iconSize
-  })), renderSVG), /*#__PURE__*/React.createElement(LabelText, null, label)) : /*#__PURE__*/React.createElement(InputWrapper, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Input$2, _extends__default['default']({}, rest, {
-    ref: ref,
-    disabled: disabled,
-    iconSize: iconSize
-  })), renderSVG));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$1, {
+      disabled: disabled,
+      className: className,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
+        disabled: disabled,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, { ...rest,
+          ref: ref,
+          disabled: disabled,
+          iconSize: iconSize
+        }), renderSVG]
+      }), /*#__PURE__*/jsxRuntime.jsx(LabelText, {
+        children: label
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
+      disabled: disabled,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, { ...rest,
+        ref: ref,
+        disabled: disabled,
+        iconSize: iconSize
+      }), renderSVG]
+    })
+  });
 });
 Radio.displayName = 'Radio';
 
@@ -8237,7 +8551,7 @@ const BaseInput = styled__default['default'].input.attrs(({
 })(({
   disabled,
   theme
-}) => styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline)));
+}) => styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline)));
 const GridWrapper = styled__default['default'].span.withConfig({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"
@@ -8255,7 +8569,7 @@ const Input$1 = styled__default['default'](BaseInput).withConfig({
       track
     }
   }
-}) => styled.css(["&[data-focus-visible-added]:focus + span{outline-offset:", ";}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], states.focus.outline.offset, disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
+}) => styled.css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
 const Track$1 = styled__default['default'].span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
@@ -8278,16 +8592,20 @@ const Handle$1 = styled__default['default'].span.withConfig({
     }
   }
 }) => styled.css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
-const SwitchSmall = /*#__PURE__*/React$1.forwardRef(function SwitchSmall({
+const SwitchSmall = /*#__PURE__*/React.forwardRef(function SwitchSmall({
   disabled,
   ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(GridWrapper, null, /*#__PURE__*/React.createElement(Input$1, _extends__default['default']({}, rest, {
-    ref: ref,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(BaseInputWrapper, null, /*#__PURE__*/React.createElement(Track$1, {
-    isDisabled: disabled
-  }), /*#__PURE__*/React.createElement(Handle$1, null)));
+  return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, { ...rest,
+      ref: ref,
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Track$1, {
+        isDisabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsx(Handle$1, {})]
+    })]
+  });
 });
 SwitchSmall.displayName = 'SwitchSmall';
 
@@ -8326,18 +8644,22 @@ const Handle = styled__default['default'].span.withConfig({
 }) => styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
   backgroundColor: states.disabled.background
 }, handle.boxShadow, handle.width, handle.height));
-const SwitchDefault = /*#__PURE__*/React$1.forwardRef(function SwitchDefault({
+const SwitchDefault = /*#__PURE__*/React.forwardRef(function SwitchDefault({
   disabled,
   ...rest
 }, ref) {
-  return /*#__PURE__*/React.createElement(GridWrapper, null, /*#__PURE__*/React.createElement(Input, _extends__default['default']({}, rest, {
-    ref: ref,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(BaseInputWrapper, null, /*#__PURE__*/React.createElement(Track, {
-    isDisabled: disabled
-  }), /*#__PURE__*/React.createElement(Handle, {
-    isDisabled: disabled
-  })));
+  return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, { ...rest,
+      ref: ref,
+      disabled: disabled
+    }), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Track, {
+        isDisabled: disabled
+      }), /*#__PURE__*/jsxRuntime.jsx(Handle, {
+        isDisabled: disabled
+      })]
+    })]
+  });
 });
 SwitchDefault.displayName = 'SwitchDefault';
 
@@ -8408,8 +8730,8 @@ const comfortable = {
     height: clickbounds.default__base,
     width: clickbounds.default__base,
     offset: {
-      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
-      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
+      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
+      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
     }
   },
   entities: {
@@ -8458,8 +8780,8 @@ const comfortable = {
         height: clickbounds.compact__standard,
         width: clickbounds.compact__standard,
         offset: {
-          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
-          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
+          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
+          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
         }
       },
       entities: {
@@ -8518,7 +8840,7 @@ const Label = styled__default['default'].span.withConfig({
 })(({
   theme
 }) => styled.css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left));
-const Switch = /*#__PURE__*/React$1.forwardRef(function Switch({
+const Switch = /*#__PURE__*/React.forwardRef(function Switch({
   size = 'default',
   disabled,
   label,
@@ -8533,28 +8855,32 @@ const Switch = /*#__PURE__*/React$1.forwardRef(function Switch({
   const token = useToken({
     density: overrideDensity
   }, comfortable);
-  return /*#__PURE__*/React.createElement(styled.ThemeProvider, {
-    theme: token
-  }, label ? /*#__PURE__*/React.createElement(StyledLabel, {
-    isDisabled: disabled,
-    className: className
-  }, size === 'small' ? /*#__PURE__*/React.createElement(SwitchSmall, _extends__default['default']({
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  })) : /*#__PURE__*/React.createElement(SwitchDefault, _extends__default['default']({
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  })), label && /*#__PURE__*/React.createElement(Label, null, label)) : size === 'small' ? /*#__PURE__*/React.createElement(SwitchSmall, _extends__default['default']({
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  })) : /*#__PURE__*/React.createElement(SwitchDefault, _extends__default['default']({
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  })));
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel, {
+      isDisabled: disabled,
+      className: className,
+      children: [size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
+        disabled: disabled,
+        ...rest,
+        ref: ref
+      }) : /*#__PURE__*/jsxRuntime.jsx(SwitchDefault, {
+        disabled: disabled,
+        ...rest,
+        ref: ref
+      }), label && /*#__PURE__*/jsxRuntime.jsx(Label, {
+        children: label
+      })]
+    }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
+      disabled: disabled,
+      ...rest,
+      ref: ref
+    }) : /*#__PURE__*/jsxRuntime.jsx(SwitchDefault, {
+      disabled: disabled,
+      ...rest,
+      ref: ref
+    })
+  });
 });
 Switch.displayName = 'Switch';