@toptal/picasso-page 5.0.7 → 5.1.0

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

@@ -9,6 +9,7 @@ export interface Props extends BaseProps {
     /** Whether it should hide bottom border */
     noBorder?: boolean;
 }
+/** @deprecated Use `PageHeadBase` instead to conform to BASE. `PageHead` will be removed in a future major update of Picasso*/
 export declare const PageHead: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
     Title: ({ titleCase, children, className, ...rest }: TextLabelProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA4ED,eAAO,MAAM,QAAQ,8EAoBnB,CAAA;;;;;;;;;;;;;;;;AASF,wBAKE"}
+{"version":3,"file":"PageHead.d.ts","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA4ED,+HAA+H;AAC/H,eAAO,MAAM,QAAQ,8EAoBnB,CAAA;;;;;;;;;;;;;;;;AASF,wBAKE"}

package/dist-package/src/PageHead/PageHead.js

@@ -38,6 +38,7 @@ const borderPseudoElement = [
     'after:bg-gray-200',
     'after:h-[1px]',
 ];
+/** @deprecated Use `PageHeadBase` instead to conform to BASE. `PageHead` will be removed in a future major update of Picasso*/
 export const PageHead = forwardRef(function PageHead(props, ref) {
     const { children, noBorder, rightPadding, className } = props;
     const withBorder = !noBorder;

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

@@ -1 +1 @@
-{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,KAAK,GAAG,CAAC,EAKwC,EAAE,EAAE;QAL5C,EACb,SAAS,EACT,QAAQ,EACR,SAAS,OAE4C,EADlD,IAAI,cAJM,sCAKd,CADQ;IAEP,OAAO,CACL,oBAAC,UAAU,kBACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,IAChB,IAAI,GAEP,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAIwB,EAAE,EAAE;QAJ5B,EACZ,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHK,yBAIb,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GACtC,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CACX,KAAsE,EACtE,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAzD,4CAAiD,CAAQ,CAAA;IAE/D,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAChB,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa,EACxD,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAIqB,EAAE,EAAE;QAJzB,EACf,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHQ,yBAIhB,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GAC/D,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG;IAC1B,oBAAoB;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;IAChB,WAAW;IACX,mBAAmB;IACnB,eAAe;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7D,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,UAAU,EACV,UAAU,IAAI,mBAAmB,EACjC,YAAY,IAAI,MAAM,EACtB,SAAS,CACV,IAEA,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACrC,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,OAAO;CACR,CAAC,CAAA"}
+{"version":3,"file":"PageHead.js","sourceRoot":"","sources":["../../../src/PageHead/PageHead.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,KAAK,GAAG,CAAC,EAKwC,EAAE,EAAE;QAL5C,EACb,SAAS,EACT,QAAQ,EACR,SAAS,OAE4C,EADlD,IAAI,cAJM,sCAKd,CADQ;IAEP,OAAO,CACL,oBAAC,UAAU,kBACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,IAChB,IAAI,GAEP,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAIwB,EAAE,EAAE;QAJ5B,EACZ,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHK,yBAIb,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GACtC,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CACX,KAAsE,EACtE,EAAE;IACF,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAzD,4CAAiD,CAAQ,CAAA;IAE/D,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,cAAc,EAAC,eAAe,EAC9B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,OAAO,CAChB,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa,EACxD,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAIqB,EAAE,EAAE;QAJzB,EACf,QAAQ,EACR,SAAS,OAE2B,EADjC,IAAI,cAHQ,yBAIhB,CADQ;IAEP,OAAO,CACL,oBAAC,SAAS,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,IAAM,IAAI,GAC/D,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG;IAC1B,oBAAoB;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;IAChB,WAAW;IACX,mBAAmB;IACnB,eAAe;CAChB,CAAA;AAED,+HAA+H;AAC/H,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC7D,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAChB,UAAU,EACV,UAAU,IAAI,mBAAmB,EACjC,YAAY,IAAI,MAAM,EACtB,SAAS,CACV,IAEA,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,YAAY,GAAG;IACtB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACrC,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,OAAO;CACR,CAAC,CAAA"}

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
+export interface Props extends BaseProps, TextLabelProps {
+    /**
+     * Buttons or other actions to be rendered on the right side of the title
+     */
+    actions?: ReactNode;
+    /**
+     * Breadcrumbs component to be rendered above the title
+     */
+    breadcrumbs?: ReactNode;
+    /** Whether it should have right padding */
+    rightPadding?: boolean;
+    /** Whether it should hide bottom border */
+    noBorder?: boolean;
+    /** Render components next to the title. */
+    titleAdornments?: ReactNode[];
+    /** Title */
+    title?: string;
+    /** Shows the loading skeleton when title is loading */
+    titleLoading?: boolean;
+    /** Subtitle */
+    subtitle?: string;
+    /** Shows the loading skeleton when subtitle is loading */
+    subtitleLoading?: boolean;
+}
+export declare const PageHeadBase: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default PageHeadBase;
+//# sourceMappingURL=PageHeadBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeadBase.d.ts","sourceRoot":"","sources":["../../../src/PageHeadBase/PageHeadBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAKvE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAA;IAC7B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAYD,eAAO,MAAM,YAAY,8EAgFxB,CAAA;AAID,eAAe,YAAY,CAAA"}

package/dist-package/src/PageHeadBase/PageHeadBase.js

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import { Typography } from '@toptal/picasso-typography';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { SkeletonLoader } from '@toptal/picasso-skeleton-loader';
+const borderPseudoElement = [
+    'after:content-[""]',
+    'after:absolute',
+    'after:inset-x-0',
+    'after:bottom-0',
+    'after:z-0',
+    'after:bg-gray-200',
+    'after:h-[1px]',
+];
+export const PageHeadBase = forwardRef(({ breadcrumbs, title, titleAdornments, titleCase, subtitle, actions, noBorder = false, rightPadding = false, titleLoading = false, subtitleLoading = false, className, }, ref) => {
+    const withBorder = !noBorder;
+    const getLoadingState = (loading) => {
+        if (loading) {
+            return React.createElement(SkeletonLoader.Header, null);
+        }
+        return true;
+    };
+    return (React.createElement("div", { className: twMerge('relative flex flex-col gap-6', ['py-3', rightPadding && 'pr-8'], withBorder && borderPseudoElement, className), ref: ref },
+        React.createElement("div", { className: 'flex flex-col gap-4' },
+            breadcrumbs,
+            React.createElement("div", { className: 'flex justify-between items-start gap-6 flex-wrap md:flex-nowrap' },
+                React.createElement("div", { className: 'flex flex-col gap-1 grow' },
+                    title && (React.createElement("div", { className: 'flex items-center gap-2' },
+                        titleLoading ? (getLoadingState(titleLoading)) : (React.createElement(Typography, { variant: 'heading', size: 'large', titleCase: titleCase, className: className }, title)),
+                        titleAdornments)),
+                    subtitleLoading
+                        ? getLoadingState(subtitleLoading)
+                        : subtitle && (React.createElement("div", null,
+                            React.createElement(Typography, { size: 'small' }, subtitle)))),
+                actions && (React.createElement("div", { className: 'flex items-center min-h-8 grow-0' }, actions))))));
+});
+PageHeadBase.displayName = 'PageHeadBase';
+export default PageHeadBase;
+//# sourceMappingURL=PageHeadBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeadBase.js","sourceRoot":"","sources":["../../../src/PageHeadBase/PageHeadBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AA2BhE,MAAM,mBAAmB,GAAG;IAC1B,oBAAoB;IACpB,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;IAChB,WAAW;IACX,mBAAmB;IACnB,eAAe;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EACE,WAAW,EACX,KAAK,EACL,eAAe,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,KAAK,EACvB,SAAS,GACV,EACD,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAA;IAE5B,MAAM,eAAe,GAAG,CAAC,OAAiB,EAAE,EAAE;QAC5C,IAAI,OAAO,EAAE;YACX,OAAO,oBAAC,cAAc,CAAC,MAAM,OAAG,CAAA;SACjC;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CAAA;IAED,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAChB,8BAA8B,EAC9B,CAAC,MAAM,EAAE,YAAY,IAAI,MAAM,CAAC,EAChC,UAAU,IAAI,mBAAmB,EACjC,SAAS,CACV,EACD,GAAG,EAAE,GAAG;QAER,6BAAK,SAAS,EAAC,qBAAqB;YACjC,WAAW;YAGZ,6BAAK,SAAS,EAAC,iEAAiE;gBAE9E,6BAAK,SAAS,EAAC,0BAA0B;oBAEtC,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,yBAAyB;wBACrC,YAAY,CAAC,CAAC,CAAC,CACd,eAAe,CAAC,YAAY,CAAC,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACK,CACd;wBACA,eAAe,CACZ,CACP;oBACA,eAAe;wBACd,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC;wBAClC,CAAC,CAAC,QAAQ,IAAI,CACV;4BACE,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,IAAE,QAAQ,CAAc,CAC5C,CACP,CACD;gBAGL,OAAO,IAAI,CACV,6BAAK,SAAS,EAAC,kCAAkC,IAAE,OAAO,CAAO,CAClE,CACG,CACF,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

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

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

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

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

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

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

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

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

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

@@ -18,4 +18,5 @@ export * from './TopBarItem';
 export * from './TopBarMenu';
 export * from './PageHamburger';
 export * from './PageHead';
+export * from './PageHeadBase';
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

package/dist-package/src/index.js

@@ -18,4 +18,5 @@ export * from './TopBarItem';
 export * from './TopBarMenu';
 export * from './PageHamburger';
 export * from './PageHead';
+export * from './PageHeadBase';
 //# sourceMappingURL=index.js.map

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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.0.7",
+  "version": "5.1.0",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,17 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-accordion": "3.0.4",
-    "@toptal/picasso-autocomplete": "5.0.5",
+    "@toptal/picasso-accordion": "3.0.5",
+    "@toptal/picasso-autocomplete": "5.0.6",
     "@toptal/picasso-avatar": "6.1.2",
     "@toptal/picasso-badge": "3.0.1",
-    "@toptal/picasso-button": "4.0.5",
+    "@toptal/picasso-button": "4.0.6",
     "@toptal/picasso-container": "3.1.0",
     "@toptal/picasso-dropdown": "4.1.1",
     "@toptal/picasso-icons": "1.6.1",
     "@toptal/picasso-logo": "2.0.1",
     "@toptal/picasso-menu": "3.0.5",
-    "@toptal/picasso-notification": "4.0.5",
+    "@toptal/picasso-notification": "4.0.6",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-tag": "4.0.1",
     "@toptal/picasso-tooltip": "2.0.0",
@@ -51,6 +51,7 @@
     "@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"
   },
   "devDependencies": {

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

@@ -33,7 +33,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-none [&+&]:ml-4 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-none [[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"
               data-component-type="button"
               role="reset"
               tabindex="-1"

package/src/PageHead/PageHead.tsx

@@ -88,6 +88,7 @@ const borderPseudoElement = [
   'after:h-[1px]',
 ]
 
+/** @deprecated Use `PageHeadBase` instead to conform to BASE. `PageHead` will be removed in a future major update of Picasso*/
 export const PageHead = forwardRef<HTMLDivElement, Props>(function PageHead(
   props,
   ref

package/src/PageHead/story/index.jsx

@@ -24,6 +24,7 @@ page
     'base/Page'
   )
   .addExample('PageHead/story/Title.example.tsx', 'Title', 'base/Page')
+  .addExample('PageHead/story/Steps.example.tsx', 'Steps', 'base/Page')
   .addExample(
     'PageHead/story/TitleAndButton.example.tsx',
     'Title and button',
@@ -39,7 +40,6 @@ page
     'Title and breadcrumbs',
     'base/Page'
   )
-  .addExample('PageHead/story/Steps.example.tsx', 'Steps', 'base/Page')
   .addExample(
     'PageHead/story/WithRightPadding.example.tsx',
     'With right padding of the container',

package/src/PageHeadBase/PageHeadBase.tsx

@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
+import { Typography } from '@toptal/picasso-typography'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+import { SkeletonLoader } from '@toptal/picasso-skeleton-loader'
+
+export interface Props extends BaseProps, TextLabelProps {
+  /**
+   * Buttons or other actions to be rendered on the right side of the title
+   */
+  actions?: ReactNode
+  /**
+   * Breadcrumbs component to be rendered above the title
+   */
+  breadcrumbs?: ReactNode
+  /** Whether it should have right padding */
+  rightPadding?: boolean
+  /** Whether it should hide bottom border */
+  noBorder?: boolean
+  /** Render components next to the title. */
+  titleAdornments?: ReactNode[]
+  /** Title */
+  title?: string
+  /** Shows the loading skeleton when title is loading */
+  titleLoading?: boolean
+  /** Subtitle */
+  subtitle?: string
+  /** Shows the loading skeleton when subtitle is loading */
+  subtitleLoading?: boolean
+}
+
+const borderPseudoElement = [
+  'after:content-[""]',
+  'after:absolute',
+  'after:inset-x-0',
+  'after:bottom-0',
+  'after:z-0',
+  'after:bg-gray-200',
+  'after:h-[1px]',
+]
+
+export const PageHeadBase = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      breadcrumbs,
+      title,
+      titleAdornments,
+      titleCase,
+      subtitle,
+      actions,
+      noBorder = false,
+      rightPadding = false,
+      titleLoading = false,
+      subtitleLoading = false,
+      className,
+    },
+    ref
+  ) => {
+    const withBorder = !noBorder
+
+    const getLoadingState = (loading?: boolean) => {
+      if (loading) {
+        return <SkeletonLoader.Header />
+      }
+
+      return true
+    }
+
+    return (
+      <div
+        className={twMerge(
+          'relative flex flex-col gap-6',
+          ['py-3', rightPadding && 'pr-8'],
+          withBorder && borderPseudoElement,
+          className
+        )}
+        ref={ref}
+      >
+        <div className='flex flex-col gap-4'>
+          {breadcrumbs}
+
+          {/* main */}
+          <div className='flex justify-between items-start gap-6 flex-wrap md:flex-nowrap'>
+            {/* Title and Subtitle container */}
+            <div className='flex flex-col gap-1 grow'>
+              {/* Title  container */}
+              {title && (
+                <div className='flex items-center gap-2'>
+                  {titleLoading ? (
+                    getLoadingState(titleLoading)
+                  ) : (
+                    <Typography
+                      variant='heading'
+                      size='large'
+                      titleCase={titleCase}
+                      className={className}
+                    >
+                      {title}
+                    </Typography>
+                  )}
+                  {titleAdornments}
+                </div>
+              )}
+              {subtitleLoading
+                ? getLoadingState(subtitleLoading)
+                : subtitle && (
+                    <div>
+                      <Typography size='small'>{subtitle}</Typography>
+                    </div>
+                  )}
+            </div>
+
+            {/* Actions container */}
+            {actions && (
+              <div className='flex items-center min-h-8 grow-0'>{actions}</div>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+PageHeadBase.displayName = 'PageHeadBase'
+
+export default PageHeadBase

package/src/PageHeadBase/index.ts

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

package/src/PageHeadBase/story/Blank.example.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { PageHeadBase } from '@toptal/picasso'
+
+const BlankExample = () => <PageHeadBase />
+
+export default BlankExample

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Button, Link, PageHeadBase, Breadcrumbs, Badge } from '@toptal/picasso'
+import { TagRectangular } from '@toptal/picasso-tag'
+
+const DefaultExample = () => {
+  const breadcrumbs = (
+    <Breadcrumbs>
+      <Breadcrumbs.Item
+        as={Link}
+        variant='action'
+        href='https://en.wikipedia.org/wiki/United_States'
+      >
+        USA
+      </Breadcrumbs.Item>
+      <Breadcrumbs.Item
+        as={Link}
+        variant='action'
+        href='https://en.wikipedia.org/wiki/Software'
+      >
+        Software
+      </Breadcrumbs.Item>
+      <Breadcrumbs.Item as={Link} variant='action' href='https://toptal.com'>
+        Toptal
+      </Breadcrumbs.Item>
+    </Breadcrumbs>
+  )
+
+  const actions = (
+    <>
+      <Button size='small' variant='secondary'>
+        Button
+      </Button>
+      <Button.Split size='small' variant='secondary'>
+        Button
+      </Button.Split>
+      <Button size='small' variant='secondary'>
+        Button
+      </Button>
+    </>
+  )
+
+  return (
+    <PageHeadBase
+      actions={actions}
+      breadcrumbs={breadcrumbs}
+      subtitle='Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+      title='Heading Large'
+      titleAdornments={[
+        <Badge variant='white' content={1} />,
+        <TagRectangular variant='green'>Label</TagRectangular>,
+      ]}
+    />
+  )
+}
+
+export default DefaultExample

package/src/PageHeadBase/story/Loading.example.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Badge, PageHeadBase, SkeletonLoader } from '@toptal/picasso'
+import { TagRectangular } from '@toptal/picasso-tag'
+
+const isLoading = true
+
+const Loading = () => (
+  <PageHeadBase
+    title='Heading large'
+    subtitle='Description'
+    subtitleLoading={isLoading}
+    titleAdornments={[
+      isLoading ? (
+        <SkeletonLoader.Typography style={{ width: '20px' }} />
+      ) : (
+        <Badge variant='white' content={1} />
+      ),
+      <TagRectangular variant='green'>Label</TagRectangular>,
+    ]}
+  />
+)
+
+export default Loading

package/src/PageHeadBase/story/NoBorder.example.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {
+  Page,
+  Section,
+  PageHeadBase,
+  Typography,
+  Container,
+  Button,
+} from '@toptal/picasso'
+import { SPACING_4, SPACING_8 } from '@toptal/picasso-utils'
+
+const BlankExample = () => (
+  <div>
+    <Page>
+      <Page.Content>
+        <Container>
+          <Page.Article>
+            <PageHeadBase noBorder title='Overview' />
+          </Page.Article>
+          <Page.Article style={{ marginTop: '1rem' }}>
+            <Section variant='bordered'>
+              <Container bottom={SPACING_4}>
+                <Typography variant='heading' size='large'>
+                  Next step: Speak with ToptTal representative
+                </Typography>
+              </Container>
+              <Container bottom={SPACING_8}>
+                <Typography>
+                  On this call, we will discuss the scope of the project and go
+                  over how Toptal works to se if we can be a good fir to for
+                  your project. This only takes approximately 15 minutes.
+                </Typography>
+              </Container>
+              <Button onClick={() => {}}>Request a Call</Button>
+            </Section>
+          </Page.Article>
+        </Container>
+      </Page.Content>
+    </Page>
+  </div>
+)
+
+export default BlankExample

package/src/PageHeadBase/story/Notification.example.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Notification, PageHeadBase } from '@toptal/picasso'
+
+const NotificationExample = () => (
+  <>
+    <PageHeadBase title='Heading Large' noBorder />
+
+    <Notification>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    </Notification>
+  </>
+)
+
+export default NotificationExample

package/src/PageHeadBase/story/NotificationAndTabs.example.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Notification, PageHeadBase, Tabs } from '@toptal/picasso'
+
+const NotificationAndTabsExample = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <>
+      <PageHeadBase title='Heading Large' noBorder />
+
+      <div className='mb-3'>
+        <Notification>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        </Notification>
+      </div>
+
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+      </Tabs>
+    </>
+  )
+}
+
+export default NotificationAndTabsExample

package/src/PageHeadBase/story/Steps.example.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { PageHeadBase, Stepper } from '@toptal/picasso'
+
+const steps = (
+  <Stepper
+    steps={['Availability', 'Details', 'Feedback', 'Position', 'Skills']}
+    overflowEllipsis
+  />
+)
+
+const StepsExample = () => (
+  <PageHeadBase title='Heading Large' noBorder actions={steps} />
+)
+
+export default StepsExample

package/src/PageHeadBase/story/Title.example.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { PageHeadBase } from '@toptal/picasso'
+
+const TitleExample = () => <PageHeadBase title='Heading Large' />
+
+export default TitleExample

package/src/PageHeadBase/story/TitleAndBreadcrumbs.example.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link, PageHeadBase, Breadcrumbs } from '@toptal/picasso'
+
+const breadcrumbs = (
+  <Breadcrumbs>
+    <Breadcrumbs.Item
+      as={Link}
+      variant='action'
+      href='https://en.wikipedia.org/wiki/United_States'
+    >
+      USA
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item
+      as={Link}
+      variant='action'
+      href='https://en.wikipedia.org/wiki/Software'
+    >
+      Software
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item as={Link} variant='action' href='https://toptal.com'>
+      Toptal
+    </Breadcrumbs.Item>
+  </Breadcrumbs>
+)
+
+const TitleAndBreadcrumbsExample = () => (
+  <PageHeadBase breadcrumbs={breadcrumbs} title='Heading Large' />
+)
+
+export default TitleAndBreadcrumbsExample

package/src/PageHeadBase/story/TitleAndButton.example.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { PageHeadBase, Button, Settings16 } from '@toptal/picasso'
+
+const TitleAndButtonExample = () => (
+  <PageHeadBase
+    title='Heading Large'
+    actions={<Button.Circular variant='flat' icon={<Settings16 />} />}
+  />
+)
+
+export default TitleAndButtonExample

package/src/PageHeadBase/story/TitleAndTabs.example.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Tabs, PageHeadBase } from '@toptal/picasso'
+
+const TitleAndTabsExample = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_: React.ChangeEvent<{}> | null, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <>
+      <PageHeadBase title='Heading Large' noBorder />
+
+      <Tabs value={value} onChange={handleChange}>
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+        <Tabs.Tab label='Label' />
+      </Tabs>
+    </>
+  )
+}
+
+export default TitleAndTabsExample

package/src/PageHeadBase/story/WithRightPadding.example.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, PageHeadBase } from '@toptal/picasso'
+
+const actions = (
+  <>
+    <Button size='small' variant='secondary'>
+      Button
+    </Button>
+    <Button size='small' variant='negative'>
+      Reject
+    </Button>
+    <Button size='small' variant='positive'>
+      Accept
+    </Button>
+  </>
+)
+
+const WithRightPaddingExample = () => (
+  <PageHeadBase rightPadding title='Heading Large' actions={actions} />
+)
+
+export default WithRightPaddingExample

package/src/PageHeadBase/story/index.jsx

@@ -0,0 +1,58 @@
+import { PageHeadBase } from '../PageHeadBase'
+import PicassoBook from '~/.storybook/components/PicassoBook'
+
+const page = PicassoBook.section('Components').createPage(
+  'PageHeadBase',
+  `${PicassoBook.createSourceLink(__filename)}`
+)
+
+page
+  .createTabChapter('Props')
+  .addComponentDocs({ component: PageHeadBase, name: 'PageHeadBase' })
+
+page
+  .createChapter()
+  .addExample('PageHeadBase/story/Default.example.tsx', 'Default', 'base/Page')
+  .addExample('PageHeadBase/story/Blank.example.tsx', 'Blank', 'base/Page')
+  .addExample(
+    'PageHeadBase/story/NoBorder.example.tsx',
+    {
+      title: 'No Border',
+      description:
+        'No border should be used only, when PageHead is followed by bordered section',
+    },
+    'base/Page'
+  )
+  .addExample('PageHeadBase/story/Title.example.tsx', 'Title', 'base/Page')
+  .addExample('PageHeadBase/story/Steps.example.tsx', 'Steps', 'base/Page')
+  .addExample('PageHeadBase/story/Loading.example.tsx', 'Loading', 'base/Page')
+  .addExample(
+    'PageHeadBase/story/TitleAndButton.example.tsx',
+    'Title and button',
+    'base/Page'
+  )
+  .addExample(
+    'PageHeadBase/story/TitleAndTabs.example.tsx',
+    'Title and tabs',
+    'base/Page'
+  )
+  .addExample(
+    'PageHeadBase/story/TitleAndBreadcrumbs.example.tsx',
+    'Title and breadcrumbs',
+    'base/Page'
+  )
+  .addExample(
+    'PageHeadBase/story/Notification.example.tsx',
+    'Notification',
+    'base/Page'
+  )
+  .addExample(
+    'PageHeadBase/story/NotificationAndTabs.example.tsx',
+    'NotificationAndTabs',
+    'base/Page'
+  )
+  .addExample(
+    'PageHeadBase/story/WithRightPadding.example.tsx',
+    'With right padding of the container',
+    'base/Page'
+  )

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

@@ -28,7 +28,7 @@ exports[`Page.TopBar render with custom logo 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-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
                     data-component-type="button"
                     role="button"
                     tabindex="0"
@@ -127,7 +127,7 @@ exports[`Page.TopBar render with link 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-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
                     data-component-type="button"
                     role="button"
                     tabindex="0"
@@ -252,7 +252,7 @@ exports[`Page.TopBar 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-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,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-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-white hover:bg-white/[0.08] active:bg-white/[0.16] focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)] bg-transparent"
                     data-component-type="button"
                     role="button"
                     tabindex="0"

package/src/index.ts

@@ -18,3 +18,4 @@ export * from './TopBarItem'
 export * from './TopBarMenu'
 export * from './PageHamburger'
 export * from './PageHead'
+export * from './PageHeadBase'