npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.481-beta.3099 → 0.3.481-beta.3103 - Mend

@bitrise/bitkit-v2 0.3.481-beta.3099 → 0.3.481-beta.3103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/dist/theme/slot-recipes/DatePicker.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n className: 'datePicker',\n slots: [...datePickerAnatomy.keys(), 'months'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n control: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n months: {\n display: 'flex',\n gap: '24',\n },\n positioner: {\n position: 'absolute',\n },\n content: {\n backgroundColor: 'background/primary',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n minWidth: rem(312),\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '16',\n // A popover layer, so the month and year menus it opens (on the select layer) stay above it.\n zIndex: 'calc({zIndex.popover} + var(--layer-index, 0))',\n },\n view: {\n display: 'flex',\n flexDirection: 'column',\n gap: '24',\n },\n viewControl: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n table: {\n width: 'full',\n borderCollapse: 'collapse',\n borderSpacing: 0,\n tableLayout: 'fixed',\n },\n tableBody: {\n '& > tr:first-child > td': {\n paddingTop: '8',\n },\n },\n tableRow: {\n display: 'table-row',\n },\n tableHeader: {\n color: 'text/tertiary',\n textAlign: 'center',\n textStyle: 'body/md/regular',\n width: '40',\n minWidth: '40',\n maxWidth: '40',\n },\n tableCell: {\n textAlign: 'center',\n paddingBlock: '2',\n },\n tableCellTrigger: {\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'center',\n width: '100%',\n height: '32',\n color: 'text/primary',\n cursor: 'pointer',\n textStyle: 'body/md/regular',\n\n '&:hover:not([data-selected])': {\n backgroundColor: 'interactive/moderate',\n borderRadius: '0.5rem',\n },\n\n // The focus ring follows the day's rounded shape rather than the square cell.\n _focusVisible: {\n borderRadius: '0.5rem',\n },\n\n '&[data-unavailable]': {\n color: 'text/disabled',\n cursor: 'default',\n '&:hover, &[data-outside-range]:hover': {\n backgroundColor: 'transparent',\n color: 'text/disabled',\n },\n },\n\n '&[data-outside-range]': {\n color: 'text/tertiary',\n },\n\n '&[data-outside-range][data-unavailable]': {\n color: 'text/disabled',\n },\n\n '&[data-outside-range][data-in-range]': {\n backgroundColor: 'interactive/moderate',\n color: 'interactive/bold',\n },\n\n '&[data-outside-range][data-in-range]:hover': {\n backgroundColor: 'interactive/muted',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-hover-range-start]:hover': {\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'text/tertiary',\n backgroundColor: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-hover-range-end]:hover': {\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'text/tertiary',\n backgroundColor: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-in-range][data-range-start]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range][data-in-range][data-range-end]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range]:hover': {\n backgroundColor: 'interactive/subtle',\n borderRadius: '0.5rem',\n color: 'text/tertiary',\n },\n\n '&[data-in-range]': {\n backgroundColor: 'interactive/moderate',\n color: 'text/primary',\n },\n\n '&[data-in-range]:hover': {\n backgroundColor: 'interactive/muted',\n borderRadius: 0,\n },\n\n // The range being previewed while the pointer picks its end: lighter than the selected range.\n '&[data-in-hover-range]:not([data-outside-range], [data-selected])': {\n backgroundColor: 'interactive/minimal',\n borderRadius: 0,\n color: 'text/primary',\n },\n\n '&[data-hover-range-start]:not([data-outside-range], [data-selected])': {\n backgroundColor: 'interactive/moderate',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'text/primary',\n },\n\n '&[data-hover-range-end]:not([data-outside-range], [data-selected])': {\n backgroundColor: 'interactive/moderate',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'text/primary',\n },\n\n '&[data-hover-range-start][data-hover-range-end]:not([data-outside-range], [data-selected])': {\n borderRadius: '0.5rem',\n },\n\n '&[data-today]': {\n color: 'text/selected',\n },\n\n '&[data-today][data-unavailable]': {\n color: 'text/disabled',\n },\n\n '&[data-today]:hover:not([data-selected], [data-unavailable])': {\n backgroundColor: 'interactive/subtle',\n borderRadius: 0,\n },\n\n '&[data-selected]': {\n backgroundColor: 'interactive/base',\n color: 'text/on-color',\n borderRadius: '0.5rem',\n },\n\n '&[data-selected]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem',\n color: 'interactive/moderate',\n },\n\n // A selected day shown in a neighbouring month stays dimmed (Figma's `style=dimmed, selected`).\n '&[data-outside-range][data-selected]:not([data-range-start], [data-range-end])': {\n backgroundColor: 'interactive/subtle',\n borderRadius: '0.5rem',\n color: 'text/tertiary',\n },\n\n '&[data-range-start]': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'text/on-color',\n },\n\n '&[data-range-end]': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'text/on-color',\n },\n\n '&[data-range-start]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/moderate',\n },\n\n '&[data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/moderate',\n },\n\n '&[data-range-start][data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n color: 'interactive/moderate',\n },\n\n '&[data-today] > span': {\n border: '1px solid',\n borderColor: 'interactive/base',\n },\n\n '&[data-today][data-selected] > span': {\n border: '1px solid',\n borderColor: 'interactive/moderate',\n },\n\n '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n borderColor: 'interactive/moderate',\n },\n\n '& > span': {\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '8',\n display: 'flex',\n flex: 1,\n },\n },\n },\n variants: {\n layout: {\n '1-month': {\n content: {\n width: '17.5rem',\n },\n },\n '2-month': {\n content: {\n width: '38.5rem',\n },\n },\n },\n showOutsideDays: {\n false: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'hidden',\n },\n },\n },\n true: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'visible',\n },\n },\n },\n },\n device: {\n mobile: {\n content: {\n minWidth: 0,\n boxShadow: 'none',\n paddingBlock: '16',\n paddingInline: '16',\n },\n view: {\n gap: '16',\n },\n tableHeader: {\n height: '40',\n maxWidth: 'none',\n minWidth: 0,\n textStyle: 'body/lg/regular',\n width: 'auto',\n },\n tableCellTrigger: {\n height: '40',\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n // A mobile calendar fills the screen instead of keeping the popover's fixed width.\n compoundVariants: [\n {\n device: 'mobile',\n layout: '1-month',\n css: {\n content: {\n width: '100%',\n },\n },\n },\n ],\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n className: 'datePicker',\n slots: [...datePickerAnatomy.keys(), 'months'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n control: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n months: {\n display: 'flex',\n gap: '24',\n },\n positioner: {\n position: 'absolute',\n },\n content: {\n backgroundColor: 'background/primary',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n minWidth: rem(312),\n paddingBlock: '24',\n paddingInline: '16',\n zIndex: 'select',\n },\n view: {\n display: 'flex',\n flexDirection: 'column',\n gap: '16',\n },\n viewControl: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n table: {\n width: 'full',\n borderCollapse: 'collapse',\n borderSpacing: 0,\n tableLayout: 'fixed',\n },\n tableBody: {\n '& > tr:first-child > td': {\n paddingTop: '8',\n },\n },\n tableRow: {\n display: 'table-row',\n },\n tableHeader: {\n color: 'text/tertiary',\n textAlign: 'center',\n textStyle: 'body/md/regular',\n width: '40',\n minWidth: '40',\n maxWidth: '40',\n },\n tableCell: {\n textAlign: 'center',\n paddingBlock: '2',\n },\n tableCellTrigger: {\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'center',\n width: '100%',\n height: '32',\n color: 'text/primary',\n cursor: 'pointer',\n textStyle: 'body/md/regular',\n\n '&:hover:not([data-selected])': {\n backgroundColor: 'interactive/moderate',\n borderRadius: '0.5rem',\n },\n\n '&[data-unavailable]': {\n borderRadius: 0,\n backgroundColor: 'interactive/disabled',\n color: 'text/disabled',\n cursor: 'default',\n '&:hover, &[data-outside-range]:hover': {\n borderRadius: 0,\n backgroundColor: 'interactive/disabled',\n color: 'text/disabled',\n },\n },\n\n '&[data-outside-range]': {\n color: 'text/tertiary',\n },\n\n '&[data-outside-range][data-unavailable]': {\n color: 'text/disabled',\n },\n\n '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n backgroundColor: 'interactive/moderate',\n color: 'interactive/bold',\n },\n\n '&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-hover-range-start]:hover': {\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/subtle',\n backgroundColor: 'interactive/highlight',\n },\n\n '&[data-outside-range][data-hover-range-end]:hover': {\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/subtle',\n backgroundColor: 'interactive/highlight',\n },\n\n '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-in-range][data-range-start]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range][data-in-range][data-range-end]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range]:hover': {\n backgroundColor: 'transparent',\n color: 'text/tertiary',\n },\n\n '&[data-in-range]': {\n backgroundColor: 'interactive/moderate',\n color: 'text/primary',\n },\n\n '&[data-in-range]:hover': {\n backgroundColor: 'interactive/muted',\n borderRadius: 0,\n },\n\n '&[data-selected]': {\n backgroundColor: 'interactive/base',\n color: 'text/on-color',\n borderRadius: '0.5rem',\n },\n\n '&[data-selected]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem',\n color: 'interactive/moderate',\n },\n\n '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'text/on-color',\n },\n\n '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'text/on-color',\n },\n\n '&[data-range-start]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/moderate',\n },\n\n '&[data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/moderate',\n },\n\n '&[data-range-start][data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n color: 'interactive/moderate',\n },\n\n '&[data-hover-range-start][data-hover-range-end]': {\n borderRadius: '0.5rem',\n },\n\n '&[data-today] > span': {\n border: '1px solid',\n borderColor: 'interactive/base',\n },\n\n '&[data-today][data-selected] > span': {\n border: '1px solid',\n borderColor: 'interactive/moderate',\n },\n\n '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n borderColor: 'interactive/moderate',\n },\n\n '& > span': {\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '8',\n display: 'flex',\n flex: 1,\n },\n },\n },\n variants: {\n layout: {\n '1-month': {\n content: {\n width: '17.5rem',\n },\n },\n '2-month': {\n content: {\n width: '38.5rem',\n },\n },\n },\n showOutsideDays: {\n false: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'hidden',\n },\n },\n },\n true: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'visible',\n },\n },\n },\n },\n device: {\n mobile: {\n content: {\n boxShadow: 'none',\n paddingBlock: '16',\n paddingInline: '16',\n },\n },\n },\n },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

package/dist/theme/slot-recipes/Tag.recipe.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare const tagSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
+declare const tagSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
     colorVariant: {
         neutral: {
             root: {

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

@@ -0,0 +1,14 @@
+/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
+export declare const uiHeaderHeightPx = 48;
+/**
+ * The height of the header's bar. A page that pins the header reserves this much room for it, and
+ * anything anchored under the header starts here: a drawer's backdrop and positioner, a side
+ * navigation's `insetBlockStart`.
+ *
+ * It is the bar alone. A `banner` sits below it inside the header, and its height is the
+ * consumer's content, so a pinned header carrying one is taller than this — measure it rather than
+ * assume it.
+ */
+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 ADDED Viewed

@@ -0,0 +1,253 @@
+import { colorVar, rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/UIHeader.recipe.ts
+/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
+var uiHeaderHeightPx = 48;
+/**
+* The height of the header's bar. A page that pins the header reserves this much room for it, and
+* anything anchored under the header starts here: a drawer's backdrop and positioner, a side
+* navigation's `insetBlockStart`.
+*
+* It is the bar alone. A `banner` sits below it inside the header, and its height is the
+* consumer's content, so a pinned header carrying one is taller than this — measure it rather than
+* assume it.
+*/
+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 ADDED Viewed

@@ -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\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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",