npm - @toptal/picasso-page - Versions diffs - 102.0.0 → 102.1.1 - Mend

@toptal/picasso-page 102.0.0 → 102.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist-package/src/PageHamburger/PageHamburger.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
 import React from 'react';
-interface Props {
+import type { BaseProps } from '@toptal/picasso-shared';
+interface Props extends BaseProps {
     id: string;
-    'data-testid'?: string;
+    /** Color variant of the top bar the hamburger is rendered on */
+    variant?: 'dark' | 'light';
 }
-declare const PageHamburger: ({ id, "data-testid": dataTestId, }: Props) => React.ReactElement;
+declare const PageHamburger: ({ id, variant, className, style, "data-testid": dataTestId, }: Props) => React.ReactElement;
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.d.ts.map

package/dist-package/src/PageHamburger/PageHamburger.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;~~AAOvC~~,~~UAAU~~,KAAK;~~IACb~~,EAAE,EAAE,MAAM,CAAA;IACV,~~aAAa~~,CAAC,EAAE,MAAM,CAAA;~~CACvB~~;AAED,QAAA,MAAM,aAAa,~~uCAGhB~~,KAAK,KAAG,KAAK,CAAC,~~YA8ChB~~,CAAA;AAED,eAAe,aAAa,CAAA"}
1	+ {"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,UAAU,KAAM,SAAQ,SAAS;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,QAAA,MAAM,aAAa,kEAMhB,KAAK,KAAG,KAAK,CAAC,YAmDhB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist-package/src/PageHamburger/PageHamburger.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { ButtonCircular } from '@toptal/picasso-button';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Close24, Overview24 } from '@toptal/picasso-icons';
 import { useHamburgerContext } from './PageHamburgerContext';
-const PageHamburger = ({ id, 'data-testid': dataTestId, }) => {
+const PageHamburger = ({ id, variant = 'dark', className, style, 'data-testid': dataTestId, }) => {
     const { hamburgerRef } = useHamburgerContext();
     const [showContent, setShowContent] = useState(false);
     const handleShowContent = () => setShowContent(true);
     const handleHideContent = () => setShowContent(false);
-    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), classes: {
+    return (React.createElement(Dropdown, { className: className, style: style, content: React.createElement("div", { id: id, ref: hamburgerRef }), classes: {
             content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
             popper: '[&]:mt-4',
         },
@@ -25,7 +25,9 @@ const PageHamburger = ({ id, 'data-testid': dataTestId, }) => {
         }, popperProps: {
             role: 'navigation',
         }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
-        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: 'transparent' })));
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: variant === 'light' ? 'flat' : 'transparent',
+            // Room around the 24px icon without moving it, until xl shrinks it
+            responsive: true, className: '-m-2 xl:m-0 rounded-sm' })));
 };
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.js.map

package/dist-package/src/PageHamburger/PageHamburger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;~~AAE3D~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;~~AAO5D~~,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,aAAa,EAAE,UAAU,GACnB,EAAsB,EAAE;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,UAAU;SACnB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,~~EAAC~~,aAAa,~~GACrB~~,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
1	+ {"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAQ5D,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,GACnB,EAAsB,EAAE;IAC9B,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,UAAU;SACnB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;YACrD,mEAAmE;YACnE,UAAU,QACV,SAAS,EAAC,wBAAwB,GAClC,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

	@@ -1 +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;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,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;AAEF,eAAO,MAAM,UAAU,~~2EA0IrB~~,CAAA;AAIF,eAAe,UAAU,CAAA"}
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;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBvD,KAAK,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,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;AAEF,eAAO,MAAM,UAAU,2EA2IrB,CAAA;AAIF,eAAe,UAAU,CAAA"}

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

@@ -59,7 +59,7 @@ export const PageTopBar = forwardRef(function PageTopBar(_a, ref) {
                 React.createElement("div", { className: innerClassName },
                     React.createElement("div", { className: 'flex items-center gap-4' },
                         React.createElement("div", { className: 'flex items-center gap-4' },
-                            showHamburger && (React.createElement(PageHamburger, { id: hamburgerId, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger })),
+                            showHamburger && (React.createElement(PageHamburger, { id: hamburgerId, variant: isDark ? 'dark' : 'light', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.hamburger })),
                             logoLink
                                 ? React.cloneElement(logoLink, {}, logoComponent)
                                 : logoComponent,

package/dist-package/src/PageTopBar/PageTopBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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~~iBACF~~,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,GAC/B,CACH;4BACA,QAAQ;gCACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,aAAa,CAAC;gCACjD,CAAC,CAAC,aAAa;4BAChB,cAAc,CACX;wBACL,WAAW,CACR;oBAGL,aAAa;wBACZ,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,mBAAmB;4BAClB,6BAAK,SAAS,EAAC,2BAA2B,IACvC,aAAa,CACV,CACc,CACvB,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,2BAA2B,IAAE,aAAa,CAAO,CACjE,CAAC;oBAGJ,6BAAK,SAAS,EAAC,yBAAyB;wBACrC,WAAW;wBACX,YAAY,CACT,CACF,CACC,CACL,CACqB,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
1	+ {"version":3,"file":"PageTopBar.js","sourceRoot":"","sources":["../../../src/PageTopBar/PageTopBar.tsx"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "102.0.0",
+  "version": "102.1.1",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -18,23 +18,23 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "102.0.0",
-    "@toptal/picasso-autocomplete": "102.0.0",
-    "@toptal/picasso-avatar": "102.0.0",
-    "@toptal/picasso-badge": "102.0.0",
-    "@toptal/picasso-button": "102.0.0",
-    "@toptal/picasso-container": "102.0.0",
-    "@toptal/picasso-dropdown": "102.0.0",
-    "@toptal/picasso-icons": "102.0.0",
-    "@toptal/picasso-logo": "102.0.0",
-    "@toptal/picasso-menu": "102.0.0",
-    "@toptal/picasso-notification": "102.0.0",
-    "@toptal/picasso-shared": "102.0.0",
-    "@toptal/picasso-tag": "102.0.0",
-    "@toptal/picasso-tooltip": "102.0.0",
-    "@toptal/picasso-typography": "102.0.0",
-    "@toptal/picasso-user-badge": "102.0.0",
-    "@toptal/picasso-utils": "102.0.0"
+    "@toptal/picasso-accordion": "102.0.1",
+    "@toptal/picasso-autocomplete": "102.0.1",
+    "@toptal/picasso-avatar": "102.0.1",
+    "@toptal/picasso-button": "102.0.1",
+    "@toptal/picasso-badge": "102.0.1",
+    "@toptal/picasso-container": "102.0.1",
+    "@toptal/picasso-dropdown": "102.0.1",
+    "@toptal/picasso-logo": "102.0.1",
+    "@toptal/picasso-menu": "102.0.1",
+    "@toptal/picasso-notification": "102.0.1",
+    "@toptal/picasso-shared": "102.1.0",
+    "@toptal/picasso-tag": "102.0.1",
+    "@toptal/picasso-tooltip": "102.0.1",
+    "@toptal/picasso-typography": "102.0.1",
+    "@toptal/picasso-utils": "102.0.1",
+    "@toptal/picasso-user-badge": "102.0.1",
+    "@toptal/picasso-icons": "102.0.1"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -46,14 +46,14 @@
     "@toptal/picasso-tailwind-merge": "^102.0.0",
     "@toptal/picasso-provider": "^102.0.0",
     "@toptal/picasso-tailwind": "^102.0.0",
-    "@toptal/picasso-skeleton-loader": "^102.0.0"
+    "@toptal/picasso-skeleton-loader": "^102.0.1"
   },
   "devDependencies": {
     "react-dom": "^18.3.1",
     "styled-components": "^6.1.1",
     "@toptal/picasso-tailwind-merge": "102.0.0",
     "@toptal/picasso-provider": "102.0.0",
-    "@toptal/picasso-test-utils": "102.0.0"
+    "@toptal/picasso-test-utils": "102.0.1"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

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

@@ -32,7 +32,7 @@ exports[`PageAutocomplete renders 1`] = `
           >
             <button
               aria-disabled="false"
-              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] bg-transparent"
               data-component-type="button"
               role="reset"
               tabindex="-1"

package/src/PageHamburger/PageHamburger.tsx CHANGED Viewed

@@ -2,16 +2,21 @@ import React, { useState } from 'react'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Dropdown } from '@toptal/picasso-dropdown'
 import { Close24, Overview24 } from '@toptal/picasso-icons'
+import type { BaseProps } from '@toptal/picasso-shared'
 import { useHamburgerContext } from './PageHamburgerContext'
-interface Props {
+interface Props extends BaseProps {
   id: string
-  'data-testid'?: string
+  /** Color variant of the top bar the hamburger is rendered on */
+  variant?: 'dark' | 'light'
 }
 const PageHamburger = ({
   id,
+  variant = 'dark',
+  className,
+  style,
   'data-testid': dataTestId,
 }: Props): React.ReactElement => {
   const { hamburgerRef } = useHamburgerContext()
@@ -22,6 +27,8 @@ const PageHamburger = ({
   return (
     <Dropdown
+      className={className}
+      style={style}
       content={<div id={id} ref={hamburgerRef} />}
       classes={{
         content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
@@ -55,7 +62,10 @@ const PageHamburger = ({
           )
         }
         data-testid={dataTestId}
-        variant='transparent'
+        variant={variant === 'light' ? 'flat' : 'transparent'}
+        // Room around the 24px icon without moving it, until xl shrinks it
+        responsive
+        className='-m-2 xl:m-0 rounded-sm'
       />
     </Dropdown>
   )

package/src/PageTopBar/PageTopBar.tsx CHANGED Viewed

@@ -156,6 +156,7 @@ export const PageTopBar = forwardRef<HTMLElement, Props>(function PageTopBar(
                 {showHamburger && (
                   <PageHamburger
                     id={hamburgerId}
+                    variant={isDark ? 'dark' : 'light'}
                     data-testid={testIds?.hamburger}
                   />
                 )}

package/src/PageTopBar/story/LightWithSidebar.example.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react'
+import {
+  Container,
+  Button,
+  Bell16,
+  Page,
+  Menu,
+  Overview16,
+  Jobs16,
+} from '@toptal/picasso'
+import { SPACING_6 } from '@toptal/picasso-utils'
+const Example = () => (
+  <div style={{ height: '12rem' }}>
+    <Page hamburgerId='hamburger-light-sidebar-example'>
+      <Page.TopBar
+        variant='light'
+        title='Onboarding'
+        actionItems={
+          <Container right={SPACING_6}>
+            <Button.Circular variant='flat' icon={<Bell16 />} />
+          </Container>
+        }
+        rightContent={
+          <Page.TopBarMenu
+            name='Jacqueline Roque'
+            avatar='./jacqueline-with-flowers-1954-square.jpg'
+          >
+            <Menu>
+              <Menu.Item>My Account</Menu.Item>
+              <Menu.Item>Log Out</Menu.Item>
+            </Menu>
+          </Page.TopBarMenu>
+        }
+      />
+      <Page.Content>
+        <Page.Sidebar>
+          <Page.Sidebar.Menu>
+            <Page.Sidebar.Item icon={<Overview16 />} selected>
+              Overview
+            </Page.Sidebar.Item>
+            <Page.Sidebar.Item icon={<Jobs16 />}>Jobs</Page.Sidebar.Item>
+          </Page.Sidebar.Menu>
+        </Page.Sidebar>
+        <Page.Article />
+      </Page.Content>
+    </Page>
+  </div>
+)
+export default Example

package/src/PageTopBar/story/index.jsx CHANGED Viewed

@@ -61,6 +61,14 @@ page
     },
     'base/Page'
   )
+  .addExample(
+    'PageTopBar/story/LightWithSidebar.example.tsx',
+    {
+      title: 'Light with sidebar',
+      screenshotBreakpoints: true,
+    },
+    'base/Page'
+  )
   .addExample(
     'PageTopBar/story/ExtraMenuContent.example.tsx',
     {

package/src/PageTopBar/test.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@toptal/picasso-test-utils'
+import { render, screen } from '@toptal/picasso-test-utils'
 import { Link } from '@toptal/picasso-link'
 import { PageTopBar } from './PageTopBar'
@@ -47,4 +47,35 @@ describe('PageTopBar', () => {
     expect(container).toMatchSnapshot()
   })
+  describe('when the hamburger is shown', () => {
+    const renderHamburger = (variant: 'dark' | 'light') => {
+      setScreenWidth(1200)
+      render(
+        <PageTopBar
+          variant={variant}
+          centerContent={<div>Menu</div>}
+          testIds={{ hamburger: 'hamburger' }}
+        />
+      )
+      return screen.getByTestId('hamburger')
+    }
+    describe('when the variant is dark', () => {
+      it('renders a light hamburger button', () => {
+        expect(renderHamburger('dark')).toHaveClass('text-white')
+      })
+    })
+    describe('when the variant is light', () => {
+      it('renders a dark hamburger button', () => {
+        const hamburger = renderHamburger('light')
+        expect(hamburger).toHaveClass('text-graphite-700')
+        expect(hamburger).not.toHaveClass('text-white')
+      })
+    })
+  })
 })

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

@@ -41,7 +41,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                   <div
                     aria-controls="base-ui-:r4:"
                     aria-expanded="true"
-                    class="relative flex items-center select-none cursor-pointer focus-visible:bg-black/12 outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+                    class="relative flex items-center select-none cursor-pointer rounded-sm focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
                     data-component-type="accordion-summary"
                     data-orientation="vertical"
                     data-panel-open=""
@@ -56,7 +56,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     >
                       <li
                         aria-disabled="false"
-                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
                         role="menuitem"
                         tabindex="0"
                       >
@@ -91,7 +91,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                       >
                         <button
                           aria-disabled="false"
-                          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] focus-visible:rounded-sm"
                           data-component-type="button"
                           role="button"
                           tabindex="-1"
@@ -135,7 +135,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     >
                       <li
                         aria-disabled="false"
-                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                         role="menuitem"
                         tabindex="0"
                       >
@@ -219,7 +219,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                   <div
                     aria-controls="base-ui-:r7:"
                     aria-expanded="true"
-                    class="relative flex items-center select-none cursor-pointer focus-visible:bg-black/12 outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+                    class="relative flex items-center select-none cursor-pointer rounded-sm focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
                     data-component-type="accordion-summary"
                     data-orientation="vertical"
                     data-panel-open=""
@@ -234,7 +234,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     >
                       <li
                         aria-disabled="false"
-                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                        class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
                         role="menuitem"
                         tabindex="0"
                       >
@@ -269,7 +269,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                       >
                         <button
                           aria-disabled="false"
-                          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] focus-visible:rounded-sm"
                           data-component-type="button"
                           role="button"
                           tabindex="-1"
@@ -313,7 +313,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
                     >
                       <li
                         aria-disabled="false"
-                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                        class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-8 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                         role="menuitem"
                         tabindex="0"
                       >
@@ -363,7 +363,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
   >
     <li
       aria-disabled="false"
-      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
       role="menuitem"
       tabindex="-1"
     >
@@ -410,7 +410,7 @@ exports[`SidebarItem don't use accordion for non-collapsible with menu 1`] = `
       >
         <li
           aria-disabled="false"
-          class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+          class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
           role="menuitem"
           tabindex="0"
         >
@@ -453,7 +453,7 @@ exports[`SidebarItem is selected 1`] = `
   >
     <li
       aria-disabled="false"
-      class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+      class="px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-blue hover:text-blue focus:text-blue bg-gray hover:bg-gray focus:bg-gray pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
       role="menuitem"
       tabindex="-1"
     >
@@ -503,7 +503,7 @@ exports[`SidebarItem renders 1`] = `
   >
     <li
       aria-disabled="false"
-      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
       role="menuitem"
       tabindex="-1"
     >
@@ -562,7 +562,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
         >
           <div
             aria-expanded="false"
-            class="relative flex items-center select-none cursor-pointer focus-visible:bg-black/12 outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
+            class="relative flex items-center select-none cursor-pointer rounded-sm focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] outline-none py-[0.5625em] px-0 font-semibold text-black data-disabled:pointer-events"
             data-component-type="accordion-summary"
             data-hidden=""
             data-orientation="vertical"
@@ -577,7 +577,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
             >
               <li
                 aria-disabled="false"
-                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
+                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-0 pr-0 pt-0 pb-0 mt-0 mb-0 mr-0 ml-0"
                 role="menuitem"
                 tabindex="-1"
               >
@@ -621,7 +621,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
               >
                 <button
                   aria-disabled="false"
-                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+                  class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_0.1875rem_color-mix(in_srgb,theme(colors.blue.500)_48%,transparent)] focus-visible:rounded-sm"
                   data-component-type="button"
                   role="button"
                   tabindex="-1"
@@ -667,7 +667,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
             >
               <li
                 aria-disabled="false"
-                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+                class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-[2.875rem] pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
                 role="menuitem"
                 tabindex="0"
               >
@@ -713,7 +713,7 @@ exports[`SidebarItem with icon 1`] = `
   >
     <li
       aria-disabled="false"
-      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
+      class="bg-transparent px-4 py-[0.375rem] w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 focus-visible:inset-shadow-[0_0_0_0.1875rem_color h-[2.75rem] whitespace-nowrap rounded-sm flex-1 min-w text-graphite hover:text-blue focus:text-blue pl-4 pr-4 pt-0 pb-0 mt-0 mb-0 mr-4 ml-4"
       role="menuitem"
       tabindex="-1"
     >