@toptal/picasso 28.10.2-alpha-fix-root-container-order-e4aa2912.0 → 28.11.0

package/Page/Page.d.ts

@@ -10,6 +10,7 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
     centered?: boolean;
     /** Children components (`Page.TopBar`, `Page.Content`, `Page.Footer`) */
     children: ReactNode;
+    hamburgerId?: string;
 }
 export declare const PageContext: React.Context<PageContextProps>;
 export declare const Page: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/Page/Page.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
+import { PageHamburgerContextProvider } from '../PageHamburger';
 import styles from './styles';
 export const PageContext = React.createContext({});
 const useStyles = makeStyles(styles, {
@@ -19,10 +20,11 @@ const useStyles = makeStyles(styles, {
 });
 // eslint-disable-next-line react/display-name
 export const Page = forwardRef(function Page(props, ref) {
-    const { children, className, style, width, fullWidth } = props, rest = __rest(props, ["children", "className", "style", "width", "fullWidth"]);
+    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: style }),
-        React.createElement(PageContext.Provider, { value: { width, fullWidth } }, children)));
+        React.createElement(PageContext.Provider, { value: { width, fullWidth } },
+            React.createElement(PageHamburgerContextProvider, { hamburgerId: hamburgerId }, children))));
 });
 Page.displayName = 'Page';
 export default Page;

package/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/Page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,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,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAjE,wDAAyD,CAAQ,CAAA;IACvE,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,KAAK;QAEZ,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAC9C,QAAQ,CACY,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":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,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,KAAK;QAEZ,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/PageCompound/index.d.ts

@@ -1,5 +1,8 @@
 export declare const PageCompound: import("react").ForwardRefExoticComponent<import("../Page/Page").Props & import("react").RefAttributes<HTMLDivElement>> & {
-    TopBar: import("react").ForwardRefExoticComponent<import("../PageTopBar/PageTopBar").Props & import("react").RefAttributes<HTMLElement>>;
+    TopBar: import("react").ForwardRefExoticComponent<import("../PageTopBar/PageTopBar").Props & import("react").RefAttributes<HTMLElement>> & {
+        Menu: import("react").ForwardRefExoticComponent<import("../TopBarMenu").TopBarMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+        Item: import("@toptal/picasso-shared/src").OverridableComponent<import("../TopBarItem/TopBarItem").Props>;
+    };
     TopBarMenu: import("react").ForwardRefExoticComponent<import("../PageTopBarMenu/PageTopBarMenu").Props & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<import("../PageContent/PageContent").Props & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<import("../PageFooter/PageFooter").Props & import("react").RefAttributes<HTMLElement>>;

package/PageCompound/index.js

@@ -1,6 +1,6 @@
 import Page from '../Page';
 import PageHelmet from '../PageHelmet';
-import PageTopBar from '../PageTopBar';
+import { PageTopBarCompound as PageTopBar } from '../PageTopBarCompound';
 import PageTopBarMenu from '../PageTopBarMenu';
 import PageFooter from '../PageFooter';
 import PageContent from '../PageContent';

package/PageCompound/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,gBAAgB,MAAM,qBAAqB,CAAA;AAClD,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,MAAM,EAAE,UAAU;IAClB,UAAU,EAAE,cAAc;IAC1B,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,YAAY,EAAE,gBAAgB;IAC9B,OAAO,EAAE,WAAW;CACrB,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,EAAE,kBAAkB,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,gBAAgB,MAAM,qBAAqB,CAAA;AAClD,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;IAC9C,MAAM,EAAE,UAAU;IAClB,UAAU,EAAE,cAAc;IAC1B,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,YAAY,EAAE,gBAAgB;IAC9B,OAAO,EAAE,WAAW;CACrB,CAAC,CAAA"}

package/PageHamburger/PageHamburger.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    id: string;
+}
+declare const PageHamburger: ({ id }: Props) => JSX.Element;
+export default PageHamburger;

package/PageHamburger/PageHamburger.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+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 styles from './styles';
+const useStyles = makeStyles(styles, {
+    name: 'PageHamburger',
+});
+const PageHamburger = ({ id }) => {
+    const { isHamburgerVisible } = useHamburgerContext();
+    const [showContent, setShowContent] = useState(false);
+    const classes = useStyles();
+    const isCompactLayout = useBreakpoint(['small', 'medium']);
+    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,
+        }), classes: { content: classes.responsiveWrapperContent }, offset: { top: 0.4 }, popperOptions: {
+            modifiers: {
+                flip: { enabled: false },
+                preventOverflow: {
+                    padding: 0,
+                },
+            },
+        }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close16, null)) : (React.createElement(Overview16, { className: classes.hamburger })), variant: 'transparent' })));
+};
+export default PageHamburger;
+//# sourceMappingURL=PageHamburger.js.map

package/PageHamburger/PageHamburger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,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,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,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,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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface HamburgerContextProps {
+    hamburgerId: string;
+    isHamburgerVisible: boolean;
+    setIsHamburgerVisible: (showHamburger: boolean) => void;
+}
+interface Props {
+    children: ReactNode;
+    hamburgerId: string;
+}
+export declare const PageHamburgerContextProvider: ({ children, hamburgerId, }: Props) => JSX.Element;
+export declare const useHamburgerContext: () => HamburgerContextProps;
+export {};

package/PageHamburger/PageHamburgerContext.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+const PageHamburgerContext = createContext({
+    hamburgerId: 'hamburger',
+    isHamburgerVisible: false,
+    setIsHamburgerVisible: () => { },
+});
+export const PageHamburgerContextProvider = ({ children, hamburgerId, }) => {
+    const [isHamburgerVisible, setIsHamburgerVisible] = useState(false);
+    const context = {
+        hamburgerId,
+        isHamburgerVisible,
+        setIsHamburgerVisible,
+    };
+    return (React.createElement(PageHamburgerContext.Provider, { value: context }, children));
+};
+export const useHamburgerContext = () => useContext(PageHamburgerContext);
+//# sourceMappingURL=PageHamburgerContext.js.map

package/PageHamburger/PageHamburgerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHamburgerContext.js","sourceRoot":"","sources":["../../src/PageHamburger/PageHamburgerContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAQ7E,MAAM,oBAAoB,GAAG,aAAa,CAAwB;IAChE,WAAW,EAAE,WAAW;IACxB,kBAAkB,EAAE,KAAK;IACzB,qBAAqB,EAAE,GAAG,EAAE,GAAE,CAAC;CAChC,CAAC,CAAA;AAOF,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,QAAQ,EACR,WAAW,GACL,EAAE,EAAE;IACV,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE5E,MAAM,OAAO,GAAG;QACd,WAAW;QACX,kBAAkB;QAClB,qBAAqB;KACtB,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,IAC1C,QAAQ,CACqB,CACjC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CACtC,UAAU,CAAwB,oBAAoB,CAAC,CAAA"}

package/PageHamburger/PageHamburgerPortal.d.ts

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

package/PageHamburger/PageHamburgerPortal.js

@@ -0,0 +1,11 @@
+import React, { useCallback } from 'react';
+import Portal from '@material-ui/core/Portal';
+import { getElementById } from '@toptal/picasso-shared';
+import { useHamburgerContext } from './PageHamburgerContext';
+const PageHamburgerPortal = ({ children }) => {
+    const { hamburgerId } = useHamburgerContext();
+    const container = useCallback(() => getElementById(hamburgerId), [hamburgerId]);
+    return React.createElement(Portal, { container: container }, children);
+};
+export default PageHamburgerPortal;
+//# sourceMappingURL=PageHamburgerPortal.js.map

package/PageHamburger/PageHamburgerPortal.js.map

@@ -0,0 +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,GAAG,mBAAmB,EAAE,CAAA;IAE7C,MAAM,SAAS,GAAG,WAAW,CAC3B,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,CAAC,WAAW,CAAC,CACd,CAAA;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.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This hook is for components whose content should be rendered inside
+ * hamburger menu.
+ * Should be used in conjunction with PageHamburgerPortal component.
+ * It sets hamburger menu to be visible in compact screens.
+ */
+declare const usePortalToHamburger: () => void;
+export default usePortalToHamburger;

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

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useHamburgerContext } from '../PageHamburgerContext';
+/**
+ * This hook is for components whose content should be rendered inside
+ * hamburger menu.
+ * Should be used in conjunction with PageHamburgerPortal component.
+ * It sets hamburger menu to be visible in compact screens.
+ */
+const usePortalToHamburger = () => {
+    const { setIsHamburgerVisible } = useHamburgerContext();
+    useEffect(() => {
+        setIsHamburgerVisible(true);
+    }, []);
+};
+export default usePortalToHamburger;
+//# sourceMappingURL=use-portal-to-hamburger.js.map

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

@@ -0,0 +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"}

package/PageHamburger/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './PageHamburger';
+export { default as PageHamburgerPortal } from './PageHamburgerPortal';
+export { useHamburgerContext, PageHamburgerContextProvider, } from './PageHamburgerContext';
+export { default as usePortalToHamburger } from './hooks/use-portal-to-hamburger';

package/PageHamburger/index.js

@@ -0,0 +1,5 @@
+export { default } from './PageHamburger';
+export { default as PageHamburgerPortal } from './PageHamburgerPortal';
+export { useHamburgerContext, PageHamburgerContextProvider, } from './PageHamburgerContext';
+export { default as usePortalToHamburger } from './hooks/use-portal-to-hamburger';
+//# sourceMappingURL=index.js.map

package/PageHamburger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageHamburger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EACL,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAA"}

package/PageHamburger/styles.d.ts

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

package/PageHamburger/styles.js

@@ -0,0 +1,35 @@
+import { createStyles } from '@material-ui/core/styles';
+export default ({ palette, screens, zIndex }) => {
+    const wrapperBoxShadow = `inset -1px 0px 0px 0px ${palette.grey.lighter2}`;
+    return createStyles({
+        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('small', 'medium')]: {
+                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('small', 'medium')]: {
+                    maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
+                },
+            },
+        },
+    });
+};
+//# sourceMappingURL=styles.js.map

package/PageHamburger/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,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,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;gBAC5B,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;aACjE;YAED,uDAAuD;YACvD,2DAA2D;YAC3D,uCAAuC,EAAE;gBACvC,SAAS,EAAE,sBAAsB;gBAEjC,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;oBAC5B,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;iBACjE;aACF;SACF;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/PageSidebar/PageSidebar.d.ts

@@ -1,9 +1,6 @@
-import { BaseProps, StandardProps } from '@toptal/picasso-shared';
+import { BaseProps } from '@toptal/picasso-shared';
 import React, { ReactNode } from 'react';
 import { VariantType } from './types';
-export interface SmallScreenSidebarWrapperProps extends StandardProps {
-    children?: ReactNode;
-}
 export interface Props extends BaseProps {
     /** Style variant of Sidebar and subcomponents */
     variant?: VariantType;

package/PageSidebar/PageSidebar.js

@@ -4,29 +4,14 @@ import cx from 'classnames';
 import React, { forwardRef, useCallback, useEffect, useState, } from 'react';
 import ButtonCircular from '../ButtonCircular';
 import Container from '../Container';
-import Dropdown from '../Dropdown';
-import { BackMinor16, ChevronRight16, Close16, Overview16 } from '../Icon';
+import { BackMinor16, ChevronRight16 } from '../Icon';
+import { PageHamburgerPortal, usePortalToHamburger } from '../PageHamburger';
 import SidebarItem from '../SidebarItem';
 import SidebarLogo from '../SidebarLogo';
 import SidebarMenu from '../SidebarMenu';
 import { noop, useBreakpoint } from '../utils';
 import { SidebarContextProvider } from './SidebarContextProvider';
 import styles from './styles';
-const SmallScreenSidebarWrapper = ({ classes, children, }) => {
-    var _a;
-    const [showSidebar, setShowSidebar] = useState(false);
-    const handleShowSidebar = () => setShowSidebar(true);
-    const handleHideSidebar = () => setShowSidebar(false);
-    return (React.createElement(Dropdown, { content: children, className: classes === null || classes === void 0 ? void 0 : classes.responsiveWrapper, classes: { content: (_a = classes === null || classes === void 0 ? void 0 : classes.responsiveWrapperContent) !== null && _a !== void 0 ? _a : '' }, offset: { top: 0.4 }, popperOptions: {
-            modifiers: {
-                flip: { enabled: false },
-                preventOverflow: {
-                    padding: 0,
-                },
-            },
-        }, onOpen: handleShowSidebar, onClose: handleHideSidebar },
-        React.createElement(ButtonCircular, { icon: showSidebar ? React.createElement(Close16, null) : React.createElement(Overview16, null), variant: 'transparent' })));
-};
 const useStyles = makeStyles(styles, {
     name: 'PageSidebar',
 });
@@ -49,6 +34,7 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
             setHasSidebar(false);
         };
     }, [setHasSidebar]);
+    usePortalToHamburger();
     const isCompactLayout = useBreakpoint(['small', 'medium']);
     const handleCollapseButtonClick = useCallback(() => {
         setIsCollapsed(previousState => !previousState);
@@ -61,7 +47,7 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
                 [classes.buttonVisible]: isHovered,
             }), 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(SidebarContextProvider, { isCollapsed: isCollapsed, isHovered: isHovered, variant: variant, expandedItemKey: expandedItemKey, setExpandedItemKey: setExpandedItemKey }, children)));
-    return isCompactLayout ? (React.createElement(SmallScreenSidebarWrapper, { classes: classes }, sidebar)) : (sidebar);
+    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 { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, zIndex, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "dark" | "light" | "root" | "spacer" | "responsiveWrapper" | "responsiveWrapperContent" | "collapseButton" | "buttonVisible" | "rootCollapsed">;
+declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "dark" | "light" | "root" | "spacer" | "collapseButton" | "buttonVisible" | "rootCollapsed">;
 export default _default;

package/PageSidebar/styles.js

@@ -1,7 +1,7 @@
 import { createStyles } from '@material-ui/core/styles';
 // 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, zIndex, transitions }) => createStyles({
+export default ({ palette, screens, transitions }) => createStyles({
     root: {
         height: '100%',
         width: '14.75rem',
@@ -23,26 +23,6 @@ export default ({ palette, screens, zIndex, transitions }) => createStyles({
             height: '100%',
         },
     },
-    responsiveWrapper: {
-        position: 'fixed',
-        top: '0.75em',
-        left: '0.75em',
-        zIndex: zIndex.appBar,
-    },
-    responsiveWrapperContent: {
-        maxHeight: 'calc(100vh - 4.5rem)',
-        [screens('small', 'medium')]: {
-            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('small', 'medium')]: {
-                maxHeight: 'calc(100vh - 3rem)', // viewport minus header height
-            },
-        },
-    },
     spacer: {
         order: 50,
         flex: 1,

package/PageSidebar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,mEAAmE;AACnE,MAAM,sBAAsB,GAC1B,8DAA8D,CAAA;AAEhE,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAS,EAAE,EAAE,CAClE,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QAExE,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,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,iBAAiB,EAAE;QACjB,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,QAAQ;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB;IACD,wBAAwB,EAAE;QACxB,SAAS,EAAE,sBAAsB;QAEjC,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;SACjE;QAED,uDAAuD;QACvD,2DAA2D;QAC3D,uCAAuC,EAAE;YACvC,SAAS,EAAE,sBAAsB;YAEjC,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;gBAC5B,SAAS,EAAE,oBAAoB,EAAE,+BAA+B;aACjE;SACF;KACF;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;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,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,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QAExE,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,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,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;KACF;CACF,CAAC,CAAA"}

package/PageTopBar/PageTopBar.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, ReactElement, HTMLAttributes } from 'react';
 import { BaseProps } from '@toptal/picasso-shared';
-declare type VariantType = 'dark' | 'light';
+declare type VariantType = 'dark' | 'light' | 'grey';
 export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
     /** Title which is displayed along the `Logo` */
     title?: string;
@@ -8,6 +8,8 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
     logoLink?: ReactElement;
     /** Logo to display */
     logo?: ReactNode;
+    /** Content for the center of the `Header`  */
+    centerContent?: ReactNode;
     /** Content for the left side of the `Header`  */
     leftContent?: ReactNode;
     /** Content for the right side of the `Header`  */

package/PageTopBar/PageTopBar.js

@@ -16,6 +16,7 @@ import { usePageTopBar } from '@toptal/picasso-provider';
 import { makeStyles } from '@material-ui/core/styles';
 import Logo from '../Logo';
 import Container from '../Container';
+import PageHamburger, { PageHamburgerPortal, useHamburgerContext, } from '../PageHamburger';
 import Typography from '../Typography';
 import { PageContext } from '../Page';
 import { useBreakpoint, useIsomorphicLayoutEffect } from '../utils';
@@ -24,7 +25,7 @@ const useStyles = makeStyles(styles, {
     name: 'PicassoTopBar',
 });
 export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
-    const { className, style, title, logoLink, logo, leftContent, rightContent, actionItems, variant = 'dark' } = props, rest = __rest(props, ["className", "style", "title", "logoLink", "logo", "leftContent", "rightContent", "actionItems", "variant"]);
+    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(['small', 'medium']);
     const { setHasTopBar } = usePageTopBar();
@@ -35,13 +36,15 @@ export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
         };
     }, [setHasTopBar]);
     const { width, fullWidth } = useContext(PageContext);
-    const isDark = variant === 'dark';
+    const { hamburgerId } = useHamburgerContext();
+    const isDark = ['dark', 'grey'].includes(variant);
     const logoDefault = (React.createElement(Logo, { variant: isDark ? 'white' : 'default', emblem: isCompactLayout, className: classes.logo }));
     const logoComponent = logo || logoDefault;
     const titleComponent = title && (React.createElement(Container, { left: 'small', 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',
@@ -55,9 +58,11 @@ export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
                         : logoComponent),
                     !isCompactLayout && titleComponent,
                     leftContent),
+                centerContent && responsiveCenterContent,
                 React.createElement("div", { className: classes.right },
                     !isCompactLayout && actionItems,
-                    rightContent)))));
+                    rightContent))),
+        React.createElement(PageHamburger, { id: hamburgerId })));
 });
 PageTopBar.defaultProps = {
     variant: 'dark',

package/PageTopBar/PageTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,+BAA+B;AAC/B,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,UAAU,GAIX,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,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;AAqB7B,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,WAAW,EACX,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,MAAM,KAEd,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,4GAWL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IAExC,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,CAAC,CAAC,CAAA;IAElB,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM,CAAA;IAEjC,MAAM,WAAW,GAAG,CAClB,oBAAC,IAAI,IACH,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACrC,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,OAAO,CAAC,IAAI,GACvB,CACH,CAAA;IAED,MAAM,aAAa,GAAG,IAAI,IAAI,WAAW,CAAA;IAEzC,MAAM,cAAc,GAAG,KAAK,IAAI,CAC9B,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;QAC9C,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;gBAC5B,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI;oBAC1B,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,aAAa,EAChC,IAAI,QACJ,UAAU,EAAC,QAAQ,IAElB,QAAQ;wBACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC;wBACjD,CAAC,CAAC,aAAa,CACP;oBACX,CAAC,eAAe,IAAI,cAAc;oBAClC,WAAW,CACR;gBAEN,6BAAK,SAAS,EAAE,OAAO,CAAC,KAAK;oBAC1B,CAAC,eAAe,IAAI,WAAW;oBAC/B,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"}
+{"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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"}

package/PageTopBar/styles.d.ts

@@ -3,5 +3,5 @@ export declare const headerHeight: {
     default: string;
     smallAndMedium: string;
 };
-declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "left" | "right" | "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" | "logoContainer" | "logo" | "wide" | "dividerBlue">;
 export default _default;

package/PageTopBar/styles.js

@@ -17,6 +17,9 @@ export default ({ palette, layout, zIndex, screens }) => createStyles({
     dark: {
         backgroundColor: palette.blue.darker,
     },
+    grey: {
+        backgroundColor: palette.grey.darker,
+    },
     content: {
         boxSizing: 'border-box',
         display: 'flex',

package/PageTopBar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,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,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,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,MAAM,EAAE,YAAY,CAAC,cAAc;SACpC;KACF;IACD,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO;QAC5B,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,MAAM,EAAE,YAAY,CAAC,cAAc;SACpC;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,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,UAAU,EAAE,KAAK;YACjB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,qBAAqB;SACjC;KACF;IACD,IAAI,EAAE;QACJ,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,QAAQ,EAAE,OAAO;SAClB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageTopBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,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,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,MAAM,EAAE,YAAY,CAAC,cAAc;SACpC;KACF;IACD,OAAO,EAAE;QACP,MAAM,EAAE,YAAY,CAAC,OAAO;QAC5B,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,MAAM,EAAE,YAAY,CAAC,cAAc;SACpC;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,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,UAAU,EAAE,KAAK;YACjB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,qBAAqB;SACjC;KACF;IACD,IAAI,EAAE;QACJ,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,QAAQ,EAAE,OAAO;SAClB;KACF;CACF,CAAC,CAAA"}

package/PageTopBarCompound/index.d.ts

@@ -0,0 +1,4 @@
+export declare const PageTopBarCompound: import("react").ForwardRefExoticComponent<import("../PageTopBar/PageTopBar").Props & import("react").RefAttributes<HTMLElement>> & {
+    Menu: import("react").ForwardRefExoticComponent<import("../TopBarMenu").TopBarMenuProps & import("react").RefAttributes<HTMLUListElement>>;
+    Item: import("@toptal/picasso-shared/src").OverridableComponent<import("../TopBarItem/TopBarItem").Props>;
+};

package/PageTopBarCompound/index.js

@@ -0,0 +1,8 @@
+import PageTopBar from '../PageTopBar';
+import TopBarMenu from '../TopBarMenu';
+import TopBarItem from '../TopBarItem';
+export const PageTopBarCompound = Object.assign(PageTopBar, {
+    Menu: TopBarMenu,
+    Item: TopBarItem,
+});
+//# sourceMappingURL=index.js.map

package/PageTopBarCompound/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageTopBarCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,UAAU,MAAM,eAAe,CAAA;AAEtC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC1D,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,UAAU;CACjB,CAAC,CAAA"}

package/TopBarItem/TopBarItem.d.ts

@@ -0,0 +1,17 @@
+import { BaseProps, TextLabelProps, OverridableComponent } from '@toptal/picasso-shared';
+import React, { ElementType, ReactElement } from 'react';
+import { MenuItemProps } from '@material-ui/core/MenuItem';
+export interface Props extends BaseProps, TextLabelProps {
+    /** Pass icon to be used as part of item */
+    icon?: ReactElement;
+    /** Highlights the item as selected */
+    selected?: boolean;
+    /** Component name to render the menu item as */
+    as?: ElementType<MenuItemProps>;
+    /** Callback when item is clicked */
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Callback when item is hovered */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const TopBarItem: OverridableComponent<Props>;
+export default TopBarItem;

package/TopBarItem/TopBarItem.js

@@ -0,0 +1,37 @@
+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 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 classes = useStyles();
+    const isCompactLayout = useBreakpoint(['small', 'medium']);
+    return isCompactLayout ? (React.createElement(SidebarItem, Object.assign({}, props, { ref: ref }))) : (React.createElement(MenuItem, Object.assign({}, rest, { className: cx(classes.root, className, classes.dark, {
+            [classes.selected]: props.selected,
+        }), ref: ref }),
+        icon && React.createElement("div", { className: classes.icon }, icon),
+        React.createElement(Typography, { size: 'small', color: 'inherit' }, children)));
+}));
+TopBarItem.defaultProps = {
+    onClick: noop,
+    selected: false,
+};
+TopBarItem.displayName = 'TopBarItem';
+export default TopBarItem;
+//# sourceMappingURL=TopBarItem.js.map

package/TopBarItem/TopBarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarItem.js","sourceRoot":"","sources":["../../src/TopBarItem/TopBarItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAA6B,MAAM,OAAO,CAAA;AAE1E,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC5D,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,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,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"}

package/TopBarItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TopBarItem';

package/TopBarItem/index.js

@@ -0,0 +1,2 @@
+export { default } from './TopBarItem';
+//# sourceMappingURL=index.js.map

package/TopBarItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TopBarItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/TopBarItem/styles.d.ts

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

package/TopBarItem/styles.js

@@ -0,0 +1,32 @@
+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,
+        },
+        '&:hover': {
+            backgroundColor: 'transparent',
+            color: palette.grey.light2,
+        },
+        '&:focus, &$selected$dark': {
+            backgroundColor: 'transparent',
+            color: palette.common.white,
+        },
+    },
+    icon: {
+        marginRight: '0.875em',
+        width: '1em',
+    },
+    selected: {},
+    dark: {},
+});
+//# sourceMappingURL=styles.js.map

package/TopBarItem/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,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"}

package/TopBarMenu/TopBarMenu.d.ts

@@ -0,0 +1,8 @@
+import { BaseProps } from '@toptal/picasso-shared';
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface Props extends BaseProps, HTMLAttributes<HTMLUListElement> {
+    /** Menu content */
+    children: ReactNode;
+}
+export declare const TopBarMenu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+export default TopBarMenu;

package/TopBarMenu/TopBarMenu.js

@@ -0,0 +1,28 @@
+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 } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Menu from '../Menu';
+import { usePortalToHamburger } from '../PageHamburger';
+import styles from './styles';
+const useStyles = makeStyles(styles, { name: 'PicassoTopBarMenu' });
+export const TopBarMenu = forwardRef(function TopBarMenu(props, ref) {
+    const { children } = props, rest = __rest(props, ["children"]);
+    const classes = useStyles();
+    // not more than 6 menu items are allowed by BASE design
+    const items = React.Children.toArray(children).slice(0, 6);
+    usePortalToHamburger();
+    return (React.createElement(Menu, Object.assign({}, rest, { allowNestedNavigation: false, ref: ref, className: classes.root }), items));
+});
+TopBarMenu.displayName = 'TopBarMenu';
+export default TopBarMenu;
+//# sourceMappingURL=TopBarMenu.js.map

package/TopBarMenu/TopBarMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopBarMenu.js","sourceRoot":"","sources":["../../src/TopBarMenu/TopBarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AACpE,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAE1E,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC5B,MAAM,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA7B,YAAqB,CAAQ,CAAA;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,wDAAwD;IACxD,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,oBAAoB,EAAE,CAAA;IAEtB,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,qBAAqB,EAAE,KAAK,EAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,IAAI,KAEtB,KAAK,CACD,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}

package/TopBarMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TopBarMenu';
+export type { Props as TopBarMenuProps } from './TopBarMenu';

package/TopBarMenu/index.js

@@ -0,0 +1,2 @@
+export { default } from './TopBarMenu';
+//# sourceMappingURL=index.js.map

package/TopBarMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TopBarMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/TopBarMenu/styles.d.ts

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

package/TopBarMenu/styles.js

@@ -0,0 +1,10 @@
+import { createStyles } from '@material-ui/core/styles';
+export default ({ screens }) => createStyles({
+    root: {
+        display: 'flex',
+        [screens('small', 'medium')]: {
+            display: 'block',
+        },
+    },
+});
+//# sourceMappingURL=styles.js.map

package/TopBarMenu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QAEf,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,OAAO,EAAE,OAAO;SACjB;KACF;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "28.10.2-alpha-fix-root-container-order-e4aa2912.0+e4aa2912",
+  "version": "28.11.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",
@@ -31,7 +31,7 @@
     "typescript": "~4.7.0"
   },
   "dependencies": {
-    "@toptal/picasso-shared": "11.1.1-alpha-fix-root-container-order-e4aa2912.32+e4aa2912",
+    "@toptal/picasso-shared": "11.2.0",
     "ap-style-title-case": "^1.1.2",
     "classnames": "^2.3.1",
     "d3": "^6.7.0",
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@toptal/picasso-provider": "2.0.1-alpha-fix-root-container-order-e4aa2912.62+e4aa2912",
+    "@toptal/picasso-provider": "2.1.0",
     "@types/classnames": "^2.3.1",
     "@types/d3": "^6.7.4",
     "@types/quill": "^1.3.10",
@@ -78,6 +78,5 @@
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
-  ],
-  "gitHead": "e4aa2912df52accf1fa137c5a02d492ac80ee0d7"
+  ]
 }