@toptal/picasso-page 5.1.6 → 5.1.8

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.1.6",
+  "version": "5.1.8",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,17 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "3.0.9",
-    "@toptal/picasso-autocomplete": "5.0.10",
+    "@toptal/picasso-accordion": "3.0.10",
+    "@toptal/picasso-autocomplete": "5.0.11",
     "@toptal/picasso-avatar": "6.1.3",
     "@toptal/picasso-badge": "3.0.2",
-    "@toptal/picasso-button": "4.0.10",
+    "@toptal/picasso-button": "4.0.11",
     "@toptal/picasso-container": "3.1.0",
     "@toptal/picasso-dropdown": "4.2.0",
     "@toptal/picasso-icons": "1.7.0",
     "@toptal/picasso-logo": "2.0.2",
     "@toptal/picasso-menu": "3.0.8",
-    "@toptal/picasso-notification": "4.0.10",
+    "@toptal/picasso-notification": "4.0.11",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tag": "4.0.3",
     "@toptal/picasso-tooltip": "2.0.0",

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]'
+}