@toptal/picasso-page 2.0.23 → 2.0.24-alpha-fx-5525-container-4ebd3caa7.27

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2021-2022 Toptal, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAuD,MAAM,OAAO,CAAA;AAgB3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,iDAAiD;IACjD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2EAA2E;IAC3E,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAC7B,CAAA;IACD,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAMD,eAAO,MAAM,WAAW,8EAwGtB,CAAA;;;;;;AASF,wBAIE"}
+{"version":3,"file":"PageSidebar.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAuD,MAAM,OAAO,CAAA;AAgB3E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,iDAAiD;IACjD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,2EAA2E;IAC3E,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,mBAAmB,CAAC,EAAE,MAAM,CAAA;KAC7B,CAAA;IACD,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAMD,eAAO,MAAM,WAAW,8EAsGtB,CAAA;;;;;;AASF,wBAIE"}

package/dist-package/src/PageSidebar/PageSidebar.js

@@ -41,7 +41,7 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
         setIsCollapsed(previousState => !previousState);
         onCollapse();
     }, [setIsCollapsed, onCollapse]);
-    return (React.createElement(Container, { ref: ref, flex: true, direction: 'column', style: style, className: cx(classes.root, className, classes[variant], classes[size], {
+    return (React.createElement(Container, { ref: ref, 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 },

package/dist-package/src/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/dist-package/src/PageTopBar/PageTopBar.d.ts

@@ -24,6 +24,9 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
         hamburger?: string;
     };
 }
+export declare const PageTopBarContext: React.Context<{
+    variant: VariantType;
+}>;
 export declare const PageTopBar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default PageTopBar;
 //# sourceMappingURL=PageTopBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageTopBar.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,aAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,oBAAoB;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAMD,eAAO,MAAM,UAAU,2EA8HrB,CAAA;AAQF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"PageTopBar.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,aAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,oBAAoB;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,eAAO,MAAM,iBAAiB;aAAkC,WAAW;EAEzE,CAAA;AAMF,eAAO,MAAM,UAAU,2EAmIrB,CAAA;AAQF,eAAe,UAAU,CAAA"}

package/dist-package/src/PageTopBar/PageTopBar.js

@@ -20,6 +20,9 @@ import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils';
 import { PageContext } from '../Page';
 import { PageHamburger, PageHamburgerPortal, useHamburgerContext, } from '../PageHamburger';
 import styles from './styles';
+export const PageTopBarContext = React.createContext({
+    variant: 'dark',
+});
 const useStyles = makeStyles(styles, {
     name: 'PicassoTopBar',
 });
@@ -53,26 +56,27 @@ export const PageTopBar = forwardRef(function PageTopBar(props, ref) {
         [classes.fullWidth]: fullWidth || width === 'full',
         [classes.wide]: width === 'wide',
     }, classes.content);
-    return (React.createElement("div", { className: classes.wrapper },
-        React.createElement("header", Object.assign({}, rest, { ref: ref, className: cx('mui-fixed', classes.root, classes[variant], className, {
-                [classes.preventPageWidthChangeOnScrollbar]: preventPageWidthChangeOnScrollbar,
-            }), style: style }),
-            React.createElement("div", { className: innerClassName },
-                React.createElement("div", { className: classes.left },
-                    React.createElement(Container, { flex: true, alignItems: 'center', gap: 'small' },
-                        React.createElement(PageHamburger, { id: hamburgerId, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger }),
-                        logoLink
-                            ? React.cloneElement(logoLink, {}, logoComponent)
-                            : logoComponent,
-                        titleComponent),
-                    leftContent),
-                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 },
-                    actionItems,
-                    rightContent)))));
+    return (React.createElement(PageTopBarContext.Provider, { value: { variant } },
+        React.createElement("div", { className: classes.wrapper },
+            React.createElement("header", Object.assign({}, rest, { ref: ref, className: cx('mui-fixed', classes.root, classes[variant], className, {
+                    [classes.preventPageWidthChangeOnScrollbar]: preventPageWidthChangeOnScrollbar,
+                }), style: style }),
+                React.createElement("div", { className: innerClassName },
+                    React.createElement("div", { className: classes.left },
+                        React.createElement(Container, { flex: true, alignItems: 'center', gap: 'small' },
+                            React.createElement(PageHamburger, { id: hamburgerId, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger }),
+                            logoLink
+                                ? React.cloneElement(logoLink, {}, logoComponent)
+                                : logoComponent,
+                            titleComponent),
+                        leftContent),
+                    centerContent && (React.createElement(React.Fragment, null,
+                        React.createElement(PageHamburgerPortal, null,
+                            React.createElement("div", { className: classes.centerContentPortal }, centerContent)),
+                        React.createElement(Container, { className: classes.centerContent }, centerContent))),
+                    React.createElement("div", { className: classes.right },
+                        actionItems,
+                        rightContent))))));
 });
 PageTopBar.defaultProps = {
     variant: 'dark',

package/dist-package/src/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":"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"}

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

@@ -1,6 +1,7 @@
 import type { OmitInternalProps } from '@toptal/picasso-shared';
 import type { Props } from './PageTopBar';
 export { default as PageTopBar } from './PageTopBar';
+export { PageTopBarContext } from './PageTopBar';
 export declare type PageTopBarProps = OmitInternalProps<Props>;
 export * from './constants';
 //# sourceMappingURL=index.d.ts.map

package/dist-package/src/PageTopBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,oBAAY,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACtD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageTopBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,oBAAY,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACtD,cAAc,aAAa,CAAA"}

package/dist-package/src/PageTopBar/index.js

@@ -1,3 +1,4 @@
 export { default as PageTopBar } from './PageTopBar';
+export { PageTopBarContext } from './PageTopBar';
 export * from './constants';
 //# sourceMappingURL=index.js.map

package/dist-package/src/PageTopBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/PageTopBar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AAEpD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/PageTopBar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,cAAc,aAAa,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"PageTopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAavD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,cAAc,8EAkG1B,CAAA;AAMD,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PageTopBarMenu.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAcvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,cAAc,8EAuG1B,CAAA;AAMD,eAAe,cAAc,CAAA"}

package/dist-package/src/PageTopBarMenu/PageTopBarMenu.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React, { useContext, forwardRef } from 'react';
 import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import { useBreakpoint } from '@toptal/picasso-utils';
@@ -18,14 +18,17 @@ import { Avatar } from '@toptal/picasso-avatar';
 import { Typography } from '@toptal/picasso-typography';
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown';
 import styles from './styles';
+import { PageTopBarContext } from '../PageTopBar';
 const useStyles = makeStyles(styles, {
     name: 'PicassoTopBarMenu',
 });
 export const PageTopBarMenu = forwardRef(function PageTopBarMenu(props, ref) {
     const { name, meta, avatar, className, style, children, 'data-private': dataPrivate } = props, rest = __rest(props, ["name", "meta", "avatar", "className", "style", "children", 'data-private']);
     const classes = useStyles();
+    const { variant } = useContext(PageTopBarContext);
+    const invert = variant === 'light';
     const isCompactLayout = useBreakpoint(['xs', 'sm', 'md']);
-    const metaContent = typeof meta === 'string' ? (React.createElement(Typography, { className: classes.truncateText, invert: !isCompactLayout, size: 'xsmall', "data-private": dataPrivate }, meta)) : (meta);
+    const metaContent = typeof meta === 'string' ? (React.createElement(Typography, { className: classes.truncateText, invert: !isCompactLayout && !invert, size: 'xsmall', "data-private": dataPrivate }, meta)) : (meta);
     const content = isCompactLayout ? (React.createElement(React.Fragment, null,
         React.createElement(UserBadge, { center: true, size: 'xxsmall', "data-private": dataPrivate, classes: {
                 root: classes.contentUserBadge,
@@ -33,7 +36,7 @@ export const PageTopBarMenu = forwardRef(function PageTopBarMenu(props, ref) {
                 name: cx('!font-[400]', classes.truncateText),
             }, name: name, avatar: avatar }, meta && metaContent),
         children)) : (children);
-    const trigger = isCompactLayout ? (React.createElement(Avatar, { size: 'xxsmall', "data-private": dataPrivate, name: name, src: avatar })) : (React.createElement(UserBadge, { invert: true, center: true, size: 'xxsmall', classes: {
+    const trigger = isCompactLayout ? (React.createElement(Avatar, { size: 'xxsmall', "data-private": dataPrivate, name: name, src: avatar })) : (React.createElement(UserBadge, { invert: !invert, center: true, size: 'xxsmall', classes: {
             name: cx('!font-[400]', classes.truncateText),
         }, name: name, "data-private": dataPrivate, avatar: avatar }, meta && metaContent));
     return (React.createElement(Dropdown, Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), classes: { content: classes.content }, style: style, content: content, offset: { top: isCompactLayout ? 0.8 : 'xsmall' }, popperOptions: {
@@ -45,7 +48,7 @@ export const PageTopBarMenu = forwardRef(function PageTopBarMenu(props, ref) {
             },
         } }),
         trigger,
-        React.createElement(Dropdown.Arrow, { className: classes.arrow })));
+        React.createElement(Dropdown.Arrow, { className: cx(classes.arrow, { [classes.invert]: invert }) })));
 });
 PageTopBarMenu.defaultProps = {};
 PageTopBarMenu.displayName = 'PageTopBarMenu';

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

@@ -1 +1 @@
-{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAaF,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,cAAc,EAAE,WAAW,KAEzB,KAAK,EADJ,IAAI,UACL,KAAK,EATH,4EASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,eAAe,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEzD,MAAM,WAAW,GACf,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,MAAM,EAAE,CAAC,eAAe,EACxB,IAAI,EAAC,QAAQ,kBACC,WAAW,IAExB,IAAI,CACM,CACd,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAA;IAEH,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAChC;QACE,oBAAC,SAAS,IACR,MAAM,QACN,IAAI,EAAC,SAAS,kBACA,WAAW,EACzB,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO,CAAC,gBAAgB;gBAC9B,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC;aAC9C,EACD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAEb,IAAI,IAAI,WAAW,CACV;QACX,QAAQ,CACR,CACJ,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAA;IAED,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,CAChC,oBAAC,MAAM,IACL,IAAI,EAAC,SAAS,kBACA,WAAW,EACzB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,GACX,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IACR,MAAM,QACN,MAAM,QACN,IAAI,EAAC,SAAS,EACd,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC;SAC9C,EACD,IAAI,EAAE,IAAI,kBACI,WAAW,EACzB,MAAM,EAAE,MAAM,IAEb,IAAI,IAAI,WAAW,CACV,CACb,CAAA;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,EACrC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,EACjD,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF;QAEA,OAAO;QACR,oBAAC,QAAQ,CAAC,KAAK,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,GAAI,CACnC,CACZ,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAc,CAAC,YAAY,GAAG,EAAE,CAAA;AAEhC,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
+{"version":3,"file":"PageTopBarMenu.js","sourceRoot":"","sources":["../../../src/PageTopBarMenu/PageTopBarMenu.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "name" | "arrow" | "avatar" | "contentUserBadge" | "truncateText" | "paper">;
+declare const _default: ({ screens, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "invert" | "name" | "arrow" | "avatar" | "contentUserBadge" | "truncateText" | "paper">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBA0CI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarMenu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;+CAGf,KAAK;AAA3C,wBA6CI"}

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

@@ -1,5 +1,5 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ screens }) => createStyles({
+export default ({ screens, palette }) => createStyles({
     avatar: {
         fontSize: '0.9rem',
     },
@@ -34,6 +34,9 @@ export default ({ screens }) => createStyles({
             marginLeft: '0.5rem',
         },
     },
+    invert: {
+        color: palette.text.primary,
+    },
     paper: {
         [screens('xs', 'sm', 'md')]: {
             top: '2.5em !important',

package/dist-package/src/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,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,4CAA4C;QACvD,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"}
+{"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,EAAE,OAAO,EAAS,EAAE,EAAE,CAC7C,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,4CAA4C;QACvD,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,MAAM,EAAE;QACN,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KAC5B;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/dist-package/src/SidebarLogo/SidebarLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLogo.d.ts","sourceRoot":"","sources":["../../../src/SidebarLogo/SidebarLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASvD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yDAAyD;IACzD,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAMD,eAAO,MAAM,WAAW,8EA0BvB,CAAA;AAMD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SidebarLogo.d.ts","sourceRoot":"","sources":["../../../src/SidebarLogo/SidebarLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASvD,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,CAAC,cAAc,GAAG,eAAe,CAAC;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yDAAyD;IACzD,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAMD,eAAO,MAAM,WAAW,8EAwBvB,CAAA;AAMD,eAAe,WAAW,CAAA"}

package/dist-package/src/SidebarLogo/SidebarLogo.js

@@ -23,7 +23,7 @@ export const SidebarLogo = forwardRef(function SidebarLogo(_a, ref) {
     const classes = useStyles();
     const { isCollapsed: isSidebarCollapsed } = useSidebarContext();
     const logo = isSidebarCollapsed ? collapsedLogo : fullLogo;
-    return (React.createElement(Container, Object.assign({}, rest, { className: cx(classes.root, className), ref: ref, flex: true, bottom: 'xsmall', left: 'large', alignItems: 'center' }),
+    return (React.createElement(Container, Object.assign({}, rest, { className: cx(classes.root, className), ref: ref, bottom: 'xsmall', left: 'large' }),
         logo,
         children));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarLogo.js","sourceRoot":"","sources":["../../../src/SidebarLogo/SidebarLogo.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAYzE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAyD,EACzD,GAAG;QADH,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAvD,sDAAyD,CAAF;IAGvD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAE/D,MAAM,IAAI,GAAG,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE1D,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,IAAI,QACJ,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAC,QAAQ;QAElB,IAAI;QACJ,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SidebarLogo.js","sourceRoot":"","sources":["../../../src/SidebarLogo/SidebarLogo.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAYzE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAyD,EACzD,GAAG;QADH,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAAvD,sDAAyD,CAAF;IAGvD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAE/D,MAAM,IAAI,GAAG,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE1D,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,QAAQ,EACf,IAAI,EAAC,OAAO;QAEX,IAAI;QACJ,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,WAAW,CAAC,YAAY,GAAG,EAAE,CAAA;AAE7B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "2.0.23",
+  "version": "2.0.24-alpha-fx-5525-container-4ebd3caa7.27+4ebd3caa7",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,23 +22,23 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "1.0.23",
-    "@toptal/picasso-autocomplete": "1.0.28",
-    "@toptal/picasso-avatar": "2.0.6",
-    "@toptal/picasso-badge": "1.0.3",
-    "@toptal/picasso-button": "2.1.0",
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-dropdown": "2.0.3",
-    "@toptal/picasso-icons": "1.4.0",
-    "@toptal/picasso-logo": "1.0.7",
-    "@toptal/picasso-menu": "1.0.15",
-    "@toptal/picasso-notification": "2.0.15",
-    "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-tag": "2.0.5",
-    "@toptal/picasso-tooltip": "1.1.3",
-    "@toptal/picasso-typography": "2.0.2",
-    "@toptal/picasso-user-badge": "2.0.6",
-    "@toptal/picasso-utils": "1.0.3",
+    "@toptal/picasso-accordion": "1.0.24-alpha-fx-5525-container-4ebd3caa7.27+4ebd3caa7",
+    "@toptal/picasso-autocomplete": "1.0.29-alpha-fx-5525-container-4ebd3caa7.27+4ebd3caa7",
+    "@toptal/picasso-avatar": "2.0.7-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-badge": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
+    "@toptal/picasso-button": "2.1.1-alpha-fx-5525-container-4ebd3caa7.27+4ebd3caa7",
+    "@toptal/picasso-container": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
+    "@toptal/picasso-dropdown": "2.0.4-alpha-fx-5525-container-4ebd3caa7.79+4ebd3caa7",
+    "@toptal/picasso-icons": "1.4.1-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-logo": "1.0.8-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-menu": "1.0.16-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-notification": "2.0.16-alpha-fx-5525-container-4ebd3caa7.27+4ebd3caa7",
+    "@toptal/picasso-shared": "15.0.1-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
+    "@toptal/picasso-tag": "2.0.6-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-tooltip": "1.1.4-alpha-fx-5525-container-4ebd3caa7.63+4ebd3caa7",
+    "@toptal/picasso-typography": "2.0.3-alpha-fx-5525-container-4ebd3caa7.63+4ebd3caa7",
+    "@toptal/picasso-user-badge": "2.0.7-alpha-fx-5525-container-4ebd3caa7.47+4ebd3caa7",
+    "@toptal/picasso-utils": "1.0.4-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
     "classnames": "^2.5.1",
     "tailwind-merge": "^2.2.2"
   },
@@ -49,13 +49,13 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "react-dom": "^18.2.0",
     "@toptal/picasso-tailwind": ">=2.5.0",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0 < 19.0.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1",
-    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-provider": "4.2.2-alpha-fx-5525-container-4ebd3caa7.89+4ebd3caa7",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-5525-container-4ebd3caa7.81+4ebd3caa7",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.1"
   },
@@ -66,5 +66,6 @@
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ]
+  ],
+  "gitHead": "4ebd3caa763220e28d7bfe67e6a63a05ea37599a"
 }

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

@@ -12,7 +12,7 @@ exports[`PageAutocomplete renders 1`] = `
       role="combobox"
     >
       <div
-        class="PicassoContainer-flex"
+        class="flex"
       >
         <div
           class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium PicassoOutlinedInput-rootDark MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
@@ -40,7 +40,7 @@ exports[`PageAutocomplete renders 1`] = `
               type="button"
             >
               <span
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                class="items-center inline-flex font-semibold whitespace-nowrap text-button"
               >
                 <svg
                   class="PicassoSvgCloseMinor16-root text-[1.2em] flex-1"

package/src/PageSidebar/PageSidebar.tsx

@@ -100,8 +100,6 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
   return (
     <Container
       ref={ref}
-      flex
-      direction='column'
       style={style}
       className={cx(classes.root, className, classes[variant], classes[size], {
         [classes.rootCollapsed]: collapsible && isCollapsed,

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

@@ -6,13 +6,13 @@ exports[`PageSidebar renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
@@ -30,13 +30,13 @@ exports[`PageSidebar with menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
@@ -59,13 +59,13 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"

package/src/PageTopBar/PageTopBar.tsx

@@ -48,6 +48,10 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
   }
 }
 
+export const PageTopBarContext = React.createContext<{ variant: VariantType }>({
+  variant: 'dark',
+})
+
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoTopBar',
 })
@@ -125,58 +129,63 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
   )
 
   return (
-    <div className={classes.wrapper}>
-      <header
-        {...rest}
-        ref={ref}
-        className={cx('mui-fixed', classes.root, classes[variant], className, {
-          [classes.preventPageWidthChangeOnScrollbar]:
-            preventPageWidthChangeOnScrollbar,
-        })}
-        style={style}
-      >
-        <div className={innerClassName}>
-          {/*  Left part: Hamburger, Logo, Tagline, Search bar */}
-          <div className={classes.left}>
-            <Container flex alignItems='center' gap='small'>
-              <PageHamburger
-                id={hamburgerId}
-                data-testid={testIds?.hamburger}
-              />
-              {logoLink
-                ? React.cloneElement(logoLink, {}, logoComponent)
-                : logoComponent}
-              {titleComponent}
-            </Container>
-            {leftContent}
-          </div>
-
-          {/* Center part: inline menu */}
-          {centerContent && (
-            <>
-              <PageHamburgerPortal>
-                <div className={classes.centerContentPortal}>
-                  {centerContent}
-                </div>
-              </PageHamburgerPortal>
-              <Container
-                flex
-                alignItems='center'
-                className={classes.centerContent}
-              >
-                {centerContent}
-              </Container>
-            </>
+    <PageTopBarContext.Provider value={{ variant }}>
+      <div className={classes.wrapper}>
+        <header
+          {...rest}
+          ref={ref}
+          className={cx(
+            'mui-fixed',
+            classes.root,
+            classes[variant],
+            className,
+            {
+              [classes.preventPageWidthChangeOnScrollbar]:
+                preventPageWidthChangeOnScrollbar,
+            }
           )}
+          style={style}
+        >
+          <div className={innerClassName}>
+            {/*  Left part: Hamburger, Logo, Tagline, Search bar */}
+            <div className={classes.left}>
+              <Container flex alignItems='center' gap='small'>
+                <PageHamburger
+                  id={hamburgerId}
+                  data-testid={testIds?.hamburger}
+                />
+                {logoLink
+                  ? React.cloneElement(logoLink, {}, logoComponent)
+                  : logoComponent}
+                {titleComponent}
+              </Container>
+              {leftContent}
+            </div>
+
+            {/* Center part: inline menu */}
+            {centerContent && (
+              <>
+                <PageHamburgerPortal>
+                  <div className={classes.centerContentPortal}>
+                    {centerContent}
+                  </div>
+                </PageHamburgerPortal>
+                <Container className={classes.centerContent}>
+                  {centerContent}
+                </Container>
+              </>
+            )}
+
+            {/* Right part: Action items, User menu, Notifications */}
 
-          {/* Right part: Action items, User menu, Notifications */}
-          <div className={classes.right}>
-            {actionItems}
-            {rightContent}
+            <div className={classes.right}>
+              {actionItems}
+              {rightContent}
+            </div>
           </div>
-        </div>
-      </header>
-    </div>
+        </header>
+      </div>
+    </PageTopBarContext.Provider>
   )
 })
 

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

@@ -18,7 +18,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -35,7 +35,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -72,13 +72,13 @@ exports[`Page.TopBar render with custom logo 1`] = `
                 Custom logo content
               </div>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"
@@ -117,7 +117,7 @@ exports[`Page.TopBar render with link 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -134,7 +134,7 @@ exports[`Page.TopBar render with link 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -197,13 +197,13 @@ exports[`Page.TopBar render with link 1`] = `
                 </svg>
               </a>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"
@@ -242,7 +242,7 @@ exports[`Page.TopBar renders 1`] = `
             class="PicassoTopBar-left"
           >
             <div
-              class="PicassoContainer-smallGap PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="gap-4 items-center flex"
             >
               <div
                 class="PicassoDropdown-root PageHamburger-root PageHamburger-hidden"
@@ -259,7 +259,7 @@ exports[`Page.TopBar renders 1`] = `
                     type="button"
                   >
                     <span
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+                      class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
                         class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
@@ -317,13 +317,13 @@ exports[`Page.TopBar renders 1`] = `
                 />
               </svg>
               <div
-                class="PicassoContainer-centerAlignItems PicassoTopBar-title"
+                class="items-center PicassoTopBar-title"
               >
                 <div
                   class="PicassoTopBar-divider"
                 />
                 <div
-                  class="PicassoContainer-leftsmallMargin"
+                  class="ml-4"
                 >
                   <p
                     class="m-0 font-inherit leading-[1.5em] text-white font-regular"

package/src/PageTopBar/index.ts

@@ -3,5 +3,6 @@ import type { OmitInternalProps } from '@toptal/picasso-shared'
 import type { Props } from './PageTopBar'
 
 export { default as PageTopBar } from './PageTopBar'
+export { PageTopBarContext } from './PageTopBar'
 export type PageTopBarProps = OmitInternalProps<Props>
 export * from './constants'

package/src/PageTopBar/story/Variants.example.tsx

@@ -49,6 +49,32 @@ const Example = () => (
         }
       />
     </Container>
+
+    <Container style={{ position: 'relative', height: '6rem' }}>
+      <Page hamburgerId='hamburger-default-example'>
+        <Page.TopBar
+          variant='light'
+          title='Light with menu'
+          actionItems={
+            <Container right={SPACING_6}>
+              <Button variant='primary'>Create job</Button>
+            </Container>
+          }
+          rightContent={
+            <Page.TopBarMenu
+              name='Jacqueline Roque'
+              meta='Developer'
+              avatar='./jacqueline-with-flowers-1954-square.jpg'
+            >
+              <Menu>
+                <Menu.Item>My Account</Menu.Item>
+                <Menu.Item>Log Out</Menu.Item>
+              </Menu>
+            </Page.TopBarMenu>
+          }
+        />
+      </Page>
+    </Container>
   </div>
 )
 

package/src/PageTopBarMenu/PageTopBarMenu.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import type { ReactNode, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
+import React, { useContext, forwardRef } from 'react'
 import cx from 'classnames'
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
@@ -12,6 +12,7 @@ import { Typography } from '@toptal/picasso-typography'
 import { DropdownCompound as Dropdown } from '@toptal/picasso-dropdown'
 
 import styles from './styles'
+import { PageTopBarContext } from '../PageTopBar'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoTopBarMenu',
@@ -42,13 +43,16 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
     } = props
     const classes = useStyles()
 
+    const { variant } = useContext(PageTopBarContext)
+    const invert = variant === 'light'
+
     const isCompactLayout = useBreakpoint(['xs', 'sm', 'md'])
 
     const metaContent =
       typeof meta === 'string' ? (
         <Typography
           className={classes.truncateText}
-          invert={!isCompactLayout}
+          invert={!isCompactLayout && !invert}
           size='xsmall'
           data-private={dataPrivate}
         >
@@ -89,7 +93,7 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
       />
     ) : (
       <UserBadge
-        invert
+        invert={!invert}
         center
         size='xxsmall'
         classes={{
@@ -122,7 +126,9 @@ export const PageTopBarMenu = forwardRef<HTMLDivElement, Props>(
         }}
       >
         {trigger}
-        <Dropdown.Arrow className={classes.arrow} />
+        <Dropdown.Arrow
+          className={cx(classes.arrow, { [classes.invert]: invert })}
+        />
       </Dropdown>
     )
   }

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

@@ -12,22 +12,26 @@ exports[`PageTopBarMenu renders 1`] = `
         class="PicassoDropdown-anchor"
       >
         <div
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoUserBadge-root"
+          class="items-center flex PicassoUserBadge-root"
         >
           <div
-            class="PicassoAvatarWrapper-root PicassoAvatarWrapper-sizeXxsmallSquare PicassoAvatarWrapper-cornerXxsmall"
+            class="flex relative"
           >
-            <img
-              alt="Jacqueline Roque"
-              class="PicassoImage-root PicassoImageAvatar-image PicassoUserBadge-avatar"
-              src="./jacqueline-with-flowers-1954-square.jpg"
-            />
+            <div
+              class="relative bg-gray text-[1rem] shrink-0 grow-0 w-[2em] h-[2em] [clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]"
+            >
+              <img
+                alt="Jacqueline Roque"
+                class="PicassoImage-root object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize PicassoUserBadge-avatar"
+                src="./jacqueline-with-flowers-1954-square.jpg"
+              />
+            </div>
           </div>
           <div
-            class="PicassoContainer-flex PicassoContainer-column PicassoUserBadge-infoContainer"
+            class="flex flex-col PicassoUserBadge-infoContainer"
           >
             <div
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+              class="items-center flex"
             >
               <h4
                 class="m-0 text-md text-white font-semibold inline PicassoUserBadge-name !font-[400] PicassoTopBarMenu-truncateText"

package/src/PageTopBarMenu/styles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-export default ({ screens }: Theme) =>
+export default ({ screens, palette }: Theme) =>
   createStyles({
     avatar: {
       fontSize: '0.9rem',
@@ -38,6 +38,9 @@ export default ({ screens }: Theme) =>
         marginLeft: '0.5rem',
       },
     },
+    invert: {
+      color: palette.text.primary,
+    },
     paper: {
       [screens('xs', 'sm', 'md')]: {
         top: '2.5em !important',

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

@@ -6,13 +6,13 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
@@ -42,19 +42,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     tabindex="0"
                   >
                     <div
-                      class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+                      class="flex PicassoMenuItem-itemWrapper"
                     >
                       <div
-                        class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                        class="flex flex-col PicassoMenuItem-content"
                       >
                         <div
-                          class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                          class="items-center flex"
                         >
                           <div
-                            class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                           >
                             <div
-                              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex PicassoSidebarItemContent-noWrap"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -106,19 +106,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                             tabindex="0"
                           >
                             <div
-                              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+                              class="flex PicassoMenuItem-itemWrapper"
                             >
                               <div
-                                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                                class="flex flex-col PicassoMenuItem-content"
                               >
                                 <div
-                                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                                  class="items-center flex"
                                 >
                                   <div
-                                    class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                                   >
                                     <div
-                                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                                      class="items-center flex PicassoSidebarItemContent-noWrap"
                                     >
                                       <p
                                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -152,13 +152,13 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-flex PicassoContainer-column PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
     >
       <div
         class="PageSidebar-wrapper PageSidebar-sticky"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PageSidebar-scrollableContent"
+          class="flex flex-col PageSidebar-scrollableContent"
         >
           <div
             class="PageSidebar-spacer"
@@ -188,19 +188,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     tabindex="0"
                   >
                     <div
-                      class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+                      class="flex PicassoMenuItem-itemWrapper"
                     >
                       <div
-                        class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                        class="flex flex-col PicassoMenuItem-content"
                       >
                         <div
-                          class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                          class="items-center flex"
                         >
                           <div
-                            class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                           >
                             <div
-                              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex PicassoSidebarItemContent-noWrap"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -252,19 +252,19 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                             tabindex="0"
                           >
                             <div
-                              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+                              class="flex PicassoMenuItem-itemWrapper"
                             >
                               <div
-                                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                                class="flex flex-col PicassoMenuItem-content"
                               >
                                 <div
-                                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                                  class="items-center flex"
                                 >
                                   <div
-                                    class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                                   >
                                     <div
-                                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                                      class="items-center flex PicassoSidebarItemContent-noWrap"
                                     >
                                       <p
                                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -304,16 +304,16 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex PicassoMenuItem-itemWrapper"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col PicassoMenuItem-content"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="items-center flex"
           >
             <div
-              class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -325,7 +325,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
                 />
               </svg>
               <div
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -351,19 +351,19 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
           tabindex="0"
         >
           <div
-            class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+            class="flex PicassoMenuItem-itemWrapper"
           >
             <div
-              class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+              class="flex flex-col PicassoMenuItem-content"
             >
               <div
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                class="items-center flex"
               >
                 <div
-                  class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                  class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                 >
                   <div
-                    class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                    class="items-center flex PicassoSidebarItemContent-noWrap"
                   >
                     <p
                       class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -394,16 +394,16 @@ exports[`SidebarItem is selected 1`] = `
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex PicassoMenuItem-itemWrapper"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col PicassoMenuItem-content"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="items-center flex"
           >
             <div
-              class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -415,7 +415,7 @@ exports[`SidebarItem is selected 1`] = `
                 />
               </svg>
               <div
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -444,19 +444,19 @@ exports[`SidebarItem renders 1`] = `
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex PicassoMenuItem-itemWrapper"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col PicassoMenuItem-content"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="items-center flex"
           >
             <div
-              class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
             >
               <div
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                class="items-center flex PicassoSidebarItemContent-noWrap"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -498,16 +498,16 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
             tabindex="-1"
           >
             <div
-              class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+              class="flex PicassoMenuItem-itemWrapper"
             >
               <div
-                class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                class="flex flex-col PicassoMenuItem-content"
               >
                 <div
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                  class="items-center flex"
                 >
                   <div
-                    class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                    class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                   >
                     <svg
                       class="PicassoSvgCandidates16-root"
@@ -519,7 +519,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                       />
                     </svg>
                     <div
-                      class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                      class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
                     >
                       <p
                         class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -571,19 +571,19 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+                      class="flex PicassoMenuItem-itemWrapper"
                     >
                       <div
-                        class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+                        class="flex flex-col PicassoMenuItem-content"
                       >
                         <div
-                          class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+                          class="items-center flex"
                         >
                           <div
-                            class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+                            class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
                           >
                             <div
-                              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap"
+                              class="items-center flex PicassoSidebarItemContent-noWrap"
                             >
                               <p
                                 class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"
@@ -619,16 +619,16 @@ exports[`SidebarItem with icon 1`] = `
       tabindex="-1"
     >
       <div
-        class="PicassoContainer-flex PicassoMenuItem-itemWrapper"
+        class="flex PicassoMenuItem-itemWrapper"
       >
         <div
-          class="PicassoContainer-flex PicassoContainer-column PicassoMenuItem-content"
+          class="flex flex-col PicassoMenuItem-content"
         >
           <div
-            class="PicassoContainer-centerAlignItems PicassoContainer-flex"
+            class="items-center flex"
           >
             <div
-              class="PicassoContainer-xsmallGap PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoSidebarItemContent-noWrap"
+              class="gap-2 items-center inline-flex PicassoSidebarItemContent-noWrap"
             >
               <svg
                 class="PicassoSvgCandidates16-root"
@@ -640,7 +640,7 @@ exports[`SidebarItem with icon 1`] = `
                 />
               </svg>
               <div
-                class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
+                class="items-center flex PicassoSidebarItemContent-noWrap PicassoSidebarItemContent-withIcon"
               >
                 <p
                   class="m-0 text-md text-inherit font-regular whitespace-nowrap overflow-ellipsis overflow-hidden"

package/src/SidebarLogo/SidebarLogo.tsx

@@ -39,10 +39,8 @@ export const SidebarLogo = forwardRef<HTMLDivElement, Props>(
         {...rest}
         className={cx(classes.root, className)}
         ref={ref}
-        flex
         bottom='xsmall'
         left='large'
-        alignItems='center'
       >
         {logo}
         {children}

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

@@ -6,7 +6,7 @@ exports[`SidebarLogo renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoContainer-bottomxsmallMargin PicassoContainer-leftlargeMargin PicassoContainer-centerAlignItems PicassoContainer-flex PicassoSidebarLogo-root"
+      class="mb-2 ml-8 PicassoSidebarLogo-root"
     >
       <svg
         class="PicassoSvgLogo-root PicassoLogo-root PicassoLogo-default"