@bitrise/bitkit-v2 0.3.477-beta.3030 → 0.3.478-beta.3034

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

@@ -26,14 +26,15 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			borderRadius: "8",
 			boxShadow: "elevation/lg",
 			minWidth: rem(312),
-			paddingBlock: "24",
+			paddingBlockEnd: "16",
+			paddingBlockStart: "24",
 			paddingInline: "16",
-			zIndex: "select"
+			zIndex: "calc({zIndex.popover} + var(--layer-index, 0))"
 		},
 		view: {
 			display: "flex",
 			flexDirection: "column",
-			gap: "16"
+			gap: "24"
 		},
 		viewControl: {
 			display: "flex",
@@ -73,23 +74,25 @@ 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": {
-					borderRadius: 0,
-					backgroundColor: "interactive/disabled",
+					backgroundColor: "transparent",
 					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]:hover": {
+			"&[data-outside-range][data-in-range]": {
 				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",
@@ -97,13 +100,13 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			},
 			"&[data-outside-range][data-hover-range-start]:hover": {
 				borderRadius: "0.5rem 0 0 0.5rem",
-				color: "interactive/subtle",
-				backgroundColor: "interactive/highlight"
+				color: "text/tertiary",
+				backgroundColor: "interactive/subtle"
 			},
 			"&[data-outside-range][data-hover-range-end]:hover": {
 				borderRadius: "0 0.5rem 0.5rem 0",
-				color: "interactive/subtle",
-				backgroundColor: "interactive/highlight"
+				color: "text/tertiary",
+				backgroundColor: "interactive/subtle"
 			},
 			"&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]": {
 				backgroundColor: "interactive/highlight",
@@ -120,7 +123,8 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				color: "interactive/minimal"
 			},
 			"&[data-outside-range]:hover": {
-				backgroundColor: "transparent",
+				backgroundColor: "interactive/subtle",
+				borderRadius: "0.5rem",
 				color: "text/tertiary"
 			},
 			"&[data-in-range]": {
@@ -131,6 +135,28 @@ 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",
@@ -141,12 +167,17 @@ var datePickerSlotRecipe = defineSlotRecipe({
 				borderRadius: "0.5rem",
 				color: "interactive/moderate"
 			},
-			"&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover": {
+			"&[data-outside-range][data-selected]:not([data-range-start], [data-range-end])": {
+				backgroundColor: "interactive/subtle",
+				borderRadius: "0.5rem",
+				color: "text/tertiary"
+			},
+			"&[data-range-start]": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0.5rem 0 0 0.5rem",
 				color: "text/on-color"
 			},
-			"&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover": {
+			"&[data-range-end]": {
 				backgroundColor: "interactive/base",
 				borderRadius: "0 0.5rem 0.5rem 0",
 				color: "text/on-color"
@@ -165,7 +196,6 @@ 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"
@@ -193,12 +223,32 @@ var datePickerSlotRecipe = defineSlotRecipe({
 			false: { tableCellTrigger: { "&[data-outside-range]": { visibility: "hidden" } } },
 			true: { tableCellTrigger: { "&[data-outside-range]": { visibility: "visible" } } }
 		},
-		device: { mobile: { content: {
-			boxShadow: "none",
-			paddingBlock: "16",
-			paddingInline: "16"
-		} } }
-	}
+		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%" } }
+	}]
 });
 //#endregion
 export { datePickerSlotRecipe as default };

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

@@ -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      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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"}
+{"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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"}

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

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

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

@@ -1,3 +1,4 @@
+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";
@@ -10,6 +11,7 @@ var datePickerSelectSlotRecipe = defineSlotRecipe({
 			...selectSlotRecipe.base?.trigger,
 			borderWidth: 0,
 			height: "32",
+			minWidth: 0,
 			paddingInlineStart: "12",
 			paddingInlineEnd: "8",
 			"&:hover:not(:active)": { bg: "background/hover" },
@@ -26,19 +28,42 @@ 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"
+	variants: { size: {
+		md: {
+			...selectSlotRecipe.variants?.size?.md,
+			trigger: {
+				...selectSlotRecipe.variants?.size?.md.trigger,
+				paddingBlock: "6"
+			},
+			indicator: { _icon: {
+				width: "16",
+				height: "16"
+			} }
 		},
-		indicator: { _icon: {
-			width: "16",
-			height: "16"
-		} }
-	} } },
+		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"
+			} }
+		}
+	} },
 	defaultVariants: { size: "md" }
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerSelect.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePickerSelect.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { 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"}
+{"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"}

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

@@ -0,0 +1,37 @@
+declare const filterSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "mobileListCheckbox" | "mobileListCheck" | "patternResults" | "patternResultsLabel" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
+    pageLayout: {
+        capped: {
+            root: {
+                borderBlockEndWidth: "1";
+                borderColor: "border/regular";
+                paddingInline: {
+                    base: "16";
+                    tablet: "32";
+                };
+            };
+        };
+        full: {
+            root: {
+                borderBlockEndWidth: "1";
+                borderColor: "border/regular";
+                paddingInlineEnd: {
+                    base: "16";
+                    tablet: "32";
+                };
+                paddingInlineStart: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
+        };
+    };
+    contentAlign: {
+        center: {};
+        start: {
+            root: {
+                justifyContent: "flex-start";
+            };
+        };
+    };
+}>;
+export default filterSlotRecipe;