@toptal/picasso-tabs 3.0.2-alpha-fx-null-revert-tabs-974b03420.32 → 3.0.2-alpha-FX-NULL-fix-checkbox-class-b75438bf7.34

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/test.tsx

@@ -116,7 +116,7 @@ describe('Tabs', () => {
     const { getByTestId } = renderTabs(
       [{ label: 'Tab 1' }, { label: 'Tab 2' }],
       {
-        value: 1,
+        value: 0,
         onChange,
       }
     )

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<{}, "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"}

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

@@ -1,40 +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 cx from 'classnames';
-import React, { forwardRef } from 'react';
-import { ButtonBase } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons';
-import { Container } from '@toptal/picasso-container';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoTabScrollButton',
-});
-export const TabScrollButton = forwardRef(function TabScrollButton(props, ref) {
-    const { className, style, direction, disabled } = props, rest = __rest(props, ["className", "style", "direction", "disabled"]);
-    const classes = useStyles();
-    if (disabled) {
-        return null;
-    }
-    return (React.createElement(Container, Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
-        React.createElement(Container, { className: cx(classes.gradient, {
-                [classes.left]: direction === 'left',
-                [classes.right]: direction === 'right',
-            }) },
-            React.createElement(ButtonBase, { className: cx(classes.button, {
-                    [classes.left]: direction === 'left',
-                    [classes.right]: direction === 'right',
-                }), "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,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAW7B,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE;IACnC,IAAI,EAAE,wBAAwB;CAC/B,CAAC,CAAA;AAEF,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;IAChE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE;gBAC9B,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,MAAM;gBACpC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,OAAO;aACvC,CAAC;YAEF,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE;oBAC5B,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,MAAM;oBACpC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,OAAO;iBACvC,CAAC,gBACU,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/TabScrollButton/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<{}, "root" | "left" | "right" | "button" | "gradient">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,35 +0,0 @@
-import { createStyles } from '@material-ui/core';
-import { alpha } from '@toptal/picasso-shared';
-export default ({ palette }) => {
-    const color = palette.common.white;
-    const colorStops = `${color} 0%, ${color} 50%, ${alpha(color, 0)} 100%`;
-    return createStyles({
-        root: {
-            position: 'relative',
-        },
-        gradient: {
-            position: 'absolute',
-            width: '2.5rem',
-            height: '100%',
-            zIndex: 2,
-            '&$left': {
-                background: `linear-gradient(90deg, ${colorStops})`,
-            },
-            '&$right': {
-                background: `linear-gradient(270deg, ${colorStops})`,
-            },
-        },
-        button: {
-            position: 'absolute',
-            width: '1rem',
-            height: '100%',
-        },
-        left: {
-            left: 0,
-        },
-        right: {
-            right: 0,
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TabScrollButton/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAA;IAClC,MAAM,UAAU,GAAG,GAAG,KAAK,QAAQ,KAAK,SAAS,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAA;IAEvE,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;SACrB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE;gBACR,UAAU,EAAE,0BAA0B,UAAU,GAAG;aACpD;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,2BAA2B,UAAU,GAAG;aACrD;SACF;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR;QACD,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;SACT;KACF,CAAC,CAAA;AACJ,CAAC,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"}