@bitrise/bitkit-v2 0.3.461 → 0.3.462-beta.2923

package/dist/components/BitkitUISideNav/UISideNavLink.js

@@ -0,0 +1,58 @@
+import IconArrowNortheast from "../../icons/IconArrowNortheast.js";
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUISideNav/UISideNavLink.tsx
+var UISideNavLink = forwardRef((props, ref) => {
+	const { children, css, href, icon: Icon, isExternal, rel, secondaryText, status, target, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Box, {
+			css: styles.linkIconBlock,
+			children: [/* @__PURE__ */ jsx(Icon, { css: styles.linkIcon }), status && /* @__PURE__ */ jsx(Box, {
+				css: styles.linkStatusDot,
+				"data-status": status
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Box, {
+			css: styles.linkTextBlock,
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.linkLabel,
+				children
+			}), secondaryText && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.linkSecondaryText,
+				children: secondaryText
+			})]
+		}),
+		isExternal && /* @__PURE__ */ jsx(IconArrowNortheast, { css: styles.linkIcon })
+	] });
+	const rootProps = {
+		"data-with-secondary": secondaryText ? "" : void 0,
+		...rest,
+		css: [styles.link, css]
+	};
+	if (href === void 0) return /* @__PURE__ */ jsx(chakra.button, {
+		ref,
+		type: "button",
+		...rootProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(chakra.a, {
+		ref,
+		href,
+		rel: isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel,
+		target: isExternal ? "_blank" : target,
+		...rootProps,
+		children: content
+	});
+});
+UISideNavLink.displayName = "BitkitUISideNav.Link";
+//#endregion
+export { UISideNavLink as default };
+
+//# sourceMappingURL=UISideNavLink.js.map

package/dist/components/BitkitUISideNav/UISideNavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavLink.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavLink.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type Ref } from 'react';\n\nimport { type BitkitIconComponent, IconArrowNortheast } from '../../icons';\nimport { useUISideNavContext } from './UISideNavContext';\n\ninterface UISideNavLinkCommonProps {\n  children: string;\n  icon: BitkitIconComponent;\n  /**\n   * A second line under the label, for a row that reports something rather than just naming a\n   * destination. It steps the row up to 56px and the label down to the smaller semibold size.\n   */\n  secondaryText?: string;\n  /**\n   * A coloured dot on the icon's trailing bottom corner. Use it with `secondaryText`, which is\n   * what spells the state out; the dot alone only carries colour.\n   */\n  status?: 'critical' | 'neutral' | 'success';\n}\n\nexport interface BitkitUISideNavLinkAsAnchorProps\n  extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  /** Adds the north-east arrow and the usual `target`/`rel` pair for a link leaving the app. */\n  isExternal?: boolean;\n}\n\nexport interface BitkitUISideNavLinkAsButtonProps\n  extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'button'>, 'children'> {\n  href?: undefined;\n  isExternal?: undefined;\n  /** Makes the row a button instead of a link — for one that opens a dialog rather than navigating. */\n  onClick: NonNullable<HTMLChakraProps<'button'>['onClick']>;\n}\n\nexport type BitkitUISideNavLinkProps = BitkitUISideNavLinkAsAnchorProps | BitkitUISideNavLinkAsButtonProps;\n\nconst UISideNavLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, BitkitUISideNavLinkProps>((props, ref) => {\n  const {\n    children,\n    css,\n    href,\n    icon: Icon,\n    isExternal,\n    rel,\n    secondaryText,\n    status,\n    target,\n    ...rest\n  } = props as BitkitUISideNavLinkAsAnchorProps;\n\n  const { styles } = useUISideNavContext();\n\n  const content = (\n    <>\n      <Box css={styles.linkIconBlock}>\n        <Icon css={styles.linkIcon} />\n        {status && <Box css={styles.linkStatusDot} data-status={status} />}\n      </Box>\n      <Box css={styles.linkTextBlock}>\n        <Text as=\"span\" css={styles.linkLabel}>\n          {children}\n        </Text>\n        {secondaryText && (\n          <Text as=\"span\" css={styles.linkSecondaryText}>\n            {secondaryText}\n          </Text>\n        )}\n      </Box>\n      {isExternal && <IconArrowNortheast css={styles.linkIcon} />}\n    </>\n  );\n\n  const rootProps = {\n    'data-with-secondary': secondaryText ? '' : undefined,\n    ...rest,\n    css: [styles.link, css],\n  };\n\n  // `chakra.button` / `chakra.a` rather than `Button` / `Link`: the row is styled entirely by the\n  // nav's own `link` slot, and either named primitive would layer its own recipe over it.\n  if (href === undefined) {\n    return (\n      <chakra.button ref={ref as Ref<HTMLButtonElement>} type=\"button\" {...(rootProps as HTMLChakraProps<'button'>)}>\n        {content}\n      </chakra.button>\n    );\n  }\n\n  return (\n    <chakra.a\n      ref={ref as Ref<HTMLAnchorElement>}\n      href={href}\n      rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n      target={isExternal ? '_blank' : target}\n      {...rootProps}\n    >\n      {content}\n    </chakra.a>\n  );\n});\n\nUISideNavLink.displayName = 'BitkitUISideNav.Link';\n\nexport default UISideNavLink;\n"],"mappings":";;;;;;;;AAwCA,IAAM,gBAAgB,YAA6E,OAAO,QAAQ;CAChH,MAAM,EACJ,UACA,KACA,MACA,MAAM,MACN,YACA,KACA,eACA,QACA,QACA,GAAG,SACD;CAEJ,MAAM,EAAE,WAAW,oBAAoB;CAEvC,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD,EAAM,KAAK,OAAO,SAAW,CAAA,GAC5B,UAAU,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAe,eAAa;GAAS,CAAA,CAC9D;;EACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;IAAO,KAAK,OAAO;IACzB;GACG,CAAA,GACL,iBACC,oBAAC,MAAD;IAAM,IAAG;IAAO,KAAK,OAAO;IACzB,UAAA;GACG,CAAA,CAEL;;EACJ,cAAc,oBAAC,oBAAD,EAAoB,KAAK,OAAO,SAAW,CAAA;CAC1D,EAAA,CAAA;CAGJ,MAAM,YAAY;EAChB,uBAAuB,gBAAgB,KAAK,KAAA;EAC5C,GAAG;EACH,KAAK,CAAC,OAAO,MAAM,GAAG;CACxB;CAIA,IAAI,SAAS,KAAA,GACX,OACE,oBAAC,OAAO,QAAR;EAAoB;EAA+B,MAAK;EAAS,GAAK;EACnE,UAAA;CACY,CAAA;CAInB,OACE,oBAAC,OAAO,GAAR;EACO;EACC;EACN,KAAK,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjF,QAAQ,aAAa,WAAW;EAChC,GAAI;EAEH,UAAA;CACO,CAAA;AAEd,CAAC;AAED,cAAc,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.d.ts

@@ -0,0 +1,45 @@
+import { Select, SelectTriggerProps } from '@chakra-ui/react/select';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
+export type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {
+    /**
+     * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —
+     * a workspace always has one, unlike a plain menu item.
+     */
+    avatar?: string;
+};
+/**
+ * The list length at which the design adds the search input. Below it the menu is short enough
+ * to read at a glance and a search field would only be in the way. Exported for the stories,
+ * which label each list by the side of this it falls on — not part of the package's surface.
+ */
+export declare const searchableFrom = 6;
+export type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {
+    /**
+     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
+     * presence is the toggle — there is no boolean for it.
+     */
+    children?: BitkitSelectMenuActionChild;
+    isLoading?: boolean;
+    /** The small uppercase caption above the workspace name. */
+    label?: string;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
+    value?: string;
+    workspaces: Array<BitkitUISideNavWorkspaceProps>;
+} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
+declare const UISideNavWorkspaceSelector: import('react').ForwardRefExoticComponent<Omit<Select.TriggerProps, "children" | "onChange"> & {
+    /**
+     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
+     * presence is the toggle — there is no boolean for it.
+     */
+    children?: BitkitSelectMenuActionChild;
+    isLoading?: boolean;
+    /** The small uppercase caption above the workspace name. */
+    label?: string;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
+    value?: string;
+    workspaces: Array<BitkitUISideNavWorkspaceProps>;
+} & Omit<BitkitSelectMenuSearchProps, "searchPlaceholder"> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UISideNavWorkspaceSelector;

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js

@@ -0,0 +1,119 @@
+import IconChevronDown from "../../icons/IconChevronDown.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Text } from "@chakra-ui/react/text";
+import { useControllableState } from "@chakra-ui/react/hooks";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { Select } from "@chakra-ui/react/select";
+import { useFilter } from "@chakra-ui/react/locale";
+var UISideNavWorkspaceSelector = forwardRef((props, ref) => {
+	const { children, css, emptyHelperText, emptyLabel, errorHelperText, errorLabel, isLoading, label = "Workspace", onScrolledToBottom, onSearchChange, onValueChange, searchValue, value, workspaces, ...rest } = props;
+	const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();
+	const { contains } = useFilter({ sensitivity: "base" });
+	const [ownQuery, setOwnQuery] = useState("");
+	const [currentValue, setCurrentValue] = useControllableState({
+		defaultValue: void 0,
+		value
+	});
+	const isSearchDelegated = onSearchChange !== void 0;
+	const query = isSearchDelegated ? searchValue : ownQuery;
+	const hasSearch = isSearchDelegated || workspaces.length >= 6;
+	const collection = useMemo(() => {
+		const items = (ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces).map((workspace) => ({
+			...workspace,
+			avatar: workspace.avatar ?? null
+		}));
+		return createListCollection({ items });
+	}, [
+		contains,
+		ownQuery,
+		workspaces
+	]);
+	const lastSelected = useRef(void 0);
+	const matched = workspaces.find((workspace) => workspace.value === currentValue);
+	if (matched) lastSelected.current = matched;
+	const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : void 0);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		collection,
+		css: styles.workspaceRoot,
+		onOpenChange: (details) => {
+			setMenuOpen(details.open);
+			if (!details.open) setOwnQuery("");
+		},
+		onValueChange: (details) => {
+			setCurrentValue(details.value[0]);
+			onValueChange?.(details.value[0]);
+		},
+		positioning: isMobile ? {
+			gutter: 0,
+			offset: { crossAxis: 16 },
+			overflowPadding: 16
+		} : {
+			gutter: -8,
+			offset: { crossAxis: 16 },
+			placement: "bottom-start"
+		},
+		size: "lg",
+		value: currentValue === void 0 ? [] : [currentValue],
+		children: [/* @__PURE__ */ jsxs(Select.Control, {
+			css: styles.workspaceControl,
+			children: [/* @__PURE__ */ jsx(Select.HiddenSelect, {}), /* @__PURE__ */ jsxs(Select.Trigger, {
+				ref,
+				unstyled: true,
+				...rest,
+				css: [styles.workspace, css],
+				children: [
+					/* @__PURE__ */ jsx(BitkitAvatar, {
+						borderColor: "border/minimal",
+						borderWidth: "1",
+						name: selected?.label ?? "",
+						size: "40",
+						src: selected?.avatar ?? "",
+						variant: "image"
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						css: styles.workspaceTextBlock,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceLabel,
+							children: label
+						}), /* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceValue,
+							children: selected?.label
+						})]
+					}),
+					/* @__PURE__ */ jsx(Select.Indicator, {
+						css: styles.workspaceChevron,
+						children: /* @__PURE__ */ jsx(IconChevronDown, {})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Portal, {
+			container: isMobile ? menuContainerRef : void 0,
+			children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+				collection,
+				contentProps: { css: styles.workspaceMenu },
+				emptyHelperText,
+				emptyLabel,
+				errorHelperText,
+				errorLabel,
+				isLoading,
+				onScrolledToBottom,
+				onSearchChange: hasSearch ? onSearchChange ?? setOwnQuery : void 0,
+				searchPlaceholder: "Search your workspaces",
+				searchValue: query,
+				size: "lg",
+				children
+			}) })
+		})]
+	});
+});
+UISideNavWorkspaceSelector.displayName = "BitkitUISideNav.WorkspaceSelector";
+//#endregion
+export { UISideNavWorkspaceSelector as default };
+
+//# sourceMappingURL=UISideNavWorkspaceSelector.js.map

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavWorkspaceSelector.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavWorkspaceSelector.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {\n  /**\n   * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —\n   * a workspace always has one, unlike a plain menu item.\n   */\n  avatar?: string;\n};\n\n/**\n * The list length at which the design adds the search input. Below it the menu is short enough\n * to read at a glance and a search field would only be in the way. Exported for the stories,\n * which label each list by the side of this it falls on — not part of the package's surface.\n */\nexport const searchableFrom = 6;\n\nexport type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {\n  /**\n   * A single `BitkitSelectMenuAction` shown under the list, typically \"Create workspace\". Its\n   * presence is the toggle — there is no boolean for it.\n   */\n  children?: BitkitSelectMenuActionChild;\n  isLoading?: boolean;\n  /** The small uppercase caption above the workspace name. */\n  label?: string;\n  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */\n  value?: string;\n  workspaces: Array<BitkitUISideNavWorkspaceProps>;\n  // The copy is the design's, not the consumer's, so the placeholder is not on the way through.\n} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst UISideNavWorkspaceSelector = forwardRef<HTMLButtonElement, BitkitUISideNavWorkspaceSelectorProps>(\n  (props, ref) => {\n    const {\n      children,\n      css,\n      emptyHelperText,\n      emptyLabel,\n      errorHelperText,\n      errorLabel,\n      isLoading,\n      label = 'Workspace',\n      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n    const { contains } = useFilter({ sensitivity: 'base' });\n\n    const [ownQuery, setOwnQuery] = useState('');\n    const [currentValue, setCurrentValue] = useControllableState<string | undefined>({\n      defaultValue: undefined,\n      value,\n    });\n\n    // A consumer that passes `onSearchChange` is searching somewhere we cannot see — a server, a\n    // paged list — so `workspaces` is already the result and its length says nothing about how\n    // many there are. They keep the input and the filtering; otherwise both are ours.\n    const isSearchDelegated = onSearchChange !== undefined;\n    const query = isSearchDelegated ? searchValue : ownQuery;\n    const hasSearch = isSearchDelegated || workspaces.length >= searchableFrom;\n\n    const collection = useMemo(() => {\n      const matches = ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces;\n\n      // `null` rather than nothing for a workspace without a logo: that is what tells the menu to\n      // draw the initials, where an absent `avatar` would leave the row with no avatar at all.\n      const items: Array<BitkitSelectMenuItemProps> = matches.map((workspace) => ({\n        ...workspace,\n        avatar: workspace.avatar ?? null,\n      }));\n\n      return createListCollection({ items });\n    }, [contains, ownQuery, workspaces]);\n\n    // `workspaces` is the search result while the search is delegated, so the selected workspace\n    // can drop out of it mid-query. The cell keeps naming the workspace you are actually in.\n    const lastSelected = useRef<BitkitUISideNavWorkspaceProps>(undefined);\n    const matched = workspaces.find((workspace) => workspace.value === currentValue);\n    if (matched) lastSelected.current = matched;\n    const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : undefined);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n        }}\n        onValueChange={(details) => {\n          setCurrentValue(details.value[0]);\n          onValueChange?.(details.value[0]);\n        }}\n        // Tucked into the rail rather than hung off it: inset from the rail's edge and lapping\n        // over the workspace cell, so the menu reads as the cell unfolding.\n        positioning={\n          isMobile\n            ? { gutter: 0, offset: { crossAxis: 16 }, overflowPadding: 16 }\n            : { gutter: -8, offset: { crossAxis: 16 }, placement: 'bottom-start' }\n        }\n        size=\"lg\"\n        value={currentValue === undefined ? [] : [currentValue]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger ref={ref} unstyled {...rest} css={[styles.workspace, css]}>\n            <BitkitAvatar\n              borderColor=\"border/minimal\"\n              borderWidth=\"1\"\n              name={selected?.label ?? ''}\n              size=\"40\"\n              src={selected?.avatar ?? ''}\n              variant=\"image\"\n            />\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel}>{label}</Text>\n              <Text css={styles.workspaceValue}>{selected?.label}</Text>\n            </Box>\n            <Select.Indicator css={styles.workspaceChevron}>\n              <IconChevronDown />\n            </Select.Indicator>\n          </Select.Trigger>\n        </Select.Control>\n        {/*\n          In the drawer the menu goes to the panel rather than the document: the panel scrolls\n          under its own header, so a menu left in the flow would travel with the rows and be\n          clipped by them, and anywhere outside the panel is outside the dialog's focus trap.\n        */}\n        <Portal container={isMobile ? menuContainerRef : undefined}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              contentProps={{ css: styles.workspaceMenu }}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={hasSearch ? (onSearchChange ?? setOwnQuery) : undefined}\n              searchPlaceholder=\"Search your workspaces\"\n              searchValue={query}\n              size=\"lg\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    );\n  },\n);\n\nUISideNavWorkspaceSelector.displayName = 'BitkitUISideNav.WorkspaceSelector';\n\nexport default UISideNavWorkspaceSelector;\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -93,3 +93,5 @@ export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './B
 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

@@ -383,6 +383,9 @@ 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, 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 };
+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, 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 };

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;
-            itemList?: {
-                maxHeight: `${number}rem`;
+            content?: {
+                '--select-menu-list-max-height': `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";
@@ -52,6 +52,18 @@ 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" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "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" | "errorLabel" | "searchInputGroup" | "searchInput" | "searchClear" | "errorState" | "itemList" | "errorIcon" | "errorTextBlock" | "itemHelperText" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "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";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -52,6 +52,12 @@ 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";
@@ -98,8 +104,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            itemList: {
-                maxHeight: `${number}rem`;
+            content: {
+                '--select-menu-list-max-height': `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";
@@ -111,6 +117,18 @@ 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,7 +24,11 @@ var selectSlotRecipe = defineSlotRecipe({
 		"itemHelperText",
 		"itemLoading",
 		"itemLoadingLabel",
-		"emptyState"
+		"emptyState",
+		"errorState",
+		"errorIcon",
+		"errorTextBlock",
+		"errorLabel"
 	],
 	base: {
 		trigger: {
@@ -115,6 +119,7 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		itemList: {
 			flex: "1 1 auto",
+			maxHeight: "var(--select-menu-list-max-height)",
 			minHeight: 0,
 			overflowY: "auto",
 			paddingBlock: "8"
@@ -144,6 +149,29 @@ 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" }
@@ -299,13 +327,15 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(280) },
+				content: { "--select-menu-list-max-height": 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",
@@ -340,13 +370,17 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				itemList: { maxHeight: rem(236) },
+				content: { "--select-menu-list-max-height": 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  ],\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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"}
+{"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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"}