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

package/dist/esm/components/Switch/SwitchSmall.js

@@ -1,48 +1,58 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
+import { outlineTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
-})(({
-  disabled,
-  theme: {
-    states,
-    entities: {
-      handle,
-      track
+})(_ref => {
+  let {
+    disabled,
+    theme: {
+      states,
+      entities: {
+        handle,
+        track
+      }
     }
-  }
-}) => css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
+  } = _ref;
+  return css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background);
+});
 const Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
-})(({
-  isDisabled,
-  theme: {
-    states,
-    entities: {
-      track
+})(_ref2 => {
+  let {
+    isDisabled,
+    theme: {
+      states,
+      entities: {
+        track
+      }
     }
-  }
-}) => css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background));
+  } = _ref2;
+  return css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background);
+});
 const Handle = styled.span.withConfig({
   displayName: "SwitchSmall__Handle",
   componentId: "sc-1a99mis-2"
-})(({
-  theme: {
-    entities: {
-      handle
+})(_ref3 => {
+  let {
+    theme: {
+      entities: {
+        handle
+      }
     }
-  }
-}) => css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
-const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall({
-  disabled,
-  ...rest
-}, ref) {
+  } = _ref3;
+  return css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height);
+});
+const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
+  let {
+    disabled,
+    ...rest
+  } = _ref4;
   return /*#__PURE__*/jsxs(GridWrapper, {
     children: [/*#__PURE__*/jsx(Input, { ...rest,
       ref: ref,

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

@@ -7,10 +7,11 @@ const TableBase = styled.tbody.withConfig({
   displayName: "Body__TableBase",
   componentId: "sc-1pdmiku-0"
 })([""]);
-const Body = /*#__PURE__*/forwardRef(function Body({
-  children,
-  ...props
-}, ref) {
+const Body = /*#__PURE__*/forwardRef(function Body(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'body'

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

@@ -5,11 +5,14 @@ import { jsx } from 'react/jsx-runtime';
 const StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
-})(({
-  captionSide = 'top'
-}) => ({
-  captionSide
-}));
+})(_ref => {
+  let {
+    captionSide = 'top'
+  } = _ref;
+  return {
+    captionSide
+  };
+});
 const Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
   return /*#__PURE__*/jsx(StyledCaption, { ...props,
     ref: ref

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

@@ -4,13 +4,16 @@ import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
-const Cell = /*#__PURE__*/forwardRef(function Cell({ ...rest
-}, ref) {
+const Cell = /*#__PURE__*/forwardRef(function Cell(_ref, ref) {
+  let { ...rest
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Consumer, {
-    children: ({
-      variant,
-      sticky
-    }) => {
+    children: _ref2 => {
+      let {
+        variant,
+        sticky
+      } = _ref2;
+
       switch (variant) {
         case 'head':
           return /*#__PURE__*/jsx(TableHeaderCell, {

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

@@ -1,21 +1,20 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { applyVariant, tableCell } from './DataCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
-})(({
-  theme,
-  color
-}) => {
+})(_ref => {
   var _theme$validation$err;
 
+  let {
+    theme,
+    color
+  } = _ref;
   const {
     height,
     typography,
@@ -27,11 +26,12 @@ const StyledTableCell = styled.td.withConfig({
   const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
   return base;
 });
-const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
-  children,
-  variant = 'text',
-  ...rest
-}, ref) {
+const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell(_ref2, ref) {
+  let {
+    children,
+    variant = 'text',
+    ...rest
+  } = _ref2;
   const {
     density
   } = useEds();

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   typography: {
@@ -151,7 +151,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return mergeDeepRight_1(token, token.variants.numeric);
+      return mergeDeepRight(token, token.variants.numeric);
 
     default:
       return token;

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

@@ -1,19 +1,20 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { token } from './Head.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { InnerContext } from '../Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 
 const StyledTableHead = styled.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
 })(["", " background:", ";"], bordersTemplate(token.border), token.background);
-const Head = /*#__PURE__*/forwardRef(function Head({
-  children,
-  sticky,
-  ...props
-}, ref) {
+const Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
+  let {
+    children,
+    sticky,
+    ...props
+  } = _ref;
   return /*#__PURE__*/jsx(InnerContext.Provider, {
     value: {
       variant: 'head',

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

@@ -1,11 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { token } from './HeaderCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
-import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
-import { bordersTemplate } from '../../../utils/templates/borders.js';
 import { useEds } from '../../EdsProvider/eds.context.js';
-import { useToken } from '../../../hooks/useToken.js';
 
 const StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
@@ -40,11 +38,12 @@ const CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
-const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
-  children,
-  sort,
-  ...rest
-}, ref) {
+const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
+  let {
+    children,
+    sort,
+    ...rest
+  } = _ref;
   const {
     density
   } = useEds();

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: '',