@toptal/picasso-tabs 5.0.15-alpha-allow-to-pass-class-names-in-modal-package-7c2827b69.2 → 5.0.15-alpha-ff-7-tabs-17eb872bb.13

package/src/Tabs/__snapshots__/test.tsx.snap

@@ -6,31 +6,28 @@ exports[`Tabs renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -41,14 +38,14 @@ exports[`Tabs renders 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -58,10 +55,6 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -74,27 +67,28 @@ exports[`Tabs renders in full width 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scroller MuiTabs-fixed"
-        style="overflow: hidden;"
+        class="w-full overflow-hidden after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -105,14 +99,14 @@ exports[`Tabs renders in full width 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink flex-grow basis-0 min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -122,10 +116,6 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -138,31 +128,28 @@ exports[`Tabs renders in vertical orientation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
+      aria-orientation="vertical"
+      class="relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        class="pl-2 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          class="MuiTabs-flexContainer MuiTabs-flexContainerVertical"
+          class="flex flex-col"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            class="opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full block"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -173,14 +160,14 @@ exports[`Tabs renders in vertical orientation 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            class="opacity-100 first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4 text-left rounded-l rounded-r transition-all w-full overflow-hidden bg-gray hover:bg-gray text-graphite hover:text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full block"
             >
               <div
                 class="m-0 text-md text-inherit font-semibold whitespace-nowrap overflow-ellipsis [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -190,10 +177,6 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator PrivateTabIndicator-vertical"
-          style="top: 0px; height: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -206,31 +189,28 @@ exports[`Tabs renders with a pre-selected option 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -241,14 +221,14 @@ exports[`Tabs renders with a pre-selected option 1`] = `
           </button>
           <button
             aria-selected="true"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            class="opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -258,10 +238,6 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
     <div
@@ -281,31 +257,28 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      aria-orientation="horizontal"
+      class="relative min-h flex overflow-hidden overflow-x"
       data-component-type="tabs"
     >
       <div
-        class="MuiTabs-scrollable"
-        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
-      />
-      <div
-        class="MuiTabs-scroller MuiTabs-scrollable"
-        style="margin-bottom: 0px;"
+        class="after:absolute after:content-[""] after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:bg-gray after:z-0 flex-auto inline-block relative whitespace-nowrap"
       >
         <div
-          class="MuiTabs-flexContainer"
+          class="flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
             aria-selected="true"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            class="opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shadow-blue shadow-[inset_0_-2px_0] shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-1"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -316,14 +289,14 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
           </button>
           <button
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
             data-testid="tab-2"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex flex-row items-center justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -333,10 +306,6 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
     <div

package/src/Tabs/index.ts

@@ -1,7 +1,8 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props, TabsValueType } from './Tabs'
+import type { Props } from './Tabs'
+import type { TabsValueType } from './TabsContext'
 
 export { default as Tabs } from './Tabs'
 export type TabsProps = OmitInternalProps<Props<TabsValueType>>
-export type { TabsValueType } from './Tabs'
+export type { TabsValueType } from './TabsContext'

package/src/Tabs/story/Default.example.tsx

@@ -2,10 +2,12 @@ import React from 'react'
 import { Container, Tabs } from '@toptal/picasso'
 import { SPACING_4 } from '@toptal/picasso-utils'
 
+import type { TabsValueType } from '../TabsContext'
+
 const Example = () => {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = React.useState<TabsValueType>(0)
 
-  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}>, newValue: TabsValueType) => {
     setValue(newValue)
   }
 

package/src/Tabs/test.tsx

@@ -60,7 +60,7 @@ describe('Tabs', () => {
     const { container, queryByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: false,
+        value: null,
       }
     )
 
@@ -73,7 +73,7 @@ describe('Tabs', () => {
   it('renders in vertical orientation', () => {
     const { container } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
-      { value: false },
+      { value: null },
       'vertical'
     )
 
@@ -116,7 +116,7 @@ describe('Tabs', () => {
     const { getByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: 1,
+        value: 0,
         onChange,
       }
     )
@@ -159,7 +159,7 @@ describe('Tabs', () => {
 
   it('renders in full width', () => {
     const { container } = renderTabs([{ label: 'Tab 1' }, { label: 'Tab 2' }], {
-      value: false,
+      value: null,
       variant: 'fullWidth',
     })
 

package/src/index.ts

@@ -1,4 +1,3 @@
-export * from './TabScrollButton'
 export * from './Tabs'
 export * from './Tab'
 export * from './TabDescription'

package/dist-package/src/Tab/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ sizes, palette, shadows, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "selected" | "horizontal" | "vertical" | "wrapper">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Tab/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;mEAgDK,KAAK;AAA/D,wBA0DI"}

package/dist-package/src/Tab/styles.js

@@ -1,95 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ breakpoints, palette }) => ({
-    MuiTab: {
-        root: {
-            minHeight: 0,
-            minWidth: 0,
-            lineHeight: 1,
-            textTransform: 'none',
-            padding: `${rem('9px')} 0 ${rem('7px')}`,
-            overflow: 'initial',
-            [breakpoints.up('md')]: {
-                padding: undefined,
-            },
-            color: palette.grey.dark,
-            [breakpoints.up('md')]: {
-                minWidth: 'auto',
-                fontSize: '1rem',
-            },
-        },
-        labelIcon: {
-            minHeight: 0,
-            paddingRight: '1.5rem',
-            paddingTop: rem('9px'),
-            '& $wrapper > *:first-child': {
-                position: 'absolute',
-                right: 0,
-                marginBottom: 0,
-            },
-        },
-        selected: {
-            color: palette.common.black,
-        },
-        textColorInherit: {
-            '&$disabled': {
-                color: palette.grey.main,
-            },
-        },
-        disabled: {},
-    },
-}));
-export default ({ sizes, palette, shadows, transitions }) => createStyles({
-    horizontal: {
-        paddingTop: 0,
-        '&:not(:last-child)': {
-            marginRight: '2em',
-        },
-    },
-    vertical: {
-        width: '100%',
-        borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
-        margin: '0.25rem 0',
-        overflow: 'hidden',
-        padding: '0.5rem 1rem',
-        transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
-        textAlign: 'left',
-        backgroundColor: palette.grey.lighter,
-        opacity: 1,
-        color: palette.grey.dark,
-        '&:first-child': {
-            marginTop: '1rem',
-        },
-        '&:last-child': {
-            marginBottom: '1rem',
-        },
-        '&:hover': {
-            color: palette.common.black,
-        },
-        '&:hover:not($selected)': {
-            backgroundColor: palette.grey.lighter2,
-        },
-        '& $wrapper': {
-            display: 'block',
-        },
-    },
-    selected: {
-        '&$vertical': {
-            color: palette.common.black,
-            boxShadow: shadows[1],
-            backgroundColor: palette.grey.lightest,
-            '&::before': {
-                content: '""',
-                background: palette.blue.main,
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: '3px',
-            },
-        },
-    },
-    wrapper: {},
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Tab/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tab/styles.ts"],"names":[],"mappings":"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"}

package/dist-package/src/TabScrollButton/TabScrollButton.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { BaseProps } from '@toptal/picasso-shared';
-declare type DirectionType = 'left' | 'right';
-export interface Props extends BaseProps {
-    /** The direction the button should indicate. */
-    direction: DirectionType;
-    /** If `true`, the component is disabled. */
-    disabled?: boolean;
-}
-export declare const TabScrollButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default TabScrollButton;
-//# sourceMappingURL=TabScrollButton.d.ts.map

package/dist-package/src/TabScrollButton/TabScrollButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabScrollButton.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,aAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAErC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,gDAAgD;IAChD,SAAS,EAAE,aAAa,CAAA;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,eAAe,8EAsC3B,CAAA;AAID,eAAe,eAAe,CAAA"}

package/dist-package/src/TabScrollButton/TabScrollButton.js

@@ -1,30 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from 'react';
-import { ButtonBase } from '@material-ui/core';
-import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons';
-import { Container } from '@toptal/picasso-container';
-import { twMerge } from '@toptal/picasso-tailwind-merge';
-export const TabScrollButton = forwardRef(function TabScrollButton(props, ref) {
-    const { className, style, direction, disabled } = props, rest = __rest(props, ["className", "style", "direction", "disabled"]);
-    if (disabled) {
-        return null;
-    }
-    return (React.createElement(Container, Object.assign({}, rest, { ref: ref, className: twMerge('relative', className), style: style }),
-        React.createElement(Container, { className: twMerge('absolute w-10 h-full z-10', direction === 'left'
-                ? 'bg-gradient-to-r from-white via-white to-transparent'
-                : 'bg-gradient-to-l from-white via-white to-transparent', direction === 'left' ? 'left-0' : 'right-0') },
-            React.createElement(ButtonBase, { className: twMerge('absolute w-4 h-full', direction === 'left' ? 'left-0' : 'right-0'), "aria-label": `${direction} button`, "data-testid": `tab-scroll-button-${direction}` }, direction === 'left' ? React.createElement(BackMinor16, null) : React.createElement(ChevronMinor16, null)))));
-});
-TabScrollButton.displayName = 'TabScrollButton';
-export default TabScrollButton;
-//# sourceMappingURL=TabScrollButton.js.map

package/dist-package/src/TabScrollButton/TabScrollButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabScrollButton.js","sourceRoot":"","sources":["../../../src/TabScrollButton/TabScrollButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA1D,+CAAkD,CAAQ,CAAA;IAEhE,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,EACzC,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAChB,2BAA2B,EAC3B,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,sDAAsD;gBACxD,CAAC,CAAC,sDAAsD,EAC1D,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C;YAED,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAChB,qBAAqB,EACrB,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC5C,gBACW,GAAG,SAAS,SAAS,iBACpB,qBAAqB,SAAS,EAAE,IAE5C,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CACjD,CACH,CACF,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/dist-package/src/TabScrollButton/index.d.ts

@@ -1,5 +0,0 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './TabScrollButton';
-export { default as TabScrollButton } from './TabScrollButton';
-export declare type TabScrollButtonProps = OmitInternalProps<Props>;
-//# sourceMappingURL=index.d.ts.map

package/dist-package/src/TabScrollButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,oBAAY,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/TabScrollButton/index.js

@@ -1,2 +0,0 @@
-export { default as TabScrollButton } from './TabScrollButton';
-//# sourceMappingURL=index.js.map

package/dist-package/src/TabScrollButton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist-package/src/Tabs/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Tabs/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCA6BxB,KAAK;AAAlC,wBAeI"}

package/dist-package/src/Tabs/styles.js

@@ -1,41 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ palette }) => ({
-    MuiTabs: {
-        root: {
-            position: 'relative',
-            minHeight: 0,
-        },
-        vertical: {
-            width: 200,
-            margin: 0,
-            '& $scroller': {
-                // We need a bit of padding to allow active tab's shadow to be visible
-                paddingLeft: '0.5em',
-            },
-            '& $indicator': {
-                display: 'none',
-            },
-        },
-        indicator: {
-            backgroundColor: palette.blue.main,
-            zIndex: 1,
-        },
-    },
-}));
-export default ({ palette }) => createStyles({
-    horizontal: {
-        '&::after': {
-            position: 'absolute',
-            content: '""',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: 1,
-            backgroundColor: palette.grey.main,
-            zIndex: 0,
-        },
-    },
-    vertical: {},
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Tabs/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,aAAa,EAAE;gBACb,sEAAsE;gBACtE,WAAW,EAAE,OAAO;aACrB;YAED,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}