@toptal/picasso-page 5.1.10 → 5.1.11

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,8EA6Bf,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;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"}

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

@@ -22,7 +22,7 @@ const useStyles = makeStyles(styles, {
 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), style: Object.assign(Object.assign({}, style), { '--header-height': '3.5rem' }) }),
+    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) }),
         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,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,gCAAK,KAAK,KAAE,iBAAiB,EAAE,QAAQ,GAAyB;QAEvE,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../../src/PageFooter/PageFooter.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;AAMvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;AAMD,eAAO,MAAM,UAAU,2EA8BrB,CAAA;AAaF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PageFooter.d.ts","sourceRoot":"","sources":["../../../src/PageFooter/PageFooter.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;AAOvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,2EAiCrB,CAAA;AAaF,eAAe,UAAU,CAAA"}

package/dist-package/src/PageFooter/PageFooter.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 { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
 import { PageContext } from '../Page';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPageFooter',
-});
+import { getMaxWidthClass } from './styles';
 export const PageFooter = forwardRef(function PageFooter(props, ref) {
     const { className, style, rightContent, copyrightContent } = props, rest = __rest(props, ["className", "style", "rightContent", "copyrightContent"]);
-    const classes = useStyles();
     const { width, fullWidth } = useContext(PageContext);
-    const contentClassnames = cx({
-        [classes.fullWidth]: fullWidth || width === 'full',
-        [classes.wide]: width === 'wide',
-    }, classes.content);
-    return (React.createElement("footer", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
+    const contentClassnames = twJoin(getMaxWidthClass({ width, fullWidth }), 'box-border', 'flex justify-between xs:max-lg:flex-col', 'text-white text-md leading-[1em]', 'mx-auto pt-2 pb-6 px-[--content-padding-horizontal]');
+    return (React.createElement("footer", Object.assign({}, rest, { ref: ref, className: twMerge('bg-[#262d3d] w-full', className), style: style }),
         React.createElement("div", { className: contentClassnames },
-            React.createElement("div", { className: classes.left }, copyrightContent),
-            React.createElement("div", { className: classes.right }, rightContent))));
+            React.createElement("div", { className: 'flex items-center justify-center mt-4' }, copyrightContent),
+            React.createElement("div", { className: 'flex items-center justify-center mt-4 xs:max-lg:-order-1 xs:max-md:flex-col' }, rightContent))));
 });
 const CopyrightContent = () => (React.createElement(React.Fragment, null, `© Copyright 2010 – ${new Date().getFullYear()} Toptal, LLC`));
 PageFooter.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../../src/PageFooter/PageFooter.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;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArE,0DAA6D,CAAQ,CAAA;IAC3E,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,iBAAiB,GAAG,EAAE,CAC1B;QACE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,KAAK,KAAK,MAAM;QAClD,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;KACjC,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,iBAAiB;YAC/B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,gBAAgB,CAAO;YAEtD,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,YAAY,CAAO,CAC/C,CACC,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,0CAAG,sBAAsB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,cAAc,CAAI,CACpE,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,YAAY,EAAE,IAAI;IAClB,gBAAgB,EAAE,oBAAC,gBAAgB,OAAG;CACvC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PageFooter.js","sourceRoot":"","sources":["../../../src/PageFooter/PageFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,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,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArE,0DAA6D,CAAQ,CAAA;IAC3E,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,iBAAiB,GAAG,MAAM,CAC9B,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtC,YAAY,EACZ,yCAAyC,EACzC,kCAAkC,EAClC,qDAAqD,CACtD,CAAA;IAED,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,qBAAqB,EAAE,SAAS,CAAC,EACpD,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,iBAAiB;YAC/B,6BAAK,SAAS,EAAC,uCAAuC,IACnD,gBAAgB,CACb;YAEN,6BAAK,SAAS,EAAC,6EAA6E,IACzF,YAAY,CACT,CACF,CACC,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,0CAAG,sBAAsB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,cAAc,CAAI,CACpE,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,YAAY,EAAE,IAAI;IAClB,gBAAgB,EAAE,oBAAC,gBAAgB,OAAG;CACvC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageFooter/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;uDAGP,KAAK;AAAnD,wBAwDI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageFooter/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,eAAO,MAAM,gBAAgB,yBAA0B,gBAAgB,8EAUtE,CAAA"}

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

@@ -1,54 +1,10 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, screens, layout }) => createStyles({
-    root: {
-        backgroundColor: palette.grey.darker,
-        width: '100%',
-    },
-    content: {
-        boxSizing: 'border-box',
-        display: 'flex',
-        justifyContent: 'space-between',
-        margin: '0 auto',
-        paddingTop: '0.5rem',
-        paddingBottom: '1.5rem',
-        paddingLeft: layout.contentMobilePaddingHorizontal,
-        paddingRight: layout.contentMobilePaddingHorizontal,
-        maxWidth: layout.contentWidth,
-        color: palette.common.white,
-        fontSize: '0.875rem',
-        lineHeight: '1em',
-        [screens('xs', 'sm', 'md')]: {
-            flexDirection: 'column',
-        },
-        [screens('md', 'lg', 'xl')]: {
-            paddingLeft: layout.contentPaddingHorizontal,
-            paddingRight: layout.contentPaddingHorizontal,
-        },
-    },
-    centered: {},
-    wide: {
-        maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-        maxWidth: '100%',
-    },
-    left: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: '1rem',
-    },
-    right: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: '1rem',
-        [screens('xs', 'sm', 'md')]: {
-            order: -1,
-        },
-        [screens('xs', 'sm')]: {
-            flexDirection: 'column',
-        },
-    },
-});
+export const getMaxWidthClass = ({ fullWidth, width }) => {
+    if (fullWidth || width === 'full') {
+        return 'max-w-full';
+    }
+    if (width === 'wide') {
+        return 'max-w-[--content-width-wide]';
+    }
+    return 'max-w-[--content-width]';
+};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageFooter/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE,CACrD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QACpC,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE;QACP,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,WAAW,EAAE,MAAM,CAAC,8BAA8B;QAClD,YAAY,EAAE,MAAM,CAAC,8BAA8B;QACnD,QAAQ,EAAE,MAAM,CAAC,YAAY;QAC7B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAC3B,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,KAAK;QAEjB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,aAAa,EAAE,QAAQ;SACxB;QAED,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,WAAW,EAAE,MAAM,CAAC,wBAAwB;YAC5C,YAAY,EAAE,MAAM,CAAC,wBAAwB;SAC9C;KACF;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM,CAAC,gBAAgB;KAClC;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,MAAM;KACjB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,MAAM;KAClB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,MAAM;QAEjB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,KAAK,EAAE,CAAC,CAAC;SACV;QAED,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,aAAa,EAAE,QAAQ;SACxB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageFooter/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,8BAA8B,CAAA;KACtC;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC,CAAA"}

package/package.json

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

package/src/Page/Page.tsx

@@ -47,8 +47,13 @@ export const Page = forwardRef<HTMLDivElement, Props>(function Page(
     <div
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
-      style={{ ...style, '--header-height': '3.5rem' } as React.CSSProperties}
+      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={{ ...style } as React.CSSProperties}
     >
       <PageContext.Provider value={{ width, fullWidth }}>
         <PageHamburgerContextProvider hamburgerId={hamburgerId}>

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

@@ -6,8 +6,7 @@ exports[`Page renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="Page-root"
-      style="--header-height: 3.5rem;"
+      class="Page-root [--content-padding md:[--content-padding [--header [--content-width [--content"
     >
       <div>
         Test

package/src/PageFooter/PageFooter.tsx

@@ -1,13 +1,11 @@
 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 { 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<HTMLElement> {
   /** Content for copyright. You can override default if needed. */
@@ -16,37 +14,36 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   rightContent?: ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPageFooter',
-})
-
 export const PageFooter = forwardRef<HTMLElement, Props>(function PageFooter(
   props,
   ref
 ) {
   const { className, style, rightContent, copyrightContent, ...rest } = props
-  const classes = useStyles()
   const { width, fullWidth } = useContext<PageContextProps>(PageContext)
 
-  const contentClassnames = cx(
-    {
-      [classes.fullWidth]: fullWidth || width === 'full',
-      [classes.wide]: width === 'wide',
-    },
-    classes.content
+  const contentClassnames = twJoin(
+    getMaxWidthClass({ width, fullWidth }),
+    'box-border',
+    'flex justify-between xs:max-lg:flex-col',
+    'text-white text-md leading-[1em]',
+    'mx-auto pt-2 pb-6 px-[--content-padding-horizontal]'
   )
 
   return (
     <footer
       {...rest}
       ref={ref}
-      className={cx(classes.root, className)}
+      className={twMerge('bg-[#262d3d] w-full', className)}
       style={style}
     >
       <div className={contentClassnames}>
-        <div className={classes.left}>{copyrightContent}</div>
+        <div className='flex items-center justify-center mt-4'>
+          {copyrightContent}
+        </div>
 
-        <div className={classes.right}>{rightContent}</div>
+        <div className='flex items-center justify-center mt-4 xs:max-lg:-order-1 xs:max-md:flex-col'>
+          {rightContent}
+        </div>
       </div>
     </footer>
   )

package/src/PageFooter/story/CopyrightContent.example.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Page, Typography } from '@toptal/picasso'
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer copyrightContent={<CopyrightContent />} />
-  </div>
+  </Page>
 )
 
 const CopyrightContent = () => (

package/src/PageFooter/story/Default.example.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Page } from '@toptal/picasso'
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer />
-  </div>
+  </Page>
 )
 
 export default Example

package/src/PageFooter/story/RightContent.example.tsx

@@ -13,9 +13,9 @@ const StyledLink = styled(Link)`
 `
 
 const Example = () => (
-  <div>
+  <Page>
     <Page.Footer rightContent={<Links />} />
-  </div>
+  </Page>
 )
 
 const Links = () => (

package/src/PageFooter/styles.ts

@@ -1,60 +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 ({ palette, screens, layout }: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: palette.grey.darker,
-      width: '100%',
-    },
-    content: {
-      boxSizing: 'border-box',
-      display: 'flex',
-      justifyContent: 'space-between',
-      margin: '0 auto',
-      paddingTop: '0.5rem',
-      paddingBottom: '1.5rem',
-      paddingLeft: layout.contentMobilePaddingHorizontal,
-      paddingRight: layout.contentMobilePaddingHorizontal,
-      maxWidth: layout.contentWidth,
-      color: palette.common.white,
-      fontSize: '0.875rem',
-      lineHeight: '1em',
+export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+  if (fullWidth || width === 'full') {
+    return 'max-w-full'
+  }
 
-      [screens('xs', 'sm', 'md')]: {
-        flexDirection: 'column',
-      },
+  if (width === 'wide') {
+    return 'max-w-[--content-width-wide]'
+  }
 
-      [screens('md', 'lg', 'xl')]: {
-        paddingLeft: layout.contentPaddingHorizontal,
-        paddingRight: layout.contentPaddingHorizontal,
-      },
-    },
-    centered: {},
-    wide: {
-      maxWidth: layout.contentWidthWide,
-    },
-    fullWidth: {
-      maxWidth: '100%',
-    },
-    left: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '1rem',
-    },
-    right: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '1rem',
-
-      [screens('xs', 'sm', 'md')]: {
-        order: -1,
-      },
-
-      [screens('xs', 'sm')]: {
-        flexDirection: 'column',
-      },
-    },
-  })
+  return 'max-w-[--content-width]'
+}