@bitrise/bitkit-v2 0.3.415 → 0.3.417

package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js

@@ -57,7 +57,7 @@ var BitkitBreadcrumbRoot = forwardRef(({ children, ...rest }, ref) => {
 		ref,
 		...rest,
 		children: /* @__PURE__ */ jsx(Breadcrumb.List, { children: childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [child, /* @__PURE__ */ jsx(Show, {
-			when: index < childArray.length - 1,
+			when: index < childArray.length - 1 || child.type === BreadcrumbItem,
 			children: /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
 		})] }, child.key)) })
 	});

package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n  children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\n// The whole prop bag travels, not just `href`/`children`: the mobile layout rebuilds its items\n// from these, so picking two keys here would drop everything else a consumer put on a crumb — a\n// `data-*` hook, an `aria-*`, an `onClick` — on mobile only, and silently.\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n  const props: ItemProps[] = [];\n\n  for (const child of elements) {\n    if (child.type === BreadcrumbItem) {\n      props.push(child.props as ItemProps);\n    } else if (child.type === OverflowMenu) {\n      const { children: menuChildren } = child.props as OverflowMenuProps;\n      const menuChildArray = flattenChildren(menuChildren);\n      for (const menuChild of menuChildArray) {\n        if (menuChild.type === OverflowMenuItem) {\n          props.push(menuChild.props as ItemProps);\n        }\n      }\n    }\n  }\n\n  return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children, ...rest }, ref) => {\n  const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n  const childArray = flattenChildren(children);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  if (isMobile) {\n    const links = flattenItemProps(childArray);\n    if (links.length === 0) {\n      return null;\n    }\n\n    const lastLink = links[links.length - 1];\n    const overflowLinks = links.slice(0, -1).reverse();\n\n    return (\n      <Breadcrumb.Root ref={ref} {...rest}>\n        <Breadcrumb.List>\n          <Show when={overflowLinks.length > 0}>\n            <OverflowMenu>\n              <OverflowMenuTrigger>\n                <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n              </OverflowMenuTrigger>\n              {overflowLinks.map((link) => (\n                <OverflowMenuItem key={link.href} {...link} />\n              ))}\n            </OverflowMenu>\n            <Breadcrumb.Separator>\n              <IconChevronRight />\n            </Breadcrumb.Separator>\n          </Show>\n          <BreadcrumbItem {...lastLink} />\n          <Breadcrumb.Separator>\n            <IconChevronRight />\n          </Breadcrumb.Separator>\n        </Breadcrumb.List>\n      </Breadcrumb.Root>\n    );\n  }\n\n  return (\n    <Breadcrumb.Root ref={ref} {...rest}>\n      <Breadcrumb.List>\n        {childArray.map((child, index) => (\n          <Fragment key={child.key}>\n            {child}\n            <Show when={index < childArray.length - 1}>\n              <Breadcrumb.Separator>\n                <IconChevronRight />\n              </Breadcrumb.Separator>\n            </Show>\n          </Fragment>\n        ))}\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = withSubComponents(BitkitBreadcrumbRoot, {\n  CurrentItem: BreadcrumbCurrentItem,\n  Item: BreadcrumbItem,\n  OverflowMenu,\n  OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBACjB,MAAM,KAAK,MAAM,KAAkB;MAC9B,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,gBAAgB,YAAY;EACnD,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBACrB,MAAM,KAAK,UAAU,KAAkB;CAG7C;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,gBAAgB,QAAQ;CAE3C,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;GAC7B,UAAA,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;KAAnC,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD,EAAkC,GAAI,KAAO,GAAtB,KAAK,IAAiB,CAC9C,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD,EAAgB,GAAI,SAAW,CAAA;IAC/B,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAC7B,UAAA,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OACD,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS;GACtC,UAAA,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAPK,MAAM,GAOX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,kBAAkB,sBAAsB;CAC/D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}
+{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n  children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\n// The whole prop bag travels, not just `href`/`children`: the mobile layout rebuilds its items\n// from these, so picking two keys here would drop everything else a consumer put on a crumb — a\n// `data-*` hook, an `aria-*`, an `onClick` — on mobile only, and silently.\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n  const props: ItemProps[] = [];\n\n  for (const child of elements) {\n    if (child.type === BreadcrumbItem) {\n      props.push(child.props as ItemProps);\n    } else if (child.type === OverflowMenu) {\n      const { children: menuChildren } = child.props as OverflowMenuProps;\n      const menuChildArray = flattenChildren(menuChildren);\n      for (const menuChild of menuChildArray) {\n        if (menuChild.type === OverflowMenuItem) {\n          props.push(menuChild.props as ItemProps);\n        }\n      }\n    }\n  }\n\n  return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children, ...rest }, ref) => {\n  const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n  const childArray = flattenChildren(children);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  if (isMobile) {\n    const links = flattenItemProps(childArray);\n    if (links.length === 0) {\n      return null;\n    }\n\n    const lastLink = links[links.length - 1];\n    const overflowLinks = links.slice(0, -1).reverse();\n\n    return (\n      <Breadcrumb.Root ref={ref} {...rest}>\n        <Breadcrumb.List>\n          <Show when={overflowLinks.length > 0}>\n            <OverflowMenu>\n              <OverflowMenuTrigger>\n                <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n              </OverflowMenuTrigger>\n              {overflowLinks.map((link) => (\n                <OverflowMenuItem key={link.href} {...link} />\n              ))}\n            </OverflowMenu>\n            <Breadcrumb.Separator>\n              <IconChevronRight />\n            </Breadcrumb.Separator>\n          </Show>\n          <BreadcrumbItem {...lastLink} />\n          <Breadcrumb.Separator>\n            <IconChevronRight />\n          </Breadcrumb.Separator>\n        </Breadcrumb.List>\n      </Breadcrumb.Root>\n    );\n  }\n\n  return (\n    <Breadcrumb.Root ref={ref} {...rest}>\n      <Breadcrumb.List>\n        {childArray.map((child, index) => (\n          <Fragment key={child.key}>\n            {child}\n            {/* The trail ends with a chevron when the last crumb is a link -- it points at the page\n                you are on, which is not in the trail. A `CurrentItem` IS that page, so nothing\n                follows it. Mobile already ends this way: its last crumb is always a link. */}\n            <Show when={index < childArray.length - 1 || child.type === BreadcrumbItem}>\n              <Breadcrumb.Separator>\n                <IconChevronRight />\n              </Breadcrumb.Separator>\n            </Show>\n          </Fragment>\n        ))}\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = withSubComponents(BitkitBreadcrumbRoot, {\n  CurrentItem: BreadcrumbCurrentItem,\n  Item: BreadcrumbItem,\n  OverflowMenu,\n  OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBACjB,MAAM,KAAK,MAAM,KAAkB;MAC9B,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,gBAAgB,YAAY;EACnD,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBACrB,MAAM,KAAK,UAAU,KAAkB;CAG7C;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,gBAAgB,QAAQ;CAE3C,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;GAC7B,UAAA,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;KAAnC,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD,EAAkC,GAAI,KAAO,GAAtB,KAAK,IAAiB,CAC9C,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD,EAAgB,GAAI,SAAW,CAAA;IAC/B,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAC7B,UAAA,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OAID,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS,KAAK,MAAM,SAAS;GAC1D,UAAA,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAVK,MAAM,GAUX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,kBAAkB,sBAAsB;CAC/D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}

package/dist/components/BitkitPageHeader/BitkitPageHeader.d.ts

@@ -0,0 +1,120 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {
+    /**
+     * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.
+     *
+     * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with
+     * no avatar, so pass this alongside a `breadcrumb`.
+     *
+     * Size it to match the design's two sub-page cards, since the node is yours to build: `size="40"`
+     * (8px radius) against a bare title, and `size="48"` (10px radius) once `secondaryText` is
+     * present — the same avatar the `app` and `user` content shapes use.
+     */
+    avatar?: ReactNode;
+    /** Badge rendered next to the title. Hidden in the collapsed layout. */
+    badge?: ReactNode;
+    /**
+     * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the
+     * header from the design's main-page layout to a sub-page one, so there is no separate page-type
+     * prop: the recipe's own `hasBreadcrumb` variant is derived from it.
+     *
+     * The two layouts carry more than the trail. A main-page header is a title and its subtitle —
+     * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those
+     * belong to sub-pages, so pass them together with a trail.
+     */
+    breadcrumb?: ReactNode;
+    /**
+     * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.
+     *
+     * The collapsed row is built for `size="sm"` buttons and the expanded header for `size="md"`.
+     * Actions arrive as children, so the component cannot set that for you — pass a flat `size="sm"`
+     * whenever `minimal` or `isSticky` is in play.
+     *
+     * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`
+     * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px
+     * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a
+     * little small in the expanded mobile layout — but the design draws no mobile frame for the
+     * collapsed variants, so `sm` is the closer of the two.
+     */
+    children?: ReactNode;
+    /**
+     * Shape of the title block, mirroring the design's `content` property. `title` is a page title
+     * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar
+     * centred against a smaller title and 14px secondary text. They differ only in the gap between
+     * the avatar and the text, 16 and 12 respectively.
+     */
+    contentVariant?: 'title' | 'app' | 'user';
+    /**
+     * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.
+     * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,
+     * which is the shape the design file calls `PageHeader-WFE`.
+     *
+     * Belongs to the collapsed row, so it is honoured by `variant="minimal"` *and* by `isSticky` —
+     * the two produce the same row — and ignored in the expanded layouts, which the design draws no
+     * controls in.
+     */
+    controls?: ReactNode;
+    /**
+     * Renders the compact single-row layout used while the header is stuck to the top of the viewport.
+     * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset
+     * and header container are application concerns.
+     *
+     * Ignored below the `tablet` breakpoint, where the header always stays expanded.
+     *
+     * Pair it with `size="sm"` actions — see `children`.
+     */
+    isSticky?: boolean;
+    /**
+     * Descriptive text below the title. Hidden in the collapsed layout.
+     *
+     * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip
+     * that appears when it does not fit.
+     */
+    secondaryText?: string;
+    /**
+     * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.
+     *
+     * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive
+     * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only
+     * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:
+     *
+     * ```tsx
+     * <BitkitTabs.Root defaultValue="overview">
+     *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title="Build Hub" />
+     *   <BitkitTabs.ContentGroup>
+     *     <BitkitTabs.Content padding="32" value="overview">…</BitkitTabs.Content>
+     *   </BitkitTabs.ContentGroup>
+     * </BitkitTabs.Root>
+     * ```
+     *
+     * Only the row is hidden when the header collapses — the panels live outside it and keep
+     * rendering, so the page never blanks.
+     */
+    tabs?: ReactNode;
+    /**
+     * The page title, as a string. Everything passed here lands inside the `h1`, so it is the
+     * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary
+     * text each have their own slot. Required: it is what gives the header a page heading at every
+     * breakpoint.
+     *
+     * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it
+     * shows the full string in a tooltip — so a long title never grows the header.
+     *
+     * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the
+     * title in the trail rather than as a heading, so end the breadcrumb with a
+     * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden
+     * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header
+     * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its
+     * `CurrentItem` on mobile).
+     */
+    title: string;
+    /**
+     * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat
+     * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects
+     * `size="sm"` actions — see `children`.
+     */
+    variant?: 'default' | 'minimal';
+}
+declare const BitkitPageHeader: import('react').ForwardRefExoticComponent<BitkitPageHeaderProps & import('react').RefAttributes<HTMLElement>>;
+export default BitkitPageHeader;

package/dist/components/BitkitPageHeader/BitkitPageHeader.js

@@ -0,0 +1,105 @@
+import { isEmptyNode } from "../../utilities/isEmptyNode.js";
+import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
+import useIsTruncated from "../../utilities/useIsTruncated.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitPageHeader/BitkitPageHeader.tsx
+var BitkitPageHeader = forwardRef((props, ref) => {
+	const { avatar, badge, breadcrumb, children, contentVariant, controls, isSticky, secondaryText, tabs, title, variant, ...rest } = props;
+	const hasAvatar = !isEmptyNode(avatar);
+	const hasBadge = !isEmptyNode(badge);
+	const hasBreadcrumb = !isEmptyNode(breadcrumb);
+	const hasActions = !isEmptyNode(children);
+	const hasSecondaryText = !isEmptyNode(secondaryText);
+	const hasTabs = !isEmptyNode(tabs);
+	const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated(title);
+	const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated(secondaryText);
+	const isCollapsed = variant === "minimal" || Boolean(isSticky);
+	const showControls = !isEmptyNode(controls) && isCollapsed;
+	const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);
+	const styles = useSlotRecipe({ key: "pageHeader" })({
+		contentVariant,
+		hasBreadcrumb,
+		hasControls: showControls,
+		isSticky,
+		variant
+	});
+	const controlsNode = showControls ? /* @__PURE__ */ jsx(Box, {
+		css: styles.controls,
+		children: controls
+	}) : null;
+	return /* @__PURE__ */ jsxs(Box, {
+		as: "header",
+		css: styles.root,
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			css: styles.headerBlock,
+			children: [
+				hasBreadcrumb && /* @__PURE__ */ jsx(Box, {
+					css: styles.breadcrumb,
+					children: breadcrumb
+				}),
+				hasBreadcrumb && controlsNode,
+				/* @__PURE__ */ jsxs(Box, {
+					css: styles.contentBlock,
+					children: [
+						/* @__PURE__ */ jsxs(Box, {
+							css: styles.titleBlock,
+							children: [hasAvatar && /* @__PURE__ */ jsx(Box, {
+								css: styles.avatar,
+								children: avatar
+							}), /* @__PURE__ */ jsxs(Box, {
+								css: styles.textBlock,
+								children: [/* @__PURE__ */ jsxs(Box, {
+									css: styles.titleRow,
+									children: [/* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+										disabled: !canShowTitleTooltip,
+										placement: "bottom-start",
+										text: title,
+										children: /* @__PURE__ */ jsx(Text, {
+											as: "h1",
+											css: styles.title,
+											ref: titleRef,
+											tabIndex: canShowTitleTooltip ? 0 : void 0,
+											children: title
+										})
+									}), hasBadge && /* @__PURE__ */ jsx(Box, {
+										css: styles.badge,
+										children: badge
+									})]
+								}), hasSecondaryText && secondaryText !== void 0 && /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+									disabled: !isSecondaryTruncated,
+									placement: "bottom-start",
+									text: secondaryText,
+									children: /* @__PURE__ */ jsx(Text, {
+										css: styles.secondaryText,
+										ref: secondaryRef,
+										tabIndex: isSecondaryTruncated ? 0 : void 0,
+										children: secondaryText
+									})
+								})]
+							})]
+						}),
+						!hasBreadcrumb && controlsNode,
+						hasActions && /* @__PURE__ */ jsx(Box, {
+							css: styles.actionBlock,
+							children
+						})
+					]
+				})
+			]
+		}), hasTabs && /* @__PURE__ */ jsx(Box, {
+			css: styles.tabs,
+			children: tabs
+		})]
+	});
+});
+BitkitPageHeader.displayName = "BitkitPageHeader";
+//#endregion
+export { BitkitPageHeader as default };
+
+//# sourceMappingURL=BitkitPageHeader.js.map

package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n   *\n   * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n   * no avatar, so pass this alongside a `breadcrumb`.\n   *\n   * Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n   * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n   * present — the same avatar the `app` and `user` content shapes use.\n   */\n  avatar?: ReactNode;\n  /** Badge rendered next to the title. Hidden in the collapsed layout. */\n  badge?: ReactNode;\n  /**\n   * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n   * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n   * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n   *\n   * The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n   * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n   * belong to sub-pages, so pass them together with a trail.\n   */\n  breadcrumb?: ReactNode;\n  /**\n   * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n   *\n   * The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n   * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n   * whenever `minimal` or `isSticky` is in play.\n   *\n   * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n   * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n   * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n   * little small in the expanded mobile layout — but the design draws no mobile frame for the\n   * collapsed variants, so `sm` is the closer of the two.\n   */\n  children?: ReactNode;\n  /**\n   * Shape of the title block, mirroring the design's `content` property. `title` is a page title\n   * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n   * centred against a smaller title and 14px secondary text. They differ only in the gap between\n   * the avatar and the text, 16 and 12 respectively.\n   */\n  contentVariant?: 'title' | 'app' | 'user';\n  /**\n   * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n   * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n   * which is the shape the design file calls `PageHeader-WFE`.\n   *\n   * Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` *and* by `isSticky` —\n   * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n   * controls in.\n   */\n  controls?: ReactNode;\n  /**\n   * Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n   * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n   * and header container are application concerns.\n   *\n   * Ignored below the `tablet` breakpoint, where the header always stays expanded.\n   *\n   * Pair it with `size=\"sm\"` actions — see `children`.\n   */\n  isSticky?: boolean;\n  /**\n   * Descriptive text below the title. Hidden in the collapsed layout.\n   *\n   * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n   * that appears when it does not fit.\n   */\n  secondaryText?: string;\n  /**\n   * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n   *\n   * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n   * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only\n   * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n   *\n   * ```tsx\n   * <BitkitTabs.Root defaultValue=\"overview\">\n   *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n   *   <BitkitTabs.ContentGroup>\n   *     <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n   *   </BitkitTabs.ContentGroup>\n   * </BitkitTabs.Root>\n   * ```\n   *\n   * Only the row is hidden when the header collapses — the panels live outside it and keep\n   * rendering, so the page never blanks.\n   */\n  tabs?: ReactNode;\n  /**\n   * The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n   * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n   * text each have their own slot. Required: it is what gives the header a page heading at every\n   * breakpoint.\n   *\n   * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n   * shows the full string in a tooltip — so a long title never grows the header.\n   *\n   * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the\n   * title in the trail rather than as a heading, so end the breadcrumb with a\n   * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n   * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n   * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n   * `CurrentItem` on mobile).\n   */\n  title: string;\n  /**\n   * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n   * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n   * `size=\"sm\"` actions — see `children`.\n   */\n  variant?: 'default' | 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n  const {\n    avatar,\n    badge,\n    breadcrumb,\n    children,\n    contentVariant,\n    controls,\n    isSticky,\n    secondaryText,\n    tabs,\n    title,\n    variant,\n    ...rest\n  } = props;\n\n  // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n  // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n  // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n  // fallback until after mount.\n\n  // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n  // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n  // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n  // `controls` it would also spread the row into three groups around an empty middle one.\n  const hasAvatar = !isEmptyNode(avatar);\n  const hasBadge = !isEmptyNode(badge);\n  const hasBreadcrumb = !isEmptyNode(breadcrumb);\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasTabs = !isEmptyNode(tabs);\n\n  // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n  // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n  // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n  const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n  // The design only draws inline controls in the collapsed row, so they are ignored in the\n  // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n  // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n  // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n  const isCollapsed = variant === 'minimal' || Boolean(isSticky);\n  const showControls = !isEmptyNode(controls) && isCollapsed;\n\n  // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n  // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n  // on an invisible element and opens a tooltip against it. The trail already carries the title as\n  // its current item in exactly that layout, so there is nothing to surface anyway.\n  const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n  const recipe = useSlotRecipe({ key: 'pageHeader' });\n  const styles = recipe({\n    contentVariant,\n    hasBreadcrumb,\n    hasControls: showControls,\n    isSticky,\n    variant,\n  });\n\n  // The controls are the middle of three groups, so they follow whichever element holds the left\n  // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n  // they have to go in there with it rather than beside it.\n  const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n  return (\n    <Box as=\"header\" css={styles.root} ref={ref} {...rest}>\n      <Box css={styles.headerBlock}>\n        {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n        {hasBreadcrumb && controlsNode}\n\n        <Box css={styles.contentBlock}>\n          <Box css={styles.titleBlock}>\n            {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n            <Box css={styles.textBlock}>\n              <Box css={styles.titleRow}>\n                {/*\n                  `bottom-start` rather than the tooltip's default `right`: these texts are\n                  full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n                  aligned to the text's start keeps it clear of them and lines it up with the text\n                  it repeats.\n                */}\n                <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n                  {/*\n                    `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n                    `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n                    stop unconditionally would put one in every header for no benefit.\n                  */}\n                  <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n                    {title}\n                  </Text>\n                </BitkitOverflowTooltip>\n                {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n              </Box>\n\n              {hasSecondaryText && secondaryText !== undefined && (\n                <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n                  <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n                    {secondaryText}\n                  </Text>\n                </BitkitOverflowTooltip>\n              )}\n            </Box>\n          </Box>\n\n          {!hasBreadcrumb && controlsNode}\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n      </Box>\n\n      {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n    </Box>\n  );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;AA8HA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,gBACA,UACA,UACA,eACA,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EACb;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAElF,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,OAAO;EAAW;EAAK,GAAI;EAAjD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACE,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;QAAK,KAAK,OAAO;QAAS,UAAA;OAAY,CAAA,GAEpD,qBAAC,KAAD;QAAK,KAAK,OAAO;QAAjB,UAAA,CACE,qBAAC,KAAD;SAAK,KAAK,OAAO;SAAjB,UAAA,CAOE,oBAAC,uBAAD;UAAuB,UAAU,CAAC;UAAqB,WAAU;UAAe,MAAM;UAMpF,UAAA,oBAAC,MAAD;WAAM,IAAG;WAAK,KAAK,OAAO;WAAO,KAAK;WAAU,UAAU,sBAAsB,IAAI,KAAA;WACjF,UAAA;UACG,CAAA;SACe,CAAA,GACtB,YAAY,oBAAC,KAAD;UAAK,KAAK,OAAO;UAAQ,UAAA;SAAW,CAAA,CAC9C;QAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;SAAuB,UAAU,CAAC;SAAsB,WAAU;SAAe,MAAM;SACrF,UAAA,oBAAC,MAAD;UAAM,KAAK,OAAO;UAAe,KAAK;UAAc,UAAU,uBAAuB,IAAI,KAAA;UACtF,UAAA;SACG,CAAA;QACe,CAAA,CAEtB;OACF,CAAA,CAAA;;MAEJ,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,UAAA;EAAU,CAAA,CAC3C;;AAET,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/index.d.ts

@@ -49,6 +49,7 @@ export { default as BitkitNumberInput, type BitkitNumberInputProps } from './Bit
 export { default as BitkitOverflowContent, type BitkitOverflowContentProps, } from './BitkitOverflowContent/BitkitOverflowContent';
 export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } from './BitkitOverflowTooltip/BitkitOverflowTooltip';
 export { default as BitkitPageFooter, type BitkitPageFooterItemProps, type BitkitPageFooterProps, } from './BitkitPageFooter/BitkitPageFooter';
+export { default as BitkitPageHeader, type BitkitPageHeaderProps } from './BitkitPageHeader/BitkitPageHeader';
 export { default as BitkitPageSidebar, type BitkitPageSidebarBodyProps, type BitkitPageSidebarDividerProps, type BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
 export { default as BitkitPagination, type BitkitPaginationLabels, type BitkitPaginationProps, } from './BitkitPagination/BitkitPagination';
 export { default as BitkitPaginationLoadMore, type BitkitPaginationLoadMoreProps, } from './BitkitPaginationLoadMore/BitkitPaginationLoadMore';

package/dist/main.js

@@ -347,6 +347,7 @@ import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.
 import BitkitOverflowContent from "./components/BitkitOverflowContent/BitkitOverflowContent.js";
 import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOverflowTooltip.js";
 import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
+import BitkitPageHeader from "./components/BitkitPageHeader/BitkitPageHeader.js";
 import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
 import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
 import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
@@ -381,4 +382,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

package/dist/theme/slot-recipes/PageHeader.recipe.d.ts

@@ -0,0 +1,202 @@
+declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
+    contentVariant: {
+        title: {
+            titleBlock: {
+                alignItems: "center";
+                gap: "12";
+            };
+            textBlock: {
+                gap: "4";
+            };
+        };
+        app: {
+            titleBlock: {
+                gap: "16";
+                alignItems: "center";
+            };
+            title: {
+                readonly textStyle: {
+                    readonly base: "heading/mobile/h2";
+                    readonly tablet: "heading/h2";
+                };
+            };
+            secondaryText: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+        user: {
+            titleBlock: {
+                gap: "12";
+                alignItems: "center";
+            };
+            title: {
+                readonly textStyle: {
+                    readonly base: "heading/mobile/h2";
+                    readonly tablet: "heading/h2";
+                };
+            };
+            secondaryText: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+    };
+    hasBreadcrumb: {
+        true: {
+            headerBlock: {
+                paddingBlockStart: "24";
+            };
+        };
+        false: {};
+    };
+    hasControls: {
+        true: {};
+        false: {};
+    };
+    isSticky: {
+        true: {
+            headerBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "24";
+                    readonly minHeight: string;
+                    readonly paddingBlockEnd: "12";
+                    readonly paddingBlockStart: "12";
+                    readonly paddingInlineEnd: "32";
+                    readonly paddingInlineStart: "24";
+                };
+            };
+            breadcrumb: {
+                readonly tablet: {
+                    readonly flex: "0 1 auto";
+                    readonly minWidth: 0;
+                };
+            };
+            contentBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flex: "1 0 0";
+                    readonly gap: "24";
+                    readonly justifyContent: "flex-end";
+                    readonly minWidth: 0;
+                };
+            };
+            titleBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                };
+            };
+            title: {
+                readonly tablet: {
+                    readonly textStyle: "heading/h3";
+                };
+            };
+            actionBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "8";
+                    readonly width: "auto";
+                };
+            };
+            avatar: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            badge: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            secondaryText: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            tabs: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            root: {
+                tablet: {
+                    borderColor: "border/minimal";
+                    boxShadow: "elevation/sm";
+                };
+            };
+        };
+        false: {};
+    };
+    variant: {
+        default: {};
+        minimal: {
+            readonly headerBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "24";
+                    readonly minHeight: string;
+                    readonly paddingBlockEnd: "12";
+                    readonly paddingBlockStart: "12";
+                    readonly paddingInlineEnd: "32";
+                    readonly paddingInlineStart: "24";
+                };
+            };
+            readonly breadcrumb: {
+                readonly tablet: {
+                    readonly flex: "0 1 auto";
+                    readonly minWidth: 0;
+                };
+            };
+            readonly contentBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flex: "1 0 0";
+                    readonly gap: "24";
+                    readonly justifyContent: "flex-end";
+                    readonly minWidth: 0;
+                };
+            };
+            readonly titleBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                };
+            };
+            readonly title: {
+                readonly tablet: {
+                    readonly textStyle: "heading/h3";
+                };
+            };
+            readonly actionBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "8";
+                    readonly width: "auto";
+                };
+            };
+            readonly avatar: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly badge: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly secondaryText: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly tabs: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+}>;
+export default pageHeaderSlotRecipe;

package/dist/theme/slot-recipes/PageHeader.recipe.js

@@ -0,0 +1,354 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/PageHeader.recipe.ts
+/**
+* The collapsed single-row layout, shared by `variant="minimal"` and `isSticky`. Both apply the
+* exact same overrides, so the two variants are idempotent when combined. The expanded layout
+* lives in `base` — `variant="default"` and `isSticky: false` deliberately define nothing, so
+* neither can undo the other's collapse.
+*
+* Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`
+* styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal
+* variant — it always shows the title as a heading — and a single 72px row cannot hold a
+* breadcrumb plus full-width actions at 375px.
+*
+* The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the
+* component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.
+*/
+var collapsedSlots = {
+	headerBlock: { tablet: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: "24",
+		minHeight: rem(72),
+		paddingBlockEnd: "12",
+		paddingBlockStart: "12",
+		paddingInlineEnd: "32",
+		paddingInlineStart: "24"
+	} },
+	breadcrumb: { tablet: {
+		flex: "0 1 auto",
+		minWidth: 0
+	} },
+	contentBlock: { tablet: {
+		alignItems: "center",
+		flex: "1 0 0",
+		gap: "24",
+		justifyContent: "flex-end",
+		minWidth: 0
+	} },
+	titleBlock: { tablet: { alignItems: "center" } },
+	title: { tablet: { textStyle: "heading/h3" } },
+	actionBlock: { tablet: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: "8",
+		width: "auto"
+	} },
+	avatar: { tablet: { display: "none" } },
+	badge: { tablet: { display: "none" } },
+	secondaryText: { tablet: { display: "none" } },
+	tabs: { tablet: { display: "none" } }
+};
+/**
+* Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the
+* heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is
+* made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every
+* width without a second, conditionally rendered heading node.
+*/
+var titleInBreadcrumb = {
+	titleBlock: { tablet: { srOnly: true } },
+	breadcrumb: { tablet: { flex: "1 1 auto" } },
+	contentBlock: { tablet: {
+		flex: "0 0 auto",
+		width: "auto"
+	} }
+};
+/**
+* `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread
+* apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`
+* so `space-between` has room to distribute; without that it would absorb the free space and pin
+* the controls against the actions.
+*
+* Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through
+* `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.
+* This is the row the design file calls `PageHeader-WFE`.
+*/
+var controlsRow = {
+	headerBlock: { tablet: { justifyContent: "space-between" } },
+	contentBlock: { tablet: {
+		flex: "0 0 auto",
+		width: "auto"
+	} }
+};
+/**
+* Collapsed with inline controls but no trail: the title takes the left slot, so the three groups
+* are the title, the controls and the actions — all inside `contentBlock`, which already spans the
+* row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left
+* growing, it would absorb the row and shove the controls against the actions.
+*/
+var controlsWithoutTrail = {
+	contentBlock: { tablet: { justifyContent: "space-between" } },
+	titleBlock: { tablet: { flex: "0 1 auto" } }
+};
+/**
+* Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title
+* and 14px secondary text. The two differ only in the avatar-to-text gap.
+*/
+var entityContent = {
+	titleBlock: { alignItems: "center" },
+	title: { textStyle: {
+		base: "heading/mobile/h2",
+		tablet: "heading/h2"
+	} },
+	secondaryText: { textStyle: "body/md/regular" }
+};
+var pageHeaderSlotRecipe = defineSlotRecipe({
+	className: "page-header",
+	slots: [
+		"root",
+		"headerBlock",
+		"breadcrumb",
+		"controls",
+		"contentBlock",
+		"titleBlock",
+		"avatar",
+		"textBlock",
+		"titleRow",
+		"title",
+		"badge",
+		"secondaryText",
+		"actionBlock",
+		"tabs"
+	],
+	base: {
+		root: {
+			background: "background/primary",
+			borderBlockEnd: "1px solid",
+			borderColor: "border/regular",
+			display: "flex",
+			flexDirection: "column",
+			width: "100%"
+		},
+		headerBlock: {
+			alignItems: "flex-start",
+			display: "flex",
+			flexDirection: "column",
+			gap: {
+				base: "16",
+				tablet: "24"
+			},
+			paddingBlockEnd: {
+				base: "16",
+				tablet: "24"
+			},
+			paddingBlockStart: {
+				base: "16",
+				tablet: "24"
+			},
+			paddingInlineEnd: {
+				base: "16",
+				tablet: "32"
+			},
+			paddingInlineStart: {
+				base: "16",
+				tablet: "24"
+			},
+			width: "100%"
+		},
+		breadcrumb: {
+			display: "flex",
+			maxWidth: "100%",
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		controls: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0
+		},
+		contentBlock: {
+			alignItems: {
+				base: "flex-start",
+				tablet: "flex-end"
+			},
+			display: "flex",
+			flexDirection: {
+				base: "column",
+				tablet: "row"
+			},
+			gap: {
+				base: "16",
+				tablet: "32"
+			},
+			width: "100%"
+		},
+		titleBlock: {
+			display: "flex",
+			flex: "1 0 0",
+			minWidth: 0
+		},
+		avatar: {
+			display: "flex",
+			flexShrink: 0
+		},
+		textBlock: {
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0
+		},
+		titleRow: {
+			alignItems: "center",
+			display: "flex",
+			gap: "12",
+			minWidth: 0,
+			paddingInlineEnd: {
+				base: "0",
+				tablet: "24"
+			}
+		},
+		title: {
+			color: "text/primary",
+			minWidth: 0,
+			textStyle: {
+				base: "heading/mobile/h1",
+				tablet: "heading/h1"
+			},
+			truncate: true
+		},
+		badge: {
+			display: "flex",
+			flexShrink: 0,
+			marginBlockStart: "8"
+		},
+		secondaryText: {
+			color: "text/secondary",
+			textStyle: "body/lg/regular",
+			truncate: true
+		},
+		actionBlock: {
+			alignItems: {
+				base: "stretch",
+				tablet: "flex-end"
+			},
+			display: "flex",
+			flexDirection: {
+				base: "column-reverse",
+				tablet: "row"
+			},
+			flexShrink: 0,
+			gap: "12",
+			justifyContent: "flex-end",
+			width: {
+				base: "100%",
+				tablet: "auto"
+			}
+		},
+		tabs: {
+			marginBlockEnd: rem(-1),
+			paddingInlineEnd: {
+				base: "0",
+				tablet: "32"
+			},
+			paddingInlineStart: {
+				base: "0",
+				tablet: "16"
+			},
+			width: "100%"
+		}
+	},
+	compoundVariants: [
+		{
+			hasBreadcrumb: true,
+			variant: "minimal",
+			css: titleInBreadcrumb
+		},
+		{
+			hasBreadcrumb: true,
+			isSticky: true,
+			css: titleInBreadcrumb
+		},
+		{
+			hasBreadcrumb: true,
+			hasControls: true,
+			variant: "minimal",
+			css: controlsRow
+		},
+		{
+			hasBreadcrumb: true,
+			hasControls: true,
+			isSticky: true,
+			css: controlsRow
+		},
+		{
+			hasBreadcrumb: false,
+			hasControls: true,
+			variant: "minimal",
+			css: controlsWithoutTrail
+		},
+		{
+			hasBreadcrumb: false,
+			hasControls: true,
+			isSticky: true,
+			css: controlsWithoutTrail
+		}
+	],
+	variants: {
+		contentVariant: {
+			title: {
+				titleBlock: {
+					alignItems: "center",
+					gap: "12"
+				},
+				textBlock: { gap: "4" }
+			},
+			app: {
+				...entityContent,
+				titleBlock: {
+					...entityContent.titleBlock,
+					gap: "16"
+				}
+			},
+			user: {
+				...entityContent,
+				titleBlock: {
+					...entityContent.titleBlock,
+					gap: "12"
+				}
+			}
+		},
+		hasBreadcrumb: {
+			true: { headerBlock: { paddingBlockStart: "24" } },
+			false: {}
+		},
+		hasControls: {
+			true: {},
+			false: {}
+		},
+		isSticky: {
+			true: {
+				root: { tablet: {
+					borderColor: "border/minimal",
+					boxShadow: "elevation/sm"
+				} },
+				...collapsedSlots
+			},
+			false: {}
+		},
+		variant: {
+			default: {},
+			minimal: collapsedSlots
+		}
+	},
+	defaultVariants: {
+		contentVariant: "title",
+		hasBreadcrumb: false,
+		hasControls: false,
+		isSticky: false,
+		variant: "default"
+	}
+});
+//#endregion
+export { pageHeaderSlotRecipe as default };
+
+//# sourceMappingURL=PageHeader.recipe.js.map

package/dist/theme/slot-recipes/PageHeader.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The collapsed single-row layout, shared by `variant=\"minimal\"` and `isSticky`. Both apply the\n * exact same overrides, so the two variants are idempotent when combined. The expanded layout\n * lives in `base` — `variant=\"default\"` and `isSticky: false` deliberately define nothing, so\n * neither can undo the other's collapse.\n *\n * Every override is scoped to `tablet` and up, with no `base` key: below the breakpoint the `base`\n * styles win and the header stays expanded. The mobile Figma frame has no sticky or minimal\n * variant — it always shows the title as a heading — and a single 72px row cannot hold a\n * breadcrumb plus full-width actions at 375px.\n *\n * The slots the collapsed row drops are hidden here rather than omitted from the DOM, so the\n * component never has to know the viewport: no breakpoint hook, and no wrong-layout first paint.\n */\nconst collapsedSlots = {\n  headerBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '24',\n      // No 72 in the size scale — the design fixes the collapsed row height.\n      minHeight: rem(72),\n      paddingBlockEnd: '12',\n      paddingBlockStart: '12',\n      paddingInlineEnd: '32',\n      paddingInlineStart: '24',\n    },\n  },\n  breadcrumb: {\n    tablet: {\n      flex: '0 1 auto',\n      minWidth: 0,\n    },\n  },\n  contentBlock: {\n    tablet: {\n      alignItems: 'center',\n      flex: '1 0 0',\n      // 24 between the title and the actions, per `pageType=main, isSticky=true`. The 8 belongs to\n      // `actionBlock`, between the buttons.\n      gap: '24',\n      justifyContent: 'flex-end',\n      minWidth: 0,\n    },\n  },\n  titleBlock: {\n    tablet: {\n      alignItems: 'center',\n    },\n  },\n  title: {\n    tablet: {\n      textStyle: 'heading/h3',\n    },\n  },\n  actionBlock: {\n    tablet: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: '8',\n      width: 'auto',\n    },\n  },\n  avatar: {\n    tablet: { display: 'none' },\n  },\n  badge: {\n    tablet: { display: 'none' },\n  },\n  secondaryText: {\n    tablet: { display: 'none' },\n  },\n  tabs: {\n    tablet: { display: 'none' },\n  },\n} as const;\n\n/**\n * Collapsed *and* carrying a breadcrumb: the trail shows the title as its current item, so the\n * heading would duplicate it. `Breadcrumb.CurrentLink` is a link and not a heading, so the block is\n * made screen-reader-only instead of hidden — that keeps exactly one `h1` on the page at every\n * width without a second, conditionally rendered heading node.\n */\nconst titleInBreadcrumb = {\n  titleBlock: { tablet: { srOnly: true } },\n  // The row is trail + actions. The actions cannot shrink, so leaving `contentBlock` on a zero\n  // basis let a long trail take the whole row and collapse it to width 0 — the buttons then\n  // overflowed their own box and painted on top of the trail. Sizing the actions to their content\n  // and letting the trail take what is left makes the trail yield, and its last crumb ellipsise.\n  breadcrumb: { tablet: { flex: '1 1 auto' } },\n  // `width: auto` matters as much as the flex here, for the same reason it does in `controlsRow`:\n  // the base width is `100%`, which flex-basis `auto` resolves to, so without it this block claims\n  // the whole row and squeezes the trail to nothing.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * `minimal` *with* inline controls: the row carries three groups — trail, controls, actions — spread\n * apart rather than the usual trail-left/actions-right pair. `contentBlock` gives up its `flex: 1`\n * so `space-between` has room to distribute; without that it would absorb the free space and pin\n * the controls against the actions.\n *\n * Paired with both collapse modes, since `minimal` and `isSticky` produce the same row through\n * `collapsedSlots` — pairing it with `minimal` alone left the sticky row dropping the middle group.\n * This is the row the design file calls `PageHeader-WFE`.\n */\nconst controlsRow = {\n  headerBlock: { tablet: { justifyContent: 'space-between' } },\n  // `width: auto` matters as much as the flex: the base width is `100%`, which flex-basis `auto`\n  // resolves to, so the block would otherwise claim the whole row and shrink the trail until its\n  // metadata truncated away. Sized to its actions instead, leaving the free space to distribute.\n  contentBlock: { tablet: { flex: '0 0 auto', width: 'auto' } },\n} as const;\n\n/**\n * Collapsed with inline controls but no trail: the title takes the left slot, so the three groups\n * are the title, the controls and the actions — all inside `contentBlock`, which already spans the\n * row. The title block gives up its `flex: 1` so `space-between` has free space to distribute; left\n * growing, it would absorb the row and shove the controls against the actions.\n */\nconst controlsWithoutTrail = {\n  contentBlock: { tablet: { justifyContent: 'space-between' } },\n  titleBlock: { tablet: { flex: '0 1 auto' } },\n} as const;\n\n/**\n * Shared by the `app` and `user` content shapes — a larger avatar centred against a smaller title\n * and 14px secondary text. The two differ only in the avatar-to-text gap.\n */\nconst entityContent = {\n  titleBlock: {\n    alignItems: 'center',\n  },\n  title: {\n    textStyle: { base: 'heading/mobile/h2', tablet: 'heading/h2' },\n  },\n  secondaryText: {\n    textStyle: 'body/md/regular',\n  },\n} as const;\n\nconst pageHeaderSlotRecipe = defineSlotRecipe({\n  className: 'page-header',\n  slots: [\n    'root',\n    'headerBlock',\n    'breadcrumb',\n    'controls',\n    'contentBlock',\n    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\n    'tabs',\n  ] as const,\n  base: {\n    root: {\n      background: 'background/primary',\n      borderBlockEnd: '1px solid',\n      borderColor: 'border/regular',\n      display: 'flex',\n      flexDirection: 'column',\n      width: '100%',\n    },\n    headerBlock: {\n      alignItems: 'flex-start',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: { base: '16', tablet: '24' },\n      paddingBlockEnd: { base: '16', tablet: '24' },\n      paddingBlockStart: { base: '16', tablet: '24' },\n      paddingInlineEnd: { base: '16', tablet: '32' },\n      paddingInlineStart: { base: '16', tablet: '24' },\n      width: '100%',\n    },\n    breadcrumb: {\n      display: 'flex',\n      maxWidth: '100%',\n      minWidth: 0,\n      // The trail's list is `white-space: nowrap`, so without this a long one escapes the header's\n      // right edge instead of being clipped by it. `BitkitBreadcrumb` ellipsises its last crumb on\n      // its own, but only once it is allowed to shrink — see the `breadcrumb` prop docs.\n      overflow: 'hidden',\n    },\n    controls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n    },\n    contentBlock: {\n      alignItems: { base: 'flex-start', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column', tablet: 'row' },\n      gap: { base: '16', tablet: '32' },\n      width: '100%',\n    },\n    titleBlock: {\n      display: 'flex',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    avatar: {\n      display: 'flex',\n      flexShrink: 0,\n    },\n    textBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    titleRow: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      minWidth: 0,\n      paddingInlineEnd: { base: '0', tablet: '24' },\n    },\n    title: {\n      color: 'text/primary',\n      minWidth: 0,\n      textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h1' },\n      // One line with an ellipsis rather than wrapping. A wrapped title grew the header without\n      // limit, and the collapsed row is a fixed 72px that a second line would break. The component\n      // pairs this with `BitkitOverflowTooltip` so the full string stays readable.\n      truncate: true,\n    },\n    badge: {\n      display: 'flex',\n      flexShrink: 0,\n      // The design nudges the badge below the optical centre of the title line, wrapping it in\n      // `flex-col h-full justify-center pt-8`. Reproduced with the same mechanism rather than a\n      // fixed offset: the row centres the margin box, so this lands the badge `8 / 2` lower —\n      // 12px down a 40px desktop line and 10px down a 36px mobile one, matching both frames.\n      marginBlockStart: '8',\n    },\n    secondaryText: {\n      color: 'text/secondary',\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    actionBlock: {\n      // The design puts the primary action on top once the actions stack, so `base` reverses them\n      // visually while the DOM keeps its secondary-then-primary order for the row layout.\n      //\n      // That mismatch is deliberate and settled — please don't \"fix\" it. Actions arrive as an opaque\n      // `children` list, so with one DOM order and two visual orders, no arrangement satisfies both\n      // breakpoints; flipping the DOM only moves the mismatch to the row. The alternatives are a\n      // design change or a structured actions API, and neither earns its cost: the surviving case is\n      // a zoomed desktop window rendering `base`, where focus steps up rather than down between two\n      // adjacent buttons and nothing becomes unreachable. Chasing visual order through the DOM is\n      // also a pattern the design system avoids. v1 ships the same behaviour in `SubHeader.tsx:96`.\n      alignItems: { base: 'stretch', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column-reverse', tablet: 'row' },\n      flexShrink: 0,\n      gap: '12',\n      justifyContent: 'flex-end',\n      width: { base: '100%', tablet: 'auto' },\n    },\n    tabs: {\n      // The tab list draws its own bottom border, inset by this padding. Pulling the row up by 1px\n      // lands it exactly on the root's border instead of stacking a second line above it, so the\n      // header keeps one full-width bottom edge as designed.\n      marginBlockEnd: rem(-1),\n      paddingInlineEnd: { base: '0', tablet: '32' },\n      paddingInlineStart: { base: '0', tablet: '16' },\n      width: '100%',\n    },\n  },\n  compoundVariants: [\n    { hasBreadcrumb: true, variant: 'minimal', css: titleInBreadcrumb },\n    { hasBreadcrumb: true, isSticky: true, css: titleInBreadcrumb },\n    { hasBreadcrumb: true, hasControls: true, variant: 'minimal', css: controlsRow },\n    { hasBreadcrumb: true, hasControls: true, isSticky: true, css: controlsRow },\n    { hasBreadcrumb: false, hasControls: true, variant: 'minimal', css: controlsWithoutTrail },\n    { hasBreadcrumb: false, hasControls: true, isSticky: true, css: controlsWithoutTrail },\n  ],\n  variants: {\n    contentVariant: {\n      title: {\n        titleBlock: {\n          // `center` rather than the design's `flex-end`. With no secondary text the two are\n          // identical — a 40px avatar against a 40px title line — so the bare sub-page card is\n          // unaffected. With secondary text present, `flex-end` dropped the avatar down beside it;\n          // centring matches how the app card sits its avatar against a two-line block.\n          alignItems: 'center',\n          gap: '12',\n        },\n        textBlock: {\n          gap: '4',\n        },\n      },\n      // `app` and `user` differ only in the gap between the avatar and the text — 16 and 12\n      // respectively — so they share everything else via `entityContent`.\n      app: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '16',\n        },\n      },\n      user: {\n        ...entityContent,\n        titleBlock: {\n          ...entityContent.titleBlock,\n          gap: '12',\n        },\n      },\n    },\n    // Mobile splits the trail into its own `breadcrumb-margin` block (`pt-24 px-16`) above a\n    // `p-16` header block, so the breadcrumb sits 24 from the top rather than 16. Desktop is 24\n    // either way, hence the flat value.\n    hasBreadcrumb: {\n      true: {\n        headerBlock: {\n          paddingBlockStart: '24',\n        },\n      },\n      false: {},\n    },\n    hasControls: {\n      true: {},\n      false: {},\n    },\n    isSticky: {\n      true: {\n        root: {\n          // Scoped to `tablet` like the layout overrides: below the breakpoint `isSticky` is\n          // ignored entirely, so the expanded header must not pick up the stuck chrome either.\n          tablet: {\n            borderColor: 'border/minimal',\n            boxShadow: 'elevation/sm',\n          },\n        },\n        ...collapsedSlots,\n      },\n      false: {},\n    },\n    variant: {\n      default: {},\n      minimal: collapsedSlots,\n    },\n  },\n  defaultVariants: {\n    contentVariant: 'title',\n    hasBreadcrumb: false,\n    hasControls: false,\n    isSticky: false,\n    variant: 'default',\n  },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAM,iBAAiB;CACrB,aAAa,EACX,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,KAAK;EAEL,WAAW,IAAI,EAAE;EACjB,iBAAiB;EACjB,mBAAmB;EACnB,kBAAkB;EAClB,oBAAoB;CACtB,EACF;CACA,YAAY,EACV,QAAQ;EACN,MAAM;EACN,UAAU;CACZ,EACF;CACA,cAAc,EACZ,QAAQ;EACN,YAAY;EACZ,MAAM;EAGN,KAAK;EACL,gBAAgB;EAChB,UAAU;CACZ,EACF;CACA,YAAY,EACV,QAAQ,EACN,YAAY,SACd,EACF;CACA,OAAO,EACL,QAAQ,EACN,WAAW,aACb,EACF;CACA,aAAa,EACX,QAAQ;EACN,YAAY;EACZ,eAAe;EACf,KAAK;EACL,OAAO;CACT,EACF;CACA,QAAQ,EACN,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,OAAO,EACL,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,eAAe,EACb,QAAQ,EAAE,SAAS,OAAO,EAC5B;CACA,MAAM,EACJ,QAAQ,EAAE,SAAS,OAAO,EAC5B;AACF;;;;;;;AAQA,IAAM,oBAAoB;CACxB,YAAY,EAAE,QAAQ,EAAE,QAAQ,KAAK,EAAE;CAKvC,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;CAI3C,cAAc,EAAE,QAAQ;EAAE,MAAM;EAAY,OAAO;CAAO,EAAE;AAC9D;;;;;;;;;;;AAYA,IAAM,cAAc;CAClB,aAAa,EAAE,QAAQ,EAAE,gBAAgB,gBAAgB,EAAE;CAI3D,cAAc,EAAE,QAAQ;EAAE,MAAM;EAAY,OAAO;CAAO,EAAE;AAC9D;;;;;;;AAQA,IAAM,uBAAuB;CAC3B,cAAc,EAAE,QAAQ,EAAE,gBAAgB,gBAAgB,EAAE;CAC5D,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;AAC7C;;;;;AAMA,IAAM,gBAAgB;CACpB,YAAY,EACV,YAAY,SACd;CACA,OAAO,EACL,WAAW;EAAE,MAAM;EAAqB,QAAQ;CAAa,EAC/D;CACA,eAAe,EACb,WAAW,kBACb;AACF;AAEA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,gBAAgB;GAChB,aAAa;GACb,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,eAAe;GACf,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,iBAAiB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC5C,mBAAmB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC9C,kBAAkB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC7C,oBAAoB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC/C,OAAO;EACT;EACA,YAAY;GACV,SAAS;GACT,UAAU;GACV,UAAU;GAIV,UAAU;EACZ;EACA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,YAAY;EACd;EACA,cAAc;GACZ,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAW;GACrD,SAAS;GACT,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,OAAO;EACT;EACA,YAAY;GACV,SAAS;GACT,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;EACd;EACA,WAAW;GACT,SAAS;GACT,eAAe;GACf,UAAU;EACZ;EACA,UAAU;GACR,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,kBAAkB;IAAE,MAAM;IAAK,QAAQ;GAAK;EAC9C;EACA,OAAO;GACL,OAAO;GACP,UAAU;GACV,WAAW;IAAE,MAAM;IAAqB,QAAQ;GAAa;GAI7D,UAAU;EACZ;EACA,OAAO;GACL,SAAS;GACT,YAAY;GAKZ,kBAAkB;EACpB;EACA,eAAe;GACb,OAAO;GACP,WAAW;GACX,UAAU;EACZ;EACA,aAAa;GAWX,YAAY;IAAE,MAAM;IAAW,QAAQ;GAAW;GAClD,SAAS;GACT,eAAe;IAAE,MAAM;IAAkB,QAAQ;GAAM;GACvD,YAAY;GACZ,KAAK;GACL,gBAAgB;GAChB,OAAO;IAAE,MAAM;IAAQ,QAAQ;GAAO;EACxC;EACA,MAAM;GAIJ,gBAAgB,IAAI,EAAE;GACtB,kBAAkB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC5C,oBAAoB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC9C,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,eAAe;GAAM,SAAS;GAAW,KAAK;EAAkB;EAClE;GAAE,eAAe;GAAM,UAAU;GAAM,KAAK;EAAkB;EAC9D;GAAE,eAAe;GAAM,aAAa;GAAM,SAAS;GAAW,KAAK;EAAY;EAC/E;GAAE,eAAe;GAAM,aAAa;GAAM,UAAU;GAAM,KAAK;EAAY;EAC3E;GAAE,eAAe;GAAO,aAAa;GAAM,SAAS;GAAW,KAAK;EAAqB;EACzF;GAAE,eAAe;GAAO,aAAa;GAAM,UAAU;GAAM,KAAK;EAAqB;CACvF;CACA,UAAU;EACR,gBAAgB;GACd,OAAO;IACL,YAAY;KAKV,YAAY;KACZ,KAAK;IACP;IACA,WAAW,EACT,KAAK,IACP;GACF;GAGA,KAAK;IACH,GAAG;IACH,YAAY;KACV,GAAG,cAAc;KACjB,KAAK;IACP;GACF;GACA,MAAM;IACJ,GAAG;IACH,YAAY;KACV,GAAG,cAAc;KACjB,KAAK;IACP;GACF;EACF;EAIA,eAAe;GACb,MAAM,EACJ,aAAa,EACX,mBAAmB,KACrB,EACF;GACA,OAAO,CAAC;EACV;EACA,aAAa;GACX,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,UAAU;GACR,MAAM;IACJ,MAAM,EAGJ,QAAQ;KACN,aAAa;KACb,WAAW;IACb,EACF;IACA,GAAG;GACL;GACA,OAAO,CAAC;EACV;EACA,SAAS;GACP,SAAS,CAAC;GACV,SAAS;EACX;CACF;CACA,iBAAiB;EACf,gBAAgB;EAChB,eAAe;EACf,aAAa;EACb,UAAU;EACV,SAAS;CACX;AACF,CAAC"}

package/dist/theme/slot-recipes/Tour.recipe.d.ts

@@ -1,2 +1,2 @@
-declare const tourSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
+declare const tourSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight">>;
 export default tourSlotRecipe;

package/dist/theme/slot-recipes/index.d.ts

@@ -1419,6 +1419,207 @@ declare const slotRecipes: {
             };
         };
     }>;
+    pageHeader: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
+        contentVariant: {
+            title: {
+                titleBlock: {
+                    alignItems: "center";
+                    gap: "12";
+                };
+                textBlock: {
+                    gap: "4";
+                };
+            };
+            app: {
+                titleBlock: {
+                    gap: "16";
+                    alignItems: "center";
+                };
+                title: {
+                    readonly textStyle: {
+                        readonly base: "heading/mobile/h2";
+                        readonly tablet: "heading/h2";
+                    };
+                };
+                secondaryText: {
+                    readonly textStyle: "body/md/regular";
+                };
+            };
+            user: {
+                titleBlock: {
+                    gap: "12";
+                    alignItems: "center";
+                };
+                title: {
+                    readonly textStyle: {
+                        readonly base: "heading/mobile/h2";
+                        readonly tablet: "heading/h2";
+                    };
+                };
+                secondaryText: {
+                    readonly textStyle: "body/md/regular";
+                };
+            };
+        };
+        hasBreadcrumb: {
+            true: {
+                headerBlock: {
+                    paddingBlockStart: "24";
+                };
+            };
+            false: {};
+        };
+        hasControls: {
+            true: {};
+            false: {};
+        };
+        isSticky: {
+            true: {
+                headerBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flexDirection: "row";
+                        readonly gap: "24";
+                        readonly minHeight: string;
+                        readonly paddingBlockEnd: "12";
+                        readonly paddingBlockStart: "12";
+                        readonly paddingInlineEnd: "32";
+                        readonly paddingInlineStart: "24";
+                    };
+                };
+                breadcrumb: {
+                    readonly tablet: {
+                        readonly flex: "0 1 auto";
+                        readonly minWidth: 0;
+                    };
+                };
+                contentBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flex: "1 0 0";
+                        readonly gap: "24";
+                        readonly justifyContent: "flex-end";
+                        readonly minWidth: 0;
+                    };
+                };
+                titleBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                    };
+                };
+                title: {
+                    readonly tablet: {
+                        readonly textStyle: "heading/h3";
+                    };
+                };
+                actionBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flexDirection: "row";
+                        readonly gap: "8";
+                        readonly width: "auto";
+                    };
+                };
+                avatar: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                badge: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                secondaryText: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                tabs: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                root: {
+                    tablet: {
+                        borderColor: "border/minimal";
+                        boxShadow: "elevation/sm";
+                    };
+                };
+            };
+            false: {};
+        };
+        variant: {
+            default: {};
+            minimal: {
+                readonly headerBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flexDirection: "row";
+                        readonly gap: "24";
+                        readonly minHeight: string;
+                        readonly paddingBlockEnd: "12";
+                        readonly paddingBlockStart: "12";
+                        readonly paddingInlineEnd: "32";
+                        readonly paddingInlineStart: "24";
+                    };
+                };
+                readonly breadcrumb: {
+                    readonly tablet: {
+                        readonly flex: "0 1 auto";
+                        readonly minWidth: 0;
+                    };
+                };
+                readonly contentBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flex: "1 0 0";
+                        readonly gap: "24";
+                        readonly justifyContent: "flex-end";
+                        readonly minWidth: 0;
+                    };
+                };
+                readonly titleBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                    };
+                };
+                readonly title: {
+                    readonly tablet: {
+                        readonly textStyle: "heading/h3";
+                    };
+                };
+                readonly actionBlock: {
+                    readonly tablet: {
+                        readonly alignItems: "center";
+                        readonly flexDirection: "row";
+                        readonly gap: "8";
+                        readonly width: "auto";
+                    };
+                };
+                readonly avatar: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                readonly badge: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                readonly secondaryText: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+                readonly tabs: {
+                    readonly tablet: {
+                        readonly display: "none";
+                    };
+                };
+            };
+        };
+    }>;
     pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "titleText" | "suffixIcon" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
         hasBack: {
             true: {
@@ -2818,7 +3019,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight" | "titleRow">>;
+    tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight">>;
     treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
         variant: {
             files: {

package/dist/theme/slot-recipes/index.js

@@ -34,6 +34,7 @@ import nativeSelectSlotRecipe from "./NativeSelect.recipe.js";
 import noteCardSlotRecipe from "./NoteCard.recipe.js";
 import overflowContentSlotRecipe from "./OverflowContent.recipe.js";
 import pageFooterSlotRecipe from "./PageFooter.recipe.js";
+import pageHeaderSlotRecipe from "./PageHeader.recipe.js";
 import pageSidebarSlotRecipe from "./PageSidebar.recipe.js";
 import paginationSlotRecipe from "./Pagination.recipe.js";
 import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
@@ -96,6 +97,7 @@ var slotRecipes = {
 	numberInput: numberInputSlotRecipe,
 	overflowContent: overflowContentSlotRecipe,
 	pageFooter: pageFooterSlotRecipe,
+	pageHeader: pageHeaderSlotRecipe,
 	pageSidebar: pageSidebarSlotRecipe,
 	pagination: paginationSlotRecipe,
 	paginationLoadMore: paginationLoadMoreRecipe,

package/dist/theme/slot-recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pageSidebar: pageSidebarSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  progress: progressSlotRecipe,\n  qrCode: qrCodeSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tableCard: tableCardSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  textInput: textInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport pageHeaderSlotRecipe from './PageHeader.recipe.ts';\nimport pageSidebarSlotRecipe from './PageSidebar.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport progressSlotRecipe from './Progress.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tableCardSlotRecipe from './TableCard.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pageHeader: pageHeaderSlotRecipe,\n  pageSidebar: pageSidebarSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  progress: progressSlotRecipe,\n  qrCode: qrCodeSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tableCard: tableCardSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  textInput: textInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,MAAM;CACN,UAAU;AACZ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.415",
+  "version": "0.3.417",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",