@equinor/eds-core-react 0.29.2-dev14022023 → 0.31.0

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

@@ -4,14 +4,16 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "onExpandedChange", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
     chevronPosition = _ref.chevronPosition,
     _ref$index = _ref.index,
     index = _ref$index === void 0 ? 0 : _ref$index,
     accordionId = _ref.accordionId,
-    isExpanded = _ref.isExpanded,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    onExpandedChange = _ref.onExpandedChange,
     children = _ref.children,
     disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -19,14 +21,20 @@ var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
+  var controlled = onExpandedChange != undefined;
+  var activeExpandedState = controlled ? isExpanded : expanded;
   var toggleExpanded = function toggleExpanded() {
-    setExpanded(!expanded);
+    if (controlled) {
+      onExpandedChange(!isExpanded);
+    } else {
+      setExpanded(!expanded);
+    }
   };
   var Children$1 = Children.map(children, function (child, childIndex) {
     var headerId = "".concat(accordionId, "-header-").concat(index + 1);
     var panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
-      isExpanded: expanded,
+      isExpanded: activeExpandedState,
       toggleExpanded: toggleExpanded,
       id: headerId,
       panelId: panelId,
@@ -35,14 +43,16 @@ var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
       parentIndex: index,
       disabled: disabled
     }) : /*#__PURE__*/cloneElement(child, {
-      hidden: !expanded,
+      hidden: !activeExpandedState,
       id: panelId,
       headerId: headerId
     });
   });
   useEffect(function () {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
+    if (!controlled) {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded, controlled]);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: Children$1

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

@@ -9,6 +9,7 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
 import { Icon } from '../Icon/index.js';
+import { Progress } from '../Progress/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
@@ -19,7 +20,7 @@ import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
 
-var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
+var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight", "optionComponent"];
 var Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -29,7 +30,7 @@ var StyledList = styled(List).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -108,9 +109,12 @@ function AutocompleteInner(props, ref) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$readOnly = props.readOnly,
     readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
     _props$hideClearButto = props.hideClearButton,
     hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
     onOptionsChange = props.onOptionsChange,
+    onInputChange = props.onInputChange,
     selectedOptions = props.selectedOptions,
     multiple = props.multiple,
     _props$initialSelecte = props.initialSelectedOptions,
@@ -128,6 +132,9 @@ function AutocompleteInner(props, ref) {
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
     _props$multiline = props.multiline,
     multiline = _props$multiline === void 0 ? false : _props$multiline,
+    _props$dropdownHeight = props.dropdownHeight,
+    dropdownHeight = _props$dropdownHeight === void 0 ? 300 : _props$dropdownHeight,
+    optionComponent = props.optionComponent,
     other = _objectWithoutProperties(props, _excluded);
   var isControlled = Boolean(selectedOptions);
   var _useState = useState(options),
@@ -231,6 +238,7 @@ function AutocompleteInner(props, ref) {
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
+      onInputChange && onInputChange(inputValue);
       setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
@@ -434,7 +442,10 @@ function AutocompleteInner(props, ref) {
   })), {}, {
     children: /*#__PURE__*/jsxs(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
       'aria-multiselectable': multiple ? 'true' : null,
-      ref: scrollContainer
+      ref: scrollContainer,
+      style: {
+        maxHeight: "".concat(dropdownHeight, "px")
+      }
     }, {
       suppressRefError: true
     })), {}, {
@@ -460,7 +471,8 @@ function AutocompleteInner(props, ref) {
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
           isDisabled: isDisabled,
-          multiline: multiline
+          multiline: multiline,
+          optionComponent: optionComponent === null || optionComponent === void 0 ? void 0 : optionComponent(item, isSelected)
         }, getItemProps(_objectSpread(_objectSpread({}, multiline && {
           ref: rowVirtualizer.measureElement
         }), {}, {
@@ -502,9 +514,11 @@ function AutocompleteInner(props, ref) {
           readOnly: readOnly,
           onFocus: openSelect,
           onClick: openSelect,
-          rightAdornmentsWidth: 24 * 2 + 8 + 8,
+          rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxs(Fragment, {
-            children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
+            children: [loading && /*#__PURE__*/jsx(Progress.Circular, {
+              size: 16
+            }), showClearButton && /*#__PURE__*/jsx(StyledButton, {
               variant: "ghost_icon",
               disabled: disabled || readOnly,
               "aria-label": 'clear options',
@@ -528,6 +542,7 @@ function AutocompleteInner(props, ref) {
           })
         }, other))
       }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+        id: "eds-autocomplete-container",
         children: optionsList
       })]
     })

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var typography = tokens.typography,
   colors = tokens.colors,

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

@@ -3,10 +3,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-var _excluded = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var _excluded = ["value", "optionComponent", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
 var StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
@@ -26,15 +26,16 @@ var Label = styled.span.withConfig({
     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');
 });
-var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref3, ref) {
-  var value = _ref3.value,
-    multiple = _ref3.multiple,
-    isSelected = _ref3.isSelected,
-    isDisabled = _ref3.isDisabled,
-    multiline = _ref3.multiline,
-    _onClick = _ref3.onClick,
-    ariaSelected = _ref3['aria-selected'],
-    other = _objectWithoutProperties(_ref3, _excluded);
+function AutocompleteOptionInner(props, ref) {
+  var value = props.value,
+    optionComponent = props.optionComponent,
+    multiple = props.multiple,
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled,
+    multiline = props.multiline,
+    _onClick = props.onClick,
+    ariaSelected = props['aria-selected'],
+    other = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
@@ -52,11 +53,14 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_re
       onChange: function onChange() {
         return null;
       }
-    }), /*#__PURE__*/jsx(Label, {
+    }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
+      children: optionComponent
+    }) : /*#__PURE__*/jsx(Label, {
       multiline: multiline,
       children: value
     })]
   }));
-});
+}
+var AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
 
 export { AutocompleteOption };

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

@@ -7,13 +7,13 @@ import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-var _excluded = ["children", "maxWidth", "href", "as"];
+var _excluded = ["children", "maxWidth", "forceTooltip", "href", "as"];
 var states = breadcrumbs.states,
   typography = breadcrumbs.typography;
 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:", ";", ""], 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:inline-block;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return css({
     maxWidth: $maxWidth
@@ -22,6 +22,7 @@ var StyledTypography = styled(Typography).withConfig({
 var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
   var children = _ref2.children,
     maxWidth = _ref2.maxWidth,
+    forceTooltip = _ref2.forceTooltip,
     href = _ref2.href,
     as = _ref2.as,
     other = _objectWithoutProperties(_ref2, _excluded);
@@ -29,7 +30,7 @@ var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
     href: href,
     ref: ref
   });
-  var showTooltip = maxWidth > 0;
+  var showTooltip = maxWidth > 0 || forceTooltip;
   var isHrefDefined = href !== undefined;
   var forwardedAs = useMemo(function () {
     return as ? as : isHrefDefined ? 'a' : 'span';

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

@@ -8,18 +8,21 @@ import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children", "collapse"];
+var _excluded = ["children", "collapse", "wrap"];
 var spacings = breadcrumbs.spacings,
   typography = breadcrumbs.typography,
   states = breadcrumbs.states;
 var OrderedList = styled.ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
-})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
+})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;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;"]);
+})(["display:inline-block;min-width:30px;"]);
 var Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
@@ -28,10 +31,12 @@ var Collapsed = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
-var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
-  var children = _ref.children,
-    collapse = _ref.collapse,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref2, ref) {
+  var children = _ref2.children,
+    collapse = _ref2.collapse,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref
   });
@@ -42,8 +47,8 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
   var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
     var handleExpandClick = function handleExpandClick(e) {
       setExpanded(true);
-      var _ref2 = e,
-        key = _ref2.key;
+      var _ref3 = e,
+        key = _ref3.key;
       if (key === 'Enter') {
         setExpanded(true);
       }
@@ -53,6 +58,9 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
     }
     return [allCrumbs[0], /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(ListItem, {
+        style: {
+          minWidth: 'unset'
+        },
         children: /*#__PURE__*/jsx(Collapsed, {
           link: true,
           role: "button",
@@ -91,6 +99,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
   return /*#__PURE__*/jsx("nav", _objectSpread(_objectSpread({}, props), {}, {
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {
+      $wrap: wrap,
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
   }));

package/dist/esm/components/Button/tokens/contained.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors = tokens.colors,
   primaryWhite = _tokens$colors.text.static_icons__primary_white.rgba,

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$clickbounds = tokens.clickbounds,
   clicboundHeight = _tokens$clickbounds.default__base,

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

package/dist/esm/components/Button/tokens/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
 import { button } from './button.js';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors$intera = tokens.colors.interactive,
   primaryColor = _tokens$colors$intera.primary__resting.rgba,

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

@@ -9,6 +9,8 @@ var _tokens$colors$intera = tokens.colors.interactive,
   _tokens$spacings$comf = tokens.spacings.comfortable,
   medium_small = _tokens$spacings$comf.medium_small,
   x_small = _tokens$spacings$comf.x_small,
+  x_large = _tokens$spacings$comf.x_large,
+  xx_large = _tokens$spacings$comf.xx_large,
   _tokens$clickbounds = tokens.clickbounds,
   clicboundSize = _tokens$clickbounds.default__base,
   compactClickboundSize = _tokens$clickbounds.compact__standard,
@@ -16,6 +18,7 @@ var _tokens$colors$intera = tokens.colors.interactive,
 var checkbox = {
   background: primaryColor,
   typography: labelTypography,
+  width: xx_large,
   spacings: {
     bottom: medium_small,
     top: medium_small,
@@ -44,6 +47,7 @@ var checkbox = {
   },
   modes: {
     compact: {
+      width: x_large,
       spacings: {
         bottom: x_small,
         top: x_small,

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

@@ -62,20 +62,23 @@ var Svg = styled.svg.attrs(function (_ref7) {
 var InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref8) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref8) {
   var theme = _ref8.theme;
   return spacingsTemplate(theme.spacings);
 }, function (_ref9) {
-  var disabled = _ref9.disabled;
+  var theme = _ref9.theme;
+  return theme.width;
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'transparent' : checkbox.states.hover.background;
 });
-var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref) {
-  var _ref10$disabled = _ref10.disabled,
-    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
-    indeterminate = _ref10.indeterminate,
-    style = _ref10.style,
-    className = _ref10.className,
-    rest = _objectWithoutProperties(_ref10, _excluded);
+var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref) {
+  var _ref11$disabled = _ref11.disabled,
+    disabled = _ref11$disabled === void 0 ? false : _ref11$disabled,
+    indeterminate = _ref11.indeterminate,
+    style = _ref11.style,
+    className = _ref11.className,
+    rest = _objectWithoutProperties(_ref11, _excluded);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = useToken({

package/dist/esm/components/Dialog/DialogHeader.js

@@ -11,7 +11,7 @@ var StyledDialogHeader = styled.div.withConfig({
   componentId: "sc-mbwcos-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+  return css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
 });
 var StyledDivider = styled(Divider).withConfig({
   displayName: "DialogHeader__StyledDivider",

package/dist/esm/components/Input/Input.js

@@ -19,7 +19,7 @@ var Container = styled.div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));

package/dist/esm/components/Input/Input.tokens.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors = tokens$1.colors,
   background = _tokens$colors.ui.background__light.rgba,

package/dist/esm/components/InputWrapper/InputWrapper.tokens.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$colors = tokens.colors,
   background = _tokens$colors.ui.background__light.rgba,

package/dist/esm/components/Menu/Menu.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useEffect, useMemo } from 'react';
@@ -6,13 +7,13 @@ import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
 import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
+import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["children", "anchorEl", "onClose", "open"],
-  _excluded2 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
+  _excluded2 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
 var border = menu.border;
 var MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
@@ -101,6 +102,8 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
     open = _ref3.open,
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
+    _ref3$matchAnchorWidt = _ref3.matchAnchorWidth,
+    matchAnchorWidth = _ref3$matchAnchorWidt === void 0 ? false : _ref3$matchAnchorWidt,
     onClose = _ref3.onClose,
     style = _ref3.style,
     className = _ref3.className,
@@ -110,13 +113,25 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
   var token = useToken({
     density: density
   }, menu);
+  var floatingMiddleware = [offset(4), flip(), shift({
+    padding: 8
+  })];
+  if (matchAnchorWidth) {
+    floatingMiddleware = [].concat(_toConsumableArray(floatingMiddleware), [size({
+      apply: function apply(_ref4) {
+        var rects = _ref4.rects,
+          elements = _ref4.elements;
+        Object.assign(elements.floating.style, {
+          width: "".concat(rects.reference.width, "px")
+        });
+      }
+    })]);
+  }
   var _useFloating = useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [offset(4), flip(), shift({
-        padding: 8
-      })]
+      middleware: floatingMiddleware
     }),
     x = _useFloating.x,
     y = _useFloating.y,

package/dist/esm/components/Menu/MenuItem.js

@@ -7,7 +7,7 @@ import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "disabled", "index", "onClick", "closeMenuOnClick"];
+var _excluded = ["children", "disabled", "index", "as", "onClick", "closeMenuOnClick"];
 var typography = menu.typography,
   _tokens$entities = menu.entities,
   _tokens$entities$item = _tokens$entities.item.states,
@@ -17,15 +17,15 @@ var typography = menu.typography,
   disabledToken = _tokens$entities$item.disabled,
   icon = _tokens$entities.icon;
 var Item = styled.button.attrs(function (_ref) {
-  var isFocused = _ref.isFocused;
+  var $isFocused = _ref.$isFocused;
   return {
     role: 'menuitem',
-    tabIndex: isFocused ? -1 : 0
+    tabIndex: $isFocused ? -1 : 0
   };
 }).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography), function (_ref2) {
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], typographyTemplate(typography), function (_ref2) {
   var theme = _ref2.theme;
   return spacingsTemplate(theme.entities.item.spacings);
 }, function (_ref3) {
@@ -44,6 +44,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     disabled = _ref5.disabled,
     _ref5$index = _ref5.index,
     index = _ref5$index === void 0 ? 0 : _ref5$index,
+    _ref5$as = _ref5.as,
+    as = _ref5$as === void 0 ? 'button' : _ref5$as,
     _onClick = _ref5.onClick,
     _ref5$closeMenuOnClic = _ref5.closeMenuOnClick,
     closeMenuOnClick = _ref5$closeMenuOnClic === void 0 ? true : _ref5$closeMenuOnClic,
@@ -59,8 +61,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
   };
   var isFocused = index === focusedIndex;
   var props = _objectSpread(_objectSpread({}, rest), {}, {
+    as: as,
     disabled: disabled,
-    isFocused: isFocused
+    $isFocused: isFocused
   });
   return /*#__PURE__*/jsx(Item, _objectSpread(_objectSpread({}, props), {}, {
     ref: mergeRefs(ref, function (el) {

package/dist/esm/components/Radio/Radio.js

@@ -72,23 +72,26 @@ var LabelText = styled.span.withConfig({
 var InputWrapper = styled.span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref9) {
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref9) {
   var theme = _ref9.theme;
   return spacingsTemplate(theme.spacings);
 }, function (_ref10) {
   var disabled = _ref10.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref11) {
-  var disabled = _ref11.disabled;
+  var theme = _ref11.theme;
+  return theme.width;
+}, function (_ref12) {
+  var disabled = _ref12.disabled;
   return disabled ? 'transparent' : comfortable.states.hover.background;
 });
-var Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
-  var label = _ref12.label,
-    _ref12$disabled = _ref12.disabled,
-    disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
-    className = _ref12.className,
-    style = _ref12.style,
-    rest = _objectWithoutProperties(_ref12, _excluded);
+var Radio = /*#__PURE__*/forwardRef(function Radio(_ref13, ref) {
+  var label = _ref13.label,
+    _ref13$disabled = _ref13.disabled,
+    disabled = _ref13$disabled === void 0 ? false : _ref13$disabled,
+    className = _ref13.className,
+    style = _ref13.style,
+    rest = _objectWithoutProperties(_ref13, _excluded);
   var _useEds = useEds(),
     density = _useEds.density;
   var token = useToken({