@toptal/picasso-page 6.0.3 → 6.0.4-alpha-pf-fix-alpha-release-ea13b5aca.0

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

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGlE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,iCAA4C,CAAA;AAOpE,eAAO,MAAM,IAAI,8EAkCf,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAMlE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,WAAW,iCAA4C,CAAA;AAEpE,eAAO,MAAM,IAAI,8EAwCf,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist-package/src/Page/Page.js

@@ -10,19 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
+import { PicassoProvider } from '@toptal/picasso-provider';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { PageHamburgerContextProvider } from '../PageHamburger';
-import styles from './styles';
+import { createRootClassNames, createRootVariableClassNames, } from './styles';
 export const PageContext = React.createContext({});
-const useStyles = makeStyles(styles, {
-    name: 'Page',
-});
-// eslint-disable-next-line react/display-name
 export const Page = forwardRef(function Page(props, ref) {
-    const { children, className, hamburgerId = 'hamburger', style, width, fullWidth } = props, rest = __rest(props, ["children", "className", "hamburgerId", "style", "width", "fullWidth"]);
-    const classes = useStyles();
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className, '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]', '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]'), style: Object.assign({}, style) }),
+    const { children, className, hamburgerId = 'hamburger', style, width, fullWidth } = props, rest = __rest(props
+    // Set only at runtime via PicassoProvider.disableResponsiveStyle()
+    // (<Picasso responsive={false} />) or extendTheme — not expressible as a
+    // static Tailwind class
+    , ["children", "className", "hamburgerId", "style", "width", "fullWidth"]);
+    // Set only at runtime via PicassoProvider.disableResponsiveStyle()
+    // (<Picasso responsive={false} />) or extendTheme — not expressible as a
+    // static Tailwind class
+    const { contentMinWidth } = PicassoProvider.theme.layout;
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge(...createRootClassNames(), className, ...createRootVariableClassNames()), style: Object.assign(Object.assign({}, (contentMinWidth && { minWidth: contentMinWidth })), style) }),
         React.createElement(PageContext.Provider, { value: { width, fullWidth } },
             React.createElement(PageHamburgerContextProvider, { hamburgerId: hamburgerId }, children))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/Page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,4BAA4B,EAAE,MAAM,kBAAkB,CAAA;AAE/D,OAAO,MAAM,MAAM,UAAU,CAAA;AAc7B,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAA;AAEpE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,MAAM;CACb,CAAC,CAAA;AAEF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAwB,SAAS,IAAI,CACjE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,WAAW,EACzB,KAAK,EACL,KAAK,EACL,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EARH,uEAQL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ,SAAS,EACT,0EAA0E,EAC1E,6EAA6E,CAC9E,EACD,KAAK,EAAE,kBAAK,KAAK,CAAyB;QAE1C,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/C,oBAAC,4BAA4B,IAAC,WAAW,EAAE,WAAW,IACnD,QAAQ,CACoB,CACV,CACnB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/Page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,4BAA4B,EAAE,MAAM,kBAAkB,CAAA;AAE/D,OAAO,EACL,oBAAoB,EACpB,4BAA4B,GAC7B,MAAM,UAAU,CAAA;AAcjB,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAA;AAEpE,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAwB,SAAS,IAAI,CACjE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,WAAW,EACzB,KAAK,EACL,KAAK,EACL,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK;IAET,mEAAmE;IACnE,yEAAyE;IACzE,wBAAwB;MAZlB,uEAQL,CAAQ,CAAA;IAET,mEAAmE;IACnE,yEAAyE;IACzE,wBAAwB;IACxB,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAA;IAExD,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,GAAG,oBAAoB,EAAE,EACzB,SAAS,EACT,GAAG,4BAA4B,EAAE,CAClC,EACD,KAAK,kCACA,CAAC,eAAe,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,GAClD,KAAK;QAGV,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC/C,oBAAC,4BAA4B,IAAC,WAAW,EAAE,WAAW,IACnD,QAAQ,CACoB,CACV,CACnB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}

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

@@ -1,4 +1,3 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ layout, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
-export default _default;
+export declare const createRootClassNames: () => string[];
+export declare const createRootVariableClassNames: () => string[];
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Page/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;8CAGhB,KAAK;AAA1C,wBAgBI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Page/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAO,MAAM,EAI7C,CAAA;AAED,eAAO,MAAM,4BAA4B,QAAO,MAAM,EAGrD,CAAA"}

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

@@ -1,9 +1,10 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ layout, palette }) => createStyles({
-    root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', height: '100%', background: palette.grey.lightest }, (layout.contentMinWidth && { minWidth: layout.contentMinWidth })), { '& > footer, & > header': {
-            flex: 0,
-        }, '& > header + *': {
-            marginTop: 'var(--header-height)',
-        } }),
-});
+export const createRootClassNames = () => [
+    'flex flex-col h-full bg-gray-50',
+    '[&>footer]:flex-[0] [&>header]:flex-[0]',
+    '[&>header+*]:mt-[var(--header-height)]',
+];
+export const createRootVariableClassNames = () => [
+    '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]',
+    '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]',
+];
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Page/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAS,EAAE,EAAE,CAC5C,YAAY,CAAC;IACX,IAAI,gCACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,IAC9B,CAAC,MAAM,CAAC,eAAe,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,KAEnE,wBAAwB,EAAE;YACxB,IAAI,EAAE,CAAC;SACR,EACD,gBAAgB,EAAE;YAChB,SAAS,EAAE,sBAAsB;SAClC,GACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Page/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAa,EAAE,CAAC;IAClD,iCAAiC;IACjC,yCAAyC;IACzC,wCAAwC;CACzC,CAAA;AAED,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAa,EAAE,CAAC;IAC1D,0EAA0E;IAC1E,6EAA6E;CAC9E,CAAA"}

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":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,eAAO,MAAM,oBAAoB,2EAoDhC,CAAA"}
+{"version":3,"file":"SidebarItemAccordion.d.ts","sourceRoot":"","sources":["../../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAOtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,eAAO,MAAM,oBAAoB,2EAsDhC,CAAA"}

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

@@ -1,4 +1,5 @@
 import React, { forwardRef, useCallback } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 import { Accordion } from '@toptal/picasso-accordion';
 import { ArrowDownMinor16 } from '@toptal/picasso-icons';
 import { SubMenuContextProvider } from './SubMenuContextProvider';
@@ -13,10 +14,7 @@ export const SidebarItemAccordion = forwardRef(function SidebarItemAccordion(pro
     }, [index, expand]);
     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: '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(Accordion, { onChange: handleAccordionChange, className: twMerge('[&_[data-component-type="accordion-summary"]]:p-0', '[&_[data-component-type="accordion-summary"]]:pl-4', '[&_[data-component-type="accordion-summary"]]:mx-4', '[&_[data-component-type="accordion-summary-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,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"}
+{"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,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,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,SAAS,EAAE,OAAO,CAChB,mDAAmD,EACnD,oDAAoD,EACpD,oDAAoD,EACpD,kEAAkE,CACnE,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "6.0.3",
+  "version": "6.0.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -18,44 +18,42 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "classnames": "^2.5.1",
-    "@toptal/picasso-accordion": "4.0.2",
-    "@toptal/picasso-autocomplete": "6.0.3",
-    "@toptal/picasso-avatar": "7.0.2",
-    "@toptal/picasso-badge": "4.0.1",
-    "@toptal/picasso-button": "5.0.2",
-    "@toptal/picasso-container": "3.1.5",
-    "@toptal/picasso-dropdown": "5.0.1",
-    "@toptal/picasso-icons": "1.15.3",
-    "@toptal/picasso-logo": "2.0.19",
-    "@toptal/picasso-menu": "4.0.2",
-    "@toptal/picasso-notification": "5.0.2",
-    "@toptal/picasso-shared": "16.0.0",
-    "@toptal/picasso-tag": "5.0.2",
-    "@toptal/picasso-tooltip": "2.0.7",
-    "@toptal/picasso-typography": "5.1.0",
-    "@toptal/picasso-user-badge": "5.1.24",
-    "@toptal/picasso-utils": "4.0.1"
+    "@toptal/picasso-accordion": "4.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-autocomplete": "6.0.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-avatar": "7.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-badge": "4.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-button": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-dropdown": "5.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-container": "3.1.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-logo": "2.0.20-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-notification": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-tag": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-tooltip": "2.0.8-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-menu": "4.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-icons": "1.15.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-user-badge": "5.1.25-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-utils": "4.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-typography": "5.1.1-alpha-pf-fix-alpha-release-ea13b5aca.0"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-tailwind-merge": "^2.0.0",
-    "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "*",
+    "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
     "react-dom": "^18.2.0",
-    "@toptal/picasso-tailwind": ">=2.7",
-    "@toptal/picasso-skeleton-loader": "^1.0.37",
-    "react": ">=16.12.0 < 19.0.0"
+    "@toptal/picasso-tailwind": "4.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-skeleton-loader": "^1.0.72-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "react": ">=16.12.0"
   },
   "devDependencies": {
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.1",
-    "@toptal/picasso-tailwind-merge": "2.0.5",
-    "@toptal/picasso-provider": "6.0.0",
-    "@toptal/picasso-test-utils": "2.0.1"
+    "@toptal/picasso-tailwind-merge": "2.0.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-provider": "6.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
+    "@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

package/src/Page/Page.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { BaseProps } from '@toptal/picasso-shared'
+import { PicassoProvider } from '@toptal/picasso-provider'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { PageHamburgerContextProvider } from '../PageHamburger'
 import type { PageContextProps, ViewportWidthType } from './types'
-import styles from './styles'
+import {
+  createRootClassNames,
+  createRootVariableClassNames,
+} from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** DEPRECATED! Component becomes responsive with width 100% and overrides width prop */
@@ -23,11 +25,6 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
 
 export const PageContext = React.createContext<PageContextProps>({})
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'Page',
-})
-
-// eslint-disable-next-line react/display-name
 export const Page = forwardRef<HTMLDivElement, Props>(function Page(
   props,
   ref
@@ -41,19 +38,25 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
     fullWidth,
     ...rest
   } = props
-  const classes = useStyles()
+
+  // Set only at runtime via PicassoProvider.disableResponsiveStyle()
+  // (<Picasso responsive={false} />) or extendTheme — not expressible as a
+  // static Tailwind class
+  const { contentMinWidth } = PicassoProvider.theme.layout
 
   return (
     <div
       {...rest}
       ref={ref}
-      className={cx(
-        classes.root,
+      className={twMerge(
+        ...createRootClassNames(),
         className,
-        '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]',
-        '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]'
+        ...createRootVariableClassNames()
       )}
-      style={{ ...style } as React.CSSProperties}
+      style={{
+        ...(contentMinWidth && { minWidth: contentMinWidth }),
+        ...style,
+      }}
     >
       <PageContext.Provider value={{ width, fullWidth }}>
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>

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

@@ -6,7 +6,7 @@ exports[`Page renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Page-root [--content-padding md:[--content-padding [--header [--content-width [--content"
+      class="flex flex-col h-full bg-gray [&>footer]:flex-[0] [&>header]:flex-[0] [&>header+*]:mt-[var(--header [--content-padding md:[--content-padding [--header [--content-width [--content"
     >
       <div>
         Test

package/src/Page/styles.ts

@@ -1,20 +1,10 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+export const createRootClassNames = (): string[] => [
+  'flex flex-col h-full bg-gray-50',
+  '[&>footer]:flex-[0] [&>header]:flex-[0]',
+  '[&>header+*]:mt-[var(--header-height)]',
+]
 
-export default ({ layout, palette }: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      background: palette.grey.lightest,
-      ...(layout.contentMinWidth && { minWidth: layout.contentMinWidth }),
-
-      '& > footer, & > header': {
-        flex: 0,
-      },
-      '& > header + *': {
-        marginTop: 'var(--header-height)',
-      },
-    },
-  })
+export const createRootVariableClassNames = (): string[] => [
+  '[--content-padding-horizontal:1em] md:[--content-padding-horizontal:2em]',
+  '[--header-height:3.5rem] [--content-width-wide:90em] [--content-width:75em]',
+]

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

@@ -15,13 +15,13 @@ exports[`PageAutocomplete renders 1`] = `
         class="flex"
       >
         <div
-          class="base-Input base-Input base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap 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(:focus)]:after:border-blue after:border-none [&:has(:focus)]:after:shadow-0 hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
+          class="relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] group text-nowrap 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(:focus)]:after:border-blue after:border-none [&:has(:focus)]:after:shadow-0 hover:[&:not(:has(:focus))]:after:border-gray text-black cursor-[inherit]"
         >
           <input
             aria-autocomplete="list"
             aria-invalid="false"
             autocomplete="off"
-            class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden p-0 peer resize-none w-full text-md leading-4 text-white [&::placeholder]:text-white [&::placeholder]:opacity-[0.64]"
+            class="[&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-hidden 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=""

package/src/SidebarItem/SidebarItemAccordion.tsx

@@ -1,5 +1,6 @@
 import type { ChangeEvent } from 'react'
 import React, { forwardRef, useCallback } from 'react'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 import { Accordion } from '@toptal/picasso-accordion'
 import { ArrowDownMinor16 } from '@toptal/picasso-icons'
 
@@ -44,10 +45,12 @@ export const SidebarItemAccordion = forwardRef<HTMLElement, Props>(
       <ParentItemContextProvider isOpened={isExpanded || false}>
         <Accordion
           onChange={handleAccordionChange}
-          classes={{
-            summary: 'p-0 pl-4 mx-4',
-            content: 'max-w-full',
-          }}
+          className={twMerge(
+            '[&_[data-component-type="accordion-summary"]]:p-0',
+            '[&_[data-component-type="accordion-summary"]]:pl-4',
+            '[&_[data-component-type="accordion-summary"]]:mx-4',
+            '[&_[data-component-type="accordion-summary-content"]]:max-w-full'
+          )}
           content={content}
           borders='none'
           disabled={disabled}

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

@@ -23,130 +23,147 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             tabindex="-1"
           >
             <div
-              class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersNone Mui-expanded MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
+              class="relative bg-transparent text-[1rem] text-graphite [&_[data-component-type="accordion-summary"]]:p [&_[data-component-type="accordion-summary"]]:pl [&_[data-component-type="accordion-summary"]]:mx [&_[data-component-type="accordion-summary-content"]]:max-w"
+              data-component-type="accordion"
+              data-orientation="vertical"
+              dir="ltr"
+              role="region"
             >
               <div
-                aria-disabled="false"
-                aria-expanded="true"
-                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4 Mui-expanded"
-                role="button"
-                tabindex="0"
+                data-index="0"
+                data-open=""
+                data-orientation="vertical"
               >
                 <div
-                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w Mui-expanded"
+                  data-index="0"
+                  data-open=""
+                  data-orientation="vertical"
                 >
-                  <li
-                    aria-disabled="false"
-                    class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
-                    role="menuitem"
+                  <div
+                    aria-controls="base-ui-:r4:"
+                    aria-expanded="true"
+                    class="relative flex items-center select-none cursor-pointer outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+                    data-component-type="accordion-summary"
+                    data-orientation="vertical"
+                    data-panel-open=""
+                    data-value="item"
+                    id="base-ui-:r5:"
+                    role="button"
                     tabindex="0"
                   >
                     <div
-                      class="flex flex-1 max-w"
+                      class="flex grow flex-row items-center justify-between m-0 text-[0.875em] leading-[1.5em]"
+                      data-component-type="accordion-summary-content"
                     >
-                      <div
-                        class="flex flex-col flex-1 min-w"
+                      <li
+                        aria-disabled="false"
+                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                        role="menuitem"
+                        tabindex="0"
                       >
                         <div
-                          class="flex items-center"
+                          class="flex flex-1 max-w"
                         >
-                          <span
-                            class="gap-2 items-center inline-flex flex-1 min-w"
+                          <div
+                            class="flex flex-col flex-1 min-w"
                           >
                             <div
-                              class="items-center flex flex-1 min-w"
+                              class="flex items-center"
                             >
-                              <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                              <span
+                                class="gap-2 items-center inline-flex flex-1 min-w"
                               >
-                                Test item
-                              </p>
+                                <div
+                                  class="items-center flex flex-1 min-w"
+                                >
+                                  <p
+                                    class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                                  >
+                                    Test item
+                                  </p>
+                                </div>
+                              </span>
                             </div>
-                          </span>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </li>
-                  <button
-                    aria-disabled="false"
-                    class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
-                    data-component-type="button"
-                    role="button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="items-center inline-flex font-semibold text-blue text-md"
-                    >
-                      <svg
-                        class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
-                        style="min-width: 16px; min-height: 16px;"
-                        viewBox="0 0 16 16"
+                      </li>
+                      <button
+                        aria-disabled="false"
+                        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                        data-component-type="button"
+                        role="button"
+                        tabindex="0"
+                        type="button"
                       >
-                        <path
-                          d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <span
+                          class="items-center inline-flex font-semibold text-blue text-md"
+                        >
+                          <svg
+                            class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 transition-transform duration-150 ease-in rotate-180 text-base text-graphite"
+                            style="min-width: 16px; min-height: 16px;"
+                            viewBox="0 0 16 16"
+                          >
+                            <path
+                              d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiCollapse-root"
-                style="min-height: 0px; height: 0px; transition-duration: 0ms;"
-              >
                 <div
-                  class="MuiCollapse-wrapper"
+                  aria-labelledby="base-ui-:r5:"
+                  class="overflow-hidden h-[var(--accordion-panel transition-[height] duration-[var(--accordion ease-in data-starting-style:h data-ending-style:h [&[hidden]]:block [&[hidden]]:h-0 [&[hidden]]:invisible"
+                  data-index="0"
+                  data-open=""
+                  data-orientation="vertical"
+                  data-starting-style=""
+                  id="base-ui-:r4:"
+                  role="region"
+                  style="--accordion-panel-height: auto; --accordion-panel-width: auto; --accordion-duration: 300ms;"
                 >
                   <div
-                    class="MuiCollapse-wrapperInner"
+                    class="flex p-0"
                   >
-                    <div
-                      role="region"
+                    <ul
+                      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
+                      role="menu"
+                      tabindex="-1"
                     >
-                      <div
-                        class="flex p-0"
+                      <li
+                        aria-disabled="false"
+                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                        role="menuitem"
+                        tabindex="0"
                       >
-                        <ul
-                          class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
-                          role="menu"
-                          tabindex="-1"
+                        <div
+                          class="flex flex-1 max-w"
                         >
-                          <li
-                            aria-disabled="false"
-                            class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
-                            role="menuitem"
-                            tabindex="0"
+                          <div
+                            class="flex flex-col flex-1 min-w"
                           >
                             <div
-                              class="flex flex-1 max-w"
+                              class="flex items-center"
                             >
-                              <div
-                                class="flex flex-col flex-1 min-w"
+                              <span
+                                class="gap-2 items-center inline-flex flex-1 min-w"
                               >
                                 <div
-                                  class="flex items-center"
+                                  class="items-center flex flex-1 min-w"
                                 >
-                                  <span
-                                    class="gap-2 items-center inline-flex flex-1 min-w"
+                                  <p
+                                    class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                                   >
-                                    <div
-                                      class="items-center flex flex-1 min-w"
-                                    >
-                                      <p
-                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
-                                      >
-                                        Menu item
-                                      </p>
-                                    </div>
-                                  </span>
+                                    Menu item
+                                  </p>
                                 </div>
-                              </div>
+                              </span>
                             </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
                   </div>
                 </div>
               </div>
@@ -182,130 +199,147 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             tabindex="-1"
           >
             <div
-              class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersNone Mui-expanded MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
+              class="relative bg-transparent text-[1rem] text-graphite [&_[data-component-type="accordion-summary"]]:p [&_[data-component-type="accordion-summary"]]:pl [&_[data-component-type="accordion-summary"]]:mx [&_[data-component-type="accordion-summary-content"]]:max-w"
+              data-component-type="accordion"
+              data-orientation="vertical"
+              dir="ltr"
+              role="region"
             >
               <div
-                aria-disabled="false"
-                aria-expanded="true"
-                class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4 Mui-expanded"
-                role="button"
-                tabindex="0"
+                data-index="0"
+                data-open=""
+                data-orientation="vertical"
               >
                 <div
-                  class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w Mui-expanded"
+                  data-index="0"
+                  data-open=""
+                  data-orientation="vertical"
                 >
-                  <li
-                    aria-disabled="false"
-                    class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
-                    role="menuitem"
+                  <div
+                    aria-controls="base-ui-:r7:"
+                    aria-expanded="true"
+                    class="relative flex items-center select-none cursor-pointer outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+                    data-component-type="accordion-summary"
+                    data-orientation="vertical"
+                    data-panel-open=""
+                    data-value="item"
+                    id="base-ui-:r8:"
+                    role="button"
                     tabindex="0"
                   >
                     <div
-                      class="flex flex-1 max-w"
+                      class="flex grow flex-row items-center justify-between m-0 text-[0.875em] leading-[1.5em]"
+                      data-component-type="accordion-summary-content"
                     >
-                      <div
-                        class="flex flex-col flex-1 min-w"
+                      <li
+                        aria-disabled="false"
+                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                        role="menuitem"
+                        tabindex="0"
                       >
                         <div
-                          class="flex items-center"
+                          class="flex flex-1 max-w"
                         >
-                          <span
-                            class="gap-2 items-center inline-flex flex-1 min-w"
+                          <div
+                            class="flex flex-col flex-1 min-w"
                           >
                             <div
-                              class="items-center flex flex-1 min-w"
+                              class="flex items-center"
                             >
-                              <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                              <span
+                                class="gap-2 items-center inline-flex flex-1 min-w"
                               >
-                                Test item
-                              </p>
+                                <div
+                                  class="items-center flex flex-1 min-w"
+                                >
+                                  <p
+                                    class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                                  >
+                                    Test item
+                                  </p>
+                                </div>
+                              </span>
                             </div>
-                          </span>
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </li>
-                  <button
-                    aria-disabled="false"
-                    class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
-                    data-component-type="button"
-                    role="button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="items-center inline-flex font-semibold text-blue text-md"
-                    >
-                      <svg
-                        class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon PicassoAccordion-expandIconExpanded"
-                        style="min-width: 16px; min-height: 16px;"
-                        viewBox="0 0 16 16"
+                      </li>
+                      <button
+                        aria-disabled="false"
+                        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                        data-component-type="button"
+                        role="button"
+                        tabindex="0"
+                        type="button"
                       >
-                        <path
-                          d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
+                        <span
+                          class="items-center inline-flex font-semibold text-blue text-md"
+                        >
+                          <svg
+                            class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 transition-transform duration-150 ease-in rotate-180 text-base text-graphite"
+                            style="min-width: 16px; min-height: 16px;"
+                            viewBox="0 0 16 16"
+                          >
+                            <path
+                              d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div
-                class="MuiCollapse-root"
-                style="min-height: 0px; height: 0px; transition-duration: 0ms;"
-              >
                 <div
-                  class="MuiCollapse-wrapper"
+                  aria-labelledby="base-ui-:r8:"
+                  class="overflow-hidden h-[var(--accordion-panel transition-[height] duration-[var(--accordion ease-in data-starting-style:h data-ending-style:h [&[hidden]]:block [&[hidden]]:h-0 [&[hidden]]:invisible"
+                  data-index="0"
+                  data-open=""
+                  data-orientation="vertical"
+                  data-starting-style=""
+                  id="base-ui-:r7:"
+                  role="region"
+                  style="--accordion-panel-height: auto; --accordion-panel-width: auto; --accordion-duration: 300ms;"
                 >
                   <div
-                    class="MuiCollapse-wrapperInner"
+                    class="flex p-0"
                   >
-                    <div
-                      role="region"
+                    <ul
+                      class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
+                      role="menu"
+                      tabindex="-1"
                     >
-                      <div
-                        class="flex p-0"
+                      <li
+                        aria-disabled="false"
+                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                        role="menuitem"
+                        tabindex="0"
                       >
-                        <ul
-                          class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
-                          role="menu"
-                          tabindex="-1"
+                        <div
+                          class="flex flex-1 max-w"
                         >
-                          <li
-                            aria-disabled="false"
-                            class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
-                            role="menuitem"
-                            tabindex="0"
+                          <div
+                            class="flex flex-col flex-1 min-w"
                           >
                             <div
-                              class="flex flex-1 max-w"
+                              class="flex items-center"
                             >
-                              <div
-                                class="flex flex-col flex-1 min-w"
+                              <span
+                                class="gap-2 items-center inline-flex flex-1 min-w"
                               >
                                 <div
-                                  class="flex items-center"
+                                  class="items-center flex flex-1 min-w"
                                 >
-                                  <span
-                                    class="gap-2 items-center inline-flex flex-1 min-w"
+                                  <p
+                                    class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                                   >
-                                    <div
-                                      class="items-center flex flex-1 min-w"
-                                    >
-                                      <p
-                                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
-                                      >
-                                        Menu item
-                                      </p>
-                                    </div>
-                                  </span>
+                                    Menu item
+                                  </p>
                                 </div>
-                              </div>
+                              </span>
                             </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
+                          </div>
+                        </div>
+                      </li>
+                    </ul>
                   </div>
                 </div>
               </div>
@@ -505,139 +539,154 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersNone MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
+      class="relative bg-transparent text-[1rem] text-graphite [&_[data-component-type="accordion-summary"]]:p [&_[data-component-type="accordion-summary"]]:pl [&_[data-component-type="accordion-summary"]]:mx [&_[data-component-type="accordion-summary-content"]]:max-w"
+      data-component-type="accordion"
+      data-orientation="vertical"
+      dir="ltr"
+      role="region"
     >
       <div
-        aria-disabled="false"
-        aria-expanded="false"
-        class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary p-0 pl-4 mx-4"
-        role="button"
-        tabindex="0"
+        data-closed=""
+        data-index="0"
+        data-orientation="vertical"
       >
         <div
-          class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content max-w"
+          data-closed=""
+          data-index="0"
+          data-orientation="vertical"
         >
-          <li
-            aria-disabled="false"
-            class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
-            role="menuitem"
-            tabindex="-1"
+          <div
+            aria-expanded="false"
+            class="relative flex items-center select-none cursor-pointer outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+            data-component-type="accordion-summary"
+            data-orientation="vertical"
+            data-value=""
+            id="base-ui-:r2:"
+            role="button"
+            tabindex="0"
           >
             <div
-              class="flex flex-1 max-w"
+              class="flex grow flex-row items-center justify-between m-0 text-[0.875em] leading-[1.5em]"
+              data-component-type="accordion-summary-content"
             >
-              <div
-                class="flex flex-col flex-1 min-w"
+              <li
+                aria-disabled="false"
+                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                role="menuitem"
+                tabindex="-1"
               >
                 <div
-                  class="flex items-center"
+                  class="flex flex-1 max-w"
                 >
-                  <span
-                    class="gap-2 items-center inline-flex flex-1 min-w"
+                  <div
+                    class="flex flex-col flex-1 min-w"
                   >
-                    <svg
-                      class="fill-current inline-block text-inherit h-[1em] align-[-.125em]"
-                      style="min-width: 16px; min-height: 16px;"
-                      viewBox="0 0 16 16"
-                    >
-                      <path
-                        d="M16 11H7v4l-7-4V1h16v10Zm-1-9H1v8.42l5 2.857V10h9V2Z"
-                      />
-                    </svg>
                     <div
-                      class="items-center flex flex-1 min-w ml-[.375rem]"
+                      class="flex items-center"
                     >
-                      <p
-                        class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                      <span
+                        class="gap-2 items-center inline-flex flex-1 min-w"
                       >
-                        Test item
-                      </p>
+                        <svg
+                          class="fill-current inline-block text-inherit h-[1em] align-[-.125em]"
+                          style="min-width: 16px; min-height: 16px;"
+                          viewBox="0 0 16 16"
+                        >
+                          <path
+                            d="M16 11H7v4l-7-4V1h16v10Zm-1-9H1v8.42l5 2.857V10h9V2Z"
+                          />
+                        </svg>
+                        <div
+                          class="items-center flex flex-1 min-w ml-[.375rem]"
+                        >
+                          <p
+                            class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
+                          >
+                            Test item
+                          </p>
+                        </div>
+                      </span>
                     </div>
-                  </span>
+                  </div>
                 </div>
-              </div>
-            </div>
-          </li>
-          <button
-            aria-disabled="false"
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="items-center inline-flex font-semibold text-blue text-md"
-            >
-              <svg
-                class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 text-base text-graphite PicassoAccordion-expandIcon"
-                style="min-width: 16px; min-height: 16px;"
-                viewBox="0 0 16 16"
+              </li>
+              <button
+                aria-disabled="false"
+                class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                data-component-type="button"
+                role="button"
+                tabindex="0"
+                type="button"
               >
-                <path
-                  d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
-                />
-              </svg>
-            </span>
-          </button>
+                <span
+                  class="items-center inline-flex font-semibold text-blue text-md"
+                >
+                  <svg
+                    class="fill-current inline-block align-[-.125em] flex-1 w-4 h-4 transition-transform duration-150 ease-in text-base text-graphite"
+                    style="min-width: 16px; min-height: 16px;"
+                    viewBox="0 0 16 16"
+                  >
+                    <path
+                      d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-      <div
-        class="MuiCollapse-root MuiCollapse-hidden"
-        style="min-height: 0px;"
-      >
         <div
-          class="MuiCollapse-wrapper"
+          aria-labelledby="base-ui-:r2:"
+          class="overflow-hidden h-[var(--accordion-panel transition-[height] duration-[var(--accordion ease-in data-starting-style:h data-ending-style:h [&[hidden]]:block [&[hidden]]:h-0 [&[hidden]]:invisible"
+          data-closed=""
+          data-index="0"
+          data-orientation="vertical"
+          hidden=""
+          id="base-ui-:r1:"
+          role="region"
+          style="--accordion-panel-height: auto; --accordion-panel-width: auto; --accordion-duration: 300ms;"
         >
           <div
-            class="MuiCollapse-wrapperInner"
+            class="flex p-0"
           >
-            <div
-              role="region"
+            <ul
+              class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
+              role="menu"
+              tabindex="-1"
             >
-              <div
-                class="flex p-0"
+              <li
+                aria-disabled="false"
+                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                role="menuitem"
+                tabindex="0"
               >
-                <ul
-                  class="relative list-none outline-hidden py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 grow-0 shrink-1 max-w"
-                  role="menu"
-                  tabindex="-1"
+                <div
+                  class="flex flex-1 max-w"
                 >
-                  <li
-                    aria-disabled="false"
-                    class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
-                    role="menuitem"
-                    tabindex="0"
+                  <div
+                    class="flex flex-col flex-1 min-w"
                   >
                     <div
-                      class="flex flex-1 max-w"
+                      class="flex items-center"
                     >
-                      <div
-                        class="flex flex-col flex-1 min-w"
+                      <span
+                        class="gap-2 items-center inline-flex flex-1 min-w"
                       >
                         <div
-                          class="flex items-center"
+                          class="items-center flex flex-1 min-w"
                         >
-                          <span
-                            class="gap-2 items-center inline-flex flex-1 min-w"
+                          <p
+                            class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
                           >
-                            <div
-                              class="items-center flex flex-1 min-w"
-                            >
-                              <p
-                                class="m-0 text-md text-inherit font-regular whitespace-nowrap text-ellipsis overflow-hidden"
-                              >
-                                Menu item
-                              </p>
-                            </div>
-                          </span>
+                            Menu item
+                          </p>
                         </div>
-                      </div>
+                      </span>
                     </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>