@toptal/picasso-tabs 5.0.15-alpha-MP-955-fix-section-closing-animation-d279e2398.0 → 5.0.15-alpha-ff-7-tabs-19babbfd6.8

package/src/Tabs/Tabs.tsx

@@ -1,15 +1,11 @@
-import type { ForwardedRef, ReactNode } from 'react'
-import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import { Tabs as MUITabs } from '@material-ui/core'
+import type { ReactNode } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+import { Tabs as MUITabs } from '@mui/base/Tabs'
+import { TabsList } from '@mui/base/TabsList'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import { TabScrollButton } from '../TabScrollButton'
-import styles from './styles'
-import useTabAction from './use-tab-action'
-
-export type TabsValueType = string | number | false
+export type TabsValueType = string | number | null
 
 export interface Props<V extends TabsValueType> extends BaseProps {
   /** Tabs content containing Tab components */
@@ -18,7 +14,10 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   /** Callback fired when the value changes. */
   onChange?: (event: React.ChangeEvent<{}> | null, value: V) => void
 
-  /** The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to false. */
+  /**
+   * The value of the currently selected Tab.
+   * If you don't want any selected Tab, you can set this property to null.
+   */
   value: V
 
   /** The tabs orientation (layout flow direction). */
@@ -28,52 +27,104 @@ export interface Props<V extends TabsValueType> extends BaseProps {
   variant?: 'scrollable' | 'fullWidth'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Tabs',
-})
+export const TabsContext = React.createContext<{
+  orientation: 'horizontal' | 'vertical'
+  variant: 'scrollable' | 'fullWidth'
+}>({ orientation: 'horizontal', variant: 'scrollable' })
+
+const indicatorClasses = [
+  'after:absolute',
+  'after:content-[""]',
+  'after:bottom-0',
+  'after:left-0',
+  'after:right-0',
+  'after:h-[1px]',
+  'after:bg-gray-500',
+  'after:z-0',
+]
+
+const classesByOrientation = {
+  vertical: {
+    root: 'w-[200px] m-0 flex-col',
+    scroller: 'pl-2',
+  },
+  horizontal: {
+    root: '',
+    scroller: indicatorClasses,
+  },
+}
 
-export const TabsOrientationContext = React.createContext<
-  'horizontal' | 'vertical'
->('horizontal')
+const classesByVariant = {
+  scrollable: {
+    root: 'overflow-x-auto',
+    scroller: '',
+  },
+  fullWidth: {
+    root: '',
+    scroller: 'w-full overflow-hidden',
+  },
+}
 
-export const Tabs = forwardRef(
-  <V extends TabsValueType = TabsValueType>(
-    props: Props<V>,
-    ref: ForwardedRef<HTMLButtonElement>
-  ) => {
+// eslint-disable-next-line react/display-name
+export const Tabs = forwardRef<HTMLDivElement, Props<TabsValueType>>(
+  function Tabs(props, ref) {
     const {
       children,
       orientation = 'horizontal',
       onChange,
       value,
       variant = 'scrollable',
+      className,
       ...rest
     } = props
-    const classes = useStyles(props)
-    const action = useTabAction()
+
+    const contextValue = useMemo(
+      () => ({
+        orientation,
+        variant,
+      }),
+      [orientation, variant]
+    )
+
+    const isVertical = orientation === 'vertical'
 
     return (
-      <TabsOrientationContext.Provider value={orientation}>
+      <TabsContext.Provider value={contextValue}>
         <MUITabs
           {...rest}
-          classes={{ root: classes[orientation] }}
-          ref={ref}
+          data-component-type='tabs'
+          slotProps={{
+            root: {
+              ref,
+              className: twMerge(
+                'relative min-h-0 flex overflow-hidden',
+                classesByOrientation[orientation].root,
+                classesByVariant[variant].root,
+                className
+              ),
+            },
+          }}
           onChange={onChange}
           value={value}
-          action={action}
-          scrollButtons='auto'
-          ScrollButtonComponent={TabScrollButton}
           orientation={orientation}
-          variant={variant}
-          data-component-type='tabs'
         >
-          {children}
+          <div
+            className={twJoin(
+              classesByVariant[variant].scroller,
+              classesByOrientation[orientation].scroller,
+              'flex-auto inline-block relative whitespace-nowrap'
+            )}
+          >
+            <TabsList className={twJoin('flex', isVertical && 'flex-col')}>
+              {children}
+            </TabsList>
+          </div>
         </MUITabs>
-      </TabsOrientationContext.Provider>
+      </TabsContext.Provider>
     )
   }
-) as <V extends TabsValueType = TabsValueType>(
-  props: Props<V> & { ref?: ForwardedRef<HTMLDivElement> }
-) => ReturnType<typeof MUITabs>
+)
+
+Tabs.displayName = 'Tabs'
 
 export default Tabs

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

@@ -10,27 +10,25 @@ exports[`Tabs renders 1`] = `
       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="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-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=":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 leading-[1.1rem]"
@@ -40,15 +38,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-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=":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 leading-[1.1rem]"
@@ -58,10 +58,6 @@ exports[`Tabs renders 1`] = `
             </span>
           </button>
         </div>
-        <span
-          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
-          style="left: 0px; width: 0px;"
-        />
       </div>
     </div>
   </div>
@@ -78,23 +74,25 @@ exports[`Tabs renders in full width 1`] = `
       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="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-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"
+            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 leading-[1.1rem]"
@@ -104,15 +102,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-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"
+            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 leading-[1.1rem]"
@@ -122,10 +122,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>
@@ -142,27 +138,26 @@ exports[`Tabs renders in vertical orientation 1`] = `
       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"
+          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 [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -172,15 +167,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 [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block"
@@ -190,10 +187,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>
@@ -210,27 +203,25 @@ exports[`Tabs renders with a pre-selected option 1`] = `
       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="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-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=":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 leading-[1.1rem]"
@@ -240,15 +231,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 leading-[1.1rem]"
@@ -258,10 +251,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
@@ -285,27 +274,25 @@ exports[`Tabs renders with a pre-selected option using custom value 1`] = `
       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="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 leading-[1.1rem]"
@@ -315,15 +302,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-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=":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 leading-[1.1rem]"
@@ -333,10 +322,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/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"}