@equinor/eds-core-react 0.32.3 → 0.33.0

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -18,30 +18,19 @@ var StyledAccordionHeader = styled.div.withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
     disabled = _ref.disabled,
-    parentIndex = _ref.parentIndex;
+    $parentIndex = _ref.$parentIndex;
   var header = theme.entities.header,
     border = theme.border;
-  return css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? css({
-    color: header.states.disabled.typography.color,
-    cursor: 'not-allowed'
-  }) : css({
-    color: header.typography.color,
-    cursor: 'pointer',
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: header.states.hover.background
-      }
-    }
-  }));
+  return css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, bordersTemplate(border), $parentIndex === 0 ? null : 'none', disabled ? css(["color:", ";cursor:not-allowed;"], header.states.disabled.typography.color) : css(["color:", ";cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], header.typography.color, header.states.hover.background));
 });
 var StyledAccordionHeaderButton = styled.button.attrs(function (_ref2) {
-  var panelId = _ref2.panelId,
-    isExpanded = _ref2.isExpanded,
+  var $panelId = _ref2.$panelId,
+    $isExpanded = _ref2.$isExpanded,
     disabled = _ref2.disabled;
   return {
-    'aria-expanded': isExpanded,
-    'aria-controls': panelId,
-    'aria-disabled': isExpanded && disabled,
+    'aria-expanded': $isExpanded,
+    'aria-controls': $panelId,
+    'aria-disabled': $isExpanded && disabled,
     tabIndex: disabled ? -1 : 0,
     disabled: disabled
   };
@@ -66,8 +55,8 @@ var StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
 })(function (_ref4) {
-  var chevronPosition = _ref4.chevronPosition;
-  return css(["flex-shrink:0;", ""], chevronPosition === 'left' ? css({
+  var $chevronPosition = _ref4.$chevronPosition;
+  return css(["flex-shrink:0;", ""], $chevronPosition === 'left' ? css({
     marginRight: '32px'
   }) : css({
     marginLeft: '16px'
@@ -111,7 +100,7 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
   var chevron = /*#__PURE__*/jsx(StyledIcon, {
     data: isExpanded ? chevron_up : chevron_down,
     size: 24,
-    chevronPosition: chevronPosition,
+    $chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
   }, "".concat(id, "-icon"));
   var headerChildren = Children.map(children, function (child) {
@@ -144,14 +133,14 @@ var AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, re
   var newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsxs(StyledAccordionHeader, {
     disabled: disabled,
-    parentIndex: parentIndex,
+    $parentIndex: parentIndex,
     as: headerLevel,
     className: className,
     style: style,
     children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, _objectSpread(_objectSpread({
-      isExpanded: isExpanded,
+      $isExpanded: isExpanded,
       disabled: disabled,
-      panelId: panelId,
+      $panelId: panelId,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: ref,

package/dist/esm/components/Accordion/AccordionHeaderActions.js

@@ -11,7 +11,7 @@ var StyledAccordionHeaderActions = styled.span.withConfig({
 })(function (_ref) {
   var _header$states$active;
   var theme = _ref.theme,
-    isExpanded = _ref.isExpanded,
+    $isExpanded = _ref.$isExpanded,
     disabled = _ref.disabled;
   var header = theme.entities.header;
   return css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? css({
@@ -20,7 +20,7 @@ var StyledAccordionHeaderActions = styled.span.withConfig({
   }) : css({
     color: header.typography.color,
     cursor: 'pointer'
-  }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+  }), $isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 var AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions(_ref2, ref) {
   var isExpanded = _ref2.isExpanded,
@@ -29,7 +29,7 @@ var AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderAct
     rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/jsx(StyledAccordionHeaderActions, _objectSpread(_objectSpread({
     ref: ref,
-    isExpanded: isExpanded,
+    $isExpanded: isExpanded,
     disabled: disabled
   }, rest), {}, {
     children: children

package/dist/esm/components/Accordion/AccordionHeaderTitle.js

@@ -11,10 +11,10 @@ var StyledAccordionHeaderTitle = styled.span.withConfig({
 })(function (_ref) {
   var _header$states$active;
   var theme = _ref.theme,
-    isExpanded = _ref.isExpanded,
-    disabled = _ref.disabled;
+    $isExpanded = _ref.$isExpanded,
+    $disabled = _ref.$disabled;
   var header = theme.entities.header;
-  return css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+  return css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], $isExpanded && !$disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 var AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
   var isExpanded = _ref2.isExpanded,
@@ -23,8 +23,8 @@ var AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle
     rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, _objectSpread(_objectSpread({
     ref: ref,
-    isExpanded: isExpanded,
-    disabled: disabled
+    $isExpanded: isExpanded,
+    $disabled: disabled
   }, rest), {}, {
     children: children
   }));

package/dist/esm/components/Accordion/AccordionPanel.js

@@ -7,10 +7,10 @@ import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["id", "headerId", "hidden", "children"];
 var StyledAccordionPanel = styled.div.attrs(function (_ref) {
-  var headerId = _ref.headerId;
+  var $headerId = _ref.$headerId;
   return {
     role: 'region',
-    'aria-labelledby': headerId
+    'aria-labelledby': $headerId
   };
 }).withConfig({
   displayName: "AccordionPanel__StyledAccordionPanel",
@@ -30,7 +30,7 @@ var AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref3, ref)
     children = _ref3.children,
     props = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsx(StyledAccordionPanel, _objectSpread(_objectSpread({
-    headerId: headerId,
+    $headerId: headerId,
     id: id,
     hidden: hidden
   }, props), {}, {

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -16,6 +16,8 @@ import { bordersTemplate, useToken, useIsomorphicLayoutEffect, useIsInDialog } f
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import pickBy from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeWith.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
@@ -56,6 +58,19 @@ var findIndex = function findIndex(_ref3) {
   }
   return index;
 };
+var isEvent = function isEvent(val, key) {
+  return /^on[A-Z](.*)/.test(key) && typeof val === 'function';
+};
+function mergeEventsFromRight(props1, props2) {
+  var events1 = pickBy(isEvent, props1);
+  var events2 = pickBy(isEvent, props2);
+  return mergeWith(function (event1, event2) {
+    return function () {
+      event1.apply(void 0, arguments);
+      event2.apply(void 0, arguments);
+    };
+  }, events1, events2);
+}
 var findNextIndex = function findNextIndex(_ref4) {
   var index = _ref4.index,
     optionDisabled = _ref4.optionDisabled,
@@ -211,6 +226,7 @@ function AutocompleteInner(props, ref) {
       return item;
     }
     try {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       return item === null || item === void 0 ? void 0 : item.toString();
     } catch (error) {
       throw new Error('Unable to find label, make sure your are using options as documented');
@@ -236,6 +252,9 @@ function AutocompleteInner(props, ref) {
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
+    isItemDisabled: function isItemDisabled(item) {
+      return optionDisabled(item);
+    },
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
@@ -284,6 +303,10 @@ function AutocompleteInner(props, ref) {
       var changes = actionAndChanges.changes,
         type = actionAndChanges.type;
       switch (type) {
+        case useCombobox.stateChangeTypes.InputClick:
+          return _objectSpread(_objectSpread({}, changes), {}, {
+            isOpen: !(disabled || readOnly)
+          });
         case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
         case useCombobox.stateChangeTypes.InputKeyDownHome:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -381,7 +404,6 @@ function AutocompleteInner(props, ref) {
     getInputProps = _useCombobox.getInputProps,
     highlightedIndex = _useCombobox.highlightedIndex,
     getItemProps = _useCombobox.getItemProps,
-    openMenu = _useCombobox.openMenu,
     inputValue = _useCombobox.inputValue,
     resetCombobox = _useCombobox.reset;
   useEffect(function () {
@@ -389,11 +411,6 @@ function AutocompleteInner(props, ref) {
       setSelectedItems(selectedOptions);
     }
   }, [isControlled, selectedOptions, setSelectedItems]);
-  var openSelect = function openSelect() {
-    if (!isOpen && !(disabled || readOnly)) {
-      openMenu();
-    }
-  };
   var _useFloating = useFloating({
       placement: 'bottom-start',
       middleware: [offset(4), flip(), shift({
@@ -481,7 +498,6 @@ function AutocompleteInner(props, ref) {
         }), {}, {
           item: item,
           index: index,
-          disabled: disabled,
           style: _objectSpread({
             transform: "translateY(".concat(virtualItem.start, "px)")
           }, !multiline && {
@@ -491,6 +507,15 @@ function AutocompleteInner(props, ref) {
       })]
     }))
   }));
+  var inputProps = getInputProps(getDropdownProps({
+    preventKeyAction: multiple ? isOpen : undefined,
+    disabled: disabled,
+    onChange: function onChange(e) {
+      var _e$currentTarget;
+      return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
+    }
+  }));
+  var consolidatedEvents = mergeEventsFromRight(other, inputProps);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -502,21 +527,10 @@ function AutocompleteInner(props, ref) {
         meta: meta,
         disabled: disabled
       })), /*#__PURE__*/jsx(Container, {
-        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        getDropdownProps({
-          preventKeyAction: multiple ? isOpen : undefined,
-          disabled: disabled,
-          ref: refs.setReference,
-          onChange: function onChange(e) {
-            var _e$currentTarget;
-            return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
-          }
-        }))), {}, {
+        ref: refs.setReference,
+        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread(_objectSpread({}, inputProps), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
-          onFocus: openSelect,
-          onClick: openSelect,
           rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxs(Fragment, {
             children: [loading && /*#__PURE__*/jsx(Progress.Circular, {
@@ -543,7 +557,7 @@ function AutocompleteInner(props, ref) {
               })
             }))]
           })
-        }, other))
+        }, other), consolidatedEvents))
       }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList

package/dist/esm/components/Autocomplete/Option.js

@@ -6,25 +6,25 @@ import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-var _excluded = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var _excluded = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "highlighted", "onClick", "aria-selected"];
 var StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    highlighted = _ref.highlighted,
-    active = _ref.active,
-    isdisabled = _ref.isdisabled;
-  var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
-  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
+    $highlighted = _ref.$highlighted,
+    $active = _ref.$active,
+    $isdisabled = _ref.$isdisabled;
+  var backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
+  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
 var Label = styled.span.withConfig({
   displayName: "Option__Label",
   componentId: "sc-1ly11zu-1"
 })(function (_ref2) {
   var theme = _ref2.theme,
-    multiline = _ref2.multiline;
-  return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
+    $multiline = _ref2.$multiline;
+  return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden');
 });
 function AutocompleteOptionInner(props, ref) {
   var value = props.value,
@@ -33,16 +33,18 @@ function AutocompleteOptionInner(props, ref) {
     isSelected = props.isSelected,
     isDisabled = props.isDisabled,
     multiline = props.multiline,
+    highlighted = props.highlighted,
     _onClick = props.onClick,
     ariaSelected = props['aria-selected'],
     other = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
     ref: ref,
-    isdisabled: isDisabled ? 'true' : 'false',
+    $isdisabled: isDisabled ? 'true' : 'false',
+    $highlighted: highlighted,
     "aria-hidden": isDisabled,
-    active: !multiple && isSelected ? 'true' : 'false',
+    $active: !multiple && isSelected ? 'true' : 'false',
     onClick: function onClick(e) {
-      return !isDisabled && _onClick(e);
+      !isDisabled && _onClick(e);
     },
     "aria-selected": multiple ? isSelected : ariaSelected
   }, other), {}, {
@@ -56,7 +58,7 @@ function AutocompleteOptionInner(props, ref) {
     }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
       children: optionComponent
     }) : /*#__PURE__*/jsx(Label, {
-      multiline: multiline,
+      $multiline: multiline,
       children: value
     })]
   }));

package/dist/esm/components/Avatar/Avatar.js

@@ -11,15 +11,15 @@ var StyledAvatar = styled.div.withConfig({
   displayName: "Avatar__StyledAvatar",
   componentId: "sc-r7n7on-0"
 })(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), function (_ref) {
-  var size = _ref.size;
-  return css(["height:", "px;width:", "px;"], size, size);
+  var $size = _ref.$size;
+  return css(["height:", "px;width:", "px;"], $size, $size);
 });
 var StyledImage = styled.img.withConfig({
   displayName: "Avatar__StyledImage",
   componentId: "sc-r7n7on-1"
 })(["height:100%;text-align:center;color:transparent;", ";"], function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
+  var $disabled = _ref2.$disabled;
+  return $disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
 });
 var Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
   var _ref3$src = _ref3.src,
@@ -31,14 +31,13 @@ var Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
     rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsx(StyledAvatar, _objectSpread(_objectSpread({
-    size: size,
-    disabled: disabled,
+    $size: size,
     ref: ref
   }, rest), {}, {
     children: /*#__PURE__*/jsx(StyledImage, {
       src: src,
       alt: alt,
-      disabled: disabled
+      $disabled: disabled
     })
   }));
 });

package/dist/esm/components/Banner/Banner.js

@@ -16,8 +16,8 @@ var Content = styled.div.withConfig({
   componentId: "sc-1ju451i-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    hasIcon = _ref.hasIcon;
-  return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
+    $hasIcon = _ref.$hasIcon;
+  return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), $hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
 });
 var NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
@@ -50,7 +50,7 @@ var Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
       elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsx(Content, {
-        hasIcon: hasIcon,
+        $hasIcon: hasIcon,
         children: children
       }), /*#__PURE__*/jsx(NonMarginDivider, {
         color: "light"

package/dist/esm/components/Banner/BannerActions.js

@@ -10,8 +10,8 @@ var StyledBannerActions = styled.div.withConfig({
   componentId: "sc-1o38ds2-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    placement = _ref.placement;
-  return css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, placement === 'bottom' ? '1/-1' : 'auto', placement === 'bottom' && {
+    $placement = _ref.$placement;
+  return css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, $placement === 'bottom' ? '1/-1' : 'auto', $placement === 'bottom' && {
     marginTop: theme.spacings.top,
     marginLeft: '0'
   });
@@ -25,7 +25,7 @@ var BannerActions = /*#__PURE__*/forwardRef(function BannerActions(_ref2, ref) {
     ref: ref
   }, rest);
   return /*#__PURE__*/jsx(StyledBannerActions, _objectSpread(_objectSpread({
-    placement: placement
+    $placement: placement
   }, props), {}, {
     children: children
   }));

package/dist/esm/components/Banner/BannerIcon.js

@@ -15,8 +15,8 @@ var StyledBannerIcon = styled.span.withConfig({
   componentId: "sc-7ow3zc-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    variant = _ref.variant;
-  return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
+    $variant = _ref.$variant;
+  return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), $variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
 });
 var BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon(_ref2, ref) {
   var children = _ref2.children,
@@ -33,7 +33,7 @@ var BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon(_ref2, ref) {
     ref: ref
   }, rest);
   return /*#__PURE__*/jsx(StyledBannerIcon, _objectSpread(_objectSpread({
-    variant: variant
+    $variant: variant
   }, props), {}, {
     children: childrenWithColor
   }));

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -13,7 +13,7 @@ var states = breadcrumbs.states,
 var StyledTypography = styled(Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   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:", ";width:100%;", ""], states.hover.typography.color, typography.color, function (_ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return css({
     maxWidth: $maxWidth

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -15,18 +15,18 @@ var spacings = breadcrumbs.spacings,
 var OrderedList = styled.ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
-})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;flex-wrap:", ";"], function (_ref) {
+})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;flex-wrap:", ";"], function (_ref) {
   var $wrap = _ref.$wrap;
   return $wrap ? 'wrap' : 'nowrap';
 });
 var ListItem = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
-})(["display:inline-block;min-width:30px;"]);
+})(["display:block;min-width:30px;"]);
 var Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
-})(["color:", ";", ""], typography.color, spacingsTemplate(spacings));
+})(["color:", ";", " display:block;line-height:1;"], typography.color, spacingsTemplate(spacings));
 var Collapsed = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
@@ -66,7 +66,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
           role: "button",
           variant: "body_short",
           onClick: handleExpandClick,
-          onKeyPress: handleExpandClick,
+          onKeyDown: handleExpandClick,
           tabIndex: 0,
           children: "\u2026"
         })

package/dist/esm/components/Button/ButtonGroup/ButtonGroup.js

@@ -12,8 +12,8 @@ var ButtonGroupBase = styled.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
 })(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius);
+  var $vertical = _ref.$vertical;
+  return $vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius);
 });
 var ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
   var children = _ref2.children,
@@ -21,7 +21,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread({
     ref: ref,
-    vertical: vertical
+    $vertical: vertical
   }, rest);
   return /*#__PURE__*/jsx(ButtonGroupBase, _objectSpread(_objectSpread({
     role: "group"

package/dist/esm/components/Card/Card.js

@@ -14,8 +14,8 @@ var StyledCard = styled(Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
 })(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], function (_ref) {
-  var background = _ref.background;
-  return background;
+  var $background = _ref.$background;
+  return $background;
 }, bordersTemplate(primary.border));
 var Card = /*#__PURE__*/forwardRef(function Card(_ref2, ref) {
   var children = _ref2.children,
@@ -28,7 +28,7 @@ var Card = /*#__PURE__*/forwardRef(function Card(_ref2, ref) {
   var token = Card_tokens[cardVariant];
   var props = _objectSpread({
     ref: ref,
-    background: token.background
+    $background: token.background
   }, rest);
   return /*#__PURE__*/jsx(StyledCard, _objectSpread(_objectSpread({
     elevation: elevation

package/dist/esm/components/Card/CardActions.js

@@ -12,8 +12,8 @@ var StyledCardActions = styled.div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
 })(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], function (_ref) {
-  var justifyContent = _ref.justifyContent;
-  return justifyContent;
+  var $justifyContent = _ref.$justifyContent;
+  return $justifyContent;
 }, spacings.right, spacings.left, spacings.top, spacings.bottom);
 var CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
   var children = _ref2.children,
@@ -22,10 +22,10 @@ var CardActions = /*#__PURE__*/forwardRef(function CardActions(_ref2, ref) {
     _ref2$meta = _ref2.meta,
     meta = _ref2$meta === void 0 ? '' : _ref2$meta,
     rest = _objectWithoutProperties(_ref2, _excluded);
-  var justifyContent = alignRight ? 'flex-end' : 'flex-start';
+  var $justifyContent = alignRight ? 'flex-end' : 'flex-start';
   var props = _objectSpread({
     ref: ref,
-    justifyContent: justifyContent
+    $justifyContent: $justifyContent
   }, rest);
   return /*#__PURE__*/jsxs(StyledCardActions, _objectSpread(_objectSpread({}, props), {}, {
     children: [children, meta !== '' && /*#__PURE__*/jsx(Typography, {

package/dist/esm/components/Card/CardMedia.js

@@ -12,8 +12,8 @@ var StyledCardMedia = styled.div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
 })(["display:flex;width:auto;", ""], function (_ref) {
-  var fullWidth = _ref.fullWidth;
-  return fullWidth ? 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.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left);
+  var $fullWidth = _ref.$fullWidth;
+  return $fullWidth ? 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.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings.right, spacings.left, spacings.top, spacings.right, spacings.left, spacings.right, spacings.bottom, spacings.left);
 });
 var CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
   var children = _ref2.children,
@@ -22,7 +22,7 @@ var CardMedia = /*#__PURE__*/forwardRef(function CardMedia(_ref2, ref) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    fullWidth: fullWidth
+    $fullWidth: fullWidth
   });
   return /*#__PURE__*/jsx(StyledCardMedia, _objectSpread(_objectSpread({}, props), {}, {
     children: children

package/dist/esm/components/Checkbox/Checkbox.js

@@ -12,8 +12,8 @@ var StyledLabel = styled.label.withConfig({
   displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
 })(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
+  var $disabled = _ref.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 });
 var LabelText = styled.span.withConfig({
   displayName: "Checkbox__LabelText",
@@ -28,7 +28,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
     style = _ref2.style,
     rest = _objectWithoutProperties(_ref2, _excluded);
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
-    disabled: disabled,
+    $disabled: disabled,
     className: className,
     style: style,
     children: [/*#__PURE__*/jsx(CheckboxInput, _objectSpread(_objectSpread({}, rest), {}, {