npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.460-beta.2893 → 0.3.460-beta.2908 - Mend

@bitrise/bitkit-v2 0.3.460-beta.2893 → 0.3.460-beta.2908

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

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

@@ -1,31 +1,22 @@
 import { rem } from "../themeUtils.js";
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 //#region lib/theme/slot-recipes/UISideNav.recipe.ts
-/**
-* The rail's two widths. The collapsed rail is exactly wide enough for the 24px icon at its
-* 24px inline-start padding, which centres the icon and puts the label's first pixel on the
-* rail's trailing edge — so the expanded row and the collapsed row are the same row, clipped.
-*/
 var RAIL_WIDTH_COLLAPSED = rem(72);
 /**
 * The footprint the rail keeps in the page. The expanded rail overlays the content rather than
-* pushing it, so this is the gutter a layout reserves beside the navigation — exported so a
-* consumer does not have to hardcode the number and drift from it.
+* pushing it, so this is the gutter a layout reserves beside the navigation.
 */
 var uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;
 var RAIL_WIDTH_EXPANDED = rem(256);
 var DRAWER_WIDTH = rem(320);
-/**
-* The workspace menu is wider than the rail it hangs off, so a long workspace name has somewhere
-* to go. The drawer leaves it alone and lets the menu take the panel's width instead.
-*/
 var WORKSPACE_MENU_WIDTH = rem(360);
-/**
-* Every row is laid out at the expanded width and clipped by the root, rather than reflowing
-* between the two states. Without it the label would be handed a 72px row, ellipsis itself, and
-* re-wrap on every hover.
-*/
 var railRow = { minWidth: RAIL_WIDTH_EXPANDED };
+var hairline = {
+	background: "border/inverse",
+	content: "\"\"",
+	height: "1",
+	opacity: .2
+};
 var uiSideNavSlotRecipe = defineSlotRecipe({
 	className: "ui-side-nav",
 	slots: [
@@ -71,7 +62,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			alignItems: "center",
 			background: "sys/ui/sidenav/item/bg",
 			borderRadius: 0,
-			borderWidth: 0,
 			color: "text/on-color",
 			cursor: "pointer",
 			display: "flex",
@@ -83,12 +73,9 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			textAlign: "start",
 			width: "full",
 			_after: {
-				background: "border/inverse",
-				content: "\"\"",
-				height: "1",
+				...hairline,
 				insetBlockEnd: 0,
 				insetInline: 0,
-				opacity: .2,
 				position: "absolute"
 			},
 			_hover: {
@@ -97,12 +84,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			},
 			_active: { background: "sys/ui/sidenav/item/bg-active" }
 		},
-		/**
-		* The Select's own wrapper. It sizes to its content by default, which would leave the
-		* workspace cell narrower than the panel in the drawer, where no minimum width props it out.
-		*/
-		workspaceControl: { width: "full" },
-		/** The element the Select mounts on, which is what the drawer's header sticks to. */
 		workspaceRoot: {
 			flexShrink: 0,
 			width: "full"
@@ -120,14 +101,14 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		},
 		workspaceValue: {
 			opacity: .8,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/lg/regular"
+			textStyle: "body/lg/regular",
+			truncate: true
 		},
 		workspaceChevron: {
+			color: "text/on-color",
 			flexShrink: 0,
 			transition: "rotate 150ms ease-out",
-			"&[data-state=\"open\"]": { rotate: "180deg" },
+			_open: { rotate: "180deg" },
 			_motionReduce: { transition: "none" }
 		},
 		body: {
@@ -158,7 +139,7 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 				background: "sys/ui/sidenav/item/bg-active",
 				color: "sys/ui/sidenav/item/fg-active"
 			},
-			"&[data-selected]": {
+			_selected: {
 				background: "sys/ui/sidenav/item/bg-selected",
 				color: "sys/ui/sidenav/item/fg-active",
 				_hover: {
@@ -173,9 +154,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		itemLabel: {
 			flex: 1,
 			minWidth: 0,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/lg/semibold"
+			textStyle: "body/lg/semibold",
+			truncate: true
 		},
 		itemIndicator: {
 			background: "sys/ui/sidenav/item/indicator",
@@ -190,20 +170,13 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			flexShrink: 0,
 			marginBlockStart: "auto"
 		},
-		/**
-		* The rule above the footer, drawn as its own band rather than a border on the footer: the
-		* design insets the line from both edges and gives it breathing room, which a border cannot do.
-		*/
 		footerSeparator: {
 			flexShrink: 0,
 			paddingBlock: "8",
 			paddingInline: "12",
 			_before: {
-				background: "border/inverse",
-				content: "\"\"",
+				...hairline,
 				display: "block",
-				height: "1",
-				opacity: .2,
 				width: "full"
 			}
 		},
@@ -215,8 +188,6 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			textStyle: "heading/h6",
 			textTransform: "uppercase"
 		},
-		/** Shared by both of the footer row's elements: an anchor for a destination, a button for a
-		* row that opens something in place. The reset keeps the two indistinguishable. */
 		link: {
 			alignItems: "center",
 			background: "sys/ui/sidenav/item/bg",
@@ -256,21 +227,18 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		linkLabel: {
 			flex: 1,
 			minWidth: 0,
-			overflow: "hidden",
-			textOverflow: "ellipsis",
 			textStyle: "body/lg/regular",
+			truncate: true,
 			"[data-with-secondary] &": {
 				flex: "none",
 				textStyle: "body/md/semibold"
 			}
 		},
 		linkSecondaryText: {
-			overflow: "hidden",
-			textOverflow: "ellipsis",
-			textStyle: "body/sm/regular"
+			textStyle: "body/sm/regular",
+			truncate: true
 		},
 		linkIcon: { flexShrink: 0 },
-		/** Wraps the icon so the status dot can hang off its trailing bottom corner. */
 		linkIconBlock: {
 			display: "flex",
 			flexShrink: 0,
@@ -279,8 +247,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 		linkStatusDot: {
 			borderRadius: "full",
 			height: "8",
-			insetBlockEnd: "-2px",
-			insetInlineEnd: "-4px",
+			insetBlockEnd: "-2",
+			insetInlineEnd: "-4",
 			position: "absolute",
 			width: "8",
 			"&[data-status=\"neutral\"]": { background: "sys/ui/sidenav/badge/neutral" },
@@ -316,8 +284,8 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			display: "flex",
 			flexDirection: "column",
 			maxHeight: "100dvh",
-			overflow: "visible",
 			outline: "none",
+			overflow: "visible",
 			position: "relative",
 			width: DRAWER_WIDTH,
 			maxWidth: "calc(100vw - 55px)",
@@ -413,12 +381,9 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 					paddingBlockStart: "24",
 					position: "relative",
 					_before: {
-						background: "border/inverse",
-						content: "\"\"",
-						height: "1",
+						...hairline,
 						insetBlockStart: 0,
 						insetInline: 0,
-						opacity: .2,
 						position: "absolute"
 					}
 				}
@@ -432,7 +397,7 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
 			},
 			workspaceMenu: {
 				maxHeight: "var(--available-height)",
-				"& [data-slot=\"item-list\"]": { maxHeight: "none" }
+				"--select-menu-list-max-height": "none"
 			},
 			body: {
 				flex: "1 0 auto",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/*\n The rail's two widths. The collapsed rail is exactly wide enough for the 24px icon at its\n * 24px inline-start padding, which centres the icon and puts the label's first pixel on the\n * rail's trailing edge — so the expanded row and the collapsed row are the same row, clipped.\n /\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/\n The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation — exported so a\n * consumer does not have to hardcode the number and drift from it.\n /\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\n\n/\n The workspace menu is wider than the rail it hangs off, so a long workspace name has somewhere\n * to go. The drawer leaves it alone and lets the menu take the panel's width instead.\n /\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\n/\n Every row is laid out at the expanded width and clipped by the root, rather than reflowing\n * between the two states. Without it the label would be handed a 72px row, ellipsis itself, and\n * re-wrap on every hover.\n /\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n // The consumer owns the positioning: the website fixes it below a 48px header and feeds it\n // a dynamic margin for the Intercom banner. Filling the height given is all this does.\n height: 'full',\n // What makes the rail a rail. Every row is laid out at the expanded width, so this is the\n // only thing hiding the labels.\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // The Select recipe styles the trigger as a form control. This slot has to undo that\n // before it can be a navigation cell.\n borderRadius: 0,\n borderWidth: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n // The 1px rule under the cell. A pseudo-element rather than a border so it cannot add to\n // the 72px height the avatar and its padding already fill exactly.\n _after: {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n insetBlockEnd: 0,\n insetInline: 0,\n opacity: 0.2,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n /\n The Select's own wrapper. It sizes to its content by default, which would leave the\n * workspace cell narrower than the panel in the drawer, where no minimum width props it out.\n /\n workspaceControl: {\n width: 'full',\n },\n /* The element the Select mounts on, which is what the drawer's header sticks to. /\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n // The design draws this at 60% of the on-colour white. There is no sidenav token for it,\n // so it is the opacity Figma itself applies, not an invented colour.\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/regular',\n },\n workspaceChevron: {\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n // The design draws a chevron-up when the menu is open. It is the same glyph turned over,\n // so it is a rotation rather than a second icon.\n '&[data-state=\"open\"]': {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Both the icon and the label take their colour from the row, which is how one token pair\n // drives the whole 80%-to-100% shift the design asks for.\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n // The selected row is dimmer on hover than at rest. That reads backwards, but it is what\n // the component set draws: bg-selected at rest, bg-hover under the pointer.\n '&[data-selected]': {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n // `focusVisibleRing: 'inside'` still resolves to a zero offset, which draws the ring on the\n // border box. The row is full-bleed, so that would be clipped by the rail — pull it in.\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/semibold',\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n // Holds the footer at the bottom however short the navigation is.\n marginBlockStart: 'auto',\n },\n /*\n The rule above the footer, drawn as its own band rather than a border on the footer: the\n * design insets the line from both edges and gives it breathing room, which a border cannot do.\n /\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n // The collapsed inset. Unlike the rows, the rule follows the rail's own width rather than\n // being laid out at 256 and clipped, so it needs a narrower inset while the rail is narrow.\n paddingInline: '12',\n _before: {\n background: 'border/inverse',\n content: '\"\"',\n display: 'block',\n height: '1',\n opacity: 0.2,\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n /* Shared by both of the footer row's elements: an anchor for a destination, a button for a\n * row that opens something in place. The reset keeps the two indistinguishable. /\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) -1)',\n },\n // A row carrying a second line is the status row, which the design draws one step taller and\n // on a tighter type scale. Its own height rather than padding, because 12 above and below a\n // 36px text block would overshoot the 56 the design fixes it at.\n '&[data-with-secondary]': {\n height: rem(56),\n paddingBlock: 0,\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/lg/regular',\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n textStyle: 'body/sm/regular',\n },\n linkIcon: {\n flexShrink: 0,\n },\n /** Wraps the icon so the status dot can hang off its trailing bottom corner. */\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n // Clear of the icon's corner by the 4 and 2 the design offsets it.\n insetBlockEnd: '-2px',\n insetInlineEnd: '-4px',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n // The close button hangs off the trailing edge, so this must not clip.\n overflow: 'visible',\n outline: 'none',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n // Sits outside the panel but stays a child of the drawer content, so the dialog's focus\n // trap still reaches it.\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n item: { ...railRow, gap: '24', paddingBlock: '12' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n // Everything below the workspace cell scrolls together rather than the navigation\n // scrolling inside a footer that stays put — the panel is one column, not two panes.\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n // Opaque, because the rows pass underneath it rather than beside it.\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n // A heading starts a new section inside the footer, so it carries the same rule the\n // footer draws at its own top — laid over the gap above it rather than taking a row.\n footerHeading: {\n // A `label` sits right under the footer's own rule, so it only needs the rest of the\n // 24 the design leaves above a heading.\n paddingBlockStart: '12',\n // A section heading opens a block of its own further down, so it carries the same rule\n // — laid over the gap above it rather than taking a row of its own.\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n insetBlockStart: 0,\n insetInline: 0,\n opacity: 0.2,\n position: 'absolute',\n },\n },\n },\n // Full bleed, and laid over the block's leading edge rather than in the flow: in the flow\n // the rule's own pixel would push every block below it down by one.\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap — which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '& [data-slot=\"item-list\"]': { maxHeight: 'none' },\n },\n // The panel no longer clips, so a list too long for a short phone has to scroll inside\n // its own box rather than spilling over the footer below it.\n // Grows into the free space when the list is short, and keeps its full height when it is\n // not — the panel scrolls instead of the rows being squeezed.\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
1	+ {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/*\n The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n /\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n height: rem(56),\n paddingBlock: 0,\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n item: { ...railRow, gap: '24', paddingBlock: '12' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,uBAAuB,IAAI,EAAE;;;;;AAMnC,IAAa,qBAAqB;AAElC,IAAM,sBAAsB,IAAI,GAAG;AACnC,IAAM,eAAe,IAAI,GAAG;AAC5B,IAAM,uBAAuB,IAAI,GAAG;AAEpC,IAAM,UAAU,EAAE,UAAU,oBAAoB;AAEhD,IAAM,WAAW;CACf,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAEA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,eAAe;GACf,QAAQ;GACR,UAAU;GACV,YAAY;EACd;EACA,WAAW;GACT,YAAY;GACZ,YAAY;GAEZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,KAAK;GACL,QAAQ,IAAI,EAAE;GACd,WAAW,IAAI,EAAE;GACjB,UAAU;GACV,WAAW;GACX,OAAO;GACP,QAAQ;IACN,GAAG;IACH,eAAe;IACf,aAAa;IACb,UAAU;GACZ;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,gCACd;GACF;GACA,SAAS,EACP,YAAY,gCACd;EACF;EACA,eAAe;GACb,YAAY;GACZ,OAAO;EACT;EACA,oBAAoB;GAClB,SAAS;GACT,MAAM;GACN,eAAe;GACf,UAAU;EACZ;EACA,gBAAgB;GACd,SAAS;GACT,WAAW;GACX,eAAe;EACjB;EACA,gBAAgB;GACd,SAAS;GACT,WAAW;GACX,UAAU;EACZ;EACA,kBAAkB;GAChB,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,OAAO,EACL,QAAQ,SACV;GACA,eAAe,EACb,YAAY,OACd;EACF;EACA,MAAM;GACJ,SAAS;GACT,MAAM;GACN,eAAe;GACf,WAAW;EACb;EACA,MAAM;GACJ,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,UAAU;GACV,kBAAkB;GAClB,oBAAoB;GACpB,UAAU;GACV,gBAAgB;GAChB,OAAO;GACP,QAAQ;IACN,YAAY;IACZ,OAAO;IACP,SAAS,EACP,YAAY,gCACd;GACF;GACA,SAAS;IACP,YAAY;IACZ,OAAO;GACT;GACA,WAAW;IACT,YAAY;IACZ,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,SAAS,EACP,YAAY,gCACd;IACF;IACA,SAAS,EACP,YAAY,gCACd;GACF;GACA,eAAe,EACb,eAAe,qCACjB;EACF;EACA,UAAU,EACR,YAAY,EACd;EACA,WAAW;GACT,MAAM;GACN,UAAU;GACV,WAAW;GACX,UAAU;EACZ;EACA,eAAe;GACb,YAAY;GACZ,YAAY;GACZ,kBAAkB;GAClB,UAAU;GACV,OAAO;EACT;EACA,QAAQ;GACN,SAAS;GACT,eAAe;GACf,YAAY;GACZ,kBAAkB;EACpB;EACA,iBAAiB;GACf,YAAY;GACZ,cAAc;GACd,eAAe;GACf,SAAS;IACP,GAAG;IACH,SAAS;IACT,OAAO;GACT;EACF;EACA,eAAe;GACb,OAAO;GACP,SAAS;GACT,iBAAiB;GACjB,eAAe;GACf,WAAW;GACX,eAAe;EACjB;EACA,MAAM;GACJ,YAAY;GACZ,YAAY;GACZ,aAAa;GACb,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;GACd,eAAe;GACf,WAAW;GACX,gBAAgB;GAChB,OAAO;GACP,QAAQ;IACN,YAAY;IACZ,OAAO;IACP,SAAS,EACP,YAAY,gCACd;GACF;GACA,SAAS;IACP,YAAY;IACZ,OAAO;GACT;GACA,eAAe,EACb,eAAe,qCACjB;GACA,0BAA0B;IACxB,QAAQ,IAAI,EAAE;IACd,cAAc;GAChB;EACF;EACA,eAAe;GACb,SAAS;GACT,MAAM;GACN,eAAe;GACf,gBAAgB;GAChB,UAAU;EACZ;EACA,WAAW;GACT,MAAM;GACN,UAAU;GACV,WAAW;GACX,UAAU;GACV,2BAA2B;IACzB,MAAM;IACN,WAAW;GACb;EACF;EACA,mBAAmB;GACjB,WAAW;GACX,UAAU;EACZ;EACA,UAAU,EACR,YAAY,EACd;EACA,eAAe;GACb,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,eAAe;GACb,cAAc;GACd,QAAQ;GACR,eAAe;GACf,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,8BAA4B,EAC1B,YAAY,+BACd;GACA,8BAA4B,EAC1B,YAAY,6BACd;GACA,+BAA6B,EAC3B,YAAY,2BACd;EACF;EACA,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,mBAAmB;IACnB,eAAe;GACjB;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;GACjB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GAEP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,WAAW;GACX,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GAET,UAAU;GACV,UAAU;GACV,OAAO;GAGP,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,QAAQ,IAAI,EAAE;GACd,iBAAiB;GACjB,kBAAkB;GAClB,oBAAoB;GACpB,UAAU;EACZ;CACF;CAEA,UAAU,EACR,QAAQ;EACN,MAAM;GACJ,MAAM;IACJ,iBAAiB;IAGjB,YAAY;IACZ,iBAAiB;IACjB,OAAO;IACP,eAAe,EACb,YAAY,OACd;IACA,oBAAoB;KAClB,iBAAiB;KACjB,OAAO;IACT;GACF;GACA,WAAW;IAAE,GAAG;IAAS,eAAe;GAAK;GAC7C,kBAAkB;GAClB,eAAe,EAAE,OAAO,qBAAqB;GAC7C,MAAM;IAAE,GAAG;IAAS,KAAK;IAAM,cAAc;GAAK;GAClD,MAAM;IAAE,GAAG;IAAS,KAAK;GAAK;GAC9B,iBAAiB,EACf,qBAAqB,EACnB,eAAe,KACjB,EACF;GACA,eAAe;EACjB;EACA,QAAQ;GACN,MAAM;IACJ,WAAW;IACX,WAAW;IACX,OAAO;GACT;GACA,eAAe;IACb,YAAY;IACZ,iBAAiB;IACjB,UAAU;IACV,QAAQ;GACV;GACA,WAAW;IACT,cAAc;IACd,kBAAkB;IAClB,oBAAoB;GACtB;GACA,MAAM;IAAE,KAAK;IAAM,cAAc;GAAK;GACtC,MAAM,EAAE,KAAK,KAAK;GAClB,QAAQ;IACN,iBAAiB;IACjB,mBAAmB;IACnB,UAAU;GACZ;GACA,eAAe;IACb,mBAAmB;IACnB,mBAAmB;KACjB,kBAAkB;KAClB,mBAAmB;KACnB,UAAU;KACV,SAAS;MACP,GAAG;MACH,iBAAiB;MACjB,aAAa;MACb,UAAU;KACZ;IACF;GACF;GACA,iBAAiB;IACf,iBAAiB;IACjB,aAAa;IACb,cAAc;IACd,eAAe;IACf,UAAU;GACZ;GACA,eAAe;IAGb,WAAW;IACX,iCAAiC;GACnC;GACA,MAAM;IAAE,MAAM;IAAY,cAAc;GAAI;EAC9C;CACF,EACF;CAEA,iBAAiB,EACf,QAAQ,OACV;AACF,CAAC"}

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

@@ -657,8 +657,8 @@ declare const slotRecipes: {
                         textStyle: "body/md/semibold";
                     };
                 } | undefined;
-                itemList?: {
-                    maxHeight: `${number}rem`;
+                content?: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 } | undefined;
                 itemLabel?: {
                     textStyle: "body/md/regular";
@@ -2195,8 +2195,8 @@ declare const slotRecipes: {
                         textStyle: "body/lg/semibold";
                     };
                 };
-                itemList: {
-                    maxHeight: `${number}rem`;
+                content: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/lg/regular";
@@ -2260,8 +2260,8 @@ declare const slotRecipes: {
                         textStyle: "body/md/semibold";
                     };
                 };
-                itemList: {
-                    maxHeight: `${number}rem`;
+                content: {
+                    '--select-menu-list-max-height': `${number}rem`;
                 };
                 itemLabel: {
                     textStyle: "body/md/regular";
@@ -3506,13 +3506,13 @@ declare const slotRecipes: {
                         paddingBlockStart: "24";
                         position: "relative";
                         _before: {
-                            background: "border/inverse";
-                            content: "\"\"";
-                            height: "1";
                             insetBlockStart: number;
                             insetInline: number;
-                            opacity: number;
                             position: "absolute";
+                            background: "border/inverse";
+                            content: "\"\"";
+                            height: "1";
+                            opacity: 0.2;
                         };
                     };
                 };
@@ -3525,9 +3525,7 @@ declare const slotRecipes: {
                 };
                 workspaceMenu: {
                     maxHeight: "var(--available-height)";
-                    '& [data-slot="item-list"]': {
-                        maxHeight: "none";
-                    };
+                    '--select-menu-list-max-height': "none";
                 };
                 body: {
                     flex: "1 0 auto";

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.460-beta.2893",
+  "version": "0.3.460-beta.2908",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",