@toptal/picasso-tabs 2.0.9-alpha-cjs-and-esm-publish-test-99555d2ed.1 → 3.0.0

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

@@ -6,30 +6,28 @@ exports[`Tabs renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
       <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="base-TabsList base-TabsList flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":r0:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -39,15 +37,17 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":r1:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -57,10 +57,6 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -73,26 +69,28 @@ exports[`Tabs renders in full width 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden"
     >
       <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="base-TabsList base-TabsList flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":re:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -102,15 +100,17 @@ exports[`Tabs renders in full width 1`] = `
             </span>
           </button>
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-fullWidth"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":rf:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -120,10 +120,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>
@@ -136,30 +132,29 @@ exports[`Tabs renders in vertical orientation 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-vertical MuiTabs-vertical"
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden w-[200px] m-0 flex-col overflow-x"
     >
       <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"
+          aria-orientation="vertical"
+          class="base-TabsList base-TabsList flex flex-col"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            class="base-Tab 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"
+            id=":r2:"
             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 overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
@@ -169,15 +164,17 @@ exports[`Tabs renders in vertical orientation 1`] = `
             </span>
           </button>
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-vertical MuiTab-textColorInherit"
+            class="base-Tab 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"
+            id=":r3:"
             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 overflow-hidden inline TypographyOverflow-wrapper !block !whitespace-nowrap"
@@ -187,10 +184,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>
@@ -203,30 +196,28 @@ exports[`Tabs renders with a pre-selected option 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
       <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="base-TabsList base-TabsList flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":r4:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -236,15 +227,17 @@ exports[`Tabs renders with a pre-selected option 1`] = `
             </span>
           </button>
           <button
+            aria-disabled="false"
             aria-selected="true"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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"
+            id=":r5:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -254,10 +247,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
@@ -277,30 +266,28 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiTabs-root Tabs-horizontal"
+      class="base-Tabs base-Tabs relative min-h flex overflow-hidden overflow-x"
     >
       <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="base-TabsList base-TabsList flex"
           role="tablist"
+          tabindex="-1"
         >
           <button
+            aria-disabled="false"
             aria-selected="true"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-selected PicassoTab-selected"
+            class="base-Tab base- opacity-100 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] 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"
+            id=":r6:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -310,15 +297,17 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
             </span>
           </button>
           <button
+            aria-disabled="false"
             aria-selected="false"
-            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
+            class="base-Tab opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-[0.5625rem] pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-inheritColor 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"
+            id=":r7:"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiTab-wrapper PicassoTab-wrapper"
+              class="w-full inline-flex items-center flex-col justify-center"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold"
@@ -328,10 +317,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,6 +1,7 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
-import type { Props } from './Tabs'
+import type { Props, TabsValueType } from './Tabs'
 
 export { default as Tabs } from './Tabs'
-export type TabsProps = OmitInternalProps<Props>
+export type TabsProps = OmitInternalProps<Props<TabsValueType>>
+export type { TabsValueType } from './Tabs'

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

@@ -5,7 +5,7 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -8,7 +8,7 @@ const TAB_COUNT = 2
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -8,7 +8,7 @@ const TAB_COUNT = 10
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

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

@@ -33,7 +33,7 @@ const TabsContent = ({ children }: { children: React.ReactNode }) => {
 const Example = () => {
   const [value, setValue] = React.useState(0)
 
-  const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
     setValue(newValue)
   }
 

package/src/Tabs/test.tsx

@@ -1,14 +1,17 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import type { OmitInternalProps } from '@toptal/picasso-shared'
 import { TestingPicasso } from '@toptal/picasso-test-utils'
 
 import type { TabProps } from '../Tab'
-import type { Props } from './Tabs'
+import type { Props, TabsValueType } from './Tabs'
 import { TabsCompound as Tabs } from '../TabsCompound'
 
-const renderTabContent = (tab: TabProps, index: number, value: any) => {
+const renderTabContent = (
+  tab: TabProps,
+  index: number,
+  value: TabsValueType
+) => {
   const isTabActive = index + 1 === value || tab.value === value
   const testId = `tab-${index + 1}-content`
 
@@ -25,7 +28,7 @@ const renderTabContent = (tab: TabProps, index: number, value: any) => {
 
 const renderTabs = (
   tabs: TabProps[],
-  { value, onChange, variant }: OmitInternalProps<Props, 'children'>,
+  { value, onChange, variant }: Omit<Props<TabsValueType>, 'children'>,
   orientation: 'horizontal' | 'vertical' = 'horizontal'
 ) => {
   return render(
@@ -57,7 +60,7 @@ describe('Tabs', () => {
     const { container, queryByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: false,
+        value: null,
       }
     )
 
@@ -70,7 +73,7 @@ describe('Tabs', () => {
   it('renders in vertical orientation', () => {
     const { container } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
-      { value: false },
+      { value: null },
       'vertical'
     )
 
@@ -113,7 +116,7 @@ describe('Tabs', () => {
     const { getByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: 1,
+        value: 0,
         onChange,
       }
     )
@@ -156,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,6 +1,5 @@
-export * from './TabScrollButton'
 export * from './Tabs'
 export * from './Tab'
 export * from './TabDescription'
 export * from './TabsCompound'
-export * from './TabLabel'
+export * from './TabLabel'

package/LICENSE

@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2021-2022 Toptal, LLC
-
-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.

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<{}, "horizontal" | "vertical" | "selected" | "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,wBAyDI"}

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

@@ -1,94 +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: {
-        '&: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":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,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;AAMD,eAAO,MAAM,eAAe,8EAoC3B,CAAA;AAID,eAAe,eAAe,CAAA"}