@toptal/picasso-page 5.1.7 → 5.1.9

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

@@ -1 +1 @@
-{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/PageContent/PageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAA;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAMD,eAAO,MAAM,WAAW,8EAgCvB,CAAA;AAQD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/PageContent/PageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAQvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAA;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,WAAW,8EA6BvB,CAAA;AAQD,eAAe,WAAW,CAAA"}

package/dist-package/src/PageContent/PageContent.js

@@ -10,25 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useContext, forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { useSidebar } from '@toptal/picasso-provider';
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
 import { PageContext } from '../Page';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPageContent',
-});
+import { getMaxWidthClass } from './styles';
 export const PageContent = forwardRef(function PageContent(props, ref) {
     const { children, className, style, flex } = props, rest = __rest(props, ["children", "className", "style", "flex"]);
-    const classes = useStyles();
     const { width, fullWidth } = useContext(PageContext);
     const { hasSidebar } = useSidebar();
-    const innerClassName = cx({
-        [classes.fullWidth]: fullWidth || width === 'full',
-        [classes.wide]: width === 'wide',
-        [classes.flex]: flex,
-    }, classes.content);
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, { [classes.hasSidebar]: hasSidebar }, className), style: style }),
+    const innerClassName = twJoin('h-full grow bg-[#fcfcfc] bg-clip-content', getMaxWidthClass({ fullWidth, width }), flex && 'flex');
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('flex flex-[1] w-full justify-center', hasSidebar &&
+            'bg-[linear-gradient(90deg,rgb(243,244,246)50%,rgb(252,252,252)50%)]', className), style: style }),
         React.createElement("div", { className: innerClassName }, children)));
 });
 PageContent.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../src/PageContent/PageContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArD,0CAA6C,CAAQ,CAAA;IAE3D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IACtE,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnC,MAAM,cAAc,GAAG,EAAE,CACvB;QACE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,KAAK,KAAK,MAAM;QAClD,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;QAChC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI;KACrB,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,EACpC,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,cAAc,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,IAAI;CACX,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
+{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../src/PageContent/PageContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAS3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArD,0CAA6C,CAAQ,CAAA;IAE3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IACtE,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,EAAE,CAAA;IAEnC,MAAM,cAAc,GAAG,MAAM,CAC3B,0CAA0C,EAC1C,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EACtC,IAAI,IAAI,MAAM,CACf,CAAA;IAED,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,qCAAqC,EACrC,UAAU;YACR,qEAAqE,EACvE,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,cAAc,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,IAAI,EAAE,IAAI;CACX,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/dist-package/src/PageContent/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" | "content" | "flex" | "wide" | "fullWidth" | "hasSidebar">;
-export default _default;
+import type { PageContextProps } from '../Page/types';
+export declare const getMaxWidthClass: ({ fullWidth, width }: PageContextProps) => "max-w-full" | "max-w-[90em]" | "max-w-[75em]";
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageContent/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;8CAGhB,KAAK;AAA1C,wBA2BI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageContent/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,eAAO,MAAM,gBAAgB,yBAA0B,gBAAgB,mDAUtE,CAAA"}

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

@@ -1,29 +1,10 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ layout, palette }) => createStyles({
-    root: {
-        flex: 1,
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-    },
-    content: {
-        height: '100%',
-        flexGrow: 1,
-        maxWidth: layout.contentWidth,
-        backgroundColor: palette.grey.lightest,
-        backgroundClip: 'content-box',
-    },
-    hasSidebar: {
-        background: `linear-gradient(90deg, ${palette.grey.lighter} 50%, ${palette.grey.lightest} 50%)`,
-    },
-    wide: {
-        maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-        maxWidth: '100%',
-    },
-    flex: {
-        display: 'flex',
-    },
-});
+export const getMaxWidthClass = ({ fullWidth, width }) => {
+    if (fullWidth || width === 'full') {
+        return 'max-w-full';
+    }
+    if (width === 'wide') {
+        return 'max-w-[90em]';
+    }
+    return 'max-w-[75em]';
+};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageContent/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,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;KACzB;IACD,OAAO,EAAE;QACP,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC,YAAY;QAC7B,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;QACtC,cAAc,EAAE,aAAa;KAC9B;IACD,UAAU,EAAE;QACV,UAAU,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,QAAQ,OAAO;KAChG;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM,CAAC,gBAAgB;KAClC;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,MAAM;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageContent/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAoB,EAAE,EAAE;IACzE,IAAI,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE;QACjC,OAAO,YAAY,CAAA;KACpB;IAED,IAAI,KAAK,KAAK,MAAM,EAAE;QACpB,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,cAAc,CAAA;AACvB,CAAC,CAAA"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "left" | "right" | "wide" | "fullWidth" | "centered">;
+declare const _default: ({ palette, screens, layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "left" | "right" | "wide" | "root" | "fullWidth" | "centered">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":";AAWA,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,QAAA,MAAM,aAAa,sCAAuC,KAAK,gBAkD9D,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":";AAOA,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,aAAa,sCAAuC,KAAK,gBA+C9D,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist-package/src/PageHamburger/PageHamburger.js

@@ -1,25 +1,16 @@
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Close24, Overview24 } from '@toptal/picasso-icons';
 import { useHamburgerContext } from './PageHamburgerContext';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PageHamburger',
-});
 const PageHamburger = ({ id, 'data-testid': dataTestId }) => {
     const { showSidebarMenu, hamburgerRef } = useHamburgerContext();
     const [showContent, setShowContent] = useState(false);
-    const classes = useStyles();
     const handleShowContent = () => setShowContent(true);
     const handleHideContent = () => setShowContent(false);
-    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), className: cx(classes.root, {
-            [classes.hidden]: !showSidebarMenu,
-        }), classes: {
+    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), className: !showSidebarMenu ? 'hidden' : 'min-[1280px]:hidden', classes: {
             content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
-            popper: classes.popper,
+            popper: 'mt-4',
         }, 
         // The "disablePortal" is needed for testing the dropdown hamburger menu in Cypress.
         // Without it, React fails to create portal inside of portal (via `createPortal()`), so
@@ -34,7 +25,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }) => {
         }, popperProps: {
             role: 'navigation',
         }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
-        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: classes.hamburger })), "data-testid": dataTestId, variant: 'transparent' })));
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: 'transparent' })));
 };
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAS,EAAE,EAAE;IACjE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe;SACnC,CAAC,EACF,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,GAAI,CAC7C,iBAEU,UAAU,EACvB,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAO5D,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAS,EAAE,EAAE;IACjE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,SAAS,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAC9D,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,MAAM;SACf;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "medium" | "dark" | "light" | "large" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "rootCollapsed">;
+declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "large" | "medium" | "dark" | "light" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "rootCollapsed">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "root" | "content" | "left" | "right" | "grey" | "dark" | "light" | "wide" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
+declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "content" | "left" | "right" | "wide" | "root" | "grey" | "dark" | "light" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

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

package/package.json

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

package/src/PageContent/PageContent.tsx

@@ -1,14 +1,12 @@
 import type { ReactNode, HTMLAttributes } from 'react'
 import React, { useContext, 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 { useSidebar } from '@toptal/picasso-provider'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { PageContext } from '../Page'
 import type { PageContextProps } from '../Page/types'
-import styles from './styles'
+import { getMaxWidthClass } from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Custom components that render content of page */
@@ -17,34 +15,27 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   flex?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPageContent',
-})
-
 export const PageContent = forwardRef<HTMLDivElement, Props>(
   function PageContent(props, ref) {
     const { children, className, style, flex, ...rest } = props
 
-    const classes = useStyles()
     const { width, fullWidth } = useContext<PageContextProps>(PageContext)
     const { hasSidebar } = useSidebar()
 
-    const innerClassName = cx(
-      {
-        [classes.fullWidth]: fullWidth || width === 'full',
-        [classes.wide]: width === 'wide',
-        [classes.flex]: flex,
-      },
-      classes.content
+    const innerClassName = twJoin(
+      'h-full grow bg-[#fcfcfc] bg-clip-content',
+      getMaxWidthClass({ fullWidth, width }),
+      flex && 'flex'
     )
 
     return (
       <div
         {...rest}
         ref={ref}
-        className={cx(
-          classes.root,
-          { [classes.hasSidebar]: hasSidebar },
+        className={twMerge(
+          'flex flex-[1] w-full justify-center',
+          hasSidebar &&
+            'bg-[linear-gradient(90deg,rgb(243,244,246)50%,rgb(252,252,252)50%)]',
           className
         )}
         style={style}

package/src/PageContent/styles.ts

@@ -1,31 +1,13 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import type { PageContextProps } from '../Page/types'
 
-export default ({ layout, palette }: Theme) =>
-  createStyles({
-    root: {
-      flex: 1,
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-    },
-    content: {
-      height: '100%',
-      flexGrow: 1,
-      maxWidth: layout.contentWidth,
-      backgroundColor: palette.grey.lightest,
-      backgroundClip: 'content-box',
-    },
-    hasSidebar: {
-      background: `linear-gradient(90deg, ${palette.grey.lighter} 50%, ${palette.grey.lightest} 50%)`,
-    },
-    wide: {
-      maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-      maxWidth: '100%',
-    },
-    flex: {
-      display: 'flex',
-    },
-  })
+export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+  if (fullWidth || width === 'full') {
+    return 'max-w-full'
+  }
+
+  if (width === 'wide') {
+    return 'max-w-[90em]'
+  }
+
+  return 'max-w-[75em]'
+}

package/src/PageHamburger/PageHamburger.tsx

@@ -1,27 +1,18 @@
 import React, { useState } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Dropdown } from '@toptal/picasso-dropdown'
 import { Close24, Overview24 } from '@toptal/picasso-icons'
 
 import { useHamburgerContext } from './PageHamburgerContext'
-import styles from './styles'
 
 interface Props {
   id: string
   'data-testid'?: string
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PageHamburger',
-})
-
 const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
   const { showSidebarMenu, hamburgerRef } = useHamburgerContext()
   const [showContent, setShowContent] = useState<boolean>(false)
-  const classes = useStyles()
 
   const handleShowContent = () => setShowContent(true)
   const handleHideContent = () => setShowContent(false)
@@ -29,12 +20,10 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
   return (
     <Dropdown
       content={<div id={id} ref={hamburgerRef} />}
-      className={cx(classes.root, {
-        [classes.hidden]: !showSidebarMenu,
-      })}
+      className={!showSidebarMenu ? 'hidden' : 'min-[1280px]:hidden'}
       classes={{
         content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
-        popper: classes.popper,
+        popper: 'mt-4',
       }}
       // The "disablePortal" is needed for testing the dropdown hamburger menu in Cypress.
       // Without it, React fails to create portal inside of portal (via `createPortal()`), so
@@ -60,7 +49,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
           showContent ? (
             <Close24 />
           ) : (
-            <Overview24 className={classes.hamburger} />
+            <Overview24 className='pointer-events-none' />
           )
         }
         data-testid={dataTestId}

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

@@ -21,7 +21,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -38,7 +38,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -50,7 +50,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
@@ -120,7 +120,7 @@ exports[`Page.TopBar render with link 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -137,7 +137,7 @@ exports[`Page.TopBar render with link 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -149,7 +149,7 @@ exports[`Page.TopBar render with link 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
@@ -245,7 +245,7 @@ exports[`Page.TopBar renders 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -262,7 +262,7 @@ exports[`Page.TopBar renders 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -274,7 +274,7 @@ exports[`Page.TopBar renders 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >

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

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "hamburger" | "root" | "hidden" | "popper">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":";AAIA,wBAmBC"}

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

@@ -1,23 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { headerBreakingPointXL } from '../PageTopBar/constants';
-export default () => {
-    return createStyles({
-        root: {
-            [headerBreakingPointXL]: {
-                //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-                display: 'none !important',
-            },
-        },
-        popper: {
-            marginTop: '1rem',
-        },
-        hamburger: {
-            pointerEvents: 'none',
-        },
-        hidden: {
-            //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-            display: 'none !important',
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,4LAA4L;gBAC5L,OAAO,EAAE,iBAAiB;aAC3B;SACF;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM;SAClB;QACD,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,4LAA4L;YAC5L,OAAO,EAAE,iBAAiB;SAC3B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/src/PageHamburger/styles.ts

@@ -1,24 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default () => {
-  return createStyles({
-    root: {
-      [headerBreakingPointXL]: {
-        //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-        display: 'none !important',
-      },
-    },
-    popper: {
-      marginTop: '1rem',
-    },
-    hamburger: {
-      pointerEvents: 'none',
-    },
-    hidden: {
-      //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-      display: 'none !important',
-    },
-  })
-}