@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-17eb872bb.13 → 5.0.15-alpha-bill-root-ref-context-42c3d2541.6

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

@@ -1,15 +1,15 @@
 import type { ReactNode, HTMLAttributes, ReactElement } from 'react';
 import React from 'react';
+import type { TabProps } from '@material-ui/core';
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
-import { type TabsValueType } from '../Tabs/TabsContext';
-export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * If true, the tab will be disabled
      * @default false
      */
     disabled?: boolean;
-    /** The value of the tab */
-    value?: TabsValueType;
+    /** You can provide your own value. Otherwise, we fallback to the child position index */
+    value?: TabProps['value'];
     /** The label element */
     label?: ReactNode;
     /** The Icon element */
@@ -18,7 +18,10 @@ export interface Props extends BaseProps, TextLabelProps, Omit<HTMLAttributes<HT
     avatar?: string | null;
     /** Description */
     description?: string;
+    selected?: boolean;
+    onChange?: TabProps['onChange'];
+    onClick?: TabProps['onClick'];
 }
-export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export declare const Tab: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAKvE,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAIxE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CAOrB;AAsDD,eAAO,MAAM,GAAG,iFA6Ed,CAAA;AAmDF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AASvE,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,yFAAyF;IACzF,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEzB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IAEjB,uBAAuB;IACvB,IAAI,CAAC,EAAE,YAAY,CAAA;IAEnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAEtB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IAIpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;CAC9B;AAID,eAAO,MAAM,GAAG,8EA+Cd,CAAA;AAyDF,eAAe,GAAG,CAAA"}

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

@@ -9,69 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tab as MUITab } from '@material-ui/core';
 import { useTitleCase } from '@toptal/picasso-shared';
 import { UserBadge } from '@toptal/picasso-user-badge';
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
-import { useTabsContext } from '../Tabs/TabsContext';
+import styles from './styles';
+import { TabsOrientationContext } from '../Tabs/Tabs';
 import { TabLabel } from '../TabLabel';
 import { TabDescription } from '../TabDescription';
-const getOpacityClass = (selected, disabled, orientation) => {
-    if (disabled) {
-        return 'opacity-50';
-    }
-    if (selected || orientation === 'vertical') {
-        return 'opacity-100 ';
-    }
-    return 'opacity-70';
-};
-const wrapperClassesByOrientation = {
-    horizontal: 'inline-flex flex-row items-center justify-center',
-    vertical: 'block',
-};
-const rootClassesByOrientation = (selected) => ({
-    horizontal: [
-        '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',
-        selected && 'shadow-blue-500 shadow-[inset_0_-2px_0]',
-    ],
-    vertical: [
-        ' first:mt-4 last:mb-4 my-1 mx-0 py-2 px-4',
-        'text-left rounded-l-sm rounded-r-none transition-all',
-        'w-full overflow-hidden',
-        selected && 'shadow-1',
-        selected && [
-            'before:absolute',
-            'before:content-[""]',
-            'before:bottom-0',
-            'before:left-0',
-            'before:top-0',
-            'before:w-[3px]',
-            'before:bg-blue-500',
-        ],
-        selected
-            ? 'bg-gray-50 text-black'
-            : 'bg-gray-100 hover:bg-gray-200 text-graphite-700 hover:text-black',
-    ],
-});
-const classesByVariant = {
-    scrollable: 'shrink-0 max-w-[264px]',
-    fullWidth: 'shrink flex-grow basis-0',
-};
+const useStyles = makeStyles(styles, { name: 'PicassoTab' });
 export const Tab = forwardRef(function Tab(props, ref) {
-    const { disabled, value, label, icon, titleCase: propsTitleCase, description, avatar, className, onClick } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "titleCase", "description", "avatar", "className", "onClick"]);
+    const { disabled, value, label, icon, selected, onChange, onClick, titleCase: propsTitleCase, description, avatar } = props, rest = __rest(props, ["disabled", "value", "label", "icon", "selected", "onChange", "onClick", "titleCase", "description", "avatar"]);
+    const classes = useStyles();
     const titleCase = useTitleCase(propsTitleCase);
-    const { value: selectedValue, onChange, orientation, variant, } = useTabsContext();
-    const isHorizontal = orientation === 'horizontal';
-    const selected = value === selectedValue;
-    const handleClick = (event) => {
-        if (!disabled && onChange) {
-            onChange(event, value);
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    };
-    const renderLabel = getLabelComponent({
+    const orientation = useContext(TabsOrientationContext);
+    const labelComponent = getLabelComponent({
         avatar,
         description,
         disabled,
@@ -79,11 +32,13 @@ export const Tab = forwardRef(function Tab(props, ref) {
         orientation,
         titleCase,
     });
-    return (React.createElement("button", Object.assign({ className: twMerge(getOpacityClass(selected, !!disabled, orientation), rootClassesByOrientation(selected)[orientation], classesByVariant[variant], disabled ? 'cursor-default text-gray-500' : 'cursor-pointer', disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pt-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-none', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className), ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, onClick: handleClick, role: 'tab', "aria-selected": selected, "aria-disabled": disabled, type: 'button' }, rest),
-        React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
-            renderLabel,
-            icon && React.createElement("span", { className: 'absolute right-0 mb-0' }, icon))));
+    return (React.createElement(MUITab, Object.assign({ className: '' }, rest, { ref: ref, tabIndex: 0, disabled: disabled, label: labelComponent, icon: icon, value: value, selected: selected, onChange: onChange, onClick: onClick, classes: {
+            root: classes[orientation],
+            selected: classes.selected,
+            wrapper: classes.wrapper,
+        } })));
 });
+Tab.defaultProps = {};
 Tab.displayName = 'Tab';
 const getLabelComponent = ({ avatar, description, disabled, label, orientation, titleCase, }) => {
     if (!label) {

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAsB,MAAM,qBAAqB,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAkClD,MAAM,eAAe,GAAG,CACtB,QAAiB,EACjB,QAAiB,EACjB,WAAsC,EACtC,EAAE;IACF,IAAI,QAAQ,EAAE;QACZ,OAAO,YAAY,CAAA;KACpB;IACD,IAAI,QAAQ,IAAI,WAAW,KAAK,UAAU,EAAE;QAC1C,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AAED,MAAM,2BAA2B,GAAG;IAClC,UAAU,EAAE,kDAAkD;IAC9D,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC;IACvD,UAAU,EAAE;QACV,wDAAwD;QACxD,gEAAgE;QAChE,YAAY;QACZ,QAAQ,IAAI,yCAAyC;KACtD;IACD,QAAQ,EAAE;QACR,2CAA2C;QAC3C,sDAAsD;QACtD,wBAAwB;QACxB,QAAQ,IAAI,UAAU;QACtB,QAAQ,IAAI;YACV,iBAAiB;YACjB,qBAAqB;YACrB,iBAAiB;YACjB,eAAe;YACf,cAAc;YACd,gBAAgB;YAChB,oBAAoB;SACrB;QACD,QAAQ;YACN,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,kEAAkE;KACvE;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE,wBAAwB;IACpC,SAAS,EAAE,0BAA0B;CACtC,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAA2B,SAAS,GAAG,CAClE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,EAAE,cAAc,EACzB,WAAW,EACX,MAAM,EACN,SAAS,EACT,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,oGAWL,CAAQ,CAAA;IACT,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EACJ,KAAK,EAAE,aAAa,EACpB,QAAQ,EACR,WAAW,EACX,OAAO,GACR,GAAG,cAAc,EAAE,CAAA;IACpB,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IACjD,MAAM,QAAQ,GAAG,KAAK,KAAK,aAAa,CAAA;IAExC,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,KAAsB,CAAC,CAAA;SACxC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACpC,MAAM;QACN,WAAW;QACX,QAAQ;QACR,KAAK;QACL,WAAW;QACX,SAAS;KACV,CAAC,CAAA;IAEF,OAAO,CACL,8CACE,SAAS,EAAE,OAAO,CAChB,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,WAAW,CAAC,EAClD,wBAAwB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,EAC/C,gBAAgB,CAAC,OAAO,CAAC,EACzB,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gBAAgB,EAC5D,QAAQ,IAAI,qBAAqB,EACjC,IAAI,IAAI,YAAY,IAAI,mBAAmB,EAC3C,0CAA0C,EAC1C,kDAAkD,EAClD,uDAAuD,EACvD,uEAAuE,EACvE,yCAAyC,EACzC,WAAW,EACX,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,KAAK,mBACK,QAAQ,mBACR,QAAQ,EACvB,IAAI,EAAC,QAAQ,IACT,IAAI;QAER,8BACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,2BAA2B,CAAC,WAAW,CAAC,CAAC;YAEpE,WAAW;YACX,IAAI,IAAI,8BAAM,SAAS,EAAC,uBAAuB,IAAE,IAAI,CAAQ,CACzD,CACA,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA;AAEvB,MAAM,iBAAiB,GAAG,CAAC,EACzB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAQV,EAAmB,EAAE;IACpB,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAA;KACZ;IACD,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IACjD,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAC/C,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,GAAI,CAC3E,CAAA;IAED,IAAI,YAAY,IAAI,aAAa,EAAE;QACjC,OAAO,oBAAC,KAAK,OAAG,CAAA;KACjB;IACD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,CACL;YACE,oBAAC,KAAK,OAAG;YACR,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACA,CACJ,CAAA;KACF;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IACtD,WAAW,IAAI,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,IAAG,WAAW,CAAkB,CACnE,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tab/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC;YACZ,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;YACxC,QAAQ,EAAE,SAAS;YAEnB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,OAAO,EAAE,SAAS;aACnB;YAED,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAExB,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;gBACtB,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,SAAS,EAAE;YACT,SAAS,EAAE,CAAC;YACZ,YAAY,EAAE,QAAQ;YACtB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;YACtB,4BAA4B,EAAE;gBAC5B,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,CAAC;gBACR,YAAY,EAAE,CAAC;aAChB;SACF;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,gBAAgB,EAAE;YAChB,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACzB;SACF;QACD,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CACjE,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE,CAAC;QACb,oBAAoB,EAAE;YACpB,WAAW,EAAE,KAAK;SACnB;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,QAAQ,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;QAC3E,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,SAAS,EAAE;QACjF,SAAS,EAAE,MAAM;QACjB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;QACrC,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QAExB,eAAe,EAAE;YACf,SAAS,EAAE,MAAM;SAClB;QAED,cAAc,EAAE;YACd,YAAY,EAAE,MAAM;SACrB;QAED,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QAED,wBAAwB,EAAE;YACxB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;SACvC;QAED,YAAY,EAAE;YACZ,OAAO,EAAE,OAAO;SACjB;KACF;IACD,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;YACrB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;YAEtC,WAAW,EAAE;gBACX,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBAC7B,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,CAAC;gBACT,KAAK,EAAE,KAAK;aACb;SACF;KACF;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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/Tabs.d.ts

@@ -1,26 +1,23 @@
-import type { ReactNode, ChangeEvent } from 'react';
+import type { ForwardedRef, ReactNode } from 'react';
 import React from 'react';
+import { Tabs as MUITabs } from '@material-ui/core';
 import type { BaseProps } from '@toptal/picasso-shared';
-import { type TabsValueType } from './TabsContext';
+export declare type TabsValueType = string | number | false;
 export interface Props<V extends TabsValueType> extends BaseProps {
     /** Tabs content containing Tab components */
     children: ReactNode;
     /** Callback fired when the value changes. */
-    onChange?: (event: ChangeEvent<{}>, value: V) => void;
-    /**
-     * The value of the currently selected Tab.
-     * If you don't want any selected Tab, you can set this property to null.
-     */
+    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. */
     value: V;
     /** The tabs orientation (layout flow direction). */
     orientation?: 'horizontal' | 'vertical';
     /** Determines additional display behavior of the tabs */
     variant?: 'scrollable' | 'fullWidth';
-    /** The default value. Use when the component is not controlled. */
-    defaultValue?: V;
-    /** The direction of the text. */
-    direction?: 'ltr' | 'rtl';
 }
-export declare const Tabs: React.ForwardRefExoticComponent<Props<TabsValueType> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsOrientationContext: React.Context<"horizontal" | "vertical">;
+export declare const Tabs: <V extends TabsValueType = TabsValueType>(props: Props<V> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof MUITabs>;
 export default Tabs;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,aAAa,CAAE,SAAQ,SAAS;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAErD;;;OAGG;IACH,KAAK,EAAE,CAAC,CAAA;IAER,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAA;IAEpC,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,CAAA;IAEhB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AAmCD,eAAO,MAAM,IAAI,6FA2FhB,CAAA;AAID,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,oBAAY,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,aAAa,CAAE,SAAQ,SAAS;IAC/D,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAA;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAElE,uHAAuH;IACvH,KAAK,EAAE,CAAC,CAAA;IAER,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAEvC,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAA;CACrC;AAMD,eAAO,MAAM,sBAAsB,0CAEpB,CAAA;AAEf,eAAO,MAAM,IAAI;;MAsCZ,WAAW,cAAc,CAAC,CAAA;AAE/B,eAAe,IAAI,CAAA"}

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

@@ -9,74 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useMemo, useCallback } from 'react';
-import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
-import { TabsContext } from './TabsContext';
-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,
-    },
-};
-const classesByVariant = {
-    scrollable: {
-        root: 'overflow-x-auto',
-        scroller: '',
-    },
-    fullWidth: {
-        root: '',
-        scroller: 'w-full overflow-hidden',
-    },
-};
-export const Tabs = forwardRef(function Tabs(props, ref) {
-    const { children, orientation = 'horizontal', onChange, value: valueProp, defaultValue, variant = 'scrollable', direction = 'ltr', className } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "defaultValue", "variant", "direction", "className"]);
-    const [value, setValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
-    const isControlled = valueProp !== undefined;
-    const currentValue = isControlled ? valueProp : value;
-    const handleChange = useCallback((event, newValue) => {
-        if (!isControlled) {
-            setValue(newValue);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
-    }, [isControlled, onChange]);
-    const contextValue = useMemo(() => ({
-        value: currentValue,
-        onChange: handleChange,
-        orientation,
-        variant,
-        direction,
-    }), [currentValue, handleChange, orientation, variant, direction]);
-    const isVertical = orientation === 'vertical';
-    const childrenWithIndex = React.Children.map(children, (child, idx) => {
-        if (React.isValidElement(child) &&
-            // @ts-expect-error: type check for Picasso Tab
-            (child.type.displayName === 'Tab' || child.type.name === 'Tab') &&
-            child.props.value === undefined) {
-            return React.cloneElement(child, {
-                value: idx,
-            });
-        }
-        return child;
-    });
-    return (React.createElement(TabsContext.Provider, { value: contextValue },
-        React.createElement("div", Object.assign({}, rest, { ref: ref, "data-component-type": 'tabs', className: twMerge('relative min-h-0 flex overflow-hidden', classesByOrientation[orientation].root, classesByVariant[variant].root, className), "aria-orientation": orientation }),
-            React.createElement("div", { className: twJoin(classesByVariant[variant].scroller, classesByOrientation[orientation].scroller, 'flex-auto inline-block relative whitespace-nowrap') },
-                React.createElement("div", { className: twJoin('flex', isVertical && 'flex-col'), role: 'tablist', tabIndex: -1 }, childrenWithIndex)))));
+import React, { forwardRef } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Tabs as MUITabs } from '@material-ui/core';
+import { TabScrollButton } from '../TabScrollButton';
+import styles from './styles';
+import useTabAction from './use-tab-action';
+const useStyles = makeStyles(styles, {
+    name: 'Tabs',
+});
+export const TabsOrientationContext = React.createContext('horizontal');
+export const Tabs = forwardRef((props, ref) => {
+    const { children, orientation = 'horizontal', onChange, value, variant = 'scrollable' } = props, rest = __rest(props, ["children", "orientation", "onChange", "value", "variant"]);
+    const classes = useStyles(props);
+    const action = useTabAction();
+    return (React.createElement(TabsOrientationContext.Provider, { value: orientation },
+        React.createElement(MUITabs, Object.assign({}, rest, { classes: { root: classes[orientation] }, ref: ref, onChange: onChange, value: value, action: action, scrollButtons: 'auto', ScrollButtonComponent: TabScrollButton, orientation: orientation, variant: variant, "data-component-type": 'tabs' }), children)));
 });
-Tabs.displayName = 'Tabs';
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAsB,MAAM,eAAe,CAAA;AA4B/D,MAAM,gBAAgB,GAAG;IACvB,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,cAAc;IACd,eAAe;IACf,eAAe;IACf,mBAAmB;IACnB,WAAW;CACZ,CAAA;AAED,MAAM,oBAAoB,GAAG;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAA;AAED,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE;QACV,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,EAAE;KACb;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,wBAAwB;KACnC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG;IACtB,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,OAAO,GAAG,YAAY,EACtB,SAAS,GAAG,KAAK,EACjB,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,qGAUL,CAAQ,CAAA;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CACtC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CACrB,CAAA;IACD,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAA;IAC5C,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;IAErD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAsB,EAAE,QAAuB,EAAE,EAAE;QAClD,IAAI,CAAC,YAAY,EAAE;YACjB,QAAQ,CAAC,QAAQ,CAAC,CAAA;SACnB;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE,QAAyB,CAAC,CAAA;IAC9C,CAAC,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAA;IAED,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,WAAW;QACX,OAAO;QACP,SAAS;KACV,CAAC,EACF,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9D,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAA;IAE7C,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACpE,IACE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAC3B,+CAA+C;YAC/C,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;YAC/D,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,EAC/B;YACA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAgC,EAAE;gBAC1D,KAAK,EAAE,GAAG;aACX,CAAC,CAAA;SACH;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY;QACvC,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,yBACY,MAAM,EAC1B,SAAS,EAAE,OAAO,CAChB,uCAAuC,EACvC,oBAAoB,CAAC,WAAW,CAAC,CAAC,IAAI,EACtC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAC9B,SAAS,CACV,sBACiB,WAAW;YAE7B,6BACE,SAAS,EAAE,MAAM,CACf,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,EAClC,oBAAoB,CAAC,WAAW,CAAC,CAAC,QAAQ,EAC1C,mDAAmD,CACpD;gBAED,6BACE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,UAAU,CAAC,EACnD,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,CAAC,IAEX,iBAAiB,CACd,CACF,CACF,CACe,CACxB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAqB3C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAEvD,YAAY,CAAC,CAAA;AAEf,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,KAAe,EACf,GAAoC,EACpC,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,GAAG,YAAY,KAEpB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,2DAOL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW;QACjD,oBAAC,OAAO,oBACF,IAAI,IACR,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,EACvC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,aAAa,EAAC,MAAM,EACpB,qBAAqB,EAAE,eAAe,EACtC,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,yBACI,MAAM,KAEzB,QAAQ,CACD,CACsB,CACnC,CAAA;AACH,CAAC,CAG4B,CAAA;AAE/B,eAAe,IAAI,CAAA"}

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

@@ -1,7 +1,6 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './Tabs';
-import type { TabsValueType } from './TabsContext';
+import type { Props, TabsValueType } from './Tabs';
 export { default as Tabs } from './Tabs';
 export declare type TabsProps = OmitInternalProps<Props<TabsValueType>>;
-export type { TabsValueType } from './TabsContext';
+export type { TabsValueType } from './Tabs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA"}

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

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1 @@
+{"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"}

package/dist-package/src/Tabs/use-tab-action.d.ts

@@ -0,0 +1,5 @@
+import type { Ref } from 'react';
+import type { TabsActions } from '@material-ui/core';
+declare const useTabAction: () => Ref<TabsActions>;
+export default useTabAction;
+//# sourceMappingURL=use-tab-action.d.ts.map

package/dist-package/src/Tabs/use-tab-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-action.d.ts","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAOpD,QAAA,MAAM,YAAY,QAAO,IAAI,WAAW,CAevC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist-package/src/Tabs/use-tab-action.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+/*
+ * MuiTabs break when the size of a tab changes without rendering with React.
+ * This issue happens when the font is loaded after the initial render of the component.
+ * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
+ */
+const useTabAction = () => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const listener = () => {
+            var _a, _b;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.updateIndicator();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.updateScrollButtons();
+        };
+        window.addEventListener('load', listener);
+        return () => window.removeEventListener('load', listener);
+    }, []);
+    return ref;
+};
+export default useTabAction;
+//# sourceMappingURL=use-tab-action.js.map

package/dist-package/src/Tabs/use-tab-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-action.js","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAA,GAAG,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAA;YAC9B,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,EAAE,CAAA;QACpC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}