@toptal/picasso-tabs 5.0.15-alpha-ff-7-tabs-2a3da7cea.16 → 5.0.15-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7

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

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-export declare const TabsCompound: (<T = number>(props: import("../Tabs").TabsProps<T> & {
-    ref?: import("react").Ref<HTMLDivElement> | undefined;
-}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
-    Tab: <T_1 = number>(props: import("../Tab").TabProps<T_1> & {
-        ref?: import("react").Ref<HTMLButtonElement> | undefined;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const TabsCompound: (<V extends import("../Tabs").TabsValueType = import("../Tabs").TabsValueType>(props: import("../Tabs/Tabs").Props<V> & {
+    ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
+}) => JSX.Element) & {
+    Tab: import("react").ForwardRefExoticComponent<import("../Tab/Tab").Props & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;CAEvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabsCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;CAEvB,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/dist-package/src/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "5.0.15-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+  "version": "5.0.15-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,13 +22,13 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "3.1.3-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-icons": "1.12.2-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-shared": "15.0.1-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea",
-    "@toptal/picasso-typography": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-typography-overflow": "4.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-user-badge": "5.1.12-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-utils": "3.1.1-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
+    "@toptal/picasso-container": "3.1.3-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-icons": "1.12.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-shared": "15.0.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.353+04c9c3a7c",
+    "@toptal/picasso-typography": "4.0.4-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-typography-overflow": "4.0.4-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-user-badge": "5.1.12-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
+    "@toptal/picasso-utils": "3.1.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.7+04c9c3a7c",
     "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
@@ -36,8 +36,8 @@
     "**/styles.js"
   ],
   "peerDependencies": {
+    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": ">=2.6",
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
@@ -45,14 +45,14 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "5.0.1-alpha-ff-7-tabs-2a3da7cea.283+2a3da7cea",
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-ff-7-tabs-2a3da7cea.16+2a3da7cea",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-ff-7-tabs-2a3da7cea.362+2a3da7cea"
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-provider": "5.0.1-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.274+04c9c3a7c",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-HG-985-prompt-modal-variant-primary-04c9c3a7c.353+04c9c3a7c"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "2a3da7cea3ba840b0a702d9efc91380d60ee2fe6"
+  "gitHead": "04c9c3a7c386e0e32b8e5b426bf4d49cb2ba369a"
 }

package/src/Tab/Tab.tsx

@@ -1,26 +1,30 @@
-import type { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react'
-import React, { forwardRef } from 'react'
+import type { ReactNode, HTMLAttributes, ReactElement } from 'react'
+import React, { forwardRef, useContext } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import type { TabProps } from '@material-ui/core'
+import { Tab as MUITab } from '@material-ui/core'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 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'
 
-export interface TabProps<T = number>
+export interface Props
   extends BaseProps,
     TextLabelProps,
-    Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * If true, the tab will be disabled
    * @default false
    */
   disabled?: boolean
 
-  /** The value of the tab */
-  value?: T
+  /** You can provide your own value. Otherwise, we fallback to the child position index */
+  value?: TabProps['value']
 
   /** The label element */
   label?: ReactNode
@@ -33,60 +37,77 @@ export interface TabProps<T = number>
 
   /** Description */
   description?: string
-}
 
-const getOpacityClass = (
-  selected: boolean,
-  disabled: boolean,
-  orientation: 'horizontal' | 'vertical'
-) => {
-  if (disabled) {
-    return 'opacity-50'
-  }
-  if (selected || orientation === 'vertical') {
-    return 'opacity-100 '
-  }
+  // Properties below are managed by Tabs component
 
-  return 'opacity-70'
+  selected?: boolean
+  onChange?: TabProps['onChange']
+  onClick?: TabProps['onClick']
 }
 
-const wrapperClassesByOrientation = {
-  horizontal: 'inline-flex flex-row items-center justify-center',
-  vertical: 'block',
-}
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTab' })
+
+export const Tab = forwardRef<HTMLDivElement, Props>(function Tab(props, ref) {
+  const {
+    disabled,
+    value,
+    label,
+    icon,
+    selected,
+    onChange,
+    onClick,
+    titleCase: propsTitleCase,
+    description,
+    avatar,
+    ...rest
+  } = props
+  const classes = useStyles()
+  const titleCase = useTitleCase(propsTitleCase)
+  const orientation = useContext(TabsOrientationContext)
+
+  const labelComponent = getLabelComponent({
+    avatar,
+    description,
+    disabled,
+    label,
+    orientation,
+    titleCase,
+  })
 
-const rootClassesByOrientation = (selected: boolean) => ({
-  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',
-  ],
+  return (
+    <MUITab
+      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,
+      }}
+    />
+  )
 })
 
-const classesByVariant = {
-  scrollable: 'shrink-0 max-w-[264px]',
-  fullWidth: 'shrink flex-grow basis-0',
-}
+Tab.defaultProps = {}
 
+Tab.displayName = 'Tab'
+
+type GetLabelComponentProps = {
+  avatar?: string | null
+  description?: string
+  disabled?: boolean
+  label?: React.ReactNode
+  orientation: 'horizontal' | 'vertical'
+  titleCase?: boolean
+}
 const getLabelComponent = ({
   avatar,
   description,
@@ -94,19 +115,14 @@ const getLabelComponent = ({
   label,
   orientation,
   titleCase,
-}: {
-  avatar?: string | null
-  description?: string
-  disabled?: boolean
-  label?: React.ReactNode
-  orientation: 'horizontal' | 'vertical'
-  titleCase?: boolean
-}): React.ReactNode => {
+}: GetLabelComponentProps): React.ReactNode => {
   if (!label) {
     return null
   }
+
   const isHorizontal = orientation === 'horizontal'
   const isCustomLabel = typeof label !== 'string'
+
   const Label = () => (
     <TabLabel titleCase={titleCase} label={label} orientation={orientation} />
   )
@@ -114,6 +130,7 @@ const getLabelComponent = ({
   if (isHorizontal || isCustomLabel) {
     return <Label />
   }
+
   if (typeof avatar === 'undefined') {
     return (
       <>
@@ -134,91 +151,4 @@ const getLabelComponent = ({
   )
 }
 
-// eslint-disable-next-line func-style
-function TabInner<T = number>(props: TabProps<T>, ref: Ref<HTMLButtonElement>) {
-  const {
-    disabled,
-    value,
-    label,
-    icon,
-    titleCase: propsTitleCase,
-    description,
-    avatar,
-    className,
-    onClick,
-    ...rest
-  } = props
-  const titleCase = useTitleCase(propsTitleCase)
-  const {
-    value: selectedValue,
-    onChange,
-    orientation,
-    variant,
-  } = useTabsContext()
-  const isHorizontal = orientation === 'horizontal'
-  const selected = value === selectedValue
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (!disabled && onChange) {
-      onChange(event, value as T)
-    }
-    onClick?.(event)
-  }
-
-  const renderLabel = getLabelComponent({
-    avatar,
-    description,
-    disabled,
-    label,
-    orientation,
-    titleCase,
-  })
-
-  return (
-    <button
-      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}
-    >
-      <span
-        className={twJoin('w-full', wrapperClassesByOrientation[orientation])}
-      >
-        {renderLabel}
-        {icon && (
-          <span className='absolute top-0 right-0 mb-0 flex items-center'>
-            {icon}
-          </span>
-        )}
-      </span>
-    </button>
-  )
-}
-
-TabInner.displayName = 'Tab'
-
-export const Tab = forwardRef(TabInner) as <T = number>(
-  props: TabProps<T> & { ref?: Ref<HTMLButtonElement> }
-) => ReactElement | null
-
 export default Tab

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

@@ -6,29 +6,31 @@ exports[`Tab Tab disabled tab 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        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"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
-            aria-disabled="true"
             aria-selected="false"
-            class="opacity-50 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none shrink-0 max-w text-gray pointer-events 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"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit Mui-disabled Mui-disabled"
             disabled=""
             role="tab"
             tabindex="-1"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -38,6 +40,10 @@ exports[`Tab Tab disabled tab 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -50,27 +56,30 @@ exports[`Tab Tab renders 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        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"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pt-0 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-w sm:min-w md:min-w border-0 cursor-pointer inline-flex outline-none items-center select-none align-middle appearance-none justify-center no-underline [-webkit-tap-highlight normal-case whitespace-normal leading-4 relative"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
@@ -80,6 +89,10 @@ exports[`Tab Tab renders 1`] = `
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>
@@ -92,43 +105,46 @@ exports[`Tab Tab tab with icon 1`] = `
     class="Picasso-root"
   >
     <div
-      aria-orientation="horizontal"
-      class="relative min-h flex overflow-hidden overflow-x"
+      class="MuiTabs-root Tabs-horizontal"
       data-component-type="tabs"
     >
       <div
-        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"
+        class="MuiTabs-scrollable"
+        style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+      />
+      <div
+        class="MuiTabs-scroller MuiTabs-scrollable"
+        style="margin-bottom: 0px;"
       >
         <div
-          class="flex"
+          class="MuiTabs-flexContainer"
           role="tablist"
-          tabindex="-1"
         >
           <button
             aria-selected="false"
-            class="opacity-70 m-0 [&:not(:last-child)]:mr-8 pb-[0.4375rem] px-0 text-center bg-transparent transition-shadow z-10 rounded-none text-black shrink-0 max-w min-h pt-0 pr-6 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"
+            class="MuiButtonBase-root MuiTab-root PicassoTab-horizontal MuiTab-textColorInherit MuiTab-labelIcon"
             role="tab"
             tabindex="0"
             type="button"
           >
             <span
-              class="w-full inline-flex flex-row items-center justify-center"
+              class="MuiTab-wrapper PicassoTab-wrapper"
             >
+              <div
+                id="Icon"
+              />
               <div
                 class="m-0 text-sm text-inherit font-semibold leading-[1.1rem]"
               >
                 Tab Label
               </div>
-              <span
-                class="absolute top-0 right-0 mb-0 flex items-center"
-              >
-                <div
-                  id="Icon"
-                />
-              </span>
             </span>
           </button>
         </div>
+        <span
+          class="PrivateTabIndicator-root PrivateTabIndicator-colorSecondary MuiTabs-indicator"
+          style="left: 0px; width: 0px;"
+        />
       </div>
     </div>
   </div>

package/src/Tab/index.ts

@@ -1 +1,6 @@
-export { default as Tab, type TabProps } from './Tab'
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Tab'
+
+export { default as Tab } from './Tab'
+export type TabProps = OmitInternalProps<Props>

package/src/Tab/story/CustomValue.example.tsx

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

package/src/Tab/story/IconOrBadge.example.tsx

@@ -4,7 +4,7 @@ import { SPACING_4 } from '@toptal/picasso-utils'
 import { Exclamation16 } from '@toptal/picasso-icons'
 
 const Example = () => {
-  const [value, setValue] = React.useState<number>(0)
+  const [value, setValue] = React.useState(0)
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     setValue(newValue)
@@ -17,9 +17,9 @@ const Example = () => {
           label='Label'
           icon={
             <Tooltip content='Some content...' placement='top'>
-              <div>
+              <span>
                 <Exclamation16 color='red' />
-              </div>
+              </span>
             </Tooltip>
           }
         />