@toptal/picasso-page 2.0.13 → 2.0.14-alpha-feature-tailwind-w21-80062bcbc.37

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2021-2022 Toptal, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist-package/src/PageSidebar/PageSidebar.js

@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import { useSidebar } from '@toptal/picasso-provider';
 import cx from 'classnames';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Container } from '@toptal/picasso-container';

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

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/SidebarItem/SidebarItemHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemHeader.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAKtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAQpC,eAAO,MAAM,iBAAiB,2EA+E7B,CAAA"}
+{"version":3,"file":"SidebarItemHeader.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAItD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAuFpC,eAAO,MAAM,iBAAiB,2EAmE7B,CAAA"}

package/dist-package/src/SidebarItem/SidebarItemHeader.js

@@ -9,17 +9,68 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge';
 import React, { forwardRef, useCallback } from 'react';
 import { MenuItem } from '@toptal/picasso-menu';
 import { SidebarItemContent } from '../SidebarItemContent';
-import styles from './styles';
 import { useSubMenuContext } from './SubMenuContextProvider';
 import { getTagProps, getBadgeProps } from './utils';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarItemHeader',
-});
+const getColorStyles = ({ variant, selected, }) => {
+    if (variant === 'light') {
+        if (selected) {
+            return 'text-blue-500 hover:text-blue-500 focus:text-blue-500 bg-gray-300 hover:bg-gray-300 focus:bg-gray-300';
+        }
+        return 'text-graphite-700 hover:text-blue-500 focus:text-blue-500';
+    }
+    if (variant === 'dark') {
+        if (selected) {
+            return 'text-white hover:text-white focus:text-white bg-graphite-700 hover:bg-graphite-700 focus:bg-graphite-700';
+        }
+        return 'hover:text-white focus:text-white';
+    }
+};
+const getSpacingStyles = ({ compact, parentMenu, hasMenu, collapsible, }) => {
+    let pl = 'pl-4';
+    let pr = 'pr-4';
+    let pt = 'pt-0';
+    let pb = 'pb-0';
+    let ml = 'ml-4';
+    let mr = 'mr-4';
+    let mt = 'mt-0';
+    let mb = 'mb-0';
+    if (parentMenu) {
+        pr = 'pr-4';
+        pl = parentMenu.icon ? 'pl-[2.875rem]' : 'pl-8';
+        mr = 'mr-4';
+    }
+    if (compact) {
+        pt = 'pt-0';
+        pb = 'pb-0';
+        pr = 'pr-0';
+        pl = 'pl-0';
+    }
+    if (hasMenu && (collapsible || compact)) {
+        pt = 'pt-0';
+        pb = 'pb-0';
+        pr = 'pr-0';
+        pl = 'pl-0';
+        mt = 'mt-0';
+        mb = 'mb-0';
+        mr = 'mr-0';
+        ml = 'ml-0';
+    }
+    if (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact) {
+        mr = 'mr-0';
+        mt = 'mt-0';
+        mb = 'mb-0';
+        ml = 'ml-0';
+        pt = 'pt-[0.375rem]';
+        pb = 'pb-[0.375rem]';
+        pl = 'pl-4';
+        pr = 'pr-4';
+    }
+    return twJoin(pl, pr, pt, pb, mt, mb, mr, ml);
+};
 export const SidebarItemHeader = forwardRef(function SidebarItemHeader(props, ref) {
     const { className, disabled, menu, selected, compact, variant = 'light', onClick, collapsible, testIds, 
     // these props are being destructured only for the purpose of excluding them from `...rest`
@@ -27,7 +78,6 @@ export const SidebarItemHeader = forwardRef(function SidebarItemHeader(props, re
     icon, isSubMenu, badge, tag, isExpanded, expand, index } = props, 
     /* eslint-enable */
     rest = __rest(props, ["className", "disabled", "menu", "selected", "compact", "variant", "onClick", "collapsible", "testIds", "icon", "isSubMenu", "badge", "tag", "isExpanded", "expand", "index"]);
-    const classes = useStyles();
     const { parentMenu } = useSubMenuContext();
     const hasMenu = menu != null;
     const handleMenuItemClick = useCallback((event) => {
@@ -35,15 +85,8 @@ export const SidebarItemHeader = forwardRef(function SidebarItemHeader(props, re
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
     }, [hasMenu, onClick]);
-    const subMenuClass = parentMenu &&
-        (parentMenu.icon ? classes.nestedMenuWithIcon : classes.nestedMenu);
     const shouldShowSelected = (compact || !hasMenu) && selected;
-    return (React.createElement(MenuItem, Object.assign({}, rest, { classes: classes, ref: ref, className: cx(classes.root, classes.noWrap, classes[variant], subMenuClass, {
-            [classes.compact]: compact,
-            [classes.selected]: shouldShowSelected,
-            [classes.parentCompact]: parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact,
-            [classes.collapsible]: hasMenu && (collapsible || compact),
-        }, className), onClick: handleMenuItemClick, selected: shouldShowSelected, disabled: disabled, variant: variant, nonSelectable: true, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header }),
+    return (React.createElement(MenuItem, Object.assign({}, rest, { ref: ref, className: twMerge('h-[2.75rem] whitespace-nowrap rounded-sm', 'flex-1 min-w-0', getColorStyles({ variant, selected: shouldShowSelected }), getSpacingStyles({ compact, parentMenu, hasMenu, collapsible }), compact && 'overflow-visible', className), onClick: handleMenuItemClick, selected: shouldShowSelected, disabled: disabled, variant: variant, nonSelectable: true, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header }),
         React.createElement(SidebarItemContent, Object.assign({}, props, { badge: getBadgeProps(badge), tag: getTagProps(tag) }))));
 });
 //# sourceMappingURL=SidebarItemHeader.js.map

package/dist-package/src/SidebarItem/SidebarItemHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemHeader.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemHeader.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarItemHeader.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemHeader.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "dark" | "light" | "compact" | "selected" | "collapsible" | "noWrap" | "parentCompact" | "collapsibleWrapper" | "nestedMenu" | "nestedMenuWithIcon" | "expandIcon" | "compactDropdown" | "lightExpandIcon" | "darkExpandIcon" | "expandIconDisabled">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "collapsibleWrapper" | "expandIcon" | "compactDropdown" | "lightExpandIcon" | "darkExpandIcon" | "expandIconDisabled">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;6CAGjB,KAAK;AAAzC,wBAgGI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBA4BI"}

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

@@ -1,68 +1,12 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, sizes }) => createStyles({
+export default ({ palette }) => createStyles({
     root: {
-        height: '2.75em',
-        padding: '0 1rem',
-        margin: '0 1rem',
-        whiteSpace: 'nowrap',
-        borderRadius: sizes.borderRadius.small,
         fontSize: '1rem',
     },
-    light: {
-        color: palette.grey.dark,
-        '&:hover': {
-            color: palette.blue.main,
-        },
-        '&:focus': {
-            color: palette.blue.main,
-        },
-    },
-    dark: {
-        '&:hover': {
-            color: palette.common.white,
-        },
-        '&:focus': {
-            color: palette.common.white,
-        },
-    },
-    selected: {
-        '&$light': {
-            '&, &:hover, &:focus': {
-                color: palette.blue.main,
-                backgroundColor: palette.grey.light,
-            },
-        },
-        '&$dark': {
-            '&, &:hover, &:focus': {
-                color: palette.common.white,
-                backgroundColor: palette.grey.dark,
-            },
-        },
-    },
-    parentCompact: {
-        '&$light': {
-            '&, &:hover, &:focus': {
-                margin: 0,
-                padding: '0.375em 1em',
-                borderRadius: sizes.borderRadius.small,
-                '&$selected': {
-                    backgroundColor: palette.grey.lighter,
-                },
-            },
-        },
-    },
     collapsibleWrapper: {
         padding: '0 0 0 1rem',
         margin: '0 1rem',
     },
-    nestedMenu: {
-        padding: '0 1rem 0 2rem',
-        marginRight: '1rem',
-    },
-    nestedMenuWithIcon: {
-        padding: '0 1rem 0 2.875rem',
-        marginRight: '1rem',
-    },
     content: {
         // to cover text overflow in the sub-menu header item
         maxWidth: '100%',
@@ -82,17 +26,5 @@ export default ({ palette, sizes }) => createStyles({
     expandIconDisabled: {
         color: palette.grey.main,
     },
-    compact: {
-        padding: 0,
-        overflow: 'visible',
-    },
-    noWrap: {
-        flex: 1,
-        minWidth: 0,
-    },
-    collapsible: {
-        margin: 0,
-        padding: 0,
-    },
 });
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;QACtC,QAAQ,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SACzB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;SACzB;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;KACF;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,qBAAqB,EAAE;gBACrB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;gBACxB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;aACpC;SACF;QACD,QAAQ,EAAE;YACR,qBAAqB,EAAE;gBACrB,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;gBAC3B,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACnC;SACF;KACF;IACD,aAAa,EAAE;QACb,SAAS,EAAE;YACT,qBAAqB,EAAE;gBACrB,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,aAAa;gBACtB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;gBACtC,YAAY,EAAE;oBACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;iBACtC;aACF;SACF;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,QAAQ;KACjB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,eAAe;QACxB,WAAW,EAAE,MAAM;KACpB;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,mBAAmB;QAC5B,WAAW,EAAE,MAAM;KACpB;IACD,OAAO,EAAE;QACP,qDAAqD;QACrD,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,KAAK;KAChB;IACD,eAAe,EAAE;QACf,UAAU,EAAE,OAAO;KACpB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,cAAc,EAAE;QACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,SAAS;KACpB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC;KACZ;IACD,WAAW,EAAE;QACX,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;KACjB;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,YAAY;QACrB,MAAM,EAAE,QAAQ;KACjB;IACD,OAAO,EAAE;QACP,qDAAqD;QACrD,QAAQ,EAAE,MAAM;KACjB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,KAAK;KAChB;IACD,eAAe,EAAE;QACf,UAAU,EAAE,OAAO;KACpB;IACD,eAAe,EAAE;QACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,cAAc,EAAE;QACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;CACF,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.d.ts","sourceRoot":"","sources":["../../../src/SidebarMenu/SidebarMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAA6C,MAAM,OAAO,CAAA;AAQjE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAMD,eAAO,MAAM,WAAW,gFAyEvB,CAAA;AAQD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SidebarMenu.d.ts","sourceRoot":"","sources":["../../../src/SidebarMenu/SidebarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAA6C,MAAM,OAAO,CAAA;AAOjE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,WAAW,gFAuEvB,CAAA;AAQD,eAAe,WAAW,CAAA"}

package/dist-package/src/SidebarMenu/SidebarMenu.js

@@ -9,20 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
 import React, { forwardRef, useCallback, useEffect } from 'react';
 import { Menu } from '@toptal/picasso-menu';
 import { useSidebarContext } from '../PageSidebar/SidebarContextProvider';
 import { useSubMenuContext } from '../SidebarItem';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarMenu',
-});
 export const SidebarMenu = forwardRef(function SidebarMenu(props, ref) {
     const { bottom, style, className, children } = props, rest = __rest(props, ["bottom", "style", "className", "children"]);
     const { parentSidebarItemIndex, isSubMenu, parentMenu } = useSubMenuContext();
-    const classes = useStyles();
     const { variant, expandedItemKey, setExpandedItemKey, isCollapsed: isSidebarCollapsed, } = useSidebarContext();
     const expandSidebarItem = useCallback(setExpandedItemKey, [
         setExpandedItemKey,
@@ -50,9 +44,9 @@ export const SidebarMenu = forwardRef(function SidebarMenu(props, ref) {
         }
         return child;
     });
-    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, style: style, className: cx(classes.root, {
-            [classes.bottom]: bottom,
-            [classes.compactParent]: parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact,
+    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, style: style, className: cx('shadow-0 order-1 [&_&]:flex-1 flex-grow-0 flex-shrink-1 max-w-full', {
+            ['order-[99]']: bottom,
+            ['p-2']: parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact,
         }, className) }), items));
 });
 SidebarMenu.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.js","sourceRoot":"","sources":["../../../src/SidebarMenu/SidebarMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarMenu.js","sourceRoot":"","sources":["../../../src/SidebarMenu/SidebarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAOlD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvD,4CAA+C,CAAQ,CAAA;IAC7D,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAE,UAAU,EAAE,GACrD,iBAAiB,EAAE,CAAA;IAErB,MAAM,EACJ,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,WAAW,EAAE,kBAAkB,GAChC,GAAG,iBAAiB,EAAE,CAAA;IAEvB,MAAM,iBAAiB,GAAG,WAAW,CAAC,kBAAkB,EAAE;QACxD,kBAAkB;KACnB,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC3D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAC7D,CAAA;QAED,IAAI,eAAe,IAAI,sBAAsB,KAAK,SAAS,EAAE;YAC3D,kBAAkB,CAAC,sBAAsB,CAAC,CAAA;SAC3C;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC1D,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YAC/B,MAAM,SAAS,GAA8B;gBAC3C,OAAO;gBACP,SAAS;gBACT,OAAO,EAAE,kBAAkB,IAAI,CAAC,SAAS;aAC1C,CAAA;YAED,MAAM,eAAe,GAA8B;gBACjD,KAAK;gBACL,MAAM,EAAE,iBAAiB;gBACzB,UAAU,EAAE,eAAe,KAAK,KAAK;aACtC,CAAA;YAED,MAAM,QAAQ,mCACT,SAAS,GACT,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CACpD,CAAA;YAED,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAC3C;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,qBAAqB,EAAE,KAAK,EAC5B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE;YACE,CAAC,YAAY,CAAC,EAAE,MAAM;YACtB,CAAC,KAAK,CAAC,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO;SAC7B,EACD,SAAS,CACV,KAEA,KAAK,CACD,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,MAAM,EAAE,KAAK;CACd,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"TopBarItem.d.ts","sourceRoot":"","sources":["../../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAS/D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc;IACtD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,EAAE,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IAC/B,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CAC1E;AAID,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAgBlD,CAAA;AASD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TopBarItem.d.ts","sourceRoot":"","sources":["../../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAM/D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc;IACtD,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,EAAE,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IAC/B,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpE,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CAC1E;AAiBD,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CAqBlD,CAAA;AASD,eAAe,UAAU,CAAA"}

package/dist-package/src/TopBarItem/TopBarItem.js

@@ -1,17 +1,23 @@
 import React, { forwardRef, memo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { noop } from '@toptal/picasso-utils';
 import { SidebarItem } from '../SidebarItem';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoTopBarMenuItem' });
+const rootClasses = [
+    'min-[1280px]:text-gray-600 min-[1280px]:p-0 min-[1280px]:h-auto',
+    'min-[1280px]:w-auto min-[1280px]:m-0 min-[1280px]:flex-auto',
+    'min-[1280px]:[&_p]:text-sm',
+];
+const separatorClasses = [
+    'min-[1280px]:before:[&:not(:first-child)]:content-[""]',
+    'min-[1280px]:before:bg-gray-600 min-[1280px]:before:inline-block',
+    'min-[1280px]:before:h-2 min-[1280px]:before:mx-2 min-[1280px]:before:w-[1px]',
+];
+const bgClasses = 'min-[1280px]:hover:bg-transparent min-[1280px]:focus:bg-transparent';
+const textColorClasses = 'min-[1280px]:hover:text-gray-400 min-[1280px]:hover:text-white';
 export const TopBarItem = memo(forwardRef(function TopBarItem(props, ref) {
     const { className, icon } = props;
-    const classes = useStyles();
-    return (React.createElement(SidebarItem, Object.assign({}, props, { className: cx(classes.root, className, {
-            [classes.selected]: props.selected,
-            [classes.icon]: icon,
-        }), ref: ref })));
+    return (React.createElement(SidebarItem, Object.assign({}, props, { className: twMerge(rootClasses, separatorClasses, bgClasses, textColorClasses, icon && 'min-[1280px]:[&_svg]:w-[1em]', props.selected &&
+            'min-[1280px]:bg-transparent min-[1280px]:text-white', className), ref: ref })));
 }));
 TopBarItem.defaultProps = {
     onClick: noop,

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

@@ -1 +1 @@
-{"version":3,"file":"TopBarItem.js","sourceRoot":"","sources":["../../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,MAAM,MAAM,UAAU,CAAA;AAe7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAA;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAgC,IAAI,CACzD,UAAU,CAAqB,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC3D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACjC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,IACT,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE;YACrC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;YAClC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI;SACrB,CAAC,EACF,GAAG,EAAE,GAAG,IACR,CACH,CAAA;AACH,CAAC,CAAC,CACH,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TopBarItem.js","sourceRoot":"","sources":["../../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAe5C,MAAM,WAAW,GAAG;IAClB,iEAAiE;IACjE,6DAA6D;IAC7D,4BAA4B;CAC7B,CAAA;AACD,MAAM,gBAAgB,GAAG;IACvB,wDAAwD;IACxD,kEAAkE;IAClE,8EAA8E;CAC/E,CAAA;AACD,MAAM,SAAS,GACb,qEAAqE,CAAA;AACvE,MAAM,gBAAgB,GACpB,gEAAgE,CAAA;AAElE,MAAM,CAAC,MAAM,UAAU,GAAgC,IAAI,CACzD,UAAU,CAAqB,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC3D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAEjC,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,IACT,SAAS,EAAE,OAAO,CAChB,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,IAAI,IAAI,8BAA8B,EACtC,KAAK,CAAC,QAAQ;YACZ,qDAAqD,EACvD,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACR,CACH,CAAA;AACH,CAAC,CAAC,CACH,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"TopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/TopBarMenu/TopBarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAQzC,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAID,eAAO,MAAM,UAAU,gFAqBtB,CAAA;AAID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/TopBarMenu/TopBarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACxE,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,UAAU,gFAoBtB,CAAA;AAID,eAAe,UAAU,CAAA"}

package/dist-package/src/TopBarMenu/TopBarMenu.js

@@ -10,18 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Menu } from '@toptal/picasso-menu';
 import { useRegisterMenu } from '../PageHamburger';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoTopBarMenu' });
 export const TopBarMenu = forwardRef(function TopBarMenu(props, ref) {
-    const { children } = props, rest = __rest(props, ["children"]);
-    const classes = useStyles();
+    const { children } = props, rest = __rest(props
+    // not more than 6 menu items are allowed by BASE design
+    , ["children"]);
     // not more than 6 menu items are allowed by BASE design
     const items = React.Children.toArray(children).slice(0, 6);
     useRegisterMenu();
-    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, className: classes.root }), items));
+    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, className: 'block min-[1280px]:flex shadow-0' }), items));
 });
 TopBarMenu.displayName = 'TopBarMenu';
 export default TopBarMenu;

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

@@ -1 +1 @@
-{"version":3,"file":"TopBarMenu.js","sourceRoot":"","sources":["../../../src/TopBarMenu/TopBarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC5B,MAAM,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7B,YAAqB,CAAQ,CAAA;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,wDAAwD;IACxD,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,eAAe,EAAE,CAAA;IAEjB,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,qBAAqB,EAAE,KAAK,EAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,IAAI,KAEtB,KAAK,CACD,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TopBarMenu.js","sourceRoot":"","sources":["../../../src/TopBarMenu/TopBarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAOlD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC5B,MAAM,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK;IAEnC,wDAAwD;MAFlD,YAAqB,CAAQ,CAAA;IAEnC,wDAAwD;IACxD,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,eAAe,EAAE,CAAA;IAEjB,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,qBAAqB,EAAE,KAAK,EAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,kCAAkC,KAE3C,KAAK,CACD,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "2.0.13",
+  "version": "2.0.14-alpha-feature-tailwind-w21-80062bcbc.37+80062bcbc",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,25 +22,24 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "1.0.17",
-    "@toptal/picasso-autocomplete": "1.0.19",
-    "@toptal/picasso-avatar": "2.0.2",
-    "@toptal/picasso-badge": "1.0.3",
-    "@toptal/picasso-button": "2.0.3",
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-dropdown": "2.0.3",
-    "@toptal/picasso-icons": "1.1.1",
-    "@toptal/picasso-logo": "1.0.4",
-    "@toptal/picasso-menu": "1.0.11",
-    "@toptal/picasso-notification": "2.0.9",
-    "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-tag": "2.0.0",
-    "@toptal/picasso-tooltip": "1.1.2",
-    "@toptal/picasso-typography": "2.0.1",
-    "@toptal/picasso-user-badge": "2.0.2",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1",
-    "tailwind-merge": "^2.2.2"
+    "@toptal/picasso-accordion": "1.0.18-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
+    "@toptal/picasso-autocomplete": "1.0.20-alpha-feature-tailwind-w21-80062bcbc.41+80062bcbc",
+    "@toptal/picasso-avatar": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-badge": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-button": "2.0.4-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
+    "@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-dropdown": "2.0.4-alpha-feature-tailwind-w21-80062bcbc.47+80062bcbc",
+    "@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-logo": "1.0.5-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-menu": "1.0.12-alpha-feature-tailwind-w21-80062bcbc.47+80062bcbc",
+    "@toptal/picasso-notification": "2.0.10-alpha-feature-tailwind-w21-80062bcbc.43+80062bcbc",
+    "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-tag": "2.0.1-alpha-feature-tailwind-w21-80062bcbc.37+80062bcbc",
+    "@toptal/picasso-tooltip": "1.1.3-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-user-badge": "2.0.3-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
+    "classnames": "^2.5.1"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -49,13 +48,15 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "react-dom": "^18.2.0",
     "@toptal/picasso-tailwind": ">=2.5.0",
-    "react": ">=16.12.0 < 19.0.0"
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
+    "react": ">=16.12.0 < 19.0.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
-    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-80062bcbc.57+80062bcbc",
+    "@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-80062bcbc.4268+80062bcbc",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-80062bcbc.49+80062bcbc",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.1"
   },
@@ -66,5 +67,6 @@
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ]
+  ],
+  "gitHead": "80062bcbc46a12301eaa56445413e62f4a60a3fc"
 }

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

@@ -15,20 +15,19 @@ exports[`PageAutocomplete renders 1`] = `
         class="PicassoContainer-flex"
       >
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoOutlinedInput-rootDark MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
+          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible p-2 h-8 w-[18.75rem] bg-[#081237] after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border-none [&:has(input:focus)]:after:shadow-0 hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-autocomplete="list"
-            aria-invalid="false"
             autocomplete="off"
-            class="MuiInputBase-input MuiOutlinedInput-input PicassoOutlinedInput-input PicassoOutlinedInput-inputMedium PicassoOutlinedInput-inputDark MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
+            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-white [&::placeholder]:text-white [&::placeholder]:opacity-[0.64]"
             data-testid="autocomplete"
             type="text"
             value=""
             variant="dark"
           />
           <div
-            class="MuiInputAdornment-root PicassoInputAdornment-root PicassoOutlinedInput-resetButton MuiInputAdornment-positionEnd"
+            class="text-graphite h-auto flex items-center whitespace-nowrap max-h justify-end ml-auto flex-grow flex-shrink basis-auto invisible"
             data-testid="reset-adornment"
           >
             <button
@@ -54,20 +53,6 @@ exports[`PageAutocomplete renders 1`] = `
               </span>
             </button>
           </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutline PicassoOutlinedInput-notchedOutlineDark"
-            style="padding-left: 8px;"
-          >
-            <legend
-              class="PrivateNotchedOutline-legend"
-              style="width: 0.01px;"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
         </div>
       </div>
       <div

package/src/PageSidebar/PageSidebar.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { useSidebar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import cx from 'classnames'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'

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

@@ -42,7 +42,7 @@ exports[`PageSidebar with menu 1`] = `
             class="PageSidebar-spacer"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
             role="menu"
             tabindex="-1"
           />
@@ -71,12 +71,12 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
             class="PageSidebar-spacer"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
             role="menu"
             tabindex="-1"
           />
           <ul
-            class="MuiList-root PicassoMenu-root PicassoSidebarMenu-root PicassoSidebarMenu-bottom"
+            class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 [&_&]:flex-1 flex-grow flex-shrink max-w order-[99]"
             role="menu"
             tabindex="-1"
           />

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

@@ -168,7 +168,7 @@ exports[`Page.TopBar render with link 1`] = `
                 </div>
               </div>
               <a
-                class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root PicassoLink-blue MuiTypography-colorPrimary"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
                 href="https://www.toptal.com"
               >
                 <svg