@toptal/picasso-page 5.1.12 → 5.1.13

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,8EAsGtB,CAAA;;;;;;AASF,wBAIE"}
+{"version":3,"file":"PageSidebar.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAuD,MAAM,OAAO,CAAA;AAe3E,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;AAaD,eAAO,MAAM,WAAW,8EA8HtB,CAAA;;;;;;AASF,wBAIE"}

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

@@ -1,7 +1,5 @@
-import { makeStyles } from '@material-ui/core/styles';
 import { useSidebar } from '@toptal/picasso-provider';
-import cx from 'classnames';
-import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Container } from '@toptal/picasso-container';
@@ -12,13 +10,17 @@ import { SidebarItem } from '../SidebarItem';
 import { SidebarLogo } from '../SidebarLogo';
 import { SidebarMenu } from '../SidebarMenu';
 import { SidebarContextProvider } from './SidebarContextProvider';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PageSidebar',
-});
+const classesByVariant = {
+    light: 'shadow-gray-200 bg-gray-100',
+    dark: 'shadow-graphite-800 bg-graphite-800',
+};
+const classesBySize = {
+    small: 'w-[212px]',
+    medium: 'w-[236px]',
+    large: 'w-[280px]',
+};
 export const PageSidebar = forwardRef(function Sidebar(props, ref) {
     const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds, size = 'medium', wrapperMaxHeight, disableSticky, onCollapse = noop, } = props;
-    const classes = useStyles();
     const { setHasSidebar } = useSidebar();
     const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed);
     const [isHovered, setIsHovered] = useState(false);
@@ -41,21 +43,23 @@ export const PageSidebar = forwardRef(function Sidebar(props, ref) {
         setIsCollapsed(previousState => !previousState);
         onCollapse();
     }, [setIsCollapsed, onCollapse]);
-    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 },
+    return (React.createElement(Container, { ref: ref, style: style, className: twMerge('h-full', 'shadow-[inset_-1px_0_0_0]', 'text-lg/[inherit]', 'relative', 'transition-[width] ease-in-out delay-[225ms]', 'hidden min-[1280px]:block', '[&]:before:absolute', '[&]:before:content-[""]', '[&]:before:left-0', '[&]:before:top-0', '[&]:before:w-[15.5rem]', '[&]:before:h-full', className, classesByVariant[variant], classesBySize[size], 'xs:max-md:overflow-y-scroll', collapsible &&
+            isCollapsed && [
+            'w-[5rem]',
+            '[&]:before:w-[5.75rem]',
+            '[&_.scrollable-content]:[-ms-overflow-style:none]',
+            '[&_.scrollable-content]:[scrollbar-width:none]',
+        ], !hasTopBar && 'block'), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, onMouseEnter: collapsible ? () => setIsHovered(true) : noop, onMouseLeave: collapsible ? () => setIsHovered(false) : noop },
         React.createElement(PageHamburgerPortal, null, children),
         React.createElement("div", { style: {
                 maxHeight: wrapperMaxHeight,
-            }, className: cx(classes.wrapper, {
-                [classes.sticky]: !disableSticky,
-            }) },
-            React.createElement(Container, { flex: true, direction: 'column', className: classes.scrollableContent, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.scrollableContainer },
+            }, className: twJoin('h-full', !disableSticky &&
+                'max-h-[calc(100vh-var(--header-height,3.5rem))] sticky top-[var(--header-height,3.5rem)]') },
+            React.createElement(Container, { flex: true, direction: 'column', className: 'scrollable-content h-full overflow-y-auto pt-4 pb-2 px-0', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.scrollableContainer },
                 collapsible && (React.createElement(ButtonCircular, { className: twMerge(
                     // TODO: [FX-XXXX] technical debt: button color/background/radius/shadow shouldn't be overwritten
                     'absolute -right-3 top-3 invisible text-graphite-700 bg-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_0_8px_0_rgba(0,0,0,0.16)] z-[100] hover:text-white hover:bg-blue-500', isHovered && 'visible'), onClick: handleCollapseButtonClick, icon: isCollapsed ? React.createElement(ChevronRight16, null) : React.createElement(BackMinor16, null), "aria-label": 'collapse sidebar', variant: 'primary', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapseButton })),
-                React.createElement("div", { className: classes.spacer }),
+                React.createElement("div", { className: 'order-[50] flex-1 h-full' }),
                 React.createElement(SidebarContextProvider, { isCollapsed: isCollapsed, isHovered: isHovered, variant: variant, expandedItemKey: expandedItemKey, setExpandedItemKey: setExpandedItemKey }, children)))));
 });
 PageSidebar.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,GAChB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,MAAM,MAAM,UAAU,CAAA;AA2B7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa;CACpB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAwB,SAAS,OAAO,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,aAAa,EACb,UAAU,GAAG,IAAI,GAClB,GAAG,KAAK,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,CAAA;IACtC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAClE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAC3E,MAAM,EAAE,SAAS,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,IAAI,WAAW,EAAE;YACf,kBAAkB,CAAC,IAAI,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,IAAI,CAAC,CAAA;QAEnB,OAAO,SAAS,OAAO;YACrB,aAAa,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,eAAe,EAAE,CAAA;IAEjB,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAA;QAC/C,UAAU,EAAE,CAAA;IACd,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACtE,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,WAAW,IAAI,WAAW;YACnD,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC,SAAS;SAC5C,CAAC,iBACW,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC/B,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAC3D,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;QAE5D,oBAAC,mBAAmB,QAAE,QAAQ,CAAuB;QAErD,6BACE,KAAK,EAAE;gBACL,SAAS,EAAE,gBAAgB;aAC5B,EACD,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE;gBAC7B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,aAAa;aACjC,CAAC;YAEF,oBAAC,SAAS,IACR,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,OAAO,CAAC,iBAAiB,iBACvB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB;gBAExC,WAAW,IAAI,CACd,oBAAC,cAAc,IACb,SAAS,EAAE,OAAO;oBAChB,iGAAiG;oBACjG,qLAAqL,EACrL,SAAS,IAAI,SAAS,CACvB,EACD,OAAO,EAAE,yBAAyB,EAClC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,gBAC7C,kBAAkB,EAC7B,OAAO,EAAC,SAAS,iBACJ,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,GACpC,CACH;gBACD,6BAAK,SAAS,EAAE,OAAO,CAAC,MAAM,GAAI;gBAClC,oBAAC,sBAAsB,IACrB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,IAErC,QAAQ,CACc,CACf,CACR,CACI,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IACxC,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAA"}
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,22 +22,22 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "3.0.11",
-    "@toptal/picasso-autocomplete": "5.0.12",
-    "@toptal/picasso-avatar": "6.1.3",
+    "@toptal/picasso-accordion": "3.0.12",
+    "@toptal/picasso-autocomplete": "5.0.13",
+    "@toptal/picasso-avatar": "6.1.4",
     "@toptal/picasso-badge": "3.0.2",
-    "@toptal/picasso-button": "4.0.12",
+    "@toptal/picasso-button": "4.0.13",
     "@toptal/picasso-container": "3.1.0",
     "@toptal/picasso-dropdown": "4.2.0",
-    "@toptal/picasso-icons": "1.7.0",
-    "@toptal/picasso-logo": "2.0.2",
-    "@toptal/picasso-menu": "3.0.8",
-    "@toptal/picasso-notification": "4.0.12",
+    "@toptal/picasso-icons": "1.8.0",
+    "@toptal/picasso-logo": "2.0.3",
+    "@toptal/picasso-menu": "3.0.9",
+    "@toptal/picasso-notification": "4.0.13",
     "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-tag": "4.0.3",
+    "@toptal/picasso-tag": "4.0.4",
     "@toptal/picasso-tooltip": "2.0.0",
     "@toptal/picasso-typography": "4.0.1",
-    "@toptal/picasso-user-badge": "5.1.4",
+    "@toptal/picasso-user-badge": "5.1.5",
     "@toptal/picasso-utils": "2.0.0",
     "classnames": "^2.5.1"
   },

package/src/PageSidebar/PageSidebar.tsx

@@ -1,9 +1,6 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { useSidebar } from '@toptal/picasso-provider'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import cx from 'classnames'
-import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge'
 import type { ReactNode } from 'react'
 import React, { forwardRef, useCallback, useEffect, useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'
@@ -20,7 +17,6 @@ import { SidebarItem } from '../SidebarItem'
 import { SidebarLogo } from '../SidebarLogo'
 import { SidebarMenu } from '../SidebarMenu'
 import { SidebarContextProvider } from './SidebarContextProvider'
-import styles from './styles'
 import type { VariantType } from './types'
 
 export interface Props extends BaseProps {
@@ -47,9 +43,16 @@ export interface Props extends BaseProps {
   onCollapse?: () => void
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PageSidebar',
-})
+const classesByVariant = {
+  light: 'shadow-gray-200 bg-gray-100',
+  dark: 'shadow-graphite-800 bg-graphite-800',
+}
+
+const classesBySize = {
+  small: 'w-[212px]',
+  medium: 'w-[236px]',
+  large: 'w-[280px]',
+}
 
 export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
   props,
@@ -68,7 +71,7 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     disableSticky,
     onCollapse = noop,
   } = props
-  const classes = useStyles()
+
   const { setHasSidebar } = useSidebar()
   const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed)
   const [isHovered, setIsHovered] = useState(false)
@@ -101,10 +104,32 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
     <Container
       ref={ref}
       style={style}
-      className={cx(classes.root, className, classes[variant], classes[size], {
-        [classes.rootCollapsed]: collapsible && isCollapsed,
-        [classes.hamburgerNotAvailable]: !hasTopBar,
-      })}
+      className={twMerge(
+        'h-full',
+        'shadow-[inset_-1px_0_0_0]',
+        'text-lg/[inherit]',
+        'relative',
+        'transition-[width] ease-in-out delay-[225ms]',
+        'hidden min-[1280px]:block',
+        '[&]:before:absolute',
+        '[&]:before:content-[""]',
+        '[&]:before:left-0',
+        '[&]:before:top-0',
+        '[&]:before:w-[15.5rem]',
+        '[&]:before:h-full',
+        className,
+        classesByVariant[variant],
+        classesBySize[size],
+        'xs:max-md:overflow-y-scroll',
+        collapsible &&
+          isCollapsed && [
+            'w-[5rem]',
+            '[&]:before:w-[5.75rem]',
+            '[&_.scrollable-content]:[-ms-overflow-style:none]',
+            '[&_.scrollable-content]:[scrollbar-width:none]',
+          ],
+        !hasTopBar && 'block'
+      )}
       data-testid={testIds?.container}
       onMouseEnter={collapsible ? () => setIsHovered(true) : noop}
       onMouseLeave={collapsible ? () => setIsHovered(false) : noop}
@@ -115,14 +140,16 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
         style={{
           maxHeight: wrapperMaxHeight,
         }}
-        className={cx(classes.wrapper, {
-          [classes.sticky]: !disableSticky,
-        })}
+        className={twJoin(
+          'h-full',
+          !disableSticky &&
+            'max-h-[calc(100vh-var(--header-height,3.5rem))] sticky top-[var(--header-height,3.5rem)]'
+        )}
       >
         <Container
           flex
           direction='column'
-          className={classes.scrollableContent}
+          className='scrollable-content h-full overflow-y-auto pt-4 pb-2 px-0'
           data-testid={testIds?.scrollableContainer}
         >
           {collapsible && (
@@ -139,7 +166,7 @@ export const PageSidebar = forwardRef<HTMLDivElement, Props>(function Sidebar(
               data-testid={testIds?.collapseButton}
             />
           )}
-          <div className={classes.spacer} />
+          <div className='order-[50] flex-1 h-full' />
           <SidebarContextProvider
             isCollapsed={isCollapsed}
             isHovered={isHovered}

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

@@ -6,16 +6,16 @@ exports[`PageSidebar renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
         </div>
       </div>
@@ -30,16 +30,16 @@ exports[`PageSidebar with menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
@@ -59,16 +59,16 @@ exports[`PageSidebar with one normal and one bottom menu 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"

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

@@ -6,16 +6,16 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"
@@ -152,16 +152,16 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
     class="Picasso-root"
   >
     <div
-      class="PageSidebar-root PageSidebar-light PageSidebar-medium PageSidebar-hamburgerNotAvailable"
+      class="h-full shadow-[inset_-1px_0_0_0] text-lg/[inherit] relative transition-[width] ease-in delay-[225ms] min-[1280px]:block [&]:before:absolute [&]:before:content-[""] [&]:before:left-0 [&]:before:top-0 [&]:before:w-[15.5rem] [&]:before:h-full shadow-gray bg-gray w-[236px] xs:max-md:overflow-y block"
     >
       <div
-        class="PageSidebar-wrapper PageSidebar-sticky"
+        class="h-full max-h-[calc(100vh-var(--header sticky top-[var(--header"
       >
         <div
-          class="flex flex-col PageSidebar-scrollableContent"
+          class="flex flex-col scrollable-content h-full overflow-y pt-4 pb-2 px-0"
         >
           <div
-            class="PageSidebar-spacer"
+            class="order-[50] flex-1 h-full"
           />
           <ul
             class="relative list-none outline-none py-2 px-0 m-0 rounded-sm shadow-0 order-1 [&_&]:flex-1 flex-grow flex-shrink max-w"

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;4DAMF,KAAK;AAAxD,wBAiFI"}

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

@@ -1,82 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-import { headerBreakingPointXL } from '../PageTopBar/constants';
-export default ({ palette, screens, transitions }) => createStyles({
-    root: {
-        height: '100%',
-        boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-        fontSize: '1rem',
-        position: 'relative',
-        transition: `width ${transitions.duration.enteringScreen}ms ease-in-out`,
-        display: 'none',
-        [headerBreakingPointXL]: {
-            display: 'block',
-        },
-        [screens('xs', 'sm')]: {
-            width: '100vw',
-            overflowY: 'scroll',
-        },
-        '&::before': {
-            position: 'absolute',
-            content: '""',
-            left: 0,
-            top: 0,
-            width: '15.50rem',
-            height: '100%',
-        },
-    },
-    hamburgerNotAvailable: {
-        display: 'block',
-    },
-    wrapper: {
-        height: '100%',
-        '&$sticky': {
-            maxHeight: `calc(100vh - var(--header-height,3.5rem))`,
-            position: 'sticky',
-            top: 'var(--header-height, 3.5rem)',
-        },
-    },
-    scrollableContent: {
-        height: '100%',
-        overflowY: 'auto',
-        padding: '1rem 0 0.5rem',
-    },
-    small: {
-        width: rem('212px'),
-    },
-    medium: {
-        width: rem('236px'),
-    },
-    large: {
-        width: rem('280px'),
-    },
-    spacer: {
-        order: 50,
-        flex: 1,
-        height: '100%',
-    },
-    light: {
-        boxShadow: `inset -1px 0px 0px 0px ${palette.grey.lighter2}`,
-        backgroundColor: palette.grey.lighter,
-    },
-    dark: {
-        boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-        backgroundColor: palette.grey.darker,
-    },
-    rootCollapsed: {
-        width: '5rem',
-        transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
-        '&::before': {
-            width: '5.75rem',
-        },
-        '& $scrollableContent': {
-            '-ms-overflow-style': 'none',
-            'scrollbar-width': 'none',
-            '&::-webkit-scrollbar': {
-                display: 'none',
-            },
-        },
-    },
-    sticky: {},
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAS,EAAE,EAAE,CAC1D,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QACxE,OAAO,EAAE,MAAM;QACf,CAAC,qBAAqB,CAAC,EAAE;YACvB,OAAO,EAAE,OAAO;SACjB;QAED,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,QAAQ;SACpB;QAED,WAAW,EAAE;YACX,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,MAAM;SACf;KACF;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,OAAO;KACjB;IACD,OAAO,EAAE;QACP,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;YACV,SAAS,EAAE,2CAA2C;YACtD,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,8BAA8B;SACpC;KACF;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,eAAe;KACzB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;KACf;IACD,KAAK,EAAE;QACL,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC5D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,aAAa,gBAAgB;QAEvE,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;SACjB;QACD,sBAAsB,EAAE;YACtB,oBAAoB,EAAE,MAAM;YAC5B,iBAAiB,EAAE,MAAM;YACzB,sBAAsB,EAAE;gBACtB,OAAO,EAAE,MAAM;aAChB;SACF;KACF;IACD,MAAM,EAAE,EAAE;CACX,CAAC,CAAA"}

package/src/PageSidebar/styles.ts

@@ -1,88 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default ({ palette, screens, transitions }: Theme) =>
-  createStyles({
-    root: {
-      height: '100%',
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-      fontSize: '1rem',
-      position: 'relative',
-      transition: `width ${transitions.duration.enteringScreen}ms ease-in-out`,
-      display: 'none',
-      [headerBreakingPointXL]: {
-        display: 'block',
-      },
-
-      [screens('xs', 'sm')]: {
-        width: '100vw',
-        overflowY: 'scroll',
-      },
-
-      '&::before': {
-        position: 'absolute',
-        content: '""',
-        left: 0,
-        top: 0,
-        width: '15.50rem',
-        height: '100%',
-      },
-    },
-    hamburgerNotAvailable: {
-      display: 'block',
-    },
-    wrapper: {
-      height: '100%',
-      '&$sticky': {
-        maxHeight: `calc(100vh - var(--header-height,3.5rem))`,
-        position: 'sticky',
-        top: 'var(--header-height, 3.5rem)',
-      },
-    },
-    scrollableContent: {
-      height: '100%',
-      overflowY: 'auto',
-      padding: '1rem 0 0.5rem',
-    },
-    small: {
-      width: rem('212px'),
-    },
-    medium: {
-      width: rem('236px'),
-    },
-    large: {
-      width: rem('280px'),
-    },
-    spacer: {
-      order: 50,
-      flex: 1,
-      height: '100%',
-    },
-    light: {
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.lighter2}`,
-      backgroundColor: palette.grey.lighter,
-    },
-    dark: {
-      boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-      backgroundColor: palette.grey.darker,
-    },
-    rootCollapsed: {
-      width: '5rem',
-      transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
-
-      '&::before': {
-        width: '5.75rem',
-      },
-      '& $scrollableContent': {
-        '-ms-overflow-style': 'none',
-        'scrollbar-width': 'none',
-        '&::-webkit-scrollbar': {
-          display: 'none',
-        },
-      },
-    },
-    sticky: {},
-  })