@bitrise/bitkit-v2 0.3.478-beta.3036 → 0.3.479

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

@@ -85,91 +85,6 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                 height: "16";
             } | undefined;
         };
-        lg: {
-            trigger: {
-                height: "40";
-                paddingBlock: "8";
-                paddingInlineEnd: `${number}rem`;
-                paddingInlineStart: "8";
-                textStyle: "body/lg/regular";
-                '&:has([data-slot="avatar"])'?: {
-                    paddingBlock: `${number}rem`;
-                    paddingInlineStart: `${number}rem`;
-                } | undefined;
-            };
-            indicatorGroup: {
-                paddingInlineEnd: "4";
-            };
-            indicator: {
-                _icon: {
-                    width: "16";
-                    height: "16";
-                };
-            };
-            checkbox?: {
-                width: "24";
-                height: "24";
-            } | undefined;
-            item?: {
-                '&:has([data-slot="avatar"])': {
-                    paddingInlineStart: "12";
-                    paddingInlineEnd: "24";
-                    paddingBlock: "8";
-                    gap: "8";
-                };
-                '&:has([data-slot="checkbox"])': {
-                    minHeight: "48";
-                    paddingInlineEnd: "24";
-                    paddingBlock: "12";
-                    gap: "12";
-                };
-                paddingInline: "16";
-                paddingBlock: "12";
-                textStyle: "body/lg/regular";
-                _selected: {
-                    textStyle: "body/lg/semibold";
-                };
-            } | undefined;
-            content?: {
-                '--select-menu-list-max-height': `${number}rem`;
-            } | undefined;
-            itemLabel?: {
-                textStyle: "body/lg/regular";
-                lineHeight: "normal";
-            } | undefined;
-            itemLoadingLabel?: {
-                textStyle: "body/lg/regular";
-            } | undefined;
-            emptyState?: {
-                paddingBlock: "12";
-            } | undefined;
-            errorState?: {
-                paddingBlock: "8";
-            } | undefined;
-            errorLabel?: {
-                textStyle: "body/lg/regular";
-            } | undefined;
-            action?: {
-                minHeight: "48";
-                paddingBlock: "12";
-                textStyle: "body/lg/regular";
-                lineHeight: "normal";
-            } | undefined;
-            searchInputGroup?: {
-                height: `${number}rem`;
-                paddingBlock: "16";
-            } | undefined;
-            searchInput?: {
-                textStyle: "body/lg/regular";
-            } | undefined;
-            searchClear?: {
-                padding: "8";
-            } | undefined;
-            itemIndicator?: {
-                width: "24";
-                height: "24";
-            } | undefined;
-        };
     };
 }>;
 export default datePickerSelectSlotRecipe;

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

@@ -1,4 +1,3 @@
-import { rem } from "../themeUtils.js";
 import { selectSlotRecipe } from "./Select.recipe.js";
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { selectAnatomy } from "@chakra-ui/react/anatomy";
@@ -11,7 +10,6 @@ var datePickerSelectSlotRecipe = defineSlotRecipe({
 			...selectSlotRecipe.base?.trigger,
 			borderWidth: 0,
 			height: "32",
-			minWidth: 0,
 			paddingInlineStart: "12",
 			paddingInlineEnd: "8",
 			"&:hover:not(:active)": { bg: "background/hover" },
@@ -28,42 +26,19 @@ var datePickerSelectSlotRecipe = defineSlotRecipe({
 		indicatorGroup: {
 			...selectSlotRecipe.base?.indicatorGroup,
 			paddingInline: "8"
-		},
-		valueText: {
-			display: "block",
-			minWidth: 0,
-			truncate: true
 		}
 	},
-	variants: { size: {
-		md: {
-			...selectSlotRecipe.variants?.size?.md,
-			trigger: {
-				...selectSlotRecipe.variants?.size?.md.trigger,
-				paddingBlock: "6"
-			},
-			indicator: { _icon: {
-				width: "16",
-				height: "16"
-			} }
+	variants: { size: { md: {
+		...selectSlotRecipe.variants?.size?.md,
+		trigger: {
+			...selectSlotRecipe.variants?.size?.md.trigger,
+			paddingBlock: "6"
 		},
-		lg: {
-			...selectSlotRecipe.variants?.size?.lg,
-			trigger: {
-				...selectSlotRecipe.variants?.size?.lg.trigger,
-				height: "40",
-				paddingBlock: "8",
-				paddingInlineEnd: rem(28),
-				paddingInlineStart: "8",
-				textStyle: "body/lg/regular"
-			},
-			indicatorGroup: { paddingInlineEnd: "4" },
-			indicator: { _icon: {
-				width: "16",
-				height: "16"
-			} }
-		}
-	} },
+		indicator: { _icon: {
+			width: "16",
+			height: "16"
+		} }
+	} } },
 	defaultVariants: { size: "md" }
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePickerSelect.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\nimport { selectSlotRecipe } from './Select.recipe';\n\nconst datePickerSelectSlotRecipe = defineSlotRecipe({\n  className: 'datePickerSelect',\n  slots: selectAnatomy.keys(),\n  base: {\n    trigger: {\n      ...selectSlotRecipe.base?.trigger,\n      borderWidth: 0,\n      height: '32',\n      minWidth: 0,\n      paddingInlineStart: '12',\n      paddingInlineEnd: '8',\n      '&:hover:not(:active)': {\n        bg: 'background/hover',\n      },\n      '&:active': {\n        bg: 'background/active',\n      },\n    },\n    indicator: {\n      ...selectSlotRecipe.base?.indicator,\n      color: 'icon/tertiary',\n      _icon: {\n        width: '16',\n        height: '16',\n      },\n    },\n    indicatorGroup: {\n      ...selectSlotRecipe.base?.indicatorGroup,\n      paddingInline: '8',\n    },\n    // A long month name is cut off before the chevron once the select shrinks, e.g. on a 320px screen.\n    valueText: {\n      display: 'block',\n      minWidth: 0,\n      truncate: true,\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        ...selectSlotRecipe.variants?.size?.md,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.md.trigger,\n          paddingBlock: '6',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n      // The mobile calendar: taller trigger and larger text.\n      lg: {\n        ...selectSlotRecipe.variants?.size?.lg,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.lg.trigger,\n          height: '40',\n          paddingBlock: '8',\n          // Clears the chevron, which sits over the trigger's end. Tight, so the year still fits at 320px.\n          paddingInlineEnd: rem(28),\n          paddingInlineStart: '8',\n          textStyle: 'body/lg/regular',\n        },\n        indicatorGroup: {\n          paddingInlineEnd: '4',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport default datePickerSelectSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,6BAA6B,iBAAiB;CAClD,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,SAAS;GACP,GAAG,iBAAiB,MAAM;GAC1B,aAAa;GACb,QAAQ;GACR,UAAU;GACV,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB,EACtB,IAAI,mBACN;GACA,YAAY,EACV,IAAI,oBACN;EACF;EACA,WAAW;GACT,GAAG,iBAAiB,MAAM;GAC1B,OAAO;GACP,OAAO;IACL,OAAO;IACP,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,GAAG,iBAAiB,MAAM;GAC1B,eAAe;EACjB;EAEA,WAAW;GACT,SAAS;GACT,UAAU;GACV,UAAU;EACZ;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,GAAG,iBAAiB,UAAU,MAAM;GACpC,SAAS;IACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;IACvC,cAAc;GAChB;GACA,WAAW,EACT,OAAO;IACL,OAAO;IACP,QAAQ;GACV,EACF;EACF;EAEA,IAAI;GACF,GAAG,iBAAiB,UAAU,MAAM;GACpC,SAAS;IACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;IACvC,QAAQ;IACR,cAAc;IAEd,kBAAkB,IAAI,EAAE;IACxB,oBAAoB;IACpB,WAAW;GACb;GACA,gBAAgB,EACd,kBAAkB,IACpB;GACA,WAAW,EACT,OAAO;IACL,OAAO;IACP,QAAQ;GACV,EACF;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"DatePickerSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePickerSelect.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { selectSlotRecipe } from './Select.recipe';\n\nconst datePickerSelectSlotRecipe = defineSlotRecipe({\n  className: 'datePickerSelect',\n  slots: selectAnatomy.keys(),\n  base: {\n    trigger: {\n      ...selectSlotRecipe.base?.trigger,\n      borderWidth: 0,\n      height: '32',\n      paddingInlineStart: '12',\n      paddingInlineEnd: '8',\n      '&:hover:not(:active)': {\n        bg: 'background/hover',\n      },\n      '&:active': {\n        bg: 'background/active',\n      },\n    },\n    indicator: {\n      ...selectSlotRecipe.base?.indicator,\n      color: 'icon/tertiary',\n      _icon: {\n        width: '16',\n        height: '16',\n      },\n    },\n    indicatorGroup: {\n      ...selectSlotRecipe.base?.indicatorGroup,\n      paddingInline: '8',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        ...selectSlotRecipe.variants?.size?.md,\n        trigger: {\n          ...selectSlotRecipe.variants?.size?.md.trigger,\n          paddingBlock: '6',\n        },\n        indicator: {\n          _icon: {\n            width: '16',\n            height: '16',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport default datePickerSelectSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,6BAA6B,iBAAiB;CAClD,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,SAAS;GACP,GAAG,iBAAiB,MAAM;GAC1B,aAAa;GACb,QAAQ;GACR,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB,EACtB,IAAI,mBACN;GACA,YAAY,EACV,IAAI,oBACN;EACF;EACA,WAAW;GACT,GAAG,iBAAiB,MAAM;GAC1B,OAAO;GACP,OAAO;IACL,OAAO;IACP,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,GAAG,iBAAiB,MAAM;GAC1B,eAAe;EACjB;CACF;CACA,UAAU,EACR,MAAM,EACJ,IAAI;EACF,GAAG,iBAAiB,UAAU,MAAM;EACpC,SAAS;GACP,GAAG,iBAAiB,UAAU,MAAM,GAAG;GACvC,cAAc;EAChB;EACA,WAAW,EACT,OAAO;GACL,OAAO;GACP,QAAQ;EACV,EACF;CACF,EACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -73,6 +73,7 @@ var menuSlotRecipe = defineSlotRecipe({
 			flexDirection: "row",
 			paddingLeft: "16",
 			paddingRight: "24",
+			_disabled: { cursor: "not-allowed" },
 			"&[data-danger]": {
 				color: "button/danger-secondary/fg",
 				_icon: { color: "button/danger-secondary/fg" },
@@ -89,12 +90,6 @@ var menuSlotRecipe = defineSlotRecipe({
 				background: "button/secondary/bg-hover",
 				_active: itemActive
 			},
-			_disabled: {
-				color: "text/disabled",
-				cursor: "not-allowed",
-				_icon: { color: "icon/disabled" },
-				_highlighted: { background: "transparent" }
-			},
 			"& [data-suffix-icon]": { color: "icon/tertiary" }
 		},
 		itemGroupLabel: {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n  background: 'button/secondary/bg-active',\n  _icon: {\n    color: 'icon/primary',\n  },\n};\nconst itemActiveDanger: SystemStyleObject = {\n  background: 'button/danger-secondary/bg-active',\n  color: 'button/danger-secondary/fg-active',\n  _icon: {\n    color: 'button/danger-secondary/fg-active',\n  },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n  className: 'menu',\n  slots: [...menuAnatomy.keys(), 'itemHelper'],\n  variants: {\n    size: {\n      lg: {\n        item: {\n          alignItems: 'center',\n          paddingY: '12',\n          textStyle: 'body/lg/regular',\n          // With a helper line the item aligns to the top of the label and gets tighter padding.\n          '&[data-helper]': {\n            alignItems: 'flex-start',\n            paddingY: '8',\n          },\n        },\n      },\n      md: {\n        item: {\n          alignItems: 'center',\n          // The label line (20px) alone is shorter than the designed 40px row.\n          minHeight: '40',\n          paddingY: '8',\n          textStyle: 'body/md/regular',\n          '&[data-helper]': {\n            _icon: {\n              // Optically center the 16px icon against the 20px label line.\n              marginTop: '2',\n            },\n            alignItems: 'flex-start',\n            paddingY: '6',\n          },\n        },\n      },\n    },\n  },\n  base: {\n    content: {\n      // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n      // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n      // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n      zIndex: 'popover',\n      borderRadius: '4',\n      paddingY: '8',\n      border: '1px solid',\n      borderColor: 'border/minimal',\n      _focusVisible: { outline: 'none' },\n      boxShadow: 'elevation/lg',\n      background: 'background/primary',\n      maxHeight: 'var(--available-height)',\n      // The cap is useless without these: the positioner sets --available-height from the viewport,\n      // and a longer list then spills out of the content box instead of scrolling inside it.\n      overflow: 'hidden',\n      overflowY: 'auto',\n      _open: {\n        animationStyle: 'slide-fade-in',\n        animationDuration: 'fast',\n      },\n      _closed: {\n        animationStyle: 'slide-fade-out',\n        animationDuration: 'faster',\n      },\n    },\n    itemHelper: {\n      textStyle: 'body/sm/regular',\n      color: 'text/secondary',\n    },\n    item: {\n      _icon: {\n        color: 'icon/secondary',\n        _active: {\n          color: 'icon/primary',\n        },\n      },\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '12',\n      userSelect: 'none',\n      flexDirection: 'row',\n      paddingLeft: '16',\n      paddingRight: '24',\n      '&[data-danger]': {\n        color: 'button/danger-secondary/fg',\n        _icon: {\n          color: 'button/danger-secondary/fg',\n        },\n        _active: itemActiveDanger,\n        _highlighted: {\n          background: 'button/danger-secondary/bg-hover',\n          color: 'button/danger-secondary/fg-hover',\n          _active: itemActiveDanger,\n          _icon: {\n            color: 'button/danger-secondary/fg-hover',\n          },\n        },\n      },\n      _active: itemActive,\n      _highlighted: {\n        background: 'button/secondary/bg-hover',\n        _active: itemActive,\n      },\n      // After the danger and highlight blocks: equally specific, so the later one wins for a disabled danger item.\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n      // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n      // state — including the destructive one, which overrides `_icon` above.\n      '& [data-suffix-icon]': {\n        color: 'icon/tertiary',\n      },\n    },\n    itemGroupLabel: {\n      // The rule after the label is a Chakra Separator, whose recipe base is `border/regular` — a\n      // shade darker than the menu's own separator. Match `BitkitActionMenu.Separator`.\n      '& .separator': {\n        borderColor: 'border/minimal',\n      },\n      textStyle: 'heading/h6',\n      color: 'text/tertiary',\n      paddingTop: '12',\n      paddingLeft: '16',\n      paddingRight: '16',\n      paddingBottom: '6',\n      display: 'flex',\n      gap: '8',\n      flexDirection: 'row',\n      alignItems: 'center',\n    },\n    separator: {\n      color: 'border/minimal',\n      marginY: '8',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GAGX,UAAU;GACV,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAEA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;IACA,cAAc,EACZ,YAAY,cACd;GACF;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,gBAAgB;GAGd,gBAAgB,EACd,aAAa,iBACf;GACA,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n  background: 'button/secondary/bg-active',\n  _icon: {\n    color: 'icon/primary',\n  },\n};\nconst itemActiveDanger: SystemStyleObject = {\n  background: 'button/danger-secondary/bg-active',\n  color: 'button/danger-secondary/fg-active',\n  _icon: {\n    color: 'button/danger-secondary/fg-active',\n  },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n  className: 'menu',\n  slots: [...menuAnatomy.keys(), 'itemHelper'],\n  variants: {\n    size: {\n      lg: {\n        item: {\n          alignItems: 'center',\n          paddingY: '12',\n          textStyle: 'body/lg/regular',\n          // With a helper line the item aligns to the top of the label and gets tighter padding.\n          '&[data-helper]': {\n            alignItems: 'flex-start',\n            paddingY: '8',\n          },\n        },\n      },\n      md: {\n        item: {\n          alignItems: 'center',\n          // The label line (20px) alone is shorter than the designed 40px row.\n          minHeight: '40',\n          paddingY: '8',\n          textStyle: 'body/md/regular',\n          '&[data-helper]': {\n            _icon: {\n              // Optically center the 16px icon against the 20px label line.\n              marginTop: '2',\n            },\n            alignItems: 'flex-start',\n            paddingY: '6',\n          },\n        },\n      },\n    },\n  },\n  base: {\n    content: {\n      // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n      // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n      // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n      zIndex: 'popover',\n      borderRadius: '4',\n      paddingY: '8',\n      border: '1px solid',\n      borderColor: 'border/minimal',\n      _focusVisible: { outline: 'none' },\n      boxShadow: 'elevation/lg',\n      background: 'background/primary',\n      maxHeight: 'var(--available-height)',\n      // The cap is useless without these: the positioner sets --available-height from the viewport,\n      // and a longer list then spills out of the content box instead of scrolling inside it.\n      overflow: 'hidden',\n      overflowY: 'auto',\n      _open: {\n        animationStyle: 'slide-fade-in',\n        animationDuration: 'fast',\n      },\n      _closed: {\n        animationStyle: 'slide-fade-out',\n        animationDuration: 'faster',\n      },\n    },\n    itemHelper: {\n      textStyle: 'body/sm/regular',\n      color: 'text/secondary',\n    },\n    item: {\n      _icon: {\n        color: 'icon/secondary',\n        _active: {\n          color: 'icon/primary',\n        },\n      },\n      cursor: 'pointer',\n      display: 'flex',\n      gap: '12',\n      userSelect: 'none',\n      flexDirection: 'row',\n      paddingLeft: '16',\n      paddingRight: '24',\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n      '&[data-danger]': {\n        color: 'button/danger-secondary/fg',\n        _icon: {\n          color: 'button/danger-secondary/fg',\n        },\n        _active: itemActiveDanger,\n        _highlighted: {\n          background: 'button/danger-secondary/bg-hover',\n          color: 'button/danger-secondary/fg-hover',\n          _active: itemActiveDanger,\n          _icon: {\n            color: 'button/danger-secondary/fg-hover',\n          },\n        },\n      },\n      _active: itemActive,\n      _highlighted: {\n        background: 'button/secondary/bg-hover',\n        _active: itemActive,\n      },\n      // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n      // state — including the destructive one, which overrides `_icon` above.\n      '& [data-suffix-icon]': {\n        color: 'icon/tertiary',\n      },\n    },\n    itemGroupLabel: {\n      // The rule after the label is a Chakra Separator, whose recipe base is `border/regular` — a\n      // shade darker than the menu's own separator. Match `BitkitActionMenu.Separator`.\n      '& .separator': {\n        borderColor: 'border/minimal',\n      },\n      textStyle: 'heading/h6',\n      color: 'text/tertiary',\n      paddingTop: '12',\n      paddingLeft: '16',\n      paddingRight: '16',\n      paddingBottom: '6',\n      display: 'flex',\n      gap: '8',\n      flexDirection: 'row',\n      alignItems: 'center',\n    },\n    separator: {\n      color: 'border/minimal',\n      marginY: '8',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GAGX,UAAU;GACV,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,WAAW,EACT,QAAQ,cACV;GACA,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,gBAAgB;GAGd,gBAAgB,EACd,aAAa,iBACf;GACA,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -1,4 +1,4 @@
-declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
+declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "sectionTitle" | "headerBlock" | "contentBlock" | "titleBar" | "textBlock" | "titleRow" | "actionBlock" | "menuButton" | "sectionBlock", {
     contentVariant: {
         title: {
             titleBlock: {
@@ -52,6 +52,28 @@ declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
         true: {};
         false: {};
     };
+    /**
+     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar
+     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the
+     * trail — and the title steps down to leave the section name as the page's large heading. All
+     * `base`: from `tablet` the header is the ordinary one.
+     */
+    hasSidebar: {
+        true: {
+            headerBlock: {
+                base: {
+                    gap: "8";
+                    paddingBlockStart: "12";
+                };
+            };
+            title: {
+                base: {
+                    textStyle: "heading/mobile/h3";
+                };
+            };
+        };
+        false: {};
+    };
     /**
      * From the component's `showDivider`. The header's background is the page's, so without the line
      * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes

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

@@ -119,6 +119,7 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		"breadcrumb",
 		"controls",
 		"contentBlock",
+		"titleBar",
 		"titleBlock",
 		"avatar",
 		"textBlock",
@@ -127,6 +128,9 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		"badge",
 		"secondaryText",
 		"actionBlock",
+		"menuButton",
+		"sectionBlock",
+		"sectionTitle",
 		"tabs"
 	],
 	base: {
@@ -191,6 +195,16 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			},
 			width: "100%"
 		},
+		titleBar: {
+			alignItems: "center",
+			display: {
+				base: "flex",
+				tablet: "contents"
+			},
+			gap: "12",
+			minWidth: 0,
+			width: "100%"
+		},
 		titleBlock: {
 			display: "flex",
 			flex: "1 0 0",
@@ -252,6 +266,32 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 				tablet: "auto"
 			}
 		},
+		menuButton: {
+			display: {
+				base: "flex",
+				tablet: "none"
+			},
+			flexShrink: 0
+		},
+		sectionBlock: {
+			alignSelf: "stretch",
+			borderBlockStartColor: "border/minimal",
+			borderBlockStartStyle: "solid",
+			borderBlockStartWidth: "1",
+			display: {
+				base: "flex",
+				tablet: "none"
+			},
+			flexDirection: "column",
+			marginInline: "-16",
+			paddingBlockStart: "16",
+			paddingInline: "16"
+		},
+		sectionTitle: {
+			color: "text/primary",
+			textStyle: "heading/mobile/h1",
+			truncate: true
+		},
 		tabs: {
 			marginBlockEnd: rem(-1),
 			paddingInlineEnd: {
@@ -266,6 +306,12 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		}
 	},
 	compoundVariants: [
+		{
+			contentVariant: "title",
+			hasBreadcrumb: true,
+			hasSidebar: true,
+			css: { title: { base: { textStyle: "heading/mobile/h2" } } }
+		},
 		{
 			hasBreadcrumb: true,
 			variant: "minimal",
@@ -344,6 +390,22 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			false: {}
 		},
 		/**
+		* From the component's `onMenuClick`: the mobile layout for a page with a sidebar
+		* (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the
+		* trail — and the title steps down to leave the section name as the page's large heading. All
+		* `base`: from `tablet` the header is the ordinary one.
+		*/
+		hasSidebar: {
+			true: {
+				headerBlock: { base: {
+					gap: "8",
+					paddingBlockStart: "12"
+				} },
+				title: { base: { textStyle: "heading/mobile/h3" } }
+			},
+			false: {}
+		},
+		/**
 		* From the component's `showDivider`. The header's background is the page's, so without the line
 		* the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes
 		* with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and
@@ -407,6 +469,7 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		hasBreadcrumb: false,
 		hasControls: false,
 		hasDivider: true,
+		hasSidebar: false,
 		isSticky: false,
 		variant: "default"
 	}

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    '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    { 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 `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    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      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":";;;;;;;;;;;;;;;;;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;CAM3D,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,EAAE;CAI3C,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;;;;;;;AAQA,IAAM,0BAA0B,EAC9B,aAAa,EAAE,QAAQ,EAAE,oBAAoB,KAAK,EAAE,EACtD;;;;;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;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;EAMA,UAAU;GACR,YAAY;GACZ,SAAS;IAAE,MAAM;IAAQ,QAAQ;GAAW;GAC5C,KAAK;GACL,UAAU;GACV,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;EAIA,YAAY;GACV,SAAS;IAAE,MAAM;IAAQ,QAAQ;GAAO;GACxC,YAAY;EACd;EACA,cAAc;GAEZ,WAAW;GACX,uBAAuB;GACvB,uBAAuB;GACvB,uBAAuB;GACvB,SAAS;IAAE,MAAM;IAAQ,QAAQ;GAAO;GACxC,eAAe;GAEf,cAAc;GACd,mBAAmB;GACnB,eAAe;EACjB;EACA,cAAc;GACZ,OAAO;GACP,WAAW;GACX,UAAU;EACZ;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;EAIhB;GACE,gBAAgB;GAChB,eAAe;GACf,YAAY;GACZ,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,oBAAoB,EAAE,EAAE;EAC7D;EACA;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;EACrF;GAAE,iBAAiB;GAAM,SAAS;GAAW,KAAK;EAAwB;EAC1E;GAAE,iBAAiB;GAAM,UAAU;GAAM,KAAK;EAAwB;CACxE;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;;;;;;;EAOA,YAAY;GACV,MAAM;IACJ,aAAa,EACX,MAAM;KACJ,KAAK;KACL,mBAAmB;IACrB,EACF;IACA,OAAO,EACL,MAAM,EAAE,WAAW,oBAAoB,EACzC;GACF;GACA,OAAO,CAAC;EACV;;;;;;;EAOA,YAAY;GACV,MAAM,CAAC;GACP,OAAO;IACL,MAAM,EAAE,qBAAqB,EAAE;IAC/B,aAAa,EAAE,iBAAiB,EAAE;GACpC;EACF;EACA,UAAU;GACR,MAAM;IACJ,MAAM,EAGJ,QAAQ;KAGN,qBAAqB;KACrB,aAAa;KACb,WAAW;IACb,EACF;IACA,GAAG;GACL;GACA,OAAO,CAAC;EACV;EACA,SAAS;GACP,SAAS,CAAC;GACV,SAAS;EACX;;;;;;;;;;;;;;;;EAgBA,iBAAiB;GACf,MAAM,EACJ,aAAa,EACX,QAAQ,EACN,oBAAoB,KACtB,EACF,EACF;GACA,OAAO,CAAC;EACV;;;;;;EAMA,cAAc;GACZ,QAAQ,EACN,aAAa,EACX,cAAc,OAChB,EACF;GACA,OAAO,EACL,aAAa,EACX,iBAAiB,OACnB,EACF;EACF;CACF;CACA,iBAAiB;EACf,iBAAiB;EACjB,cAAc;EACd,gBAAgB;EAChB,eAAe;EACf,aAAa;EACb,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,SAAS;CACX;AACF,CAAC"}

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

@@ -1,4 +1,52 @@
-declare const pageSidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "title" | "root" | "item" | "suffixIcon" | "titleText" | "titleBlock" | "itemLabel" | "itemIcon" | "contentBlock" | "divider" | "progressBlocker" | "progressConnector" | "progressContentBlock" | "progressIcon" | "progressLabel" | "progressRow" | "progressSecondaryText" | "progressTextBlock" | "project" | "projectLabel" | "projectValue" | "projectValueWrapper" | "selectionMarker", {
+declare const pageSidebarSlotRecipe: 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", {
+    /**
+     * `drawer` is the sidebar inside its mobile drawer panel: the panel carries the edge and the
+     * width, so the navigation itself gives up its own and scrolls within the panel.
+     */
+    layout: {
+        hidden: {
+            root: {
+                display: {
+                    base: "none";
+                    tablet: "flex";
+                };
+            };
+        };
+        drawer: {
+            root: {
+                borderInlineEndWidth: number;
+                flex: number;
+                maxWidth: "none";
+                minHeight: "auto";
+                minWidth: number;
+                overflowY: "auto";
+                width: "full";
+            };
+        };
+        static: {};
+    };
+    /**
+     * The drawer header's two shapes (Figma `mobilePageSidebarHeader`): a page title on its own, or
+     * an entity — app or user — whose name steps down a size to make room for its secondary text.
+     */
+    hasSecondaryText: {
+        true: {
+            drawerHeader: {
+                gap: "12";
+            };
+            drawerHeaderTitle: {
+                textStyle: "heading/mobile/h3";
+            };
+        };
+        false: {
+            drawerHeader: {
+                gap: "8";
+            };
+            drawerHeaderTextBlock: {
+                paddingInlineStart: "4";
+            };
+        };
+    };
     hasBack: {
         true: {
             title: {