@bitrise/bitkit-v2 0.3.473 → 0.3.475-beta.3009

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

@@ -0,0 +1,237 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/UIHeader.recipe.ts
+/**
+* The height of the header bar — the banner slot below it is not counted, since its height is the
+* consumer's content.
+*
+* A page that pins the header reserves exactly this much room for it, and anything anchored under
+* the header starts here: a drawer's backdrop and positioner, a side navigation's
+* `insetBlockStart`.
+*/
+var uiHeaderHeight = rem(48);
+var SEARCH_FIELD_WIDTH = rem(240);
+var SEARCH_FIELD_TINT = "var(--colors-color\\/white\\/20)";
+var controlBase = {
+	background: "sys/ui/header/control/bg",
+	_hover: {
+		background: "sys/ui/header/control/bg-hover",
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	_active: { background: "sys/ui/header/control/bg-active" },
+	_selected: {
+		background: "sys/ui/header/control/bg-selected",
+		_hover: {
+			background: "sys/ui/header/control/bg-selected-hover",
+			_active: { background: "sys/ui/header/control/bg-active" }
+		},
+		_active: { background: "sys/ui/header/control/bg-active" }
+	},
+	alignItems: "center",
+	borderRadius: 0,
+	color: "icon/on-color",
+	cursor: "pointer",
+	display: "flex",
+	flexShrink: 0,
+	height: uiHeaderHeight,
+	justifyContent: "center",
+	position: "relative",
+	textDecoration: "none",
+	_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
+};
+var uiHeaderSlotRecipe = defineSlotRecipe({
+	className: "ui-header",
+	slots: [
+		"account",
+		"accountAvatar",
+		"accountIcon",
+		"actions",
+		"badge",
+		"banner",
+		"bar",
+		"control",
+		"indicator",
+		"leading",
+		"logoLink",
+		"logoBlock",
+		"navButton",
+		"navButtonBadge",
+		"navButtonIcon",
+		"root",
+		"search",
+		"searchButton",
+		"searchField",
+		"searchIcon",
+		"searchInput",
+		"spacer"
+	],
+	base: {
+		root: {
+			background: "sys/ui/header/bg",
+			color: "text/on-color",
+			display: "flex",
+			flexDirection: "column",
+			width: "full"
+		},
+		bar: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			height: uiHeaderHeight,
+			position: "relative",
+			tablet: { paddingInlineStart: "20" }
+		},
+		leading: {
+			display: "flex",
+			flexShrink: 0,
+			tablet: { display: "none" }
+		},
+		spacer: {
+			flexShrink: 1,
+			width: "48",
+			tablet: { display: "none" }
+		},
+		logoBlock: {
+			alignItems: "center",
+			display: "flex",
+			flex: 1,
+			justifyContent: "center",
+			minWidth: 0,
+			tablet: { flex: "none" }
+		},
+		logoLink: {
+			borderRadius: "4",
+			color: "text/on-color",
+			display: "flex",
+			marginBlockEnd: rem(3)
+		},
+		actions: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: 0,
+			marginInlineStart: "auto",
+			tablet: { paddingInlineEnd: "32" }
+		},
+		banner: { width: "full" },
+		control: {
+			...controlBase,
+			width: "48"
+		},
+		account: {
+			...controlBase,
+			width: "48"
+		},
+		accountAvatar: {
+			borderRadius: "full",
+			display: "none",
+			overflow: "hidden",
+			tablet: { display: "inline-flex" }
+		},
+		accountIcon: {
+			display: "block",
+			tablet: { display: "none" }
+		},
+		navButton: {
+			...controlBase,
+			paddingBlock: "8",
+			paddingInlineEnd: "8",
+			paddingInlineStart: "12"
+		},
+		navButtonBadge: {
+			alignItems: "flex-start",
+			background: "sys/ui/header/bg",
+			borderStartStartRadius: "2",
+			color: "icon/on-color",
+			display: "flex",
+			height: "12",
+			insetBlockEnd: "8",
+			insetInlineEnd: "8",
+			overflow: "hidden",
+			pointerEvents: "none",
+			position: "absolute",
+			width: "16"
+		},
+		navButtonIcon: {
+			flexShrink: 0,
+			marginBlockStart: rem(-1),
+			marginInlineStart: "1"
+		},
+		badge: {
+			background: "sys/ui/header/badge/red",
+			borderRadius: "full",
+			height: "8",
+			insetBlockStart: "12",
+			insetInlineStart: rem(28),
+			pointerEvents: "none",
+			position: "absolute",
+			width: "8"
+		},
+		indicator: {
+			background: "sys/ui/header/control/indicator",
+			height: "4",
+			insetBlockEnd: 0,
+			insetInline: 0,
+			pointerEvents: "none",
+			position: "absolute"
+		},
+		search: {
+			display: "flex",
+			flexShrink: 0,
+			position: "relative"
+		},
+		searchField: {
+			alignItems: "center",
+			backgroundColor: "sys/ui/header/bg",
+			backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
+			borderColor: "border/strong",
+			borderRadius: "4",
+			borderStyle: "solid",
+			borderWidth: "1",
+			display: "none",
+			gap: "8",
+			height: "40",
+			insetBlockStart: "4",
+			insetInlineEnd: 0,
+			opacity: 0,
+			paddingInlineEnd: "12",
+			paddingInlineStart: "8",
+			pointerEvents: "none",
+			position: "absolute",
+			transitionDuration: "fast",
+			transitionProperty: "opacity",
+			transitionTimingFunction: "ease-out",
+			width: SEARCH_FIELD_WIDTH,
+			"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
+			_open: {
+				opacity: 1,
+				pointerEvents: "auto"
+			},
+			_motionReduce: { transitionProperty: "none" },
+			tablet: { display: "flex" }
+		},
+		searchButton: { _open: { visibility: "hidden" } },
+		searchIcon: {
+			color: "icon/on-color",
+			flexShrink: 0
+		},
+		searchInput: {
+			background: "transparent",
+			borderWidth: 0,
+			color: "text/on-color",
+			flex: 1,
+			focusVisibleRing: "none",
+			minWidth: 0,
+			padding: 0,
+			textStyle: "body/lg/regular",
+			"&::-webkit-search-cancel-button": { display: "none" },
+			_placeholder: {
+				color: "text/on-color",
+				opacity: .6
+			}
+		}
+	}
+});
+//#endregion
+export { uiHeaderSlotRecipe as default, uiHeaderHeight };
+
+//# sourceMappingURL=UIHeader.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n/**\n * The height of the header bar — the banner slot below it is not counted, since its height is the\n * consumer's content.\n *\n * A page that pins the header reserves exactly this much room for it, and anything anchored under\n * the header starts here: a drawer's backdrop and positioner, a side navigation's\n * `insetBlockStart`.\n */\nexport const uiHeaderHeight = rem(48);\n\n// The design draws the open search field at a fixed width rather than a share of the bar, so it\n// stays the same whatever else sits beside it.\nconst SEARCH_FIELD_WIDTH = rem(240);\n\n// A raw, slash-escaped CSS variable for `color/white/20`: inside a `{colors.…}` reference Chakra\n// reads the first `/` as its color-mix opacity modifier.\nconst SEARCH_FIELD_TINT = 'var(--colors-color\\\\/white\\\\/20)';\n\n/**\n * Background states shared by every control in the bar — the icon buttons, the account button and\n * the mobile navigation button. `selected` is the control whose drawer is open: it keeps a lighter\n * background and grows an indicator along its bottom edge.\n */\nconst controlStates: SystemStyleObject = {\n  background: 'sys/ui/header/control/bg',\n  _hover: {\n    background: 'sys/ui/header/control/bg-hover',\n    _active: {\n      background: 'sys/ui/header/control/bg-active',\n    },\n  },\n  _active: {\n    background: 'sys/ui/header/control/bg-active',\n  },\n  _selected: {\n    background: 'sys/ui/header/control/bg-selected',\n    _hover: {\n      background: 'sys/ui/header/control/bg-selected-hover',\n      _active: {\n        background: 'sys/ui/header/control/bg-active',\n      },\n    },\n    _active: {\n      background: 'sys/ui/header/control/bg-active',\n    },\n  },\n};\n\nconst controlBase: SystemStyleObject = {\n  ...controlStates,\n  alignItems: 'center',\n  // Preflight zeroes every border width but not the radius a native button can still draw.\n  borderRadius: 0,\n  color: 'icon/on-color',\n  cursor: 'pointer',\n  display: 'flex',\n  flexShrink: 0,\n  height: uiHeaderHeight,\n  justifyContent: 'center',\n  position: 'relative',\n  textDecoration: 'none',\n  // The bar is exactly as tall as its controls, so an outside ring would be clipped at the top and\n  // bottom. Pull it inside, the way the side navigation's rows do.\n  _focusVisible: {\n    outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n  },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n  className: 'ui-header',\n  slots: [\n    'account',\n    'accountAvatar',\n    'accountIcon',\n    'actions',\n    'badge',\n    'banner',\n    'bar',\n    'control',\n    'indicator',\n    'leading',\n    'logoLink',\n    'logoBlock',\n    'navButton',\n    'navButtonBadge',\n    'navButtonIcon',\n    'root',\n    'search',\n    'searchButton',\n    'searchField',\n    'searchIcon',\n    'searchInput',\n    'spacer',\n  ],\n  base: {\n    root: {\n      background: 'sys/ui/header/bg',\n      color: 'text/on-color',\n      display: 'flex',\n      flexDirection: 'column',\n      width: 'full',\n    },\n    bar: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      height: uiHeaderHeight,\n      position: 'relative',\n      tablet: {\n        paddingInlineStart: '20',\n      },\n    },\n    leading: {\n      display: 'flex',\n      flexShrink: 0,\n      tablet: {\n        display: 'none',\n      },\n    },\n    // What balances the trailing controls against the leading slot, so the logo between them lands\n    // in the middle of the bar. The design draws it at a fixed width; it is the first thing to give\n    // when the controls need more room than that leaves.\n    spacer: {\n      flexShrink: 1,\n      width: '48',\n      tablet: {\n        display: 'none',\n      },\n    },\n    // On mobile the logo is centred in what the two flanks leave, which the spacer has evened out.\n    // Controls heavier than the spacer can even out — an Ask AI button among them — take their room\n    // from this block, and the logo moves with it rather than being overlapped.\n    logoBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flex: 1,\n      justifyContent: 'center',\n      minWidth: 0,\n      tablet: {\n        flex: 'none',\n      },\n    },\n    logoLink: {\n      borderRadius: '4',\n      color: 'text/on-color',\n      display: 'flex',\n      // Optical centring: the wordmark reads as sitting low in the bar when it is centred by its\n      // bounding box, so the design lifts it. No size token at this scale.\n      marginBlockEnd: rem(3),\n    },\n    actions: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      // The logo block only grows on mobile, so on desktop this is what pushes the actions to the\n      // trailing edge.\n      marginInlineStart: 'auto',\n      tablet: {\n        paddingInlineEnd: '32',\n      },\n    },\n    banner: {\n      width: 'full',\n    },\n    control: {\n      ...controlBase,\n      width: '48',\n    },\n    account: {\n      ...controlBase,\n      width: '48',\n    },\n    // The account button carries the user's avatar on desktop and a plain icon on mobile. Both are\n    // rendered and one is hidden, so the button never has to know the viewport: no breakpoint hook,\n    // and no wrong-layout first paint.\n    accountAvatar: {\n      // The design draws the account as a circle whatever is in it, while the avatar's own shape\n      // is only round when it holds a picture. Clipping covers the initials fallback too.\n      borderRadius: 'full',\n      display: 'none',\n      overflow: 'hidden',\n      tablet: {\n        display: 'inline-flex',\n      },\n    },\n    accountIcon: {\n      display: 'block',\n      tablet: {\n        display: 'none',\n      },\n    },\n    navButton: {\n      ...controlBase,\n      paddingBlock: '8',\n      paddingInlineEnd: '8',\n      paddingInlineStart: '12',\n    },\n    // A notch of the header's own background punched into the corner of the workspace avatar, with\n    // the menu icon inside it.\n    navButtonBadge: {\n      alignItems: 'flex-start',\n      background: 'sys/ui/header/bg',\n      borderStartStartRadius: '2',\n      color: 'icon/on-color',\n      display: 'flex',\n      height: '12',\n      insetBlockEnd: '8',\n      insetInlineEnd: '8',\n      overflow: 'hidden',\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '16',\n    },\n    navButtonIcon: {\n      flexShrink: 0,\n      // The notch shows the icon's top edge only, and the design nudges it a pixel to sit flush\n      // with the avatar's corner.\n      marginBlockStart: rem(-1),\n      marginInlineStart: '1',\n    },\n    badge: {\n      background: 'sys/ui/header/badge/red',\n      borderRadius: 'full',\n      height: '8',\n      // The top trailing corner of a 24px icon centred in a 48px control. The inline offset is a\n      // measurement of that geometry rather than a spacing step, so no token lands on it.\n      insetBlockStart: '12',\n      insetInlineStart: rem(28),\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '8',\n    },\n    indicator: {\n      background: 'sys/ui/header/control/indicator',\n      height: '4',\n      insetBlockEnd: 0,\n      insetInline: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n    },\n    search: {\n      display: 'flex',\n      flexShrink: 0,\n      position: 'relative',\n    },\n    // The field lies over its own button rather than in the flow, so opening it moves nothing else\n    // in the bar. Below `tablet` there is no inline field at all: the button opens whatever the\n    // consumer puts the search in.\n    searchField: {\n      alignItems: 'center',\n      // The design paints the field as the page surface at a fifth of its opacity, and there is no\n      // `sys/ui/header` token for it. It is laid over the bar's own colour rather than blended with\n      // it, so the open field is opaque: the button it covers and whatever the consumer put beside\n      // it must not read through.\n      backgroundColor: 'sys/ui/header/bg',\n      backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n      borderColor: 'border/strong',\n      borderRadius: '4',\n      borderStyle: 'solid',\n      borderWidth: '1',\n      display: 'none',\n      gap: '8',\n      height: '40',\n      // Centres the 40px field against the 48px bar.\n      insetBlockStart: '4',\n      insetInlineEnd: 0,\n      opacity: 0,\n      paddingInlineEnd: '12',\n      paddingInlineStart: '8',\n      pointerEvents: 'none',\n      position: 'absolute',\n      transitionDuration: 'fast',\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'ease-out',\n      width: SEARCH_FIELD_WIDTH,\n      // The field is the control, so it takes the ring the input would have drawn inside it.\n      '&:has(input:focus-visible)': {\n        boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n      },\n      _open: {\n        opacity: 1,\n        pointerEvents: 'auto',\n      },\n      _motionReduce: {\n        transitionProperty: 'none',\n      },\n      tablet: {\n        display: 'flex',\n      },\n    },\n    // The open field covers its own button, so the button stops being something to look at, click\n    // or tab to. It keeps its space: the field is positioned against it.\n    searchButton: {\n      _open: {\n        visibility: 'hidden',\n      },\n    },\n    searchIcon: {\n      color: 'icon/on-color',\n      flexShrink: 0,\n    },\n    searchInput: {\n      background: 'transparent',\n      borderWidth: 0,\n      color: 'text/on-color',\n      flex: 1,\n      focusVisibleRing: 'none',\n      minWidth: 0,\n      padding: 0,\n      textStyle: 'body/lg/regular',\n      // `type=\"search\"` draws a clear button of its own, which would sit beside ours.\n      '&::-webkit-search-cancel-button': { display: 'none' },\n      _placeholder: {\n        color: 'text/on-color',\n        opacity: 0.6,\n      },\n    },\n  },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}

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

@@ -941,6 +941,7 @@ declare const slotRecipes: {
             };
             floating: {
                 body: {
+                    paddingBlockEnd: "24";
                     paddingBlockStart: "8";
                     paddingInline: "24";
                     '.chakra-drawer__header:has([role=tablist]) ~ &': {
@@ -974,7 +975,7 @@ declare const slotRecipes: {
                     borderBlockStartColor: "transparent";
                     borderBlockStartWidth: number;
                     paddingBlockEnd: "24";
-                    paddingBlockStart: "32";
+                    paddingBlockStart: "8";
                     paddingInline: "24";
                 };
                 title: {
@@ -3543,6 +3544,7 @@ declare const slotRecipes: {
             };
         };
     }>;
+    uiHeader: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "actions" | "account" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoLink" | "logoBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "actions" | "account" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoLink" | "logoBlock">>;
     uiSideNav: import('@chakra-ui/react').SlotRecipeDefinition<"link" | "content" | "body" | "footer" | "closeButton" | "root" | "item" | "itemIndicator" | "positioner" | "itemLabel" | "itemIcon" | "backdrop" | "footerSeparator" | "footerHeading" | "linkIconBlock" | "linkTextBlock" | "linkIcon" | "linkStatusDot" | "linkLabel" | "linkSecondaryText" | "workspaceRoot" | "workspaceControl" | "workspace" | "workspaceTextBlock" | "workspaceChevron" | "workspaceMenu" | "workspaceLabel" | "workspaceValue", {
         layout: {
             rail: {

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

@@ -1,5 +1,6 @@
 import avatarSlotRecipe from "./Avatar.recipe.js";
 import numberInputSlotRecipe from "./NumberInput.recipe.js";
+import uiHeaderSlotRecipe from "./UIHeader.recipe.js";
 import uiSideNavSlotRecipe from "./UISideNav.recipe.js";
 import accordionSlotRecipe from "./Accordion.recipe.js";
 import actionBarSlotRecipe from "./ActionBar.recipe.js";
@@ -129,6 +130,7 @@ var slotRecipes = {
 	tooltip: tooltipSlotRecipe,
 	tour: tourSlotRecipe,
 	treeView: treeViewSlotRecipe,
+	uiHeader: uiHeaderSlotRecipe,
 	uiSideNav: uiSideNavSlotRecipe
 };
 //#endregion

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

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

package/package.json

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