@equinor/eds-core-react 0.26.0 → 0.27.0

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -3,23 +3,23 @@ import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 var _tokens$typography = tokens.typography,
-    _tokens$typography$ta = _tokens$typography.table,
-    cellTypography = _tokens$typography$ta.cell_text,
-    cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
-    compactTypography = _tokens$typography._modes.compact,
-    _tokens$colors = tokens.colors,
-    typographyColor = _tokens$colors.text.static_icons__default.rgba,
-    borderColor = _tokens$colors.ui.background__medium.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    backgroundColor = _tokens$colors$intera.table__cell__fill_resting.rgba,
-    hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
-    activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba,
-    errorColor = _tokens$colors$intera.danger__highlight.rgba,
-    primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
-    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-    disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
-    focusColor = _tokens$colors$intera.focus.rgba,
-    medium = tokens.spacings.comfortable.medium;
+  _tokens$typography$ta = _tokens$typography.table,
+  cellTypography = _tokens$typography$ta.cell_text,
+  cellNumericTypography = _tokens$typography$ta.cell_numeric_monospaced,
+  compactTypography = _tokens$typography._modes.compact,
+  _tokens$colors = tokens.colors,
+  typographyColor = _tokens$colors.text.static_icons__default.rgba,
+  borderColor = _tokens$colors.ui.background__medium.rgba,
+  _tokens$colors$intera = _tokens$colors.interactive,
+  backgroundColor = _tokens$colors$intera.table__cell__fill_resting.rgba,
+  hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
+  activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba,
+  errorColor = _tokens$colors$intera.danger__highlight.rgba,
+  primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
+  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+  disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
+  focusColor = _tokens$colors$intera.focus.rgba,
+  medium = tokens.spacings.comfortable.medium;
 var tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
@@ -117,7 +117,6 @@ var applyVariant = function applyVariant(variant, token) {
   switch (variant) {
     case 'numeric':
       return mergeDeepRight(token, token.variants.numeric);
-
     default:
       return token;
   }

package/dist/esm/components/Table/Head/Head.js

@@ -14,9 +14,8 @@ var StyledTableHead = styled.thead.withConfig({
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
 var Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
   var children = _ref.children,
-      sticky = _ref.sticky,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    sticky = _ref.sticky,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',

package/dist/esm/components/Table/Head/Head.tokens.js

@@ -1,8 +1,8 @@
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$colors = tokens.colors,
-    borderColor = _tokens$colors.ui.background__medium.rgba,
-    backgroundColor = _tokens$colors.interactive.table__header__fill_resting.rgba;
+  borderColor = _tokens$colors.ui.background__medium.rgba,
+  backgroundColor = _tokens$colors.interactive.table__header__fill_resting.rgba;
 var token = {
   background: backgroundColor,
   border: {

package/dist/esm/components/Table/HeaderCell/HeaderCell.js

@@ -13,24 +13,21 @@ var StyledTableCell = styled.th.withConfig({
   componentId: "sc-18w2o3a-0"
 })(function (props) {
   var theme = props.theme,
-      sticky = props.sticky;
+    sticky = props.sticky;
   var background = theme.background,
-      height = theme.height,
-      typography = theme.typography,
-      spacings = theme.spacings;
+    height = theme.height,
+    typography = theme.typography,
+    spacings = theme.spacings;
   var activeToken = theme.states.active;
   var ariaSort = props['aria-sort'];
   var sortStylingHover = css({});
   var sortStylingActive = css({});
-
   if (ariaSort) {
     sortStylingHover = css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
   }
-
   if (ariaSort && ariaSort !== 'none') {
     sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
-
   return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 var CellInner = styled.div.withConfig({
@@ -39,12 +36,10 @@ var CellInner = styled.div.withConfig({
 })(["display:flex;align-items:center;"]);
 var TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
-      sort = _ref.sort,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    sort = _ref.sort,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token$1 = useToken({
     density: density
   }, token);

package/dist/esm/components/Table/HeaderCell/HeaderCell.tokens.js

@@ -2,20 +2,20 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$typography = tokens.typography,
-    cellTypography = _tokens$typography.table.cell_header,
-    compactTypography = _tokens$typography._modes.compact,
-    _tokens$colors = tokens.colors,
-    typographyColor = _tokens$colors.text.static_icons__default.rgba,
-    borderColor = _tokens$colors.ui.background__medium.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    backgroundColor = _tokens$colors$intera.table__header__fill_resting.rgba,
-    hoverBackgroundColor = _tokens$colors$intera.table__header__fill_hover.rgba,
-    activeBackgroundColor = _tokens$colors$intera.table__header__fill_activated.rgba,
-    primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
-    disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-    disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
-    focusColor = _tokens$colors$intera.focus.rgba,
-    medium = tokens.spacings.comfortable.medium;
+  cellTypography = _tokens$typography.table.cell_header,
+  compactTypography = _tokens$typography._modes.compact,
+  _tokens$colors = tokens.colors,
+  typographyColor = _tokens$colors.text.static_icons__default.rgba,
+  borderColor = _tokens$colors.ui.background__medium.rgba,
+  _tokens$colors$intera = _tokens$colors.interactive,
+  backgroundColor = _tokens$colors$intera.table__header__fill_resting.rgba,
+  hoverBackgroundColor = _tokens$colors$intera.table__header__fill_hover.rgba,
+  activeBackgroundColor = _tokens$colors$intera.table__header__fill_activated.rgba,
+  primaryRestingColor = _tokens$colors$intera.primary__resting.rgba,
+  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
+  disabledBorderColor = _tokens$colors$intera.disabled__border.rgba,
+  focusColor = _tokens$colors$intera.focus.rgba,
+  medium = tokens.spacings.comfortable.medium;
 var token = {
   height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,

package/dist/esm/components/Table/Row/Row.js

@@ -10,7 +10,6 @@ var StyledRow = styled.tr.withConfig({
   componentId: "sc-12c5lns-0"
 })(function (_ref) {
   var _token$states$active, _token$states$hover;
-
   var active = _ref.active;
   return {
     background: active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
@@ -23,7 +22,6 @@ var StyledRow = styled.tr.withConfig({
 });
 var Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
   var props = _extends({}, _ref2);
-
   var children = props.children;
   return /*#__PURE__*/jsx(StyledRow, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,

package/dist/esm/components/Table/Row/Row.tokens.js

@@ -1,8 +1,8 @@
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$colors$intera = tokens.colors.interactive,
-    hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
-    activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba;
+  hoverBackgroundColor = _tokens$colors$intera.table__cell__fill_hover.rgba,
+  activeBackgroundColor = _tokens$colors$intera.table__cell__fill_activated.rgba;
 var token = {
   states: {
     active: {

package/dist/esm/components/Table/Table.js

@@ -12,12 +12,13 @@ var TableBase = styled.table.withConfig({
 })(["border-spacing:0;background:", ";"], tableCell.background);
 var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(TableBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: children
   }));
-}); // Table.displayName = 'EdsTable'
+});
+
+// Table.displayName = 'EdsTable'
 
 export { Table };

package/dist/esm/components/TableOfContents/LinkItem.js

@@ -15,8 +15,7 @@ var StyledLinkItem = styled.li.withConfig({
 });
 var LinkItem = /*#__PURE__*/forwardRef(function LinkItem(_ref2, ref) {
   var children = _ref2.children,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+    props = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/jsx(StyledLinkItem, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: children

package/dist/esm/components/TableOfContents/TableOfContents.js

@@ -15,7 +15,7 @@ var StyledTableOfContents = styled.nav.withConfig({
   componentId: "sc-q23s6y-0"
 })(function (_ref) {
   var theme = _ref.theme,
-      sticky = _ref.sticky;
+    sticky = _ref.sticky;
   return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
 });
 var TocList = styled(List).withConfig({
@@ -31,15 +31,13 @@ var TocLabel = styled(Typography).withConfig({
 });
 var TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, ref) {
   var children = _ref3.children,
-      _ref3$sticky = _ref3.sticky,
-      sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
-      _ref3$label = _ref3.label,
-      label = _ref3$label === void 0 ? '' : _ref3$label,
-      rest = _objectWithoutProperties(_ref3, _excluded);
-
+    _ref3$sticky = _ref3.sticky,
+    sticky = _ref3$sticky === void 0 ? false : _ref3$sticky,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? '' : _ref3$label,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token = useToken({
     density: density
   }, tableOfContents);

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

@@ -2,18 +2,18 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$colors = tokens.colors,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    primaryColor = _tokens$colors$intera.primary__resting.rgba,
-    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
-    primaryHover = _tokens$colors$intera.primary__hover.rgba,
-    focusColor = _tokens$colors$intera.focus.rgba,
-    labelColor = _tokens$colors.text.static_icons__tertiary.rgba,
-    borderRadius = tokens.shape.corners.borderRadius,
-    _tokens$spacings$comf = tokens.spacings.comfortable,
-    small = _tokens$spacings$comf.small,
-    x_large = _tokens$spacings$comf.x_large,
-    xxx_large = _tokens$spacings$comf.xxx_large,
-    typography = tokens.typography;
+  _tokens$colors$intera = _tokens$colors.interactive,
+  primaryColor = _tokens$colors$intera.primary__resting.rgba,
+  primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+  primaryHover = _tokens$colors$intera.primary__hover.rgba,
+  focusColor = _tokens$colors$intera.focus.rgba,
+  labelColor = _tokens$colors.text.static_icons__tertiary.rgba,
+  borderRadius = tokens.shape.corners.borderRadius,
+  _tokens$spacings$comf = tokens.spacings.comfortable,
+  small = _tokens$spacings$comf.small,
+  x_large = _tokens$spacings$comf.x_large,
+  xxx_large = _tokens$spacings$comf.xxx_large,
+  typography = tokens.typography;
 var tableOfContents = {
   typography: _objectSpread(_objectSpread({}, typography.navigation.button), {}, {
     color: labelColor

package/dist/esm/components/Tabs/Tab.js

@@ -8,9 +8,9 @@ import { jsx } from 'react/jsx-runtime';
 var _excluded = ["active"];
 var StyledTab = styled.button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
-      $active = _ref$$active === void 0 ? false : _ref$$active,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    $active = _ref$$active === void 0 ? false : _ref$$active,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return {
     type: 'button',
     role: 'tab',
@@ -23,15 +23,14 @@ var StyledTab = styled.button.attrs(function (_ref) {
   componentId: "sc-scjkct-0"
 })(function (_ref2) {
   var theme = _ref2.theme,
-      $active = _ref2.$active,
-      disabled = _ref2.disabled;
+    $active = _ref2.$active,
+    disabled = _ref2.disabled;
   var tab = theme.entities.tab;
   return css(["appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), typographyTemplate(tab.typography), $active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), $active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), $active && bordersTemplate(tab.states.active.border));
 });
 var Tab = /*#__PURE__*/forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
-      rest = _objectWithoutProperties(_ref3, _excluded);
-
+    rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsx(StyledTab, _objectSpread({
     ref: ref,
     $active: active

package/dist/esm/components/Tabs/TabList.js

@@ -28,26 +28,22 @@ var StyledTabList = styled.div.attrs(function () {
 });
 var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
-      children = _ref3$children === void 0 ? [] : _ref3$children,
-      props = _objectWithoutProperties(_ref3, _excluded);
-
+    children = _ref3$children === void 0 ? [] : _ref3$children,
+    props = _objectWithoutProperties(_ref3, _excluded);
   var _useContext = useContext(TabsContext),
-      activeTab = _useContext.activeTab,
-      handleChange = _useContext.handleChange,
-      tabsId = _useContext.tabsId,
-      _useContext$variant = _useContext.variant,
-      variant = _useContext$variant === void 0 ? 'minWidth' : _useContext$variant,
-      _useContext$scrollabl = _useContext.scrollable,
-      scrollable = _useContext$scrollabl === void 0 ? false : _useContext$scrollabl,
-      tabsFocused = _useContext.tabsFocused;
-
+    activeTab = _useContext.activeTab,
+    handleChange = _useContext.handleChange,
+    tabsId = _useContext.tabsId,
+    _useContext$variant = _useContext.variant,
+    variant = _useContext$variant === void 0 ? 'minWidth' : _useContext$variant,
+    _useContext$scrollabl = _useContext.scrollable,
+    scrollable = _useContext$scrollabl === void 0 ? false : _useContext$scrollabl,
+    tabsFocused = _useContext.tabsFocused;
   var currentTab = useRef(activeTab);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      arrowNavigating = _useState2[0],
-      setArrowNavigating = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    arrowNavigating = _useState2[0],
+    setArrowNavigating = _useState2[1];
   var selectedTabRef = useCallback(function (node) {
     if (node !== null && tabsFocused || node !== null && arrowNavigating) {
       setArrowNavigating(false);
@@ -79,28 +75,23 @@ var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
   });
   var firstFocusableChild = focusableChildren[0];
   var lastFocusableChild = focusableChildren[focusableChildren.length - 1];
-
   var handleTabsChange = function handleTabsChange(direction, fallbackTab) {
     var i = direction === 'left' ? 1 : -1;
     var nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
     setArrowNavigating(true);
     handleChange(nextTab === undefined ? fallbackTab : nextTab);
   };
-
   var handleKeyPress = function handleKeyPress(event) {
     var key = event.key;
-
     if (key === 'ArrowLeft') {
       event.preventDefault();
       handleTabsChange('left', lastFocusableChild);
     }
-
     if (key === 'ArrowRight') {
       event.preventDefault();
       handleTabsChange('right', firstFocusableChild);
     }
   };
-
   return /*#__PURE__*/jsx(StyledTabList, _objectSpread(_objectSpread({
     onKeyDown: handleKeyPress,
     ref: ref

package/dist/esm/components/Tabs/TabPanel.js

@@ -20,7 +20,6 @@ var StyledTabPanel = styled.div.attrs(function () {
 });
 var TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
   var props = _extends({}, _ref2);
-
   return /*#__PURE__*/jsx(StyledTabPanel, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {

package/dist/esm/components/Tabs/TabPanels.js

@@ -7,12 +7,10 @@ import { jsx } from 'react/jsx-runtime';
 var _excluded = ["children"];
 var TabPanels = /*#__PURE__*/forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(TabsContext),
-      activeTab = _useContext.activeTab,
-      tabsId = _useContext.tabsId;
-
+    activeTab = _useContext.activeTab,
+    tabsId = _useContext.tabsId;
   var Panels = Children.map(children, function (child, index) {
     return /*#__PURE__*/cloneElement(child, {
       id: "".concat(tabsId, "-panel-").concat(index + 1),

package/dist/esm/components/Tabs/Tabs.js

@@ -12,45 +12,38 @@ import { useEds } from '../EdsProvider/eds.context.js';
 var _excluded = ["activeTab", "onChange", "onBlur", "onFocus", "variant", "scrollable", "id"];
 var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   var _ref$activeTab = _ref.activeTab,
-      activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {
-    return null;
-  } : _ref$onChange,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'minWidth' : _ref$variant,
-      _ref$scrollable = _ref.scrollable,
-      scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
-      id = _ref.id,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    activeTab = _ref$activeTab === void 0 ? 0 : _ref$activeTab,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return null;
+    } : _ref$onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'minWidth' : _ref$variant,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+    id = _ref.id,
+    props = _objectWithoutProperties(_ref, _excluded);
   var tabsId = useId(id, 'tabs');
   var tabsRef = useRef(null);
   var combinedTabsRef = useMemo(function () {
     return mergeRefs(tabsRef, ref);
   }, [tabsRef, ref]);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      tabsFocused = _useState2[0],
-      setTabsFocused = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    tabsFocused = _useState2[0],
+    setTabsFocused = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      listenerAttached = _useState4[0],
-      setListenerAttached = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    listenerAttached = _useState4[0],
+    setListenerAttached = _useState4[1];
   var blurTimer;
-
   var handleBlur = function handleBlur(e) {
     setListenerAttached(false);
-
     if (tabsRef.current) {
       tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
     }
-
     blurTimer = setTimeout(function () {
       if (tabsFocused) {
         setTabsFocused(false);
@@ -58,15 +51,12 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     }, 0);
     onBlur && onBlur(e);
   };
-
   var handleFocus = function handleFocus(e) {
     if (e.target.getAttribute('role') !== 'tab') {
       return;
     }
-
     clearTimeout(blurTimer);
     if (tabsFocused) return;
-
     if (!listenerAttached) {
       if (tabsRef.current) {
         setListenerAttached(true);
@@ -76,26 +66,23 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
         });
       }
     }
-
     onFocus && onFocus(e);
-  }; //Only force focus on active Tab if Tabs was navigated to with keyboard
-
+  };
 
+  //Only force focus on active Tab if Tabs was navigated to with keyboard
   var checkIfTabWasPressed = function checkIfTabWasPressed(event) {
     setListenerAttached(false);
     if (event.key === 'Tab') setTabsFocused(true);
   };
-
   useEffect(function () {
     var tabs = tabsRef.current;
     return function () {
       if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token$1 = useToken({
     density: density
   }, token);

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

@@ -2,19 +2,19 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
 var _tokens$colors = tokens.colors,
-    defaultColor = _tokens$colors.text.static_icons__tertiary.rgba,
-    defaultBorderColor = _tokens$colors.ui.background__medium.rgba,
-    _tokens$colors$intera = _tokens$colors.interactive,
-    focusOutlineColor = _tokens$colors$intera.focus.rgba,
-    hoverBackgroundColor = _tokens$colors$intera.primary__hover_alt.rgba,
-    activeColor = _tokens$colors$intera.primary__resting.rgba,
-    activeHoverColor = _tokens$colors$intera.primary__hover.rgba,
-    clickboundsHeight = tokens.clickbounds.default__base,
-    spacingMedium = tokens.spacings.comfortable.medium,
-    focusOutlineWidth = tokens.interactions.focused.width,
-    _tokens$typography$na = tokens.typography.navigation,
-    menu_tabs = _tokens$typography$na.menu_tabs,
-    menu_title = _tokens$typography$na.menu_title;
+  defaultColor = _tokens$colors.text.static_icons__tertiary.rgba,
+  defaultBorderColor = _tokens$colors.ui.background__medium.rgba,
+  _tokens$colors$intera = _tokens$colors.interactive,
+  focusOutlineColor = _tokens$colors$intera.focus.rgba,
+  hoverBackgroundColor = _tokens$colors$intera.primary__hover_alt.rgba,
+  activeColor = _tokens$colors$intera.primary__resting.rgba,
+  activeHoverColor = _tokens$colors$intera.primary__hover.rgba,
+  clickboundsHeight = tokens.clickbounds.default__base,
+  spacingMedium = tokens.spacings.comfortable.medium,
+  focusOutlineWidth = tokens.interactions.focused.width,
+  _tokens$typography$na = tokens.typography.navigation,
+  menu_tabs = _tokens$typography$na.menu_tabs,
+  menu_title = _tokens$typography$na.menu_title;
 var token = {
   entities: {
     panel: {

package/dist/esm/components/TextField/TextField.js

@@ -8,7 +8,6 @@ import { Textarea } from '../Textarea/Textarea.js';
 import { Input } from '../Input/Input.js';
 
 var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
-
 /** Proxy component for working around typescript and element type switching */
 var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
   return props.multiline ? /*#__PURE__*/jsx(Textarea, _objectSpread({
@@ -19,26 +18,24 @@ var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
 });
 var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   var id = _ref.id,
-      label = _ref.label,
-      meta = _ref.meta,
-      unit = _ref.unit,
-      helperText = _ref.helperText,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      _ref$multiline = _ref.multiline,
-      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
-      className = _ref.className,
-      variant = _ref.variant,
-      inputIcon = _ref.inputIcon,
-      helperIcon = _ref.helperIcon,
-      style = _ref.style,
-      rowsMax = _ref.rowsMax,
-      textareaRef = _ref.textareaRef,
-      inputRef = _ref.inputRef,
-      other = _objectWithoutProperties(_ref, _excluded);
-
+    label = _ref.label,
+    meta = _ref.meta,
+    unit = _ref.unit,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    _ref$multiline = _ref.multiline,
+    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
+    className = _ref.className,
+    variant = _ref.variant,
+    inputIcon = _ref.inputIcon,
+    helperIcon = _ref.helperIcon,
+    style = _ref.style,
+    rowsMax = _ref.rowsMax,
+    textareaRef = _ref.textareaRef,
+    inputRef = _ref.inputRef,
+    other = _objectWithoutProperties(_ref, _excluded);
   var helperTextId = useId(null, 'helpertext');
-
   var fieldProps = _objectSpread({
     'aria-invalid': variant === 'error' || undefined,
     disabled: disabled,
@@ -54,7 +51,6 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     ref: inputRef || textareaRef,
     multiline: multiline
   }, other);
-
   var helperProps = {
     id: null,
     text: helperText,
@@ -75,7 +71,6 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     meta: meta,
     disabled: disabled
   };
-
   if (helperText) {
     fieldProps = _objectSpread({
       'aria-describedby': helperTextId
@@ -84,7 +79,6 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       id: helperTextId
     });
   }
-
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     helperProps: helperProps,
     labelProps: labelProps