@bitrise/bitkit-v2 0.3.252 → 0.3.253-beta.1710

package/AGENTS.md

@@ -75,9 +75,15 @@ Bitkit components use consistent prop names across the library:
 | Field validation/help text | `helperText`, `errorText`, `warningText` | — |
 | Trailing icon | `suffixIcon` | `rightIcon` |
 | Leading icon | `icon` | `leftIcon`, `prefixIcon` |
+| Per-component color set | `colorVariant` | `colorPalette`, `colorScheme` |
 
 ## Common API patterns
 
+- **`colorVariant`, not Chakra's `colorPalette`** — components that come in multiple color sets (BitkitBadge, BitkitTag, BitkitColorButton, BitkitCloseButton, BitkitRibbon, BitkitAvatar, BitkitLink, BitkitEmptyState, BitkitPageFooter, …) pick the color via a `colorVariant` prop with a fixed, per-component set of keys. Chakra's reserved `colorPalette` prop is **not** accepted. Each component documents its own allowed keys — verify them via the Storybook MCP, don't assume. The spelling is `gray`, never `grey`.
+  ```tsx
+  <BitkitBadge colorVariant="green">Passed</BitkitBadge>
+  <BitkitRibbon colorVariant="purple">…</BitkitRibbon>
+  ```
 - **`state` prop replaces `disabled`/`loading`** — use `<BitkitButton state="disabled">`, not `<BitkitButton disabled>`. Values: `'disabled' | 'loading' | 'skeleton'`.
 - **Dot notation for compound components** — sub-components are exposed as static properties on the parent, not as separate named exports:
   ```tsx

package/dist/components/BitkitActionBar/BitkitActionBar.js

@@ -17,7 +17,7 @@ var BitkitActionBar = (props) => {
 			/* @__PURE__ */ jsx(ActionBar.Separator, {}),
 			children,
 			!!onClose && /* @__PURE__ */ jsx(BitkitCloseButton, {
-				colorPalette: "neutral",
+				colorVariant: "neutral",
 				onClick: onClose,
 				size
 			})

package/dist/components/BitkitActionBar/BitkitActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitActionBar.js","names":[],"sources":["../../../lib/components/BitkitActionBar/BitkitActionBar.tsx"],"sourcesContent":["import { ActionBar, type ActionBarRootProps } from '@chakra-ui/react/action-bar';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ReactNode } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitActionBarProps extends ActionBarRootProps {\n  children: ReactNode;\n  countValue: number;\n  onClose?: () => void;\n}\n\nconst BitkitActionBar = (props: BitkitActionBarProps) => {\n  const { children, countValue, onClose, size, ...rest } = props;\n  return (\n    <ActionBar.Root size={size} {...rest}>\n      <Portal>\n        <ActionBar.Positioner>\n          <ActionBar.Content>\n            <ActionBar.SelectionTrigger tabIndex={-1} textStyle={size === 'xs' ? 'body/sm/regular' : 'body/md/regular'}>\n              {countValue} selected\n            </ActionBar.SelectionTrigger>\n            <ActionBar.Separator />\n            {children}\n            {!!onClose && <BitkitCloseButton colorPalette=\"neutral\" onClick={onClose} size={size} />}\n          </ActionBar.Content>\n        </ActionBar.Positioner>\n      </Portal>\n    </ActionBar.Root>\n  );\n};\n\nexport default BitkitActionBar;\n"],"mappings":";;;;;AAYA,IAAM,mBAAmB,UAAgC;CACvD,MAAM,EAAE,UAAU,YAAY,SAAS,MAAM,GAAG,SAAS;CACzD,OACE,oBAAC,UAAU,MAAX;EAAsB;EAAM,GAAI;YAC9B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAU,YAAX,EAAA,UACE,qBAAC,UAAU,SAAX,EAAA,UAAA;GACE,qBAAC,UAAU,kBAAX;IAA4B,UAAU;IAAI,WAAW,SAAS,OAAO,oBAAoB;cAAzF,CACG,YAAW,WACc;;GAC5B,oBAAC,UAAU,WAAX,CAAsB,CAAA;GACrB;GACA,CAAC,CAAC,WAAW,oBAAC,mBAAD;IAAmB,cAAa;IAAU,SAAS;IAAe;GAAO,CAAA;EACtE,EAAA,CAAA,EACC,CAAA,EAChB,CAAA;CACM,CAAA;AAEpB"}
+{"version":3,"file":"BitkitActionBar.js","names":[],"sources":["../../../lib/components/BitkitActionBar/BitkitActionBar.tsx"],"sourcesContent":["import { ActionBar, type ActionBarRootProps } from '@chakra-ui/react/action-bar';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type ReactNode } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitActionBarProps extends ActionBarRootProps {\n  children: ReactNode;\n  countValue: number;\n  onClose?: () => void;\n}\n\nconst BitkitActionBar = (props: BitkitActionBarProps) => {\n  const { children, countValue, onClose, size, ...rest } = props;\n  return (\n    <ActionBar.Root size={size} {...rest}>\n      <Portal>\n        <ActionBar.Positioner>\n          <ActionBar.Content>\n            <ActionBar.SelectionTrigger tabIndex={-1} textStyle={size === 'xs' ? 'body/sm/regular' : 'body/md/regular'}>\n              {countValue} selected\n            </ActionBar.SelectionTrigger>\n            <ActionBar.Separator />\n            {children}\n            {!!onClose && <BitkitCloseButton colorVariant=\"neutral\" onClick={onClose} size={size} />}\n          </ActionBar.Content>\n        </ActionBar.Positioner>\n      </Portal>\n    </ActionBar.Root>\n  );\n};\n\nexport default BitkitActionBar;\n"],"mappings":";;;;;AAYA,IAAM,mBAAmB,UAAgC;CACvD,MAAM,EAAE,UAAU,YAAY,SAAS,MAAM,GAAG,SAAS;CACzD,OACE,oBAAC,UAAU,MAAX;EAAsB;EAAM,GAAI;YAC9B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAU,YAAX,EAAA,UACE,qBAAC,UAAU,SAAX,EAAA,UAAA;GACE,qBAAC,UAAU,kBAAX;IAA4B,UAAU;IAAI,WAAW,SAAS,OAAO,oBAAoB;cAAzF,CACG,YAAW,WACc;;GAC5B,oBAAC,UAAU,WAAX,CAAsB,CAAA;GACrB;GACA,CAAC,CAAC,WAAW,oBAAC,mBAAD;IAAmB,cAAa;IAAU,SAAS;IAAe;GAAO,CAAA;EACtE,EAAA,CAAA,EACC,CAAA,EAChB,CAAA;CACM,CAAA;AAEpB"}

package/dist/components/BitkitAlert/BitkitAlert.js

@@ -19,7 +19,7 @@ var BitkitAlert = (props) => {
 			/* @__PURE__ */ jsxs(Alert.Content, { children: [titleText && /* @__PURE__ */ jsx(Alert.Title, { children: titleText }), /* @__PURE__ */ jsx(Alert.Description, { children: messageText })] }),
 			!!action && /* @__PURE__ */ jsx(BitkitColorButton, {
 				as: action.href ? "a" : "button",
-				colorPalette: BUTTON_COLORS_MAP[variant],
+				colorVariant: BUTTON_COLORS_MAP[variant],
 				...action.href && {
 					href: action.href,
 					target: action.target
@@ -35,7 +35,7 @@ var BitkitAlert = (props) => {
 				marginBlockStart: rem(7),
 				size: "sm",
 				onClick: onClose,
-				colorPalette: BUTTON_COLORS_MAP[variant]
+				colorVariant: BUTTON_COLORS_MAP[variant]
 			})
 		]
 	});

package/dist/components/BitkitAlert/BitkitAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n  action?: ActionProps;\n  dismissible?: boolean;\n  messageText: ReactNode;\n  onClose?: () => void;\n  titleText?: ReactNode;\n  variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n  const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n  const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n  return (\n    <Alert.Root variant={variant} {...rest}>\n      <Alert.Indicator asChild={variant !== 'progress'}>\n        <IconComponent />\n      </Alert.Indicator>\n      <Alert.Content>\n        {titleText && <Alert.Title>{titleText}</Alert.Title>}\n        <Alert.Description>{messageText}</Alert.Description>\n      </Alert.Content>\n      {!!action && (\n        <BitkitColorButton\n          as={action.href ? 'a' : 'button'}\n          colorPalette={BUTTON_COLORS_MAP[variant]}\n          {...(action.href && { href: action.href, target: action.target })}\n          onClick={action.onClick}\n          marginInlineStart=\"16\"\n          marginInlineEnd=\"12\"\n          whiteSpace=\"nowrap\"\n        >\n          {action.label}\n        </BitkitColorButton>\n      )}\n      {!!dismissible && (\n        <BitkitCloseButton\n          alignSelf=\"flex-start\"\n          marginBlockStart={rem(7)}\n          size=\"sm\"\n          onClick={onClose}\n          colorPalette={BUTTON_COLORS_MAP[variant]}\n        />\n      )}\n    </Alert.Root>\n  );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;AAqBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GACjB,qBAAC,MAAM,SAAP,EAAA,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC,EAAA,CAAA;GACd,CAAC,CAAC,UACD,oBAAC,mBAAD;IACE,IAAI,OAAO,OAAO,MAAM;IACxB,cAAc,kBAAkB;IAChC,GAAK,OAAO,QAAQ;KAAE,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO;IAC/D,SAAS,OAAO;IAChB,mBAAkB;IAClB,iBAAgB;IAChB,YAAW;cAEV,OAAO;GACS,CAAA;GAEpB,CAAC,CAAC,eACD,oBAAC,mBAAD;IACE,WAAU;IACV,kBAAkB,IAAI,CAAC;IACvB,MAAK;IACL,SAAS;IACT,cAAc,kBAAkB;GACjC,CAAA;EAEO;;AAEhB"}
+{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n  action?: ActionProps;\n  dismissible?: boolean;\n  messageText: ReactNode;\n  onClose?: () => void;\n  titleText?: ReactNode;\n  variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n  const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n  const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n  return (\n    <Alert.Root variant={variant} {...rest}>\n      <Alert.Indicator asChild={variant !== 'progress'}>\n        <IconComponent />\n      </Alert.Indicator>\n      <Alert.Content>\n        {titleText && <Alert.Title>{titleText}</Alert.Title>}\n        <Alert.Description>{messageText}</Alert.Description>\n      </Alert.Content>\n      {!!action && (\n        <BitkitColorButton\n          as={action.href ? 'a' : 'button'}\n          colorVariant={BUTTON_COLORS_MAP[variant]}\n          {...(action.href && { href: action.href, target: action.target })}\n          onClick={action.onClick}\n          marginInlineStart=\"16\"\n          marginInlineEnd=\"12\"\n          whiteSpace=\"nowrap\"\n        >\n          {action.label}\n        </BitkitColorButton>\n      )}\n      {!!dismissible && (\n        <BitkitCloseButton\n          alignSelf=\"flex-start\"\n          marginBlockStart={rem(7)}\n          size=\"sm\"\n          onClick={onClose}\n          colorVariant={BUTTON_COLORS_MAP[variant]}\n        />\n      )}\n    </Alert.Root>\n  );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;AAqBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GACjB,qBAAC,MAAM,SAAP,EAAA,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC,EAAA,CAAA;GACd,CAAC,CAAC,UACD,oBAAC,mBAAD;IACE,IAAI,OAAO,OAAO,MAAM;IACxB,cAAc,kBAAkB;IAChC,GAAK,OAAO,QAAQ;KAAE,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO;IAC/D,SAAS,OAAO;IAChB,mBAAkB;IAClB,iBAAgB;IAChB,YAAW;cAEV,OAAO;GACS,CAAA;GAEpB,CAAC,CAAC,eACD,oBAAC,mBAAD;IACE,WAAU;IACV,kBAAkB,IAAI,CAAC;IACvB,MAAK;IACL,SAAS;IACT,cAAc,kBAAkB;GACjC,CAAA;EAEO;;AAEhB"}

package/dist/components/BitkitAvatar/BitkitAvatar.d.ts

@@ -1,7 +1,6 @@
 import { AvatarRootProps } from '@chakra-ui/react/avatar';
-import { ColorPalette } from '@chakra-ui/react/styled-system';
 import { BitkitIconComponent } from '../../icons';
-export type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundColor' | 'background' | 'bg'> & ({
+export type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundColor' | 'background' | 'bg' | 'colorPalette'> & ({
     variant: 'image';
     src: string;
     name: string;
@@ -20,8 +19,8 @@ export type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundCol
     src?: never;
     name?: never;
     icon: BitkitIconComponent;
-    iconColor?: ColorPalette;
-    backgroundColor?: ColorPalette;
+    iconColor?: AvatarRootProps['color'];
+    backgroundColor?: AvatarRootProps['color'];
 } | {
     variant: 'letters';
     src?: never;

package/dist/components/BitkitAvatar/BitkitAvatar.js

@@ -1,13 +1,11 @@
-import { COLOR_PALETTES } from "../../theme/tokens/colors.js";
+import avatarSlotRecipe from "../../theme/slot-recipes/Avatar.recipe.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@chakra-ui/react/avatar";
 //#region lib/components/BitkitAvatar/BitkitAvatar.tsx
-var COLORS = Object.keys(COLOR_PALETTES).reduce((acc, color) => {
-	return !["white"].includes(color) ? [...acc, color] : acc;
-}, []);
+var COLORS = Object.keys(avatarSlotRecipe.variants?.colorVariant || {});
 var pickPalette = (name) => {
 	if (!name || name.length === 0) return "neutral";
 	const str = name.trim();
@@ -18,7 +16,7 @@ var processFallbackName = (name) => {
 	return str && str.length >= 2 ? `${str[0]} ${str[str.length - 1]}` : str;
 };
 var BitkitAvatar = forwardRef((props, ref) => {
-	const { size, variant, src, name, icon: Icon, colorPalette = pickPalette(name), iconColor, backgroundColor, ...rest } = props;
+	const { size, variant, src, name, icon: Icon, colorVariant = pickPalette(name), iconColor, backgroundColor, ...rest } = props;
 	const recipe = useSlotRecipe({ key: "avatar" });
 	const styleVariant = variant === "user" && [
 		"24",
@@ -35,7 +33,7 @@ var BitkitAvatar = forwardRef((props, ref) => {
 		ref,
 		size,
 		variant: styleVariant,
-		colorPalette,
+		colorVariant,
 		backgroundColor,
 		...rest,
 		children: [

package/dist/components/BitkitAvatar/BitkitAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitAvatar.js","names":[],"sources":["../../../lib/components/BitkitAvatar/BitkitAvatar.tsx"],"sourcesContent":["import { Avatar, type AvatarRootProps } from '@chakra-ui/react/avatar';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ColorPalette, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { COLOR_PALETTES } from '../../theme/tokens/colors';\n\nexport type BitkitAvatarProps = Omit<AvatarRootProps, 'variant' | 'backgroundColor' | 'background' | 'bg'> &\n  (\n    | {\n        variant: 'image';\n        src: string;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'image+icon';\n        src: string;\n        name: string;\n        icon: BitkitIconComponent;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'icon';\n        src?: never;\n        name?: never;\n        icon: BitkitIconComponent;\n        iconColor?: ColorPalette;\n        backgroundColor?: ColorPalette;\n      }\n    | {\n        variant: 'letters';\n        src?: never;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'user';\n        src: string;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n  );\n\nconst COLORS = Object.keys(COLOR_PALETTES).reduce<string[]>((acc, color) => {\n  return !['white'].includes(color) ? [...acc, color] : acc;\n}, []);\n\nconst pickPalette = (name?: string) => {\n  if (!name || name.length === 0) return 'neutral';\n  const str = name.trim();\n  return COLORS[(str.charCodeAt(0) + str.charCodeAt(str.length - 1)) % COLORS.length];\n};\n\nconst processFallbackName = (name?: string) => {\n  const str = name?.trim() || '';\n  return str && str.length >= 2 ? `${str[0]} ${str[str.length - 1]}` : str;\n};\n\nconst BitkitAvatar = forwardRef<HTMLDivElement, BitkitAvatarProps>((props, ref) => {\n  const {\n    size,\n    variant,\n    src,\n    name,\n    icon: Icon,\n    colorPalette = pickPalette(name),\n    iconColor,\n    backgroundColor,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'avatar' });\n  const styleVariant = variant === 'user' && ['24', '32', '40', '48'].includes(size as string) ? 'circle' : 'rounded';\n  const styles = recipe({ size, variant: styleVariant });\n  const fallbackName = processFallbackName(name);\n\n  return (\n    <Avatar.Root\n      ref={ref}\n      size={size}\n      variant={styleVariant}\n      colorPalette={colorPalette}\n      backgroundColor={backgroundColor}\n      {...rest}\n    >\n      {!!fallbackName && <Avatar.Fallback name={fallbackName} />}\n      {!!src && <Avatar.Image src={src} />}\n      {!!Icon && variant === 'icon' && <Icon css={styles.icon} color={iconColor} size=\"24\" />}\n      {!!Icon && variant === 'image+icon' && (\n        <Box css={styles.badgeContainer}>\n          <Icon css={styles.badge} size=\"16\" />\n        </Box>\n      )}\n    </Avatar.Root>\n  );\n});\n\nBitkitAvatar.displayName = 'BitkitAvatar';\n\nexport default BitkitAvatar;\n"],"mappings":";;;;;;;AAoDA,IAAM,SAAS,OAAO,KAAK,cAAc,EAAE,QAAkB,KAAK,UAAU;CAC1E,OAAO,CAAC,CAAC,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC,GAAG,KAAK,KAAK,IAAI;AACxD,GAAG,CAAC,CAAC;AAEL,IAAM,eAAe,SAAkB;CACrC,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,OAAO;CACvC,MAAM,MAAM,KAAK,KAAK;CACtB,OAAO,QAAQ,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,IAAI,SAAS,CAAC,KAAK,OAAO;AAC9E;AAEA,IAAM,uBAAuB,SAAkB;CAC7C,MAAM,MAAM,MAAM,KAAK,KAAK;CAC5B,OAAO,OAAO,IAAI,UAAU,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,SAAS,OAAO;AACvE;AAEA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EACJ,MACA,SACA,KACA,MACA,MAAM,MACN,eAAe,YAAY,IAAI,GAC/B,WACA,iBACA,GAAG,SACD;CAEJ,MAAM,SAAS,cAAc,EAAE,KAAK,SAAS,CAAC;CAC9C,MAAM,eAAe,YAAY,UAAU;EAAC;EAAM;EAAM;EAAM;CAAI,EAAE,SAAS,IAAc,IAAI,WAAW;CAC1G,MAAM,SAAS,OAAO;EAAE;EAAM,SAAS;CAAa,CAAC;CACrD,MAAM,eAAe,oBAAoB,IAAI;CAE7C,OACE,qBAAC,OAAO,MAAR;EACO;EACC;EACN,SAAS;EACK;EACG;EACjB,GAAI;YANN;GAQG,CAAC,CAAC,gBAAgB,oBAAC,OAAO,UAAR,EAAiB,MAAM,aAAe,CAAA;GACxD,CAAC,CAAC,OAAO,oBAAC,OAAO,OAAR,EAAmB,IAAM,CAAA;GAClC,CAAC,CAAC,QAAQ,YAAY,UAAU,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,OAAO;IAAW,MAAK;GAAM,CAAA;GACrF,CAAC,CAAC,QAAQ,YAAY,gBACrB,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAO,MAAK;IAAM,CAAA;GACjC,CAAA;EAEI;;AAEjB,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"BitkitAvatar.js","names":[],"sources":["../../../lib/components/BitkitAvatar/BitkitAvatar.tsx"],"sourcesContent":["import { Avatar, type AvatarRootProps } from '@chakra-ui/react/avatar';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport avatarSlotRecipe from '../../theme/slot-recipes/Avatar.recipe';\n\nexport type BitkitAvatarProps = Omit<\n  AvatarRootProps,\n  'variant' | 'backgroundColor' | 'background' | 'bg' | 'colorPalette'\n> &\n  (\n    | {\n        variant: 'image';\n        src: string;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'image+icon';\n        src: string;\n        name: string;\n        icon: BitkitIconComponent;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'icon';\n        src?: never;\n        name?: never;\n        icon: BitkitIconComponent;\n        iconColor?: AvatarRootProps['color'];\n        backgroundColor?: AvatarRootProps['color'];\n      }\n    | {\n        variant: 'letters';\n        src?: never;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n    | {\n        variant: 'user';\n        src: string;\n        name: string;\n        icon?: never;\n        iconColor?: never;\n        backgroundColor?: never;\n      }\n  );\n\ntype AvatarColorVariant =\n  | 'neutral'\n  | 'purple'\n  | 'indigo'\n  | 'blue'\n  | 'green'\n  | 'yellow'\n  | 'red'\n  | 'orange'\n  | 'turquoise';\n\nconst COLORS = Object.keys(avatarSlotRecipe.variants?.colorVariant || {}) as AvatarColorVariant[];\n\nconst pickPalette = (name?: string): AvatarColorVariant => {\n  if (!name || name.length === 0) return 'neutral';\n  const str = name.trim();\n  return COLORS[(str.charCodeAt(0) + str.charCodeAt(str.length - 1)) % COLORS.length];\n};\n\nconst processFallbackName = (name?: string) => {\n  const str = name?.trim() || '';\n  return str && str.length >= 2 ? `${str[0]} ${str[str.length - 1]}` : str;\n};\n\nconst BitkitAvatar = forwardRef<HTMLDivElement, BitkitAvatarProps>((props, ref) => {\n  const {\n    size,\n    variant,\n    src,\n    name,\n    icon: Icon,\n    colorVariant = pickPalette(name),\n    iconColor,\n    backgroundColor,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'avatar' });\n  const styleVariant = variant === 'user' && ['24', '32', '40', '48'].includes(size as string) ? 'circle' : 'rounded';\n  const styles = recipe({ size, variant: styleVariant });\n  const fallbackName = processFallbackName(name);\n\n  return (\n    <Avatar.Root\n      ref={ref}\n      size={size}\n      variant={styleVariant}\n      colorVariant={colorVariant}\n      backgroundColor={backgroundColor}\n      {...rest}\n    >\n      {!!fallbackName && <Avatar.Fallback name={fallbackName} />}\n      {!!src && <Avatar.Image src={src} />}\n      {!!Icon && variant === 'icon' && <Icon css={styles.icon} color={iconColor} size=\"24\" />}\n      {!!Icon && variant === 'image+icon' && (\n        <Box css={styles.badgeContainer}>\n          <Icon css={styles.badge} size=\"16\" />\n        </Box>\n      )}\n    </Avatar.Root>\n  );\n});\n\nBitkitAvatar.displayName = 'BitkitAvatar';\n\nexport default BitkitAvatar;\n"],"mappings":";;;;;;;AAkEA,IAAM,SAAS,OAAO,KAAK,iBAAiB,UAAU,gBAAgB,CAAC,CAAC;AAExE,IAAM,eAAe,SAAsC;CACzD,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,OAAO;CACvC,MAAM,MAAM,KAAK,KAAK;CACtB,OAAO,QAAQ,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,IAAI,SAAS,CAAC,KAAK,OAAO;AAC9E;AAEA,IAAM,uBAAuB,SAAkB;CAC7C,MAAM,MAAM,MAAM,KAAK,KAAK;CAC5B,OAAO,OAAO,IAAI,UAAU,IAAI,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,SAAS,OAAO;AACvE;AAEA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EACJ,MACA,SACA,KACA,MACA,MAAM,MACN,eAAe,YAAY,IAAI,GAC/B,WACA,iBACA,GAAG,SACD;CAEJ,MAAM,SAAS,cAAc,EAAE,KAAK,SAAS,CAAC;CAC9C,MAAM,eAAe,YAAY,UAAU;EAAC;EAAM;EAAM;EAAM;CAAI,EAAE,SAAS,IAAc,IAAI,WAAW;CAC1G,MAAM,SAAS,OAAO;EAAE;EAAM,SAAS;CAAa,CAAC;CACrD,MAAM,eAAe,oBAAoB,IAAI;CAE7C,OACE,qBAAC,OAAO,MAAR;EACO;EACC;EACN,SAAS;EACK;EACG;EACjB,GAAI;YANN;GAQG,CAAC,CAAC,gBAAgB,oBAAC,OAAO,UAAR,EAAiB,MAAM,aAAe,CAAA;GACxD,CAAC,CAAC,OAAO,oBAAC,OAAO,OAAR,EAAmB,IAAM,CAAA;GAClC,CAAC,CAAC,QAAQ,YAAY,UAAU,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,OAAO;IAAW,MAAK;GAAM,CAAA;GACrF,CAAC,CAAC,QAAQ,YAAY,gBACrB,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAO,MAAK;IAAM,CAAA;GACjC,CAAA;EAEI;;AAEjB,CAAC;AAED,aAAa,cAAc"}

package/dist/components/BitkitBadge/BitkitBadge.d.ts

@@ -1,14 +1,11 @@
 import { BadgeProps } from '@chakra-ui/react/badge';
 import { BitkitIconComponent } from '../../icons';
-import { COLOR_PALETTES } from '../../theme/tokens/colors';
 export type BitkitBadgeProps = {
     children?: string;
-    colorPalette?: keyof typeof COLOR_PALETTES | 'ai';
     icon?: BitkitIconComponent;
-} & Omit<BadgeProps, 'children'>;
+} & Omit<BadgeProps, 'children' | 'colorPalette'>;
 declare const BitkitBadge: import('react').ForwardRefExoticComponent<{
     children?: string;
-    colorPalette?: keyof typeof COLOR_PALETTES | "ai";
     icon?: BitkitIconComponent;
-} & Omit<BadgeProps, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
+} & Omit<BadgeProps, "colorPalette" | "children"> & import('react').RefAttributes<HTMLSpanElement>>;
 export default BitkitBadge;

package/dist/components/BitkitBadge/BitkitBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitBadge.js","names":[],"sources":["../../../lib/components/BitkitBadge/BitkitBadge.tsx"],"sourcesContent":["import { Badge, type BadgeProps } from '@chakra-ui/react/badge';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { type COLOR_PALETTES } from '../../theme/tokens/colors';\n\nexport type BitkitBadgeProps = {\n  children?: string;\n  colorPalette?: keyof typeof COLOR_PALETTES | 'ai';\n  icon?: BitkitIconComponent;\n} & Omit<BadgeProps, 'children'>;\n\nconst BitkitBadge = forwardRef<HTMLSpanElement, BitkitBadgeProps>((props, ref) => {\n  const { children, icon: Icon, size = 'xs', ...rest } = props;\n\n  let paddingInlineStart: BitkitBadgeProps['paddingInlineStart'];\n  let paddingInlineEnd: BitkitBadgeProps['paddingInlineEnd'];\n\n  if (children && children.length > 1) {\n    paddingInlineStart = size === 'xs' ? '8' : '6';\n    paddingInlineEnd = size === 'xs' ? '8' : '6';\n    if (Icon) {\n      paddingInlineStart = size === 'xs' ? '4' : '2';\n    }\n  }\n  if (children && children.length === 1) {\n    paddingInlineStart = size === 'xs' ? '4' : '2';\n    paddingInlineEnd = size === 'xs' ? '4' : '2';\n  }\n\n  return (\n    <Badge ref={ref} {...rest} size={size} paddingInlineStart={paddingInlineStart} paddingInlineEnd={paddingInlineEnd}>\n      {Icon && <Icon size=\"16\" />}\n      {children}\n    </Badge>\n  );\n});\n\nBitkitBadge.displayName = 'BitkitBadge';\n\nexport default BitkitBadge;\n"],"mappings":";;;;AAYA,IAAM,cAAc,YAA+C,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,SAAS;CAEvD,IAAI;CACJ,IAAI;CAEJ,IAAI,YAAY,SAAS,SAAS,GAAG;EACnC,qBAAqB,SAAS,OAAO,MAAM;EAC3C,mBAAmB,SAAS,OAAO,MAAM;EACzC,IAAI,MACF,qBAAqB,SAAS,OAAO,MAAM;CAE/C;CACA,IAAI,YAAY,SAAS,WAAW,GAAG;EACrC,qBAAqB,SAAS,OAAO,MAAM;EAC3C,mBAAmB,SAAS,OAAO,MAAM;CAC3C;CAEA,OACE,qBAAC,OAAD;EAAY;EAAK,GAAI;EAAY;EAA0B;EAAsC;YAAjG,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA,GACzB,QACI;;AAEX,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"BitkitBadge.js","names":[],"sources":["../../../lib/components/BitkitBadge/BitkitBadge.tsx"],"sourcesContent":["import { Badge, type BadgeProps } from '@chakra-ui/react/badge';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport type BitkitBadgeProps = {\n  children?: string;\n  icon?: BitkitIconComponent;\n} & Omit<BadgeProps, 'children' | 'colorPalette'>;\n\nconst BitkitBadge = forwardRef<HTMLSpanElement, BitkitBadgeProps>((props, ref) => {\n  const { children, icon: Icon, size = 'xs', ...rest } = props;\n\n  let paddingInlineStart: BitkitBadgeProps['paddingInlineStart'];\n  let paddingInlineEnd: BitkitBadgeProps['paddingInlineEnd'];\n\n  if (children && children.length > 1) {\n    paddingInlineStart = size === 'xs' ? '8' : '6';\n    paddingInlineEnd = size === 'xs' ? '8' : '6';\n    if (Icon) {\n      paddingInlineStart = size === 'xs' ? '4' : '2';\n    }\n  }\n  if (children && children.length === 1) {\n    paddingInlineStart = size === 'xs' ? '4' : '2';\n    paddingInlineEnd = size === 'xs' ? '4' : '2';\n  }\n\n  return (\n    <Badge ref={ref} {...rest} size={size} paddingInlineStart={paddingInlineStart} paddingInlineEnd={paddingInlineEnd}>\n      {Icon && <Icon size=\"16\" />}\n      {children}\n    </Badge>\n  );\n});\n\nBitkitBadge.displayName = 'BitkitBadge';\n\nexport default BitkitBadge;\n"],"mappings":";;;;AAUA,IAAM,cAAc,YAA+C,OAAO,QAAQ;CAChF,MAAM,EAAE,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,SAAS;CAEvD,IAAI;CACJ,IAAI;CAEJ,IAAI,YAAY,SAAS,SAAS,GAAG;EACnC,qBAAqB,SAAS,OAAO,MAAM;EAC3C,mBAAmB,SAAS,OAAO,MAAM;EACzC,IAAI,MACF,qBAAqB,SAAS,OAAO,MAAM;CAE/C;CACA,IAAI,YAAY,SAAS,WAAW,GAAG;EACrC,qBAAqB,SAAS,OAAO,MAAM;EAC3C,mBAAmB,SAAS,OAAO,MAAM;CAC3C;CAEA,OACE,qBAAC,OAAD;EAAY;EAAK,GAAI;EAAY;EAA0B;EAAsC;YAAjG,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA,GACzB,QACI;;AAEX,CAAC;AAED,YAAY,cAAc"}

package/dist/components/BitkitCloseButton/BitkitCloseButton.d.ts

@@ -1,5 +1,5 @@
 import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
-export interface BitkitCloseButtonProps extends HTMLChakraProps<'button'>, RecipeProps<'closeButton'> {
+export interface BitkitCloseButtonProps extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {
 }
 declare const BitkitCloseButton: import('react').ForwardRefExoticComponent<BitkitCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default BitkitCloseButton;

package/dist/components/BitkitCloseButton/BitkitCloseButton.js

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
 var BitkitCloseButton = forwardRef((props, ref) => {
-	const { "aria-label": ariaLabel = "Close", size, ...rest } = props;
+	const { "aria-label": ariaLabel = "Close", size, colorVariant, ...rest } = props;
 	const style = useRecipe({ key: "closeButton" });
 	return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
 		disabled: rest.disabled,
@@ -14,8 +14,11 @@ var BitkitCloseButton = forwardRef((props, ref) => {
 			ref,
 			"aria-label": ariaLabel,
 			...rest,
-			css: style({ size }),
-			color: rest.colorPalette === "neutral" && !rest.disabled ? "icon/primary" : void 0,
+			css: style({
+				size,
+				colorVariant
+			}),
+			color: colorVariant === "neutral" && !rest.disabled ? "icon/primary" : void 0,
 			children: /* @__PURE__ */ jsx(IconCross, { size: size === "xs" ? "16" : "24" })
 		})
 	});

package/dist/components/BitkitCloseButton/BitkitCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps extends HTMLChakraProps<'button'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n  const { 'aria-label': ariaLabel = 'Close', size, ...rest } = props;\n\n  const style = useRecipe({ key: 'closeButton' });\n\n  return (\n    <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n      <chakra.button\n        ref={ref}\n        aria-label={ariaLabel}\n        {...rest}\n        css={style({ size })}\n        color={rest.colorPalette === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n      >\n        <IconCross size={size === 'xs' ? '16' : '24'} />\n      </chakra.button>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAQA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,GAAG,SAAS;CAE7D,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM;YACjD,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,MAAM,EAAE,KAAK,CAAC;GACnB,OAAO,KAAK,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;aAE5E,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n  const { 'aria-label': ariaLabel = 'Close', size, colorVariant, ...rest } = props;\n\n  const style = useRecipe({ key: 'closeButton' });\n\n  return (\n    <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n      <chakra.button\n        ref={ref}\n        aria-label={ariaLabel}\n        {...rest}\n        css={style({ size, colorVariant })}\n        color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n      >\n        <IconCross size={size === 'xs' ? '16' : '24'} />\n      </chakra.button>\n    </BitkitLabelTooltip>\n  );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AASA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,GAAG,SAAS;CAE3E,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM;YACjD,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,MAAM;IAAE;IAAM;GAAa,CAAC;GACjC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;aAEvE,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}

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

@@ -1,5 +1,5 @@
 import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
-export type BitkitColorButtonProps = Omit<HTMLChakraProps<'button'>, 'size'> & RecipeProps<'colorButton'>;
+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>>;
 export default BitkitColorButton;

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'> & 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":";;;AAMA,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 { 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"}

package/dist/components/BitkitLabel/BitkitLabel.js

@@ -18,7 +18,7 @@ var BitkitLabel = forwardRef((props, ref) => {
 	const disabled = disabledProp ?? field?.disabled;
 	const optional = optionalProp ?? (field ? !field.required : void 0);
 	const badgeProps = disabled ? {
-		colorPalette: "neutral",
+		colorVariant: "neutral",
 		size: "xxs"
 	} : { size: "xxs" };
 	const renderedBadge = isValidElement(badge) ? cloneElement(badge, badgeProps) : badge;

package/dist/components/BitkitLabel/BitkitLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n  badge?: ReactNode;\n  counterText?: string;\n  disabled?: boolean;\n  children?: string;\n  optional?: boolean;\n  tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n  color: 'text/disabled',\n  '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n  const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n  const field = useFieldContext();\n  const styles = useSlotRecipe({ key: 'field' })();\n\n  const disabled = disabledProp ?? field?.disabled;\n  const optional = optionalProp ?? (field ? !field.required : undefined);\n\n  const badgeProps = disabled ? ({ colorPalette: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n  const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n  return (\n    <chakra.label\n      ref={ref}\n      css={[styles.label, disabled && disabledStyles, css]}\n      data-disabled={disabled || undefined}\n      {...rest}\n    >\n      {children}{' '}\n      {optional && (\n        <Text as=\"span\" textStyle=\"body/md/regular\">\n          (optional)\n        </Text>\n      )}\n      {!!tooltip && (\n        <BitkitTooltip text={tooltip}>\n          <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n        </BitkitTooltip>\n      )}\n      {(!!counterText || !!badge) && (\n        <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n          {renderedBadge}\n          {!!counterText && (\n            <Text as=\"span\" color={disabled ? 'text/disabled' : 'input/text/helper'} textStyle=\"comp/input/helperText\">\n              {counterText}\n            </Text>\n          )}\n        </Flex>\n      )}\n    </chakra.label>\n  );\n});\n\nBitkitLabel.displayName = 'BitkitLabel';\n\nexport default BitkitLabel;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAoC;CACxC,OAAO;CACP,YAAY,EAAE,OAAO,gBAAgB;AACvC;AAEA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,aAAa,KAAK,UAAU,cAAc,UAAU,UAAU,cAAc,SAAS,GAAG,SAAS;CAEhH,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,cAAc,EAAE,KAAK,QAAQ,CAAC,EAAE;CAE/C,MAAM,WAAW,gBAAgB,OAAO;CACxC,MAAM,WAAW,iBAAiB,QAAQ,CAAC,MAAM,WAAW,KAAA;CAE5D,MAAM,aAAa,WAAY;EAAE,cAAc;EAAW,MAAM;CAAM,IAAe,EAAE,MAAM,MAAM;CACnG,MAAM,gBAAgB,eAAe,KAAK,IAAI,aAAa,OAAmC,UAAU,IAAI;CAE5G,OACE,qBAAC,OAAO,OAAR;EACO;EACL,KAAK;GAAC,OAAO;GAAO,YAAY;GAAgB;EAAG;EACnD,iBAAe,YAAY,KAAA;EAC3B,GAAI;YAJN;GAMG;GAAU;GACV,YACC,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;cAAkB;GAEtC,CAAA;GAEP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;IAEf,CAAC,CAAC,eAAe,CAAC,CAAC,UACnB,qBAAC,MAAD;IAAM,YAAW;IAAS,KAAI;IAAK,mBAAkB;cAArD,CACG,eACA,CAAC,CAAC,eACD,oBAAC,MAAD;KAAM,IAAG;KAAO,OAAO,WAAW,kBAAkB;KAAqB,WAAU;eAChF;IACG,CAAA,CAEJ;;EAEI;;AAElB,CAAC;AAED,YAAY,cAAc"}
+{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n  badge?: ReactNode;\n  counterText?: string;\n  disabled?: boolean;\n  children?: string;\n  optional?: boolean;\n  tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n  color: 'text/disabled',\n  '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n  const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n  const field = useFieldContext();\n  const styles = useSlotRecipe({ key: 'field' })();\n\n  const disabled = disabledProp ?? field?.disabled;\n  const optional = optionalProp ?? (field ? !field.required : undefined);\n\n  const badgeProps = disabled ? ({ colorVariant: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n  const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n  return (\n    <chakra.label\n      ref={ref}\n      css={[styles.label, disabled && disabledStyles, css]}\n      data-disabled={disabled || undefined}\n      {...rest}\n    >\n      {children}{' '}\n      {optional && (\n        <Text as=\"span\" textStyle=\"body/md/regular\">\n          (optional)\n        </Text>\n      )}\n      {!!tooltip && (\n        <BitkitTooltip text={tooltip}>\n          <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n        </BitkitTooltip>\n      )}\n      {(!!counterText || !!badge) && (\n        <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n          {renderedBadge}\n          {!!counterText && (\n            <Text as=\"span\" color={disabled ? 'text/disabled' : 'input/text/helper'} textStyle=\"comp/input/helperText\">\n              {counterText}\n            </Text>\n          )}\n        </Flex>\n      )}\n    </chakra.label>\n  );\n});\n\nBitkitLabel.displayName = 'BitkitLabel';\n\nexport default BitkitLabel;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAoC;CACxC,OAAO;CACP,YAAY,EAAE,OAAO,gBAAgB;AACvC;AAEA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,aAAa,KAAK,UAAU,cAAc,UAAU,UAAU,cAAc,SAAS,GAAG,SAAS;CAEhH,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,cAAc,EAAE,KAAK,QAAQ,CAAC,EAAE;CAE/C,MAAM,WAAW,gBAAgB,OAAO;CACxC,MAAM,WAAW,iBAAiB,QAAQ,CAAC,MAAM,WAAW,KAAA;CAE5D,MAAM,aAAa,WAAY;EAAE,cAAc;EAAW,MAAM;CAAM,IAAe,EAAE,MAAM,MAAM;CACnG,MAAM,gBAAgB,eAAe,KAAK,IAAI,aAAa,OAAmC,UAAU,IAAI;CAE5G,OACE,qBAAC,OAAO,OAAR;EACO;EACL,KAAK;GAAC,OAAO;GAAO,YAAY;GAAgB;EAAG;EACnD,iBAAe,YAAY,KAAA;EAC3B,GAAI;YAJN;GAMG;GAAU;GACV,YACC,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;cAAkB;GAEtC,CAAA;GAEP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;IAEf,CAAC,CAAC,eAAe,CAAC,CAAC,UACnB,qBAAC,MAAD;IAAM,YAAW;IAAS,KAAI;IAAK,mBAAkB;cAArD,CACG,eACA,CAAC,CAAC,eACD,oBAAC,MAAD;KAAM,IAAG;KAAO,OAAO,WAAW,kBAAkB;KAAqB,WAAU;eAChF;IACG,CAAA,CAEJ;;EAEI;;AAElB,CAAC;AAED,YAAY,cAAc"}

package/dist/components/BitkitList/BitkitList.d.ts

@@ -6,7 +6,7 @@ type BitkitListSize = 'lg' | 'md' | 'sm';
 type BitkitListTextColor = 'body' | 'secondary';
 export interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {
     children: ReactNode;
-    colorPalette?: 'neutral' | 'purple';
+    colorVariant?: 'neutral' | 'purple';
     size?: BitkitListSize;
     textColor?: BitkitListTextColor;
     variant?: BitkitListVariant;

package/dist/components/BitkitList/BitkitList.js

@@ -12,7 +12,7 @@ var [BitkitListProvider, useBitkitListContext] = createContext$1({
 	providerName: "<BitkitList />"
 });
 var BitkitList = forwardRef((props, ref) => {
-	const { children, colorPalette = "neutral", size = "lg", textColor = "body", variant = "unordered", ...rest } = props;
+	const { children, colorVariant = "neutral", size = "lg", textColor = "body", variant = "unordered", ...rest } = props;
 	const rootProps = variant === "ordered" ? {
 		as: "ol",
 		counterReset: "bitkit-list"
@@ -27,13 +27,13 @@ var BitkitList = forwardRef((props, ref) => {
 	} : {};
 	return /* @__PURE__ */ jsx(BitkitListProvider, {
 		value: {
+			colorVariant,
 			size,
 			textColor,
 			variant
 		},
 		children: /* @__PURE__ */ jsx(List.Root, {
 			ref,
-			colorPalette,
 			size,
 			...rootProps,
 			...rest,
@@ -49,7 +49,7 @@ var UNORDERED_ICON_SIZE = {
 };
 var BitkitListItem = forwardRef((props, ref) => {
 	const { children, helperText, icon: Icon, iconColor } = props;
-	const { size, textColor, variant } = useBitkitListContext();
+	const { colorVariant, size, textColor, variant } = useBitkitListContext();
 	if (variant === "inline") return /* @__PURE__ */ jsx(List.Item, {
 		ref,
 		alignItems: "center",
@@ -87,13 +87,13 @@ var BitkitListItem = forwardRef((props, ref) => {
 		gap: helperText ? "12" : "6",
 		marginBlockEnd: helperText ? "8" : void 0,
 		children: [Icon ? /* @__PURE__ */ jsx(List.Indicator, {
-			color: iconColor ?? "colorPalette.strong",
+			color: iconColor ?? `color/${colorVariant}/strong`,
 			children: /* @__PURE__ */ jsx(Icon, { size: UNORDERED_ICON_SIZE[size] })
 		}) : /* @__PURE__ */ jsx(List.Indicator, {
 			_before: { content: "counter(bitkit-list)" },
-			background: "colorPalette.subtle",
+			background: `color/${colorVariant}/subtle`,
 			borderRadius: "50%",
-			color: "colorPalette.strong",
+			color: `color/${colorVariant}/strong`,
 			height: helperText ? "24" : "20",
 			marginBlock: helperText ? void 0 : "2",
 			overflow: "hidden",

package/dist/components/BitkitList/BitkitList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n  size: BitkitListSize;\n  textColor: BitkitListTextColor;\n  variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n  name: 'BitkitListContext',\n  hookName: 'useBitkitListContext',\n  providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n  children: ReactNode;\n  colorPalette?: 'neutral' | 'purple';\n  size?: BitkitListSize;\n  textColor?: BitkitListTextColor;\n  variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n  const { children, colorPalette = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n  const rootProps =\n    variant === 'ordered'\n      ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n      : variant === 'explainer'\n        ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n        : variant === 'inline'\n          ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n          : {};\n\n  return (\n    <BitkitListProvider value={{ size, textColor, variant }}>\n      <List.Root ref={ref} colorPalette={colorPalette} size={size} {...rootProps} {...rest}>\n        {children}\n      </List.Root>\n    </BitkitListProvider>\n  );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n  children: ReactNode;\n  helperText?: ReactNode;\n  icon?: BitkitIconComponent;\n  iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n  lg: '24',\n  md: '16',\n  sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n  const { children, helperText, icon: Icon, iconColor } = props;\n  const { size, textColor, variant } = useBitkitListContext();\n\n  if (variant === 'inline') {\n    return (\n      <List.Item\n        ref={ref}\n        alignItems=\"center\"\n        color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n        _notFirst={{\n          _before: {\n            content: '\"\\\\2022\"',\n            color: 'text/tertiary',\n            marginInline: '8',\n          },\n        }}\n      >\n        {children}\n      </List.Item>\n    );\n  }\n\n  const content = helperText ? (\n    <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n      {children}\n      <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n        {helperText}\n      </Text>\n    </Box>\n  ) : (\n    children\n  );\n\n  if (variant === 'ordered') {\n    return (\n      <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n        {Icon ? (\n          <List.Indicator color={iconColor ?? 'icon/secondary'}>\n            <Icon size={UNORDERED_ICON_SIZE[size]} />\n          </List.Indicator>\n        ) : (\n          <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n        )}\n        {content}\n      </List.Item>\n    );\n  }\n\n  if (variant === 'explainer') {\n    return (\n      <List.Item\n        ref={ref}\n        counterIncrement=\"bitkit-list\"\n        gap={helperText ? '12' : '6'}\n        marginBlockEnd={helperText ? '8' : undefined}\n      >\n        {Icon ? (\n          <List.Indicator color={iconColor ?? 'colorPalette.strong'}>\n            <Icon size={UNORDERED_ICON_SIZE[size]} />\n          </List.Indicator>\n        ) : (\n          <List.Indicator\n            _before={{ content: 'counter(bitkit-list)' }}\n            background=\"colorPalette.subtle\"\n            borderRadius=\"50%\"\n            color=\"colorPalette.strong\"\n            height={helperText ? '24' : '20'}\n            // Give the smaller 20px circle 2px of block margin on each side so the marker\n            // always occupies a 24px vertical slot and its center aligns with the first\n            // text line — matches the Figma frame with the 20px circle centered in a 24px\n            // marker box.\n            marginBlock={helperText ? undefined : '2'}\n            overflow=\"hidden\"\n            textStyle=\"comp/badge/sm\"\n            width={helperText ? '24' : '20'}\n          />\n        )}\n        {content}\n      </List.Item>\n    );\n  }\n\n  // unordered (default)\n  if (Icon) {\n    return (\n      <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n        <List.Indicator color={iconColor ?? 'icon/secondary'}>\n          <Icon size={UNORDERED_ICON_SIZE[size]} />\n        </List.Indicator>\n        {content}\n      </List.Item>\n    );\n  }\n\n  return (\n    <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n      <List.Indicator aria-hidden>•</List.Indicator>\n      {content}\n    </List.Item>\n  );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
+{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n  colorVariant: 'neutral' | 'purple';\n  size: BitkitListSize;\n  textColor: BitkitListTextColor;\n  variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n  name: 'BitkitListContext',\n  hookName: 'useBitkitListContext',\n  providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n  children: ReactNode;\n  colorVariant?: 'neutral' | 'purple';\n  size?: BitkitListSize;\n  textColor?: BitkitListTextColor;\n  variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n  const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n  const rootProps =\n    variant === 'ordered'\n      ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n      : variant === 'explainer'\n        ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n        : variant === 'inline'\n          ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n          : {};\n\n  return (\n    <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n      <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n        {children}\n      </List.Root>\n    </BitkitListProvider>\n  );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n  children: ReactNode;\n  helperText?: ReactNode;\n  icon?: BitkitIconComponent;\n  iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n  lg: '24',\n  md: '16',\n  sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n  const { children, helperText, icon: Icon, iconColor } = props;\n  const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n  if (variant === 'inline') {\n    return (\n      <List.Item\n        ref={ref}\n        alignItems=\"center\"\n        color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n        _notFirst={{\n          _before: {\n            content: '\"\\\\2022\"',\n            color: 'text/tertiary',\n            marginInline: '8',\n          },\n        }}\n      >\n        {children}\n      </List.Item>\n    );\n  }\n\n  const content = helperText ? (\n    <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n      {children}\n      <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n        {helperText}\n      </Text>\n    </Box>\n  ) : (\n    children\n  );\n\n  if (variant === 'ordered') {\n    return (\n      <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n        {Icon ? (\n          <List.Indicator color={iconColor ?? 'icon/secondary'}>\n            <Icon size={UNORDERED_ICON_SIZE[size]} />\n          </List.Indicator>\n        ) : (\n          <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n        )}\n        {content}\n      </List.Item>\n    );\n  }\n\n  if (variant === 'explainer') {\n    return (\n      <List.Item\n        ref={ref}\n        counterIncrement=\"bitkit-list\"\n        gap={helperText ? '12' : '6'}\n        marginBlockEnd={helperText ? '8' : undefined}\n      >\n        {Icon ? (\n          <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n            <Icon size={UNORDERED_ICON_SIZE[size]} />\n          </List.Indicator>\n        ) : (\n          <List.Indicator\n            _before={{ content: 'counter(bitkit-list)' }}\n            background={`color/${colorVariant}/subtle`}\n            borderRadius=\"50%\"\n            color={`color/${colorVariant}/strong`}\n            height={helperText ? '24' : '20'}\n            // Give the smaller 20px circle 2px of block margin on each side so the marker\n            // always occupies a 24px vertical slot and its center aligns with the first\n            // text line — matches the Figma frame with the 20px circle centered in a 24px\n            // marker box.\n            marginBlock={helperText ? undefined : '2'}\n            overflow=\"hidden\"\n            textStyle=\"comp/badge/sm\"\n            width={helperText ? '24' : '20'}\n          />\n        )}\n        {content}\n      </List.Item>\n    );\n  }\n\n  // unordered (default)\n  if (Icon) {\n    return (\n      <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n        <List.Indicator color={iconColor ?? 'icon/secondary'}>\n          <Icon size={UNORDERED_ICON_SIZE[size]} />\n        </List.Indicator>\n        {content}\n      </List.Item>\n    );\n  }\n\n  return (\n    <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n      <List.Indicator aria-hidden>•</List.Indicator>\n      {content}\n    </List.Item>\n  );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}

package/dist/components/BitkitMarkdown/BitkitMarkdown.js

@@ -22,7 +22,7 @@ var createComponents = (size, blockquoteStyles) => {
 	const listSize = size === "lg" ? "lg" : "md";
 	return {
 		a: ({ node: _, ...props }) => /* @__PURE__ */ jsx(BitkitLink, {
-			colorScheme: "purple",
+			colorVariant: "purple",
 			rel: "noopener noreferrer",
 			target: "_blank",
 			...props

package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getTextContent).join('');\n  if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n  return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n  const codeSize = size === 'lg' ? 'lg' : 'md';\n  const listSize = size === 'lg' ? 'lg' : 'md';\n\n  return {\n    a: ({ node: _, ...props }) => (\n      <BitkitLink colorScheme=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n    ),\n    blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n    code: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n        {String(children)}\n      </BitkitCodeSnippet>\n    ),\n    h1: ({ node: _, ...props }) => <Heading as=\"h1\" textStyle=\"heading/h1\" {...props} />,\n    h2: ({ node: _, ...props }) => <Heading as=\"h2\" textStyle=\"heading/h2\" {...props} />,\n    h3: ({ node: _, ...props }) => <Heading as=\"h3\" textStyle=\"heading/h3\" {...props} />,\n    h4: ({ node: _, ...props }) => <Heading as=\"h4\" textStyle=\"heading/h4\" {...props} />,\n    h5: ({ node: _, ...props }) => <Heading as=\"h5\" textStyle=\"heading/h5\" {...props} />,\n    h6: ({ node: _, ...props }) => <Heading as=\"h6\" textStyle=\"heading/h6\" {...props} />,\n    hr: () => <Separator />,\n    li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n    ol: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"ordered\">\n        {props.children}\n      </BitkitList>\n    ),\n    p: ({ node: _, ...props }) => <Text {...props} />,\n    pre: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n        {getTextContent(children)}\n      </BitkitCodeSnippet>\n    ),\n    ul: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"unordered\">\n        {props.children}\n      </BitkitList>\n    ),\n  };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n  children: string;\n  components?: Components | null;\n  rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n  const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdown' });\n  const styles = recipe({ size });\n\n  const defaultComponents = createComponents(size, styles.blockquote);\n  const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n  return (\n    <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n      <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n        {children}\n      </Markdown>\n    </Stack>\n  );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,EAAE,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT;AAIA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,aAAY;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAEzF,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAC7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;aACvC,OAAO,QAAQ;EACC,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAChD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;aACtC,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,eAAe,OAAO,MAAM,GAAG,SAAS;CAGtE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,EAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,OAAO;EAAM,GAAI;YAC9C,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getTextContent).join('');\n  if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n  return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n  const codeSize = size === 'lg' ? 'lg' : 'md';\n  const listSize = size === 'lg' ? 'lg' : 'md';\n\n  return {\n    a: ({ node: _, ...props }) => (\n      <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n    ),\n    blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n    code: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n        {String(children)}\n      </BitkitCodeSnippet>\n    ),\n    h1: ({ node: _, ...props }) => <Heading as=\"h1\" textStyle=\"heading/h1\" {...props} />,\n    h2: ({ node: _, ...props }) => <Heading as=\"h2\" textStyle=\"heading/h2\" {...props} />,\n    h3: ({ node: _, ...props }) => <Heading as=\"h3\" textStyle=\"heading/h3\" {...props} />,\n    h4: ({ node: _, ...props }) => <Heading as=\"h4\" textStyle=\"heading/h4\" {...props} />,\n    h5: ({ node: _, ...props }) => <Heading as=\"h5\" textStyle=\"heading/h5\" {...props} />,\n    h6: ({ node: _, ...props }) => <Heading as=\"h6\" textStyle=\"heading/h6\" {...props} />,\n    hr: () => <Separator />,\n    li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n    ol: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"ordered\">\n        {props.children}\n      </BitkitList>\n    ),\n    p: ({ node: _, ...props }) => <Text {...props} />,\n    pre: ({ node: _, children }) => (\n      <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n        {getTextContent(children)}\n      </BitkitCodeSnippet>\n    ),\n    ul: ({ node: _, ...props }) => (\n      <BitkitList size={listSize} variant=\"unordered\">\n        {props.children}\n      </BitkitList>\n    ),\n  };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n  children: string;\n  components?: Components | null;\n  rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n  const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'markdown' });\n  const styles = recipe({ size });\n\n  const defaultComponents = createComponents(size, styles.blockquote);\n  const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n  return (\n    <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n      <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n        {children}\n      </Markdown>\n    </Stack>\n  );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,EAAE,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT;AAIA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAC7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;aACvC,OAAO,QAAQ;EACC,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAChD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;aACtC,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,eAAe,OAAO,MAAM,GAAG,SAAS;CAGtE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,EAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,OAAO;EAAM,GAAI;YAC9C,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitMultiselect/BitkitMultiselect.js

@@ -43,7 +43,7 @@ var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
 	const renderTags = () => {
 		if (constrained) return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasSelection && /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
 			size: "sm",
-			colorPalette: "neutral",
+			colorVariant: "neutral",
 			labelText: String(selectedValues.length),
 			state: tagState,
 			onRemove: canRemove ? () => select.clearValue() : void 0
@@ -61,7 +61,7 @@ var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
 		});
 		return selectedItems.map((item) => /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
 			size: "sm",
-			colorPalette: "neutral",
+			colorVariant: "neutral",
 			labelText: item.label,
 			state: tagState,
 			onRemove: canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : void 0
@@ -88,7 +88,7 @@ var ClearAllButton = ({ state }) => {
 	if (!shouldShowClearButton(false, select.value.length, state)) return null;
 	return /* @__PURE__ */ jsx(BitkitCloseButton, {
 		size: "sm",
-		colorPalette: "neutral",
+		colorVariant: "neutral",
 		"aria-label": "Clear all",
 		onClick: () => select.clearValue()
 	});

package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.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, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorPalette=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorPalette=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorPalette=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\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 recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\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            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
+{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.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, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorVariant=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorVariant=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\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 recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\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            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}

package/dist/components/BitkitPageFooter/BitkitPageFooter.d.ts

@@ -1,8 +1,8 @@
 import { BoxProps } from '@chakra-ui/react/box';
 import { ComponentPropsWithoutRef, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
-export interface BitkitPageFooterProps extends Omit<BoxProps, 'colorScheme'> {
+export interface BitkitPageFooterProps extends Omit<BoxProps, 'colorVariant'> {
     children?: ReactNode;
-    colorScheme?: 'gray' | 'white';
+    colorVariant?: 'gray' | 'white';
     severity?: 'none' | 'minor' | 'major' | 'critical' | (string & {});
     size?: 'compact' | 'default';
     statusLabel?: string;

package/dist/components/BitkitPageFooter/BitkitPageFooter.js

@@ -6,20 +6,20 @@ import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region lib/components/BitkitPageFooter/BitkitPageFooter.tsx
 var SEVERITY_COLOR_MAP = {
-	critical: "sys/red/bold",
-	major: "sys/orange/bold",
-	minor: "sys/yellow/muted",
-	none: "sys/green/bold"
+	critical: "color/red/bold",
+	major: "color/orange/bold",
+	minor: "color/yellow/muted",
+	none: "color/green/bold"
 };
 var BitkitPageFooter = forwardRef((props, ref) => {
-	const { children, colorScheme, severity = "none", size, statusLabel, variant, ...rest } = props;
+	const { children, colorVariant, severity = "none", size, statusLabel, variant, ...rest } = props;
 	const styles = useSlotRecipe({ key: "pageFooter" })({
-		colorScheme,
+		colorVariant,
 		size,
 		variant
 	});
 	const year = (/* @__PURE__ */ new Date()).getFullYear();
-	const severityColor = SEVERITY_COLOR_MAP[severity] ?? "sys/neutral/bold";
+	const severityColor = SEVERITY_COLOR_MAP[severity] ?? "color/neutral/bold";
 	return /* @__PURE__ */ jsxs(Box, {
 		as: "footer",
 		ref,