@toptal/picasso-page 5.4.0 → 5.4.1

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemAccordion.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAOtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,eAAO,MAAM,oBAAoB,2EA6DhC,CAAA"}
+{"version":3,"file":"SidebarItemAccordion.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,eAAO,MAAM,oBAAoB,2EAoDhC,CAAA"}

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

@@ -1,18 +1,12 @@
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import React, { forwardRef, useCallback } from 'react';
 import { Accordion } from '@toptal/picasso-accordion';
 import { ArrowDownMinor16 } from '@toptal/picasso-icons';
-import styles from './styles';
 import { SubMenuContextProvider } from './SubMenuContextProvider';
 import { ParentItemContextProvider } from './ParentItemContextProvider';
 import { SidebarItemHeader } from './SidebarItemHeader';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarItemAccordion',
-});
+import { styles } from './styles';
 export const SidebarItemAccordion = forwardRef(function SidebarItemAccordion(props, ref) {
     const { expand, index, menu, disabled, variant, isExpanded, icon, compact, } = props;
-    const classes = useStyles();
     const handleAccordionChange = useCallback((event, isAccordionExpanded) => {
         event.stopPropagation();
         expand === null || expand === void 0 ? void 0 : expand((isAccordionExpanded && index) || null);
@@ -20,11 +14,9 @@ export const SidebarItemAccordion = forwardRef(function SidebarItemAccordion(pro
     const content = (React.createElement(SubMenuContextProvider, { parentMenu: { icon, compact }, parentSidebarItemIndex: index }, menu));
     return (React.createElement(ParentItemContextProvider, { isOpened: isExpanded || false },
         React.createElement(Accordion, { onChange: handleAccordionChange, classes: {
-                summary: classes.collapsibleWrapper,
-                content: classes.content,
-            }, content: content, borders: 'none', disabled: disabled, expanded: isExpanded, expandIcon: React.createElement(ArrowDownMinor16, { className: cx(classes.expandIcon, classes[`${variant}ExpandIcon`], {
-                    [classes.expandIconDisabled]: disabled,
-                }) }) },
+                summary: 'p-0 pl-4 mx-4',
+                content: 'max-w-full',
+            }, content: content, borders: 'none', disabled: disabled, expanded: isExpanded, expandIcon: React.createElement(ArrowDownMinor16, { className: styles.icon(variant, disabled) }) },
             React.createElement(SidebarItemHeader, Object.assign({}, props, { ref: ref })))));
 });
 //# sourceMappingURL=SidebarItemAccordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemAccordion.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,6BAA6B;CACpC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAC5C,SAAS,oBAAoB,CAAC,KAAY,EAAE,GAAG;IAC7C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,KAAsB,EAAE,mBAA4B,EAAE,EAAE;QACvD,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,mBAAmB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAA;IAClD,CAAC,EACD,CAAC,KAAK,EAAE,MAAM,CAAC,CAChB,CAAA;IAED,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,UAAU,IAAI,KAAK;QACtD,oBAAC,SAAS,IACR,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE;gBACP,OAAO,EAAE,OAAO,CAAC,kBAAkB;gBACnC,OAAO,EAAE,OAAO,CAAC,OAAO;aACzB,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,UAAU,EACR,oBAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,UAAU,EAClB,OAAO,CAAC,GAAG,OAAO,YAAY,CAAC,EAC/B;oBACE,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,QAAQ;iBACvC,CACF,GACD;YAGJ,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAChC,CACc,CAC7B,CAAA;AACH,CAAC,CACF,CAAA"}
+{"version":3,"file":"SidebarItemAccordion.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAEvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAC5C,SAAS,oBAAoB,CAAC,KAAY,EAAE,GAAG;IAC7C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAA;IAET,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,KAAsB,EAAE,mBAA4B,EAAE,EAAE;QACvD,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,mBAAmB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAA;IAClD,CAAC,EACD,CAAC,KAAK,EAAE,MAAM,CAAC,CAChB,CAAA;IAED,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,UAAU,IAAI,KAAK;QACtD,oBAAC,SAAS,IACR,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE;gBACP,OAAO,EAAE,eAAe;gBACxB,OAAO,EAAE,YAAY;aACtB,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,UAAU,EACR,oBAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAI;YAGjE,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAChC,CACc,CAC7B,CAAA;AACH,CAAC,CACF,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemCompact.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemCompact.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAOzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAQpC,eAAO,MAAM,kBAAkB,2EAoC9B,CAAA"}
+{"version":3,"file":"SidebarItemCompact.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemCompact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAOzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,eAAO,MAAM,kBAAkB,2EAmC9B,CAAA"}

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

@@ -1,23 +1,17 @@
-import { makeStyles } from '@material-ui/core/styles';
 import React, { forwardRef } from 'react';
 import { Container } from '@toptal/picasso-container';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { useBoolean as useOpen } from '@toptal/picasso-utils';
 import { SidebarItemHeader } from './SidebarItemHeader';
 import { SubMenuContextProvider } from './SubMenuContextProvider';
-import styles from './styles';
 import { ParentItemContextProvider } from './ParentItemContextProvider';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarItemCompact',
-});
 export const SidebarItemCompact = forwardRef(function CompactSidebarItem(props, ref) {
     const { menu, index, compact, icon, disabled } = props;
     const [isOpened, handleOpen, handleClose] = useOpen();
-    const classes = useStyles();
     const subMenu = (React.createElement(SubMenuContextProvider, { parentMenu: { compact, icon }, parentSidebarItemIndex: index }, menu));
     return (React.createElement(ParentItemContextProvider, { isOpened: isOpened },
         React.createElement(Container, { left: 'small', right: 'small' },
-            React.createElement(Dropdown, { classes: { popper: classes.compactDropdown }, disabled: disabled, placement: 'right-start', content: subMenu, keepMounted: true, onOpen: handleOpen, onClose: handleClose, popperProps: {
+            React.createElement(Dropdown, { classes: { popper: 'ml-2' }, disabled: disabled, placement: 'right-start', content: subMenu, keepMounted: true, onOpen: handleOpen, onClose: handleClose, popperProps: {
                     role: 'menu',
                 } },
                 React.createElement(SidebarItemHeader, Object.assign({}, props, { ref: ref }))))));

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItemCompact.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemCompact.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAEvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,2BAA2B;CAClC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,SAAS,kBAAkB,CAAC,KAAY,EAAE,GAAG;IAC3C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACtD,MAAM,CAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC,GAAG,OAAO,EAAE,CAAA;IACrD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,QAAQ;QAC3C,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;YACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,eAAe,EAAE,EAC5C,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,OAAO,EAChB,WAAW,QACX,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE;oBACX,IAAI,EAAE,MAAM;iBACb;gBAED,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACjC,CACD,CACc,CAC7B,CAAA;AACH,CAAC,CACF,CAAA"}
+{"version":3,"file":"SidebarItemCompact.js","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemCompact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAEvE,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,SAAS,kBAAkB,CAAC,KAAY,EAAE,GAAG;IAC3C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACtD,MAAM,CAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC,GAAG,OAAO,EAAE,CAAA;IAErD,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,QAAQ;QAC3C,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;YACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAC3B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,OAAO,EAChB,WAAW,QACX,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE;oBACX,IAAI,EAAE,MAAM;iBACb;gBAED,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACjC,CACD,CACc,CAC7B,CAAA;AACH,CAAC,CACF,CAAA"}

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

@@ -1,4 +1,5 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "root" | "collapsibleWrapper" | "expandIcon" | "compactDropdown" | "lightExpandIcon" | "darkExpandIcon" | "expandIconDisabled">;
-export default _default;
+import type { VariantType } from '../PageSidebar/types';
+export declare const styles: {
+    icon: (variant?: VariantType, disabled?: boolean) => string;
+};
 //# 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;sCAGxB,KAAK;AAAlC,wBA4BI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,eAAO,MAAM,MAAM;qBACA,WAAW,aAAa,OAAO;CAMjD,CAAA"}

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

@@ -1,30 +1,9 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    root: {
-        fontSize: '1rem',
-    },
-    collapsibleWrapper: {
-        padding: '0 0 0 1rem',
-        margin: '0 1rem',
-    },
-    content: {
-        // to cover text overflow in the sub-menu header item
-        maxWidth: '100%',
-    },
-    expandIcon: {
-        fontSize: '1em',
-    },
-    compactDropdown: {
-        marginLeft: '0.5em',
-    },
-    lightExpandIcon: {
-        color: palette.grey.dark,
-    },
-    darkExpandIcon: {
-        color: palette.grey.main,
-    },
-    expandIconDisabled: {
-        color: palette.grey.main,
-    },
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+export const styles = {
+    icon: (variant, disabled) => twMerge([
+        'text-base',
+        variant === 'light' ? 'text-graphite-700' : 'text-gray-500',
+        disabled && 'text-gray-500',
+    ]),
+};
 //# 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,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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/SidebarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAIxD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,EAAE,CAAC,OAAqB,EAAE,QAAkB,EAAE,EAAE,CAClD,OAAO,CAAC;QACN,WAAW;QACX,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe;QAC3D,QAAQ,IAAI,eAAe;KAC5B,CAAC;CACL,CAAA"}

package/package.json

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

package/src/SidebarItem/SidebarItemAccordion.tsx

@@ -1,20 +1,13 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { ChangeEvent } from 'react'
 import React, { forwardRef, useCallback } from 'react'
 import { Accordion } from '@toptal/picasso-accordion'
 import { ArrowDownMinor16 } from '@toptal/picasso-icons'
 
-import styles from './styles'
 import { SubMenuContextProvider } from './SubMenuContextProvider'
 import { ParentItemContextProvider } from './ParentItemContextProvider'
 import type { Props } from './types'
 import { SidebarItemHeader } from './SidebarItemHeader'
-
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSidebarItemAccordion',
-})
+import { styles } from './styles'
 
 export const SidebarItemAccordion = forwardRef<HTMLElement, Props>(
   function SidebarItemAccordion(props: Props, ref) {
@@ -28,7 +21,6 @@ export const SidebarItemAccordion = forwardRef<HTMLElement, Props>(
       icon,
       compact,
     } = props
-    const classes = useStyles()
 
     const handleAccordionChange = useCallback(
       (event: ChangeEvent<{}>, isAccordionExpanded: boolean) => {
@@ -53,23 +45,15 @@ export const SidebarItemAccordion = forwardRef<HTMLElement, Props>(
         <Accordion
           onChange={handleAccordionChange}
           classes={{
-            summary: classes.collapsibleWrapper,
-            content: classes.content,
+            summary: 'p-0 pl-4 mx-4',
+            content: 'max-w-full',
           }}
           content={content}
           borders='none'
           disabled={disabled}
           expanded={isExpanded}
           expandIcon={
-            <ArrowDownMinor16
-              className={cx(
-                classes.expandIcon,
-                classes[`${variant}ExpandIcon`],
-                {
-                  [classes.expandIconDisabled]: disabled,
-                }
-              )}
-            />
+            <ArrowDownMinor16 className={styles.icon(variant, disabled)} />
           }
         >
           <SidebarItemHeader {...props} ref={ref} />

package/src/SidebarItem/SidebarItemCompact.tsx

@@ -1,5 +1,3 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import React, { forwardRef } from 'react'
 import { Container } from '@toptal/picasso-container'
 import { Dropdown } from '@toptal/picasso-dropdown'
@@ -8,18 +6,12 @@ import { useBoolean as useOpen } from '@toptal/picasso-utils'
 import { SidebarItemHeader } from './SidebarItemHeader'
 import { SubMenuContextProvider } from './SubMenuContextProvider'
 import type { Props } from './types'
-import styles from './styles'
 import { ParentItemContextProvider } from './ParentItemContextProvider'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoSidebarItemCompact',
-})
-
 export const SidebarItemCompact = forwardRef<HTMLElement, Props>(
   function CompactSidebarItem(props: Props, ref) {
     const { menu, index, compact, icon, disabled } = props
     const [isOpened, handleOpen, handleClose] = useOpen()
-    const classes = useStyles()
 
     const subMenu = (
       <SubMenuContextProvider
@@ -34,7 +26,7 @@ export const SidebarItemCompact = forwardRef<HTMLElement, Props>(
       <ParentItemContextProvider isOpened={isOpened}>
         <Container left='small' right='small'>
           <Dropdown
-            classes={{ popper: classes.compactDropdown }}
+            classes={{ popper: 'ml-2' }}
             disabled={disabled}
             placement='right-start'
             content={subMenu}

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

@@ -28,12 +28,12 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
               <div
                 aria-disabled="false"
                 aria-expanded="true"
-                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary PicassoSidebarItemAccordion-collapsibleWrapper Mui-expanded"
+                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4 Mui-expanded"
                 role="button"
                 tabindex="0"
               >
                 <div
-                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoSidebarItemAccordion-content Mui-expanded"
+                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w Mui-expanded"
                 >
                   <li
                     aria-disabled="false"
@@ -68,7 +68,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     </div>
                   </li>
                   <svg
-                    class="PicassoSvgArrowDownMinor16-root PicassoSidebarItemAccordion-expandIcon PicassoSidebarItemAccordion-lightExpandIcon PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
+                    class="PicassoSvgArrowDownMinor16-root text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
                     style="min-width: 16px; min-height: 16px;"
                     viewBox="0 0 16 16"
                   >
@@ -174,12 +174,12 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
               <div
                 aria-disabled="false"
                 aria-expanded="true"
-                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary PicassoSidebarItemAccordion-collapsibleWrapper Mui-expanded"
+                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4 Mui-expanded"
                 role="button"
                 tabindex="0"
               >
                 <div
-                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoSidebarItemAccordion-content Mui-expanded"
+                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w Mui-expanded"
                 >
                   <li
                     aria-disabled="false"
@@ -214,7 +214,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     </div>
                   </li>
                   <svg
-                    class="PicassoSvgArrowDownMinor16-root PicassoSidebarItemAccordion-expandIcon PicassoSidebarItemAccordion-lightExpandIcon PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
+                    class="PicassoSvgArrowDownMinor16-root text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
                     style="min-width: 16px; min-height: 16px;"
                     viewBox="0 0 16 16"
                   >
@@ -484,12 +484,12 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
       <div
         aria-disabled="false"
         aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary PicassoSidebarItemAccordion-collapsibleWrapper"
+        class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4"
         role="button"
         tabindex="0"
       >
         <div
-          class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoSidebarItemAccordion-content"
+          class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w"
         >
           <li
             aria-disabled="false"
@@ -533,7 +533,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
             </div>
           </li>
           <svg
-            class="PicassoSvgArrowDownMinor16-root PicassoSidebarItemAccordion-expandIcon PicassoSidebarItemAccordion-lightExpandIcon PicassoAccordion-expandIcon"
+            class="PicassoSvgArrowDownMinor16-root text-base text-graphite PicassoAccordion-expandIcon"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >

package/src/SidebarItem/styles.ts

@@ -1,32 +1,12 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      fontSize: '1rem',
-    },
-    collapsibleWrapper: {
-      padding: '0 0 0 1rem',
-      margin: '0 1rem',
-    },
-    content: {
-      // to cover text overflow in the sub-menu header item
-      maxWidth: '100%',
-    },
-    expandIcon: {
-      fontSize: '1em',
-    },
-    compactDropdown: {
-      marginLeft: '0.5em',
-    },
-    lightExpandIcon: {
-      color: palette.grey.dark,
-    },
-    darkExpandIcon: {
-      color: palette.grey.main,
-    },
-    expandIconDisabled: {
-      color: palette.grey.main,
-    },
-  })
+import type { VariantType } from '../PageSidebar/types'
+
+export const styles = {
+  icon: (variant?: VariantType, disabled?: boolean) =>
+    twMerge([
+      'text-base',
+      variant === 'light' ? 'text-graphite-700' : 'text-gray-500',
+      disabled && 'text-gray-500',
+    ]),
+}