@equinor/eds-core-react 0.45.0 → 0.46.0

package/dist/eds-core-react.cjs

@@ -988,6 +988,16 @@ const ButtonBase = styled__default.default.button.withConfig({
   } = states;
   return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, edsUtils.bordersTemplate(hover?.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
 });
+const getElementType$1 = (disabled, customType, href) => {
+  if (disabled) return 'button';
+  if (customType) return customType;
+  if (href) return 'a';
+  return 'button';
+};
+const getButtonType = (href, customElementType) => {
+  if (href || customElementType) return undefined;
+  return 'button';
+};
 const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
   color = 'primary',
   variant = 'contained',
@@ -1004,25 +1014,24 @@ const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
   const token = edsUtils.useToken({
     density
   }, getToken$1(variant, color));
-  const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
-  const type = href || other.as ? undefined : 'button';
-  tabIndex = disabled ? -1 : tabIndex;
+  const as = getElementType$1(disabled, other.as, href);
+  const type = getButtonType(href, other.as);
+  const adjustedTabIndex = disabled ? -1 : tabIndex;
   const buttonProps = {
     ref,
-    as,
     href,
     type,
     disabled,
-    tabIndex,
-    ...other
+    tabIndex: adjustedTabIndex,
+    ...other,
+    as
   };
+  const Container = fullWidth ? InnerFullWidth : Inner;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsx(ButtonBase, {
       ...buttonProps,
-      children: fullWidth ? /*#__PURE__*/jsxRuntime.jsx(InnerFullWidth, {
-        children: children
-      }) : /*#__PURE__*/jsxRuntime.jsx(Inner, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Container, {
         children: children
       })
     })
@@ -1038,7 +1047,6 @@ const {
 } = edsTokens.tokens;
 const group = {
   border: {
-    type: 'border',
     radius: borderRadius$8
   }
 };
@@ -1046,7 +1054,7 @@ const group = {
 const {
   border: border$5
 } = group;
-const radius$1 = border$5.type === 'border' && border$5.radius;
+const radius$1 = border$5.radius;
 const ButtonGroupBase = styled__default.default.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"
@@ -1109,19 +1117,9 @@ const tooltip = {
     radius: borderRadius$7
   },
   entities: {
-    tooltip: {
-      height: spacingXlarge
-    },
     arrow: {
       width: '6px',
-      height: spacingSmall$4,
-      spacings: {
-        bottom: '-6px',
-        top: '-6px',
-        left: '-6px',
-        right: '-6px'
-      }
-    }
+      height: spacingSmall$4}
   },
   spacings: {
     left: spacingSmall$4,
@@ -1878,7 +1876,7 @@ const StyledTableCell$1 = styled__default.default.th.withConfig({
 const CellInner$1 = styled__default.default.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
-})(["display:flex;align-items:center;"]);
+})(["display:flex;align-items:center;height:100%;"]);
 const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   children,
   sort,
@@ -2261,10 +2259,7 @@ const label = {
   },
   spacings: {
     left: comfortable$5.small,
-    right: comfortable$5.small,
-    top: '6px',
-    bottom: '6px'
-  },
+    right: comfortable$5.small},
   states: {
     disabled: {
       typography: {
@@ -2284,7 +2279,7 @@ const Text$3 = styled__default.default.span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-const Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
+const Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
   const {
     label = '',
     meta,
@@ -2322,15 +2317,11 @@ const helperText = {
     comfortable: {
       left: comfortable$4.small,
       right: comfortable$4.small,
-      top: comfortable$4.small,
-      bottom: '6px'
-    },
+      top: comfortable$4.small},
     compact: {
       left: comfortable$4.small,
       right: comfortable$4.small,
-      top: comfortable$4.xx_small,
-      bottom: '6px'
-    }
+      top: comfortable$4.xx_small}
   }
 };
 
@@ -2554,7 +2545,7 @@ const HelperText$1 = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
-const Label$2 = styled__default.default(Label$3).withConfig({
+const Label$1 = styled__default.default(Label$2).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
@@ -2589,7 +2580,7 @@ const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
       ...other,
       ref: ref,
-      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
+      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
         label,
         ...labelProps
       }), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText$1, {
@@ -3045,7 +3036,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
       })]
     }),
     rowsMax,
-    ref: inputRef || textareaRef,
+    ref: ref || inputRef || textareaRef,
     $multiline: multiline,
     ...other
   };
@@ -3056,7 +3047,6 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField({
     disabled
   };
   const containerProps = {
-    ref,
     className,
     style: {
       width: '100%',
@@ -5613,11 +5603,9 @@ const slider = {
           background: indicatorColor,
           states: {
             hover: {
-              background: primaryHover$1
-            },
+              },
             disabled: {
-              background: backgroundBorderDisabled
-            }
+              }
           }
         }
       },
@@ -5669,7 +5657,6 @@ const slider = {
         hover: {
           background: primaryHoverAlt$3,
           border: {
-            type: 'border',
             color: primaryHover$1
           }
         }
@@ -5694,7 +5681,6 @@ const slider = {
     disabled: {
       background: backgroundColorDisabled,
       border: {
-        type: 'border',
         color: backgroundColorMedium$1
       }
     }
@@ -5754,9 +5740,9 @@ const {
 } = slider;
 const track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
 const thumb = styled.css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], edsUtils.bordersTemplate(handle$1.border), handle$1.height, handle$1.width, handle$1.background);
-const thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.type === 'border' && handle$1.states.hover.border.color);
+const thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.color);
 const thumbHoverAndDisabled = styled.css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
-const thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
+const thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.color);
 const StyledSliderInput = styled__default.default.input.attrs(() => ({
   type: 'range'
 })).withConfig({
@@ -5805,10 +5791,9 @@ const {
     output
   }
 } = slider;
-const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-const fakeTrackBgHover = styled.css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
-});
+const encodedTrackColor = encodeURIComponent(track.background);
+const encodedHoverColor = encodeURIComponent(track.states.hover.background);
+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;"], encodedTrackColor);
 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;"]);
 const RangeWrapper = styled__default.default.div.attrs(({
@@ -5829,13 +5814,14 @@ const RangeWrapper = styled__default.default.div.attrs(({
     '--max': $max,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){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>\");&::before,&::after{background:", ";}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $touchNavigation
 }) => $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
   $labelBelow
@@ -5856,13 +5842,14 @@ const Wrapper = styled__default.default.div.attrs(({
     '--value': value,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){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>\");&::after{background:", ";}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $labelBelow
 }) => $labelBelow && styled.css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
 const WrapperGroupLabel = styled__default.default.div.withConfig({
@@ -8454,7 +8441,7 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
       ...containerProps,
-      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...labelProps
       }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, {
         ...selectProps,
@@ -9251,7 +9238,7 @@ const StyledLabel = styled__default.default.label.withConfig({
 }) => $isDisabled ? 'not-allowed' : 'pointer', ({
   $size
 }) => $size === 'small' ? '12px' : '8px');
-const Label$1 = styled__default.default.span.withConfig({
+const Label = styled__default.default.span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
 })(({
@@ -9288,7 +9275,7 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch({
         disabled: disabled,
         ...rest,
         ref: ref
-      }), label && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
+      }), label && /*#__PURE__*/jsxRuntime.jsx(Label, {
         children: label
       })]
     }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
@@ -9461,8 +9448,8 @@ const StyledListItem = styled__default.default.li.withConfig({
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
   return styled.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;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const Label = styled__default.default.span.withConfig({
-  displayName: "Option__Label",
+const AutocompleteOptionLabel = styled__default.default.span.withConfig({
+  displayName: "Option__AutocompleteOptionLabel",
   componentId: "sc-1ly11zu-1"
 })(({
   theme,
@@ -9505,7 +9492,7 @@ function AutocompleteOptionInner(props, ref) {
       }
     }), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: optionComponent
-    }) : /*#__PURE__*/jsxRuntime.jsx(Label, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
       children: value
     })]
@@ -9694,7 +9681,6 @@ function AutocompleteInner(props, ref) {
     return _itemCompare;
   }, [_itemCompare, _itemToKey]);
   const itemToKey = react.useCallback(item => {
-    console.log(`item is`, item);
     return _itemToKey ? _itemToKey(item) : item;
   }, [_itemToKey]);
 
@@ -9706,6 +9692,7 @@ function AutocompleteInner(props, ref) {
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
   const [typedInputValue, setTypedInputValue] = react.useState('');
   const inputRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => inputRef.current);
   const showSelectAll = react.useMemo(() => {
     if (!multiple && allowSelectAll) {
       throw new Error(`allowSelectAll can only be used with multiple`);
@@ -10250,8 +10237,7 @@ function AutocompleteInner(props, ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       style: style,
-      ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...getLabelProps(),
         label: label,
         meta: meta,
@@ -12493,7 +12479,7 @@ exports.EdsProvider = EdsProvider;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
-exports.Label = Label$3;
+exports.Label = Label$2;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;
 exports.ListItem = ListItem$2;

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

@@ -1,23 +1,23 @@
-import { forwardRef, useMemo, useCallback, useState, useRef, useEffect } from 'react';
+import { forwardRef, useMemo, useCallback, useState, useRef, useImperativeHandle, useEffect } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import styled, { css, ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider, css } 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';
+import { useToken, useIsomorphicLayoutEffect, bordersTemplate } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, size, useInteractions, autoUpdate } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import pickBy from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/pickBy.js';
 import mergeWith from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeWith.js';
-import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
+import { HelperText as TextfieldHelperText } from '../InputWrapper/HelperText/HelperText.js';
 
 const Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
@@ -200,7 +200,6 @@ function AutocompleteInner(props, ref) {
     return _itemCompare;
   }, [_itemCompare, _itemToKey]);
   const itemToKey = useCallback(item => {
-    console.log(`item is`, item);
     return _itemToKey ? _itemToKey(item) : item;
   }, [_itemToKey]);
 
@@ -212,6 +211,7 @@ function AutocompleteInner(props, ref) {
   const [_availableItems, setAvailableItems] = useState(inputOptions);
   const [typedInputValue, setTypedInputValue] = useState('');
   const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
   const showSelectAll = useMemo(() => {
     if (!multiple && allowSelectAll) {
       throw new Error(`allowSelectAll can only be used with multiple`);
@@ -756,7 +756,6 @@ function AutocompleteInner(props, ref) {
     children: /*#__PURE__*/jsxs(Container, {
       className: className,
       style: style,
-      ref: ref,
       children: [/*#__PURE__*/jsx(Label, {
         ...getLabelProps(),
         label: label,

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

@@ -16,8 +16,8 @@ const StyledListItem = styled.li.withConfig({
   const 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;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const Label = styled.span.withConfig({
-  displayName: "Option__Label",
+const AutocompleteOptionLabel = styled.span.withConfig({
+  displayName: "Option__AutocompleteOptionLabel",
   componentId: "sc-1ly11zu-1"
 })(({
   theme,
@@ -60,7 +60,7 @@ function AutocompleteOptionInner(props, ref) {
       }
     }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
       children: optionComponent
-    }) : /*#__PURE__*/jsx(Label, {
+    }) : /*#__PURE__*/jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
       children: value
     })]
@@ -68,4 +68,4 @@ function AutocompleteOptionInner(props, ref) {
 }
 const AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
 
-export { AutocompleteOption };
+export { AutocompleteOption, AutocompleteOptionLabel };

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

@@ -1,12 +1,12 @@
 import { forwardRef, Children, isValidElement } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
-import { spacingsTemplate, useToken } from '@equinor/eds-utils';
+import styled, { ThemeProvider, css } from 'styled-components';
+import { useToken, spacingsTemplate } from '@equinor/eds-utils';
 import { enabled } from './Banner.tokens.js';
 import { BannerIcon } from './BannerIcon.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Divider } from '../Divider/Divider.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Paper } from '../Paper/Paper.js';
+import { Divider } from '../Divider/Divider.js';
 
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",

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

@@ -2,8 +2,8 @@ import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../Typography/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
 
 const {
   states,

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider, css } from 'styled-components';
 import { token } from './tokens/index.js';
-import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
+import { useToken, spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { InnerFullWidth } from './InnerFullWidth.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -53,6 +53,16 @@ const ButtonBase = styled.button.withConfig({
   } = states;
   return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, bordersTemplate(hover?.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
+const getElementType = (disabled, customType, href) => {
+  if (disabled) return 'button';
+  if (customType) return customType;
+  if (href) return 'a';
+  return 'button';
+};
+const getButtonType = (href, customElementType) => {
+  if (href || customElementType) return undefined;
+  return 'button';
+};
 const Button = /*#__PURE__*/forwardRef(function Button({
   color = 'primary',
   variant = 'contained',
@@ -69,25 +79,24 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   const token = useToken({
     density
   }, getToken(variant, color));
-  const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
-  const type = href || other.as ? undefined : 'button';
-  tabIndex = disabled ? -1 : tabIndex;
+  const as = getElementType(disabled, other.as, href);
+  const type = getButtonType(href, other.as);
+  const adjustedTabIndex = disabled ? -1 : tabIndex;
   const buttonProps = {
     ref,
-    as,
     href,
     type,
     disabled,
-    tabIndex,
-    ...other
+    tabIndex: adjustedTabIndex,
+    ...other,
+    as
   };
+  const Container = fullWidth ? InnerFullWidth : Inner;
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsx(ButtonBase, {
       ...buttonProps,
-      children: fullWidth ? /*#__PURE__*/jsx(InnerFullWidth, {
-        children: children
-      }) : /*#__PURE__*/jsx(Inner, {
+      children: /*#__PURE__*/jsx(Container, {
         children: children
       })
     })

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

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 const {
   border
 } = group;
-const radius = border.type === 'border' && border.radius;
+const radius = border.radius;
 const ButtonGroupBase = styled.div.withConfig({
   displayName: "ButtonGroup__ButtonGroupBase",
   componentId: "sc-1fn8jon-0"

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

@@ -9,7 +9,6 @@ const {
 } = tokens;
 const group = {
   border: {
-    type: 'border',
     radius: borderRadius
   }
 };

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

@@ -1,30 +1,30 @@
 import { primary, secondary, danger } from './contained.js';
-import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
-import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
+import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './outlined.js';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './ghost.js';
 import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
-import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained_icon.js';
 
 const token = {
   primary: {
     contained: primary,
-    outlined: primary$1,
-    ghost: primary$2,
+    outlined: primary$2,
+    ghost: primary$4,
     ghost_icon: primary$3,
-    contained_icon: primary$4
+    contained_icon: primary$1
   },
   secondary: {
     contained: secondary,
-    outlined: secondary$1,
-    ghost: secondary$2,
+    outlined: secondary$2,
+    ghost: secondary$4,
     ghost_icon: secondary$3,
-    contained_icon: secondary$4
+    contained_icon: secondary$1
   },
   danger: {
     contained: danger,
-    outlined: danger$1,
-    ghost: danger$2,
+    outlined: danger$2,
+    ghost: danger$4,
     ghost_icon: danger$3,
-    contained_icon: danger$4
+    contained_icon: danger$1
   }
 };
 

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

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
 import { checkbox } from './Checkbox.tokens.js';
-import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { useToken, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 

package/dist/esm/components/Datepicker/DatePicker.js

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { Calendar } from './calendars/Calendar.js';
 import { DateField } from './fields/DateField.js';
-import { warning_outlined, calendar } from '@equinor/eds-icons';
+import { calendar, warning_outlined } from '@equinor/eds-icons';
 import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.js';
 import { FieldWrapper } from './fields/FieldWrapper.js';
 import { Toggle } from './fields/Toggle.js';

package/dist/esm/components/Datepicker/DateRangePicker.js

@@ -1,6 +1,6 @@
 import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
 import { RangeCalendar } from './calendars/RangeCalendar.js';
-import { warning_outlined, calendar_date_range } from '@equinor/eds-icons';
+import { calendar_date_range, warning_outlined } from '@equinor/eds-icons';
 import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.js';
 import { FieldWrapper } from './fields/FieldWrapper.js';
 import { Toggle } from './fields/Toggle.js';

package/dist/esm/components/Datepicker/calendars/CalendarCell.js

@@ -3,8 +3,8 @@ import { tokens } from '@equinor/eds-tokens';
 import { useRef, useMemo } from 'react';
 import { useCalendarCell } from 'react-aria';
 import { jsx } from 'react/jsx-runtime';
-import { Typography } from '../../Typography/Typography.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
+import { Typography } from '../../Typography/Typography.js';
 
 const StyledCell = styled(Typography).withConfig({
   displayName: "CalendarCell__StyledCell",

package/dist/esm/components/Datepicker/utils/get-calendar-date.js

@@ -1,4 +1,4 @@
-import { toCalendarDateTime, fromDate, toCalendarDate } from '@internationalized/date';
+import { toCalendarDateTime, toCalendarDate, fromDate } from '@internationalized/date';
 
 const getCalendarDate = (value, timezone, showTimeInput = false) => {
   if (!value) return null;

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

@@ -1,10 +1,10 @@
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, useToken, mergeRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import styled, { ThemeProvider, css } from 'styled-components';
+import { useToken, mergeRefs, useHideBodyScroll, useGlobalKeyPress, bordersTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
 
 const StyledDialog = styled(Paper).attrs({
   'aria-labelledby': 'eds-dialog-title',

package/dist/esm/components/EdsProvider/eds.context.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, createContext } from 'react';
+import { useContext, useState, useEffect, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {