@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

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

@@ -6,11 +6,12 @@ import { jsx } from 'react/jsx-runtime';
 const StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-12c5lns-0"
-})(({
-  active
-}) => {
+})(_ref => {
   var _token$states$active, _token$states$hover;
 
+  let {
+    active
+  } = _ref;
   return {
     background: active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
     '@media (hover: hover) and (pointer: fine)': {
@@ -20,8 +21,9 @@ const StyledRow = styled.tr.withConfig({
     }
   };
 });
-const Row = /*#__PURE__*/forwardRef(function Row({ ...props
-}, ref) {
+const Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
+  let { ...props
+  } = _ref2;
   const {
     children
   } = props;

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

@@ -7,10 +7,11 @@ const TableBase = styled.table.withConfig({
   displayName: "Table__TableBase",
   componentId: "sc-14kktwc-0"
 })(["border-spacing:0;background:", ";"], tableCell.background);
-const Table = /*#__PURE__*/forwardRef(function Table({
-  children,
-  ...props
-}, ref) {
+const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(TableBase, { ...props,
     ref: ref,
     children: children

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

@@ -1,22 +1,22 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
 const StyledLinkItem = styled.li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   return css(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(theme.entities.links.typography), spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, outlineTemplate(theme.states.focus.outline), typographyTemplate(theme.states.hover.typography), theme.states.hover.background, bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
 });
-const LinkItem = /*#__PURE__*/forwardRef(function LinkItem({
-  children,
-  ...props
-}, ref) {
+const LinkItem = /*#__PURE__*/forwardRef(function LinkItem(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledLinkItem, { ...props,
     ref: ref,
     children: children

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

@@ -1,20 +1,20 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { List } from '../List/index.js';
+import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { tableOfContents } from './TableOfContents.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledTableOfContents = styled.nav.withConfig({
   displayName: "TableOfContents__StyledTableOfContents",
   componentId: "sc-q23s6y-0"
-})(({
-  theme,
-  sticky
-}) => {
+})(_ref => {
+  let {
+    theme,
+    sticky
+  } = _ref;
   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));
 });
 const TocList = styled(List).withConfig({
@@ -24,17 +24,19 @@ const TocList = styled(List).withConfig({
 const TocLabel = styled(Typography).withConfig({
   displayName: "TableOfContents__TocLabel",
   componentId: "sc-q23s6y-2"
-})(({
-  theme
-}) => {
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
   return css(["", ""], typographyTemplate(theme.typography));
 });
-const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents({
-  children,
-  sticky = false,
-  label = '',
-  ...rest
-}, ref) {
+const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, ref) {
+  let {
+    children,
+    sticky = false,
+    label = '',
+    ...rest
+  } = _ref3;
   const {
     density
   } = useEds();

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

@@ -1,33 +1,35 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
 
-const StyledTab = styled.button.attrs(({
-  active = false,
-  disabled = false
-}) => ({
-  type: 'button',
-  role: 'tab',
-  'aria-selected': active,
-  'aria-disabled': disabled,
-  tabIndex: active ? '0' : '-1'
-})).withConfig({
+const StyledTab = styled.button.attrs(_ref => {
+  let {
+    active = false,
+    disabled = false
+  } = _ref;
+  return {
+    type: 'button',
+    role: 'tab',
+    'aria-selected': active,
+    'aria-disabled': disabled,
+    tabIndex: active ? '0' : '-1'
+  };
+}).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(({
-  theme,
-  active,
-  disabled
-}) => {
+})(_ref2 => {
+  let {
+    theme,
+    active,
+    disabled
+  } = _ref2;
   const {
     entities: {
       tab
     }
   } = theme;
-  return css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&: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), 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));
+  return css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;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), 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));
 });
 const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsx(StyledTab, {

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

@@ -1,8 +1,8 @@
-import { forwardRef, useContext, useRef, useCallback, useEffect, Children, cloneElement } from 'react';
+import { forwardRef, useContext, useRef, useState, useCallback, useEffect, Children, cloneElement } from 'react';
 import styled from 'styled-components';
+import { useCombinedRefs } from '@equinor/eds-utils';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
 
 const variants = {
   fullWidth: 'minmax(1%, 360px)',
@@ -13,26 +13,38 @@ const StyledTabList = styled.div.attrs(() => ({
 })).withConfig({
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
-})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], ({
-  variant
-}) => variants[variant]);
-const TabList = /*#__PURE__*/forwardRef(function TabsList({
-  children = [],
-  ...props
-}, ref) {
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;&::-webkit-scrollbar{width:0;height:0;}}"], _ref => {
+  let {
+    variant
+  } = _ref;
+  return variants[variant];
+}, _ref2 => {
+  let {
+    scrollable
+  } = _ref2;
+  return scrollable ? 'auto' : 'hidden';
+});
+const TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
+  let {
+    children = [],
+    ...props
+  } = _ref3;
   const {
     activeTab,
     handleChange,
     tabsId,
     variant = 'minWidth',
+    scrollable = false,
     tabsFocused
   } = useContext(TabsContext);
   const currentTab = useRef(activeTab);
+  const [arrowNavigating, setArrowNavigating] = useState(false);
   const selectedTabRef = useCallback(node => {
-    if (node !== null && tabsFocused) {
+    if (node !== null && tabsFocused || node !== null && arrowNavigating) {
+      setArrowNavigating(false);
       node.focus();
     }
-  }, [tabsFocused]);
+  }, [arrowNavigating, tabsFocused]);
   useEffect(() => {
     currentTab.current = activeTab;
   }, [activeTab]);
@@ -61,6 +73,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
   const handleTabsChange = (direction, fallbackTab) => {
     const i = direction === 'left' ? 1 : -1;
     const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
+    setArrowNavigating(true);
     handleChange(nextTab === undefined ? fallbackTab : nextTab);
   };
 
@@ -70,10 +83,12 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     } = event;
 
     if (key === 'ArrowLeft') {
+      event.preventDefault();
       handleTabsChange('left', lastFocusableChild);
     }
 
     if (key === 'ArrowRight') {
+      event.preventDefault();
       handleTabsChange('right', firstFocusableChild);
     }
   };
@@ -83,6 +98,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     ref: ref,
     ...props,
     variant: variant,
+    scrollable: scrollable,
     children: Tabs
   });
 });

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

@@ -1,8 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate } from '../../utils/templates/index.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const StyledTabPanel = styled.div.attrs(() => ({
   tabIndex: 0,
@@ -10,9 +9,10 @@ const StyledTabPanel = styled.div.attrs(() => ({
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   const {
     entities: {
       panel
@@ -20,8 +20,9 @@ const StyledTabPanel = styled.div.attrs(() => ({
   } = theme;
   return css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
 });
-const TabPanel = /*#__PURE__*/forwardRef(function TabPanel({ ...props
-}, ref) {
+const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
+  let { ...props
+  } = _ref2;
   return /*#__PURE__*/jsx(StyledTabPanel, {
     ref: ref,
     ...props,

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

@@ -2,10 +2,11 @@ import { forwardRef, useContext, Children, cloneElement } from 'react';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const TabPanels = /*#__PURE__*/forwardRef(function TabPanels({
-  children,
-  ...props
-}, ref) {
+const TabPanels = /*#__PURE__*/forwardRef(function TabPanels(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   const {
     activeTab,
     tabsId

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

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 
 const TabsContext = /*#__PURE__*/createContext({
   variant: 'minWidth',
+  scrollable: false,
   handleChange: () => null,
   activeTab: 0,
   tabsId: '',

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

@@ -1,26 +1,36 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
+import { useId, useCombinedRefs, useToken } from '@equinor/eds-utils';
 import { ThemeProvider } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../hooks/useId.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
-const Tabs = /*#__PURE__*/forwardRef(function Tabs({
-  activeTab = 0,
-  onChange,
-  onBlur,
-  onFocus,
-  variant = 'minWidth',
-  id,
-  ...props
-}, ref) {
+const Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
+  let {
+    activeTab = 0,
+    onChange,
+    onBlur,
+    onFocus,
+    variant = 'minWidth',
+    scrollable,
+    id,
+    ...props
+  } = _ref;
   const tabsId = useId(id, 'tabs');
+  const tabsRef = useRef(null);
+  const combinedTabsRef = useCombinedRefs(tabsRef, ref);
   const [tabsFocused, setTabsFocused] = useState(false);
+  const [listenerAttached, setListenerAttached] = useState(false);
   let blurTimer;
 
   const handleBlur = e => {
+    setListenerAttached(false);
+
+    if (tabsRef.current) {
+      tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
+    }
+
     blurTimer = setTimeout(() => {
       if (tabsFocused) {
         setTabsFocused(false);
@@ -35,14 +45,33 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
     }
 
     clearTimeout(blurTimer);
+    if (tabsFocused) return;
 
-    if (!tabsFocused) {
-      setTabsFocused(true);
+    if (!listenerAttached) {
+      if (tabsRef.current) {
+        setListenerAttached(true);
+        tabsRef.current.addEventListener('keyup', checkIfTabWasPressed, {
+          once: true,
+          capture: true
+        });
+      }
     }
 
     onFocus && onFocus(e);
+  }; //Only force focus on active Tab if Tabs was navigated to with keyboard
+
+
+  const checkIfTabWasPressed = event => {
+    setListenerAttached(false);
+    if (event.key === 'Tab') setTabsFocused(true);
   };
 
+  useEffect(() => {
+    const tabs = tabsRef.current;
+    return () => {
+      if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const {
     density
   } = useEds();
@@ -57,10 +86,11 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
         handleChange: onChange,
         tabsId,
         variant,
+        scrollable,
         tabsFocused
       },
       children: /*#__PURE__*/jsx("div", {
-        ref: ref,
+        ref: combinedTabsRef,
         ...props,
         onBlur: handleBlur,
         onFocus: handleFocus

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

@@ -34,6 +34,11 @@ const {
     comfortable: {
       medium: spacingMedium
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const token = {
@@ -47,7 +52,7 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth,
             style: 'dashed',
             color: focusOutlineColor
           }
@@ -94,7 +99,8 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth,
+            offset: "-".concat(parseInt(focusOutlineWidth), "px"),
             style: 'dashed',
             color: focusOutlineColor
           }

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

@@ -1,26 +1,27 @@
 import { forwardRef } from 'react';
 import { useTextField } from './TextField.context.js';
 import styled, { css } from 'styled-components';
+import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import * as TextField_tokens from './TextField.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Input } from '../Input/Input.js';
 import { Textarea } from '../Textarea/Textarea.js';
 import { Icon as InputIcon } from './Icon/Icon.js';
-import { typographyTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const {
   textfield
 } = TextField_tokens;
 
-const Variation = ({
-  variant,
-  isFocused,
-  token
-}) => {
+const Variation = _ref => {
   var _token$border, _token$border2, _token$border3, _token$border4;
 
+  let {
+    variant,
+    isFocused,
+    token
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -39,45 +40,55 @@ const StrippedTextarea = styled(Textarea).withConfig({
 const InputWrapper = styled.div.withConfig({
   displayName: "Field__InputWrapper",
   componentId: "sc-455b88-2"
-})(({
-  inputIcon,
-  unit,
-  isDisabled,
-  isReadOnly,
-  multiline,
-  variant
-}) => css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"])));
+})(_ref2 => {
+  let {
+    inputIcon,
+    unit,
+    isDisabled,
+    isReadOnly,
+    multiline,
+    variant
+  } = _ref2;
+  return css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"]));
+});
 const Unit = styled.span.withConfig({
   displayName: "Field__Unit",
   componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), ({
-  isDisabled
-}) => isDisabled && {
-  color: textfield.entities.unit.states.disabled.typography.color
+})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), _ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled && {
+    color: textfield.entities.unit.states.disabled.typography.color
+  };
 });
 const Adornments = styled.div.withConfig({
   displayName: "Field__Adornments",
   componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, ({
-  multiline,
-  theme
-}) => multiline && {
-  marginTop: theme.spacings.top,
-  alignSelf: 'start'
+})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, _ref4 => {
+  let {
+    multiline,
+    theme
+  } = _ref4;
+  return multiline && {
+    marginTop: theme.spacings.top,
+    alignSelf: 'start'
+  };
 });
-const Field = /*#__PURE__*/forwardRef(function Field({
-  multiline,
-  variant,
-  disabled,
-  readOnly,
-  type,
-  unit,
-  inputIcon,
-  rowsMax,
-  onBlur,
-  onFocus,
-  ...other
-}, ref) {
+const Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
+  let {
+    multiline,
+    variant,
+    disabled,
+    readOnly,
+    type,
+    unit,
+    inputIcon,
+    rowsMax,
+    onBlur,
+    onFocus,
+    ...other
+  } = _ref5;
   const {
     handleFocus,
     handleBlur,

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

@@ -1,16 +1,18 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
 import { helperText } from './HelperText.token.js';
 import { useTextField } from '../TextField.context.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Icon as InputIcon } from '../Icon/Icon.js';
-import { typographyTemplate } from '../../../utils/templates/index.js';
 
-const Variation = ({
-  variant,
-  isFocused,
-  isDisabled
-}) => {
+const Variation = _ref => {
+  let {
+    variant,
+    isFocused,
+    isDisabled
+  } = _ref;
+
   if (!variant) {
     return "";
   }
@@ -35,22 +37,29 @@ const Variation = ({
 const Container = styled.div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], ({
-  spacings
-}) => spacings.top);
+})(["display:flex;align-items:flex-start;margin-top:", ";"], _ref2 => {
+  let {
+    spacings
+  } = _ref2;
+  return spacings.top;
+});
 const Text = styled.p.withConfig({
   displayName: "HelperText__Text",
   componentId: "sc-1kfkyxg-1"
-})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), ({
-  spacings
-}) => spacings.left, Variation);
-const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
-  helperText: helperText$1,
-  icon,
-  variant = 'default',
-  disabled: isDisabled,
-  ...rest
-}, ref) {
+})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), _ref3 => {
+  let {
+    spacings
+  } = _ref3;
+  return spacings.left;
+}, Variation);
+const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
+  let {
+    helperText: helperText$1,
+    icon,
+    variant = 'default',
+    disabled: isDisabled,
+    ...rest
+  } = _ref4;
   const helperVariant = helperText[variant];
   const spacings = helperText.spacings.comfortable;
   const {