@equinor/eds-core-react 0.15.0-dev.20211116v2 → 0.16.1-dev.12072021

package/dist/core-react.cjs.js

@@ -2,11 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('focus-visible');
 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');
@@ -37,7 +35,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var R__namespace = /*#__PURE__*/_interopNamespace(R);
 var ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
 
 const {
@@ -85,7 +82,7 @@ const {
     compact__standard: compactClickboundHeight$1
   }
 } = edsTokens.tokens;
-const button = {
+const button$1 = {
   background: 'transparent',
   height: buttonHeight,
   typography: { ...buttonTypography,
@@ -106,7 +103,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'
     }
   },
@@ -156,7 +153,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'
         }
       }
@@ -164,6 +161,257 @@ const button = {
   }
 };
 
+function _isPlaceholder$3(a) {
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+}
+
+var _isPlaceholder_1 = _isPlaceholder$3;
+
+var _isPlaceholder$2 = _isPlaceholder_1;
+/**
+ * Optimized internal one-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry1$2(fn) {
+  return function f1(a) {
+    if (arguments.length === 0 || _isPlaceholder$2(a)) {
+      return f1;
+    } else {
+      return fn.apply(this, arguments);
+    }
+  };
+}
+
+var _curry1_1 = _curry1$2;
+
+var _curry1$1 = _curry1_1;
+var _isPlaceholder$1 = _isPlaceholder_1;
+/**
+ * Optimized internal two-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry2$2(fn) {
+  return function f2(a, b) {
+    switch (arguments.length) {
+      case 0:
+        return f2;
+
+      case 1:
+        return _isPlaceholder$1(a) ? f2 : _curry1$1(function (_b) {
+          return fn(a, _b);
+        });
+
+      default:
+        return _isPlaceholder$1(a) && _isPlaceholder$1(b) ? f2 : _isPlaceholder$1(a) ? _curry1$1(function (_a) {
+          return fn(_a, b);
+        }) : _isPlaceholder$1(b) ? _curry1$1(function (_b) {
+          return fn(a, _b);
+        }) : fn(a, b);
+    }
+  };
+}
+
+var _curry2_1 = _curry2$2;
+
+var _curry1 = _curry1_1;
+var _curry2$1 = _curry2_1;
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal three-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry3$2(fn) {
+  return function f3(a, b, c) {
+    switch (arguments.length) {
+      case 0:
+        return f3;
+
+      case 1:
+        return _isPlaceholder(a) ? f3 : _curry2$1(function (_b, _c) {
+          return fn(a, _b, _c);
+        });
+
+      case 2:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2$1(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) ? _curry2$1(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _curry1(function (_c) {
+          return fn(a, b, _c);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2$1(function (_a, _b) {
+          return fn(_a, _b, c);
+        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2$1(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2$1(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b, c);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b, c);
+        }) : _isPlaceholder(c) ? _curry1(function (_c) {
+          return fn(a, b, _c);
+        }) : fn(a, b, c);
+    }
+  };
+}
+
+var _curry3_1 = _curry3$2;
+
+function _isObject$1(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
+
+var _isObject_1 = _isObject$1;
+
+function _has$1(prop, obj) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+var _has_1 = _has$1;
+
+var _curry3$1 = _curry3_1;
+var _has = _has_1;
+/**
+ * Creates a new object with the own properties of the two provided objects. If
+ * a key exists in both objects, the provided function is applied to the key
+ * and the values associated with the key in each object, with the result being
+ * used as the value associated with the key in the returned object.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.19.0
+ * @category Object
+ * @sig ((String, a, a) -> a) -> {a} -> {a} -> {a}
+ * @param {Function} fn
+ * @param {Object} l
+ * @param {Object} r
+ * @return {Object}
+ * @see R.mergeDeepWithKey, R.merge, R.mergeWith
+ * @example
+ *
+ *      let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
+ *      R.mergeWithKey(concatValues,
+ *                     { a: true, thing: 'foo', values: [10, 20] },
+ *                     { b: true, thing: 'bar', values: [15, 35] });
+ *      //=> { a: true, b: true, thing: 'bar', values: [10, 20, 15, 35] }
+ * @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
+ */
+
+var mergeWithKey$1 = /*#__PURE__*/_curry3$1(function mergeWithKey(fn, l, r) {
+  var result = {};
+  var k;
+
+  for (k in l) {
+    if (_has(k, l)) {
+      result[k] = _has(k, r) ? fn(k, l[k], r[k]) : l[k];
+    }
+  }
+
+  for (k in r) {
+    if (_has(k, r) && !_has(k, result)) {
+      result[k] = r[k];
+    }
+  }
+
+  return result;
+});
+
+var mergeWithKey_1 = mergeWithKey$1;
+
+var _curry3 = _curry3_1;
+var _isObject = _isObject_1;
+var mergeWithKey = mergeWithKey_1;
+/**
+ * Creates a new object with the own properties of the two provided objects.
+ * If a key exists in both objects:
+ * - and both associated values are also objects then the values will be
+ *   recursively merged.
+ * - otherwise the provided function is applied to the key and associated values
+ *   using the resulting value as the new value associated with the key.
+ * If a key only exists in one object, the value will be associated with the key
+ * of the resulting object.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.24.0
+ * @category Object
+ * @sig ((String, a, a) -> a) -> {a} -> {a} -> {a}
+ * @param {Function} fn
+ * @param {Object} lObj
+ * @param {Object} rObj
+ * @return {Object}
+ * @see R.mergeWithKey, R.mergeDeepWith
+ * @example
+ *
+ *      let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
+ *      R.mergeDeepWithKey(concatValues,
+ *                         { a: true, c: { thing: 'foo', values: [10, 20] }},
+ *                         { b: true, c: { thing: 'bar', values: [15, 35] }});
+ *      //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
+ */
+
+var mergeDeepWithKey$1 = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
+  return mergeWithKey(function (k, lVal, rVal) {
+    if (_isObject(lVal) && _isObject(rVal)) {
+      return mergeDeepWithKey(fn, lVal, rVal);
+    } else {
+      return fn(k, lVal, rVal);
+    }
+  }, lObj, rObj);
+});
+
+var mergeDeepWithKey_1 = mergeDeepWithKey$1;
+
+var _curry2 = _curry2_1;
+var mergeDeepWithKey = mergeDeepWithKey_1;
+/**
+ * Creates a new object with the own properties of the first object merged with
+ * the own properties of the second object. If a key exists in both objects:
+ * - and both values are objects, the two values will be recursively merged
+ * - otherwise the value from the second object will be used.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.24.0
+ * @category Object
+ * @sig {a} -> {a} -> {a}
+ * @param {Object} lObj
+ * @param {Object} rObj
+ * @return {Object}
+ * @see R.merge, R.mergeDeepLeft, R.mergeDeepWith, R.mergeDeepWithKey
+ * @example
+ *
+ *      R.mergeDeepRight({ name: 'fred', age: 10, contact: { email: 'moo@example.com' }},
+ *                       { age: 40, contact: { email: 'baa@example.com' }});
+ *      //=> { name: 'fred', age: 40, contact: { email: 'baa@example.com' }}
+ */
+
+var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
+  return mergeDeepWithKey(function (k, lVal, rVal) {
+    return rVal;
+  }, lObj, rObj);
+});
+
+var mergeDeepRight_1 = mergeDeepRight;
+
 const {
   colors: {
     text: {
@@ -198,7 +446,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = R__namespace.mergeDeepRight(button, {
+const primary$9 = mergeDeepRight_1(button$1, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -216,7 +464,7 @@ const primary$9 = R__namespace.mergeDeepRight(button, {
     }
   }
 });
-const secondary$4 = R__namespace.mergeDeepRight(primary$9, {
+const secondary$4 = mergeDeepRight_1(primary$9, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -230,7 +478,7 @@ const secondary$4 = R__namespace.mergeDeepRight(primary$9, {
     }
   }
 });
-const danger$5 = R__namespace.mergeDeepRight(primary$9, {
+const danger$5 = mergeDeepRight_1(primary$9, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -283,7 +531,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = R__namespace.mergeDeepRight(button, {
+const primary$8 = mergeDeepRight_1(button$1, {
   typography: {
     color: primaryColor$7
   },
@@ -312,7 +560,7 @@ const primary$8 = R__namespace.mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = R__namespace.mergeDeepRight(primary$8, {
+const secondary$3 = mergeDeepRight_1(primary$8, {
   typography: {
     color: secondaryColor$2
   },
@@ -331,7 +579,7 @@ const secondary$3 = R__namespace.mergeDeepRight(primary$8, {
     }
   }
 });
-const danger$4 = R__namespace.mergeDeepRight(primary$8, {
+const danger$4 = mergeDeepRight_1(primary$8, {
   typography: {
     color: dangerColor$2
   },
@@ -384,7 +632,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = R__namespace.mergeDeepRight(button, {
+const primary$7 = mergeDeepRight_1(button$1, {
   typography: {
     color: primaryColor$6
   },
@@ -403,7 +651,7 @@ const primary$7 = R__namespace.mergeDeepRight(button, {
     }
   }
 });
-const secondary$2 = R__namespace.mergeDeepRight(primary$7, {
+const secondary$2 = mergeDeepRight_1(primary$7, {
   typography: {
     color: secondaryColor$1
   },
@@ -416,7 +664,7 @@ const secondary$2 = R__namespace.mergeDeepRight(primary$7, {
     }
   }
 });
-const danger$3 = R__namespace.mergeDeepRight(primary$7, {
+const danger$3 = mergeDeepRight_1(primary$7, {
   typography: {
     color: dangerColor$1
   },
@@ -465,7 +713,7 @@ const {
   },
   shape: shape$2
 } = edsTokens.tokens;
-const primary$6 = R__namespace.mergeDeepRight(button, {
+const primary$6 = mergeDeepRight_1(button$1, {
   height: shape$2.icon_button.minHeight,
   width: shape$2.icon_button.minWidth,
   typography: {
@@ -484,7 +732,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: {
@@ -515,13 +763,13 @@ 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")
         }
       }
     }
   }
 });
-const secondary$1 = R__namespace.mergeDeepRight(primary$6, {
+const secondary$1 = mergeDeepRight_1(primary$6, {
   typography: {
     color: secondaryColor
   },
@@ -534,7 +782,7 @@ const secondary$1 = R__namespace.mergeDeepRight(primary$6, {
     }
   }
 });
-const danger$2 = R__namespace.mergeDeepRight(primary$6, {
+const danger$2 = mergeDeepRight_1(primary$6, {
   typography: {
     color: dangerColor
   },
@@ -584,7 +832,7 @@ const shorthand = token => {
     return null;
   }
 
-  return `${width} ${style} ${color}`;
+  return "".concat(width, " ").concat(style, " ").concat(color);
 };
 
 const bordersTemplate = border => {
@@ -653,41 +901,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;
@@ -820,7 +1061,7 @@ const useId = (idOverride, type) => {
   const id = idOverride || defaultId;
   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;
@@ -855,7 +1096,7 @@ const useAutoResize = (targetEl, maxHeight) => {
         }
 
         if (newHeight > clientHeight) {
-          targetEl.style.height = `${newHeight}px`;
+          targetEl.style.height = "".concat(newHeight, "px");
         }
       }
     };
@@ -877,7 +1118,7 @@ const useToken = (options, token) => React.useCallback(() => {
   } = options;
 
   if (density === 'compact') {
-    return R.mergeDeepRight(token, token.modes.compact);
+    return mergeDeepRight_1(token, token.modes.compact);
   }
 
   return token;
@@ -996,7 +1237,7 @@ 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.forwardRef(function Button({
   color = 'primary',
@@ -1132,7 +1373,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",
@@ -1149,7 +1390,7 @@ 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)));
+}) => 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,
@@ -1166,7 +1407,7 @@ const Typography = /*#__PURE__*/React.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__*/jsxRuntime.jsx(StyledTypography$1, {
@@ -1321,7 +1562,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return R__namespace.mergeDeepRight(token, token.variants.numeric);
+      return mergeDeepRight_1(token, token.variants.numeric);
 
     default:
       return token;
@@ -1753,12 +1994,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: {
@@ -1943,7 +2184,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = R.mergeDeepRight(input$2, {
+const error$4 = mergeDeepRight_1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1966,7 +2207,7 @@ const error$4 = R.mergeDeepRight(input$2, {
     }
   }
 });
-const warning$4 = R.mergeDeepRight(input$2, {
+const warning$4 = mergeDeepRight_1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -1989,7 +2230,7 @@ const warning$4 = R.mergeDeepRight(input$2, {
     }
   }
 });
-const success$1 = R.mergeDeepRight(input$2, {
+const success$1 = mergeDeepRight_1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2313,7 +2554,7 @@ const Variation$2 = ({
   density
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {
@@ -2395,10 +2636,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({
@@ -2628,7 +2869,7 @@ const Variation = ({
   isDisabled
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {
@@ -2792,7 +3033,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,
@@ -2801,8 +3042,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",
@@ -2815,7 +3056,7 @@ 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"
@@ -2836,14 +3077,14 @@ const Icon$2 = /*#__PURE__*/React.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,
@@ -2859,7 +3100,7 @@ const Icon$2 = /*#__PURE__*/React.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',
@@ -2916,7 +3157,7 @@ const List$2 = /*#__PURE__*/React.forwardRef(function List({
   });
 }); // List.displayName = 'List'
 
-const ListItem$4 = /*#__PURE__*/React.forwardRef(function ListItem({
+const ListItem$2 = /*#__PURE__*/React.forwardRef(function ListItem({
   children,
   ...props
 }, ref) {
@@ -2927,7 +3168,7 @@ const ListItem$4 = /*#__PURE__*/React.forwardRef(function ListItem({
 }); // 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.forwardRef(function Accordion({
@@ -2970,8 +3211,8 @@ const AccordionItem = /*#__PURE__*/React.forwardRef(function AccordionItem({
   };
 
   const Children = React.Children.map(children, (child, childIndex) => {
-    const headerId = `${accordionId}-header-${index + 1}`;
-    const panelId = `${accordionId}-panel-${index + 1}`;
+    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,
@@ -3150,7 +3391,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
@@ -3219,7 +3460,7 @@ const AccordionHeader = /*#__PURE__*/React.forwardRef(function AccordionHeader({
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, `${id}-icon`);
+  }, "".concat(id, "-icon"));
 
   const headerChildren = React.Children.map(children, child => {
     if (typeof child === 'string') {
@@ -3395,8 +3636,8 @@ const TabList = /*#__PURE__*/React.forwardRef(function TabsList({
     const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
     useCombinedRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/React.cloneElement(child, {
-      id: `${tabsId}-tab-${index + 1}`,
-      'aria-controls': `${tabsId}-panel-${index + 1}`,
+      id: "".concat(tabsId, "-tab-").concat(index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
       active: index === activeTab,
       index,
       onClick: () => handleChange(index),
@@ -3583,9 +3824,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
@@ -3610,8 +3851,8 @@ const TabPanels = /*#__PURE__*/React.forwardRef(function TabPanels({
     tabsId
   } = React.useContext(TabsContext);
   const Panels = React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
-    id: `${tabsId}-panel-${index + 1}`,
-    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
+    id: "".concat(tabsId, "-panel-").concat(index + 1),
+    'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
     hidden: activeTab !== index
   }));
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -3632,7 +3873,7 @@ 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));
+})(["", " &: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__*/jsxRuntime.jsx(StyledTabPanel, {
@@ -3717,11 +3958,11 @@ 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));
+}) => cursor, bordersTemplate(primary$3.border));
 const Card$1 = /*#__PURE__*/React.forwardRef(function Card({
   children,
   variant = 'default',
@@ -3743,12 +3984,15 @@ const Card$1 = /*#__PURE__*/React.forwardRef(function Card({
   });
 });
 
+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);
+}) => justifyContent, spacings$8.right, spacings$8.left, spacings$8.top, spacings$8.bottom);
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
   children,
   alignRight = false,
@@ -3769,6 +4013,24 @@ const CardActions = /*#__PURE__*/React.forwardRef(function CardActions({
   });
 });
 
+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 {
   spacings: spacings$6,
   border: border$5
@@ -3776,9 +4038,9 @@ 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%;}"]));
+}) => 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,
@@ -3799,7 +4061,7 @@ 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);
+})(["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
@@ -3830,10 +4092,12 @@ const CardHeaderTitle = /*#__PURE__*/React.forwardRef(function CardHeaderTitle({
 
 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';
@@ -3891,7 +4155,7 @@ const TopBar$1 = /*#__PURE__*/React.forwardRef(function TopBar({
 const StyledActions$1 = styled__default['default'].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
-})(["grid-area:right;text-align:right;"]);
+})(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 const Actions$1 = /*#__PURE__*/React.forwardRef(function Actions({
   children,
   ...props
@@ -3907,7 +4171,7 @@ 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.forwardRef(function Header({
+const Header$2 = /*#__PURE__*/React.forwardRef(function Header({
   children,
   ...props
 }, ref) {
@@ -3935,7 +4199,7 @@ const CustomContent$1 = /*#__PURE__*/React.forwardRef(function 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';
@@ -4425,7 +4689,7 @@ 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;"]);
@@ -4444,7 +4708,7 @@ const SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet({
 
   return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, { ...props,
     id: "side-sheet",
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Header, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         variant: "h2",
         children: title
@@ -4658,7 +4922,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
@@ -4887,6 +5151,13 @@ const search = {
         },
         height: '36px'
       }
+    },
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        right: small$2
+      }
     }
   }
 };
@@ -4900,7 +5171,8 @@ const {
   clickbound,
   entities: {
     icon: icon$1,
-    placeholder
+    placeholder,
+    button
   },
   states: states$2
 } = search;
@@ -4918,12 +5190,12 @@ 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));
+}) => isActive && styled.css(["visibility:visible;"]));
 const Search = /*#__PURE__*/React.forwardRef(function Search({
   onChange,
   defaultValue = '',
@@ -5033,8 +5305,6 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
   }, value, defaultValue);
   const clearButtonProps = {
     isActive: state.isActive,
-    size,
-    role: 'button',
     onClick: e => {
       e.stopPropagation();
 
@@ -5050,10 +5320,12 @@ const Search = /*#__PURE__*/React.forwardRef(function Search({
       size: size
     }), /*#__PURE__*/jsxRuntime.jsx(Input$4, { ...inputProps
     }), /*#__PURE__*/jsxRuntime.jsx(InsideButton, { ...clearButtonProps,
-      "aria-label": "Clear search",
+      "aria-label": 'clear search',
+      title: "clear",
+      variant: "ghost_icon",
       children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
         data: edsIcons.close,
-        size: size
+        size: 16
       })
     })]
   });
@@ -5254,7 +5526,7 @@ 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);
+})(["&::-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,
@@ -5297,7 +5569,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;"]);
@@ -5425,9 +5697,9 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider({
     }
   };
 
-  const inputIdA = `${ariaLabelledby}-thumb-a`;
-  const inputIdB = `${ariaLabelledby}-thumb-b`;
-  const inputId = `${ariaLabelledby}-thumb`;
+  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,
@@ -6296,7 +6568,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress({
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = `translateX(${transform}%)`;
+      barStyle = "translateX(".concat(transform, "%)");
     }
   }
 
@@ -6406,7 +6678,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
 
   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) {
@@ -6648,7 +6920,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;"]);
@@ -6687,7 +6959,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
     }
 
     return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$3, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
         children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
           link: true,
           role: "button",
@@ -6711,7 +6983,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
   jsxRuntime.jsxs(React.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$3, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
       children: child
     }), index !== React.Children.toArray(children).length - 1 && /*#__PURE__*/jsxRuntime.jsx("li", {
       "aria-hidden": true,
@@ -6720,7 +6992,7 @@ const Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs({
         children: "/"
       })
     })]
-  }, `breadcrumb-${index}`));
+  }, "breadcrumb-".concat(index)));
   return /*#__PURE__*/jsxRuntime.jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
@@ -6795,8 +7067,13 @@ const MenuProvider = ({
   };
 
   const setOnClose = onClose => {
+    const onCloseHelper = () => {
+      onClose();
+      setFocusedIndex(-1);
+    };
+
     setState(prevState => ({ ...prevState,
-      onClose
+      onClose: onCloseHelper
     }));
   };
 
@@ -6956,21 +7233,21 @@ 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"
@@ -6999,7 +7276,7 @@ const MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     disabled,
     isFocused
   };
-  return /*#__PURE__*/jsxRuntime.jsx(ListItem$2, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(Item, { ...props,
     ref: useCombinedRefs(ref, el => {
       if (el !== null && isFocused) {
         el.focus();
@@ -7007,7 +7284,7 @@ const MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }),
     onFocus: () => toggleFocus(index),
     onClick: e => {
-      if (!disabled && onClick) {
+      if (onClick) {
         onClick(e);
 
         if (onClose !== null) {
@@ -7022,10 +7299,10 @@ const MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 }));
 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) {
@@ -7035,11 +7312,11 @@ const MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(prop
     index
   } = props;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [index !== 0 && /*#__PURE__*/jsxRuntime.jsx("li", {
+    children: [index !== 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
       children: /*#__PURE__*/jsxRuntime.jsx(Divider, {
         variant: "small"
       })
-    }), title && /*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
+    }), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         group: "navigation",
         variant: "label",
@@ -7049,10 +7326,10 @@ const MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(prop
   });
 }); // 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.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
@@ -7171,6 +7448,12 @@ const MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer({
   useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
+      anchorEl.focus();
+    }
+  });
+  useGlobalKeyPress('Enter', () => {
+    if (open && onClose !== null) {
+      if (window.document.contains(anchorEl)) anchorEl.focus();
     }
   });
   return /*#__PURE__*/jsxRuntime.jsx(MenuList, { ...rest,
@@ -7374,7 +7657,7 @@ 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.forwardRef(function Pagination({
@@ -7425,7 +7708,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
     ...props,
     children: /*#__PURE__*/jsxRuntime.jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: `repeat(${columns}, 48px)`
+        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -7452,13 +7735,13 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
             onPageChange(event, page);
           }
         })
-      }, `list-item ${index}`) : /*#__PURE__*/jsxRuntime.jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      }, "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-${index}`)) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
+      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           variant: "ghost_icon",
           onClick: activePage < pages ? event => {
@@ -7476,12 +7759,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
 
   return withItemIndicator ? /*#__PURE__*/jsxRuntime.jsxs(FlexContainer, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Text, {
-      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
-              ${' - '}
-              ${currentItemLast}
-              ${' of '}
-              ${totalItems}
-              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
+      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
     }), pagination]
   }) : pagination;
 });
@@ -7681,7 +7959,7 @@ const select = {
     }
   }
 };
-const multiSelect = R__namespace.mergeDeepRight(select, {
+const multiSelect = mergeDeepRight_1(select, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -7868,7 +8146,7 @@ const SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect({
             disabled: disabled
           }),
           children: item
-        }, `${item}`))
+        }, "".concat(item)))
       })]
     })
   });
@@ -7980,13 +8258,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,
@@ -8041,7 +8321,7 @@ const CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput({
       }), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -8051,7 +8331,7 @@ const CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput({
       }) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -8180,7 +8460,7 @@ const MultiSelect = /*#__PURE__*/React.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)) {
@@ -8247,7 +8527,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect({
           }), /*#__PURE__*/jsxRuntime.jsx("span", {
             children: item
           })]
-        }, `${item}`))
+        }, "".concat(item)))
       })]
     })
   });
@@ -8385,13 +8665,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",
@@ -8455,7 +8737,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio({
     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,
       children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
@@ -8518,7 +8800,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"
@@ -8536,7 +8818,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"
@@ -8697,8 +8979,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: {
@@ -8747,8 +9029,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: {