@equinor/eds-core-react 0.22.0 → 0.23.0

package/dist/eds-core-react.cjs.js

@@ -82,29 +82,29 @@ const {
 } = edsTokens.tokens;
 const button = {
   background: 'transparent',
-  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
+  height: `var(--eds_button__height, ${buttonHeight})`,
   typography: { ...buttonTypography,
     textAlign: 'center',
-    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
+    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
   },
   border: {
     type: 'border',
-    width: "var(--eds_button__border_width, 1px)",
+    width: `var(--eds_button__border_width, 1px)`,
     color: 'transparent',
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
+    radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
     style: 'solid'
   },
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: "var(--eds_button__padding_x, ".concat(medium$6, ")"),
-    right: "var(--eds_button__padding_x, ".concat(medium$6, ")")
+    left: `var(--eds_button__padding_x, ${medium$6})`,
+    right: `var(--eds_button__padding_x, ${medium$6})`
   },
   clickbound: {
     height: clicboundHeight$2,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: `${(parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1}px`,
       left: '0'
     }
   },
@@ -120,7 +120,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$2, ")"),
+        radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
         style: 'solid'
       }
     },
@@ -149,7 +149,7 @@ const button = {
   },
   modes: {
     compact: {
-      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -158,7 +158,7 @@ const button = {
         height: compactClickboundHeight$2,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: `${(parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1}px`,
           left: '0'
         }
       }
@@ -386,6 +386,8 @@ var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
   }, lObj, rObj);
 });
 
+var mergeDeepRight$1 = mergeDeepRight;
+
 const {
   colors: {
     text: {
@@ -420,7 +422,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$a = mergeDeepRight(button, {
+const primary$a = mergeDeepRight$1(button, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -430,7 +432,7 @@ const primary$a = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor$8,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius$1, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius$1})`
   },
   states: {
     hover: {
@@ -438,7 +440,7 @@ const primary$a = mergeDeepRight(button, {
     }
   }
 });
-const secondary$5 = mergeDeepRight(primary$a, {
+const secondary$5 = mergeDeepRight$1(primary$a, {
   background: secondaryColor$3,
   border: {
     color: secondaryColor$3
@@ -452,7 +454,7 @@ const secondary$5 = mergeDeepRight(primary$a, {
     }
   }
 });
-const danger$6 = mergeDeepRight(primary$a, {
+const danger$6 = mergeDeepRight$1(primary$a, {
   background: dangerColor$3,
   border: {
     color: dangerColor$3
@@ -505,7 +507,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$9 = mergeDeepRight(button, {
+const primary$9 = mergeDeepRight$1(button, {
   typography: {
     color: primaryColor$7
   },
@@ -514,7 +516,7 @@ const primary$9 = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor$7,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {
@@ -534,7 +536,7 @@ const primary$9 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$4 = mergeDeepRight(primary$9, {
+const secondary$4 = mergeDeepRight$1(primary$9, {
   typography: {
     color: secondaryColor$2
   },
@@ -553,7 +555,7 @@ const secondary$4 = mergeDeepRight(primary$9, {
     }
   }
 });
-const danger$5 = mergeDeepRight(primary$9, {
+const danger$5 = mergeDeepRight$1(primary$9, {
   typography: {
     color: dangerColor$2
   },
@@ -606,7 +608,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$8 = mergeDeepRight(button, {
+const primary$8 = mergeDeepRight$1(button, {
   typography: {
     color: primaryColor$6
   },
@@ -625,7 +627,7 @@ const primary$8 = mergeDeepRight(button, {
     }
   }
 });
-const secondary$3 = mergeDeepRight(primary$8, {
+const secondary$3 = mergeDeepRight$1(primary$8, {
   typography: {
     color: secondaryColor$1
   },
@@ -638,7 +640,7 @@ const secondary$3 = mergeDeepRight(primary$8, {
     }
   }
 });
-const danger$4 = mergeDeepRight(primary$8, {
+const danger$4 = mergeDeepRight$1(primary$8, {
   typography: {
     color: dangerColor$1
   },
@@ -692,7 +694,7 @@ const {
     }
   }
 } = edsTokens.tokens;
-const primary$7 = mergeDeepRight(button, {
+const primary$7 = mergeDeepRight$1(button, {
   height: shape$4.icon_button.minHeight,
   width: shape$4.icon_button.minWidth,
   typography: {
@@ -711,7 +713,7 @@ const primary$7 = mergeDeepRight(button, {
     width: clicboundHeight$1,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2, "px")
+      left: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -730,7 +732,7 @@ const primary$7 = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth$8), "px")
+        offset: `-${parseInt(focusOutlineWidth$8)}px`
       }
     }
   },
@@ -742,13 +744,13 @@ const primary$7 = mergeDeepRight(button, {
         width: compactClickboundHeight$1,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 });
-const secondary$2 = mergeDeepRight(primary$7, {
+const secondary$2 = mergeDeepRight$1(primary$7, {
   typography: {
     color: secondaryColor
   },
@@ -761,7 +763,7 @@ const secondary$2 = mergeDeepRight(primary$7, {
     }
   }
 });
-const danger$3 = mergeDeepRight(primary$7, {
+const danger$3 = mergeDeepRight$1(primary$7, {
   typography: {
     color: dangerColor
   },
@@ -797,7 +799,7 @@ const contained_icon = {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
     }
   },
   states: {
@@ -816,15 +818,15 @@ const contained_icon = {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }
   }
 };
-const primary$6 = mergeDeepRight(primary$a, contained_icon);
-const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
-const danger$2 = mergeDeepRight(danger$6, contained_icon);
+const primary$6 = mergeDeepRight$1(primary$a, contained_icon);
+const secondary$1 = mergeDeepRight$1(secondary$5, contained_icon);
+const danger$2 = mergeDeepRight$1(danger$6, contained_icon);
 
 const token$5 = {
   primary: {
@@ -1211,7 +1213,7 @@ const toVariantName = function (variant) {
   let bold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   let italic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let link = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  return "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : '');
+  return `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
 };
 
 const StyledTypography$1 = styled__default["default"].p.withConfig({
@@ -1220,9 +1222,9 @@ const StyledTypography$1 = styled__default["default"].p.withConfig({
 })(["", " ", " ", " ", ""], _ref => {
   let {
     typography,
-    link
+    $link
   } = _ref;
-  return edsUtils.typographyTemplate(typography, link);
+  return edsUtils.typographyTemplate(typography, $link);
 }, _ref2 => {
   let {
     color
@@ -1239,9 +1241,9 @@ const StyledTypography$1 = styled__default["default"].p.withConfig({
   );
 }, _ref4 => {
   let {
-    link: link$1
+    $link
   } = _ref4;
-  return link$1 && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline));
+  return $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline));
 });
 const Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref) {
   let {
@@ -1260,7 +1262,7 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref)
   const typography = findTypography(variantName, group);
 
   if (typeof typography === 'undefined') {
-    throw new Error("Typography variant not found for variant \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(group || '', "\""));
+    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledTypography$1, {
@@ -1268,7 +1270,7 @@ const Typography = /*#__PURE__*/react.forwardRef(function Typography(_ref5, ref)
     typography: { ...typography,
       ...token
     },
-    link: link,
+    $link: link,
     ref: ref,
     ...other,
     children: children
@@ -1346,12 +1348,12 @@ const tableCell = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$5, ")")
+    left: `var(--eds_table__cell__padding_x, ${medium$5})`,
+    right: `var(--eds_table__cell__padding_x, ${medium$5})`
   },
   typography: { ...cellTypography$1,
     color: typographyColor$1,
-    fontSize: "var(--eds_table__font_size, ".concat(cellTypography$1.fontSize, ")")
+    fontSize: `var(--eds_table__font_size, ${cellTypography$1.fontSize})`
   },
   states: {
     active: {
@@ -1397,8 +1399,8 @@ const tableCell = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$5, ")")
+        left: `var(--eds_table__cell__padding_x_compact, ${medium$5})`,
+        right: `var(--eds_table__cell__padding_x_compact, ${medium$5})`
       }
     }
   },
@@ -1425,7 +1427,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight(token, token.variants.numeric);
+      return mergeDeepRight$1(token, token.variants.numeric);
 
     default:
       return token;
@@ -1572,7 +1574,7 @@ const token$4 = {
   },
   typography: { ...cellTypography,
     color: typographyColor,
-    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
+    fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
   },
   border: {
     type: 'bordergroup',
@@ -1586,8 +1588,8 @@ const token$4 = {
   spacings: {
     top: 'var(--eds_table__cell__padding_y, 0)',
     bottom: 'var(--eds_table__cell__padding_y, 0)',
-    left: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")"),
-    right: "var(--eds_table__cell__padding_x, ".concat(medium$4, ")")
+    left: `var(--eds_table__cell__padding_x, ${medium$4})`,
+    right: `var(--eds_table__cell__padding_x, ${medium$4})`
   },
   states: {
     active: {
@@ -1632,8 +1634,8 @@ const token$4 = {
       spacings: {
         top: 'var(--eds_table__cell__padding_y_compact, 0)',
         bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
-        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")"),
-        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium$4, ")")
+        left: `var(--eds_table__cell__padding_x_compact, ${medium$4})`,
+        right: `var(--eds_table__cell__padding_x_compact, ${medium$4})`
       }
     }
   }
@@ -2070,7 +2072,7 @@ const input$2 = {
     }
   }
 };
-const error$4 = mergeDeepRight(input$2, {
+const error$4 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2093,7 +2095,7 @@ const error$4 = mergeDeepRight(input$2, {
     }
   }
 });
-const warning$4 = mergeDeepRight(input$2, {
+const warning$4 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2116,7 +2118,7 @@ const warning$4 = mergeDeepRight(input$2, {
     }
   }
 });
-const success$1 = mergeDeepRight(input$2, {
+const success$1 = mergeDeepRight$1(input$2, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -2446,7 +2448,7 @@ const Variation$2 = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
   const {
@@ -2532,10 +2534,10 @@ const Variation$1 = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
-  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 && edsUtils.outlineTemplate(token.states.focus.outline));
+  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 && edsUtils.outlineTemplate(token.states.focus.outline));
 };
 
 const StrippedInput = styled__default["default"](Input$4).withConfig({
@@ -2782,7 +2784,7 @@ const Variation = _ref => {
   } = _ref;
 
   if (!variant) {
-    return "";
+    return ``;
   }
 
   const {
@@ -2955,7 +2957,7 @@ const transform = _ref => {
   let {
     rotation
   } = _ref;
-  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+  return rotation ? `transform: rotate(${rotation}deg)` : '';
 };
 
 const StyledSvg = styled__default["default"].svg.attrs(_ref2 => {
@@ -2967,8 +2969,8 @@ const StyledSvg = styled__default["default"].svg.attrs(_ref2 => {
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: "".concat(height, "px"),
-    width: "".concat(width, "px"),
+    height: `${height}px`,
+    width: `${width}px`,
     fill
   };
 }).withConfig({
@@ -2984,7 +2986,7 @@ const StyledPath$2 = styled__default["default"].path.attrs(_ref3 => {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: size / height !== 1 ? `scale(${size / height})` : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -3033,7 +3035,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   } = findIcon(name, data, size);
 
   if (typeof icon === 'undefined') {
-    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
+    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
   }
 
   const height = size ? size : parseInt(icon.width);
@@ -3042,7 +3044,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
     height,
     width,
     fill: color,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
+    viewBox: `0 0 ${width} ${height}`,
     rotation,
     name,
     'aria-hidden': true
@@ -3056,7 +3058,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   let titleId = '';
 
   if (title) {
-    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
+    titleId = `${icon.prefix}-${icon.name}-${count}`;
     svgProps = { ...svgProps,
       title,
       role: 'img',
@@ -3307,8 +3309,8 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref,
   };
 
   const Children = react.Children.map(children, (child, childIndex) => {
-    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
-    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    const headerId = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,
@@ -3482,11 +3484,11 @@ const StyledIcon$1 = styled__default["default"](Icon$1).withConfig({
   let {
     chevronPosition
   } = _ref4;
-  return chevronPosition === 'left' ? {
+  return styled.css(["flex-shrink:0;", ""], chevronPosition === 'left' ? styled.css({
     marginRight: '32px'
-  } : {
+  }) : styled.css({
     marginLeft: '16px'
-  };
+  }));
 });
 const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_ref5, ref) {
   let {
@@ -3535,7 +3537,7 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, "".concat(id, "-icon"));
+  }, `${id}-icon`);
 
   const headerChildren = react.Children.map(children, child => {
     if (typeof child === 'string') {
@@ -3761,7 +3763,7 @@ const token$1 = {
           outline: {
             type: 'outline',
             width: focusOutlineWidth$5,
-            offset: "-".concat(parseInt(focusOutlineWidth$5), "px"),
+            offset: `-${parseInt(focusOutlineWidth$5)}px`,
             style: 'dashed',
             color: focusOutlineColor$5
           }
@@ -3934,8 +3936,8 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabsList(_ref3, ref) {
   const Tabs = react.Children.map(children, (child, index) => {
     const tabRef = index === activeTab ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/react.cloneElement(child, {
-      id: "".concat(tabsId, "-tab-").concat(index + 1),
-      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
+      id: `${tabsId}-tab-${index + 1}`,
+      'aria-controls': `${tabsId}-panel-${index + 1}`,
       active: index === activeTab,
       index,
       onClick: () => handleChange(index),
@@ -4030,8 +4032,8 @@ const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels(_ref, ref) {
     tabsId
   } = 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),
+    id: `${tabsId}-panel-${index + 1}`,
+    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
     hidden: activeTab !== index
   }));
   return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5983,7 +5985,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='".concat(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='${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;"]);
@@ -6160,9 +6162,9 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
 
   if (rest['id']) {
     const overrideId = rest['id'];
-    inputIdA = "".concat(overrideId, "-thumb-a");
-    inputIdB = "".concat(overrideId, "-thumb-b");
-    inputId = "".concat(overrideId, "-thumb");
+    inputIdA = `${overrideId}-thumb-a`;
+    inputIdB = `${overrideId}-thumb-b`;
+    inputId = `${overrideId}-thumb`;
   }
 
   const getAriaLabelledby = react.useCallback(() => {
@@ -6424,8 +6426,8 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
 
   if (arrowRef.current) {
     Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
       [staticSide]: '-6px',
@@ -6802,8 +6804,8 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
 
   if (arrowRef.current) {
     Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
       right: '',
       bottom: '',
       [staticSide]: '-6px',
@@ -7258,7 +7260,7 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = "translateX(".concat(transform, "%)");
+      barStyle = `translateX(${transform}%)`;
     }
   }
 
@@ -7280,7 +7282,7 @@ const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress(_re
   }, [value, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7399,7 +7401,7 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
 
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
+    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
     props['aria-valuenow'] = progress;
 
     if (value !== undefined) {
@@ -7424,7 +7426,7 @@ const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress
   }, [progress, variant]);
 
   const getProgressFormatted = () => {
-    return "Loading ".concat(srProgress, "%");
+    return `Loading ${srProgress}%`;
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -7744,7 +7746,7 @@ const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, r
         children: "/"
       })
     })]
-  }, "breadcrumb-".concat(index)));
+  }, `breadcrumb-${index}`));
   return /*#__PURE__*/jsxRuntime.jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
@@ -7762,10 +7764,10 @@ const StyledTypography = styled__default["default"](Typography).withConfig({
   componentId: "sc-10nvwte-0"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$5.color, _ref => {
   let {
-    maxWidth
+    $maxWidth
   } = _ref;
   return styled.css({
-    maxWidth
+    maxWidth: $maxWidth
   });
 });
 const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
@@ -7778,8 +7780,7 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref)
   } = _ref2;
   const props = { ...other,
     href,
-    ref,
-    maxWidth
+    ref
   };
   const showTooltip = maxWidth > 0;
   const isHrefDefined = href !== undefined;
@@ -7789,6 +7790,7 @@ const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref)
     link: isHrefDefined,
     forwardedAs: forwardedAs,
     variant: "body_short",
+    $maxWidth: maxWidth,
     ...props,
     children: children
   });
@@ -8520,7 +8522,7 @@ const Text = styled__default["default"](Typography).withConfig({
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
+  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
 }
 
 const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref) {
@@ -8572,7 +8574,7 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
     ...props,
     children: /*#__PURE__*/jsxRuntime.jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
+        gridTemplateColumns: `repeat(${columns}, 48px)`
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -8590,7 +8592,7 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
       /*#__PURE__*/
       // eslint-disable-next-line react/no-array-index-key
       jsxRuntime.jsx(ListItem, {
-        children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, { ...page,
+        children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, {
           "aria-label": getAriaLabel(page, activePage),
           "aria-current": activePage,
           page: page,
@@ -8599,13 +8601,13 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
             onPageChange(event, page);
           }
         })
-      }, "list-item ".concat(index)) : /*#__PURE__*/jsxRuntime.jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      }, `list-item ${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, {
+      }, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
         children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           variant: "ghost_icon",
           onClick: activePage < pages ? event => {
@@ -8623,7 +8625,12 @@ const Pagination = /*#__PURE__*/react.forwardRef(function Pagination(_ref2, ref)
 
   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')
+      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
+              ${' - '}
+              ${currentItemLast}
+              ${' of '}
+              ${totalItems}
+              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
     }), pagination]
   }) : pagination;
 });
@@ -8832,7 +8839,7 @@ const select = {
     }
   }
 };
-const multiSelect$1 = mergeDeepRight(select, {
+const multiSelect$1 = mergeDeepRight$1(select, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -9030,7 +9037,7 @@ const SingleSelect = /*#__PURE__*/react.forwardRef(function SingleSelect(_ref2,
             disabled: disabled
           }),
           children: item
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });
@@ -9242,7 +9249,7 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
       }), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -9252,7 +9259,7 @@ const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput(_ref1
       }) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
@@ -9390,7 +9397,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
       }
     }
   });
-  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
+  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -9463,7 +9470,7 @@ const MultiSelect = /*#__PURE__*/react.forwardRef(function MultiSelect(_ref2, re
           }), /*#__PURE__*/jsxRuntime.jsx("span", {
             children: item
           })]
-        }, "".concat(item)))
+        }, `${item}`))
       })]
     })
   });
@@ -9721,7 +9728,7 @@ const Radio = /*#__PURE__*/react.forwardRef(function Radio(_ref12, ref) {
     return /*#__PURE__*/jsxRuntime.jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
@@ -10006,8 +10013,8 @@ const comfortable = {
     height: clickbounds.default__base,
     width: clickbounds.default__base,
     offset: {
-      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
-      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
+      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
+      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
     }
   },
   entities: {
@@ -10056,8 +10063,8 @@ const comfortable = {
         height: clickbounds.compact__standard,
         width: clickbounds.compact__standard,
         offset: {
-          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
-          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
+          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
+          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
         }
       },
       entities: {
@@ -10255,7 +10262,7 @@ const selectTokens = {
     }
   }
 };
-const multiSelect = mergeDeepRight(selectTokens, {
+const multiSelect = mergeDeepRight$1(selectTokens, {
   spacings: {
     top: '0',
     bottom: '0',
@@ -10634,7 +10641,7 @@ function AutocompleteInner(props, ref) {
   }
 
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
     comboBoxProps = { ...comboBoxProps,
       selectedItem: null,
       stateReducer: (state, actionAndChanges) => {
@@ -10731,10 +10738,10 @@ function AutocompleteInner(props, ref) {
           availableHeight,
           elements
         } = _ref10;
-        const anchorWidth = "".concat(rects.reference.width, "px");
+        const anchorWidth = `${rects.reference.width}px`;
         Object.assign(elements.floating.style, {
-          width: "".concat(autoWidth ? anchorWidth : 'auto'),
-          maxHeight: "".concat(availableHeight, "px")
+          width: `${autoWidth ? anchorWidth : 'auto'}`,
+          maxHeight: `${availableHeight}px`
         });
       },