@bitrise/bitkit-v2 0.3.501 → 0.3.502-beta.3232

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

@@ -1 +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  // Undoes the `flex: 1 1 auto` that `titleInBreadcrumb` gives the trail. That growth is right for\n  // the two-group row (trail + actions), but here a third group sits between them: a growing trail\n  // swallows all the free space on its side and shoves the controls island against the actions.\n  // Shrink-only keeps the trail ellipsising when the row is tight, while `space-between` gets free\n  // space to distribute.\n  breadcrumb: { tablet: { flex: '0 1 auto' } },\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 * `alignsToContent`'s 32, restated for the collapsed row. The collapsed slots set the header block's\n * start padding under the same `tablet` key, and the variant applied later wins the merge -- which\n * is the collapsed one, since `isSticky` and `variant` come after `alignsToContent`. A compound\n * variant is applied after every plain one, so this holds whatever order the props arrive in.\n */\nconst contentAlignedCollapsed = {\n  headerBlock: { tablet: { paddingInlineStart: '32' } },\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    'titleBar',\n    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\n    'menuButton',\n    'sectionBlock',\n    'sectionTitle',\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    // The title block and the menu button, which `hasSidebar` wraps them in. It stands in for the\n    // title block in the content row from `tablet`, where the button is gone.\n    // `contents` from `tablet`: the wrapper drops out of the layout there, so the title block is a\n    // direct child of the content row again and every desktop rule — collapsed, controls, trail —\n    // keeps targeting it as before.\n    titleBar: {\n      alignItems: 'center',\n      display: { base: 'flex', tablet: 'contents' },\n      gap: '12',\n      minWidth: 0,\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    // `hasSidebar` only, and mobile only: the button that opens the sidebar's drawer, and the\n    // active section's name under a rule. From `tablet` the sidebar is beside the page and names\n    // the section itself, so both go.\n    menuButton: {\n      display: { base: 'flex', tablet: 'none' },\n      flexShrink: 0,\n    },\n    sectionBlock: {\n      // The content block aligns its children to the start, so the rule has to ask for the width.\n      alignSelf: 'stretch',\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      display: { base: 'flex', tablet: 'none' },\n      flexDirection: 'column',\n      // The rule runs edge to edge through the header block's inline padding.\n      marginInline: '-16',\n      paddingBlockStart: '16',\n      paddingInline: '16',\n    },\n    sectionTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h1',\n      truncate: true,\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    // The with-sidebar header shows the page title small beside the menu button, and the section\n    // below it large: `heading/mobile/h2` after a trail (`mobilePageHeader_content_withSidebar`),\n    // `heading/mobile/h3` without one, where the row is the design's `sidebar-block`.\n    {\n      contentVariant: 'title',\n      hasBreadcrumb: true,\n      hasSidebar: true,\n      css: { title: { base: { textStyle: 'heading/mobile/h2' } } },\n    },\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    { alignsToContent: true, variant: 'minimal', css: contentAlignedCollapsed },\n    { alignsToContent: true, isSticky: true, css: contentAlignedCollapsed },\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    /**\n     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar\n     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the\n     * trail — and the title steps down to leave the section name as the page's large heading. All\n     * `base`: from `tablet` the header is the ordinary one.\n     */\n    hasSidebar: {\n      true: {\n        headerBlock: {\n          base: {\n            gap: '8',\n            paddingBlockStart: '12',\n          },\n        },\n        title: {\n          base: { textStyle: 'heading/mobile/h3' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * From the component's `showDivider`. The header's background is the page's, so without the line\n     * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes\n     * with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and\n     * `isSticky` restores the line from `tablet`.\n     */\n    hasDivider: {\n      true: {},\n      false: {\n        root: { borderBlockEndWidth: 0 },\n        headerBlock: { paddingBlockEnd: 0 },\n      },\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            // Content scrolls under a stuck header, so it keeps its line with `hasDivider: false`\n            // too. Width only: the `borderBlockEnd` shorthand would also reset the colour.\n            borderBlockEndWidth: '1',\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     * Lines the content block up with the page content below, leaving the root full-width — so the\n     * header's background and bottom border run edge to edge while the title sits where the content\n     * does. The cap, when there is one, is a `maxWidth` the component sets from `contentWidth`, since\n     * a recipe variant cannot carry an arbitrary length; `contentAlign` places it, and does nothing\n     * when `contentWidth` is `'full'` and there is no cap.\n     *\n     * The design's centred frame pads both sides with 32, where the default header starts at 24.\n     * Only from `tablet`: below it the base 16 stands, matching what a content column pads with\n     * there, while the cap itself stays unscoped so the two track each other at every width.\n     *\n     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same\n     * `tablet` key and wins that merge, so the 32 is restated there by a compound variant — see\n     * `contentAlignedCollapsed`.\n     */\n    alignsToContent: {\n      true: {\n        headerBlock: {\n          tablet: {\n            paddingInlineStart: '32',\n          },\n        },\n      },\n      false: {},\n    },\n    /**\n     * Where the capped block sits in the full-width root: centred over a centred content column, or\n     * at the start over one that starts against a sidebar. Without a cap the block spans the root, so\n     * the auto margins resolve to nothing and either value renders the same.\n     */\n    contentAlign: {\n      center: {\n        headerBlock: {\n          marginInline: 'auto',\n        },\n      },\n      start: {\n        headerBlock: {\n          marginInlineEnd: 'auto',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    alignsToContent: false,\n    contentAlign: 'center',\n    contentVariant: 'title',\n    hasBreadcrumb: false,\n    hasControls: false,\n    hasDivider: true,\n    hasSidebar: false,\n    isSticky: false,\n    variant: 'default',\n  },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":"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"}
+{"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  // Undoes the `flex: 1 1 auto` that `titleInBreadcrumb` gives the trail. That growth is right for\n  // the two-group row (trail + actions), but here a third group sits between them: a growing trail\n  // swallows all the free space on its side and shoves the controls island against the actions.\n  // Shrink-only keeps the trail ellipsising when the row is tight, while `space-between` gets free\n  // space to distribute.\n  breadcrumb: { tablet: { flex: '0 1 auto' } },\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 * `alignsToContent`'s 32, restated for the collapsed row. The collapsed slots set the header block's\n * start padding under the same `tablet` key, and the variant applied later wins the merge -- which\n * is the collapsed one, since `isSticky` and `variant` come after `alignsToContent`. A compound\n * variant is applied after every plain one, so this holds whatever order the props arrive in.\n */\nconst contentAlignedCollapsed = {\n  headerBlock: { tablet: { paddingInlineStart: '32' } },\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    'titleBar',\n    'titleBlock',\n    'avatar',\n    'textBlock',\n    'titleRow',\n    'title',\n    'badge',\n    'secondaryText',\n    'actionBlock',\n    'menuButton',\n    'sectionBlock',\n    'sectionTitle',\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    // The title block and the menu button, which `hasSidebar` wraps them in. It stands in for the\n    // title block in the content row from `tablet`, where the button is gone.\n    // `contents` from `tablet`: the wrapper drops out of the layout there, so the title block is a\n    // direct child of the content row again and every desktop rule — collapsed, controls, trail —\n    // keeps targeting it as before.\n    titleBar: {\n      alignItems: 'center',\n      display: { base: 'flex', tablet: 'contents' },\n      gap: '12',\n      minWidth: 0,\n      width: '100%',\n    },\n    titleBlock: {\n      // Full row width below `tablet`, where the content block is a column aligned to the start; sized to\n      // its content, a long title or subtitle pushed the header past the page edge.\n      alignSelf: { base: 'stretch', tablet: 'auto' },\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    // `hasSidebar` only, and mobile only: the button that opens the sidebar's drawer, and the\n    // active section's name under a rule. From `tablet` the sidebar is beside the page and names\n    // the section itself, so both go.\n    menuButton: {\n      display: { base: 'flex', tablet: 'none' },\n      flexShrink: 0,\n    },\n    sectionBlock: {\n      // The content block aligns its children to the start, so the rule has to ask for the width.\n      alignSelf: 'stretch',\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      display: { base: 'flex', tablet: 'none' },\n      flexDirection: 'column',\n      // The rule runs edge to edge through the header block's inline padding.\n      marginInline: '-16',\n      paddingBlockStart: '16',\n      paddingInline: '16',\n    },\n    sectionTitle: {\n      color: 'text/primary',\n      textStyle: 'heading/mobile/h1',\n      truncate: true,\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    // The with-sidebar header shows the page title small beside the menu button, and the section\n    // below it large: `heading/mobile/h2` after a trail (`mobilePageHeader_content_withSidebar`),\n    // `heading/mobile/h3` without one, where the row is the design's `sidebar-block`.\n    {\n      contentVariant: 'title',\n      hasBreadcrumb: true,\n      hasSidebar: true,\n      css: { title: { base: { textStyle: 'heading/mobile/h2' } } },\n    },\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    { alignsToContent: true, variant: 'minimal', css: contentAlignedCollapsed },\n    { alignsToContent: true, isSticky: true, css: contentAlignedCollapsed },\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    /**\n     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar\n     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the\n     * trail — and the title steps down to leave the section name as the page's large heading. All\n     * `base`: from `tablet` the header is the ordinary one.\n     */\n    hasSidebar: {\n      true: {\n        headerBlock: {\n          base: {\n            gap: '8',\n            paddingBlockStart: '12',\n          },\n        },\n        title: {\n          base: { textStyle: 'heading/mobile/h3' },\n        },\n      },\n      false: {},\n    },\n    /**\n     * From the component's `showDivider`. The header's background is the page's, so without the line\n     * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes\n     * with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and\n     * `isSticky` restores the line from `tablet`.\n     */\n    hasDivider: {\n      true: {},\n      false: {\n        root: { borderBlockEndWidth: 0 },\n        headerBlock: { paddingBlockEnd: 0 },\n      },\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            // Content scrolls under a stuck header, so it keeps its line with `hasDivider: false`\n            // too. Width only: the `borderBlockEnd` shorthand would also reset the colour.\n            borderBlockEndWidth: '1',\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     * Lines the content up with the page content below, leaving the root full-width — so the header's background and\n     * bottom border run edge to edge while the title and the tabs sit where the content does. The cap is a `maxWidth`\n     * the component sets from `contentWidth`; the auto margins centre it, and resolve to nothing when there is no cap.\n     *\n     * The design's centred frame pads both sides with 32, where the default header starts at 24. Only from `tablet`:\n     * below it the base 16 stands, matching what a content column pads with there.\n     *\n     * The collapsed row (`isSticky`, `minimal`) resets the start padding to 24 under the same `tablet` key and wins\n     * that merge, so the 32 is restated there by a compound variant — see `contentAlignedCollapsed`.\n     */\n    alignsToContent: {\n      true: {\n        headerBlock: {\n          marginInline: 'auto',\n          tablet: {\n            paddingInlineStart: '32',\n          },\n        },\n        tabs: {\n          marginInline: 'auto',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    alignsToContent: false,\n    contentVariant: 'title',\n    hasBreadcrumb: false,\n    hasControls: false,\n    hasDivider: true,\n    hasSidebar: false,\n    isSticky: false,\n    variant: 'default',\n  },\n});\n\nexport default pageHeaderSlotRecipe;\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { default as contentWidthStyles } from '../common/ContentWidth.common';
+declare const pageSubheaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "tabs" | "root" | "secondaryText" | "headerBlock" | "contentBlock" | "textBlock" | "actionBlock", {
+    contentWidth: { [K in keyof typeof contentWidthStyles]: {
+        contentBlock: (typeof contentWidthStyles)[K];
+        tabs?: {
+            paddingInlineStart: {
+                base: string;
+                tablet: string;
+            };
+        };
+    }; };
+    hasTabs: {
+        true: {
+            root: {
+                borderBlockEnd: "1px solid";
+                borderColor: "border/regular";
+            };
+            headerBlock: {
+                paddingBlockEnd: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export default pageSubheaderSlotRecipe;

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

@@ -0,0 +1,139 @@
+import { rem } from "../themeUtils.js";
+import contentWidthStyles from "../common/ContentWidth.common.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/PageSubheader.recipe.ts
+var pageSubheaderSlotRecipe = defineSlotRecipe({
+	className: "page-subheader",
+	slots: [
+		"root",
+		"contentBlock",
+		"headerBlock",
+		"textBlock",
+		"title",
+		"secondaryText",
+		"actionBlock",
+		"tabs"
+	],
+	base: {
+		root: {
+			background: "background/primary",
+			display: "flex",
+			flexDirection: "column",
+			width: "100%"
+		},
+		contentBlock: {
+			display: "flex",
+			flexDirection: "column",
+			marginInline: "auto",
+			width: "100%"
+		},
+		headerBlock: {
+			alignItems: {
+				base: "stretch",
+				tablet: "flex-end"
+			},
+			display: "flex",
+			flexDirection: {
+				base: "column",
+				tablet: "row"
+			},
+			gap: {
+				base: "16",
+				tablet: "32"
+			},
+			paddingBlockEnd: {
+				base: "16",
+				tablet: "0"
+			},
+			paddingBlockStart: {
+				base: "16",
+				tablet: "32"
+			},
+			paddingInline: {
+				base: "16",
+				tablet: "32"
+			}
+		},
+		textBlock: {
+			display: "flex",
+			flex: {
+				base: "none",
+				tablet: "1 0 0"
+			},
+			flexDirection: "column",
+			gap: {
+				base: "4",
+				tablet: "0"
+			},
+			minWidth: 0
+		},
+		title: {
+			color: "text/primary",
+			paddingBlockEnd: {
+				base: "0",
+				tablet: "4"
+			},
+			textStyle: {
+				base: "heading/mobile/h1",
+				tablet: "heading/h2"
+			},
+			truncate: true
+		},
+		secondaryText: {
+			color: "text/secondary",
+			textStyle: "body/md/regular"
+		},
+		actionBlock: {
+			display: "flex",
+			flexShrink: 0,
+			flexDirection: {
+				base: "row-reverse",
+				tablet: "row"
+			},
+			flexWrap: {
+				base: "wrap-reverse",
+				tablet: "wrap"
+			},
+			gap: "12",
+			"& > *": { flex: {
+				base: "1 1 auto",
+				tablet: "none"
+			} }
+		},
+		tabs: {
+			marginBlockEnd: rem(-1),
+			paddingInlineEnd: "32",
+			paddingInlineStart: "16"
+		}
+	},
+	variants: {
+		contentWidth: Object.fromEntries(Object.entries(contentWidthStyles).map(([key, styles]) => [key, key === "full" ? { contentBlock: styles } : {
+			contentBlock: styles,
+			tabs: { paddingInlineStart: {
+				base: "16",
+				tablet: "32"
+			} }
+		}])),
+		hasTabs: {
+			true: {
+				root: {
+					borderBlockEnd: "1px solid",
+					borderColor: "border/regular"
+				},
+				headerBlock: { paddingBlockEnd: {
+					base: "16",
+					tablet: "24"
+				} }
+			},
+			false: {}
+		}
+	},
+	defaultVariants: {
+		contentWidth: "full",
+		hasTabs: false
+	}
+});
+//#endregion
+export { pageSubheaderSlotRecipe as default };
+
+//# sourceMappingURL=PageSubheader.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSubheader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/PageSubheader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport contentWidthStyles from '../common/ContentWidth.common';\nimport { rem } from '../themeUtils';\n\nconst pageSubheaderSlotRecipe = defineSlotRecipe({\n  className: 'page-subheader',\n  slots: ['root', 'contentBlock', 'headerBlock', 'textBlock', 'title', 'secondaryText', 'actionBlock', 'tabs'] as const,\n  base: {\n    root: {\n      background: 'background/primary',\n      display: 'flex',\n      flexDirection: 'column',\n      width: '100%',\n    },\n    contentBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      marginInline: 'auto',\n      width: '100%',\n    },\n    headerBlock: {\n      alignItems: { base: 'stretch', tablet: 'flex-end' },\n      display: 'flex',\n      flexDirection: { base: 'column', tablet: 'row' },\n      gap: { base: '16', tablet: '32' },\n      paddingBlockEnd: { base: '16', tablet: '0' },\n      paddingBlockStart: { base: '16', tablet: '32' },\n      paddingInline: { base: '16', tablet: '32' },\n    },\n    textBlock: {\n      display: 'flex',\n      flex: { base: 'none', tablet: '1 0 0' },\n      flexDirection: 'column',\n      gap: { base: '4', tablet: '0' },\n      minWidth: 0,\n    },\n    title: {\n      color: 'text/primary',\n      // Desktop keeps the design's 4px under the title with or without the secondary text; mobile has a gap instead.\n      paddingBlockEnd: { base: '0', tablet: '4' },\n      textStyle: { base: 'heading/mobile/h1', tablet: 'heading/h2' },\n      truncate: true,\n    },\n    secondaryText: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n    },\n    actionBlock: {\n      display: 'flex',\n      flexShrink: 0,\n      // Mobile puts the primary action first, so the row (and its lines, once they wrap) reverses the DOM order.\n      flexDirection: { base: 'row-reverse', tablet: 'row' },\n      flexWrap: { base: 'wrap-reverse', tablet: 'wrap' },\n      gap: '12',\n      '& > *': { flex: { base: '1 1 auto', tablet: 'none' } },\n    },\n    tabs: {\n      // Lands the tab list's own bottom line on the root's border, so the subheader keeps one edge.\n      marginBlockEnd: rem(-1),\n      paddingInlineEnd: '32',\n      paddingInlineStart: '16',\n    },\n  },\n  variants: {\n    contentWidth: Object.fromEntries(\n      Object.entries(contentWidthStyles).map(([key, styles]) => [\n        key,\n        // The capped design insets the tabs by 32, the full-width one by 16 (pending a design answer on which is right).\n        key === 'full'\n          ? { contentBlock: styles }\n          : { contentBlock: styles, tabs: { paddingInlineStart: { base: '16', tablet: '32' } } },\n      ]),\n    ) as {\n      [K in keyof typeof contentWidthStyles]: {\n        contentBlock: (typeof contentWidthStyles)[K];\n        tabs?: { paddingInlineStart: { base: string; tablet: string } };\n      };\n    },\n    hasTabs: {\n      true: {\n        root: {\n          borderBlockEnd: '1px solid',\n          borderColor: 'border/regular',\n        },\n        headerBlock: {\n          paddingBlockEnd: { base: '16', tablet: '24' },\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    contentWidth: 'full',\n    hasTabs: false,\n  },\n});\n\nexport default pageSubheaderSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,0BAA0B,iBAAiB;CAC/C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAgB;EAAe;EAAa;EAAS;EAAiB;EAAe;CAAM;CAC3G,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,cAAc;GACZ,SAAS;GACT,eAAe;GACf,cAAc;GACd,OAAO;EACT;EACA,aAAa;GACX,YAAY;IAAE,MAAM;IAAW,QAAQ;GAAW;GAClD,SAAS;GACT,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,iBAAiB;IAAE,MAAM;IAAM,QAAQ;GAAI;GAC3C,mBAAmB;IAAE,MAAM;IAAM,QAAQ;GAAK;GAC9C,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,WAAW;GACT,SAAS;GACT,MAAM;IAAE,MAAM;IAAQ,QAAQ;GAAQ;GACtC,eAAe;GACf,KAAK;IAAE,MAAM;IAAK,QAAQ;GAAI;GAC9B,UAAU;EACZ;EACA,OAAO;GACL,OAAO;GAEP,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAI;GAC1C,WAAW;IAAE,MAAM;IAAqB,QAAQ;GAAa;GAC7D,UAAU;EACZ;EACA,eAAe;GACb,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,SAAS;GACT,YAAY;GAEZ,eAAe;IAAE,MAAM;IAAe,QAAQ;GAAM;GACpD,UAAU;IAAE,MAAM;IAAgB,QAAQ;GAAO;GACjD,KAAK;GACL,SAAS,EAAE,MAAM;IAAE,MAAM;IAAY,QAAQ;GAAO,EAAE;EACxD;EACA,MAAM;GAEJ,gBAAgB,IAAI,EAAE;GACtB,kBAAkB;GAClB,oBAAoB;EACtB;CACF;CACA,UAAU;EACR,cAAc,OAAO,YACnB,OAAO,QAAQ,kBAAkB,CAAC,CAAC,KAAK,CAAC,KAAK,YAAY,CACxD,KAEA,QAAQ,SACJ,EAAE,cAAc,OAAO,IACvB;GAAE,cAAc;GAAQ,MAAM,EAAE,oBAAoB;IAAE,MAAM;IAAM,QAAQ;GAAK,EAAE;EAAE,CACzF,CAAC,CACH;EAMA,SAAS;GACP,MAAM;IACJ,MAAM;KACJ,gBAAgB;KAChB,aAAa;IACf;IACA,aAAa,EACX,iBAAiB;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC9C;GACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EACf,cAAc;EACd,SAAS;CACX;AACF,CAAC"}

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

@@ -11,7 +11,7 @@ var stepCardSlotRecipe = defineSlotRecipe({
 			border: "1px solid",
 			borderColor: "border/minimal",
 			borderRadius: "8",
-			boxShadow: "elevation/md",
+			boxShadow: "elevation/sm",
 			overflow: "hidden"
 		},
 		header: {

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

@@ -1 +1 @@
-{"version":3,"file":"StepCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/StepCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst stepsCardAnatomy = cardAnatomy.extendWith('titleGroup');\n\nconst stepCardSlotRecipe = defineSlotRecipe({\n  className: 'steps-card',\n  slots: stepsCardAnatomy.keys(),\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      border: '1px solid',\n      borderColor: 'border/minimal',\n      borderRadius: '8',\n      boxShadow: 'elevation/md',\n      overflow: 'hidden',\n    },\n    header: {\n      paddingBlockStart: '32',\n      paddingInline: { base: '24', tablet: '32' },\n    },\n    body: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '24',\n      paddingBlockEnd: '48',\n      paddingBlockStart: '32',\n      paddingInline: { base: '24', tablet: '32' },\n    },\n    titleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n    },\n    title: {\n      color: 'text/primary',\n      textStyle: 'heading/h3',\n    },\n    description: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n    },\n    footer: {\n      alignItems: 'center',\n      borderBlockStart: '1px solid',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'flex-end',\n      padding: { base: '24', tablet: '32' },\n    },\n  },\n});\n\nexport default stepCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,mBAAmB,YAAY,WAAW,YAAY;AAE5D,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,aAAa;GACb,cAAc;GACd,WAAW;GACX,UAAU;EACZ;EACA,QAAQ;GACN,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;EACb;EACA,QAAQ;GACN,YAAY;GACZ,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,SAAS;IAAE,MAAM;IAAM,QAAQ;GAAK;EACtC;CACF;AACF,CAAC"}
+{"version":3,"file":"StepCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/StepCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst stepsCardAnatomy = cardAnatomy.extendWith('titleGroup');\n\nconst stepCardSlotRecipe = defineSlotRecipe({\n  className: 'steps-card',\n  slots: stepsCardAnatomy.keys(),\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      border: '1px solid',\n      borderColor: 'border/minimal',\n      borderRadius: '8',\n      boxShadow: 'elevation/sm',\n      overflow: 'hidden',\n    },\n    header: {\n      paddingBlockStart: '32',\n      paddingInline: { base: '24', tablet: '32' },\n    },\n    body: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '24',\n      paddingBlockEnd: '48',\n      paddingBlockStart: '32',\n      paddingInline: { base: '24', tablet: '32' },\n    },\n    titleGroup: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '4',\n    },\n    title: {\n      color: 'text/primary',\n      textStyle: 'heading/h3',\n    },\n    description: {\n      color: 'text/secondary',\n      textStyle: 'body/md/regular',\n    },\n    footer: {\n      alignItems: 'center',\n      borderBlockStart: '1px solid',\n      borderColor: 'border/minimal',\n      display: 'flex',\n      gap: '16',\n      justifyContent: 'flex-end',\n      padding: { base: '24', tablet: '32' },\n    },\n  },\n});\n\nexport default stepCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,mBAAmB,YAAY,WAAW,YAAY;AAE5D,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,iBAAiB,KAAK;CAC7B,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,aAAa;GACb,cAAc;GACd,WAAW;GACX,UAAU;EACZ;EACA,QAAQ;GACN,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;IAAE,MAAM;IAAM,QAAQ;GAAK;EAC5C;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;EACb;EACA,QAAQ;GACN,YAAY;GACZ,kBAAkB;GAClB,aAAa;GACb,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,SAAS;IAAE,MAAM;IAAM,QAAQ;GAAK;EACtC;CACF;AACF,CAAC"}

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

@@ -1217,14 +1217,6 @@ declare const slotRecipes: {
                 };
             };
         };
-        contentAlign: {
-            center: {};
-            start: {
-                root: {
-                    justifyContent: "flex-start";
-                };
-            };
-        };
     }>;
     imageCropper: import('@chakra-ui/react').SlotRecipeDefinition<"grid" | "image" | "root" | "handle" | "viewport" | "selection", import('@chakra-ui/react').SlotRecipeVariantRecord<"grid" | "image" | "root" | "handle" | "viewport" | "selection">>;
     inlineLoading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root", {
@@ -1931,24 +1923,16 @@ declare const slotRecipes: {
         alignsToContent: {
             true: {
                 headerBlock: {
+                    marginInline: "auto";
                     tablet: {
                         paddingInlineStart: "32";
                     };
                 };
-            };
-            false: {};
-        };
-        contentAlign: {
-            center: {
-                headerBlock: {
+                tabs: {
                     marginInline: "auto";
                 };
             };
-            start: {
-                headerBlock: {
-                    marginInlineEnd: "auto";
-                };
-            };
+            false: {};
         };
     }>;
     pageSidebar: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "drawerHeader" | "divider" | "drawerBackdrop" | "drawerCloseButton" | "drawerContent" | "drawerHeaderAvatar" | "drawerHeaderSecondaryText" | "drawerHeaderTextBlock" | "drawerHeaderTitle" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
@@ -2116,6 +2100,46 @@ declare const slotRecipes: {
             false: {};
         };
     }>;
+    pageSubheader: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "tabs" | "root" | "secondaryText" | "headerBlock" | "contentBlock" | "textBlock" | "actionBlock", {
+        contentWidth: { [K in "full" | "640" | "960" | "1280" | "1616"]: {
+            contentBlock: {
+                readonly '640': {
+                    readonly maxWidth: "layout/maxWidth/640";
+                };
+                readonly '960': {
+                    readonly maxWidth: "layout/maxWidth/960";
+                };
+                readonly '1280': {
+                    readonly maxWidth: "layout/maxWidth/1280";
+                };
+                readonly '1616': {
+                    readonly maxWidth: "layout/maxWidth/1616";
+                };
+                readonly full: {};
+            }[K];
+            tabs?: {
+                paddingInlineStart: {
+                    base: string;
+                    tablet: string;
+                };
+            };
+        }; };
+        hasTabs: {
+            true: {
+                root: {
+                    borderBlockEnd: "1px solid";
+                    borderColor: "border/regular";
+                };
+                headerBlock: {
+                    paddingBlockEnd: {
+                        base: "16";
+                        tablet: "24";
+                    };
+                };
+            };
+            false: {};
+        };
+    }>;
     pagination: import('@chakra-ui/react').SlotRecipeDefinition<"text" | "root" | "itemsBlock" | "itemsSelect" | "pageBlock" | "pageSelect", {
         variant: {
             card: {

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

@@ -40,6 +40,7 @@ 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 pageSubheaderSlotRecipe from "./PageSubheader.recipe.js";
 import paginationSlotRecipe from "./Pagination.recipe.js";
 import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
 import popoverSlotRecipe from "./Popover.recipe.js";
@@ -106,6 +107,7 @@ var slotRecipes = {
 	pageFooter: pageFooterSlotRecipe,
 	pageHeader: pageHeaderSlotRecipe,
 	pageSidebar: pageSidebarSlotRecipe,
+	pageSubheader: pageSubheaderSlotRecipe,
 	pagination: paginationSlotRecipe,
 	paginationLoadMore: paginationLoadMoreRecipe,
 	popover: popoverSlotRecipe,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"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 filterSlotRecipe from './Filter.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 listboxSlotRecipe from './Listbox.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 toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiHeaderSlotRecipe from './UIHeader.recipe';\nimport uiSideNavSlotRecipe from './UISideNav.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  filter: filterSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  listbox: listboxSlotRecipe,\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  toggletip: toggletipSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n  uiHeader: uiHeaderSlotRecipe,\n  uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,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,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,eAAeC;CACf,MAAM;CACN,SAAS;CACT,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;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,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,WAAW;AACb"}
+{"version":3,"file":"index.js","names":["groupHeadingSlotRecipe","inlineLoadingSlotRecipe","paginationLoadMoreSlotRecipe","sectionHeadingSlotRecipe"],"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 filterSlotRecipe from './Filter.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 listboxSlotRecipe from './Listbox.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 pageSubheaderSlotRecipe from './PageSubheader.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 toggletipSlotRecipe from './Toggletip.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport tourSlotRecipe from './Tour.recipe.ts';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\nimport uiHeaderSlotRecipe from './UIHeader.recipe';\nimport uiSideNavSlotRecipe from './UISideNav.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  filter: filterSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  listbox: listboxSlotRecipe,\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  pageSubheader: pageSubheaderSlotRecipe,\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  toggletip: toggletipSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  tour: tourSlotRecipe,\n  treeView: treeViewSlotRecipe,\n  uiHeader: uiHeaderSlotRecipe,\n  uiSideNav: uiSideNavSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,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,cAAcA;CACd,UAAU;CACV,YAAY;CACZ,QAAQ;CACR,cAAc;CACd,eAAeC;CACf,MAAM;CACN,SAAS;CACT,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,eAAe;CACf,YAAY;CACZ,oBAAoBC;CACpB,SAAS;CACT,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgBC;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,WAAW;CACX,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,WAAW;AACb"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.501",
+  "version": "0.3.502-beta.3232",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -89,6 +89,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "release-it": "^21.1.1",
+    "remark-gfm": "^4.0.1",
     "storybook": "10.6.2",
     "svgo": "~3.3.4",
     "tsx": "^4.23.15",