@bitrise/bitkit-v2 0.3.469-beta.2976 → 0.3.469

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -1,11 +1,10 @@
 import IconCross from "../../icons/IconCross.js";
-import IconCrossCircle from "../../icons/IconCrossCircle.js";
 import IconMagnifier from "../../icons/IconMagnifier.js";
 import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
 import { SelectMenuShellContextProvider } from "./BitkitSelectMenuAction.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra } from "@chakra-ui/react/styled-system";
-import { isValidElement, useEffect, useRef } from "react";
+import { isValidElement, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { Spinner } from "@chakra-ui/react/spinner";
@@ -22,10 +21,9 @@ var selectSizeMap = {
 		spinnerSize: "md"
 	}
 };
-var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", errorHelperText, errorLabel, iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles }) => {
+var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchValue, spinnerSize, styles }) => {
 	const { css: contentCss, ...restContentProps } = contentProps ?? {};
 	const isEmpty = collection.size === 0;
-	const hasError = !isLoading && !!errorLabel;
 	const hasAction = isValidElement(children);
 	const wasAtBottom = useRef(false);
 	const handleItemListScroll = (event) => {
@@ -51,27 +49,11 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 				}),
 				onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
 					iconSize,
-					placeholder: searchPlaceholder,
 					styles,
 					value: searchValue ?? "",
 					onSearchChange
 				}),
-				hasError ? /* @__PURE__ */ jsxs(Box, {
-					css: styles.errorState,
-					children: [/* @__PURE__ */ jsx(IconCrossCircle, {
-						css: styles.errorIcon,
-						size: iconSize
-					}), /* @__PURE__ */ jsxs(Box, {
-						css: styles.errorTextBlock,
-						children: [/* @__PURE__ */ jsx(Text, {
-							css: styles.errorLabel,
-							children: errorLabel
-						}), errorHelperText && /* @__PURE__ */ jsx(Text, {
-							css: styles.itemHelperText,
-							children: errorHelperText
-						})]
-					})]
-				}) : /* @__PURE__ */ jsxs(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					css: styles.itemList,
 					onScroll: handleItemListScroll,
 					children: [
@@ -111,44 +93,32 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 		})
 	});
 };
-var SelectMenuSearch = ({ iconSize, onSearchChange, placeholder = "Search...", styles, value }) => {
-	const inputRef = useRef(null);
-	useEffect(() => {
-		const input = inputRef.current;
-		const content = input?.closest("[data-part=\"content\"]");
-		if (!input || content?.getAttribute("data-state") !== "open") return;
-		const focused = document.activeElement;
-		if (focused && focused !== content && content.contains(focused)) return;
-		input.focus();
-	}, []);
-	return /* @__PURE__ */ jsxs(Box, {
-		css: styles.searchInputGroup,
-		children: [
-			/* @__PURE__ */ jsx(IconMagnifier, {
-				size: iconSize,
-				color: "icon/tertiary"
-			}),
-			/* @__PURE__ */ jsx(chakra.input, {
-				"aria-label": "Search",
-				css: styles.searchInput,
-				placeholder,
-				ref: inputRef,
-				value,
-				onChange: (event) => onSearchChange(event.target.value),
-				onKeyDown: (event) => {
-					if (event.key === " ") event.stopPropagation();
-				}
-			}),
-			value && /* @__PURE__ */ jsx(chakra.button, {
-				type: "button",
-				css: styles.searchClear,
-				"aria-label": "Clear search",
-				onClick: () => onSearchChange(""),
-				children: /* @__PURE__ */ jsx(IconCross, { size: iconSize })
-			})
-		]
-	});
-};
+var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PURE__ */ jsxs(Box, {
+	css: styles.searchInputGroup,
+	children: [
+		/* @__PURE__ */ jsx(IconMagnifier, {
+			size: iconSize,
+			color: "icon/tertiary"
+		}),
+		/* @__PURE__ */ jsx(chakra.input, {
+			"aria-label": "Search",
+			css: styles.searchInput,
+			placeholder: "Search...",
+			value,
+			onChange: (event) => onSearchChange(event.target.value),
+			onKeyDown: (event) => {
+				if (event.key === " ") event.stopPropagation();
+			}
+		}),
+		value && /* @__PURE__ */ jsx(chakra.button, {
+			type: "button",
+			css: styles.searchClear,
+			"aria-label": "Clear search",
+			onClick: () => onSearchChange(""),
+			children: /* @__PURE__ */ jsx(IconCross, { size: iconSize })
+		})
+	]
+});
 //#endregion
 export { SelectMenuShell, selectSizeMap };
 

package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useEffect, useRef } from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  errorHelperText,\n  errorLabel,\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchPlaceholder,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const { css: contentCss, ...restContentProps } = contentProps ?? {};\n  const isEmpty = collection.size === 0;\n  const hasError = !isLoading && !!errorLabel;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would. Zag picks that\n          target once, when the menu opens, so a search input that arrives later takes the focus\n          over from the span itself — see SelectMenuSearch below.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            placeholder={searchPlaceholder}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        {hasError ? (\n          <Box css={styles.errorState}>\n            <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n            <Box css={styles.errorTextBlock}>\n              <Text css={styles.errorLabel}>{errorLabel}</Text>\n              {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n            </Box>\n          </Box>\n        ) : (\n          <Box css={styles.itemList} onScroll={handleItemListScroll}>\n            {isLoading && (\n              <Box css={styles.item}>\n                <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n                <Text css={styles.itemLoadingLabel}>Loading...</Text>\n              </Box>\n            )}\n            {!isLoading && isEmpty && (\n              <Box css={styles.emptyState}>\n                <Text css={styles.itemLabel}>{emptyLabel}</Text>\n                {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n              </Box>\n            )}\n            {!isLoading &&\n              !isEmpty &&\n              collection.group().map(([type, group]) => (\n                <NS.ItemGroup key={type}>\n                  {type && (\n                    <NS.ItemGroupLabel asChild>\n                      <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                    </NS.ItemGroupLabel>\n                  )}\n                  {group.map(renderItem)}\n                </NS.ItemGroup>\n              ))}\n          </Box>\n        )}\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  placeholder?: string;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({\n  iconSize,\n  onSearchChange,\n  placeholder = 'Search...',\n  styles,\n  value,\n}: SelectMenuSearchProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    const content = input?.closest('[data-part=\"content\"]');\n    if (!input || content?.getAttribute('data-state') !== 'open') return;\n    const focused = document.activeElement;\n    if (focused && focused !== content && content.contains(focused)) return;\n    input.focus();\n  }, []);\n\n  return (\n    <Box css={styles.searchInputGroup}>\n      <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n      <chakra.input\n        aria-label=\"Search\"\n        css={styles.searchInput}\n        placeholder={placeholder}\n        ref={inputRef}\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n        onKeyDown={(event) => {\n          // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n          // regardless of which descendant is focused. That would eat the space before the\n          // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n          if (event.key === ' ') event.stopPropagation();\n        }}\n      />\n      {value && (\n        <chakra.button\n          type=\"button\"\n          css={styles.searchClear}\n          aria-label=\"Clear search\"\n          onClick={() => onSearchChange('')}\n        >\n          <IconCross size={iconSize} />\n        </chakra.button>\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useRef } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const { css: contentCss, ...restContentProps } = contentProps ?? {};\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList} onScroll={handleItemListScroll}>\n          {isLoading && (\n            <Box css={styles.item}>\n              <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n              <Text css={styles.itemLoadingLabel}>Loading...</Text>\n            </Box>\n          )}\n          {!isLoading && isEmpty && (\n            <Box css={styles.emptyState}>\n              <Text css={styles.itemLabel}>{emptyLabel}</Text>\n              {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n            </Box>\n          )}\n          {!isLoading &&\n            !isEmpty &&\n            collection.group().map(([type, group]) => (\n              <NS.ItemGroup key={type}>\n                {type && (\n                  <NS.ItemGroupLabel asChild>\n                    <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                  </NS.ItemGroupLabel>\n                )}\n                {group.map(renderItem)}\n              </NS.ItemGroup>\n            ))}\n        </Box>\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAyBA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,oBACA,gBACA,YACA,aACA,aACA,aAC6B;CAC7B,MAAM,EAAE,KAAK,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAClE,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,CAAC,OAAO,SAAS,UAAU;GAAG,KAAK;GAAY,GAAI;GAApE,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAU,UAAU;KAArC,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}

package/dist/components/BitkitSteps/BitkitSteps.d.ts

@@ -3,6 +3,13 @@ import { ReactNode } from 'react';
 export type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';
 export interface BitkitStepsProps extends Omit<StepsRootProps, 'children' | 'count' | 'linear' | 'orientation' | 'step'> {
     children: ReactNode;
+    /**
+     * `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout
+     * below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed
+     * state. `vertical` stays vertical at every width.
+     *
+     * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.
+     */
     orientation?: 'horizontal' | 'vertical';
     step?: number;
 }
@@ -12,6 +19,10 @@ export interface BitkitStepsItemProps {
         isExternal?: boolean;
         onClick?: () => void;
     };
+    /**
+     * A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at
+     * every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.
+     */
     helperText?: ReactNode;
     label: string;
     state?: BitkitStepsItemState;

package/dist/components/BitkitSteps/BitkitSteps.js

@@ -53,17 +53,14 @@ var BitkitSteps = forwardRef((props, ref) => {
 		orientation,
 		step,
 		children: /* @__PURE__ */ jsx(Steps.List, { children: Children.map(children, (child, index) => {
-			if (isValidElement(child)) return cloneElement(child, {
-				_index: index,
-				_orientation: orientation
-			});
+			if (isValidElement(child)) return cloneElement(child, { _index: index });
 			return child;
 		}) })
 	});
 });
 BitkitSteps.displayName = "BitkitSteps";
 var BitkitStepsItem = forwardRef((props, ref) => {
-	const { _index = 0, _orientation = "horizontal", action, helperText, label, state } = props;
+	const { _index = 0, action, helperText, label, state } = props;
 	const styles = useStepsStyles();
 	const status = getEffectiveStatus(state, _index, useStepsContext().value);
 	const resolvedAction = status === "completed" ? action : void 0;
@@ -82,7 +79,7 @@ var BitkitStepsItem = forwardRef((props, ref) => {
 				children: [/* @__PURE__ */ jsx(Steps.Title, {
 					...statusAttr,
 					children: renderLabel(label, resolvedAction)
-				}), _orientation === "vertical" && helperText && /* @__PURE__ */ jsx(Steps.Description, {
+				}), helperText && /* @__PURE__ */ jsx(Steps.Description, {
 					...statusAttr,
 					children: helperText
 				})]

package/dist/components/BitkitSteps/BitkitSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n  itemState: BitkitStepsItemState | undefined,\n  index: number,\n  step: number,\n): EffectiveStatus => {\n  if (itemState === 'disabled') return 'disabled';\n  if (itemState === 'invalid') return 'invalid';\n  if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n  if (index < step) return 'completed';\n  if (index === step) return 'inProgress';\n  return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n  if (status === 'completed') return <IconCheck size=\"16\" />;\n  if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n  if (status === 'invalid') return '!';\n  return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n  if (!action) return label;\n\n  // Links don't look like links at rest — only the underline + purple color on hover reveals\n  // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n  // already adds the underline on hover; we only need to swap the color.\n  if (action.href) {\n    return (\n      <Link\n        _hover={{ color: 'text/link' }}\n        href={action.href}\n        onClick={action.onClick}\n        rel={action.isExternal ? 'noopener noreferrer' : undefined}\n        target={action.isExternal ? '_blank' : undefined}\n      >\n        {label}\n      </Link>\n    );\n  }\n\n  return (\n    <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n      {label}\n    </Link>\n  );\n};\n\nexport interface BitkitStepsProps extends Omit<\n  StepsRootProps,\n  'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n  children: ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n  const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n  const stepCardCtx = useStepCardContext();\n  const step = stepProp ?? stepCardCtx?.step ?? 0;\n  const count = Children.count(children);\n\n  return (\n    <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n      <Steps.List>\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n              _index: index,\n              _orientation: orientation,\n            });\n          }\n          return child;\n        })}\n      </Steps.List>\n    </Steps.Root>\n  );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n  action?: {\n    href?: string;\n    isExternal?: boolean;\n    onClick?: () => void;\n  };\n  helperText?: ReactNode;\n  label: string;\n  state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n  _index?: number;\n  _orientation?: 'horizontal' | 'vertical';\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n  const {\n    _index = 0,\n    _orientation = 'horizontal',\n    action,\n    helperText,\n    label,\n    state,\n  } = props as BitkitStepsItemInternalProps;\n\n  const styles = useStepsStyles();\n  const stepsCtx = useStepsContext();\n  const status = getEffectiveStatus(state, _index, stepsCtx.value);\n  const resolvedAction = status === 'completed' ? action : undefined;\n  const statusAttr = { 'data-step-status': status };\n\n  return (\n    <Steps.Item {...statusAttr} index={_index} ref={ref}>\n      <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n      <Box css={styles.trigger}>\n        <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n        {_orientation === 'vertical' && helperText && (\n          <Steps.Description {...statusAttr}>{helperText}</Steps.Description>\n        )}\n      </Box>\n      <Steps.Separator />\n    </Steps.Item>\n  );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;EAEtC,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;EAC7E,UAAA;CACG,CAAA;AAEV;AAWA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;EAC3F,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD;IACvE,QAAQ;IACR,cAAc;GAChB,CAAC;GAEH,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAkB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SAAS,GACT,eAAe,cACf,QACA,YACA,OACA,UACE;CAEJ,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,CAAA,CAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;EAAhD,UAAA;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;IAAa,UAAA,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;KAAa,UAAA,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,iBAAiB,cAAc,cAC9B,oBAAC,MAAM,aAAP;KAAmB,GAAI;KAAa,UAAA;IAA8B,CAAA,CAEjE;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n  itemState: BitkitStepsItemState | undefined,\n  index: number,\n  step: number,\n): EffectiveStatus => {\n  if (itemState === 'disabled') return 'disabled';\n  if (itemState === 'invalid') return 'invalid';\n  if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n  if (index < step) return 'completed';\n  if (index === step) return 'inProgress';\n  return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n  if (status === 'completed') return <IconCheck size=\"16\" />;\n  if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n  if (status === 'invalid') return '!';\n  return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n  if (!action) return label;\n\n  // Links don't look like links at rest — only the underline + purple color on hover reveals\n  // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n  // already adds the underline on hover; we only need to swap the color.\n  if (action.href) {\n    return (\n      <Link\n        _hover={{ color: 'text/link' }}\n        href={action.href}\n        onClick={action.onClick}\n        rel={action.isExternal ? 'noopener noreferrer' : undefined}\n        target={action.isExternal ? '_blank' : undefined}\n      >\n        {label}\n      </Link>\n    );\n  }\n\n  return (\n    <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n      {label}\n    </Link>\n  );\n};\n\nexport interface BitkitStepsProps extends Omit<\n  StepsRootProps,\n  'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n  children: ReactNode;\n  /**\n   * `horizontal` is a row of steps from `tablet` (848px) up and stacks into the `vertical` layout\n   * below it, where a row has no room — the `StepsCard - mobile` frame's header is this collapsed\n   * state. `vertical` stays vertical at every width.\n   *\n   * The collapse is a CSS media query, so narrowing a wrapper does not trigger it.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n  const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n  const stepCardCtx = useStepCardContext();\n  const step = stepProp ?? stepCardCtx?.step ?? 0;\n  const count = Children.count(children);\n\n  return (\n    <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n      <Steps.List>\n        {Children.map(children, (child, index) => {\n          if (isValidElement(child)) {\n            return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, { _index: index });\n          }\n          return child;\n        })}\n      </Steps.List>\n    </Steps.Root>\n  );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n  action?: {\n    href?: string;\n    isExternal?: boolean;\n    onClick?: () => void;\n  };\n  /**\n   * A second line under the label. It belongs to the stacked layout: a `vertical` list shows it at\n   * every width, a `horizontal` one only below `tablet`, where it has collapsed into that layout.\n   */\n  helperText?: ReactNode;\n  label: string;\n  state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n  _index?: number;\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n  const { _index = 0, action, helperText, label, state } = props as BitkitStepsItemInternalProps;\n\n  const styles = useStepsStyles();\n  const stepsCtx = useStepsContext();\n  const status = getEffectiveStatus(state, _index, stepsCtx.value);\n  const resolvedAction = status === 'completed' ? action : undefined;\n  const statusAttr = { 'data-step-status': status };\n\n  return (\n    <Steps.Item {...statusAttr} index={_index} ref={ref}>\n      <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n      <Box css={styles.trigger}>\n        <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n        {helperText && <Steps.Description {...statusAttr}>{helperText}</Steps.Description>}\n      </Box>\n      <Steps.Separator />\n    </Steps.Item>\n  );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;EAEtC,UAAA;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;EAC7E,UAAA;CACG,CAAA;AAEV;AAkBA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;EAC3F,UAAA,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD,EAAE,QAAQ,MAAM,CAAC;GAE5F,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAqB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,SAAS,GAAG,QAAQ,YAAY,OAAO,UAAU;CAEzD,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,CAAA,CAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;EAAhD,UAAA;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;IAAa,UAAA,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;KAAa,UAAA,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,cAAc,oBAAC,MAAM,aAAP;KAAmB,GAAI;KAAa,UAAA;IAA8B,CAAA,CAC9E;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -94,5 +94,3 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
-export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
-export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

@@ -384,9 +384,6 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
-import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
-import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
-import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

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

@@ -39,8 +39,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                     textStyle: "body/md/semibold";
                 };
             } | undefined;
-            content?: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList?: {
+                maxHeight: `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";
@@ -52,18 +52,6 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             emptyState?: {
                 paddingBlock: "8";
             } | undefined;
-            errorState?: {
-                paddingBlock: "4";
-            } | undefined;
-            errorLabel?: {
-                textStyle: "body/md/regular";
-            } | undefined;
-            errorIcon?: {
-                marginBlockStart: "4";
-            } | undefined;
-            errorTextBlock?: {
-                paddingBlock: "2";
-            } | undefined;
             action?: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "errorLabel" | "searchInputGroup" | "searchInput" | "searchClear" | "errorState" | "itemList" | "errorIcon" | "errorTextBlock" | "itemHelperText" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
     hasStatusIcon: {
         true: {
             trigger: {
@@ -39,8 +39,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/lg/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -52,12 +52,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "12";
             };
-            errorState: {
-                paddingBlock: "8";
-            };
-            errorLabel: {
-                textStyle: "body/lg/regular";
-            };
             action: {
                 minHeight: "48";
                 paddingBlock: "12";
@@ -104,8 +98,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";
@@ -117,18 +111,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "8";
             };
-            errorState: {
-                paddingBlock: "4";
-            };
-            errorLabel: {
-                textStyle: "body/md/regular";
-            };
-            errorIcon: {
-                marginBlockStart: "4";
-            };
-            errorTextBlock: {
-                paddingBlock: "2";
-            };
             action: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -24,11 +24,7 @@ var selectSlotRecipe = defineSlotRecipe({
 		"itemHelperText",
 		"itemLoading",
 		"itemLoadingLabel",
-		"emptyState",
-		"errorState",
-		"errorIcon",
-		"errorTextBlock",
-		"errorLabel"
+		"emptyState"
 	],
 	base: {
 		trigger: {
@@ -119,7 +115,6 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		itemList: {
 			flex: "1 1 auto",
-			maxHeight: "var(--select-menu-list-max-height)",
 			minHeight: 0,
 			overflowY: "auto",
 			paddingBlock: "8"
@@ -149,29 +144,6 @@ var selectSlotRecipe = defineSlotRecipe({
 			alignItems: "flex-start",
 			paddingInline: "16"
 		},
-		errorState: {
-			display: "flex",
-			alignItems: "flex-start",
-			gap: "12",
-			paddingInlineStart: "16",
-			paddingInlineEnd: "24"
-		},
-		errorIcon: {
-			color: "icon/negative",
-			flexShrink: 0
-		},
-		errorTextBlock: {
-			display: "flex",
-			flexDirection: "column",
-			flex: 1,
-			minWidth: 0
-		},
-		errorLabel: {
-			color: "text/body",
-			maxWidth: "100%",
-			minWidth: 0,
-			truncate: true
-		},
 		itemIcon: {
 			color: "icon/secondary",
 			"[data-state=\"checked\"] &": { color: "icon/interactive" }
@@ -327,15 +299,13 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				content: { "--select-menu-list-max-height": rem(280) },
+				itemList: { maxHeight: rem(280) },
 				itemLabel: {
 					textStyle: "body/lg/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/lg/regular" },
 				emptyState: { paddingBlock: "12" },
-				errorState: { paddingBlock: "8" },
-				errorLabel: { textStyle: "body/lg/regular" },
 				action: {
 					minHeight: "48",
 					paddingBlock: "12",
@@ -370,17 +340,13 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				content: { "--select-menu-list-max-height": rem(236) },
+				itemList: { maxHeight: rem(236) },
 				itemLabel: {
 					textStyle: "body/md/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/md/regular" },
 				emptyState: { paddingBlock: "8" },
-				errorState: { paddingBlock: "4" },
-				errorLabel: { textStyle: "body/md/regular" },
-				errorIcon: { marginBlockStart: "4" },
-				errorTextBlock: { paddingBlock: "2" },
 				action: {
 					minHeight: "40",
 					paddingBlock: "8",

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

@@ -1 +1 @@
-{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n    'errorState',\n    'errorIcon',\n    'errorTextBlock',\n    'errorLabel',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      maxHeight: 'var(--select-menu-list-max-height)',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    errorState: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '24',\n    },\n    errorIcon: {\n      color: 'icon/negative',\n      flexShrink: 0,\n    },\n    errorTextBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: 1,\n      minWidth: 0,\n    },\n    errorLabel: {\n      color: 'text/body',\n      maxWidth: '100%',\n      minWidth: 0,\n      truncate: true,\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 48px item + 16px paddingBlock\n          '--select-menu-list-max-height': rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        errorState: {\n          paddingBlock: '8',\n        },\n        errorLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          '--select-menu-list-max-height': rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        errorState: {\n          paddingBlock: '4',\n        },\n        errorLabel: {\n          textStyle: 'body/md/regular',\n        },\n        errorIcon: {\n          marginBlockStart: '4',\n        },\n        errorTextBlock: {\n          paddingBlock: '2',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 48px item + 16px paddingBlock\n          maxHeight: rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          maxHeight: rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}

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

@@ -16,7 +16,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
 		},
 		header: {
 			paddingBlockStart: "32",
-			paddingInline: "32"
+			paddingInline: {
+				base: "24",
+				tablet: "32"
+			}
 		},
 		body: {
 			display: "flex",
@@ -24,7 +27,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
 			gap: "24",
 			paddingBlockEnd: "48",
 			paddingBlockStart: "32",
-			paddingInline: "32"
+			paddingInline: {
+				base: "24",
+				tablet: "32"
+			}
 		},
 		titleGroup: {
 			display: "flex",
@@ -46,7 +52,10 @@ var stepCardSlotRecipe = defineSlotRecipe({
 			display: "flex",
 			gap: "16",
 			justifyContent: "flex-end",
-			padding: "32"
+			padding: {
+				base: "24",
+				tablet: "32"
+			}
 		}
 	}
 });