@bitrise/bitkit-v2 0.3.481-beta.3059 → 0.3.481-beta.3061

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

@@ -0,0 +1,4 @@
+export declare const uiHeaderHeightPx = 48;
+export declare const uiHeaderHeight: `${number}rem`;
+declare const uiHeaderSlotRecipe: 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">>;
+export default uiHeaderSlotRecipe;

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

@@ -0,0 +1,241 @@
+import { colorVar, rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+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-active" }
+		},
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	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 };
+
+//# 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-active',\n      },\n    },\n    _active: {\n      background: 'sys/ui/header/control/bg-active',\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/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: {

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

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

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

package/dist/theme/themeUtils.d.ts

@@ -8,6 +8,12 @@ export declare function withSlashes(object: Record<string, any>): Record<string,
  * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
  */
 export declare const rem: (input: number) => `${number}rem`;
+/**
+ * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
+ * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
+ * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
+ */
+export declare const colorVar: (token: string) => string;
 /**
  * The colour tokens under the given prefixes, for props that must take a semantic token.
  *

package/dist/theme/themeUtils.js

@@ -29,7 +29,13 @@ function withSlashes(object) {
 var rem = (input) => {
 	return `${input / 16}rem`;
 };
+/**
+* A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`
+* reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`
+* as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.
+*/
+var colorVar = (token) => `var(--colors-${token.replace(/\//g, "\\/")})`;
 //#endregion
-export { flattenTokens, rem, withSlashes };
+export { colorVar, flattenTokens, rem, withSlashes };
 
 //# sourceMappingURL=themeUtils.js.map

package/dist/theme/themeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n  return `${input / 16}rem`;\n};\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n  ? string\n  : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}
+{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n  return `${input / 16}rem`;\n};\n\n/**\n * A colour token as the raw CSS variable Chakra compiles it to, for the places a `{colors.…}`\n * reference cannot go: inside a compound value like a gradient, Chakra reads the token's first `/`\n * as its colour-mix opacity modifier, so the slashes have to be escaped by hand instead.\n */\nexport const colorVar = (token: string): string => `var(--colors-${token.replace(/\\//g, '\\\\/')})`;\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n  ? string\n  : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB;;;;;;AAOA,IAAa,YAAY,UAA0B,gBAAgB,MAAM,QAAQ,OAAO,KAAK,EAAE"}

package/dist/utilities/BitkitPortalContext.js

@@ -1,8 +1,7 @@
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 //#region lib/utilities/BitkitPortalContext.ts
 var BitkitPortalContext = createContext({ disablePortal: false });
-var usePortalContext = () => useContext(BitkitPortalContext);
 //#endregion
-export { BitkitPortalContext as default, usePortalContext };
+export { BitkitPortalContext as default };
 
 //# sourceMappingURL=BitkitPortalContext.js.map

package/dist/utilities/BitkitPortalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPortalContext.js","names":[],"sources":["../../lib/utilities/BitkitPortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst BitkitPortalContext = createContext({ disablePortal: false });\n\nexport const usePortalContext = () => useContext(BitkitPortalContext);\n\nexport default BitkitPortalContext;\n"],"mappings":";;AAEA,IAAM,sBAAsB,cAAc,EAAE,eAAe,MAAM,CAAC;AAElE,IAAa,yBAAyB,WAAW,mBAAmB"}
+{"version":3,"file":"BitkitPortalContext.js","names":[],"sources":["../../lib/utilities/BitkitPortalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst BitkitPortalContext = createContext({ disablePortal: false });\n\nexport const usePortalContext = () => useContext(BitkitPortalContext);\n\nexport default BitkitPortalContext;\n"],"mappings":";;AAEA,IAAM,sBAAsB,cAAc,EAAE,eAAe,MAAM,CAAC"}