@bitrise/bitkit-v2 0.3.330 → 0.3.332

package/AGENTS.md

@@ -97,7 +97,7 @@ Bitkit components use consistent prop names across the library:
   <BitkitButton icon={IconCheck}>Save</BitkitButton>
   <BitkitAccordion.ItemTrigger suffix={<Badge>3</Badge>}>Files</BitkitAccordion.ItemTrigger>
   ```
-- **Buttons can render as links** — `BitkitButton`, `BitkitIconButton`, and `BitkitControlButton` render an `<a>` when `href` is passed. The button-recipe styles apply to the anchor. Pass `isExternal` to auto-add `target="_blank" rel="noreferrer noopener"`. For routing libraries (Next.js, React Router), use `asChild` with your own anchor element:
+- **Buttons can render as links** — `BitkitButton`, `BitkitIconButton`, `BitkitControlButton`, and `BitkitColorButton` render an `<a>` when `href` is passed. Don't pass `as="a"` — they pick the element from `href` themselves. The button-recipe styles apply to the anchor. Pass `isExternal` to auto-add `target="_blank" rel="noreferrer noopener"`. For routing libraries (Next.js, React Router), use `asChild` with your own anchor element:
   ```tsx
   <BitkitButton href="/internal">Internal link</BitkitButton>
   <BitkitButton href="https://example.com" isExternal>External</BitkitButton>

package/dist/components/BitkitColorButton/BitkitColorButton.d.ts

@@ -1,5 +1,25 @@
 import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
-export type BitkitColorButtonProps = Omit<HTMLChakraProps<'button'>, 'size' | 'colorPalette'> & RecipeProps<'colorButton'>;
-declare const withContext: <T, P>(Component: React.ElementType<any>, options?: import('@chakra-ui/react').JsxFactoryOptions<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
-declare const BitkitColorButton: ReturnType<typeof withContext<HTMLButtonElement, BitkitColorButtonProps>>;
+type ColorButtonOmitted = 'as' | 'colorPalette' | 'size' | 'type';
+interface BitkitColorButtonCommonProps extends RecipeProps<'colorButton'> {
+    /**
+     * Disabled or loading state of the control. Both are honoured in anchor mode too.
+     *
+     * Note that `'loading'` behaves differently here than on `BitkitButton`, which delegates to
+     * Chakra's `Button loading` and therefore also *disables* and dims the control. This one stays
+     * focusable and undimmed: the label keeps its width, a spinner is overlaid on top of it, and
+     * activation is blocked by a click guard — so a keyboard or screen reader user doesn't lose the
+     * element they were on the moment they press it.
+     */
+    state?: 'disabled' | 'loading';
+}
+export interface BitkitColorButtonAsButtonProps extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'button'>, ColorButtonOmitted | 'disabled'> {
+    href?: undefined;
+    isExternal?: undefined;
+}
+export interface BitkitColorButtonAsAnchorProps extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'a'>, ColorButtonOmitted> {
+    href: string;
+    isExternal?: boolean;
+}
+export type BitkitColorButtonProps = BitkitColorButtonAsButtonProps | BitkitColorButtonAsAnchorProps;
+declare const BitkitColorButton: import('react').ForwardRefExoticComponent<BitkitColorButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default BitkitColorButton;

package/dist/components/BitkitColorButton/BitkitColorButton.js

@@ -1,8 +1,75 @@
 import colorButtonRecipe from "../../theme/recipes/ColorButton.recipe.js";
 import { createRecipeContext } 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";
+import { Spinner } from "@chakra-ui/react/spinner";
 //#region lib/components/BitkitColorButton/BitkitColorButton.tsx
 var { withContext } = createRecipeContext({ recipe: colorButtonRecipe });
-var BitkitColorButton = withContext("button", { defaultProps: { type: "button" } });
+var StyledButton = withContext("button");
+var StyledAnchor = withContext("a");
+var BitkitColorButton = forwardRef((props, ref) => {
+	const { children, size, state } = props;
+	const isDisabled = state === "disabled";
+	const isLoading = state === "loading";
+	const isInactive = isDisabled || isLoading;
+	const spinnerSize = size === "lg" ? "20" : "16";
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading ? /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		opacity: "0",
+		userSelect: "none",
+		children
+	}) : children, isLoading && /* @__PURE__ */ jsx(Spinner, {
+		position: "absolute",
+		insetBlock: "0",
+		insetInline: "0",
+		margin: "auto",
+		height: spinnerSize,
+		width: spinnerSize
+	})] });
+	if (props.href !== void 0) {
+		const { children: _children, href, isExternal, onClick, onKeyDown, rel, state: _state, target, ...anchorRest } = props;
+		const effectiveTarget = isExternal ? "_blank" : target;
+		const effectiveRel = isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel;
+		const handleClick = isInactive ? (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		} : onClick;
+		const handleKeyDown = isInactive ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		} : onKeyDown;
+		return /* @__PURE__ */ jsx(StyledAnchor, {
+			ref,
+			...anchorRest,
+			"aria-disabled": isDisabled || void 0,
+			"data-disabled": isDisabled || void 0,
+			"data-loading": isLoading || void 0,
+			href: isDisabled ? void 0 : href,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			rel: effectiveRel,
+			target: effectiveTarget,
+			children: content
+		});
+	}
+	const { children: _children, onClick, state: _state, ...buttonRest } = props;
+	const handleClick = isInactive ? (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	} : onClick;
+	return /* @__PURE__ */ jsx(StyledButton, {
+		ref,
+		...buttonRest,
+		"data-loading": isLoading || void 0,
+		disabled: isDisabled,
+		onClick: handleClick,
+		type: "button",
+		children: content
+	});
+});
 BitkitColorButton.displayName = "BitkitColorButton";
 //#endregion
 export { BitkitColorButton as default };

package/dist/components/BitkitColorButton/BitkitColorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitColorButton.js","names":[],"sources":["../../../lib/components/BitkitColorButton/BitkitColorButton.tsx"],"sourcesContent":["import { createRecipeContext, type HTMLChakraProps, type RecipeProps } from '@chakra-ui/react/styled-system';\n\nimport colorButtonRecipe from '../../theme/recipes/ColorButton.recipe';\n\nexport type BitkitColorButtonProps = Omit<HTMLChakraProps<'button'>, 'size' | 'colorPalette'> &\n  RecipeProps<'colorButton'>;\n\nconst { withContext } = createRecipeContext({ recipe: colorButtonRecipe });\n\nconst BitkitColorButton: ReturnType<typeof withContext<HTMLButtonElement, BitkitColorButtonProps>> = withContext<\n  HTMLButtonElement,\n  BitkitColorButtonProps\n>('button', {\n  defaultProps: { type: 'button' },\n});\n\nBitkitColorButton.displayName = 'BitkitColorButton';\n\nexport default BitkitColorButton;\n"],"mappings":";;;AAOA,IAAM,EAAE,gBAAgB,oBAAoB,EAAE,QAAQ,kBAAkB,CAAC;AAEzE,IAAM,oBAA+F,YAGnG,UAAU,EACV,cAAc,EAAE,MAAM,SAAS,EACjC,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitColorButton.js","names":[],"sources":["../../../lib/components/BitkitColorButton/BitkitColorButton.tsx"],"sourcesContent":["import { Spinner } from '@chakra-ui/react/spinner';\nimport { createRecipeContext, type HTMLChakraProps, type RecipeProps } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport colorButtonRecipe from '../../theme/recipes/ColorButton.recipe';\n\ntype ColorButtonOmitted = 'as' | 'colorPalette' | 'size' | 'type';\n\ntype StyledButtonProps = Omit<HTMLChakraProps<'button'>, 'colorPalette' | 'size'> & RecipeProps<'colorButton'>;\ntype StyledAnchorProps = Omit<HTMLChakraProps<'a'>, 'colorPalette' | 'size'> & RecipeProps<'colorButton'>;\n\ninterface BitkitColorButtonCommonProps extends RecipeProps<'colorButton'> {\n  /**\n   * Disabled or loading state of the control. Both are honoured in anchor mode too.\n   *\n   * Note that `'loading'` behaves differently here than on `BitkitButton`, which delegates to\n   * Chakra's `Button loading` and therefore also *disables* and dims the control. This one stays\n   * focusable and undimmed: the label keeps its width, a spinner is overlaid on top of it, and\n   * activation is blocked by a click guard — so a keyboard or screen reader user doesn't lose the\n   * element they were on the moment they press it.\n   */\n  state?: 'disabled' | 'loading';\n}\n\nexport interface BitkitColorButtonAsButtonProps\n  extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'button'>, ColorButtonOmitted | 'disabled'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\nexport interface BitkitColorButtonAsAnchorProps\n  extends BitkitColorButtonCommonProps, Omit<HTMLChakraProps<'a'>, ColorButtonOmitted> {\n  href: string;\n  isExternal?: boolean;\n}\n\nexport type BitkitColorButtonProps = BitkitColorButtonAsButtonProps | BitkitColorButtonAsAnchorProps;\n\nconst { withContext } = createRecipeContext({ recipe: colorButtonRecipe });\n\nconst StyledButton = withContext<HTMLButtonElement, StyledButtonProps>('button');\n\nconst StyledAnchor = withContext<HTMLAnchorElement, StyledAnchorProps>('a');\n\nconst BitkitColorButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitColorButtonProps>((props, ref) => {\n  const { children, size, state } = props;\n  const isDisabled = state === 'disabled';\n  const isLoading = state === 'loading';\n  const isInactive = isDisabled || isLoading;\n  const spinnerSize = size === 'lg' ? '20' : '16';\n\n  const content = (\n    <>\n      {isLoading ? (\n        // `opacity: 0` rather than `visibility: hidden`: both reserve the label's width so the\n        // button doesn't collapse, but `visibility: hidden` also drops it from the accessibility\n        // tree — leaving a focusable control with no accessible name.\n        <Text as=\"span\" opacity=\"0\" userSelect=\"none\">\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n      {isLoading && (\n        <Spinner\n          position=\"absolute\"\n          insetBlock=\"0\"\n          insetInline=\"0\"\n          margin=\"auto\"\n          height={spinnerSize}\n          width={spinnerSize}\n        />\n      )}\n    </>\n  );\n\n  // --- Anchor mode (href) ---\n  if (props.href !== undefined) {\n    const {\n      children: _children,\n      href,\n      isExternal,\n      onClick,\n      onKeyDown,\n      rel,\n      state: _state,\n      target,\n      ...anchorRest\n    } = props;\n    const effectiveTarget = isExternal ? '_blank' : target;\n    const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n    const handleClick = isInactive\n      ? (e: MouseEvent<HTMLAnchorElement>) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      : onClick;\n    // What actually blocks keyboard activation in both states is `handleClick`: neither state\n    // removes the anchor from the tab order (`loading` never sets `disabled`, and a disabled anchor\n    // is only `aria-disabled`), and Enter/Space dispatch a click, which the guard above swallows.\n    // The keydown guard is the extra layer an anchor needs, since it never gets the native\n    // `disabled` treatment a button does.\n    const handleKeyDown = isInactive\n      ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        }\n      : onKeyDown;\n\n    return (\n      <StyledAnchor\n        ref={ref as Ref<HTMLAnchorElement>}\n        {...anchorRest}\n        aria-disabled={isDisabled || undefined}\n        data-disabled={isDisabled || undefined}\n        // `data-loading` (not `aria-busy`) — it's the styling hook the recipe's `_loading` condition\n        // reads, without claiming ARIA semantics that aren't announced anyway. Announcing the state\n        // change to assistive tech needs a live region inside the component; that's its own change.\n        data-loading={isLoading || undefined}\n        // The `href` is kept while loading — so the link stays focusable and keeps its accessible\n        // name, with activation still blocked by the guards above — and dropped only when disabled,\n        // to take the anchor out of the tab order and make it fully inert.\n        href={isDisabled ? undefined : href}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        rel={effectiveRel}\n        target={effectiveTarget}\n      >\n        {content}\n      </StyledAnchor>\n    );\n  }\n\n  // --- Button mode (default) ---\n  const { children: _children, onClick, state: _state, ...buttonRest } = props;\n  const handleClick = isInactive\n    ? (e: MouseEvent<HTMLButtonElement>) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    : onClick;\n\n  return (\n    <StyledButton\n      ref={ref as Ref<HTMLButtonElement>}\n      {...buttonRest}\n      data-loading={isLoading || undefined}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {content}\n    </StyledButton>\n  );\n});\n\nBitkitColorButton.displayName = 'BitkitColorButton';\n\nexport default BitkitColorButton;\n"],"mappings":";;;;;;;AAuCA,IAAM,EAAE,gBAAgB,oBAAoB,EAAE,QAAQ,kBAAkB,CAAC;AAEzE,IAAM,eAAe,YAAkD,QAAQ;AAE/E,IAAM,eAAe,YAAkD,GAAG;AAE1E,IAAM,oBAAoB,YAA2E,OAAO,QAAQ;CAClH,MAAM,EAAE,UAAU,MAAM,UAAU;CAClC,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU;CAC5B,MAAM,aAAa,cAAc;CACjC,MAAM,cAAc,SAAS,OAAO,OAAO;CAE3C,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACG,YAIC,oBAAC,MAAD;EAAM,IAAG;EAAO,SAAQ;EAAI,YAAW;EACpC;CACG,CAAA,IAEN,UAED,aACC,oBAAC,SAAD;EACE,UAAS;EACT,YAAW;EACX,aAAY;EACZ,QAAO;EACP,QAAQ;EACR,OAAO;CACR,CAAA,CAEH,EAAA,CAAA;CAIJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,UAAU,WACV,MACA,YACA,SACA,WACA,KACA,OAAO,QACP,QACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EAMJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EAEJ,OACE,oBAAC,cAAD;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAC7B,iBAAe,cAAc,KAAA;GAI7B,gBAAc,aAAa,KAAA;GAI3B,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAEP,UAAA;EACW,CAAA;CAElB;CAGA,MAAM,EAAE,UAAU,WAAW,SAAS,OAAO,QAAQ,GAAG,eAAe;CACvE,MAAM,cAAc,cACf,MAAqC;EACpC,EAAE,eAAe;EACjB,EAAE,gBAAgB;CACpB,IACA;CAEJ,OACE,oBAAC,cAAD;EACO;EACL,GAAI;EACJ,gBAAc,aAAa,KAAA;EAC3B,UAAU;EACV,SAAS;EACT,MAAK;EAEJ,UAAA;CACW,CAAA;AAElB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js

@@ -1,5 +1,5 @@
 import IconCheck from "../../icons/IconCheck.js";
-import { SelectMenuShell } from "../BitkitSelectMenu/SelectMenuShell.js";
+import { SelectMenuShell, selectSizeMap } from "../BitkitSelectMenu/SelectMenuShell.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
@@ -11,7 +11,7 @@ import { Select } from "@chakra-ui/react/select";
 var BitkitMultiselectMenu = forwardRef((props, ref) => {
 	const { children, collection, size, ...shellProps } = props;
 	const styles = useSlotRecipe({ key: "select" })({ size });
-	const iconSize = size === "md" ? "16" : "24";
+	const { iconSize, spinnerSize } = selectSizeMap[size ?? "lg"];
 	return /* @__PURE__ */ jsx(SelectMenuShell, {
 		NS: Select,
 		collection,
@@ -20,20 +20,22 @@ var BitkitMultiselectMenu = forwardRef((props, ref) => {
 		renderItem: (item) => /* @__PURE__ */ jsx(MultiselectMenuItem, {
 			item,
 			iconSize,
+			spinnerSize,
 			styles
 		}, item.value),
-		size,
+		spinnerSize,
 		styles,
 		...shellProps,
 		children
 	});
 });
 BitkitMultiselectMenu.displayName = "BitkitMultiselectMenu";
-var MultiselectMenuItem = ({ item, iconSize, styles }) => {
+var MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }) => {
 	if (item.loading) return /* @__PURE__ */ jsxs(Box, {
 		css: styles.item,
 		children: [/* @__PURE__ */ jsx(Spinner, {
 			variant: "purple",
+			size: spinnerSize,
 			css: styles.itemLoading
 		}), /* @__PURE__ */ jsx(Text, {
 			css: styles.itemLoadingLabel,

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } 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, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\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={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => <MultiselectMenuItem key={item.value} item={item} iconSize={iconSize} styles={styles} />}\n      size={size}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as 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    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,qBAAD;GAA4C;GAAgB;GAAkB;EAAS,GAA7D,KAAK,KAAwD;EACvG;EACE;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AAQpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAA6C;CAC1F,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}
+{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } 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, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <MultiselectMenuItem\n          key={item.value}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,UAAU,gBAAgB,cAAc,QAAQ;CAExD,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,qBAAD;GAEQ;GACI;GACG;GACL;EACT,GALM,KAAK,KAKX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AASpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAAa,aAA6C;CACvG,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}

package/dist/components/BitkitNoteCard/BitkitNoteCard.js

@@ -49,6 +49,7 @@ var BitkitNoteCard = forwardRef((props, ref) => {
 				onClick: action.onClick,
 				rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
 				size: "md",
+				state: action.state === "loading" ? void 0 : action.state,
 				target: action.target,
 				variant: "tertiary",
 				children: action.label
@@ -56,6 +57,7 @@ var BitkitNoteCard = forwardRef((props, ref) => {
 				css: [styles.actionArea, hasList && styles.actionAreaList],
 				onClick: action.onClick,
 				size: "md",
+				state: action.state,
 				variant: "tertiary",
 				marginBlock: "4",
 				children: action.label

package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n  action?: NotificationAction;\n  message?: ReactNode;\n  messageList?: string[];\n  status?: NotificationVariant;\n  title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n  const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'noteCard' });\n  const styles = recipe({ status });\n\n  const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n  const isProgress = status === 'progress';\n  const listItems = messageList ?? [];\n  const hasList = listItems.length > 0;\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <Box css={styles.iconBar}>\n        <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n      </Box>\n      <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n        <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n          {title && <Text css={styles.title}>{title}</Text>}\n          {message && <Text css={styles.message}>{message}</Text>}\n          {hasList && (\n            <BitkitList css={styles.messageList} size=\"md\">\n              {listItems.map((item) => (\n                <BitkitList.Item key={item}>{item}</BitkitList.Item>\n              ))}\n            </BitkitList>\n          )}\n        </Box>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              href={action.href}\n              onClick={action.onClick}\n              rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n              size=\"md\"\n              target={action.target}\n              variant=\"tertiary\"\n            >\n              {action.label}\n            </BitkitButton>\n          ) : (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              onClick={action.onClick}\n              size=\"md\"\n              variant=\"tertiary\"\n              marginBlock=\"4\"\n            >\n              {action.label}\n            </BitkitButton>\n          ))}\n      </Box>\n    </Box>\n  );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;MACvC,UAAA,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IACL,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n  action?: NotificationAction;\n  message?: ReactNode;\n  messageList?: string[];\n  status?: NotificationVariant;\n  title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n  const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'noteCard' });\n  const styles = recipe({ status });\n\n  const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n  const isProgress = status === 'progress';\n  const listItems = messageList ?? [];\n  const hasList = listItems.length > 0;\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <Box css={styles.iconBar}>\n        <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n      </Box>\n      <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n        <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n          {title && <Text css={styles.title}>{title}</Text>}\n          {message && <Text css={styles.message}>{message}</Text>}\n          {hasList && (\n            <BitkitList css={styles.messageList} size=\"md\">\n              {listItems.map((item) => (\n                <BitkitList.Item key={item}>{item}</BitkitList.Item>\n              ))}\n            </BitkitList>\n          )}\n        </Box>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              href={action.href}\n              onClick={action.onClick}\n              rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n              size=\"md\"\n              // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n              // variant has no loading state, so only `disabled` carries over here.\n              state={action.state === 'loading' ? undefined : action.state}\n              target={action.target}\n              variant=\"tertiary\"\n            >\n              {action.label}\n            </BitkitButton>\n          ) : (\n            <BitkitButton\n              css={[styles.actionArea, hasList && styles.actionAreaList]}\n              onClick={action.onClick}\n              size=\"md\"\n              state={action.state}\n              variant=\"tertiary\"\n              marginBlock=\"4\"\n            >\n              {action.label}\n            </BitkitButton>\n          ))}\n      </Box>\n    </Box>\n  );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;MACvC,UAAA,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitRibbon/BitkitRibbon.js

@@ -27,16 +27,18 @@ var BitkitRibbon = forwardRef((props, ref) => {
 						children: link.label
 					})
 				]
-			}), action && /* @__PURE__ */ jsx(BitkitColorButton, {
-				as: action.href ? "a" : "button",
+			}), action && (action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
 				colorVariant,
-				...action.href && {
-					href: action.href,
-					target: action.target
-				},
+				href: action.href,
+				isExternal: action.target === "_blank",
 				onClick: action.onClick,
+				target: action.target,
 				children: action.label
-			})]
+			}) : /* @__PURE__ */ jsx(BitkitColorButton, {
+				colorVariant,
+				onClick: action.onClick,
+				children: action.label
+			}))]
 		}), onDismiss && /* @__PURE__ */ jsx(BitkitCloseButton, {
 			colorVariant,
 			flexShrink: "0",

package/dist/components/BitkitRibbon/BitkitRibbon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n  href?: string;\n  label: string;\n  onClick?: () => void;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n  href?: string;\n  label: string;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n  action?: RibbonActionProps;\n  colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n  link?: RibbonLinkProps;\n  onDismiss?: () => void;\n  title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n  const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'ribbon' });\n  const styles = recipe({ colorVariant });\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <chakra.div css={styles.content}>\n        <chakra.div css={styles.textBlock}>\n          {title && <chakra.strong>{title}</chakra.strong>}\n          <chakra.span>{children}</chakra.span>\n          {link && (\n            <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n              {link.label}\n            </BitkitLink>\n          )}\n        </chakra.div>\n        {action && (\n          <BitkitColorButton\n            as={action.href ? 'a' : 'button'}\n            colorVariant={colorVariant}\n            {...(action.href && { href: action.href, target: action.target })}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </BitkitColorButton>\n        )}\n      </chakra.div>\n      {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n    </Box>\n  );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,UACC,oBAAC,mBAAD;IACE,IAAI,OAAO,OAAO,MAAM;IACV;IACd,GAAK,OAAO,QAAQ;KAAE,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO;IAC/D,SAAS,OAAO;IAEf,UAAA,OAAO;GACS,CAAA,CAEX;EACX,CAAA,GAAA,aAAa,oBAAC,mBAAD;GAAiC;GAAc,YAAW;GAAI,MAAK;GAAK,SAAS;EAAY,CAAA,CACxG;;AAET,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n  href?: string;\n  label: string;\n  onClick?: () => void;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n  href?: string;\n  label: string;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n  action?: RibbonActionProps;\n  colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n  link?: RibbonLinkProps;\n  onDismiss?: () => void;\n  title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n  const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'ribbon' });\n  const styles = recipe({ colorVariant });\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <chakra.div css={styles.content}>\n        <chakra.div css={styles.textBlock}>\n          {title && <chakra.strong>{title}</chakra.strong>}\n          <chakra.span>{children}</chakra.span>\n          {link && (\n            <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n              {link.label}\n            </BitkitLink>\n          )}\n        </chakra.div>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitColorButton\n              colorVariant={colorVariant}\n              href={action.href}\n              isExternal={action.target === '_blank'}\n              onClick={action.onClick}\n              target={action.target}\n            >\n              {action.label}\n            </BitkitColorButton>\n          ) : (\n            <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick}>\n              {action.label}\n            </BitkitColorButton>\n          ))}\n      </chakra.div>\n      {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n    </Box>\n  );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAC5D,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aAAa,oBAAC,mBAAD;GAAiC;GAAc,YAAW;GAAI,MAAK;GAAK,SAAS;EAAY,CAAA,CACxG;;AAET,CAAC;AAED,aAAa,cAAc"}

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -2,10 +2,14 @@ import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
 import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
 import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
 import { withSubComponents } from "../../utilities/withSubComponents.js";
 import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
+import { selectSizeMap } from "../BitkitSelectMenu/SelectMenuShell.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitField from "../BitkitField/BitkitField.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
@@ -16,11 +20,23 @@ import { Select, useSelectContext } from "@chakra-ui/react/select";
 var SelectValue = ({ placeholder, state, size }) => {
 	const items = useSelectContext().selectedItems;
 	const Icon = items[0]?.icon;
+	const avatar = items[0]?.avatar;
 	const label = items[0]?.label;
-	const iconSize = size === "md" ? "16" : "24";
+	const { avatarSize, iconSize } = selectSizeMap[size ?? "lg"];
+	const styles = useSlotRecipe({ key: "select" })({ size });
 	return items[0] ? /* @__PURE__ */ jsxs(Select.ValueText, {
 		placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option"),
-		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+		children: [avatar ? /* @__PURE__ */ jsx(Box, {
+			"data-slot": "avatar",
+			css: styles.avatar,
+			children: /* @__PURE__ */ jsx(BitkitAvatar, {
+				variant: "image",
+				src: avatar,
+				name: label,
+				size: avatarSize
+			})
+		}) : Icon && /* @__PURE__ */ jsx(Icon, {
+			css: styles.valueIcon,
 			size: iconSize,
 			flexShrink: 0
 		}), /* @__PURE__ */ jsx(Text, {
@@ -28,10 +44,16 @@ var SelectValue = ({ placeholder, state, size }) => {
 			overflow: "hidden",
 			textOverflow: "ellipsis",
 			whiteSpace: "nowrap",
-			minWidth: 0,
+			minWidth: "0",
 			children: label
 		})]
-	}) : /* @__PURE__ */ jsx(Select.ValueText, { placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option") });
+	}) : /* @__PURE__ */ jsx(Select.ValueText, {
+		placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option"),
+		display: "block",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	});
 };
 var BitkitSelect = forwardRef((props, ref) => {
 	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size, state, triggerProps, value, ...fieldProps } = props;

package/dist/components/BitkitSelect/BitkitSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const label = items[0]?.label;\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {Icon && <Icon size={iconSize} flexShrink={0} />}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth={0}>\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n        // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n        // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n        // onValueChange stops firing when the same option is re-selected.\n        value={value === undefined ? undefined : value ? [value] : []}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;AA4CA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,iBACD,CAAA,CAAO;CAErB,MAAM,OAAO,MAAM,EAAE,EAAE;CACvB,MAAM,QAAQ,MAAM,EAAE,EAAE;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO,MAAM,KACX,qBAAC,OAAO,WAAR;EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB;EAAzF,UAAA,CACG,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAU,YAAY;EAAI,CAAA,GAC/C,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAS;GAAS,cAAa;GAAW,YAAW;GAAS,UAAU;GACrF,UAAA;EACG,CAAA,CACU;CAElB,CAAA,IAAA,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,oBAAsB,CAAA;AAEnH;AAEA,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,UACA,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,aACA,eACA,aACA,aACA,MACA,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,UAAU,WAAW,UAAU;GAC9C,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,EAAE;GAC1D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GAKtF,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,CAAC,KAAK,IAAI,CAAC;GAjB9D,UAAA;IAmBE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,WAAU;KAA1B,UAAA,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;MAClB,UAAA,oBAAC,aAAD;OAA0B;OAAmB;OAAa;MAAQ,CAAA;KACpD,CAAA,GAChB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;MAAiB,CAAA,EACjE,CAAA;MAEnB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EACvC,CAAA;MAEpB,oBAAC,OAAO,WAAR;OAAkB,SAAA;OAChB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;MACL,CAAA;KACG,EAAA,CAAA,CACT;;IAChB,oBAAC,QAAD;KAAQ,UAAU,iBAAiB;KACjC,UAAA,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;MACc;MACK;MACL;MACD;MACK;MACH;MACP;MAEL;KACe,CAAA,EACD,CAAA;IACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,QAAQ,uBAAuB,CAAC"}
+{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\nimport { selectSizeMap } from '../BitkitSelectMenu/SelectMenuShell.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const avatar = items[0]?.avatar;\n  const label = items[0]?.label;\n\n  const { avatarSize, iconSize } = selectSizeMap[size ?? 'lg'];\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {avatar ? (\n        // Same avatar handling as the menu item (see BitkitSelectMenu.tsx). The `data-slot`\n        // lets the trigger recipe shrink its vertical padding so the avatar row keeps the\n        // 48/40 trigger height (see the `&:has([data-slot=\"avatar\"])` rule in Select.recipe.ts).\n        <Box data-slot=\"avatar\" css={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={avatar} name={label} size={avatarSize} />\n        </Box>\n      ) : (\n        Icon && <Icon css={styles.valueIcon} size={iconSize} flexShrink={0} />\n      )}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth=\"0\">\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText\n      placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}\n      display=\"block\"\n      overflow=\"hidden\"\n      textOverflow=\"ellipsis\"\n      whiteSpace=\"nowrap\"\n    />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n        // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n        // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n        // onValueChange stops firing when the same option is re-selected.\n        value={value === undefined ? undefined : value ? [value] : []}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -1,6 +1,6 @@
 import IconCheck from "../../icons/IconCheck.js";
 import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
-import { SelectMenuShell } from "./SelectMenuShell.js";
+import { SelectMenuShell, selectSizeMap } from "./SelectMenuShell.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
@@ -14,7 +14,7 @@ var BitkitSelectMenu = forwardRef((props, ref) => {
 	const { children, collection, variant = "select", size, ...shellProps } = props;
 	const NS = variant === "combobox" ? Combobox : Select;
 	const styles = useSlotRecipe({ key: "select" })({ size });
-	const iconSize = size === "md" ? "16" : "24";
+	const { avatarSize, iconSize, spinnerSize } = selectSizeMap[size ?? "lg"];
 	return /* @__PURE__ */ jsx(SelectMenuShell, {
 		NS,
 		collection,
@@ -22,23 +22,26 @@ var BitkitSelectMenu = forwardRef((props, ref) => {
 		iconSize,
 		renderItem: (item) => /* @__PURE__ */ jsx(SelectMenuItem, {
 			NS,
+			avatarSize,
 			item,
 			iconSize,
+			spinnerSize,
 			styles
 		}, item.value),
-		size,
+		spinnerSize,
 		styles,
 		...shellProps,
 		children
 	});
 });
 BitkitSelectMenu.displayName = "BitkitSelectMenu";
-var SelectMenuItem = ({ NS, item, iconSize, styles }) => {
+var SelectMenuItem = ({ NS, avatarSize, item, iconSize, spinnerSize, styles }) => {
 	const Icon = item.icon;
 	if (item.loading) return /* @__PURE__ */ jsxs(Box, {
 		css: styles.item,
 		children: [/* @__PURE__ */ jsx(Spinner, {
 			variant: "purple",
+			size: spinnerSize,
 			css: styles.itemLoading
 		}), /* @__PURE__ */ jsx(Text, {
 			css: styles.itemLoadingLabel,
@@ -51,12 +54,12 @@ var SelectMenuItem = ({ NS, item, iconSize, styles }) => {
 		children: [
 			item.avatar && /* @__PURE__ */ jsx(Box, {
 				"data-slot": "avatar",
-				css: { "[data-disabled] &": { opacity: .5 } },
+				css: styles.avatar,
 				children: /* @__PURE__ */ jsx(BitkitAvatar, {
 					variant: "image",
 					src: item.avatar,
 					name: item.label,
-					size: iconSize === "24" ? "32" : "24"
+					size: avatarSize
 				})
 			}),
 			/* @__PURE__ */ jsxs(Box, {
@@ -66,7 +69,7 @@ var SelectMenuItem = ({ NS, item, iconSize, styles }) => {
 					alignItems: "center",
 					gap: "8",
 					children: [Icon && !item.avatar && /* @__PURE__ */ jsx(Icon, {
-						color: "icon/primary",
+						css: styles.itemIcon,
 						size: iconSize
 					}), /* @__PURE__ */ jsx(Text, {
 						css: styles.itemLabel,

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 { 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, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n  /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n  onSearchChange?: (searchText: string) => void;\n  searchValue?: string;\n};\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  avatar?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\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} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { children, 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      {children}\n    </SelectMenuShell>\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":";;;;;;;;;;;;AAmDA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAC1E,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,gBAAD;GAAqC;GAAU;GAAgB;GAAkB;EAAS,GAArE,KAAK,KAAgE;EAC1G;EACE;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAS/B,IAAM,kBAAkB,EAAE,IAAI,MAAM,UAAU,aAAwC;CACpF,MAAM,OAAO,KAAK;CAElB,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;EAAjC,UAAA;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,EAAE,qBAAqB,EAAE,SAAS,GAAI,EAAE;IACnE,UAAA,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM,aAAa,OAAO,OAAO;IAAO,CAAA;GACvG,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,OAAM;MAAe,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAY,UAAA,KAAK;KAAY,CAAA,CAC5C;IACJ,CAAA,GAAA,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAiB,UAAA,KAAK;IAAiB,CAAA,CAC1E;;GACL,oBAAC,GAAG,eAAJ;IAAkB,SAAA;IAChB,UAAA,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}
+{"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, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n  /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n  onSearchChange?: (searchText: string) => void;\n  searchValue?: string;\n};\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  avatar?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\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} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { children, 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 { avatarSize, iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <SelectMenuItem\n          key={item.value}\n          NS={NS}\n          avatarSize={avatarSize}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  avatarSize: SelectSizes['avatarSize'];\n  item: BitkitSelectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, avatarSize, item, iconSize, spinnerSize, 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\" size={spinnerSize} 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={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={item.avatar} name={item.label} size={avatarSize} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !item.avatar && <Icon css={styles.itemIcon} 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":";;;;;;;;;;;;AAmDA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAC1E,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,YAAY,UAAU,gBAAgB,cAAc,QAAQ;CAEpE,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,gBAAD;GAEM;GACQ;GACN;GACI;GACG;GACL;EACT,GAPM,KAAK,KAOX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAW/B,IAAM,kBAAkB,EAAE,IAAI,YAAY,MAAM,UAAU,aAAa,aAAwC;CAC7G,MAAM,OAAO,KAAK;CAElB,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;EAAjC,UAAA;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,OAAO;IAClC,UAAA,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM;IAAa,CAAA;GAClF,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,MAAM;KAAW,CAAA,GACtE,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAY,UAAA,KAAK;KAAY,CAAA,CAC5C;IACJ,CAAA,GAAA,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAiB,UAAA,KAAK;IAAiB,CAAA,CAC1E;;GACL,oBAAC,GAAG,eAAJ;IAAkB,SAAA;IAChB,UAAA,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}

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

@@ -5,6 +5,19 @@ import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { ReactNode, Ref } from 'react';
 import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';
+export declare const selectSizeMap: {
+    readonly lg: {
+        readonly avatarSize: "32";
+        readonly iconSize: "24";
+        readonly spinnerSize: "lg";
+    };
+    readonly md: {
+        readonly avatarSize: "24";
+        readonly iconSize: "16";
+        readonly spinnerSize: "md";
+    };
+};
+export type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];
 /**
  * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.
  * Handles Content wrapper, search, loading, empty state, groups, and the action slot —
@@ -20,13 +33,13 @@ export type SelectMenuShellProps<T extends {
     collection: ListCollection<T>;
     contentProps?: SelectContentProps;
     contentRef?: Ref<HTMLDivElement>;
-    iconSize: '16' | '24';
+    iconSize: SelectSizes['iconSize'];
     isLoading?: boolean;
     renderItem: (item: T) => ReactNode;
-    size?: 'md' | 'lg';
+    spinnerSize: SelectSizes['spinnerSize'];
     styles: Record<string, SystemStyleObject>;
 } & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 export declare const SelectMenuShell: <T extends {
     value: string;
     group?: string;
-}>({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel, iconSize, isLoading, onSearchChange, renderItem, searchValue, size, styles, }: SelectMenuShellProps<T>) => import("react").JSX.Element;
+}>({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel, iconSize, isLoading, onSearchChange, renderItem, searchValue, spinnerSize, styles, }: SelectMenuShellProps<T>) => import("react").JSX.Element;

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -9,7 +9,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { Spinner } from "@chakra-ui/react/spinner";
 //#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
-var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onSearchChange, renderItem, searchValue, size, styles }) => {
+var selectSizeMap = {
+	lg: {
+		avatarSize: "32",
+		iconSize: "24",
+		spinnerSize: "lg"
+	},
+	md: {
+		avatarSize: "24",
+		iconSize: "16",
+		spinnerSize: "md"
+	}
+};
+var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onSearchChange, renderItem, searchValue, spinnerSize, styles }) => {
 	const isEmpty = collection.size === 0;
 	const hasAction = isValidElement(children);
 	return /* @__PURE__ */ jsx(SelectMenuShellContextProvider, {
@@ -37,14 +49,13 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 					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: [/* @__PURE__ */ jsx(Spinner, {
+								variant: "purple",
+								size: spinnerSize,
+								css: styles.itemLoading
+							}), /* @__PURE__ */ jsx(Text, {
+								css: styles.itemLoadingLabel,
 								children: "Loading..."
 							})]
 						}),
@@ -100,6 +111,6 @@ var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PU
 	]
 });
 //#endregion
-export { SelectMenuShell };
+export { SelectMenuShell, selectSizeMap };
 
 //# sourceMappingURL=SelectMenuShell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport { type BitkitSelectMenuEmptyStateProps, type BitkitSelectMenuSearchProps } from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: '16' | '24';\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  size?: 'md' | 'lg';\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  size,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\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 action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList}>\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        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAkCA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,gBACA,YACA,aACA,MACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,OAAO;GAAS,KAAK;GAAY,GAAI;GAAtD,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,SAAQ;OAAO,YAAW;OAAS,KAAI;OAAK,gBAAe;OAAO,KAAK,OAAO;OAAnF,UAAA,CACE,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,GAC3B,oBAAC,MAAD;QAAM,OAAM;QAAiB,WAAW,SAAS,OAAO,oBAAoB;QAAmB,UAAA;OAEzF,CAAA,CACH;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}
+{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport { type BitkitSelectMenuEmptyStateProps, type BitkitSelectMenuSearchProps } from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\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 action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList}>\n          {isLoading && (\n            <Box css={styles.item}>\n              <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n              <Text css={styles.itemLoadingLabel}>Loading...</Text>\n            </Box>\n          )}\n          {!isLoading && isEmpty && (\n            <Box css={styles.emptyState}>\n              <Text css={styles.itemLabel}>{emptyLabel}</Text>\n              {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n            </Box>\n          )}\n          {!isLoading &&\n            !isEmpty &&\n            collection.group().map(([type, group]) => (\n              <NS.ItemGroup key={type}>\n                {type && (\n                  <NS.ItemGroupLabel asChild>\n                    <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                  </NS.ItemGroupLabel>\n                )}\n                {group.map(renderItem)}\n              </NS.ItemGroup>\n            ))}\n        </Box>\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAwBA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,gBACA,YACA,aACA,aACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,OAAO;GAAS,KAAK;GAAY,GAAI;GAAtD,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}

package/dist/components/BitkitToast/BitkitToaster.js

@@ -25,17 +25,22 @@ var BitkitToaster = () => {
 						children: [
 							!!toast.title && /* @__PURE__ */ jsx(Toast.Title, { children: toast.title }),
 							/* @__PURE__ */ jsx(Toast.Description, { children: toast.description }),
-							!!toast.meta?.action && /* @__PURE__ */ jsx(BitkitColorButton, {
-								as: toast.meta.action.href ? "a" : "button",
+							!!toast.meta?.action && (toast.meta.action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
 								colorVariant: BUTTON_COLORS_MAP[variant],
 								css: styles.actionTrigger,
-								...toast.meta.action.href && {
-									href: toast.meta.action.href,
-									target: toast.meta.action.target
-								},
+								href: toast.meta.action.href,
+								isExternal: toast.meta.action.target === "_blank",
 								onClick: toast.meta.action.onClick,
+								state: toast.meta.action.state,
+								target: toast.meta.action.target,
 								children: toast.meta.action.label
-							}),
+							}) : /* @__PURE__ */ jsx(BitkitColorButton, {
+								colorVariant: BUTTON_COLORS_MAP[variant],
+								css: styles.actionTrigger,
+								onClick: toast.meta.action.onClick,
+								state: toast.meta.action.state,
+								children: toast.meta.action.label
+							})),
 							!!toast.meta?.timestamp && /* @__PURE__ */ jsx(Text, {
 								css: styles.timestamp,
 								children: toast.meta.timestamp

package/dist/components/BitkitToast/BitkitToaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n  const toastRecipe = useSlotRecipe({ key: 'toast' });\n\n  return (\n    <Toaster toaster={toaster}>\n      {(toast) => {\n        const variant = toast.type as BitkitToastVariant;\n        const styles = toastRecipe({ variant });\n        const IconComponent = ICON_COMPONENTS_MAP[variant];\n        return (\n          <Toast.Root variant={variant}>\n            <IconComponent css={styles.icon} />\n            <Box css={styles.content}>\n              {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n              <Toast.Description>{toast.description}</Toast.Description>\n              {!!toast.meta?.action && (\n                <BitkitColorButton\n                  as={toast.meta.action.href ? 'a' : 'button'}\n                  colorVariant={BUTTON_COLORS_MAP[variant]}\n                  css={styles.actionTrigger}\n                  {...(toast.meta.action.href && {\n                    href: toast.meta.action.href,\n                    target: toast.meta.action.target,\n                  })}\n                  onClick={toast.meta.action.onClick}\n                >\n                  {toast.meta.action.label}\n                </BitkitColorButton>\n              )}\n              {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n            </Box>\n            {toast.closable && (\n              <Toast.CloseTrigger asChild>\n                <BitkitCloseButton colorVariant={BUTTON_COLORS_MAP[variant]} size=\"sm\" />\n              </Toast.CloseTrigger>\n            )}\n          </Toast.Root>\n        );\n      }}\n    </Toaster>\n  );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAElD,OACE,oBAAC,SAAD;EAAkB;EACd,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAArB,UAAA;KACE,oBAAC,eAAD,EAAe,KAAK,OAAO,KAAO,CAAA;KAClC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA;OACG,CAAC,CAAC,MAAM,SAAS,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAM,MAAmB,CAAA;OACzD,oBAAC,MAAM,aAAP,EAAA,UAAoB,MAAM,YAA+B,CAAA;OACxD,CAAC,CAAC,MAAM,MAAM,UACb,oBAAC,mBAAD;QACE,IAAI,MAAM,KAAK,OAAO,OAAO,MAAM;QACnC,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,GAAK,MAAM,KAAK,OAAO,QAAQ;SAC7B,MAAM,MAAM,KAAK,OAAO;SACxB,QAAQ,MAAM,KAAK,OAAO;QAC5B;QACA,SAAS,MAAM,KAAK,OAAO;QAE1B,UAAA,MAAM,KAAK,OAAO;OACF,CAAA;OAEpB,CAAC,CAAC,MAAM,MAAM,aAAa,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA,MAAM,KAAK;OAAgB,CAAA;MAClF;;KACJ,MAAM,YACL,oBAAC,MAAM,cAAP;MAAoB,SAAA;MAClB,UAAA,oBAAC,mBAAD;OAAmB,cAAc,kBAAkB;OAAU,MAAK;MAAM,CAAA;KACtD,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
+{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n  const toastRecipe = useSlotRecipe({ key: 'toast' });\n\n  return (\n    <Toaster toaster={toaster}>\n      {(toast) => {\n        const variant = toast.type as BitkitToastVariant;\n        const styles = toastRecipe({ variant });\n        const IconComponent = ICON_COMPONENTS_MAP[variant];\n        return (\n          <Toast.Root variant={variant}>\n            <IconComponent css={styles.icon} />\n            <Box css={styles.content}>\n              {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n              <Toast.Description>{toast.description}</Toast.Description>\n              {!!toast.meta?.action &&\n                (toast.meta.action.href !== undefined ? (\n                  <BitkitColorButton\n                    colorVariant={BUTTON_COLORS_MAP[variant]}\n                    css={styles.actionTrigger}\n                    href={toast.meta.action.href}\n                    isExternal={toast.meta.action.target === '_blank'}\n                    onClick={toast.meta.action.onClick}\n                    state={toast.meta.action.state}\n                    target={toast.meta.action.target}\n                  >\n                    {toast.meta.action.label}\n                  </BitkitColorButton>\n                ) : (\n                  <BitkitColorButton\n                    colorVariant={BUTTON_COLORS_MAP[variant]}\n                    css={styles.actionTrigger}\n                    onClick={toast.meta.action.onClick}\n                    state={toast.meta.action.state}\n                  >\n                    {toast.meta.action.label}\n                  </BitkitColorButton>\n                ))}\n              {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n            </Box>\n            {toast.closable && (\n              <Toast.CloseTrigger asChild>\n                <BitkitCloseButton colorVariant={BUTTON_COLORS_MAP[variant]} size=\"sm\" />\n              </Toast.CloseTrigger>\n            )}\n          </Toast.Root>\n        );\n      }}\n    </Toaster>\n  );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAElD,OACE,oBAAC,SAAD;EAAkB;EACd,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAArB,UAAA;KACE,oBAAC,eAAD,EAAe,KAAK,OAAO,KAAO,CAAA;KAClC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA;OACG,CAAC,CAAC,MAAM,SAAS,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAM,MAAmB,CAAA;OACzD,oBAAC,MAAM,aAAP,EAAA,UAAoB,MAAM,YAA+B,CAAA;OACxD,CAAC,CAAC,MAAM,MAAM,WACZ,MAAM,KAAK,OAAO,SAAS,KAAA,IAC1B,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,MAAM,MAAM,KAAK,OAAO;QACxB,YAAY,MAAM,KAAK,OAAO,WAAW;QACzC,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QACzB,QAAQ,MAAM,KAAK,OAAO;QAEzB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA,IAEnB,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QAExB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA;OAEtB,CAAC,CAAC,MAAM,MAAM,aAAa,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA,MAAM,KAAK;OAAgB,CAAA;MAClF;;KACJ,MAAM,YACL,oBAAC,MAAM,cAAP;MAAoB,SAAA;MAClB,UAAA,oBAAC,mBAAD;OAAmB,cAAc,kBAAkB;OAAU,MAAK;MAAM,CAAA;KACtD,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}

package/dist/components/common/NotificationContent.js

@@ -5,15 +5,21 @@ import { Box } from "@chakra-ui/react/box";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Alert } from "@chakra-ui/react/alert";
 //#region lib/components/common/NotificationContent.tsx
-var ActionButton = ({ action, colorVariant }) => /* @__PURE__ */ jsx(BitkitColorButton, {
-	as: action.href ? "a" : "button",
+var ActionButton = ({ action, colorVariant }) => action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitColorButton, {
 	colorVariant,
-	...action.href && {
-		href: action.href,
-		target: action.target,
-		rel: action.target === "_blank" ? "noopener noreferrer" : void 0
-	},
+	href: action.href,
+	isExternal: action.target === "_blank",
 	onClick: action.onClick,
+	state: action.state,
+	target: action.target,
+	marginBlock: rem(-4),
+	marginInlineEnd: "12",
+	whiteSpace: "nowrap",
+	children: action.label
+}) : /* @__PURE__ */ jsx(BitkitColorButton, {
+	colorVariant,
+	onClick: action.onClick,
+	state: action.state,
 	marginBlock: rem(-4),
 	marginInlineEnd: "12",
 	whiteSpace: "nowrap",

package/dist/components/common/NotificationContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n   the content + action row and the trailing close button, plus the two buttons themselves.\n   Alert.Root is the flex container, so this fragment's row and close button land as flex\n   siblings next to the leading visual (indicator / illustration).\n   The constants here are load-bearing and must not drift across the two components:\n   `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n   and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths.\n\n   `stackable` (opt-in, currently only PromoBanner) makes the elements this fragment owns\n   responsive: below `tablet` the content/action row stacks vertically and the close button\n   floats to the top-right corner. It positions the button absolutely, so the consuming\n   component must give Alert.Root `position=\"relative\"`. Because the button floats over the\n   top-right corner (32px at `inset 8` ⇒ a 40px band), the content row reserves a matching\n   inline-end gutter below `tablet` so title/message text never runs under it — independent of\n   how tall the leading visual is. The leading visual and the Root's own flex direction / gap /\n   padding stay with the consumer — they differ per component. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n  action,\n  colorVariant,\n}: {\n  action: NotificationAction;\n  colorVariant: BitkitColorButtonProps['colorVariant'];\n}) => (\n  <BitkitColorButton\n    as={action.href ? 'a' : 'button'}\n    colorVariant={colorVariant}\n    {...(action.href && {\n      href: action.href,\n      target: action.target,\n      rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n    })}\n    onClick={action.onClick}\n    marginBlock={rem(-4)}\n    marginInlineEnd=\"12\"\n    whiteSpace=\"nowrap\"\n  >\n    {action.label}\n  </BitkitColorButton>\n);\n\nconst CloseButton = ({\n  colorVariant,\n  onClose,\n  stackable,\n}: {\n  colorVariant: BitkitCloseButtonProps['colorVariant'];\n  onClose?: () => void;\n  stackable?: boolean;\n}) => (\n  <BitkitCloseButton\n    alignSelf=\"flex-start\"\n    size=\"sm\"\n    onClick={onClose}\n    colorVariant={colorVariant}\n    // Below tablet (stackable only) it floats to the top-right corner (needs Root\n    // position=\"relative\"); otherwise inline with the -4 bleed that keeps a single line on 48px.\n    position={stackable ? { base: 'absolute', tablet: 'static' } : undefined}\n    insetBlockStart={stackable ? '8' : undefined}\n    insetInlineEnd={stackable ? '8' : undefined}\n    marginBlock={{ base: stackable ? '0' : rem(-4), tablet: rem(-4) }}\n  />\n);\n\nexport interface NotificationContentProps {\n  action?: NotificationAction;\n  colorVariant: NotificationColorVariant;\n  dismissible?: boolean;\n  messageText: ReactNode;\n  onClose?: () => void;\n  /** Opt in to responsive stacking below `tablet`. Requires Root `position=\"relative\"`. */\n  stackable?: boolean;\n  titleText?: ReactNode;\n}\n\nexport const NotificationContent = ({\n  action,\n  colorVariant,\n  dismissible,\n  messageText,\n  onClose,\n  stackable,\n  titleText,\n}: NotificationContentProps) => (\n  <>\n    {/* content + action share a wrapping row so the action drops below the text on narrow widths;\n        when stacking, the row switches to a column below tablet */}\n    <Box\n      display=\"flex\"\n      flexDirection={stackable ? { base: 'column', tablet: 'row' } : undefined}\n      flex={stackable ? { base: '0 1 0%', tablet: '1' } : '1'}\n      minWidth=\"0\"\n      flexWrap=\"wrap\"\n      alignItems={stackable ? { base: 'flex-start', tablet: 'center' } : 'center'}\n      columnGap=\"16\"\n      rowGap={stackable ? { base: '20', tablet: rem(11) } : rem(11)}\n      paddingInlineEnd={stackable && dismissible ? { base: '40', tablet: '0' } : undefined}\n    >\n      <Alert.Content minWidth=\"0\" flex={stackable ? { base: 'none', tablet: `1 1 ${rem(240)}` } : `1 1 ${rem(240)}`}>\n        {titleText && <Alert.Title>{titleText}</Alert.Title>}\n        <Alert.Description>{messageText}</Alert.Description>\n      </Alert.Content>\n      {!!action && <ActionButton action={action} colorVariant={colorVariant} />}\n    </Box>\n    {!!dismissible && <CloseButton colorVariant={colorVariant} onClose={onClose} stackable={stackable} />}\n  </>\n);\n"],"mappings":";;;;;;;AA4BA,IAAM,gBAAgB,EACpB,QACA,mBAKA,oBAAC,mBAAD;CACE,IAAI,OAAO,OAAO,MAAM;CACV;CACd,GAAK,OAAO,QAAQ;EAClB,MAAM,OAAO;EACb,QAAQ,OAAO;EACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;CAC5D;CACA,SAAS,OAAO;CAChB,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;CAEV,UAAA,OAAO;AACS,CAAA;AAGrB,IAAM,eAAe,EACnB,cACA,SACA,gBAMA,oBAAC,mBAAD;CACE,WAAU;CACV,MAAK;CACL,SAAS;CACK;CAGd,UAAU,YAAY;EAAE,MAAM;EAAY,QAAQ;CAAS,IAAI,KAAA;CAC/D,iBAAiB,YAAY,MAAM,KAAA;CACnC,gBAAgB,YAAY,MAAM,KAAA;CAClC,aAAa;EAAE,MAAM,YAAY,MAAM,IAAI,EAAE;EAAG,QAAQ,IAAI,EAAE;CAAE;AACjE,CAAA;AAcH,IAAa,uBAAuB,EAClC,QACA,cACA,aACA,aACA,SACA,WACA,gBAEA,qBAAA,UAAA,EAAA,UAAA,CAGE,qBAAC,KAAD;CACE,SAAQ;CACR,eAAe,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAM,IAAI,KAAA;CAC/D,MAAM,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAI,IAAI;CACpD,UAAS;CACT,UAAS;CACT,YAAY,YAAY;EAAE,MAAM;EAAc,QAAQ;CAAS,IAAI;CACnE,WAAU;CACV,QAAQ,YAAY;EAAE,MAAM;EAAM,QAAQ,IAAI,EAAE;CAAE,IAAI,IAAI,EAAE;CAC5D,kBAAkB,aAAa,cAAc;EAAE,MAAM;EAAM,QAAQ;CAAI,IAAI,KAAA;CAT7E,UAAA,CAWE,qBAAC,MAAM,SAAP;EAAe,UAAS;EAAI,MAAM,YAAY;GAAE,MAAM;GAAQ,QAAQ,OAAO,IAAI,GAAG;EAAI,IAAI,OAAO,IAAI,GAAG;EAA1G,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;CACd,CAAA,GAAA,CAAC,CAAC,UAAU,oBAAC,cAAD;EAAsB;EAAsB;CAAe,CAAA,CACrE;AACJ,CAAA,GAAA,CAAC,CAAC,eAAe,oBAAC,aAAD;CAA2B;CAAuB;CAAoB;AAAY,CAAA,CACpG,EAAA,CAAA"}
+{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n   the content + action row and the trailing close button, plus the two buttons themselves.\n   Alert.Root is the flex container, so this fragment's row and close button land as flex\n   siblings next to the leading visual (indicator / illustration).\n   The constants here are load-bearing and must not drift across the two components:\n   `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n   and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths.\n\n   `stackable` (opt-in, currently only PromoBanner) makes the elements this fragment owns\n   responsive: below `tablet` the content/action row stacks vertically and the close button\n   floats to the top-right corner. It positions the button absolutely, so the consuming\n   component must give Alert.Root `position=\"relative\"`. Because the button floats over the\n   top-right corner (32px at `inset 8` ⇒ a 40px band), the content row reserves a matching\n   inline-end gutter below `tablet` so title/message text never runs under it — independent of\n   how tall the leading visual is. The leading visual and the Root's own flex direction / gap /\n   padding stay with the consumer — they differ per component. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n  action,\n  colorVariant,\n}: {\n  action: NotificationAction;\n  colorVariant: BitkitColorButtonProps['colorVariant'];\n}) =>\n  action.href !== undefined ? (\n    <BitkitColorButton\n      colorVariant={colorVariant}\n      href={action.href}\n      isExternal={action.target === '_blank'}\n      onClick={action.onClick}\n      state={action.state}\n      target={action.target}\n      marginBlock={rem(-4)}\n      marginInlineEnd=\"12\"\n      whiteSpace=\"nowrap\"\n    >\n      {action.label}\n    </BitkitColorButton>\n  ) : (\n    <BitkitColorButton\n      colorVariant={colorVariant}\n      onClick={action.onClick}\n      state={action.state}\n      marginBlock={rem(-4)}\n      marginInlineEnd=\"12\"\n      whiteSpace=\"nowrap\"\n    >\n      {action.label}\n    </BitkitColorButton>\n  );\n\nconst CloseButton = ({\n  colorVariant,\n  onClose,\n  stackable,\n}: {\n  colorVariant: BitkitCloseButtonProps['colorVariant'];\n  onClose?: () => void;\n  stackable?: boolean;\n}) => (\n  <BitkitCloseButton\n    alignSelf=\"flex-start\"\n    size=\"sm\"\n    onClick={onClose}\n    colorVariant={colorVariant}\n    // Below tablet (stackable only) it floats to the top-right corner (needs Root\n    // position=\"relative\"); otherwise inline with the -4 bleed that keeps a single line on 48px.\n    position={stackable ? { base: 'absolute', tablet: 'static' } : undefined}\n    insetBlockStart={stackable ? '8' : undefined}\n    insetInlineEnd={stackable ? '8' : undefined}\n    marginBlock={{ base: stackable ? '0' : rem(-4), tablet: rem(-4) }}\n  />\n);\n\nexport interface NotificationContentProps {\n  action?: NotificationAction;\n  colorVariant: NotificationColorVariant;\n  dismissible?: boolean;\n  messageText: ReactNode;\n  onClose?: () => void;\n  /** Opt in to responsive stacking below `tablet`. Requires Root `position=\"relative\"`. */\n  stackable?: boolean;\n  titleText?: ReactNode;\n}\n\nexport const NotificationContent = ({\n  action,\n  colorVariant,\n  dismissible,\n  messageText,\n  onClose,\n  stackable,\n  titleText,\n}: NotificationContentProps) => (\n  <>\n    {/* content + action share a wrapping row so the action drops below the text on narrow widths;\n        when stacking, the row switches to a column below tablet */}\n    <Box\n      display=\"flex\"\n      flexDirection={stackable ? { base: 'column', tablet: 'row' } : undefined}\n      flex={stackable ? { base: '0 1 0%', tablet: '1' } : '1'}\n      minWidth=\"0\"\n      flexWrap=\"wrap\"\n      alignItems={stackable ? { base: 'flex-start', tablet: 'center' } : 'center'}\n      columnGap=\"16\"\n      rowGap={stackable ? { base: '20', tablet: rem(11) } : rem(11)}\n      paddingInlineEnd={stackable && dismissible ? { base: '40', tablet: '0' } : undefined}\n    >\n      <Alert.Content minWidth=\"0\" flex={stackable ? { base: 'none', tablet: `1 1 ${rem(240)}` } : `1 1 ${rem(240)}`}>\n        {titleText && <Alert.Title>{titleText}</Alert.Title>}\n        <Alert.Description>{messageText}</Alert.Description>\n      </Alert.Content>\n      {!!action && <ActionButton action={action} colorVariant={colorVariant} />}\n    </Box>\n    {!!dismissible && <CloseButton colorVariant={colorVariant} onClose={onClose} stackable={stackable} />}\n  </>\n);\n"],"mappings":";;;;;;;AA4BA,IAAM,gBAAgB,EACpB,QACA,mBAKA,OAAO,SAAS,KAAA,IACd,oBAAC,mBAAD;CACgB;CACd,MAAM,OAAO;CACb,YAAY,OAAO,WAAW;CAC9B,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;CAEV,UAAA,OAAO;AACS,CAAA,IAEnB,oBAAC,mBAAD;CACgB;CACd,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;CAEV,UAAA,OAAO;AACS,CAAA;AAGvB,IAAM,eAAe,EACnB,cACA,SACA,gBAMA,oBAAC,mBAAD;CACE,WAAU;CACV,MAAK;CACL,SAAS;CACK;CAGd,UAAU,YAAY;EAAE,MAAM;EAAY,QAAQ;CAAS,IAAI,KAAA;CAC/D,iBAAiB,YAAY,MAAM,KAAA;CACnC,gBAAgB,YAAY,MAAM,KAAA;CAClC,aAAa;EAAE,MAAM,YAAY,MAAM,IAAI,EAAE;EAAG,QAAQ,IAAI,EAAE;CAAE;AACjE,CAAA;AAcH,IAAa,uBAAuB,EAClC,QACA,cACA,aACA,aACA,SACA,WACA,gBAEA,qBAAA,UAAA,EAAA,UAAA,CAGE,qBAAC,KAAD;CACE,SAAQ;CACR,eAAe,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAM,IAAI,KAAA;CAC/D,MAAM,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAI,IAAI;CACpD,UAAS;CACT,UAAS;CACT,YAAY,YAAY;EAAE,MAAM;EAAc,QAAQ;CAAS,IAAI;CACnE,WAAU;CACV,QAAQ,YAAY;EAAE,MAAM;EAAM,QAAQ,IAAI,EAAE;CAAE,IAAI,IAAI,EAAE;CAC5D,kBAAkB,aAAa,cAAc;EAAE,MAAM;EAAM,QAAQ;CAAI,IAAI,KAAA;CAT7E,UAAA,CAWE,qBAAC,MAAM,SAAP;EAAe,UAAS;EAAI,MAAM,YAAY;GAAE,MAAM;GAAQ,QAAQ,OAAO,IAAI,GAAG;EAAI,IAAI,OAAO,IAAI,GAAG;EAA1G,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;CACd,CAAA,GAAA,CAAC,CAAC,UAAU,oBAAC,cAAD;EAAsB;EAAsB;CAAe,CAAA,CACrE;AACJ,CAAA,GAAA,CAAC,CAAC,eAAe,oBAAC,aAAD;CAA2B;CAAuB;CAAoB;AAAY,CAAA,CACpG,EAAA,CAAA"}

package/dist/components/common/notificationMaps.d.ts

@@ -4,6 +4,18 @@ export type NotificationAction = {
     href?: string;
     label: string;
     onClick?: () => void;
+    /**
+     * Disabled or loading state of the action button.
+     *
+     * Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions
+     * render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`
+     * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so
+     * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s
+     * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`
+     * kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the
+     * same trick — its own change.
+     */
+    state?: 'disabled' | 'loading';
     target?: HTMLAnchorElement['target'];
 };
 export declare const BUTTON_COLORS_MAP: {

package/dist/components/common/notificationMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n  href?: string;\n  label: string;\n  onClick?: () => void;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n  ai: 'indigo',\n  critical: 'red',\n  info: 'blue',\n  progress: 'purple',\n  success: 'green',\n  warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n  ai: IconSparkleFilled,\n  critical: IconErrorCircleFilled,\n  info: IconInfoCircle,\n  progress: Spinner,\n  success: IconCheck,\n  warning: IconWarning,\n};\n"],"mappings":";;;;;;;AAmBA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,sBAAgE;CAC3E,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX"}
+{"version":3,"file":"notificationMaps.js","names":[],"sources":["../../../lib/components/common/notificationMaps.tsx"],"sourcesContent":["/* Shared component-level maps for notification-like components (Alert, Toast). */\n\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ElementType } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport IconSparkleFilled from '../../icons/IconSparkleFilled';\nimport IconWarning from '../../icons/IconWarning';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\n\nexport type NotificationAction = {\n  href?: string;\n  label: string;\n  onClick?: () => void;\n  /**\n   * Disabled or loading state of the action button.\n   *\n   * Known gap: not every consumer can honour the full range. Alert, Toast and PromoBanner actions\n   * render via `BitkitColorButton` and support both. `BitkitNoteCard`'s **link** actions (`href`\n   * set) render via `BitkitButton`, whose anchor variant excludes `loading` at the type level — so\n   * `'loading'` degrades to no state there. That's an implementation limit of `BitkitButton`'s\n   * anchor branch, not a rule about links: loading anchors work fine on `BitkitColorButton` (`href`\n   * kept, pointer events off, activation guarded). Closing it means teaching `BitkitButton` the\n   * same trick — its own change.\n   */\n  state?: 'disabled' | 'loading';\n  target?: HTMLAnchorElement['target'];\n};\n\nexport const BUTTON_COLORS_MAP = {\n  ai: 'indigo',\n  critical: 'red',\n  info: 'blue',\n  progress: 'purple',\n  success: 'green',\n  warning: 'yellow',\n} as const satisfies Record<NotificationVariant, string>;\n\nexport const ICON_COMPONENTS_MAP: Record<NotificationVariant, ElementType> = {\n  ai: IconSparkleFilled,\n  critical: IconErrorCircleFilled,\n  info: IconInfoCircle,\n  progress: Spinner,\n  success: IconCheck,\n  warning: IconWarning,\n};\n"],"mappings":";;;;;;;AA+BA,IAAa,oBAAoB;CAC/B,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,sBAAgE;CAC3E,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX"}

package/dist/theme/recipes/ColorButton.recipe.js

@@ -3,12 +3,18 @@ import { defineRecipe } from "@chakra-ui/react/styled-system";
 var colorButtonRecipe = defineRecipe({
 	className: "color-button",
 	base: {
+		position: "relative",
 		display: "inline-flex",
 		alignItems: "center",
 		justifyContent: "center",
 		border: "1px solid",
 		borderRadius: "4",
-		cursor: "pointer"
+		cursor: "pointer",
+		_disabled: {
+			opacity: .4,
+			pointerEvents: "none"
+		},
+		_loading: { pointerEvents: "none" }
 	},
 	variants: {
 		size: {

package/dist/theme/recipes/ColorButton.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ColorButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst colorButtonRecipe = defineRecipe({\n  className: 'color-button',\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    border: '1px solid',\n    borderRadius: '4',\n    cursor: 'pointer',\n  },\n  variants: {\n    size: {\n      sm: { height: '32', paddingInline: '12', textStyle: 'comp/button/sm' },\n      md: { height: '40', paddingInline: '12', textStyle: 'comp/button/md' },\n      lg: { height: '48', paddingInline: '16', textStyle: 'comp/button/lg' },\n    },\n    colorVariant: {\n      neutral: {\n        color: 'color/neutral/strong',\n        '&:hover': { backgroundColor: 'color/neutral/subtle' },\n        '&:active': { backgroundColor: 'color/neutral/moderate' },\n      },\n      blue: {\n        color: 'color/blue/strong',\n        '&:hover': { backgroundColor: 'color/blue/subtle' },\n        '&:active': { backgroundColor: 'color/blue/moderate' },\n      },\n      green: {\n        color: 'color/green/strong',\n        '&:hover': { backgroundColor: 'color/green/subtle' },\n        '&:active': { backgroundColor: 'color/green/moderate' },\n      },\n      red: {\n        color: 'color/red/strong',\n        '&:hover': { backgroundColor: 'color/red/subtle' },\n        '&:active': { backgroundColor: 'color/red/moderate' },\n      },\n      yellow: {\n        color: 'color/yellow/strong',\n        '&:hover': { backgroundColor: 'color/yellow/subtle' },\n        '&:active': { backgroundColor: 'color/yellow/moderate' },\n      },\n      purple: {\n        color: 'color/purple/strong',\n        '&:hover': { backgroundColor: 'color/purple/subtle' },\n        '&:active': { backgroundColor: 'color/purple/moderate' },\n      },\n      orange: {\n        color: 'color/orange/strong',\n        '&:hover': { backgroundColor: 'color/orange/subtle' },\n        '&:active': { backgroundColor: 'color/orange/moderate' },\n      },\n      turquoise: {\n        color: 'color/turquoise/strong',\n        '&:hover': { backgroundColor: 'color/turquoise/subtle' },\n        '&:active': { backgroundColor: 'color/turquoise/moderate' },\n      },\n      indigo: {\n        color: 'color/indigo/strong',\n        '&:hover': { backgroundColor: 'color/indigo/subtle' },\n        '&:active': { backgroundColor: 'color/indigo/moderate' },\n      },\n      white: {\n        color: 'text/on-color',\n        borderColor: 'border/inverse',\n        '&:hover': { backgroundColor: 'color/white/15' },\n        '&:active': { backgroundColor: 'color/white/30' },\n      },\n    },\n  },\n  defaultVariants: {\n    colorVariant: 'neutral',\n    size: 'sm',\n  },\n});\n\nexport default colorButtonRecipe;\n"],"mappings":";;AAEA,IAAM,oBAAoB,aAAa;CACrC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,cAAc;EACd,QAAQ;CACV;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;EACvE;EACA,cAAc;GACZ,SAAS;IACP,OAAO;IACP,WAAW,EAAE,iBAAiB,uBAAuB;IACrD,YAAY,EAAE,iBAAiB,yBAAyB;GAC1D;GACA,MAAM;IACJ,OAAO;IACP,WAAW,EAAE,iBAAiB,oBAAoB;IAClD,YAAY,EAAE,iBAAiB,sBAAsB;GACvD;GACA,OAAO;IACL,OAAO;IACP,WAAW,EAAE,iBAAiB,qBAAqB;IACnD,YAAY,EAAE,iBAAiB,uBAAuB;GACxD;GACA,KAAK;IACH,OAAO;IACP,WAAW,EAAE,iBAAiB,mBAAmB;IACjD,YAAY,EAAE,iBAAiB,qBAAqB;GACtD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,WAAW;IACT,OAAO;IACP,WAAW,EAAE,iBAAiB,yBAAyB;IACvD,YAAY,EAAE,iBAAiB,2BAA2B;GAC5D;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,OAAO;IACL,OAAO;IACP,aAAa;IACb,WAAW,EAAE,iBAAiB,iBAAiB;IAC/C,YAAY,EAAE,iBAAiB,iBAAiB;GAClD;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;CACR;AACF,CAAC"}
+{"version":3,"file":"ColorButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ColorButton.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst colorButtonRecipe = defineRecipe({\n  className: 'color-button',\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    border: '1px solid',\n    borderRadius: '4',\n    cursor: 'pointer',\n    _disabled: {\n      opacity: 0.4,\n      pointerEvents: 'none',\n    },\n    // Loading keeps the control focusable and undimmed — only pointer activation is blocked.\n    _loading: {\n      pointerEvents: 'none',\n    },\n  },\n  variants: {\n    size: {\n      sm: { height: '32', paddingInline: '12', textStyle: 'comp/button/sm' },\n      md: { height: '40', paddingInline: '12', textStyle: 'comp/button/md' },\n      lg: { height: '48', paddingInline: '16', textStyle: 'comp/button/lg' },\n    },\n    colorVariant: {\n      neutral: {\n        color: 'color/neutral/strong',\n        '&:hover': { backgroundColor: 'color/neutral/subtle' },\n        '&:active': { backgroundColor: 'color/neutral/moderate' },\n      },\n      blue: {\n        color: 'color/blue/strong',\n        '&:hover': { backgroundColor: 'color/blue/subtle' },\n        '&:active': { backgroundColor: 'color/blue/moderate' },\n      },\n      green: {\n        color: 'color/green/strong',\n        '&:hover': { backgroundColor: 'color/green/subtle' },\n        '&:active': { backgroundColor: 'color/green/moderate' },\n      },\n      red: {\n        color: 'color/red/strong',\n        '&:hover': { backgroundColor: 'color/red/subtle' },\n        '&:active': { backgroundColor: 'color/red/moderate' },\n      },\n      yellow: {\n        color: 'color/yellow/strong',\n        '&:hover': { backgroundColor: 'color/yellow/subtle' },\n        '&:active': { backgroundColor: 'color/yellow/moderate' },\n      },\n      purple: {\n        color: 'color/purple/strong',\n        '&:hover': { backgroundColor: 'color/purple/subtle' },\n        '&:active': { backgroundColor: 'color/purple/moderate' },\n      },\n      orange: {\n        color: 'color/orange/strong',\n        '&:hover': { backgroundColor: 'color/orange/subtle' },\n        '&:active': { backgroundColor: 'color/orange/moderate' },\n      },\n      turquoise: {\n        color: 'color/turquoise/strong',\n        '&:hover': { backgroundColor: 'color/turquoise/subtle' },\n        '&:active': { backgroundColor: 'color/turquoise/moderate' },\n      },\n      indigo: {\n        color: 'color/indigo/strong',\n        '&:hover': { backgroundColor: 'color/indigo/subtle' },\n        '&:active': { backgroundColor: 'color/indigo/moderate' },\n      },\n      white: {\n        color: 'text/on-color',\n        borderColor: 'border/inverse',\n        '&:hover': { backgroundColor: 'color/white/15' },\n        '&:active': { backgroundColor: 'color/white/30' },\n      },\n    },\n  },\n  defaultVariants: {\n    colorVariant: 'neutral',\n    size: 'sm',\n  },\n});\n\nexport default colorButtonRecipe;\n"],"mappings":";;AAEA,IAAM,oBAAoB,aAAa;CACrC,WAAW;CACX,MAAM;EACJ,UAAU;EACV,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ;EACR,cAAc;EACd,QAAQ;EACR,WAAW;GACT,SAAS;GACT,eAAe;EACjB;EAEA,UAAU,EACR,eAAe,OACjB;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;GACrE,IAAI;IAAE,QAAQ;IAAM,eAAe;IAAM,WAAW;GAAiB;EACvE;EACA,cAAc;GACZ,SAAS;IACP,OAAO;IACP,WAAW,EAAE,iBAAiB,uBAAuB;IACrD,YAAY,EAAE,iBAAiB,yBAAyB;GAC1D;GACA,MAAM;IACJ,OAAO;IACP,WAAW,EAAE,iBAAiB,oBAAoB;IAClD,YAAY,EAAE,iBAAiB,sBAAsB;GACvD;GACA,OAAO;IACL,OAAO;IACP,WAAW,EAAE,iBAAiB,qBAAqB;IACnD,YAAY,EAAE,iBAAiB,uBAAuB;GACxD;GACA,KAAK;IACH,OAAO;IACP,WAAW,EAAE,iBAAiB,mBAAmB;IACjD,YAAY,EAAE,iBAAiB,qBAAqB;GACtD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,WAAW;IACT,OAAO;IACP,WAAW,EAAE,iBAAiB,yBAAyB;IACvD,YAAY,EAAE,iBAAiB,2BAA2B;GAC5D;GACA,QAAQ;IACN,OAAO;IACP,WAAW,EAAE,iBAAiB,sBAAsB;IACpD,YAAY,EAAE,iBAAiB,wBAAwB;GACzD;GACA,OAAO;IACL,OAAO;IACP,aAAa;IACb,WAAW,EAAE,iBAAiB,iBAAiB;IAC/C,YAAY,EAAE,iBAAiB,iBAAiB;GAClD;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;CACR;AACF,CAAC"}

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

@@ -4,6 +4,10 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             trigger: {
                 paddingBlock: "6";
                 textStyle?: "body/md/regular" | undefined;
+                '&:has([data-slot="avatar"])'?: {
+                    paddingBlock: string;
+                    paddingInlineStart: string;
+                } | undefined;
             };
             indicator: {
                 _icon: {

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" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemLoading" | "itemLoadingLabel", {
+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" | "itemIcon" | "valueIcon", {
     hasStatusIcon: {
         true: {
             trigger: {
@@ -9,6 +9,12 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
     };
     size: {
         lg: {
+            trigger: {
+                '&:has([data-slot="avatar"])': {
+                    paddingBlock: string;
+                    paddingInlineStart: string;
+                };
+            };
             checkbox: {
                 width: "24";
                 height: "24";
@@ -114,6 +120,10 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             trigger: {
                 textStyle: "body/md/regular";
                 paddingBlock: string;
+                '&:has([data-slot="avatar"])': {
+                    paddingBlock: string;
+                    paddingInlineStart: string;
+                };
             };
             searchInputGroup: {
                 height: "48";

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

@@ -16,6 +16,9 @@ var selectSlotRecipe = defineSlotRecipe({
 		"checkmark",
 		"itemList",
 		"itemContent",
+		"itemIcon",
+		"valueIcon",
+		"avatar",
 		"itemLabel",
 		"itemHelperText",
 		"itemLoading",
@@ -32,7 +35,7 @@ var selectSlotRecipe = defineSlotRecipe({
 			color: "input/text/inputValue",
 			gap: "8",
 			justifyContent: "space-between",
-			paddingInlineStart: "16",
+			paddingInlineStart: rem(15),
 			paddingInlineEnd: "48",
 			paddingBlock: rem(11),
 			borderRadius: "4",
@@ -57,7 +60,8 @@ var selectSlotRecipe = defineSlotRecipe({
 			insetEnd: 0,
 			top: 0,
 			bottom: 0,
-			paddingInline: "16",
+			paddingInlineStart: "16",
+			paddingInlineEnd: rem(15),
 			pointerEvents: "none"
 		},
 		indicator: {
@@ -74,6 +78,7 @@ var selectSlotRecipe = defineSlotRecipe({
 			overflow: "hidden",
 			display: "flex",
 			flexDirection: "column",
+			minWidth: "var(--reference-width)",
 			maxWidth: rem(800),
 			focusVisibleRing: "none"
 		},
@@ -129,6 +134,19 @@ var selectSlotRecipe = defineSlotRecipe({
 			alignItems: "flex-start",
 			paddingInline: "16"
 		},
+		itemIcon: {
+			color: "icon/secondary",
+			"[data-state=\"checked\"] &": { color: "icon/interactive" }
+		},
+		valueIcon: {
+			color: "icon/secondary",
+			"[data-disabled] &": { color: "icon/disabled" },
+			"[data-readonly] &": { color: "icon/on-disabled" }
+		},
+		avatar: {
+			flexShrink: 0,
+			"[data-disabled] &": { opacity: .5 }
+		},
 		itemLabel: {
 			color: "text/body",
 			whiteSpace: "nowrap",
@@ -243,6 +261,10 @@ var selectSlotRecipe = defineSlotRecipe({
 		size: {
 			lg: {
 				...variants.size.lg,
+				trigger: { "&:has([data-slot=\"avatar\"])": {
+					paddingBlock: rem(7),
+					paddingInlineStart: rem(11)
+				} },
 				checkbox: {
 					width: "24",
 					height: "24"
@@ -318,7 +340,11 @@ var selectSlotRecipe = defineSlotRecipe({
 				},
 				trigger: {
 					textStyle: "body/md/regular",
-					paddingBlock: rem(9)
+					paddingBlock: rem(9),
+					"&:has([data-slot=\"avatar\"])": {
+						paddingBlock: rem(7),
+						paddingInlineStart: rem(11)
+					}
 				},
 				searchInputGroup: {
 					height: "48",

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    '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: 'bg.muted',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\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      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\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      paddingInline: '16',\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      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    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    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      _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        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        },\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":";;;;;AAMA,IAAa,mBAAmB,iBAAiB;CAC/C,WAAW;CACX,OAAO;EACL,GAAG,cAAc,KAAK;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,YAAY;GACZ,OAAO;GACP,KAAK;GACL,gBAAgB;GAChB,oBAAoB;GACpB,kBAAkB;GAClB,cAAc,IAAI,EAAE;GACpB,cAAc;GACd,YAAY;GACZ,WAAW;GACX,kBAAkB;GAClB,OAAO;GACP,OAAO,EACL,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,iBACT;GACA,WAAW;IACT,OAAO;IACP,YAAY;GACd;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW,EACT,YAAY,sBACd;EACF;EACA,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,UAAU;GACV,KAAK;GACL,QAAQ;GACR,eAAe;GACf,eAAe;EACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW,EACT,OAAO,gBACT;GACA,WAAW,EACT,OAAO,mBACT;EACF;EACA,GAAG;EACH,SAAS;GACP,GAAG,KAAK;GACR,UAAU;GACV,SAAS;GACT,eAAe;GACf,UAAU,IAAI,GAAG;GACjB,kBAAkB;EACpB;EACA,MAAM;GACJ,GAAG,KAAK;GACR,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,YAAY;IACZ,cAAc,EACZ,YAAY,4BACd;GACF;GACA,WAAW;IACT,QAAQ;IACR,OAAO;IACP,cAAc,EACZ,YAAY,cACd;GACF;EACF;EACA,SAAS;GACP,UAAU;GACV,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,KAAK;GACL,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,UAAU;GACR,MAAM;GACN,WAAW;GACX,WAAW;GACX,cAAc;EAChB;EACA,aAAa;GACX,SAAS;GACT,eAAe;GACf,MAAM;GACN,UAAU;E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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    '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: 'bg.muted',\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      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      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\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    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      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 48px item + 16px paddingBlock\n          maxHeight: rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          maxHeight: rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-declare const sidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "divider" | "itemIcon" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
+declare const sidebarSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
     selected: {
         true: {
             item: {

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

@@ -607,6 +607,10 @@ declare const slotRecipes: {
                 trigger: {
                     paddingBlock: "6";
                     textStyle?: "body/md/regular" | undefined;
+                    '&:has([data-slot="avatar"])'?: {
+                        paddingBlock: string;
+                        paddingInlineStart: string;
+                    } | undefined;
                 };
                 indicator: {
                     _icon: {
@@ -1728,7 +1732,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "divider" | "itemIcon" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
+    sidebar: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "title" | "root" | "item" | "suffixIcon" | "itemLabel" | "itemIcon" | "divider" | "project" | "projectLabel" | "projectValue" | "selectionMarker" | "titleWithBack", {
         selected: {
             true: {
                 item: {
@@ -1749,7 +1753,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemLoading" | "itemLoadingLabel", {
+    select: 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" | "itemIcon" | "valueIcon", {
         hasStatusIcon: {
             true: {
                 trigger: {
@@ -1760,6 +1764,12 @@ declare const slotRecipes: {
         };
         size: {
             lg: {
+                trigger: {
+                    '&:has([data-slot="avatar"])': {
+                        paddingBlock: string;
+                        paddingInlineStart: string;
+                    };
+                };
                 checkbox: {
                     width: "24";
                     height: "24";
@@ -1865,6 +1875,10 @@ declare const slotRecipes: {
                 trigger: {
                     textStyle: "body/md/regular";
                     paddingBlock: string;
+                    '&:has([data-slot="avatar"])': {
+                        paddingBlock: string;
+                        paddingInlineStart: string;
+                    };
                 };
                 searchInputGroup: {
                     height: "48";

package/package.json

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