npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.481-beta.3057 → 0.3.481-beta.3061 - Mend

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

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 (136) hide show

package/dist/theme/recipes/UIHeaderButton.recipe.js ADDED Viewed

@@ -0,0 +1,103 @@
+import { rem } from "../themeUtils.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/UIHeaderButton.recipe.ts
+var borderColors = (variant) => variant === "secondary" ? {
+	base: "sys/ui/header/button/secondary/border",
+	disabled: "sys/ui/header/button/secondary/border-disabled"
+} : {
+	base: "transparent",
+	disabled: "transparent"
+};
+var variantStyles = (variant) => {
+	const border = borderColors(variant);
+	return {
+		background: `sys/ui/header/button/${variant}/bg`,
+		borderColor: border.base,
+		color: `sys/ui/header/button/${variant}/fg`,
+		_hover: {
+			background: `sys/ui/header/button/${variant}/bg-hover`,
+			_active: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_active: { background: `sys/ui/header/button/${variant}/bg-active` },
+		_selected: {
+			background: `sys/ui/header/button/${variant}/bg-active`,
+			_hover: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_disabled: {
+			background: `sys/ui/header/button/${variant}/bg-disabled`,
+			borderColor: border.disabled,
+			color: `sys/ui/header/button/${variant}/fg-disabled`,
+			cursor: "not-allowed"
+		}
+	};
+};
+var badgeDot = {
+	background: "sys/ui/header/badge/indigo",
+	borderRadius: "full",
+	content: "\"\"",
+	pointerEvents: "none",
+	position: "absolute"
+};
+var badgeStyles = {
+	_before: {
+		...badgeDot,
+		height: "8",
+		insetBlockStart: "-4",
+		insetInlineEnd: "-4",
+		width: "8"
+	},
+	_after: {
+		...badgeDot,
+		height: rem(10),
+		insetBlockStart: rem(-5),
+		insetInlineEnd: rem(-5),
+		opacity: .5,
+		width: rem(10)
+	}
+};
+var uiHeaderButtonRecipe = defineRecipe({
+	className: "ui-header-button",
+	base: {
+		alignItems: "center",
+		borderRadius: "4",
+		borderStyle: "solid",
+		borderWidth: "1",
+		cursor: "pointer",
+		display: "inline-flex",
+		flexShrink: 0,
+		gap: "4",
+		height: "32",
+		justifyContent: "center",
+		minWidth: "48",
+		paddingInline: "8",
+		position: "relative",
+		textDecoration: "none",
+		textStyle: "comp/button/sm",
+		whiteSpace: "nowrap",
+		"&:not(:last-child)": { marginInlineEnd: "8" },
+		_disabled: { cursor: "not-allowed" }
+	},
+	variants: {
+		variant: {
+			primary: variantStyles("primary"),
+			secondary: variantStyles("secondary"),
+			tertiary: variantStyles("tertiary")
+		},
+		badge: {
+			idle: badgeStyles,
+			pulse: {
+				...badgeStyles,
+				_after: {
+					...badgeStyles._after,
+					animation: "ping",
+					_motionReduce: { animation: "none" }
+				}
+			}
+		}
+	},
+	defaultVariants: { variant: "primary" }
+});
+//#endregion
+export { uiHeaderButtonRecipe as default };
+//# sourceMappingURL=UIHeaderButton.recipe.js.map

package/dist/theme/recipes/UIHeaderButton.recipe.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UIHeaderButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/UIHeaderButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\ntype Variant = 'primary' | 'secondary' | 'tertiary';\n\nconst borderColors = (variant: Variant) =>\n variant === 'secondary'\n ? { base: 'sys/ui/header/button/secondary/border', disabled: 'sys/ui/header/button/secondary/border-disabled' }\n : { base: 'transparent', disabled: 'transparent' };\n\nconst variantStyles = (variant: Variant): SystemStyleObject => {\n const border = borderColors(variant);\n\n return {\n background: `sys/ui/header/button/${variant}/bg`,\n borderColor: border.base,\n color: `sys/ui/header/button/${variant}/fg`,\n // `_hover`/`_active` compile to `:not(:disabled, [data-disabled])`, so they never match a\n // disabled button and `_disabled` wins without `!important`.\n _hover: {\n background: `sys/ui/header/button/${variant}/bg-hover`,\n // Repeat active under hover so clicking while hovering keeps the active styles.\n _active: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n },\n _active: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n // A button that holds a panel open stays pressed while the panel is, hover included — letting\n // hover lighten it would read as the panel having closed.\n _selected: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n _hover: {\n background: `sys/ui/header/button/${variant}/bg-active`,\n },\n },\n _disabled: {\n background: `sys/ui/header/button/${variant}/bg-disabled`,\n borderColor: border.disabled,\n color: `sys/ui/header/button/${variant}/fg-disabled`,\n cursor: 'not-allowed',\n },\n };\n};\n\nconst badgeDot: SystemStyleObject = {\n background: 'sys/ui/header/badge/indigo',\n borderRadius: 'full',\n content: '\"\"',\n pointerEvents: 'none',\n position: 'absolute',\n};\n\nconst badgeStyles: SystemStyleObject = {\n _before: {\n ...badgeDot,\n height: '8',\n insetBlockStart: '-4',\n insetInlineEnd: '-4',\n width: '8',\n },\n _after: {\n ...badgeDot,\n height: rem(10),\n insetBlockStart: rem(-5),\n insetInlineEnd: rem(-5),\n opacity: 0.5,\n width: rem(10),\n },\n};\n\nconst uiHeaderButtonRecipe = defineRecipe({\n className: 'ui-header-button',\n base: {\n alignItems: 'center',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n cursor: 'pointer',\n display: 'inline-flex',\n flexShrink: 0,\n gap: '4',\n height: '32',\n justifyContent: 'center',\n minWidth: '48',\n paddingInline: '8',\n position: 'relative',\n textDecoration: 'none',\n textStyle: 'comp/button/sm',\n whiteSpace: 'nowrap',\n '&:not(:last-child)': {\n marginInlineEnd: '8',\n },\n _disabled: {\n cursor: 'not-allowed',\n },\n },\n variants: {\n variant: {\n primary: variantStyles('primary'),\n secondary: variantStyles('secondary'),\n tertiary: variantStyles('tertiary'),\n },\n badge: {\n idle: badgeStyles,\n pulse: {\n ...badgeStyles,\n _after: {\n ...badgeStyles._after,\n // The system's own ping: the ring expands past the dot and fades out.\n animation: 'ping',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n },\n defaultVariants: {\n variant: 'primary',\n },\n});\n\nexport default uiHeaderButtonRecipe;\n"],"mappings":";;;AAMA,IAAM,gBAAgB,YACpB,YAAY,cACR;CAAE,MAAM;CAAyC,UAAU;AAAiD,IAC5G;CAAE,MAAM;CAAe,UAAU;AAAc;AAErD,IAAM,iBAAiB,YAAwC;CAC7D,MAAM,SAAS,aAAa,OAAO;CAEnC,OAAO;EACL,YAAY,wBAAwB,QAAQ;EAC5C,aAAa,OAAO;EACpB,OAAO,wBAAwB,QAAQ;EAGvC,QAAQ;GACN,YAAY,wBAAwB,QAAQ;GAE5C,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EAGA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,QAAQ,EACN,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,aAAa,OAAO;GACpB,OAAO,wBAAwB,QAAQ;GACvC,QAAQ;EACV;CACF;AACF;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,cAAc;CACd,SAAS;CACT,eAAe;CACf,UAAU;AACZ;AAEA,IAAM,cAAiC;CACrC,SAAS;EACP,GAAG;EACH,QAAQ;EACR,iBAAiB;EACjB,gBAAgB;EAChB,OAAO;CACT;CACA,QAAQ;EACN,GAAG;EACH,QAAQ,IAAI,EAAE;EACd,iBAAiB,IAAI,EAAE;EACvB,gBAAgB,IAAI,EAAE;EACtB,SAAS;EACT,OAAO,IAAI,EAAE;CACf;AACF;AAEA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,YAAY;EACZ,cAAc;EACd,aAAa;EACb,aAAa;EACb,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,sBAAsB,EACpB,iBAAiB,IACnB;EACA,WAAW,EACT,QAAQ,cACV;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,cAAc,SAAS;GAChC,WAAW,cAAc,WAAW;GACpC,UAAU,cAAc,UAAU;EACpC;EACA,OAAO;GACL,MAAM;GACN,OAAO;IACL,GAAG;IACH,QAAQ;KACN,GAAG,YAAY;KAEf,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}

package/dist/theme/recipes/index.js CHANGED Viewed

@@ -15,6 +15,7 @@ import separatorRecipe from "./Separator.recipe.js";
 import skeletonRecipe from "./Skeleton.recipe.js";
 import spinnerRecipe from "./Spinner.recipe.js";
 import toggleButtonRecipe from "./ToggleButton.recipe.js";
+import uiHeaderButtonRecipe from "./UIHeaderButton.recipe.js";
 //#region lib/theme/recipes/index.ts
 var recipes = {
 	badge: badgeRecipe,
@@ -33,7 +34,8 @@ var recipes = {
 	skeleton: skeletonRecipe,
 	spinner: spinnerRecipe,
 	textarea: textareaRecipe,
-	toggleButton: toggleButtonRecipe
+	toggleButton: toggleButtonRecipe,
+	uiHeaderButton: uiHeaderButtonRecipe
 };
 //#endregion
 export { recipes as default };

package/dist/theme/recipes/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\n\nconst recipes = {\n badge: badgeRecipe,\n button: buttonRecipe,\n closeButton: closeButtonRecipe,\n controlButton: controlButtonRecipe,\n colorButton: colorButtonRecipe,\n definitionTooltip: definitionTooltipRecipe,\n icon: iconRecipe,\n input: inputRecipe,\n inputAddon: inputAddonRecipe,\n link: linkRecipe,\n linkButton: linkButtonRecipe,\n selectableTag: selectableTagRecipe,\n separator: separatorRecipe,\n skeleton: skeletonRecipe,\n spinner: spinnerRecipe,\n textarea: textareaRecipe,\n toggleButton: toggleButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAkBA~~,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;~~AAChB~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\nimport uiHeaderButtonRecipe from './UIHeaderButton.recipe';\n\nconst recipes = {\n badge: badgeRecipe,\n button: buttonRecipe,\n closeButton: closeButtonRecipe,\n controlButton: controlButtonRecipe,\n colorButton: colorButtonRecipe,\n definitionTooltip: definitionTooltipRecipe,\n icon: iconRecipe,\n input: inputRecipe,\n inputAddon: inputAddonRecipe,\n link: linkRecipe,\n linkButton: linkButtonRecipe,\n selectableTag: selectableTagRecipe,\n separator: separatorRecipe,\n skeleton: skeletonRecipe,\n spinner: spinnerRecipe,\n textarea: textareaRecipe,\n toggleButton: toggleButtonRecipe,\n uiHeaderButton: uiHeaderButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;CACd,gBAAgB;AAClB"}

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

@@ -30,25 +30,10 @@ declare const datePickerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
     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";
-            };
         };
     };
 }>;

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

@@ -26,15 +26,14 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			borderRadius: "8",
 			boxShadow: "elevation/lg",
 			minWidth: rem(312),
-			paddingBlockEnd: "16",
-			paddingBlockStart: "24",
+			paddingBlock: "24",
 			paddingInline: "16",
-			zIndex: "calc({zIndex.popover} + var(--layer-index, 0))"
+			zIndex: "select"
 		},
 		view: {
 			display: "flex",
 			flexDirection: "column",
-			gap: "24"
+			gap: "16"
 		},
 		viewControl: {
 			display: "flex",
@@ -74,25 +73,23 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/moderate",
 				borderRadius: "0.5rem"
 			},
-			_focusVisible: { borderRadius: "0.5rem" },
 			"&[data-unavailable]": {
+				borderRadius: 0,
+				backgroundColor: "interactive/disabled",
 				color: "text/disabled",
 				cursor: "default",
 				"&:hover, &[data-outside-range]:hover": {
-					backgroundColor: "transparent",
+					borderRadius: 0,
+					backgroundColor: "interactive/disabled",
 					color: "text/disabled"
 				}
 			},
 			"&[data-outside-range]": { color: "text/tertiary" },
 			"&[data-outside-range][data-unavailable]": { color: "text/disabled" },
-			"&[data-outside-range][data-in-range]": {
+			"&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover": {
 				backgroundColor: "interactive/moderate",
 				color: "interactive/bold"
 			},
-			"&[data-outside-range][data-in-range]:hover": {
-				backgroundColor: "interactive/muted",
-				color: "interactive/minimal"
-			},
 			"&[data-outside-range][data-range-end]": {
 				backgroundColor: "interactive/highlight",
 				borderRadius: "0 0.5rem 0.5rem 0",
@@ -100,13 +97,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			},
 			"&[data-outside-range][data-hover-range-start]:hover": {
 				borderRadius: "0.5rem 0 0 0.5rem",
-				color: "text/tertiary",
-				backgroundColor: "interactive/subtle"
+				color: "interactive/subtle",
+				backgroundColor: "interactive/highlight"
 			},
 			"&[data-outside-range][data-hover-range-end]:hover": {
 				borderRadius: "0 0.5rem 0.5rem 0",
-				color: "text/tertiary",
-				backgroundColor: "interactive/subtle"
+				color: "interactive/subtle",
+				backgroundColor: "interactive/highlight"
 			},
 			"&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]": {
 				backgroundColor: "interactive/highlight",
@@ -123,8 +120,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				color: "interactive/minimal"
 			},
 			"&[data-outside-range]:hover": {
-				backgroundColor: "interactive/subtle",
-				borderRadius: "0.5rem",
+				backgroundColor: "transparent",
 				color: "text/tertiary"
 			},
 			"&[data-in-range]": {
@@ -135,28 +131,6 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/muted",
 				borderRadius: 0
 			},
-			"&[data-in-hover-range]:not([data-outside-range], [data-selected])": {
-				backgroundColor: "interactive/minimal",
-				borderRadius: 0,
-				color: "text/primary"
-			},
-			"&[data-hover-range-start]:not([data-outside-range], [data-selected])": {
-				backgroundColor: "interactive/moderate",
-				borderRadius: "0.5rem 0 0 0.5rem",
-				color: "text/primary"
-			},
-			"&[data-hover-range-end]:not([data-outside-range], [data-selected])": {
-				backgroundColor: "interactive/moderate",
-				borderRadius: "0 0.5rem 0.5rem 0",
-				color: "text/primary"
-			},
-			"&[data-hover-range-start][data-hover-range-end]:not([data-outside-range], [data-selected])": { borderRadius: "0.5rem" },
-			"&[data-today]": { color: "text/selected" },
-			"&[data-today][data-unavailable]": { color: "text/disabled" },
-			"&[data-today]:hover:not([data-selected], [data-unavailable])": {
-				backgroundColor: "interactive/subtle",
-				borderRadius: 0
-			},
 			"&[data-selected]": {
 				backgroundColor: "interactive/base",
 				color: "text/on-color",
@@ -167,17 +141,12 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				borderRadius: "0.5rem",
 				color: "interactive/moderate"
 			},
-			"&[data-outside-range][data-selected]:not([data-range-start], [data-range-end])": {
-				backgroundColor: "interactive/subtle",
-				borderRadius: "0.5rem",
-				color: "text/tertiary"
-			},
-			"&[data-range-start]": {
+			"&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0.5rem 0 0 0.5rem",
 				color: "text/on-color"
 			},
-			"&[data-range-end]": {
+			"&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0 0.5rem 0.5rem 0",
 				color: "text/on-color"
@@ -196,6 +165,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				backgroundColor: "interactive/base",
 				color: "interactive/moderate"
 			},
+			"&[data-hover-range-start][data-hover-range-end]": { borderRadius: "0.5rem" },
 			"&[data-today] > span": {
 				border: "1px solid",
 				borderColor: "interactive/base"
@@ -223,32 +193,12 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			false: { tableCellTrigger: { "&[data-outside-range]": { visibility: "hidden" } } },
 			true: { tableCellTrigger: { "&[data-outside-range]": { visibility: "visible" } } }
 		},
-		device: { mobile: {
-			content: {
-				minWidth: 0,
-				boxShadow: "none",
-				paddingBlock: "16",
-				paddingInline: "16"
-			},
-			view: { gap: "16" },
-			tableHeader: {
-				height: "40",
-				maxWidth: "none",
-				minWidth: 0,
-				textStyle: "body/lg/regular",
-				width: "auto"
-			},
-			tableCellTrigger: {
-				height: "40",
-				textStyle: "body/lg/regular"
-			}
-		} }
-	},
-	compoundVariants: [{
-		device: "mobile",
-		layout: "1-month",
-		css: { content: { width: "100%" } }
-	}]
+		device: { mobile: { content: {
+			boxShadow: "none",
+			paddingBlock: "16",
+			paddingInline: "16"
+		} } }
+	}
 });
 //#endregion
 export { datePickerSlotRecipe as default };

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":";;;;AAKA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,CAAC,GAAG,kBAAkB,KAAK,GAAG,QAAQ;CAC7C,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,SAAS;GACP,UAAU;GACV,SAAS;GACT,YAAY;EACd;EACA,QAAQ;GACN,SAAS;GACT,KAAK;EACP;EACA,YAAY,EACV,UAAU,WACZ;EACA,SAAS;GACP,iBAAiB;GACjB,cAAc;GACd,WAAW;GACX,UAAU,IAAI,GAAG;GACjB,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;GAEf,QAAQ;EACV;EACA,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;EACA,OAAO;GACL,OAAO;GACP,gBAAgB;GAChB,eAAe;GACf,aAAa;EACf;EACA,WAAW,EACT,2BAA2B,EACzB,YAAY,IACd,EACF;EACA,UAAU,EACR,SAAS,YACX;EACA,aAAa;GACX,OAAO;GACP,WAAW;GACX,WAAW;GACX,OAAO;GACP,UAAU;GACV,UAAU;EACZ;EACA,WAAW;GACT,WAAW;GACX,cAAc;EAChB;EACA,kBAAkB;GAChB,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,WAAW;GAEX,gCAAgC;IAC9B,iBAAiB;IACjB,cAAc;GAChB;GAGA,eAAe,EACb,cAAc,SAChB;GAEA,uBAAuB;IACrB,OAAO;IACP,QAAQ;IACR,wCAAwC;KACtC,iBAAiB;KACjB,OAAO;IACT;GACF;GAEA,yBAAyB,EACvB,OAAO,gBACT;GAEA,2CAA2C,EACzC,OAAO,gBACT;GAEA,wCAAwC;IACtC,iBAAiB;IACjB,OAAO;GACT;GAEA,8CAA8C;IAC5C,iBAAiB;IACjB,OAAO;GACT;GAEA,yCAAyC;IACvC,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,uDAAuD;IACrD,cAAc;IACd,OAAO;IACP,iBAAiB;GACnB;GAEA,qDAAqD;IACnD,cAAc;IACd,OAAO;IACP,iBAAiB;GACnB;GAEA,iFAAiF;IAC/E,iBAAiB;IACjB,OAAO;GACT;GAEA,gEAAgE;IAC9D,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,8DAA8D;IAC5D,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,+BAA+B;IAC7B,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,oBAAoB;IAClB,iBAAiB;IACjB,OAAO;GACT;GAEA,0BAA0B;IACxB,iBAAiB;IACjB,cAAc;GAChB;GAGA,qEAAqE;IACnE,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,wEAAwE;IACtE,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,sEAAsE;IACpE,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,8FAA8F,EAC5F,cAAc,SAChB;GAEA,iBAAiB,EACf,OAAO,gBACT;GAEA,mCAAmC,EACjC,OAAO,gBACT;GAEA,gEAAgE;IAC9D,iBAAiB;IACjB,cAAc;GAChB;GAEA,oBAAoB;IAClB,iBAAiB;IACjB,OAAO;IACP,cAAc;GAChB;GAEA,0BAA0B;IACxB,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAGA,kFAAkF;IAChF,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,uBAAuB;IACrB,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,qBAAqB;IACnB,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,6BAA6B;IAC3B,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,2BAA2B;IACzB,iBAAiB;IACjB,cAAc;IACd,OAAO;GACT;GAEA,6CAA6C;IAC3C,iBAAiB;IACjB,OAAO;GACT;GAEA,wBAAwB;IACtB,QAAQ;IACR,aAAa;GACf;GAEA,uCAAuC;IACrC,QAAQ;IACR,aAAa;GACf;GAEA,gFAAgF,EAC9E,aAAa,uBACf;GAEA,YAAY;IACV,YAAY;IACZ,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,MAAM;GACR;EACF;CACF;CACA,UAAU;EACR,QAAQ;GACN,WAAW,EACT,SAAS,EACP,OAAO,UACT,EACF;GACA,WAAW,EACT,SAAS,EACP,OAAO,UACT,EACF;EACF;EACA,iBAAiB;GACf,OAAO,EACL,kBAAkB,EAChB,yBAAyB,EACvB,YAAY,SACd,EACF,EACF;GACA,MAAM,EACJ,kBAAkB,EAChB,yBAAyB,EACvB,YAAY,UACd,EACF,EACF;EACF;EACA,QAAQ,EACN,QAAQ;GACN,SAAS;IACP,UAAU;IACV,WAAW;IACX,cAAc;IACd,eAAe;GACjB;GACA,MAAM,EACJ,KAAK,KACP;GACA,aAAa;IACX,QAAQ;IACR,UAAU;IACV,UAAU;IACV,WAAW;IACX,OAAO;GACT;GACA,kBAAkB;IAChB,QAAQ;IACR,WAAW;GACb;EACF,EACF;CACF;CAEA,kBAAkB,CAChB;EACE,QAAQ;EACR,QAAQ;EACR,KAAK,EACH,SAAS,EACP,OAAO,OACT,EACF;CACF,CACF;AACF,CAAC"}
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: {