@equinor/eds-core-react 0.18.0-envis.1 → 0.19.0-dev.20220404

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,36 +1,37 @@
 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,
     spacings,
-    border
+    border,
+    align
   } = theme;
   const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
-  const base = css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  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: {
@@ -56,8 +56,11 @@ const {
   }
 } = tokens;
 const tableCell = {
-  height: '48px',
+  height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
   border: {
     type: 'bordergroup',
     bottom: {
@@ -67,13 +70,14 @@ const tableCell = {
     }
   },
   spacings: {
-    top: '0',
-    bottom: '0',
-    left: medium,
-    right: medium
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
   },
   typography: { ...cellTypography,
-    color: typographyColor
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
   },
   states: {
     active: {
@@ -112,9 +116,15 @@ const tableCell = {
   },
   modes: {
     compact: {
-      height: '32px',
+      height: 'var(--eds_table__cell__height_compact, 32px)',
       typography: { ...compactTypography.table.cell_text,
         color: typographyColor
+      },
+      spacings: {
+        top: 'var(--eds_table__cell__padding_y_compact, 0)',
+        bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
       }
     }
   },
@@ -141,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/HeaderCell/HeaderCell.tokens.js

@@ -51,10 +51,14 @@ const {
   }
 } = tokens;
 const token = {
-  height: '48px',
+  height: 'var(--eds_table__cell__height, 48px)',
   background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
   typography: { ...cellTypography,
-    color: typographyColor
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
   },
   border: {
     type: 'bordergroup',
@@ -66,10 +70,10 @@ const token = {
     }
   },
   spacings: {
-    top: '0',
-    bottom: '0',
-    left: medium,
-    right: medium
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
   },
   states: {
     active: {
@@ -109,8 +113,14 @@ const token = {
   },
   modes: {
     compact: {
-      height: '32px',
-      typography: compactTypography.table.cell_header
+      height: 'var(--eds_table__cell__height_compact, 32px)',
+      typography: compactTypography.table.cell_header,
+      spacings: {
+        top: 'var(--eds_table__cell__padding_y_compact, 0)',
+        bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
+      }
     }
   }
 };

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