@toptal/picasso 34.0.0 → 34.0.1

package/Page/styles.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ screens, layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
+declare const _default: ({ layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
 export default _default;

package/Page/styles.js

@@ -1,13 +1,10 @@
 import { createStyles } from '@material-ui/core/styles';
-import { headerHeight } from '../PageTopBar/styles';
-export default ({ screens, layout }) => createStyles({
+import { headerHeight } from '../PageTopBar/constants';
+export default ({ layout }) => createStyles({
     root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', height: '100%' }, (layout.contentMinWidth && { minWidth: layout.contentMinWidth })), { '& > footer, & > header': {
             flex: 0,
         }, '& > header + *': {
             marginTop: headerHeight.default,
-            [screens('xs', 'sm')]: {
-                marginTop: headerHeight.smallAndMedium,
-            },
         } }),
 });
 //# sourceMappingURL=styles.js.map

package/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,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE,CAC5C,YAAY,CAAC;IACX,IAAI,gCACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,MAAM,IACX,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,YAAY,CAAC,OAAO;YAC/B,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;gBACrB,SAAS,EAAE,YAAY,CAAC,cAAc;aACvC;SACF,GACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Page/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,eAAe,CAAC,EAAE,MAAM,EAAS,EAAE,EAAE,CACnC,YAAY,CAAC;IACX,IAAI,gCACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,MAAM,EAAE,MAAM,IACX,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,YAAY,CAAC,OAAO;SAChC,GACF;CACF,CAAC,CAAA"}

package/PageArticle/styles.js

@@ -2,9 +2,9 @@ import { createStyles } from '@material-ui/core/styles';
 export default ({ screens, layout }) => createStyles({
     root: {
         flex: 1,
-        margin: `0 ${layout.contentPaddingHorizontal}`,
-        [screens('xs', 'sm')]: {
-            margin: `0 ${layout.contentMobilePaddingHorizontal}`,
+        margin: `0 ${layout.contentMobilePaddingHorizontal}`,
+        [screens('md', 'lg', 'xl')]: {
+            margin: `0 ${layout.contentPaddingHorizontal}`,
         },
     },
 });

package/PageArticle/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageArticle/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE,CAC5C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,KAAK,MAAM,CAAC,wBAAwB,EAAE;QAE9C,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,MAAM,EAAE,KAAK,MAAM,CAAC,8BAA8B,EAAE;SACrD;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageArticle/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE,CAC5C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,KAAK,MAAM,CAAC,8BAA8B,EAAE;QAEpD,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,MAAM,EAAE,KAAK,MAAM,CAAC,wBAAwB,EAAE;SAC/C;KACF;CACF,CAAC,CAAA"}

package/PageFooter/styles.js

@@ -9,7 +9,10 @@ export default ({ palette, screens, layout }) => createStyles({
         display: 'flex',
         justifyContent: 'space-between',
         margin: '0 auto',
-        padding: `0.5rem ${layout.contentPaddingHorizontal} 1.5rem`,
+        paddingTop: '0.5rem',
+        paddingBottom: '1.5rem',
+        paddingLeft: layout.contentMobilePaddingHorizontal,
+        paddingRight: layout.contentMobilePaddingHorizontal,
         maxWidth: layout.contentWidth,
         color: palette.common.white,
         fontSize: '0.875rem',
@@ -17,8 +20,9 @@ export default ({ palette, screens, layout }) => createStyles({
         [screens('xs', 'sm', 'md')]: {
             flexDirection: 'column',
         },
-        [screens('xs', 'sm')]: {
-            padding: `0.5rem ${layout.contentMobilePaddingHorizontal} 1.5rem`,
+        [screens('md', 'lg', 'xl')]: {
+            paddingLeft: layout.contentPaddingHorizontal,
+            paddingRight: layout.contentPaddingHorizontal,
         },
     },
     centered: {},

package/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,OAAO,EAAE,UAAU,MAAM,CAAC,wBAAwB,SAAS;QAC3D,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,CAAC,CAAC,EAAE;YACrB,OAAO,EAAE,UAAU,MAAM,CAAC,8BAA8B,SAAS;SAClE;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":"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"}

package/PageHamburger/PageHamburger.js

@@ -4,8 +4,7 @@ import cx from 'classnames';
 import ButtonCircular from '../ButtonCircular';
 import { useHamburgerContext } from './PageHamburgerContext';
 import Dropdown from '../Dropdown';
-import { Close16, Overview16 } from '../Icon';
-import { useBreakpoint } from '../utils';
+import { Close24, Overview24 } from '../Icon';
 import styles from './styles';
 const useStyles = makeStyles(styles, {
     name: 'PageHamburger',
@@ -14,11 +13,10 @@ const PageHamburger = ({ id }) => {
     const { isHamburgerVisible } = useHamburgerContext();
     const [showContent, setShowContent] = useState(false);
     const classes = useStyles();
-    const isCompactLayout = useBreakpoint(['sm', 'md']);
     const handleShowContent = () => setShowContent(true);
     const handleHideContent = () => setShowContent(false);
-    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id }), className: cx(classes.responsiveWrapper, {
-            [classes.hidden]: !isCompactLayout || !isHamburgerVisible,
+    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id }), className: cx(classes.root, {
+            [classes.hidden]: !isHamburgerVisible,
         }), classes: { content: classes.responsiveWrapperContent }, offset: { top: 0.4 }, popperOptions: {
             modifiers: {
                 flip: { enabled: false },
@@ -29,7 +27,7 @@ const PageHamburger = ({ id }) => {
         }, popperProps: {
             role: 'navigation',
         }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
-        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close16, null)) : (React.createElement(Overview16, { className: classes.hamburger })), variant: 'transparent' })));
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: classes.hamburger })), variant: 'transparent' })));
 };
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.js.map

package/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;AAE3B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,MAAM,MAAM,UAAU,CAAA;AAM7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAS,EAAE,EAAE;IACtC,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEnD,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,GAAI,EACxB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE;YACvC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe,IAAI,CAAC,kBAAkB;SAC1D,CAAC,EACF,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,wBAAwB,EAAE,EACtD,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EACpB,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,EAEH,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;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,MAAM,MAAM,UAAU,CAAA;AAM7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAS,EAAE,EAAE;IACtC,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACpD,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,GAAI,EACxB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,kBAAkB;SACtC,CAAC,EACF,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,wBAAwB,EAAE,EACtD,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EACpB,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,EAEH,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/PageHamburger/PageHamburgerContext.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
+import React from 'react';
 export interface HamburgerContextProps {
     hamburgerId: string;
     isHamburgerVisible: boolean;
-    setIsHamburgerVisible: (showHamburger: boolean) => void;
+    setIsHamburgerVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 interface Props {
     children: ReactNode;

package/PageHamburger/PageHamburgerPortal.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface Props {
     children: React.ReactNode;
 }
-declare const PageHamburgerPortal: ({ children }: Props) => JSX.Element;
+declare const PageHamburgerPortal: ({ children }: Props) => JSX.Element | null;
 export default PageHamburgerPortal;

package/PageHamburger/PageHamburgerPortal.js

@@ -1,10 +1,15 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import Portal from '@material-ui/core/Portal';
 import { getElementById } from '@toptal/picasso-shared';
+import { usePageTopBar } from '@toptal/picasso-provider';
 import { useHamburgerContext } from './PageHamburgerContext';
 const PageHamburgerPortal = ({ children }) => {
-    const { hamburgerId, isHamburgerVisible } = useHamburgerContext();
-    const container = useCallback(() => isHamburgerVisible ? getElementById(hamburgerId) : null, [hamburgerId, isHamburgerVisible]);
+    const { hamburgerId } = useHamburgerContext();
+    const { hasTopBar } = usePageTopBar();
+    const container = getElementById(hamburgerId);
+    if (!container || !hasTopBar) {
+        return null;
+    }
     return React.createElement(Portal, { container: container }, children);
 };
 export default PageHamburgerPortal;

package/PageHamburger/PageHamburgerPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHamburgerPortal.js","sourceRoot":"","sources":["../../src/PageHamburger/PageHamburgerPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAM5D,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClD,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAEjE,MAAM,SAAS,GAAG,WAAW,CAC3B,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7D,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAClC,CAAA;IAED,OAAO,oBAAC,MAAM,IAAC,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAU,CAAA;AAC1D,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"PageHamburgerPortal.js","sourceRoot":"","sources":["../../src/PageHamburger/PageHamburgerPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAM5D,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClD,MAAM,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAErC,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAE7C,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;QAC5B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,oBAAC,MAAM,IAAC,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAU,CAAA;AAC1D,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/PageHamburger/hooks/use-portal-to-hamburger.js

@@ -1,3 +1,4 @@
+import { usePageTopBar } from '@toptal/picasso-provider';
 import { useEffect } from 'react';
 import { useHamburgerContext } from '../PageHamburgerContext';
 /**
@@ -8,9 +9,12 @@ import { useHamburgerContext } from '../PageHamburgerContext';
  */
 const usePortalToHamburger = () => {
     const { setIsHamburgerVisible } = useHamburgerContext();
+    const { hasTopBar } = usePageTopBar();
     useEffect(() => {
-        setIsHamburgerVisible(true);
-    }, []);
+        if (hasTopBar) {
+            setIsHamburgerVisible(true);
+        }
+    }, [hasTopBar, setIsHamburgerVisible]);
 };
 export default usePortalToHamburger;
 //# sourceMappingURL=use-portal-to-hamburger.js.map

package/PageHamburger/hooks/use-portal-to-hamburger.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-portal-to-hamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/hooks/use-portal-to-hamburger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D;;;;;GAKG;AACH,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,qBAAqB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,qBAAqB,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"use-portal-to-hamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/hooks/use-portal-to-hamburger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D;;;;;GAKG;AACH,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,qBAAqB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACvD,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,qBAAqB,CAAC,IAAI,CAAC,CAAA;SAC5B;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/PageHamburger/styles.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, zIndex }: Theme) => import("@material-ui/styles").StyleRules<{}, "hidden" | "hamburger" | "responsiveWrapper" | "responsiveWrapperContent">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "hidden" | "root" | "hamburger" | "responsiveWrapperContent">;
 export default _default;

package/PageHamburger/styles.js

@@ -1,34 +1,24 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, screens, zIndex }) => {
+import { headerHeight, headerBreakingPointXL } from '../PageTopBar/constants';
+export default ({ palette }) => {
     const wrapperBoxShadow = `inset -1px 0px 0px 0px ${palette.grey.lighter2}`;
     return createStyles({
+        root: {
+            display: 'block',
+            [headerBreakingPointXL]: {
+                display: 'none',
+            },
+        },
         hamburger: {
             pointerEvents: 'none',
         },
         hidden: {
             display: 'none',
         },
-        responsiveWrapper: {
-            position: 'fixed',
-            top: '0.75rem',
-            left: '0.75rem',
-            zIndex: zIndex.appBar,
-        },
         responsiveWrapperContent: {
             backgroundColor: palette.grey.lighter,
             boxShadow: wrapperBoxShadow,
-            maxHeight: 'calc(100vh - 4.5rem)',
-            [screens('xs', 'sm')]: {
-                maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
-            },
-            // height under which maxHeight menu starts to overflow
-            // and needs to reduce height dynamically to avoid overflow
-            '@media screen and (max-height: 585px)': {
-                maxHeight: 'calc(100vh - 4.5rem)',
-                [screens('xs', 'sm')]: {
-                    maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
-                },
-            },
+            maxHeight: `calc(100vh - ${headerHeight.default})`, // viewport minus header height: ;
         },
     });
 };

package/PageHamburger/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAS,EAAE,EAAE;IACrD,MAAM,gBAAgB,GAAG,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;IAE1E,OAAO,YAAY,CAAC;QAClB,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;SAChB;QACD,iBAAiB,EAAE;YACjB,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,wBAAwB,EAAE;YACxB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YACrC,SAAS,EAAE,gBAAgB;YAC3B,SAAS,EAAE,sBAAsB;YAEjC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;gBACrB,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;aACjE;YAED,uDAAuD;YACvD,2DAA2D;YAC3D,uCAAuC,EAAE;gBACvC,SAAS,EAAE,sBAAsB;gBAEjC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;oBACrB,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;iBACjE;aACF;SACF;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE7E,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,gBAAgB,GAAG,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;IAE1E,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;YAChB,CAAC,qBAAqB,CAAC,EAAE;gBACvB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;SAChB;QACD,wBAAwB,EAAE;YACxB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YACrC,SAAS,EAAE,gBAAgB;YAC3B,SAAS,EAAE,gBAAgB,YAAY,CAAC,OAAO,GAAG,EAAE,kCAAkC;SACvF;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/PageSidebar/PageSidebar.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
-import { useSidebar } from '@toptal/picasso-provider';
+import { usePageTopBar, useSidebar } from '@toptal/picasso-provider';
 import cx from 'classnames';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import ButtonCircular from '../ButtonCircular';
@@ -9,19 +9,20 @@ import { PageHamburgerPortal, usePortalToHamburger } from '../PageHamburger';
 import SidebarItem from '../SidebarItem';
 import SidebarLogo from '../SidebarLogo';
 import SidebarMenu from '../SidebarMenu';
-import { noop, useBreakpoint } from '../utils';
+import { noop } from '../utils';
 import { SidebarContextProvider } from './SidebarContextProvider';
 import styles from './styles';
 const useStyles = makeStyles(styles, {
     name: 'PageSidebar',
 });
 export const PageSidebar = forwardRef(function Sidebar(props, ref) {
-    const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds, size = 'medium', wrapperMaxHeight, disableSticky, onCollapse, } = props;
+    const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds, size = 'medium', wrapperMaxHeight, disableSticky, onCollapse = noop, } = props;
     const classes = useStyles();
     const { setHasSidebar } = useSidebar();
     const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed);
     const [isHovered, setIsHovered] = useState(false);
     const [expandedItemKey, setExpandedItemKey] = useState(null);
+    const { hasTopBar } = usePageTopBar();
     useEffect(() => {
         // Clear expanded submenu on sidebar collapse
         if (isCollapsed) {
@@ -35,14 +36,15 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
         };
     }, [setHasSidebar]);
     usePortalToHamburger();
-    const isCompactLayout = useBreakpoint(['sm', 'md']);
     const handleCollapseButtonClick = useCallback(() => {
         setIsCollapsed(previousState => !previousState);
-        onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
-    }, [setIsCollapsed]);
-    const sidebar = (React.createElement(Container, { ref: ref, flex: true, direction: 'column', style: style, className: cx(classes.root, className, classes[variant], classes[size], {
+        onCollapse();
+    }, [setIsCollapsed, onCollapse]);
+    return (React.createElement(Container, { ref: ref, flex: true, direction: 'column', style: style, className: cx(classes.root, className, classes[variant], classes[size], {
             [classes.rootCollapsed]: collapsible && isCollapsed,
+            [classes.hamburgerNotAvailable]: !hasTopBar,
         }), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, onMouseEnter: collapsible ? () => setIsHovered(true) : noop, onMouseLeave: collapsible ? () => setIsHovered(false) : noop },
+        React.createElement(PageHamburgerPortal, null, children),
         React.createElement("div", { style: {
                 maxHeight: wrapperMaxHeight,
             }, className: cx(classes.wrapper, {
@@ -54,7 +56,6 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
                     }), onClick: handleCollapseButtonClick, icon: isCollapsed ? React.createElement(ChevronRight16, null) : React.createElement(BackMinor16, null), "aria-label": 'collapse sidebar', variant: 'primary', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapseButton })),
                 React.createElement("div", { className: classes.spacer }),
                 React.createElement(SidebarContextProvider, { isCollapsed: isCollapsed, isHovered: isHovered, variant: variant, expandedItemKey: expandedItemKey, setExpandedItemKey: setExpandedItemKey }, children)))));
-    return isCompactLayout ? (React.createElement(PageHamburgerPortal, null, children)) : (sidebar);
 });
 PageSidebar.defaultProps = {
     variant: 'light',

package/PageSidebar/PageSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}

package/PageSidebar/styles.d.ts

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

package/PageSidebar/styles.js

@@ -1,6 +1,6 @@
 import { createStyles } from '@material-ui/core/styles';
 import { rem } from '@toptal/picasso-shared';
-import { headerHeight } from '../PageTopBar/styles';
+import { headerHeight, headerBreakingPointXL } from '../PageTopBar/constants';
 // decided to use a custom shadow for the sidebar's collapse button
 const COLLAPSE_BUTTON_SHADOW = '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)';
 export default ({ palette, screens, transitions }) => createStyles({
@@ -10,6 +10,10 @@ export default ({ palette, screens, transitions }) => createStyles({
         fontSize: '1rem',
         position: 'relative',
         transition: `width ${transitions.duration.enteringScreen}ms ease-in-out`,
+        display: 'none',
+        [headerBreakingPointXL]: {
+            display: 'block',
+        },
         [screens('xs', 'sm')]: {
             width: '100vw',
             overflowY: 'scroll',
@@ -23,16 +27,15 @@ export default ({ palette, screens, transitions }) => createStyles({
             height: '100%',
         },
     },
+    hamburgerNotAvailable: {
+        display: 'block',
+    },
     wrapper: {
         height: '100%',
         '&$sticky': {
             maxHeight: `calc(100vh - ${headerHeight.default})`,
             position: 'sticky',
             top: headerHeight.default,
-            [screens('xs', 'sm')]: {
-                maxHeight: `calc(100vh - ${headerHeight.smallAndMedium})`,
-                top: headerHeight.smallAndMedium,
-            },
         },
     },
     scrollableContent: {

package/PageSidebar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageSidebar/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE7E,mEAAmE;AACnE,MAAM,sBAAsB,GAC1B,8DAA8D,CAAA;AAEhE,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CAC1D,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QACxE,OAAO,EAAE,MAAM;QACf,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,OAAO;SACjB;QAED,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,QAAQ;SACpB;QAED,WAAW,EAAE;YACX,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,MAAM;SACf;KACF;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,OAAO;KACjB;IACD,OAAO,EAAE;QACP,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;YACV,SAAS,EAAE,gBAAgB,YAAY,CAAC,OAAO,GAAG;YAClD,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,YAAY,CAAC,OAAO;SAC1B;KACF;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,eAAe;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;KACf;IACD,KAAK,EAAE;QACL,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC5D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,cAAc,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,UAAU;QACjB,GAAG,EAAE,SAAS;QACd,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,sBAAsB;QACjC,MAAM,EAAE,GAAG;QAEX,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;SACtC;KACF;IACD,aAAa,EAAE;QACb,UAAU,EAAE,SAAS;KACtB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,aAAa,gBAAgB;QAEvE,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;SACjB;QACD,sBAAsB,EAAE;YACtB,oBAAoB,EAAE,MAAM;YAC5B,iBAAiB,EAAE,MAAM;YACzB,sBAAsB,EAAE;gBACtB,OAAO,EAAE,MAAM;aAChB;SACF;KACF;IACD,MAAM,EAAE,EAAE;CACX,CAAC,CAAA"}

package/PageTopBar/PageTopBar.js

@@ -26,24 +26,24 @@ const useStyles = makeStyles(styles, {
 export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
     const { className, style, title, logoLink, logo, centerContent, leftContent, rightContent, actionItems, variant = 'dark' } = props, rest = __rest(props, ["className", "style", "title", "logoLink", "logo", "centerContent", "leftContent", "rightContent", "actionItems", "variant"]);
     const classes = useStyles();
-    const isCompactLayout = useBreakpoint(['sm', 'md']);
-    const { setHasTopBar } = usePageTopBar();
+    const showEmblemOnly = useBreakpoint(['xs', 'sm']);
+    const showTagline = useBreakpoint(['lg', 'xl']);
+    const { setHasTopBar, hasTopBar } = usePageTopBar();
     useIsomorphicLayoutEffect(() => {
         setHasTopBar(true);
         return function cleanup() {
             setHasTopBar(false);
         };
-    }, [setHasTopBar]);
+    }, [setHasTopBar, hasTopBar]);
     const { width, fullWidth } = useContext(PageContext);
     const { hamburgerId } = useHamburgerContext();
     const isDark = ['dark', 'grey'].includes(variant);
-    const logoDefault = (React.createElement(Logo, { variant: isDark ? 'white' : 'default', emblem: isCompactLayout, className: classes.logo }));
+    const logoDefault = (React.createElement(Logo, { variant: isDark ? 'white' : 'default', emblem: showEmblemOnly }));
     const logoComponent = logo || logoDefault;
-    const titleComponent = title && (React.createElement(Container, { left: 'small', flex: true, alignItems: 'center' },
+    const titleComponent = title && (React.createElement(Container, { flex: true, alignItems: 'center' },
         React.createElement("div", { className: cx(classes.divider, { [classes.dividerBlue]: !isDark }) }),
         React.createElement(Container, { left: 'small' },
             React.createElement(Typography, { invert: isDark }, title))));
-    const responsiveCenterContent = isCompactLayout ? (React.createElement(PageHamburgerPortal, null, centerContent)) : (React.createElement(Container, { flex: true, alignItems: 'center' }, centerContent));
     const innerClassName = cx({
         [classes.fullWidth]: fullWidth || width === 'full',
         [classes.wide]: width === 'wide',
@@ -52,16 +52,20 @@ export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
         React.createElement("header", Object.assign({}, rest, { ref: ref, className: cx('mui-fixed', classes.root, classes[variant], className), style: style }),
             React.createElement("div", { className: innerClassName },
                 React.createElement("div", { className: classes.left },
-                    React.createElement(Container, { className: classes.logoContainer, flex: true, alignItems: 'center' }, logoLink
-                        ? React.cloneElement(logoLink, {}, logoComponent)
-                        : logoComponent),
-                    !isCompactLayout && titleComponent,
+                    React.createElement(Container, { flex: true, alignItems: 'center', gap: 'small' },
+                        React.createElement(PageHamburger, { id: hamburgerId }),
+                        logoLink
+                            ? React.cloneElement(logoLink, {}, logoComponent)
+                            : logoComponent,
+                        showTagline && titleComponent),
                     leftContent),
-                centerContent && responsiveCenterContent,
+                centerContent && (React.createElement(React.Fragment, null,
+                    React.createElement(PageHamburgerPortal, null,
+                        React.createElement("div", { className: classes.centerContentPortal }, centerContent)),
+                    React.createElement(Container, { flex: true, alignItems: 'center', className: classes.centerContent }, centerContent))),
                 React.createElement("div", { className: classes.right },
-                    !isCompactLayout && actionItems,
-                    rightContent))),
-        React.createElement(PageHamburger, { id: hamburgerId })));
+                    actionItems,
+                    rightContent)))));
 });
 PageTopBar.defaultProps = {
     variant: 'dark',

package/PageTopBar/PageTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,aAAa,EAAE,EACpB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,MAAM,MAAM,UAAU,CAAA;AAuB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqB,SAAS,UAAU,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,MAAM,KAEd,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,6HAYL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,cAAc,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAClD,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAE/C,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,yBAAyB,CAAC,GAAG,EAAE;QAC7B,YAAY,CAAC,IAAI,CAAC,CAAA;QAElB,OAAO,SAAS,OAAO;YACrB,YAAY,CAAC,KAAK,CAAC,CAAA;QACrB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAA;IAE7B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IACtE,MAAM,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAE7C,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjD,MAAM,WAAW,GAAG,CAClB,oBAAC,IAAI,IAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,cAAc,GAAI,CACxE,CAAA;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,WAAW,CAAA;IAEzC,MAAM,cAAc,GAAG,KAAK,IAAI,CAC9B,oBAAC,SAAS,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;QACjC,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAClE;QACF,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO;YACrB,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM,IAAG,KAAK,CAAc,CACtC,CACF,CACb,CAAA;IAED,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;KACjC,EACD,OAAO,CAAC,OAAO,CAChB,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,CAAC,OAAO;QAC7B,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EACrE,KAAK,EAAE,KAAK;YAEZ,6BAAK,SAAS,EAAE,cAAc;gBAE5B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI;oBAC1B,oBAAC,SAAS,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO;wBAC7C,oBAAC,aAAa,IAAC,EAAE,EAAE,WAAW,GAAI;wBACjC,QAAQ;4BACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC;4BACjD,CAAC,CAAC,aAAa;wBAChB,WAAW,IAAI,cAAc,CACpB;oBACX,WAAW,CACR;gBAGL,aAAa,IAAI,CAChB;oBACE,oBAAC,mBAAmB;wBAClB,6BAAK,SAAS,EAAE,OAAO,CAAC,mBAAmB,IACxC,aAAa,CACV,CACc;oBACtB,oBAAC,SAAS,IACR,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAAC,aAAa,IAE/B,aAAa,CACJ,CACX,CACJ;gBAGD,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK;oBAC1B,WAAW;oBACX,YAAY,CACT,CACF,CACC,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/PageTopBar/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const headerHeight: {
+    readonly default: "3.5rem";
+};
+export declare const headerBreakingPointXL: "@media (min-width: 1280px)";

package/PageTopBar/constants.js

@@ -0,0 +1,3 @@
+export const headerHeight = { default: '3.5rem' };
+export const headerBreakingPointXL = '@media (min-width: 1280px)';
+//# sourceMappingURL=constants.js.map

package/PageTopBar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/PageTopBar/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAW,CAAA;AAC1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,4BAAqC,CAAA"}

package/PageTopBar/styles.d.ts

@@ -1,7 +1,3 @@
 import type { Theme } from '@material-ui/core/styles';
-export declare const headerHeight: {
-    default: string;
-    smallAndMedium: string;
-};
-declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "left" | "right" | "grey" | "dark" | "light" | "root" | "wrapper" | "fullWidth" | "divider" | "logoContainer" | "logo" | "wide" | "dividerBlue">;
+declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "left" | "right" | "grey" | "dark" | "light" | "root" | "wrapper" | "fullWidth" | "divider" | "wide" | "centerContent" | "centerContentPortal" | "dividerBlue">;
 export default _default;

package/PageTopBar/styles.js

@@ -1,5 +1,5 @@
 import { createStyles } from '@material-ui/core/styles';
-export const headerHeight = { default: '3.5rem', smallAndMedium: '3rem' };
+import { headerHeight, headerBreakingPointXL } from './constants';
 export default ({ palette, layout, zIndex, screens }) => createStyles({
     root: {
         fontSize: '1rem',
@@ -27,19 +27,16 @@ export default ({ palette, layout, zIndex, screens }) => createStyles({
         margin: '0 auto',
         justifyContent: 'space-between',
         maxWidth: layout.contentWidth,
-        padding: `0 ${layout.contentPaddingHorizontal}`,
+        padding: `0 ${layout.contentMobilePaddingHorizontal}`,
         height: headerHeight.default,
-        [screens('xs', 'sm')]: {
-            height: headerHeight.smallAndMedium,
+        [screens('md', 'lg', 'xl')]: {
+            padding: `0 ${layout.contentPaddingHorizontal}`,
         },
     },
     wrapper: {
+        position: 'relative',
         height: headerHeight.default,
         minHeight: headerHeight.default,
-        [screens('xs', 'sm')]: {
-            height: headerHeight.smallAndMedium,
-            minHeight: headerHeight.smallAndMedium,
-        },
     },
     wide: {
         maxWidth: layout.contentWidthWide,
@@ -50,10 +47,25 @@ export default ({ palette, layout, zIndex, screens }) => createStyles({
     left: {
         display: 'flex',
         alignItems: 'center',
+        gap: '1rem',
     },
     right: {
         display: 'flex',
         alignItems: 'center',
+        gap: '1.5rem',
+    },
+    centerContent: {
+        display: 'none',
+        [headerBreakingPointXL]: {
+            display: 'block',
+        },
+    },
+    centerContentPortal: {
+        // as soon as hamburger is visible, center content is ported to hamburger menu
+        display: 'block',
+        [headerBreakingPointXL]: {
+            display: 'none',
+        },
     },
     divider: {
         width: '1px',
@@ -64,18 +76,5 @@ export default ({ palette, layout, zIndex, screens }) => createStyles({
     dividerBlue: {
         backgroundColor: palette.blue.darker,
     },
-    logoContainer: {
-        [screens('xs', 'sm')]: {
-            lineHeight: '1em',
-            position: 'absolute',
-            left: '50%',
-            transform: 'translate(-50%, 0%)',
-        },
-    },
-    logo: {
-        [screens('xs', 'sm')]: {
-            fontSize: '1.5em',
-        },
-    },
 });
 //# sourceMappingURL=styles.js.map

package/PageTopBar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,CAAA;AAEzE,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAS,EAAE,EAAE,CAC7D,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB;IACD,KAAK,EAAE;QACL,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChD;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,OAAO,EAAE;QACP,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,QAAQ;QAChB,cAAc,EAAE,eAAe;QAC/B,QAAQ,EAAE,MAAM,CAAC,YAAY;QAC7B,OAAO,EAAE,KAAK,MAAM,CAAC,wBAAwB,EAAE;QAC/C,MAAM,EAAE,YAAY,CAAC,OAAO;QAC5B,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,MAAM,EAAE,YAAY,CAAC,cAAc;SACpC;KACF;IACD,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO;QAC5B,SAAS,EAAE,YAAY,CAAC,OAAO;QAC/B,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,MAAM,EAAE,YAAY,CAAC,cAAc;YACnC,SAAS,EAAE,YAAY,CAAC,cAAc;SACvC;KACF;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;QACf,UAAU,EAAE,QAAQ;KACrB;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,OAAO;QACf,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,OAAO,EAAE,GAAG;KACb;IACD,WAAW,EAAE;QACX,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,aAAa,EAAE;QACb,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,UAAU,EAAE,KAAK;YACjB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,qBAAqB;SACjC;KACF;IACD,IAAI,EAAE;QACJ,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,QAAQ,EAAE,OAAO;SAClB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEjE,eAAe,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAS,EAAE,EAAE,CAC7D,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB;IACD,KAAK,EAAE;QACL,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChD;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,OAAO,EAAE;QACP,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,QAAQ;QAChB,cAAc,EAAE,eAAe;QAC/B,QAAQ,EAAE,MAAM,CAAC,YAAY;QAC7B,OAAO,EAAE,KAAK,MAAM,CAAC,8BAA8B,EAAE;QACrD,MAAM,EAAE,YAAY,CAAC,OAAO;QAE5B,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,OAAO,EAAE,KAAK,MAAM,CAAC,wBAAwB,EAAE;SAChD;KACF;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,YAAY,CAAC,OAAO;QAC5B,SAAS,EAAE,YAAY,CAAC,OAAO;KAChC;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;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM;KACZ;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,QAAQ;KACd;IACD,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,OAAO;SACjB;KACF;IACD,mBAAmB,EAAE;QACnB,8EAA8E;QAC9E,OAAO,EAAE,OAAO;QAChB,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,MAAM;SAChB;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,OAAO;QACf,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,OAAO,EAAE,GAAG;KACb;IACD,WAAW,EAAE;QACX,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;CACF,CAAC,CAAA"}

package/PageTopBarMenu/PageTopBarMenu.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles(styles, {
 export const PageTopBarMenu = forwardRef(function PageTopBarMenu(props, ref) {
     const { name, meta, avatar, className, style, children } = props, rest = __rest(props, ["name", "meta", "avatar", "className", "style", "children"]);
     const classes = useStyles();
-    const isCompactLayout = useBreakpoint(['sm', 'md']);
+    const isCompactLayout = useBreakpoint(['xs', 'sm', 'md']);
     const metaContent = typeof meta === 'string' ? (React.createElement(Typography, { className: classes.truncateText, invert: !isCompactLayout, size: 'xsmall' }, meta)) : (meta);
     const content = isCompactLayout ? (React.createElement(React.Fragment, null,
         React.createElement(UserBadge, { center: true, size: 'xxsmall', classes: {

package/PageTopBarMenu/PageTopBarMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"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"}

package/PageTopBarMenu/styles.js

@@ -1,10 +1,11 @@
 import { createStyles } from '@material-ui/core/styles';
+import { headerHeight } from '../PageTopBar/constants';
 export default ({ screens }) => createStyles({
     avatar: {
         fontSize: '0.9rem',
     },
     contentUserBadge: {
-        [screens('xs', 'sm')]: {
+        [screens('xs', 'sm', 'md')]: {
             padding: '1em',
             zIndex: 1,
             backgroundColor: 'white',
@@ -12,18 +13,10 @@ export default ({ screens }) => createStyles({
         },
     },
     content: {
+        maxHeight: `calc(100vh - ${headerHeight.default})`,
         width: '15em',
-        maxHeight: 'calc(100vh - 4.5rem)',
         [screens('xs', 'sm')]: {
             width: '100vw',
-            maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
-        },
-        // override existing media-query because we have full height
-        '@media screen and (max-height: 585px)': {
-            maxHeight: 'calc(100vh - 4.5rem)',
-            [screens('xs', 'sm')]: {
-                maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
-            },
         },
     },
     name: {
@@ -38,12 +31,12 @@ export default ({ screens }) => createStyles({
     },
     arrow: {
         color: 'white',
-        [screens('xs', 'sm')]: {
+        [screens('xs', 'sm', 'md')]: {
             marginLeft: '0.5rem',
         },
     },
     paper: {
-        [screens('xs', 'sm')]: {
+        [screens('xs', 'sm', 'md')]: {
             top: '2.5em !important',
         },
     },

package/PageTopBarMenu/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,MAAM,EAAE;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,gBAAgB,EAAE;QAChB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO;YACxB,QAAQ,EAAE,UAAU;SACrB;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,sBAAsB;QAEjC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;SACjE;QAED,4DAA4D;QAC5D,uCAAuC,EAAE;YACvC,SAAS,EAAE,sBAAsB;YAEjC,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;gBACrB,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;aACjE;SACF;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,OAAO;KACjB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QAEd,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,UAAU,EAAE,QAAQ;SACrB;KACF;IACD,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,GAAG,EAAE,kBAAkB;SACxB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,MAAM,EAAE;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,gBAAgB,EAAE;QAChB,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO;YACxB,QAAQ,EAAE,UAAU;SACrB;KACF;IACD,OAAO,EAAE;QACP,SAAS,EAAE,gBAAgB,YAAY,CAAC,OAAO,GAAG;QAClD,KAAK,EAAE,MAAM;QACb,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;SACf;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,OAAO;KACjB;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QAEd,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,UAAU,EAAE,QAAQ;SACrB;KACF;IACD,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YAC3B,GAAG,EAAE,kBAAkB;SACxB;KACF;CACF,CAAC,CAAA"}

package/TopBarItem/TopBarItem.js

@@ -1,32 +1,17 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React, { forwardRef, memo } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
-import MenuItem from '../MenuItem';
 import SidebarItem from '../SidebarItem';
-import Typography from '../Typography';
-import { useBreakpoint, noop } from '../utils';
+import { noop } from '../utils';
 import styles from './styles';
 const useStyles = makeStyles(styles, { name: 'PicassoTopBarMenuItem' });
 export const TopBarItem = memo(forwardRef(function TopBarItem(props, ref) {
-    const { className, icon, children } = props, rest = __rest(props, ["className", "icon", "children"]);
+    const { className, icon } = props;
     const classes = useStyles();
-    const isCompactLayout = useBreakpoint(['sm', 'md']);
-    return isCompactLayout ? (React.createElement(SidebarItem, Object.assign({}, props, { ref: ref }))) : (React.createElement(MenuItem, Object.assign({}, rest, { className: cx(classes.root, className, classes.dark, {
+    return (React.createElement(SidebarItem, Object.assign({}, props, { className: cx(classes.root, className, {
             [classes.selected]: props.selected,
-        }), ref: ref }),
-        icon && React.createElement("div", { className: classes.icon }, icon),
-        React.createElement(Typography, { size: 'small', color: 'inherit' }, children)));
+            [classes.icon]: icon,
+        }), ref: ref })));
 }));
 TopBarItem.defaultProps = {
     onClick: noop,

package/TopBarItem/TopBarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBarItem.js","sourceRoot":"","sources":["../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAA;AAe7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAA;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAgC,IAAI,CACzD,UAAU,CAAqB,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC3D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9C,iCAAsC,CAAQ,CAAA;IACpD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEnD,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,oBAAC,WAAW,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CACrC,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,oBACH,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE;YACnD,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;SACnC,CAAC,EACF,GAAG,EAAE,GAAG;QAEP,IAAI,IAAI,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,IAAI,CAAO;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,IACrC,QAAQ,CACE,CACJ,CACZ,CAAA;AACH,CAAC,CAAC,CACH,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TopBarItem.js","sourceRoot":"","sources":["../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,MAAM,MAAM,UAAU,CAAA;AAe7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAC,CAAA;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAgC,IAAI,CACzD,UAAU,CAAqB,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC3D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACjC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,IACT,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE;YACrC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;YAClC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI;SACrB,CAAC,EACF,GAAG,EAAE,GAAG,IACR,CACH,CAAA;AACH,CAAC,CAAC,CACH,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/TopBarItem/styles.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ spacing, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "dark" | "icon" | "root" | "selected">;
+declare const _default: ({ spacing, palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "icon" | "root" | "selected">;
 export default _default;

package/TopBarItem/styles.js

@@ -1,32 +1,46 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ spacing, palette }) => createStyles({
-    root: {
-        color: palette.grey.main2,
-        minWidth: 0,
-        padding: 0,
-        '& + &:before': {
-            backgroundColor: palette.grey.main2,
-            content: '""',
-            display: 'inline-block',
-            height: spacing(1),
-            marginLeft: spacing(1),
-            marginRight: spacing(1),
-            width: 1,
+import { headerBreakingPointXL } from '../PageTopBar/constants';
+export default ({ spacing, palette, typography }) => {
+    const itemSpacing = spacing(1);
+    return createStyles({
+        root: {
+            [headerBreakingPointXL]: {
+                color: palette.grey.main2,
+                padding: 0,
+                height: 'auto',
+                width: 'auto',
+                margin: 0,
+                flex: '1 1 auto',
+                '& + &:before': {
+                    backgroundColor: palette.grey.main2,
+                    content: '""',
+                    display: 'inline-block',
+                    height: itemSpacing,
+                    marginLeft: itemSpacing,
+                    marginRight: itemSpacing,
+                    width: 1,
+                },
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                    color: palette.grey.light2,
+                },
+                '&:focus, &$selected': {
+                    backgroundColor: 'transparent',
+                    color: palette.common.white,
+                },
+                '& p': {
+                    fontSize: typography.fontSizes.small,
+                },
+            },
         },
-        '&:hover': {
-            backgroundColor: 'transparent',
-            color: palette.grey.light2,
+        icon: {
+            [headerBreakingPointXL]: {
+                '& svg': {
+                    width: '1em',
+                },
+            },
         },
-        '&:focus, &$selected$dark': {
-            backgroundColor: 'transparent',
-            color: palette.common.white,
-        },
-    },
-    icon: {
-        marginRight: '0.875em',
-        width: '1em',
-    },
-    selected: {},
-    dark: {},
-});
+        selected: {},
+    });
+};
 //# sourceMappingURL=styles.js.map

package/TopBarItem/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAS,EAAE,EAAE,CAC7C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,QAAQ,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;QACV,cAAc,EAAE;YACd,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YACnC,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;YAClB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;YACtB,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;YACvB,KAAK,EAAE,CAAC;SACT;QACD,SAAS,EAAE;YACT,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;SAC3B;QACD,0BAA0B,EAAE;YAC1B,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;KACF;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,KAAK;KACb;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE;IACzD,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;IAE9B,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;gBACzB,OAAO,EAAE,CAAC;gBACV,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,UAAU;gBAChB,cAAc,EAAE;oBACd,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;oBACnC,OAAO,EAAE,IAAI;oBACb,OAAO,EAAE,cAAc;oBACvB,MAAM,EAAE,WAAW;oBACnB,UAAU,EAAE,WAAW;oBACvB,WAAW,EAAE,WAAW;oBACxB,KAAK,EAAE,CAAC;iBACT;gBACD,SAAS,EAAE;oBACT,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;iBAC3B;gBACD,qBAAqB,EAAE;oBACrB,eAAe,EAAE,aAAa;oBAC9B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;iBAC5B;gBACD,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK;iBACrC;aACF;SACF;QACD,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,OAAO,EAAE;oBACP,KAAK,EAAE,KAAK;iBACb;aACF;SACF;QACD,QAAQ,EAAE,EAAE;KACb,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/TopBarMenu/styles.d.ts

@@ -1,3 +1,2 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
 export default _default;

package/TopBarMenu/styles.js

@@ -1,9 +1,10 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ screens }) => createStyles({
+import { headerBreakingPointXL } from '../PageTopBar/constants';
+export default () => createStyles({
     root: {
-        display: 'flex',
-        [screens('xs', 'sm')]: {
-            display: 'block',
+        display: 'block',
+        [headerBreakingPointXL]: {
+            display: 'flex',
         },
     },
 });

package/TopBarMenu/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarMenu/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QAEf,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,OAAO,EAAE,OAAO;SACjB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarMenu/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,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "34.0.0",
+  "version": "34.0.1",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",