@toptal/picasso-tabs 5.0.11-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.6 → 5.0.12-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.1

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

@@ -1,4 +1,4 @@
 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">;
+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/TabScrollButton/TabScrollButton.d.ts.map

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

@@ -9,31 +9,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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',
-});
+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"]);
-    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)))));
+    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;

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

@@ -1 +1 @@
-{"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"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-tabs",
-  "version": "5.0.11-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.6+992bd4cfc",
+  "version": "5.0.12-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.1+abb0fd45e",
   "description": "Toptal UI components library - Tabs",
   "publishConfig": {
     "access": "public"
@@ -22,15 +22,14 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-container": "3.1.2-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.30+992bd4cfc",
-    "@toptal/picasso-icons": "1.11.1-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.6+992bd4cfc",
-    "@toptal/picasso-shared": "15.0.1-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.283+992bd4cfc",
-    "@toptal/picasso-typography": "4.0.3-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.30+992bd4cfc",
-    "@toptal/picasso-typography-overflow": "4.0.3-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.30+992bd4cfc",
-    "@toptal/picasso-user-badge": "5.1.10-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.6+992bd4cfc",
-    "@toptal/picasso-utils": "3.0.1-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.30+992bd4cfc",
-    "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-container": "3.1.2-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.33+abb0fd45e",
+    "@toptal/picasso-icons": "1.11.1-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.9+abb0fd45e",
+    "@toptal/picasso-shared": "15.0.1-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.286+abb0fd45e",
+    "@toptal/picasso-typography": "4.0.3-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.33+abb0fd45e",
+    "@toptal/picasso-typography-overflow": "4.0.3-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.33+abb0fd45e",
+    "@toptal/picasso-user-badge": "5.1.10-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.9+abb0fd45e",
+    "@toptal/picasso-utils": "3.0.1-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.33+abb0fd45e",
+    "ap-style-title-case": "^1.1.2"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -39,6 +38,7 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
@@ -46,13 +46,13 @@
   },
   "devDependencies": {
     "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "5.0.1-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.204+992bd4cfc",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-MP-672-support-end-adornment-properly-in-number-input-992bd4cfc.283+992bd4cfc"
+    "@toptal/picasso-provider": "5.0.1-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.207+abb0fd45e",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-PF-201-fix-duplicate-sidebar-rendering-abb0fd45e.286+abb0fd45e"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "992bd4cfcc7ead101ea1815874ba2e4366979ee1"
+  "gitHead": "abb0fd45ee07e63b2d55c84bbf7882080c9e569f"
 }

package/src/TabScrollButton/TabScrollButton.tsx

@@ -1,12 +1,9 @@
-import cx from 'classnames'
 import React, { forwardRef } from 'react'
 import { ButtonBase } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
 import { Container } from '@toptal/picasso-container'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 type DirectionType = 'left' | 'right'
 
@@ -17,14 +14,9 @@ export interface Props extends BaseProps {
   disabled?: boolean
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoTabScrollButton',
-})
-
 export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
   function TabScrollButton(props, ref) {
     const { className, style, direction, disabled, ...rest } = props
-    const classes = useStyles()
 
     if (disabled) {
       return null
@@ -34,20 +26,23 @@ export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
       <Container
         {...rest}
         ref={ref}
-        className={cx(classes.root, className)}
+        className={twMerge('relative', className)}
         style={style}
       >
         <Container
-          className={cx(classes.gradient, {
-            [classes.left]: direction === 'left',
-            [classes.right]: direction === 'right',
-          })}
+          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'
+          )}
         >
           <ButtonBase
-            className={cx(classes.button, {
-              [classes.left]: direction === 'left',
-              [classes.right]: direction === 'right',
-            })}
+            className={twMerge(
+              'absolute w-4 h-full',
+              direction === 'left' ? 'left-0' : 'right-0'
+            )}
             aria-label={`${direction} button`}
             data-testid={`tab-scroll-button-${direction}`}
           >

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/src/TabScrollButton/styles.ts

@@ -1,37 +0,0 @@
-import { createStyles } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { alpha } from '@toptal/picasso-shared'
-
-export default ({ palette }: Theme) => {
-  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,
-    },
-  })
-}