@toptal/picasso-page 5.2.2 → 5.2.3-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.1

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/PageCompound/index.d.ts

@@ -27,5 +27,6 @@ export declare const PageCompound: import("react").ForwardRefExoticComponent<imp
         };
     };
     Article: import("packages/shared/dist-package/src").OverridableComponent<import("../PageArticle/PageArticle").Props>;
+    TopBarLoader: import("packages/shared/dist-package/src").OverridableComponent<import("../PageTopBarLoader/PageTopBarLoader").Props>;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageCompound/index.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageCompound/index.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWvB,CAAA"}

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

@@ -8,6 +8,7 @@ import { PageContent } from '../PageContent';
 import { PageBanner } from '../PageBanner';
 import { PageAutocomplete } from '../PageAutocomplete';
 import { PageArticle } from '../PageArticle';
+import { PageTopBarLoader } from '../PageTopBarLoader';
 export const PageCompound = Object.assign(Page, {
     TopBar: PageTopBar,
     TopBarMenu: PageTopBarMenu,
@@ -18,5 +19,6 @@ export const PageCompound = Object.assign(Page, {
     Helmet: PageHelmet,
     Autocomplete: PageAutocomplete,
     Article: PageArticle,
+    TopBarLoader: PageTopBarLoader,
 });
 //# sourceMappingURL=index.js.map

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

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

package/dist-package/src/PageTopBarLoader/PageTopBarLoader.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+import type { BaseProps, OverridableComponent } from '@toptal/picasso-shared';
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
+}
+export declare const PageTopBarLoader: OverridableComponent<Props>;
+export default PageTopBarLoader;
+//# sourceMappingURL=PageTopBarLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTopBarLoader.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarLoader/PageTopBarLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAQ7E,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3E,eAAO,MAAM,gBAAgB,EAAE,oBAAoB,CAAC,KAAK,CA6CvD,CAAA;AAIF,eAAe,gBAAgB,CAAA"}

package/dist-package/src/PageTopBarLoader/PageTopBarLoader.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext } from 'react';
+import { SkeletonLoader } from '@toptal/picasso-skeleton-loader';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { PageContext } from '../Page';
+import { getMaxWidthClass } from './styles';
+export const PageTopBarLoader = forwardRef(function PageTopBarLoader(props, ref) {
+    const { className, style } = props, rest = __rest(props, ["className", "style"]);
+    const { width, fullWidth } = useContext(PageContext);
+    const innerClassName = twMerge('flex items-center justify-between h-[var(--header-height,3.5rem)] px-4 md:px-8', getMaxWidthClass({ fullWidth, width }));
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('fixed top-0 left-0 right-0 w-full bg-gray-100 z-[1200] border border-gray-400', className), style: style }),
+        React.createElement("div", { className: innerClassName },
+            React.createElement("div", { className: 'flex items-center gap-4' },
+                React.createElement(SkeletonLoader.Media, { variant: 'image', width: '2rem', height: '2rem', circle: true }),
+                React.createElement("div", { className: 'flex flex-col items-center gap-2' },
+                    React.createElement(SkeletonLoader.Header, { className: 'w-32 h-4' }),
+                    React.createElement(SkeletonLoader.Header, { className: 'w-24 h-4' }))),
+            React.createElement("div", { className: 'flex flex-col items-center gap-2' },
+                React.createElement(SkeletonLoader.Header, { className: 'w-32 h-4' }),
+                React.createElement(SkeletonLoader.Header, { className: 'w-24 h-4' })))));
+});
+PageTopBarLoader.displayName = 'PageTopBarLoader';
+export default PageTopBarLoader;
+//# sourceMappingURL=PageTopBarLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTopBarLoader.js","sourceRoot":"","sources":["../../../src/PageTopBarLoader/PageTopBarLoader.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAI3C,MAAM,CAAC,MAAM,gBAAgB,GAAgC,UAAU,CAGrE,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArC,sBAA6B,CAAQ,CAAA;IAC3C,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAmB,WAAW,CAAC,CAAA;IAEtE,MAAM,cAAc,GAAG,OAAO,CAC5B,gFAAgF,EAChF,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACvC,CAAA;IAED,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,+EAA+E,EAC/E,SAAS,CACV,EACD,KAAK,EAAE,KAAK;QAEZ,6BAAK,SAAS,EAAE,cAAc;YAE5B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,cAAc,CAAC,KAAK,IACnB,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,MAAM,SACN;gBACF,6BAAK,SAAS,EAAC,kCAAkC;oBAC/C,oBAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG;oBAC9C,oBAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,CAC1C,CACF;YAGN,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,oBAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG;gBAC9C,oBAAC,cAAc,CAAC,MAAM,IAAC,SAAS,EAAC,UAAU,GAAG,CAC1C,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}

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

@@ -0,0 +1,5 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './PageTopBarLoader';
+export { default as PageTopBarLoader } from './PageTopBarLoader';
+export declare type PageTopBarLoaderProps = OmitInternalProps<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarLoader/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAE/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAChE,oBAAY,qBAAqB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/PageTopBarLoader/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { PageContextProps } from '../Page/types';
+export declare const getMaxWidthClass: ({ fullWidth, width }: PageContextProps) => "max-w-full" | "max-w-[90em]" | "max-w-[75em]";
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PageTopBarLoader/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,eAAO,MAAM,gBAAgB,yBAA0B,gBAAgB,mDAUtE,CAAA"}

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

@@ -0,0 +1,10 @@
+export const getMaxWidthClass = ({ fullWidth, width }) => {
+    if (fullWidth || width === 'full') {
+        return 'max-w-full';
+    }
+    if (width === 'wide') {
+        return 'max-w-[90em]';
+    }
+    return 'max-w-[75em]';
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageTopBarLoader/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAoB,EAAE,EAAE;IACzE,IAAI,SAAS,IAAI,KAAK,KAAK,MAAM,EAAE;QACjC,OAAO,YAAY,CAAA;KACpB;IAED,IAAI,KAAK,KAAK,MAAM,EAAE;QACpB,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,cAAc,CAAA;AACvB,CAAC,CAAA"}

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

@@ -14,6 +14,7 @@ export * from './SidebarItemContent';
 export * from './PageTopBar';
 export * from './PageTopBarCompound';
 export * from './PageTopBarMenu';
+export * from './PageTopBarLoader';
 export * from './TopBarItem';
 export * from './TopBarMenu';
 export * from './PageHamburger';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist-package/src/index.js

@@ -14,6 +14,7 @@ export * from './SidebarItemContent';
 export * from './PageTopBar';
 export * from './PageTopBarCompound';
 export * from './PageTopBarMenu';
+export * from './PageTopBarLoader';
 export * from './TopBarItem';
 export * from './TopBarMenu';
 export * from './PageHamburger';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,sBAAsB,CAAA;AACpC,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.2.2",
+  "version": "5.2.3-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.1+8a4e44342",
   "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": "3.0.17",
-    "@toptal/picasso-autocomplete": "5.1.0",
-    "@toptal/picasso-avatar": "6.1.8",
-    "@toptal/picasso-badge": "3.0.3",
-    "@toptal/picasso-button": "4.0.18",
-    "@toptal/picasso-container": "3.1.1",
-    "@toptal/picasso-dropdown": "4.2.1",
-    "@toptal/picasso-icons": "1.11.0",
-    "@toptal/picasso-logo": "2.0.7",
-    "@toptal/picasso-menu": "3.0.13",
-    "@toptal/picasso-notification": "4.0.18",
-    "@toptal/picasso-shared": "15.0.0",
-    "@toptal/picasso-tag": "4.0.8",
-    "@toptal/picasso-tooltip": "2.0.1",
-    "@toptal/picasso-typography": "4.0.2",
-    "@toptal/picasso-user-badge": "5.1.9",
-    "@toptal/picasso-utils": "3.0.0",
+    "@toptal/picasso-accordion": "3.0.18-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.25+8a4e44342",
+    "@toptal/picasso-autocomplete": "5.1.1-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.8+8a4e44342",
+    "@toptal/picasso-avatar": "6.1.9-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-badge": "3.0.4-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-button": "4.0.19-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.25+8a4e44342",
+    "@toptal/picasso-container": "3.1.2-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-dropdown": "4.2.2-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-icons": "1.11.1-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-logo": "2.0.8-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-menu": "3.0.14-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-notification": "4.0.19-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.25+8a4e44342",
+    "@toptal/picasso-shared": "15.0.1-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.318+8a4e44342",
+    "@toptal/picasso-tag": "4.0.9-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-tooltip": "2.0.2-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-typography": "4.0.3-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-user-badge": "5.1.10-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.41+8a4e44342",
+    "@toptal/picasso-utils": "3.0.1-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -46,18 +46,18 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "react-dom": "^18.2.0",
-    "@toptal/picasso-tailwind": ">=2.7",
     "@toptal/picasso-skeleton-loader": "^1.0.37",
-    "react": ">=16.12.0 < 19.0.0"
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
+    "react": ">=16.12.0 < 19.0.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@toptal/picasso-tailwind-merge": "2.0.2",
-    "@toptal/picasso-provider": "5.0.0",
-    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-provider": "5.0.1-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.239+8a4e44342",
+    "@toptal/picasso-tailwind-merge": "2.0.3-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.65+8a4e44342",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-cps-1671-create-page-topbar-loading-component-8a4e44342.318+8a4e44342",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.1"
   },
@@ -68,5 +68,6 @@
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ]
+  ],
+  "gitHead": "8a4e44342537e5b9c9ec60f73edbec73d01fa728"
 }

package/src/Page/story/index.jsx

@@ -4,6 +4,7 @@ import pageFooterStory from '../../PageFooter/story'
 import pageBannerStory from '../../PageBanner/story'
 import pageAutocompleteStory from '../../PageAutocomplete/story'
 import pageArticleStory from '../../PageArticle/story'
+import pageTopBarLoaderStory from '../../PageTopBarLoader/story'
 import { Page } from '../Page'
 import PicassoBook from '~/.storybook/components/PicassoBook'
 
@@ -24,6 +25,7 @@ page
   .addComponentDocs(pageFooterStory.componentDocs)
   .addComponentDocs(pageBannerStory.componentDocs)
   .addComponentDocs(pageAutocompleteStory.componentDocs)
+  .addComponentDocs(pageTopBarLoaderStory.componentDocs)
 
 page
   .createChapter()
@@ -90,3 +92,5 @@ page.connect(pageFooterStory.chapter)
 page.connect(pageBannerStory.chapter)
 
 page.connect(pageAutocompleteStory.chapter)
+
+page.connect(pageTopBarLoaderStory.chapter)

package/src/PageCompound/index.ts

@@ -8,6 +8,7 @@ import { PageContent } from '../PageContent'
 import { PageBanner } from '../PageBanner'
 import { PageAutocomplete } from '../PageAutocomplete'
 import { PageArticle } from '../PageArticle'
+import { PageTopBarLoader } from '../PageTopBarLoader'
 
 export const PageCompound = Object.assign(Page, {
   TopBar: PageTopBar,
@@ -19,4 +20,5 @@ export const PageCompound = Object.assign(Page, {
   Helmet: PageHelmet,
   Autocomplete: PageAutocomplete,
   Article: PageArticle,
+  TopBarLoader: PageTopBarLoader,
 })

package/src/PageTopBarLoader/PageTopBarLoader.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef, useContext } from 'react'
+import type { BaseProps, OverridableComponent } from '@toptal/picasso-shared'
+import { SkeletonLoader } from '@toptal/picasso-skeleton-loader'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import { PageContext } from '../Page'
+import type { PageContextProps } from '../Page'
+import { getMaxWidthClass } from './styles'
+
+export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {}
+
+export const PageTopBarLoader: OverridableComponent<Props> = forwardRef<
+  HTMLDivElement,
+  Props
+>(function PageTopBarLoader(props, ref) {
+  const { className, style, ...rest } = props
+  const { width, fullWidth } = useContext<PageContextProps>(PageContext)
+
+  const innerClassName = twMerge(
+    'flex items-center justify-between h-[var(--header-height,3.5rem)] px-4 md:px-8',
+    getMaxWidthClass({ fullWidth, width })
+  )
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={twMerge(
+        'fixed top-0 left-0 right-0 w-full bg-gray-100 z-[1200] border border-gray-400',
+        className
+      )}
+      style={style}
+    >
+      <div className={innerClassName}>
+        {/* Left part: Media and Headers */}
+        <div className='flex items-center gap-4'>
+          <SkeletonLoader.Media
+            variant='image'
+            width='2rem'
+            height='2rem'
+            circle
+          />
+          <div className='flex flex-col items-center gap-2'>
+            <SkeletonLoader.Header className='w-32 h-4' />
+            <SkeletonLoader.Header className='w-24 h-4' />
+          </div>
+        </div>
+
+        {/* Right part: Headers */}
+        <div className='flex flex-col items-center gap-2'>
+          <SkeletonLoader.Header className='w-32 h-4' />
+          <SkeletonLoader.Header className='w-24 h-4' />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+PageTopBarLoader.displayName = 'PageTopBarLoader'
+
+export default PageTopBarLoader

package/src/PageTopBarLoader/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './PageTopBarLoader'
+
+export { default as PageTopBarLoader } from './PageTopBarLoader'
+export type PageTopBarLoaderProps = OmitInternalProps<Props>

package/src/PageTopBarLoader/story/Default.example.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Page } from '@toptal/picasso'
+
+const Example = () => (
+  <div style={{ height: '4.5rem' }}>
+    <Page.TopBarLoader />
+  </div>
+)
+
+export default Example

package/src/PageTopBarLoader/story/index.jsx

@@ -0,0 +1,25 @@
+import { PageTopBarLoader } from '../PageTopBarLoader'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const chapter = PicassoBook.connectToPage(page =>
+  page
+    .createChapter('Page.TopBarLoader', 'Use as a page content container')
+    .addExample(
+      'PageTopBarLoader/story/Default.example.tsx',
+      {
+        title: 'Default',
+        screenshotBreakpoints: true,
+      },
+      'base/Page'
+    )
+)
+
+const componentDocs = PicassoBook.createComponentDocs(
+  PageTopBarLoader,
+  'Page.TopBarLoader'
+)
+
+export default {
+  chapter,
+  componentDocs,
+}

package/src/PageTopBarLoader/styles.ts

@@ -0,0 +1,13 @@
+import type { PageContextProps } from '../Page/types'
+
+export const getMaxWidthClass = ({ fullWidth, width }: PageContextProps) => {
+  if (fullWidth || width === 'full') {
+    return 'max-w-full'
+  }
+
+  if (width === 'wide') {
+    return 'max-w-[90em]'
+  }
+
+  return 'max-w-[75em]'
+}

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './SidebarItemContent'
 export * from './PageTopBar'
 export * from './PageTopBarCompound'
 export * from './PageTopBarMenu'
+export * from './PageTopBarLoader'
 export * from './TopBarItem'
 export * from './TopBarMenu'
 export * from './PageHamburger'