@toptal/picasso-page 5.2.0 → 5.2.2

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemContent.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AA8HvD,QAAA,MAAM,kBAAkB,UAAW,KAAK,gBA+BvC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"SidebarItemContent.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/SidebarItemContent.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,SAAS,CAAA;AAuHvD,QAAA,MAAM,kBAAkB,UAAW,KAAK,gBA+BvC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist-package/src/SidebarItemContent/SidebarItemContent.js

@@ -11,19 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { useTitleCase } from '@toptal/picasso-shared';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core';
 import { Typography } from '@toptal/picasso-typography';
 import { Tooltip } from '@toptal/picasso-tooltip';
 import { Container } from '@toptal/picasso-container';
 import { Badge } from '@toptal/picasso-badge';
 import { TagRectangular, Indicator } from '@toptal/picasso-tag';
 import { getReactNodeTextContent } from '@toptal/picasso-utils';
-import styles from './styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import useIndicatorOnParentItem from './use-indicator-on-parent-item';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarItemContent',
-});
+import { styles } from './styles';
 const resolveChildrenText = (text, titleCase) => typeof text === 'string' ? (React.createElement(Typography, { color: 'inherit', size: 'medium', titleCase: titleCase, noWrap: true }, text)) : (text);
 const ItemContentBadge = (props) => {
     const { children, variant = 'red' } = props, rest = __rest(props, ["children", "variant"]);
@@ -32,32 +28,28 @@ const ItemContentBadge = (props) => {
 };
 const CompactItemContent = (props) => {
     const { icon, children, badge, isIndicatorVisible, menu } = props;
-    const classes = useStyles();
     const hasBadge = badge != null;
     const hasSubItems = menu != null;
     const wrappedIcon = icon && hasBadge && !hasSubItems ? (React.createElement(ItemContentBadge, { content: badge.content, variant: badge.variant }, icon)) : (icon);
-    return (React.createElement(Container, { className: classes.noWrap, inline: true, flex: true, alignItems: 'center', padded: 'small' },
+    return (React.createElement(Container, { className: styles.noWrap, inline: true, flex: true, alignItems: 'center', padded: 'small' },
         React.createElement(Tooltip, { compact: true, placement: 'right', content: getReactNodeTextContent(children) },
-            React.createElement("div", { className: classes.iconWrapper },
+            React.createElement("div", { className: styles.iconWrapper },
                 wrappedIcon,
-                hasSubItems && isIndicatorVisible && (React.createElement(Container, { className: classes.compactIndicator },
+                hasSubItems && isIndicatorVisible && (React.createElement("div", { className: styles.compactIndicator },
                     React.createElement(Indicator, { color: 'red' })))))));
 };
 const ExpandedItemContent = (props) => {
     const { icon, badge, children, testIds, tag, isIndicatorVisible, menu, isSubMenu, } = props;
-    const classes = useStyles();
     const hasIcon = icon != null && !isSubMenu;
     const hasBadge = badge != null;
     const hasTag = tag != null;
     const hasSubItems = menu != null;
-    return (React.createElement(Container, { className: classes.noWrap, inline: true, flex: true, alignItems: 'center', gap: 'xsmall' },
+    return (React.createElement(Container, { className: styles.noWrap, inline: true, flex: true, alignItems: 'center', gap: 'xsmall' },
         !isSubMenu && icon,
-        React.createElement(Container, { className: cx(classes.noWrap, {
-                [classes.withIcon]: hasIcon,
-            }), flex: true, alignItems: 'center', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content }, children),
+        React.createElement(Container, { className: twJoin(styles.noWrap, hasIcon && styles.withIcon), flex: true, alignItems: 'center', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.content }, children),
         hasTag && !hasSubItems && (React.createElement(TagRectangular, { variant: tag.variant || 'red' }, tag.content)),
         hasBadge && !hasSubItems && React.createElement(ItemContentBadge, Object.assign({}, badge)),
-        isIndicatorVisible && hasSubItems && (React.createElement(Container, { className: classes.expandedIndicator },
+        isIndicatorVisible && hasSubItems && (React.createElement("div", { className: styles.expandedIndicator },
             React.createElement(Indicator, { color: 'red' })))));
 };
 const SidebarItemContent = (props) => {

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

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

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

@@ -1,3 +1,8 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "noWrap" | "withIcon" | "hiddenContent" | "iconWrapper" | "compactIndicator" | "expandedIndicator">;
-export default _default;
+export declare const styles: {
+    readonly noWrap: "flex-1 min-w-0";
+    readonly withIcon: "ml-[.375rem]";
+    readonly iconWrapper: "w-[1em] h-[1em] relative";
+    readonly compactIndicator: "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2";
+    readonly expandedIndicator: "mr-[.375rem]";
+};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":";AAGA,wBA0BI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;CAMT,CAAA"}

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

@@ -1,29 +1,8 @@
-import { createStyles } from '@material-ui/core';
-import { rem } from '@toptal/picasso-shared';
-export default () => createStyles({
-    noWrap: {
-        flex: 1,
-        minWidth: 0,
-    },
-    withIcon: {
-        marginLeft: rem('6px'),
-    },
-    hiddenContent: {
-        visibility: 'hidden',
-    },
-    iconWrapper: {
-        width: '1em',
-        height: '1em',
-        position: 'relative',
-    },
-    compactIndicator: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        transform: 'translate(50%, -50%)',
-    },
-    expandedIndicator: {
-        marginRight: rem('6px'),
-    },
-});
+export const styles = {
+    noWrap: 'flex-1 min-w-0',
+    withIcon: 'ml-[.375rem]',
+    iconWrapper: 'w-[1em] h-[1em] relative',
+    compactIndicator: 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2',
+    expandedIndicator: 'mr-[.375rem]',
+};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,MAAM,EAAE;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;KACvB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,UAAU;KACrB;IACD,gBAAgB,EAAE;QAChB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,sBAAsB;KAClC;IACD,iBAAiB,EAAE;QACjB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;KACxB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItemContent/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,0BAA0B;IACvC,gBAAgB,EAAE,yDAAyD;IAC3E,iBAAiB,EAAE,cAAc;CACzB,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":"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"}
+{"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,gFAqEvB,CAAA;AAQD,eAAe,WAAW,CAAA"}

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import cx from 'classnames';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import React, { forwardRef, useCallback, useEffect } from 'react';
 import { Menu } from '@toptal/picasso-menu';
 import { useSidebarContext } from '../PageSidebar/SidebarContextProvider';
@@ -44,10 +44,7 @@ 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('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));
+    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, style: style, className: twMerge('shadow-0 order-1 [&_&]:flex-1 flex-grow-0 flex-shrink-1 max-w-full', bottom && 'order-[99]', (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact) && 'p-2', className) }), items));
 });
 SidebarMenu.defaultProps = {
     bottom: false,

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"SidebarMenu.js","sourceRoot":"","sources":["../../../src/SidebarMenu/SidebarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,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,OAAO,CAChB,oEAAoE,EACpE,MAAM,IAAI,YAAY,EACtB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,KAAI,KAAK,EAC5B,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"

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

@@ -51,10 +51,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                           class="flex items-center"
                         >
                           <div
-                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex flex-1 min-w"
                           >
                             <div
-                              class="items-center flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex flex-1 min-w"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -115,10 +115,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                                   class="flex items-center"
                                 >
                                   <div
-                                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                                    class="gap-2 items-center inline-flex flex-1 min-w"
                                   >
                                     <div
-                                      class="items-center flex PicassoSidebarItemContent-noWrap"
+                                      class="items-center flex flex-1 min-w"
                                     >
                                       <p
                                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -197,10 +197,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                           class="flex items-center"
                         >
                           <div
-                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex flex-1 min-w"
                           >
                             <div
-                              class="items-center flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex flex-1 min-w"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -261,10 +261,10 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                                   class="flex items-center"
                                 >
                                   <div
-                                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                                    class="gap-2 items-center inline-flex flex-1 min-w"
                                   >
                                     <div
-                                      class="items-center flex PicassoSidebarItemContent-noWrap"
+                                      class="items-center flex flex-1 min-w"
                                     >
                                       <p
                                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -313,7 +313,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
             class="flex items-center"
           >
             <div
-              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex flex-1 min-w"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -325,7 +325,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
                 />
               </svg>
               <div
-                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -360,10 +360,10 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
                 class="flex items-center"
               >
                 <div
-                  class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                  class="gap-2 items-center inline-flex flex-1 min-w"
                 >
                   <div
-                    class="items-center flex PicassoSidebarItemContent-noWrap"
+                    class="items-center flex flex-1 min-w"
                   >
                     <p
                       class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -403,7 +403,7 @@ exports[`SidebarItem is selected 1`] = `
             class="flex items-center"
           >
             <div
-              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex flex-1 min-w"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -415,7 +415,7 @@ exports[`SidebarItem is selected 1`] = `
                 />
               </svg>
               <div
-                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -453,10 +453,10 @@ exports[`SidebarItem renders 1`] = `
             class="flex items-center"
           >
             <div
-              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex flex-1 min-w"
             >
               <div
-                class="items-center flex PicassoSidebarItemContent-noWrap"
+                class="items-center flex flex-1 min-w"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -507,7 +507,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                   class="flex items-center"
                 >
                   <div
-                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                    class="gap-2 items-center inline-flex flex-1 min-w"
                   >
                     <svg
                       class="PicassoSvgCandidates16-root"
@@ -519,7 +519,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                       />
                     </svg>
                     <div
-                      class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                      class="items-center flex flex-1 min-w ml-[.375rem]"
                     >
                       <p
                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -580,10 +580,10 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                           class="flex items-center"
                         >
                           <div
-                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex flex-1 min-w"
                           >
                             <div
-                              class="items-center flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex flex-1 min-w"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -628,7 +628,7 @@ exports[`SidebarItem with icon 1`] = `
             class="flex items-center"
           >
             <div
-              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex flex-1 min-w"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -640,7 +640,7 @@ exports[`SidebarItem with icon 1`] = `
                 />
               </svg>
               <div
-                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex flex-1 min-w ml-[.375rem]"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"

package/src/SidebarItemContent/SidebarItemContent.tsx

@@ -1,23 +1,17 @@
 import type { ReactNode } from 'react'
 import React from 'react'
 import { useTitleCase } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core'
 import { Typography } from '@toptal/picasso-typography'
 import { Tooltip } from '@toptal/picasso-tooltip'
 import { Container } from '@toptal/picasso-container'
 import { Badge } from '@toptal/picasso-badge'
-import { TagRectangular , Indicator } from '@toptal/picasso-tag'
+import { TagRectangular, Indicator } from '@toptal/picasso-tag'
 import { getReactNodeTextContent } from '@toptal/picasso-utils'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import type { Props, SidebarBadgeProps } from './types'
 import useIndicatorOnParentItem from './use-indicator-on-parent-item'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSidebarItemContent',
-})
+import { styles } from './styles'
 
 const resolveChildrenText = (text: ReactNode, titleCase: boolean) =>
   typeof text === 'string' ? (
@@ -43,7 +37,6 @@ const ItemContentBadge = (
 
 const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
   const { icon, children, badge, isIndicatorVisible, menu } = props
-  const classes = useStyles()
 
   const hasBadge = badge != null
   const hasSubItems = menu != null
@@ -59,7 +52,7 @@ const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
 
   return (
     <Container
-      className={classes.noWrap}
+      className={styles.noWrap}
       inline
       flex
       alignItems='center'
@@ -70,12 +63,12 @@ const CompactItemContent = (props: Props & { isIndicatorVisible: boolean }) => {
         placement='right'
         content={getReactNodeTextContent(children)}
       >
-        <div className={classes.iconWrapper}>
+        <div className={styles.iconWrapper}>
           {wrappedIcon}
           {hasSubItems && isIndicatorVisible && (
-            <Container className={classes.compactIndicator}>
+            <div className={styles.compactIndicator}>
               <Indicator color='red' />
-            </Container>
+            </div>
           )}
         </div>
       </Tooltip>
@@ -96,7 +89,6 @@ const ExpandedItemContent = (
     menu,
     isSubMenu,
   } = props
-  const classes = useStyles()
 
   const hasIcon = icon != null && !isSubMenu
   const hasBadge = badge != null
@@ -105,7 +97,7 @@ const ExpandedItemContent = (
 
   return (
     <Container
-      className={classes.noWrap}
+      className={styles.noWrap}
       inline
       flex
       alignItems='center'
@@ -114,9 +106,7 @@ const ExpandedItemContent = (
       {!isSubMenu && icon}
 
       <Container
-        className={cx(classes.noWrap, {
-          [classes.withIcon]: hasIcon,
-        })}
+        className={twJoin(styles.noWrap, hasIcon && styles.withIcon)}
         flex
         alignItems='center'
         data-testid={testIds?.content}
@@ -130,9 +120,9 @@ const ExpandedItemContent = (
       )}
       {hasBadge && !hasSubItems && <ItemContentBadge {...badge} />}
       {isIndicatorVisible && hasSubItems && (
-        <Container className={classes.expandedIndicator}>
+        <div className={styles.expandedIndicator}>
           <Indicator color='red' />
-        </Container>
+        </div>
       )}
     </Container>
   )

package/src/SidebarItemContent/styles.ts

@@ -1,30 +1,7 @@
-import { createStyles } from '@material-ui/core'
-import { rem } from '@toptal/picasso-shared'
-
-export default () =>
-  createStyles({
-    noWrap: {
-      flex: 1,
-      minWidth: 0,
-    },
-    withIcon: {
-      marginLeft: rem('6px'),
-    },
-    hiddenContent: {
-      visibility: 'hidden',
-    },
-    iconWrapper: {
-      width: '1em',
-      height: '1em',
-      position: 'relative',
-    },
-    compactIndicator: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      transform: 'translate(50%, -50%)',
-    },
-    expandedIndicator: {
-      marginRight: rem('6px'),
-    },
-  })
+export const styles = {
+  noWrap: 'flex-1 min-w-0',
+  withIcon: 'ml-[.375rem]',
+  iconWrapper: 'w-[1em] h-[1em] relative',
+  compactIndicator: 'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2',
+  expandedIndicator: 'mr-[.375rem]',
+} as const

package/src/SidebarMenu/SidebarMenu.tsx

@@ -1,5 +1,5 @@
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef, useCallback, useEffect } from 'react'
 import { Menu } from '@toptal/picasso-menu'
@@ -71,12 +71,10 @@ export const SidebarMenu = forwardRef<HTMLUListElement, Props>(
         allowNestedNavigation={false}
         ref={ref}
         style={style}
-        className={cx(
+        className={twMerge(
           'shadow-0 order-1 [&_&]:flex-1 flex-grow-0 flex-shrink-1 max-w-full',
-          {
-            ['order-[99]']: bottom,
-            ['p-2']: parentMenu?.compact,
-          },
+          bottom && 'order-[99]',
+          parentMenu?.compact && 'p-2',
           className
         )}
       >