@bitrise/bitkit-v2 0.3.201 → 0.3.203

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts

@@ -1,35 +1,44 @@
 import { ListCollection } from '@chakra-ui/react/collection';
 import { SelectContentProps } from '@chakra-ui/react/select';
-import { AnchorHTMLAttributes } from 'react';
 import { BitkitIconComponent } from '../../icons';
 export type BitkitSelectMenuCreateItemProps = {
-    createItemHref?: string;
     createItemLabel?: string;
-    createItemProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
     onCreateItem?: () => void;
 };
 export type BitkitSelectMenuSearchProps = {
     hasSearch?: boolean;
 } & ({
     hasSearch: true;
-    onSearchChange?: (searchText: string) => void;
+    onSearchChange: (searchText: string) => void;
+    searchValue: string;
 } | {
     hasSearch?: false;
     onSearchChange?: never;
+    searchValue?: never;
 });
 export type BitkitSelectMenuItemProps = {
     value: string;
     label: string;
     group?: string;
     icon?: BitkitIconComponent;
+    avatar?: string;
+    helperText?: string;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type BitkitSelectMenuEmptyStateProps = {
+    emptyLabel?: string;
+    emptyHelperText?: string;
 };
 export type BitkitSelectMenuProps = {
     collection: ListCollection<BitkitSelectMenuItemProps>;
-    contentProps?: BitkitSelectContentProps;
+    /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers
+     *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The
+     *  public components (BitkitSelect, BitkitCombobox) do not expose this escape hatch. */
+    contentProps?: SelectContentProps;
     isLoading?: boolean;
     size?: 'md' | 'lg';
     variant?: 'select' | 'combobox';
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
-export type BitkitSelectContentProps = SelectContentProps;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<BitkitSelectMenuProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelectMenu;

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -1,6 +1,6 @@
 import IconCheck from "../../icons/IconCheck.js";
-import IconMagnifier from "../../icons/IconMagnifier.js";
-import IconPlus from "../../icons/IconPlus.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import { SelectMenuShell } from "./SelectMenuShell.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { Text } from "@chakra-ui/react/text";
@@ -9,91 +9,83 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Spinner } from "@chakra-ui/react/spinner";
 import { Select } from "@chakra-ui/react/select";
 import { Combobox } from "@chakra-ui/react/combobox";
-import { Input } from "@chakra-ui/react/input";
-import { InputGroup } from "@chakra-ui/react/input-group";
-import { Separator } from "@chakra-ui/react/separator";
 //#region lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx
 var BitkitSelectMenu = forwardRef((props, ref) => {
-	const { collection, contentProps = {}, createItemHref, createItemLabel = "Create item", createItemProps, hasSearch = false, isLoading = false, onCreateItem, onSearchChange, size, variant = "select" } = props;
+	const { collection, variant = "select", size, ...shellProps } = props;
 	const NS = variant === "combobox" ? Combobox : Select;
 	const styles = useSlotRecipe({ key: "select" })({ size });
 	const iconSize = size === "md" ? "16" : "24";
-	return /* @__PURE__ */ jsxs(NS.Content, {
-		css: styles.content,
-		ref,
-		...contentProps,
+	return /* @__PURE__ */ jsx(SelectMenuShell, {
+		NS,
+		collection,
+		contentRef: ref,
+		iconSize,
+		renderItem: (item) => /* @__PURE__ */ jsx(SelectMenuItem, {
+			NS,
+			item,
+			iconSize,
+			styles
+		}, item.value),
+		size,
+		styles,
+		...shellProps
+	});
+});
+BitkitSelectMenu.displayName = "BitkitSelectMenu";
+var SelectMenuItem = ({ NS, item, iconSize, styles }) => {
+	const Icon = item.icon;
+	if (item.loading) return /* @__PURE__ */ jsxs(Box, {
+		css: styles.item,
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			variant: "purple",
+			css: styles.itemLoading
+		}), /* @__PURE__ */ jsx(Text, {
+			css: styles.itemLoadingLabel,
+			children: "Loading..."
+		})]
+	});
+	return /* @__PURE__ */ jsxs(NS.Item, {
+		css: styles.item,
+		item,
 		children: [
-			hasSearch && /* @__PURE__ */ jsx(InputGroup, {
-				startElement: /* @__PURE__ */ jsx(IconMagnifier, {
-					size: iconSize,
-					color: "icon/tertiary"
-				}),
-				css: styles.searchInputGroup,
-				children: /* @__PURE__ */ jsx(Input, {
-					placeholder: "Search...",
-					css: styles.searchInput,
-					onChange: (e) => onSearchChange?.(e.target.value)
+			item.avatar && /* @__PURE__ */ jsx(Box, {
+				"data-slot": "avatar",
+				css: { "[data-disabled] &": { opacity: .5 } },
+				children: /* @__PURE__ */ jsx(BitkitAvatar, {
+					variant: "image",
+					src: item.avatar,
+					name: item.label,
+					size: iconSize === "24" ? "32" : "24"
 				})
 			}),
-			/* @__PURE__ */ jsx(Box, {
-				overflowY: "auto",
-				children: isLoading ? /* @__PURE__ */ jsxs(Box, {
+			/* @__PURE__ */ jsxs(Box, {
+				css: styles.itemContent,
+				children: [/* @__PURE__ */ jsxs(Box, {
 					display: "flex",
 					alignItems: "center",
-					gap: "12",
-					justifyContent: "left",
-					css: styles.item,
-					children: [/* @__PURE__ */ jsx(Spinner, { variant: "purple" }), /* @__PURE__ */ jsx(Text, {
-						color: "text/secondary",
-						textStyle: "body/md/regular",
-						children: "Loading..."
+					gap: "8",
+					children: [Icon && !item.avatar && /* @__PURE__ */ jsx(Icon, {
+						color: "icon/primary",
+						size: iconSize
+					}), /* @__PURE__ */ jsx(Text, {
+						css: styles.itemLabel,
+						children: item.label
 					})]
-				}) : collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsxs(NS.ItemGroupLabel, {
-					css: styles.itemGroupLabel,
-					children: [/* @__PURE__ */ jsx(Text, {
-						color: "text/tertiary",
-						flexShrink: "0",
-						textStyle: "heading/h6",
-						children: type
-					}), /* @__PURE__ */ jsx(Separator, { flex: "1" })]
-				}), group.map((item) => {
-					const Icon = item.icon;
-					return /* @__PURE__ */ jsxs(NS.Item, {
-						css: styles.item,
-						item,
-						children: [/* @__PURE__ */ jsxs(Box, {
-							display: "flex",
-							alignItems: "center",
-							gap: "8",
-							children: [Icon && /* @__PURE__ */ jsx(Icon, {
-								color: "icon/primary",
-								size: iconSize
-							}), item.label]
-						}), /* @__PURE__ */ jsx(NS.ItemIndicator, {
-							asChild: true,
-							children: /* @__PURE__ */ jsx(IconCheck, {
-								size: iconSize,
-								css: styles.itemIndicator
-							})
-						})]
-					}, item.value);
-				})] }, type))
+				}), item.helperText && /* @__PURE__ */ jsx(Text, {
+					css: styles.itemHelperText,
+					children: item.helperText
+				})]
 			}),
-			(createItemHref || onCreateItem) && /* @__PURE__ */ jsxs(Box, {
-				as: createItemHref ? "a" : "button",
-				css: styles.createItem,
-				...createItemHref ? { href: createItemHref } : {},
-				onClick: onCreateItem,
-				...createItemProps,
-				children: [/* @__PURE__ */ jsx(IconPlus, {
+			/* @__PURE__ */ jsx(NS.ItemIndicator, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(IconCheck, {
 					size: iconSize,
-					color: "button/secondary/icon"
-				}), createItemLabel]
+					css: styles.itemIndicator
+				})
 			})
 		]
 	});
-});
-BitkitSelectMenu.displayName = "BitkitSelectMenu";
+};
 //#endregion
 export { BitkitSelectMenu as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Input } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type AnchorHTMLAttributes, forwardRef, type HTMLAttributes } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconMagnifier, IconPlus } from '../../icons';\n\nexport type BitkitSelectMenuCreateItemProps = {\n  createItemHref?: string;\n  createItemLabel?: string;\n  createItemProps?: AnchorHTMLAttributes<HTMLAnchorElement>;\n  onCreateItem?: () => void;\n};\n\nexport type BitkitSelectMenuSearchProps = {\n  hasSearch?: boolean;\n} & (\n  | {\n      hasSearch: true;\n      onSearchChange?: (searchText: string) => void;\n    }\n  | {\n      hasSearch?: false;\n      onSearchChange?: never;\n    }\n);\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n};\n\nexport type BitkitSelectMenuProps = {\n  collection: ListCollection<BitkitSelectMenuItemProps>;\n  contentProps?: BitkitSelectContentProps;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps;\n\nexport type BitkitSelectContentProps = SelectContentProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props: BitkitSelectMenuProps, ref) => {\n  const {\n    collection,\n    contentProps = {},\n    createItemHref,\n    createItemLabel = 'Create item',\n    createItemProps,\n    hasSearch = false,\n    isLoading = false,\n    onCreateItem,\n    onSearchChange,\n    size,\n    variant = 'select',\n  } = props;\n\n  const NS = variant === 'combobox' ? Combobox : Select;\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return (\n    <NS.Content css={styles.content} ref={ref} {...contentProps}>\n      {hasSearch && (\n        <InputGroup\n          startElement={<IconMagnifier size={iconSize} color=\"icon/tertiary\" />}\n          css={styles.searchInputGroup}\n        >\n          <Input placeholder=\"Search...\" css={styles.searchInput} onChange={(e) => onSearchChange?.(e.target.value)} />\n        </InputGroup>\n      )}\n      <Box overflowY=\"auto\">\n        {isLoading ? (\n          <Box display=\"flex\" alignItems=\"center\" gap=\"12\" justifyContent=\"left\" css={styles.item}>\n            <Spinner variant=\"purple\" />\n            <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n              Loading...\n            </Text>\n          </Box>\n        ) : (\n          collection.group().map(([type, group]) => (\n            <NS.ItemGroup key={type}>\n              {type && (\n                <NS.ItemGroupLabel css={styles.itemGroupLabel}>\n                  <Text color=\"text/tertiary\" flexShrink=\"0\" textStyle=\"heading/h6\">\n                    {type}\n                  </Text>\n                  <Separator flex=\"1\" />\n                </NS.ItemGroupLabel>\n              )}\n              {group.map((item) => {\n                const Icon = item.icon;\n                return (\n                  <NS.Item key={item.value} css={styles.item} item={item}>\n                    <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n                      {Icon && <Icon color=\"icon/primary\" size={iconSize} />}\n                      {item.label}\n                    </Box>\n                    <NS.ItemIndicator asChild>\n                      <IconCheck size={iconSize} css={styles.itemIndicator} />\n                    </NS.ItemIndicator>\n                  </NS.Item>\n                );\n              })}\n            </NS.ItemGroup>\n          ))\n        )}\n      </Box>\n      {(createItemHref || onCreateItem) && (\n        <Box\n          as={createItemHref ? 'a' : 'button'}\n          css={styles.createItem}\n          {...(createItemHref ? { href: createItemHref } : {})}\n          onClick={onCreateItem}\n          {...(createItemProps as HTMLAttributes<HTMLDivElement>)}\n        >\n          <IconPlus size={iconSize} color=\"button/secondary/icon\" />\n          {createItemLabel}\n        </Box>\n      )}\n    </NS.Content>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,IAAM,mBAAmB,YAAmD,OAA8B,QAAQ;CAChH,MAAM,EACJ,YACA,eAAe,EAAE,EACjB,gBACA,kBAAkB,eAClB,iBACA,YAAY,OACZ,YAAY,OACZ,cACA,gBACA,MACA,UAAU,aACR;CAEJ,MAAM,KAAK,YAAY,aAAa,WAAW;CAG/C,MAAM,SADS,cAAc,EAAE,KAAK,UAAU,CAAC,CACzB,EAAE,MAAM,CAAC;CAE/B,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QACE,qBAAC,GAAG,SAAJ;EAAY,KAAK,OAAO;EAAc;EAAK,GAAI;YAA/C;GACG,aACC,oBAAC,YAAD;IACE,cAAc,oBAAC,eAAD;KAAe,MAAM;KAAU,OAAM;KAAkB,CAAA;IACrE,KAAK,OAAO;cAEZ,oBAAC,OAAD;KAAO,aAAY;KAAY,KAAK,OAAO;KAAa,WAAW,MAAM,iBAAiB,EAAE,OAAO,MAAM;KAAI,CAAA;IAClG,CAAA;GAEf,oBAAC,KAAD;IAAK,WAAU;cACZ,YACC,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAAK,gBAAe;KAAO,KAAK,OAAO;eAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,UAAW,CAAA,EAC5B,oBAAC,MAAD;MAAM,OAAM;MAAiB,WAAU;gBAAkB;MAElD,CAAA,CACH;SAEN,WAAW,OAAO,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,qBAAC,GAAG,gBAAJ;KAAmB,KAAK,OAAO;eAA/B,CACE,oBAAC,MAAD;MAAM,OAAM;MAAgB,YAAW;MAAI,WAAU;gBAClD;MACI,CAAA,EACP,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,CACJ;QAErB,MAAM,KAAK,SAAS;KACnB,MAAM,OAAO,KAAK;AAClB,YACE,qBAAC,GAAG,MAAJ;MAA0B,KAAK,OAAO;MAAY;gBAAlD,CACE,qBAAC,KAAD;OAAK,SAAQ;OAAO,YAAW;OAAS,KAAI;iBAA5C,CACG,QAAQ,oBAAC,MAAD;QAAM,OAAM;QAAe,MAAM;QAAY,CAAA,EACrD,KAAK,MACF;UACN,oBAAC,GAAG,eAAJ;OAAkB,SAAA;iBAChB,oBAAC,WAAD;QAAW,MAAM;QAAU,KAAK,OAAO;QAAiB,CAAA;OACvC,CAAA,CACX;QARI,KAAK,MAQT;MAEZ,CACW,EAAA,EAvBI,KAuBJ,CACf;IAEA,CAAA;IACJ,kBAAkB,iBAClB,qBAAC,KAAD;IACE,IAAI,iBAAiB,MAAM;IAC3B,KAAK,OAAO;IACZ,GAAK,iBAAiB,EAAE,MAAM,gBAAgB,GAAG,EAAE;IACnD,SAAS;IACT,GAAK;cALP,CAOE,oBAAC,UAAD;KAAU,MAAM;KAAU,OAAM;KAA0B,CAAA,EACzD,gBACG;;GAEG;;EAEf;AAEF,iBAAiB,cAAc"}
+{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { SelectMenuShell } from './SelectMenuShell';\n\nexport type BitkitSelectMenuCreateItemProps = {\n  createItemLabel?: string;\n  onCreateItem?: () => void;\n};\n\nexport type BitkitSelectMenuSearchProps = {\n  hasSearch?: boolean;\n} & (\n  | {\n      hasSearch: true;\n      onSearchChange: (searchText: string) => void;\n      searchValue: string;\n    }\n  | {\n      hasSearch?: false;\n      onSearchChange?: never;\n      searchValue?: never;\n    }\n);\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  avatar?: string;\n  helperText?: string;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n  collection: ListCollection<BitkitSelectMenuItemProps>;\n  /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers\n   *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The\n   *  public components (BitkitSelect, BitkitCombobox) do not expose this escape hatch. */\n  contentProps?: SelectContentProps;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { collection, variant = 'select', size, ...shellProps } = props;\n  const NS = variant === 'combobox' ? Combobox : Select;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => <SelectMenuItem key={item.value} NS={NS} item={item} iconSize={iconSize} styles={styles} />}\n      size={size}\n      styles={styles}\n      {...shellProps}\n    />\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  item: BitkitSelectMenuItemProps;\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, item, iconSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\n\n  if (item.loading) {\n    // Rendered as a plain Box, not NS.Item — Zag's state machine won't track it as\n    // an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <NS.Item css={styles.item} item={item}>\n      {item.avatar && (\n        <Box data-slot=\"avatar\" css={{ '[data-disabled] &': { opacity: 0.5 } }}>\n          <BitkitAvatar variant=\"image\" src={item.avatar} name={item.label} size={iconSize === '24' ? '32' : '24'} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !item.avatar && <Icon color=\"icon/primary\" size={iconSize} />}\n          <Text css={styles.itemLabel}>{item.label}</Text>\n        </Box>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n      <NS.ItemIndicator asChild>\n        <IconCheck size={iconSize} css={styles.itemIndicator} />\n      </NS.ItemIndicator>\n    </NS.Item>\n  );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AA8DA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAChE,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,UAAU,CAAC,CACzB,EAAE,MAAM,CAAC;CAC/B,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,gBAAD;GAAqC;GAAU;GAAgB;GAAkB;GAAU,EAAtE,KAAK,MAAiE;EAC3G;EACE;EACR,GAAI;EACJ,CAAA;EAEJ;AAEF,iBAAiB,cAAc;AAS/B,IAAM,kBAAkB,EAAE,IAAI,MAAM,UAAU,aAAwC;CACpF,MAAM,OAAO,KAAK;AAElB,KAAI,KAAK,QAGP,QACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;GAAe,CAAA,EACrD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;GAAiB,CAAA,CACjD;;AAIV,QACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;YAAjC;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,EAAE,qBAAqB,EAAE,SAAS,IAAK,EAAE;cACpE,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM,aAAa,OAAO,OAAO;KAAQ,CAAA;IACvG,CAAA;GAER,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,OAAM;MAAe,MAAM;MAAY,CAAA,EACtE,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAY,KAAK;MAAa,CAAA,CAC5C;QACL,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;eAAiB,KAAK;KAAkB,CAAA,CAC1E;;GACN,oBAAC,GAAG,eAAJ;IAAkB,SAAA;cAChB,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;KAAiB,CAAA;IACvC,CAAA;GACX"}

package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts

@@ -0,0 +1,29 @@
+import { ListCollection } from '@chakra-ui/react/collection';
+import { Combobox } from '@chakra-ui/react/combobox';
+import { Select, SelectContentProps } from '@chakra-ui/react/select';
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { ReactNode, Ref } from 'react';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
+/**
+ * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.
+ * Handles Content wrapper, search, loading, empty state, groups, and create button —
+ * the caller only provides per-item rendering via renderItem.
+ */
+export type SelectMenuShellProps<T extends {
+    value: string;
+    group?: string;
+}> = {
+    NS: typeof Select | typeof Combobox;
+    collection: ListCollection<T>;
+    contentProps?: SelectContentProps;
+    contentRef?: Ref<HTMLDivElement>;
+    iconSize: '16' | '24';
+    isLoading?: boolean;
+    renderItem: (item: T) => ReactNode;
+    size?: 'md' | 'lg';
+    styles: Record<string, SystemStyleObject>;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+export declare const SelectMenuShell: <T extends {
+    value: string;
+    group?: string;
+}>({ NS, collection, contentProps, contentRef, createItemLabel, emptyHelperText, emptyLabel, hasSearch, iconSize, isLoading, onCreateItem, onSearchChange, renderItem, searchValue, size, styles, }: SelectMenuShellProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -0,0 +1,115 @@
+import IconCross from "../../icons/IconCross.js";
+import IconMagnifier from "../../icons/IconMagnifier.js";
+import IconPlus from "../../icons/IconPlus.js";
+import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { Text } from "@chakra-ui/react/text";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@chakra-ui/react/spinner";
+//#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
+var SelectMenuShell = ({ NS, collection, contentProps, contentRef, createItemLabel = "Create item", emptyHelperText, emptyLabel = "No matching options", hasSearch = false, iconSize, isLoading = false, onCreateItem, onSearchChange, renderItem, searchValue, size, styles }) => {
+	const isEmpty = collection.size === 0;
+	return /* @__PURE__ */ jsxs(NS.Content, {
+		css: styles.content,
+		ref: contentRef,
+		...contentProps,
+		children: [
+			!hasSearch && onCreateItem && /* @__PURE__ */ jsx("span", {
+				"data-autofocus": "",
+				tabIndex: -1,
+				"aria-hidden": "true"
+			}),
+			hasSearch && searchValue !== void 0 && onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
+				iconSize,
+				styles,
+				value: searchValue,
+				onSearchChange
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				css: styles.itemList,
+				children: [
+					isLoading && /* @__PURE__ */ jsxs(Box, {
+						display: "flex",
+						alignItems: "center",
+						gap: "12",
+						justifyContent: "left",
+						css: styles.item,
+						children: [/* @__PURE__ */ jsx(Spinner, { variant: "purple" }), /* @__PURE__ */ jsx(Text, {
+							color: "text/secondary",
+							textStyle: size === "md" ? "body/md/regular" : "body/lg/regular",
+							children: "Loading..."
+						})]
+					}),
+					!isLoading && isEmpty && /* @__PURE__ */ jsxs(Box, {
+						css: styles.emptyState,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.itemLabel,
+							children: emptyLabel
+						}), emptyHelperText && /* @__PURE__ */ jsx(Text, {
+							css: styles.itemHelperText,
+							children: emptyHelperText
+						})]
+					}),
+					!isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsx(NS.ItemGroupLabel, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
+							label: type,
+							paddingBlock: "12",
+							paddingInline: "16"
+						})
+					}), group.map(renderItem)] }, type))
+				]
+			}),
+			onCreateItem && /* @__PURE__ */ jsxs(chakra.button, {
+				type: "button",
+				css: styles.createItem,
+				onClick: onCreateItem,
+				onKeyDown: stopMenuSelectionKeys,
+				children: [/* @__PURE__ */ jsx(IconPlus, {
+					size: iconSize,
+					color: "button/secondary/icon"
+				}), createItemLabel]
+			})
+		]
+	});
+};
+/**
+* Zag's Select.Content keyDown handler fires ITEM.CLICK and preventDefaults on Enter/Space
+* regardless of which descendant is focused. For the create row (a real <button> sibling of
+* the items list), that hijacks its native activation. Stopping propagation at the element
+* keeps its own onClick firing via the browser's native keyboard-activation path.
+*/
+var stopMenuSelectionKeys = (event) => {
+	if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+};
+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 };
+
+//# sourceMappingURL=SelectMenuShell.js.map

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

@@ -0,0 +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, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier, IconPlus } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and create button —\n * the caller only provides per-item rendering via renderItem.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: '16' | '24';\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  size?: 'md' | 'lg';\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  collection,\n  contentProps,\n  contentRef,\n  createItemLabel = 'Create item',\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  hasSearch = false,\n  iconSize,\n  isLoading = false,\n  onCreateItem,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  size,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n\n  return (\n    <NS.Content css={styles.content} ref={contentRef} {...contentProps}>\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 create\n        button, 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      {!hasSearch && onCreateItem && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n      {hasSearch && searchValue !== undefined && onSearchChange && (\n        <SelectMenuSearch iconSize={iconSize} styles={styles} value={searchValue} onSearchChange={onSearchChange} />\n      )}\n      <Box css={styles.itemList}>\n        {isLoading && (\n          <Box display=\"flex\" alignItems=\"center\" gap=\"12\" justifyContent=\"left\" css={styles.item}>\n            <Spinner variant=\"purple\" />\n            <Text color=\"text/secondary\" textStyle={size === 'md' ? 'body/md/regular' : 'body/lg/regular'}>\n              Loading...\n            </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      {onCreateItem && (\n        <chakra.button type=\"button\" css={styles.createItem} onClick={onCreateItem} onKeyDown={stopMenuSelectionKeys}>\n          <IconPlus size={iconSize} color=\"button/secondary/icon\" />\n          {createItemLabel}\n        </chakra.button>\n      )}\n    </NS.Content>\n  );\n};\n\n/**\n * Zag's Select.Content keyDown handler fires ITEM.CLICK and preventDefaults on Enter/Space\n * regardless of which descendant is focused. For the create row (a real <button> sibling of\n * the items list), that hijacks its native activation. Stopping propagation at the element\n * keeps its own onClick firing via the browser's native keyboard-activation path.\n */\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.stopPropagation();\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":";;;;;;;;;;AAoCA,IAAa,mBAAgE,EAC3E,IACA,YACA,cACA,YACA,kBAAkB,eAClB,iBACA,aAAa,uBACb,YAAY,OACZ,UACA,YAAY,OACZ,cACA,gBACA,YACA,aACA,MACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;AAEpC,QACE,qBAAC,GAAG,SAAJ;EAAY,KAAK,OAAO;EAAS,KAAK;EAAY,GAAI;YAAtD;GAQG,CAAC,aAAa,gBAAgB,oBAAC,QAAD;IAAM,kBAAe;IAAG,UAAU;IAAI,eAAY;IAAS,CAAA;GACzF,aAAa,gBAAgB,KAAA,KAAa,kBACzC,oBAAC,kBAAD;IAA4B;IAAkB;IAAQ,OAAO;IAA6B;IAAkB,CAAA;GAE9G,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB;KACG,aACC,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAS,KAAI;MAAK,gBAAe;MAAO,KAAK,OAAO;gBAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,UAAW,CAAA,EAC5B,oBAAC,MAAD;OAAM,OAAM;OAAiB,WAAW,SAAS,OAAO,oBAAoB;iBAAmB;OAExF,CAAA,CACH;;KAEP,CAAC,aAAa,WACb,qBAAC,KAAD;MAAK,KAAK,OAAO;gBAAjB,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAY;OAAkB,CAAA,EAC/C,mBAAmB,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAiB;OAAuB,CAAA,CAC1E;;KAEP,CAAC,aACA,CAAC,WACD,WAAW,OAAO,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;MAAmB,SAAA;gBACjB,oBAAC,oBAAD;OAAoB,OAAO;OAAM,cAAa;OAAK,eAAc;OAAO,CAAA;MACtD,CAAA,EAErB,MAAM,IAAI,WAAW,CACT,EAAA,EAPI,KAOJ,CACf;KACA;;GACL,gBACC,qBAAC,OAAO,QAAR;IAAe,MAAK;IAAS,KAAK,OAAO;IAAY,SAAS;IAAc,WAAW;cAAvF,CACE,oBAAC,UAAD;KAAU,MAAM;KAAU,OAAM;KAA0B,CAAA,EACzD,gBACa;;GAEP;;;;;;;;;AAUjB,IAAM,yBAAyB,UAA8B;AAC3D,KAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,OAAM,iBAAiB;;AAW3B,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;WAAjB;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;GAAkB,CAAA;EACvD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,MAAM;GACtF,YAAY,UAAU;AAIpB,QAAI,MAAM,QAAQ,IAAK,OAAM,iBAAiB;;GAEhD,CAAA;EACD,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,GAAG;aAEjC,oBAAC,WAAD,EAAW,MAAM,UAAY,CAAA;GACf,CAAA;EAEd"}

package/dist/components/index.d.ts

@@ -37,6 +37,8 @@ export { default as BitkitLink, type BitkitLinkProps } from './BitkitLink/Bitkit
 export { default as BitkitLinkButton, type BitkitLinkButtonProps } from './BitkitLinkButton/BitkitLinkButton';
 export { default as BitkitMarkdown, type BitkitMarkdownProps } from './BitkitMarkdown/BitkitMarkdown';
 export { default as BitkitMarkdownCard, type BitkitMarkdownCardProps } from './BitkitMarkdownCard/BitkitMarkdownCard';
+export { default as BitkitMultiselect, type BitkitMultiselectProps } from './BitkitMultiselect/BitkitMultiselect';
+export { default as BitkitMultiselectMenu, type BitkitMultiselectMenuItemProps, type BitkitMultiselectMenuProps, } from './BitkitMultiselectMenu/BitkitMultiselectMenu';
 export { default as BitkitNativeSelect, type BitkitNativeSelectProps } from './BitkitNativeSelect/BitkitNativeSelect';
 export { default as BitkitNoteCard, type BitkitNoteCardProps } from './BitkitNoteCard/BitkitNoteCard';
 export { default as BitkitNumberInput, type BitkitNumberInputProps } from './BitkitNumberInput/BitkitNumberInput';

package/dist/main.js

@@ -288,6 +288,7 @@ import BitkitAlert from "./components/BitkitAlert/BitkitAlert.js";
 import BitkitAvatar from "./components/BitkitAvatar/BitkitAvatar.js";
 import BitkitBadge from "./components/BitkitBadge/BitkitBadge.js";
 import BitkitButton from "./components/BitkitButton/BitkitButton.js";
+import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitCalendar from "./components/BitkitCalendar/BitkitCalendar.js";
 import BitkitCard from "./components/BitkitCard/BitkitCard.js";
@@ -312,7 +313,6 @@ import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js"
 import BitkitExpandableCard from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
 import BitkitExplainerList_default from "./components/BitkitExplainerList/BitkitExplainerList.js";
 import BitkitFileInput from "./components/BitkitFileInput/BitkitFileInput.js";
-import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitIconButton from "./components/BitkitIconButton/BitkitIconButton.js";
 import BitkitInlineLoading from "./components/BitkitInlineLoading/BitkitInlineLoading.js";
 import BitkitLabeledData from "./components/BitkitLabeledData/BitkitLabeledData.js";
@@ -322,6 +322,9 @@ import BitkitOrderedList_default from "./components/BitkitOrderedList/BitkitOrde
 import BitkitUnorderedList_default from "./components/BitkitUnorderedList/BitkitUnorderedList.js";
 import BitkitMarkdown from "./components/BitkitMarkdown/BitkitMarkdown.js";
 import BitkitMarkdownCard from "./components/BitkitMarkdownCard/BitkitMarkdownCard.js";
+import BitkitMultiselectMenu from "./components/BitkitMultiselectMenu/BitkitMultiselectMenu.js";
+import BitkitTag from "./components/BitkitTag/BitkitTag.js";
+import BitkitMultiselect from "./components/BitkitMultiselect/BitkitMultiselect.js";
 import BitkitNativeSelect from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
 import BitkitNoteCard from "./components/BitkitNoteCard/BitkitNoteCard.js";
 import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.js";
@@ -345,7 +348,6 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
 import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
 import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
 import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
-import BitkitTag from "./components/BitkitTag/BitkitTag.js";
 import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
 import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
 import createBitkitToast from "./components/BitkitToast/BitkitToast.js";
@@ -354,4 +356,4 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitTreeView, BitkitUnorderedList_default as BitkitUnorderedList, 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, 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, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, 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, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, 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, 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, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
+export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitTreeView, BitkitUnorderedList_default as BitkitUnorderedList, 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, 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, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, 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, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, 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, 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, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };

package/dist/theme/common/ComboboxAndSelect.common.js

@@ -36,13 +36,6 @@ var base = {
 		color: "icon/interactive",
 		display: "flex",
 		justifyContent: "center"
-	},
-	itemGroupLabel: {
-		alignItems: "center",
-		display: "flex",
-		gap: "16",
-		paddingBlock: "12",
-		paddingInline: "16"
 	}
 };
 var variants = { size: {

package/dist/theme/common/ComboboxAndSelect.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxAndSelect.common.js","names":[],"sources":["../../../lib/theme/common/ComboboxAndSelect.common.ts"],"sourcesContent":["import { type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const base: Record<string, SystemStyleObject> = {\n  content: {\n    background: 'background/primary',\n    border: '1px solid',\n    borderColor: 'border/minimal',\n    zIndex: 'select',\n    overflowY: 'auto',\n    boxShadow: 'elevation/lg',\n    _open: {\n      animationStyle: 'slide-fade-in',\n      animationDuration: 'fast',\n    },\n    _closed: {\n      animationStyle: 'slide-fade-out',\n      animationDuration: 'fastest',\n    },\n  },\n  item: {\n    position: 'relative',\n    userSelect: 'none',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12',\n    cursor: 'option',\n    justifyContent: 'space-between',\n    flex: '1',\n    textAlign: 'start',\n    lineHeight: rem(24),\n    _highlighted: {\n      bg: 'background/hover',\n    },\n    _selected: {\n      bg: 'background/selected',\n    },\n  },\n  itemIndicator: {\n    alignItems: 'center',\n    color: 'icon/interactive',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  itemGroupLabel: {\n    alignItems: 'center',\n    display: 'flex',\n    gap: '16',\n    paddingBlock: '12',\n    paddingInline: '16',\n  },\n};\n\nexport const variants: Record<'size', Record<'md' | 'lg', Record<string, SystemStyleObject>>> = {\n  size: {\n    lg: {\n      item: {\n        paddingInline: '16',\n        paddingBlock: '12',\n        textStyle: 'body/lg/regular',\n        _selected: {\n          textStyle: 'body/lg/semibold',\n        },\n      },\n      itemIndicator: {\n        width: '24',\n        height: '24',\n      },\n    },\n    md: {\n      item: {\n        paddingBlock: '8',\n        paddingInline: '16',\n        textStyle: 'body/md/regular',\n        _selected: {\n          textStyle: 'body/md/semibold',\n        },\n      },\n      itemIndicator: {\n        width: '16',\n        height: '16',\n      },\n    },\n  },\n};\n"],"mappings":";;AAIA,IAAa,OAA0C;CACrD,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,WAAW;EACX,WAAW;EACX,OAAO;GACL,gBAAgB;GAChB,mBAAmB;GACpB;EACD,SAAS;GACP,gBAAgB;GAChB,mBAAmB;GACpB;EACF;CACD,MAAM;EACJ,UAAU;EACV,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,MAAM;EACN,WAAW;EACX,YAAY,IAAI,GAAG;EACnB,cAAc,EACZ,IAAI,oBACL;EACD,WAAW,EACT,IAAI,uBACL;EACF;CACD,eAAe;EACb,YAAY;EACZ,OAAO;EACP,SAAS;EACT,gBAAgB;EACjB;CACD,gBAAgB;EACd,YAAY;EACZ,SAAS;EACT,KAAK;EACL,cAAc;EACd,eAAe;EAChB;CACF;AAED,IAAa,WAAmF,EAC9F,MAAM;CACJ,IAAI;EACF,MAAM;GACJ,eAAe;GACf,cAAc;GACd,WAAW;GACX,WAAW,EACT,WAAW,oBACZ;GACF;EACD,eAAe;GACb,OAAO;GACP,QAAQ;GACT;EACF;CACD,IAAI;EACF,MAAM;GACJ,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW,EACT,WAAW,oBACZ;GACF;EACD,eAAe;GACb,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF"}
+{"version":3,"file":"ComboboxAndSelect.common.js","names":[],"sources":["../../../lib/theme/common/ComboboxAndSelect.common.ts"],"sourcesContent":["import { type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const base: Record<string, SystemStyleObject> = {\n  content: {\n    background: 'background/primary',\n    border: '1px solid',\n    borderColor: 'border/minimal',\n    zIndex: 'select',\n    overflowY: 'auto',\n    boxShadow: 'elevation/lg',\n    _open: {\n      animationStyle: 'slide-fade-in',\n      animationDuration: 'fast',\n    },\n    _closed: {\n      animationStyle: 'slide-fade-out',\n      animationDuration: 'fastest',\n    },\n  },\n  item: {\n    position: 'relative',\n    userSelect: 'none',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12',\n    cursor: 'option',\n    justifyContent: 'space-between',\n    flex: '1',\n    textAlign: 'start',\n    lineHeight: rem(24),\n    _highlighted: {\n      bg: 'background/hover',\n    },\n    _selected: {\n      bg: 'background/selected',\n    },\n  },\n  itemIndicator: {\n    alignItems: 'center',\n    color: 'icon/interactive',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n};\n\nexport const variants: Record<'size', Record<'md' | 'lg', Record<string, SystemStyleObject>>> = {\n  size: {\n    lg: {\n      item: {\n        paddingInline: '16',\n        paddingBlock: '12',\n        textStyle: 'body/lg/regular',\n        _selected: {\n          textStyle: 'body/lg/semibold',\n        },\n      },\n      itemIndicator: {\n        width: '24',\n        height: '24',\n      },\n    },\n    md: {\n      item: {\n        paddingBlock: '8',\n        paddingInline: '16',\n        textStyle: 'body/md/regular',\n        _selected: {\n          textStyle: 'body/md/semibold',\n        },\n      },\n      itemIndicator: {\n        width: '16',\n        height: '16',\n      },\n    },\n  },\n};\n"],"mappings":";;AAIA,IAAa,OAA0C;CACrD,SAAS;EACP,YAAY;EACZ,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,WAAW;EACX,WAAW;EACX,OAAO;GACL,gBAAgB;GAChB,mBAAmB;GACpB;EACD,SAAS;GACP,gBAAgB;GAChB,mBAAmB;GACpB;EACF;CACD,MAAM;EACJ,UAAU;EACV,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,MAAM;EACN,WAAW;EACX,YAAY,IAAI,GAAG;EACnB,cAAc,EACZ,IAAI,oBACL;EACD,WAAW,EACT,IAAI,uBACL;EACF;CACD,eAAe;EACb,YAAY;EACZ,OAAO;EACP,SAAS;EACT,gBAAgB;EACjB;CACF;AAED,IAAa,WAAmF,EAC9F,MAAM;CACJ,IAAI;EACF,MAAM;GACJ,eAAe;GACf,cAAc;GACd,WAAW;GACX,WAAW,EACT,WAAW,oBACZ;GACF;EACD,eAAe;GACb,OAAO;GACP,QAAQ;GACT;EACF;CACD,IAAI;EACF,MAAM;GACJ,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW,EACT,WAAW,oBACZ;GACF;EACD,eAAe;GACb,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF"}

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

@@ -1,4 +1,4 @@
-declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
+declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "emptyHelperText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty", {
     size: {
         md: {
             input: import('@chakra-ui/react').SystemStyleObject;

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

@@ -0,0 +1,48 @@
+export declare const multiselectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"overlay" | "trigger" | "indicator" | "control" | "indicatorGroup" | "tagsBlock" | "placeholderText", {
+    constrained: {
+        true: {
+            overlay: {
+                overflow: "hidden";
+            };
+            tagsBlock: {
+                flexWrap: "nowrap";
+            };
+        };
+        false: {};
+    };
+    size: {
+        lg: {
+            overlay: {
+                minHeight: "48";
+                paddingBlock: string;
+            };
+            trigger: {
+                textStyle: "body/lg/regular";
+            };
+            placeholderText: {
+                textStyle: "body/lg/regular";
+                lineHeight: string;
+            };
+        };
+        md: {
+            indicatorGroup: {
+                height: "40";
+            };
+            overlay: {
+                minHeight: "40";
+                paddingBlock: string;
+                '&:has([data-slot="tag"])': {
+                    paddingInlineStart: string;
+                };
+            };
+            trigger: {
+                textStyle: "body/md/regular";
+            };
+            placeholderText: {
+                textStyle: "body/md/regular";
+                lineHeight: string;
+            };
+        };
+    };
+}>;
+export default multiselectSlotRecipe;