@instructure/ui-tabs 11.6.0 → 11.6.1-snapshot-129

package/lib/Tabs/{Panel → v2/Panel}/index.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Panel = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active", "unmountOnExit", "tabIndex"];
@@ -46,7 +45,7 @@ parent: Tabs
 id: Tabs.Panel
 ---
 **/
-let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Panel = class Panel extends _react.Component {
+let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Panel = class Panel extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -108,7 +107,7 @@ let Panel = exports.Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         in: !this.isHidden,
         unmountOnExit: unmountOnExit,
         transitionExit: false,
-        children: (0, _jsxRuntime.jsx)(_View.View, {
+        children: (0, _jsxRuntime.jsx)(_latest.View, {
           css: styles === null || styles === void 0 ? void 0 : styles.content,
           maxHeight: maxHeight,
           minHeight: minHeight,

package/lib/Tabs/v2/Panel/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['renderTitle', 'children', 'variant', 'isSelected', 'isDisabled', 'maxHeight', 'minHeight', 'id', 'labelledBy', 'padding', 'textAlign', 'elementRef', 'active', 'unmountOnExit', 'tabIndex'];

package/lib/Tabs/v2/Panel/styles.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params, sharedTokens) => {
+  const maxHeight = params.maxHeight,
+    isSelected = params.isSelected,
+    isHidden = params.isHidden;
+  return {
+    panel: {
+      label: 'panel',
+      boxSizing: 'border-box',
+      flexShrink: 0,
+      flexGrow: 0,
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      ...(isSelected && {
+        flexGrow: 1,
+        height: '100%'
+      }),
+      ...(isHidden && {
+        display: 'none'
+      }),
+      '&:focus': {
+        outlineColor: sharedTokens.focusOutline.infoColor
+      }
+    },
+    content: {
+      label: 'panel__content',
+      boxSizing: 'border-box',
+      width: '100%',
+      height: '100%',
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: 'solid',
+      background: componentTheme.background,
+      borderColor: componentTheme.borderColor,
+      color: componentTheme.textColor,
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      // we exposed this so in some use cases it can be set to "visible",
+      // e.g. when a 100% width button's focus ring would get cropped
+      overflowY: componentTheme.defaultOverflowY,
+      ...(maxHeight && {
+        overflow: 'auto'
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Tabs/{Tab → v2/Tab}/index.js

@@ -9,10 +9,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
@@ -46,7 +45,7 @@ parent: Tabs
 id: Tabs.Tab
 ---
 **/
-let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Tab = class Tab extends _react.Component {
+let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Tab = class Tab extends _react.Component {
   constructor(...args) {
     super(...args);
     this.handleClick = event => {
@@ -100,7 +99,7 @@ let Tab = exports.Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       children = _this$props5.children,
       styles = _this$props5.styles,
       props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_latest.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       as: "div",
       role: "tab",

package/lib/Tabs/v2/Tab/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['variant', 'id', 'index', 'controls', 'isDisabled', 'isSelected', 'onClick', 'onKeyDown', 'children', 'isOverflowScroll'];

package/lib/Tabs/v2/Tab/styles.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// keyframes have to be outside of 'generateStyle',
+// since it is causing problems in style recalculation
+const selectedTab = (0, _emotion.keyframes)`
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scaleX(1);
+  }`;
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params) => {
+  const variant = params.variant,
+    isSelected = params.isSelected,
+    isDisabled = params.isDisabled,
+    isOverflowScroll = params.isOverflowScroll;
+  const variants = {
+    default: {
+      padding: '1rem 1.25rem',
+      // if horizontal padding changes, update `scrollOverlayWidthDefault` in `Tabs/theme.js`
+      lineHeight: 1,
+      position: 'relative',
+      zIndex: componentTheme.zIndex,
+      color: componentTheme.defaultTextColor,
+      ...(isDisabled && {
+        fontWeight: 'normal'
+      }),
+      '&::after': {
+        content: '""',
+        height: '0.25rem',
+        width: '100%',
+        position: 'absolute',
+        insetInlineStart: 0,
+        bottom: 0,
+        opacity: 0,
+        transform: 'translate3d(0, 0, 0) scaleX(0.01)',
+        ...(isSelected && {
+          backgroundColor: componentTheme.defaultSelectedBorderColor,
+          animationName: selectedTab,
+          animationDuration: '0.2s',
+          animationFillMode: 'forwards',
+          animationTimingFunction: 'ease-out'
+        })
+      },
+      '&:hover': {
+        ...(!isDisabled && !isSelected && {
+          borderBottomColor: componentTheme.defaultHoverBorderColor
+        })
+      }
+    },
+    secondary: {
+      padding: '0.75rem 1rem',
+      // if horizontal padding changes, update `scrollOverlayWidthSecondary` in `Tabs/theme.js`
+      color: componentTheme.secondaryTextColor,
+      marginInlineEnd: '0.2em',
+      marginBottom: isOverflowScroll ? '0rem' : '-0.0625rem',
+      border: '0.0625rem solid transparent',
+      borderTopLeftRadius: '0.1875rem',
+      borderTopRightRadius: '0.1875rem',
+      position: 'relative',
+      ...(isSelected && {
+        background: componentTheme.secondarySelectedBackground,
+        borderColor: componentTheme.secondarySelectedBorderColor,
+        zIndex: componentTheme.zIndex,
+        borderBottomColor: componentTheme.secondarySelectedBackground,
+        color: componentTheme.secondarySelectedTextColor
+      }),
+      '&:first-of-type': {
+        marginInlineStart: '0'
+      },
+      '&:hover': {
+        ...(!isDisabled && !isSelected && {
+          background: componentTheme.secondarySelectedBackground,
+          borderColor: componentTheme.secondarySelectedBorderColor,
+          color: componentTheme.secondarySelectedTextColor
+        })
+      }
+    }
+  };
+
+  // overrides for View default focus ring
+  const focusRingStyles = {
+    '&:before': {
+      inset: '0.5rem',
+      borderRadius: '0.25rem'
+    },
+    '&:focus': {
+      '&:before': {
+        inset: '0.375rem'
+      }
+    }
+  };
+  return {
+    tab: {
+      label: 'tab',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      cursor: 'pointer',
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      ...((isSelected || isDisabled) && {
+        cursor: 'default'
+      }),
+      ...(isDisabled && {
+        opacity: 0.5
+      }),
+      ...focusRingStyles,
+      ...variants[variant]
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Tabs/{index.js → v2/index.js}

@@ -14,7 +14,7 @@ exports.default = exports.Tabs = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _keycode = _interopRequireDefault(require("keycode"));
-var _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -26,7 +26,6 @@ var _debounce = require("@instructure/debounce");
 var _px = require("@instructure/ui-utils/lib/px.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _Tab = require("./Tab");
 var _Panel = require("./Panel");
 var _props = require("./props");
@@ -61,7 +60,7 @@ var _dec, _class, _Tabs;
 category: components
 ---
 **/
-let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Tabs = class Tabs extends _react.Component {
+let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Tabs = class Tabs extends _react.Component {
   constructor(props) {
     super(props);
     this._tabList = null;
@@ -370,7 +369,7 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     const endScrollOverlay = this.state.showEndOverLay ? (0, _jsxRuntime.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.endScrollOverlay
     }, "end-overlay") : null;
-    return (0, _jsxRuntime.jsxs)(_View.View, {
+    return (0, _jsxRuntime.jsxs)(_latest.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
       elementRef: this.handleRef,
       maxWidth: maxWidth,
@@ -380,13 +379,13 @@ let Tabs = exports.Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       "data-cid": "Tabs",
       children: [(0, _jsxRuntime.jsx)(_Focusable.Focusable, {
         ref: this.handleFocusableRef,
-        children: () => (0, _jsxRuntime.jsx)(_View.View, {
+        children: () => (0, _jsxRuntime.jsx)(_latest.View, {
           as: "div",
           position: "relative",
           borderRadius: "medium",
           shouldAnimateFocus: false,
           css: styles === null || styles === void 0 ? void 0 : styles.tabs,
-          children: (0, _jsxRuntime.jsxs)(_View.View, {
+          children: (0, _jsxRuntime.jsxs)(_latest.View, {
             as: "div",
             role: "tablist",
             css: styles === null || styles === void 0 ? void 0 : styles.tabList,

package/lib/Tabs/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'variant', 'screenReaderLabel', 'onRequestTabChange', 'maxWidth', 'maxHeight', 'minHeight', 'fixHeight', 'margin', 'padding', 'textAlign', 'elementRef', 'tabOverflow', 'shouldFocusOnRender'];

package/lib/Tabs/v2/styles.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params) => {
+  const variant = params.variant,
+    tabOverflow = params.tabOverflow,
+    fixHeight = params.fixHeight;
+
+  // fixHeight can be 0, so simply `fixheight` could return falsy value
+  const hasFixedHeight = typeof fixHeight !== 'undefined';
+  const variants = {
+    default: {
+      container: {
+        background: componentTheme.defaultBackground
+      },
+      tabs: {
+        marginBottom: `calc(${componentTheme.tabVerticalOffset} * -1)`
+      },
+      scrollOverlay: {
+        width: componentTheme.scrollOverlayWidthDefault
+      }
+    },
+    secondary: {
+      container: {
+        background: componentTheme.defaultBackground
+      },
+      tabs: {},
+      scrollOverlay: {
+        width: componentTheme.scrollOverlayWidthSecondary
+      }
+    }
+  };
+  const tabOverflowVariants = {
+    stack: {
+      flexFlow: 'row wrap'
+    },
+    scroll: {
+      marginBottom: variant === 'secondary' ? `calc(${componentTheme.tabVerticalOffset} * -1)` : 0,
+      overflowX: 'auto',
+      ...(variant === 'default' && {
+        '&::-webkit-scrollbar-track': {
+          backgroundColor: 'transparent'
+        },
+        '&::-webkit-scrollbar': {
+          height: '0.0625rem',
+          backgroundColor: 'transparent'
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      scrollbarWidth: 'none'
+    }
+  };
+  const commonOverlay = {
+    height: `calc(100% - (${componentTheme.tabVerticalOffset} + 0.25rem))`,
+    position: 'absolute',
+    zIndex: componentTheme.zIndex,
+    top: '0',
+    pointerEvents: 'none',
+    ...variants[variant].scrollOverlay
+  };
+  return {
+    tabs: {
+      label: 'tabs',
+      flexShrink: 0,
+      flexGrow: 0,
+      ...variants[variant].tabs
+    },
+    container: {
+      label: 'tabs__container',
+      display: 'flex',
+      flexDirection: 'column',
+      height: fixHeight,
+      ...variants[variant].container
+    },
+    tabList: {
+      label: 'tabs__tabList',
+      display: 'flex',
+      width: '100%',
+      ...tabOverflowVariants[tabOverflow]
+    },
+    panelsContainer: {
+      label: 'tabs__panelsContainer',
+      flexShrink: 1,
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      ...(hasFixedHeight && {
+        overflowY: 'hidden'
+      })
+    },
+    endScrollOverlay: {
+      label: 'tabs__endScrollOverlay',
+      insetInlineEnd: '0',
+      background: `linear-gradient(to left, ${componentTheme.scrollFadeColor} 0%, rgba(255, 255, 255, 0) 100%)`,
+      '[dir="rtl"] &': {
+        background: `linear-gradient(to right, ${componentTheme.scrollFadeColor} 0%, rgba(255, 255, 255, 0) 100%)`
+      },
+      ...commonOverlay
+    },
+    startScrollOverlay: {
+      label: 'tabs__startScrollOverlay',
+      insetInlineStart: '0',
+      background: `linear-gradient(to right, ${componentTheme.scrollFadeColor} 0%, rgba(255, 255, 255, 0) 100%)`,
+      '[dir="rtl"] &': {
+        background: `linear-gradient(to left, ${componentTheme.scrollFadeColor} 0%, rgba(255, 255, 255, 0) 100%)`
+      },
+      ...commonOverlay
+    },
+    scrollOverlayWidthDefault: componentTheme.scrollOverlayWidthDefault,
+    scrollOverlayWidthSecondary: componentTheme.scrollOverlayWidthSecondary
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
-    return _Tabs.Tabs;
+    return _v.Tabs;
   }
 });
 Object.defineProperty(exports, "TabsPanel", {
@@ -21,6 +21,6 @@ Object.defineProperty(exports, "TabsTab", {
     return _Tab.Tab;
   }
 });
-var _Tabs = require("./Tabs");
-var _Panel = require("./Tabs/Panel");
-var _Tab = require("./Tabs/Tab");
+var _v = require("../Tabs/v1");
+var _Panel = require("../Tabs/v1/Panel");
+var _Tab = require("../Tabs/v1/Tab");

package/lib/exports/b.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _v.Tabs;
+  }
+});
+Object.defineProperty(exports, "TabsPanel", {
+  enumerable: true,
+  get: function () {
+    return _Panel.Panel;
+  }
+});
+Object.defineProperty(exports, "TabsTab", {
+  enumerable: true,
+  get: function () {
+    return _Tab.Tab;
+  }
+});
+var _v = require("../Tabs/v2");
+var _Panel = require("../Tabs/v2/Panel");
+var _Tab = require("../Tabs/v2/Tab");