@bitrise/bitkit-v2 0.3.481-beta.3077 → 0.3.481-beta.3081

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

@@ -0,0 +1,243 @@
+import { colorVar, rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/UIHeader.recipe.ts
+var uiHeaderHeightPx = 48;
+var uiHeaderHeight = rem(48);
+var SEARCH_FIELD_WIDTH = rem(240);
+var SEARCH_FIELD_TINT = colorVar("color/white/20");
+var controlBase = {
+	background: "sys/ui/header/control/bg",
+	_hover: {
+		background: "sys/ui/header/control/bg-hover",
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	_active: { background: "sys/ui/header/control/bg-active" },
+	_selected: {
+		background: "sys/ui/header/control/bg-selected",
+		_hover: {
+			background: "sys/ui/header/control/bg-selected-hover",
+			_active: { background: "sys/ui/header/control/bg-selected" }
+		},
+		_active: { background: "sys/ui/header/control/bg-selected" }
+	},
+	alignItems: "center",
+	borderRadius: 0,
+	color: "icon/on-color",
+	cursor: "pointer",
+	display: "flex",
+	flexShrink: 0,
+	height: uiHeaderHeight,
+	justifyContent: "center",
+	position: "relative",
+	textDecoration: "none",
+	_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+};
+var uiHeaderSlotRecipe = defineSlotRecipe({
+	className: "ui-header",
+	slots: [
+		"accountAvatar",
+		"accountIcon",
+		"actions",
+		"badge",
+		"banner",
+		"bar",
+		"control",
+		"indicator",
+		"leading",
+		"logoBlock",
+		"logoLink",
+		"navButton",
+		"navButtonBadge",
+		"navButtonIcon",
+		"root",
+		"search",
+		"searchButton",
+		"searchClear",
+		"searchField",
+		"searchIcon",
+		"searchInput",
+		"spacer"
+	],
+	base: {
+		root: {
+			background: "sys/ui/header/bg",
+			color: "text/on-color",
+			display: "flex",
+			flexDirection: "column",
+			width: "full"
+		},
+		bar: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			height: uiHeaderHeight,
+			position: "relative",
+			tablet: { paddingInlineStart: "20" }
+		},
+		leading: {
+			display: "flex",
+			flexShrink: 0,
+			tablet: { display: "none" }
+		},
+		spacer: {
+			flexShrink: 1,
+			width: "48",
+			tablet: { display: "none" }
+		},
+		logoBlock: {
+			alignItems: "center",
+			display: "flex",
+			flex: 1,
+			justifyContent: "center",
+			minWidth: 0,
+			tablet: { flex: "none" }
+		},
+		logoLink: {
+			borderRadius: "4",
+			color: "text/on-color",
+			display: "flex",
+			marginBlockEnd: rem(3)
+		},
+		actions: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			marginInlineStart: "auto",
+			tablet: { paddingInlineEnd: "32" }
+		},
+		banner: { width: "full" },
+		control: {
+			...controlBase,
+			width: "48"
+		},
+		accountAvatar: {
+			borderRadius: "full",
+			display: "none",
+			overflow: "hidden",
+			tablet: { display: "inline-flex" }
+		},
+		accountIcon: {
+			display: "block",
+			tablet: { display: "none" }
+		},
+		navButton: {
+			...controlBase,
+			paddingBlock: "8",
+			paddingInlineEnd: "8",
+			paddingInlineStart: "12"
+		},
+		navButtonBadge: {
+			alignItems: "flex-start",
+			background: "sys/ui/header/bg",
+			borderStartStartRadius: "2",
+			color: "icon/on-color",
+			display: "flex",
+			height: "12",
+			insetBlockEnd: "8",
+			insetInlineEnd: "8",
+			overflow: "hidden",
+			pointerEvents: "none",
+			position: "absolute",
+			width: "16"
+		},
+		navButtonIcon: {
+			flexShrink: 0,
+			marginBlockStart: rem(-1),
+			marginInlineStart: "1"
+		},
+		badge: {
+			background: "sys/ui/header/badge/red",
+			borderRadius: "full",
+			height: "8",
+			insetBlockStart: "12",
+			insetInlineStart: rem(28),
+			pointerEvents: "none",
+			position: "absolute",
+			width: "8",
+			"&[data-pulse]": { _after: {
+				animation: "ping",
+				background: "sys/ui/header/badge/red",
+				borderRadius: "full",
+				content: "\"\"",
+				inset: 0,
+				opacity: .5,
+				position: "absolute",
+				_motionReduce: { animation: "none" }
+			} }
+		},
+		indicator: {
+			background: "sys/ui/header/control/indicator",
+			height: "4",
+			insetBlockEnd: 0,
+			insetInline: 0,
+			pointerEvents: "none",
+			position: "absolute"
+		},
+		search: {
+			display: "flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		searchField: {
+			alignItems: "center",
+			backgroundColor: "sys/ui/header/bg",
+			backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderStyle: "solid",
+			borderWidth: "1",
+			display: "none",
+			gap: "8",
+			height: "40",
+			insetBlockStart: "4",
+			insetInlineEnd: 0,
+			opacity: 0,
+			paddingInlineEnd: "12",
+			paddingInlineStart: "8",
+			position: "absolute",
+			transitionDuration: "fast",
+			transitionProperty: "opacity, visibility",
+			transitionTimingFunction: "ease-out",
+			visibility: "hidden",
+			width: SEARCH_FIELD_WIDTH,
+			"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
+			_open: {
+				opacity: 1,
+				visibility: "visible"
+			},
+			_motionReduce: { transitionProperty: "none" },
+			tablet: { display: "flex" }
+		},
+		searchButton: { tablet: { _open: { visibility: "hidden" } } },
+		searchClear: {
+			color: "icon/on-color",
+			flexShrink: 0
+		},
+		searchIcon: {
+			color: "icon/on-color",
+			flexShrink: 0
+		},
+		searchInput: {
+			background: "transparent",
+			borderWidth: 0,
+			color: "text/on-color",
+			flex: 1,
+			minWidth: 0,
+			padding: 0,
+			textStyle: "body/lg/regular",
+			"&::-webkit-search-cancel-button": { display: "none" },
+			_focusVisible: {
+				outline: "none",
+				outlineWidth: 0
+			},
+			_placeholder: {
+				color: "text/on-color",
+				opacity: .6
+			}
+		}
+	}
+});
+//#endregion
+export { uiHeaderSlotRecipe as default, uiHeaderHeight, uiHeaderHeightPx };
+
+//# sourceMappingURL=UIHeader.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\nexport const uiHeaderHeightPx = 48;\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n  background: 'sys/ui/header/control/bg',\n  _hover: {\n    background: 'sys/ui/header/control/bg-hover',\n    _active: {\n      background: 'sys/ui/header/control/bg-active',\n    },\n  },\n  _active: {\n    background: 'sys/ui/header/control/bg-active',\n  },\n  _selected: {\n    background: 'sys/ui/header/control/bg-selected',\n    _hover: {\n      background: 'sys/ui/header/control/bg-selected-hover',\n      _active: {\n        background: 'sys/ui/header/control/bg-selected',\n      },\n    },\n    _active: {\n      background: 'sys/ui/header/control/bg-selected',\n    },\n  },\n};\n\nconst controlBase: SystemStyleObject = {\n  ...controlStates,\n  alignItems: 'center',\n  borderRadius: 0,\n  color: 'icon/on-color',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  height: uiHeaderHeight,\n  justifyContent: 'center',\n  position: 'relative',\n  textDecoration: 'none',\n  _focusVisible: {\n    outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n  },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n  className: 'ui-header',\n  slots: [\n    'accountAvatar',\n    'accountIcon',\n    'actions',\n    'badge',\n    'banner',\n    'bar',\n    'control',\n    'indicator',\n    'leading',\n    'logoBlock',\n    'logoLink',\n    'navButton',\n    'navButtonBadge',\n    'navButtonIcon',\n    'root',\n    'search',\n    'searchButton',\n    'searchClear',\n    'searchField',\n    'searchIcon',\n    'searchInput',\n    'spacer',\n  ],\n  base: {\n    root: {\n      background: 'sys/ui/header/bg',\n      color: 'text/on-color',\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'full',\n    },\n    bar: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      height: uiHeaderHeight,\n      position: 'relative',\n      tablet: {\n        paddingInlineStart: '20',\n      },\n    },\n    leading: {\n      display: 'flex',\n      flexShrink: 0,\n      tablet: {\n        display: 'none',\n      },\n    },\n    spacer: {\n      flexShrink: 1,\n      width: '48',\n      tablet: {\n        display: 'none',\n      },\n    },\n    logoBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      justifyContent: 'center',\n      minWidth: 0,\n      tablet: {\n        flex: 'none',\n      },\n    },\n    logoLink: {\n      borderRadius: '4',\n      color: 'text/on-color',\n      display: 'flex',\n      marginBlockEnd: rem(3),\n    },\n    actions: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      marginInlineStart: 'auto',\n      tablet: {\n        paddingInlineEnd: '32',\n      },\n    },\n    banner: {\n      width: 'full',\n    },\n    control: {\n      ...controlBase,\n      width: '48',\n    },\n    accountAvatar: {\n      borderRadius: 'full',\n      display: 'none',\n      overflow: 'hidden',\n      tablet: {\n        display: 'inline-flex',\n      },\n    },\n    accountIcon: {\n      display: 'block',\n      tablet: {\n        display: 'none',\n      },\n    },\n    navButton: {\n      ...controlBase,\n      paddingBlock: '8',\n      paddingInlineEnd: '8',\n      paddingInlineStart: '12',\n    },\n    navButtonBadge: {\n      alignItems: 'flex-start',\n      background: 'sys/ui/header/bg',\n      borderStartStartRadius: '2',\n      color: 'icon/on-color',\n      display: 'flex',\n      height: '12',\n      insetBlockEnd: '8',\n      insetInlineEnd: '8',\n      overflow: 'hidden',\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '16',\n    },\n    navButtonIcon: {\n      flexShrink: 0,\n      marginBlockStart: rem(-1),\n      marginInlineStart: '1',\n    },\n    badge: {\n      background: 'sys/ui/header/badge/red',\n      borderRadius: 'full',\n      height: '8',\n      insetBlockStart: '12',\n      insetInlineStart: rem(28),\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '8',\n      '&[data-pulse]': {\n        _after: {\n          animation: 'ping',\n          background: 'sys/ui/header/badge/red',\n          borderRadius: 'full',\n          content: '\"\"',\n          inset: 0,\n          opacity: 0.5,\n          position: 'absolute',\n          _motionReduce: {\n            animation: 'none',\n          },\n        },\n      },\n    },\n    indicator: {\n      background: 'sys/ui/header/control/indicator',\n      height: '4',\n      insetBlockEnd: 0,\n      insetInline: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n    },\n    search: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    searchField: {\n      alignItems: 'center',\n      backgroundColor: 'sys/ui/header/bg',\n      backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      display: 'none',\n      gap: '8',\n      height: '40',\n      insetBlockStart: '4',\n      insetInlineEnd: 0,\n      opacity: 0,\n      paddingInlineEnd: '12',\n      paddingInlineStart: '8',\n      position: 'absolute',\n      transitionDuration: 'fast',\n      // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n      // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n      // and flips it at the end, which `opacity` alone could not do.\n      transitionProperty: 'opacity, visibility',\n      transitionTimingFunction: 'ease-out',\n      visibility: 'hidden',\n      width: SEARCH_FIELD_WIDTH,\n      '&:has(input:focus-visible)': {\n        boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n      },\n      _open: {\n        opacity: 1,\n        visibility: 'visible',\n      },\n      _motionReduce: {\n        transitionProperty: 'none',\n      },\n      tablet: {\n        display: 'flex',\n      },\n    },\n    searchButton: {\n      tablet: {\n        _open: {\n          visibility: 'hidden',\n        },\n      },\n    },\n    searchClear: {\n      color: 'icon/on-color',\n      flexShrink: 0,\n    },\n    searchIcon: {\n      color: 'icon/on-color',\n      flexShrink: 0,\n    },\n    searchInput: {\n      background: 'transparent',\n      borderWidth: 0,\n      color: 'text/on-color',\n      flex: 1,\n      minWidth: 0,\n      padding: 0,\n      textStyle: 'body/lg/regular',\n      '&::-webkit-search-cancel-button': { display: 'none' },\n      _focusVisible: {\n        outline: 'none',\n        outlineWidth: 0,\n      },\n      _placeholder: {\n        color: 'text/on-color',\n        opacity: 0.6,\n      },\n    },\n  },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}

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

@@ -91,10 +91,9 @@ declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefiniti
                         insetBlockStart: number;
                         insetInline: number;
                         position: "absolute";
-                        background: "border/inverse";
+                        background: "sys/ui/sidenav/separator";
                         content: "\"\"";
                         height: "1";
-                        opacity: 0.2;
                     };
                 };
             };

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

@@ -12,10 +12,9 @@ var DRAWER_WIDTH = rem(320);
 var WORKSPACE_MENU_WIDTH = rem(360);
 var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
 var hairline = {
-	background: "border/inverse",
+	background: "sys/ui/sidenav/separator",
 	content: "\"\"",
-	height: "1",
-	opacity: .2
+	height: "1"
 };
 var uiSideNavSlotRecipe = defineSlotRecipe({
 	className: "ui-side-nav",

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

@@ -1 +1 @@
-{"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n  background: 'border/inverse',\n  content: '\"\"',\n  height: '1',\n  opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n  className: 'ui-side-nav',\n  slots: [\n    'backdrop',\n    'body',\n    'closeButton',\n    'content',\n    'footer',\n    'footerHeading',\n    'footerSeparator',\n    'item',\n    'itemIcon',\n    'itemIndicator',\n    'itemLabel',\n    'link',\n    'linkIcon',\n    'linkIconBlock',\n    'linkLabel',\n    'linkSecondaryText',\n    'linkStatusDot',\n    'linkTextBlock',\n    'positioner',\n    'root',\n    'workspace',\n    'workspaceChevron',\n    'workspaceControl',\n    'workspaceLabel',\n    'workspaceMenu',\n    'workspaceRoot',\n    'workspaceTextBlock',\n    'workspaceValue',\n  ],\n  base: {\n    root: {\n      background: 'sys/ui/sidenav/bg',\n      display: 'flex',\n      flexDirection: 'column',\n      height: 'full',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n    workspace: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      // Preflight zeroes every border width but not the radius a native button can still draw.\n      borderRadius: 0,\n      color: 'text/on-color',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '16',\n      height: rem(72),\n      minHeight: rem(72),\n      position: 'relative',\n      textAlign: 'start',\n      width: 'full',\n      _after: {\n        ...hairline,\n        insetBlockEnd: 0,\n        insetInline: 0,\n        position: 'absolute',\n      },\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n      },\n    },\n    workspaceRoot: {\n      flexShrink: 0,\n      width: 'full',\n    },\n    workspaceTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    workspaceLabel: {\n      opacity: 0.6,\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    workspaceValue: {\n      opacity: 0.8,\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    workspaceChevron: {\n      color: 'text/on-color',\n      flexShrink: 0,\n      transition: 'rotate 150ms ease-out',\n      _open: {\n        rotate: '180deg',\n      },\n      _motionReduce: {\n        transition: 'none',\n      },\n    },\n    body: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minHeight: 0,\n    },\n    item: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingInlineEnd: '8',\n      paddingInlineStart: '24',\n      position: 'relative',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      _selected: {\n        background: 'sys/ui/sidenav/item/bg-selected',\n        color: 'sys/ui/sidenav/item/fg-active',\n        _hover: {\n          background: 'sys/ui/sidenav/item/bg-hover',\n          _active: {\n            background: 'sys/ui/sidenav/item/bg-active',\n          },\n        },\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    itemIcon: {\n      flexShrink: 0,\n    },\n    itemLabel: {\n      flex: 1,\n      minWidth: 0,\n      textStyle: 'body/lg/semibold',\n      truncate: true,\n    },\n    itemIndicator: {\n      background: 'sys/ui/sidenav/item/indicator',\n      insetBlock: 0,\n      insetInlineStart: 0,\n      position: 'absolute',\n      width: '4',\n    },\n    footer: {\n      display: 'flex',\n      flexDirection: 'column',\n      flexShrink: 0,\n      marginBlockStart: 'auto',\n    },\n    footerSeparator: {\n      flexShrink: 0,\n      paddingBlock: '8',\n      paddingInline: '12',\n      _before: {\n        ...hairline,\n        display: 'block',\n        width: 'full',\n      },\n    },\n    footerHeading: {\n      color: 'text/on-color',\n      opacity: 0.6,\n      paddingBlockEnd: '12',\n      paddingInline: '24',\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    link: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      borderWidth: 0,\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingBlock: '12',\n      paddingInline: '24',\n      textAlign: 'start',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n      '&[data-with-secondary]': {\n        paddingBlock: '8',\n      },\n    },\n    linkTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'center',\n      minWidth: 0,\n      '[data-with-secondary] &': {\n        marginBlock: '2',\n      },\n    },\n    linkLabel: {\n      flex: 1,\n      minWidth: 0,\n      textStyle: 'body/lg/regular',\n      truncate: true,\n      '[data-with-secondary] &': {\n        flex: 'none',\n        textStyle: 'body/md/semibold',\n      },\n    },\n    linkSecondaryText: {\n      textStyle: 'body/sm/regular',\n      truncate: true,\n    },\n    linkIcon: {\n      flexShrink: 0,\n    },\n    linkIconBlock: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    linkStatusDot: {\n      borderRadius: 'full',\n      height: '8',\n      insetBlockEnd: '-2',\n      insetInlineEnd: '-4',\n      position: 'absolute',\n      width: '8',\n      '&[data-status=\"neutral\"]': {\n        background: 'sys/ui/sidenav/badge/neutral',\n      },\n      '&[data-status=\"success\"]': {\n        background: 'sys/ui/sidenav/badge/green',\n      },\n      '&[data-status=\"critical\"]': {\n        background: 'sys/ui/sidenav/badge/red',\n      },\n    },\n    backdrop: {\n      background: 'utilities/overlay',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationDuration: 'slow',\n        animationName: 'fade-in',\n      },\n      _closed: {\n        animationDuration: 'moderate',\n        animationName: 'fade-out',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      // The drawer comes in from the leading edge, unlike every other drawer in the library.\n      justifyContent: 'flex-start',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'sys/ui/sidenav/bg',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      // The close button hangs off the trailing edge, so the panel must not clip it.\n      overflow: 'visible',\n      position: 'relative',\n      width: DRAWER_WIDTH,\n      // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n      // design frame is drawn at. Narrower phones give the panel up, not the button.\n      maxWidth: 'calc(100vw - 55px)',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-left-full, fade-in',\n          _rtl: 'slide-from-right-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-left-full, fade-out',\n          _rtl: 'slide-to-right-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    closeButton: {\n      alignItems: 'center',\n      display: 'flex',\n      height: rem(72),\n      insetBlockStart: 0,\n      insetInlineStart: '100%',\n      paddingInlineStart: '8',\n      position: 'absolute',\n    },\n  },\n\n  variants: {\n    layout: {\n      rail: {\n        root: {\n          paddingBlockEnd: '12',\n          // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n          // somewhere else does not drag it open.\n          transition: 'width 100ms ease-out',\n          transitionDelay: '50ms',\n          width: RAIL_WIDTH_COLLAPSED,\n          _motionReduce: {\n            transition: 'none',\n          },\n          '&[data-expanded]': {\n            transitionDelay: '100ms',\n            width: RAIL_WIDTH_EXPANDED,\n          },\n        },\n        workspace: { ...railRow, paddingInline: '16' },\n        workspaceControl: railRow,\n        workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n        body: { overflowX: 'hidden', overflowY: 'auto', scrollbar: 'hidden' },\n        item: { ...railRow, gap: '24', paddingBlock: '16' },\n        link: { ...railRow, gap: '24' },\n        footerSeparator: {\n          '[data-expanded] &': {\n            paddingInline: '16',\n          },\n        },\n        footerHeading: railRow,\n      },\n      drawer: {\n        root: {\n          overflowX: 'hidden',\n          overflowY: 'auto',\n          width: 'full',\n        },\n        workspaceRoot: {\n          background: 'sys/ui/sidenav/bg',\n          insetBlockStart: 0,\n          position: 'sticky',\n          zIndex: 1,\n        },\n        workspace: {\n          paddingBlock: '16',\n          paddingInlineEnd: '24',\n          paddingInlineStart: '16',\n        },\n        item: { gap: '12', paddingBlock: '16' },\n        link: { gap: '12' },\n        footer: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '12',\n          position: 'relative',\n        },\n        footerHeading: {\n          paddingBlockStart: '12',\n          '&[data-section]': {\n            marginBlockStart: '12',\n            paddingBlockStart: '24',\n            position: 'relative',\n            _before: {\n              ...hairline,\n              insetBlockStart: 0,\n              insetInline: 0,\n              position: 'absolute',\n            },\n          },\n        },\n        footerSeparator: {\n          insetBlockStart: 0,\n          insetInline: 0,\n          paddingBlock: 0,\n          paddingInline: 0,\n          position: 'absolute',\n        },\n        workspaceMenu: {\n          // The panel is the whole screen, so the menu takes the height it can get rather than\n          // the desktop cap, which would leave a short list floating in a tall drawer.\n          maxHeight: 'var(--available-height)',\n          '--select-menu-list-max-height': 'none',\n        },\n        body: { flex: '1 0 auto', paddingBlock: '8' },\n      },\n    },\n  },\n\n  defaultVariants: {\n    layout: 'rail',\n  },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n  background: 'sys/ui/sidenav/separator',\n  content: '\"\"',\n  height: '1',\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n  className: 'ui-side-nav',\n  slots: [\n    'backdrop',\n    'body',\n    'closeButton',\n    'content',\n    'footer',\n    'footerHeading',\n    'footerSeparator',\n    'item',\n    'itemIcon',\n    'itemIndicator',\n    'itemLabel',\n    'link',\n    'linkIcon',\n    'linkIconBlock',\n    'linkLabel',\n    'linkSecondaryText',\n    'linkStatusDot',\n    'linkTextBlock',\n    'positioner',\n    'root',\n    'workspace',\n    'workspaceChevron',\n    'workspaceControl',\n    'workspaceLabel',\n    'workspaceMenu',\n    'workspaceRoot',\n    'workspaceTextBlock',\n    'workspaceValue',\n  ],\n  base: {\n    root: {\n      background: 'sys/ui/sidenav/bg',\n      display: 'flex',\n      flexDirection: 'column',\n      height: 'full',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n    workspace: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      // Preflight zeroes every border width but not the radius a native button can still draw.\n      borderRadius: 0,\n      color: 'text/on-color',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '16',\n      height: rem(72),\n      minHeight: rem(72),\n      position: 'relative',\n      textAlign: 'start',\n      width: 'full',\n      _after: {\n        ...hairline,\n        insetBlockEnd: 0,\n        insetInline: 0,\n        position: 'absolute',\n      },\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n      },\n    },\n    workspaceRoot: {\n      flexShrink: 0,\n      width: 'full',\n    },\n    workspaceTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minWidth: 0,\n    },\n    workspaceLabel: {\n      opacity: 0.6,\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    workspaceValue: {\n      opacity: 0.8,\n      textStyle: 'body/lg/regular',\n      truncate: true,\n    },\n    workspaceChevron: {\n      color: 'text/on-color',\n      flexShrink: 0,\n      transition: 'rotate 150ms ease-out',\n      _open: {\n        rotate: '180deg',\n      },\n      _motionReduce: {\n        transition: 'none',\n      },\n    },\n    body: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      minHeight: 0,\n    },\n    item: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingInlineEnd: '8',\n      paddingInlineStart: '24',\n      position: 'relative',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      _selected: {\n        background: 'sys/ui/sidenav/item/bg-selected',\n        color: 'sys/ui/sidenav/item/fg-active',\n        _hover: {\n          background: 'sys/ui/sidenav/item/bg-hover',\n          _active: {\n            background: 'sys/ui/sidenav/item/bg-active',\n          },\n        },\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n    },\n    itemIcon: {\n      flexShrink: 0,\n    },\n    itemLabel: {\n      flex: 1,\n      minWidth: 0,\n      textStyle: 'body/lg/semibold',\n      truncate: true,\n    },\n    itemIndicator: {\n      background: 'sys/ui/sidenav/item/indicator',\n      insetBlock: 0,\n      insetInlineStart: 0,\n      position: 'absolute',\n      width: '4',\n    },\n    footer: {\n      display: 'flex',\n      flexDirection: 'column',\n      flexShrink: 0,\n      marginBlockStart: 'auto',\n    },\n    footerSeparator: {\n      flexShrink: 0,\n      paddingBlock: '8',\n      paddingInline: '12',\n      _before: {\n        ...hairline,\n        display: 'block',\n        width: 'full',\n      },\n    },\n    footerHeading: {\n      color: 'text/on-color',\n      opacity: 0.6,\n      paddingBlockEnd: '12',\n      paddingInline: '24',\n      textStyle: 'heading/h6',\n      textTransform: 'uppercase',\n    },\n    link: {\n      alignItems: 'center',\n      background: 'sys/ui/sidenav/item/bg',\n      borderWidth: 0,\n      color: 'sys/ui/sidenav/item/fg',\n      cursor: 'pointer',\n      display: 'flex',\n      flexShrink: 0,\n      overflow: 'hidden',\n      paddingBlock: '12',\n      paddingInline: '24',\n      textAlign: 'start',\n      textDecoration: 'none',\n      width: 'full',\n      _hover: {\n        background: 'sys/ui/sidenav/item/bg-hover',\n        color: 'sys/ui/sidenav/item/fg-hover',\n        _active: {\n          background: 'sys/ui/sidenav/item/bg-active',\n        },\n      },\n      _active: {\n        background: 'sys/ui/sidenav/item/bg-active',\n        color: 'sys/ui/sidenav/item/fg-active',\n      },\n      _focusVisible: {\n        outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n      },\n      '&[data-with-secondary]': {\n        paddingBlock: '8',\n      },\n    },\n    linkTextBlock: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'center',\n      minWidth: 0,\n      '[data-with-secondary] &': {\n        marginBlock: '2',\n      },\n    },\n    linkLabel: {\n      flex: 1,\n      minWidth: 0,\n      textStyle: 'body/lg/regular',\n      truncate: true,\n      '[data-with-secondary] &': {\n        flex: 'none',\n        textStyle: 'body/md/semibold',\n      },\n    },\n    linkSecondaryText: {\n      textStyle: 'body/sm/regular',\n      truncate: true,\n    },\n    linkIcon: {\n      flexShrink: 0,\n    },\n    linkIconBlock: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    linkStatusDot: {\n      borderRadius: 'full',\n      height: '8',\n      insetBlockEnd: '-2',\n      insetInlineEnd: '-4',\n      position: 'absolute',\n      width: '8',\n      '&[data-status=\"neutral\"]': {\n        background: 'sys/ui/sidenav/badge/neutral',\n      },\n      '&[data-status=\"success\"]': {\n        background: 'sys/ui/sidenav/badge/green',\n      },\n      '&[data-status=\"critical\"]': {\n        background: 'sys/ui/sidenav/badge/red',\n      },\n    },\n    backdrop: {\n      background: 'utilities/overlay',\n      inset: 0,\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n      _open: {\n        animationDuration: 'slow',\n        animationName: 'fade-in',\n      },\n      _closed: {\n        animationDuration: 'moderate',\n        animationName: 'fade-out',\n      },\n    },\n    positioner: {\n      alignItems: 'stretch',\n      display: 'flex',\n      inset: 0,\n      // The drawer comes in from the leading edge, unlike every other drawer in the library.\n      justifyContent: 'flex-start',\n      overscrollBehaviorY: 'none',\n      position: 'fixed',\n      zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n    },\n    content: {\n      background: 'sys/ui/sidenav/bg',\n      boxShadow: 'elevation/lg',\n      display: 'flex',\n      flexDirection: 'column',\n      maxHeight: '100dvh',\n      outline: 'none',\n      // The close button hangs off the trailing edge, so the panel must not clip it.\n      overflow: 'visible',\n      position: 'relative',\n      width: DRAWER_WIDTH,\n      // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n      // design frame is drawn at. Narrower phones give the panel up, not the button.\n      maxWidth: 'calc(100vw - 55px)',\n      _open: {\n        animationDuration: 'slowest',\n        animationName: {\n          base: 'slide-from-left-full, fade-in',\n          _rtl: 'slide-from-right-full, fade-in',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n      _closed: {\n        animationDuration: 'slower',\n        animationName: {\n          base: 'slide-to-left-full, fade-out',\n          _rtl: 'slide-to-right-full, fade-out',\n        },\n        animationTimingFunction: 'ease-in-smooth',\n      },\n    },\n    closeButton: {\n      alignItems: 'center',\n      display: 'flex',\n      height: rem(72),\n      insetBlockStart: 0,\n      insetInlineStart: '100%',\n      paddingInlineStart: '8',\n      position: 'absolute',\n    },\n  },\n\n  variants: {\n    layout: {\n      rail: {\n        root: {\n          paddingBlockEnd: '12',\n          // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n          // somewhere else does not drag it open.\n          transition: 'width 100ms ease-out',\n          transitionDelay: '50ms',\n          width: RAIL_WIDTH_COLLAPSED,\n          _motionReduce: {\n            transition: 'none',\n          },\n          '&[data-expanded]': {\n            transitionDelay: '100ms',\n            width: RAIL_WIDTH_EXPANDED,\n          },\n        },\n        workspace: { ...railRow, paddingInline: '16' },\n        workspaceControl: railRow,\n        workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n        body: { overflowX: 'hidden', overflowY: 'auto', scrollbar: 'hidden' },\n        item: { ...railRow, gap: '24', paddingBlock: '16' },\n        link: { ...railRow, gap: '24' },\n        footerSeparator: {\n          '[data-expanded] &': {\n            paddingInline: '16',\n          },\n        },\n        footerHeading: railRow,\n      },\n      drawer: {\n        root: {\n          overflowX: 'hidden',\n          overflowY: 'auto',\n          width: 'full',\n        },\n        workspaceRoot: {\n          background: 'sys/ui/sidenav/bg',\n          insetBlockStart: 0,\n          position: 'sticky',\n          zIndex: 1,\n        },\n        workspace: {\n          paddingBlock: '16',\n          paddingInlineEnd: '24',\n          paddingInlineStart: '16',\n        },\n        item: { gap: '12', paddingBlock: '16' },\n        link: { gap: '12' },\n        footer: {\n          paddingBlockEnd: '16',\n          paddingBlockStart: '12',\n          position: 'relative',\n        },\n        footerHeading: {\n          paddingBlockStart: '12',\n          '&[data-section]': {\n            marginBlockStart: '12',\n            paddingBlockStart: '24',\n            position: 'relative',\n            _before: {\n              ...hairline,\n              insetBlockStart: 0,\n              insetInline: 0,\n              position: 'absolute',\n            },\n          },\n        },\n        footerSeparator: {\n          insetBlockStart: 0,\n          insetInline: 0,\n          paddingBlock: 0,\n          paddingInline: 0,\n          position: 'absolute',\n        },\n        workspaceMenu: {\n          // The panel is the whole screen, so the menu takes the height it can get rather than\n          // the desktop cap, which would leave a short list floating in a tall drawer.\n          maxHeight: 'var(--available-height)',\n          '--select-menu-list-max-height': 'none',\n        },\n        body: { flex: '1 0 auto', paddingBlock: '8' },\n      },\n    },\n  },\n\n  defaultVariants: {\n    layout: 'rail',\n  },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}

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

@@ -609,25 +609,10 @@ declare const slotRecipes: {
         device: {
             mobile: {
                 content: {
-                    minWidth: number;
                     boxShadow: "none";
                     paddingBlock: "16";
                     paddingInline: "16";
                 };
-                view: {
-                    gap: "16";
-                };
-                tableHeader: {
-                    height: "40";
-                    maxWidth: "none";
-                    minWidth: number;
-                    textStyle: "body/lg/regular";
-                    width: "auto";
-                };
-                tableCellTrigger: {
-                    height: "40";
-                    textStyle: "body/lg/regular";
-                };
             };
         };
     }>;
@@ -718,91 +703,6 @@ declare const slotRecipes: {
                     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;
-            };
         };
     }>;
     dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "scrollBody" | "scrollArea" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop" | "stepDescription" | "stepTitle" | "stepTitleGroup", {
@@ -1184,42 +1084,6 @@ declare const slotRecipes: {
             };
         };
     }>;
-    filter: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "mobileListCheckbox" | "mobileListCheck" | "patternResults" | "patternResultsLabel" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
-        pageLayout: {
-            capped: {
-                root: {
-                    borderBlockEndWidth: "1";
-                    borderColor: "border/regular";
-                    paddingInline: {
-                        base: "16";
-                        tablet: "32";
-                    };
-                };
-            };
-            full: {
-                root: {
-                    borderBlockEndWidth: "1";
-                    borderColor: "border/regular";
-                    paddingInlineEnd: {
-                        base: "16";
-                        tablet: "32";
-                    };
-                    paddingInlineStart: {
-                        base: "16";
-                        tablet: "24";
-                    };
-                };
-            };
-        };
-        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", {
         size: {
@@ -1280,27 +1144,6 @@ declare const slotRecipes: {
             };
         };
     }>;
-    listbox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "root" | "item" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "empty", {
-        size: {
-            md: {};
-            lg: {
-                content: {
-                    maxHeight: "none";
-                    paddingBlock: "8";
-                };
-                item: {
-                    minHeight: "48";
-                    textStyle: "body/lg/regular";
-                    _selected: {
-                        textStyle: "body/lg/regular";
-                    };
-                };
-                empty: {
-                    textStyle: "body/lg/regular";
-                };
-            };
-        };
-    }>;
     markdown: import('@chakra-ui/react').SlotRecipeDefinition<"blockquote" | "root", {
         size: {
             sm: {
@@ -3267,7 +3110,7 @@ declare const slotRecipes: {
             md: {};
         };
     }>;
-    tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
+    tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
         colorVariant: {
             neutral: {
                 root: {
@@ -3761,6 +3604,7 @@ declare const slotRecipes: {
             };
         };
     }>;
+    uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
     uiSideNav: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
         layout: {
             rail: {
@@ -3849,10 +3693,9 @@ declare const slotRecipes: {
                             insetBlockStart: number;
                             insetInline: number;
                             position: "absolute";
-                            background: "border/inverse";
+                            background: "sys/ui/sidenav/separator";
                             content: "\"\"";
                             height: "1";
-                            opacity: 0.2;
                         };
                     };
                 };

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

@@ -1,5 +1,6 @@
 import avatarSlotRecipe from "./Avatar.recipe.js";
 import numberInputSlotRecipe from "./NumberInput.recipe.js";
+import uiHeaderSlotRecipe from "./UIHeader.recipe.js";
 import uiSideNavSlotRecipe from "./UISideNav.recipe.js";
 import accordionSlotRecipe from "./Accordion.recipe.js";
 import actionBarSlotRecipe from "./ActionBar.recipe.js";
@@ -22,13 +23,11 @@ import expandableCardSlotRecipe from "./ExpandableCard.recipe.js";
 import fieldSlotRecipe from "./Field.recipe.js";
 import fieldsetSlotRecipe from "./Fieldset.recipe.js";
 import fileUploadSlotRecipe from "./FileUpload.recipe.js";
-import filterSlotRecipe from "./Filter.recipe.js";
 import groupHeadingRecipe from "./GroupHeading.recipe.js";
 import imageCropperSlotRecipe from "./ImageCropper.recipe.js";
 import inlineLoadingRecipe from "./InlineLoading.recipe.js";
 import labeledDataSlotRecipe from "./LabeledData.recipe.js";
 import listSlotRecipe from "./List.recipe.js";
-import listboxSlotRecipe from "./Listbox.recipe.js";
 import markdownSlotRecipe from "./Markdown.recipe.js";
 import markdownCardSlotRecipe from "./MarkdownCard.recipe.js";
 import menuSlotRecipe from "./Menu.recipe.js";
@@ -89,11 +88,9 @@ var slotRecipes = {
 	groupHeading: groupHeadingRecipe,
 	fieldset: fieldsetSlotRecipe,
 	fileUpload: fileUploadSlotRecipe,
-	filter: filterSlotRecipe,
 	imageCropper: imageCropperSlotRecipe,
 	inlineLoading: inlineLoadingRecipe,
 	list: listSlotRecipe,
-	listbox: listboxSlotRecipe,
 	markdown: markdownSlotRecipe,
 	markdownCard: markdownCardSlotRecipe,
 	menu: menuSlotRecipe,
@@ -133,6 +130,7 @@ var slotRecipes = {
 	tooltip: tooltipSlotRecipe,
 	tour: tourSlotRecipe,
 	treeView: treeViewSlotRecipe,
+	uiHeader: uiHeaderSlotRecipe,
 	uiSideNav: uiSideNavSlotRecipe
 };
 //#endregion