@servicetitan/anvil2 2.7.0 → 2.8.0

package/dist/Chip-BnofwIUN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip-BnofwIUN.js","sources":["../src/components/Chip/internal/Chip.tsx","../src/components/Chip/Chip.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent,\n  forwardRef,\n  useContext,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useId,\n  type ReactNode,\n} from \"react\";\nimport cx from \"classnames\";\nimport tinycolor from \"tinycolor2\";\n\nimport { Avatar, AvatarProps } from \"../../Avatar/internal/Avatar\";\nimport { useAccessibleColor, usePrefersColorScheme } from \"../../../hooks\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\n\nimport styles from \"../Chip.module.scss\";\nimport { Icon } from \"../../Icon\";\nimport { SrOnly } from \"../../SrOnly/SrOnly\";\nimport { LayoutUtilProps, Size } from \"../../../types\";\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { ThemeProviderContext } from \"../../../providers/ThemeProvider/internal/ThemeProviderContext\";\n\n/**\n * Props for the Chip component\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type ChipBaseProps = Omit<ComponentPropsWithoutRef<\"span\">, \"prefix\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * The text that displays in the chip.\n     */\n    label: string;\n    /**\n     * Color of the Chip\n     */\n    color?: string;\n    /**\n     * Wraps text when it overflows\n     */\n    textWrap?: boolean;\n    /**\n     * Content displayed in the chip, before the text.\n     */\n    prefix?: ReactNode;\n\n    /**\n     * Image URL to display in an avatar before the chip text.\n     */\n    avatar?: AvatarProps[\"image\"];\n\n    /**\n     * Content displayed in the chip, after the text.\n     */\n    suffix?: ReactNode;\n  };\n\ntype ChipClickHandler = (\n  e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype ChipCloseHandler = (\n  e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>,\n) => void;\n\ntype SmallChipHandlers =\n  | {\n      /**\n       * Callback for when the Chip is clicked\n       *\n       * @remarks\n       * Adding this will make Chip focusable\n       */\n      onClick?: ChipClickHandler;\n      /**\n       * Called when the component is closed. If supplied, a close button will be rendered.\n       * @returns void\n       */\n      onClose?: never;\n    }\n  | {\n      /**\n       * Called when the component is closed. If supplied, a close button will be rendered.\n       * @returns void\n       */\n      onClose?: ChipCloseHandler;\n      /**\n       * Callback for when the Chip is clicked\n       *\n       * @remarks\n       * Adding this will make Chip focusable\n       */\n      onClick?: never;\n    };\n\ntype SmallChipProps = ChipBaseProps & {\n  /**\n   * The size of the chip\n   * @default medium\n   */\n  size: Extract<Size, \"small\">;\n} & SmallChipHandlers;\n\ntype MediumChipProps = ChipBaseProps & {\n  /**\n   * The size of the chip\n   * @default medium\n   */\n  size?: Extract<Size, \"medium\">;\n  /**\n   * Callback for when the Chip is clicked\n   *\n   * @remarks\n   * Adding this will make Chip focusable\n   */\n  onClick?: ChipClickHandler;\n  /**\n   * Called when the component is closed. If supplied, a close button will be rendered.\n   * @returns void\n   */\n  onClose?: ChipCloseHandler;\n};\n\nexport type ChipProps = SmallChipProps | MediumChipProps;\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n *\n * @example\n * <Chip\n *   label=\"JavaScript\"\n *   color=\"#f7df1e\"\n *   onClose={(e) => console.log('Chip removed')}\n *   onClick={(e) => console.log('Chip clicked')}\n * />\n */\nexport const Chip = forwardRef<HTMLSpanElement, ChipProps>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const {\n    className,\n    color,\n    onClose,\n    onClick,\n    label,\n    style,\n    textWrap,\n    prefix,\n    suffix,\n    avatar,\n    size = \"medium\",\n    tabIndex,\n    ...rest\n  } = componentProps;\n\n  const innerRef = useRef<HTMLSpanElement>(null);\n  const [isMultiline, setIsMultiline] = useState(false);\n  const descriptionId = useId();\n\n  useLayoutEffect(() => {\n    const element = innerRef.current;\n\n    const getSingleLineHeight = (element: HTMLSpanElement | null) => {\n      if (avatar == null) return 0;\n      if (!element) return 0;\n      const computedStyle = getComputedStyle(element);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      return lineHeight + paddingTop + paddingBottom;\n    };\n\n    const singleLineHeight = getSingleLineHeight(element);\n\n    const observer = new ResizeObserver(() => {\n      if (element && avatar != null) {\n        // If actual height is significantly larger than single line, we have multiple lines\n        // Using 1.5 threshold to account for rounding\n        setIsMultiline(element.clientHeight > singleLineHeight * 1.5);\n      }\n    });\n\n    if (element) {\n      observer.observe(element);\n    }\n\n    return () => {\n      if (element) {\n        observer.unobserve(element);\n      }\n    };\n  }, [avatar]);\n\n  /*\n   * @TODO: below to be updated with localization\n   * removeTextIndex is for when removeText comes after the label depending on the language\n   */\n  const removeText = \", removeable chip\";\n  const newLabel = `${label}${onClose ? removeText : \"\"}`;\n\n  const ChipClassNames = cx(styles[\"chip\"], className, {\n    [styles[\"size-small\"]]: size === \"small\",\n    [styles[\"has-close\"]]: !!onClose,\n    [styles[\"text-wrap\"]]: textWrap,\n  });\n\n  const AvatarClassNames = cx(styles[\"avatar\"], {\n    [styles[\"multiline\"]]: textWrap && isMultiline,\n  });\n\n  const { mode: themeMode } = useContext(ThemeProviderContext);\n  const { mode: sysMode } = usePrefersColorScheme();\n  const mode = themeMode ?? sysMode;\n\n  const { foreground, background, border } = useAccessibleColor(color, mode);\n\n  const bgObj = tinycolor(background);\n\n  const styleWithColor = {\n    \"--int-bg-color\": color && background,\n    \"--int-font-color\": color && foreground,\n    \"--int-border-color\": color && border,\n    \"--int-close-background-color\": color\n      ? bgObj.isDark()\n        ? bgObj.lighten(15).toHexString()\n        : bgObj.darken(15).toHexString()\n      : \"#14141429\",\n    ...style,\n    ...layoutStyles,\n  };\n\n  const onKeyUpHandler = (e: KeyboardEvent<HTMLSpanElement>) => {\n    switch (e.code) {\n      case \"Delete\":\n      case \"Backspace\":\n        onClose?.(e);\n        break;\n\n      case \"Enter\":\n      case \"Space\":\n        onClick?.(e);\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  return (\n    <span\n      className={ChipClassNames}\n      style={styleWithColor}\n      data-anv=\"chip\"\n      role={onClick ? \"button\" : undefined}\n      {...(onClick || onClose ? { [\"aria-label\"]: newLabel } : {})}\n      {...(onClose ? { [\"aria-describedby\"]: descriptionId } : {})}\n      {...rest}\n      ref={ref}\n      onClick={onClick}\n      onKeyUp={onKeyUpHandler}\n      tabIndex={onClick || onClose ? 0 : tabIndex}\n    >\n      {avatar != null ? (\n        <span className={AvatarClassNames}>\n          <Avatar\n            className={styles.avatarInner}\n            name={label}\n            color={color}\n            image={avatar}\n            size={size === \"small\" ? \"xsmall\" : \"small\"}\n          />\n        </span>\n      ) : null}\n\n      {prefix != null ? <span className={styles.prefix}>{prefix}</span> : null}\n\n      <span className={styles.inner} ref={innerRef}>\n        {label}\n      </span>\n\n      {suffix != null ? <span className={styles.suffix}>{suffix}</span> : null}\n\n      {!!onClose && (\n        <>\n          <span\n            aria-hidden\n            className={styles[\"close\"]}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose(e);\n            }}\n          >\n            <Icon aria-hidden svg={Close} size={size} />\n          </span>\n          <SrOnly id={descriptionId}>\n            Press Delete or Backspace to remove.\n          </SrOnly>\n        </>\n      )}\n    </span>\n  );\n});\n\nChip.displayName = \"Chip\";\n","import { ChipProps as CoreChipProps, Chip as CoreChip } from \"./internal/Chip\";\nimport { Icon as CoreIcon, IconProps as CoreIconProps } from \"../Icon\";\nimport { AvatarProps as CoreAvatarProps } from \"../Avatar/internal/Avatar\";\n\nimport { forwardRef, type Ref } from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, DistributiveOmit } from \"../../types\";\nimport { AiMarkBooleanProps } from \"../../types/ai-marks\";\nimport { AiMark } from \"../AiMark/AiMark\";\n\n/**\n * Props for the Chip component\n * @property {string} label - The text that displays in the chip\n * @property {\"small\" | \"medium\"} [size] - The size of the chip\n * @property {string} [color] - Color of the Chip\n * @property {boolean} [aiMark] - Whether to display an AI mark icon in the chip\n * @property {(e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClick] - Callback for when the Chip is clicked\n * @property {(e: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>) => void} [onClose] - Called when the component is closed\n * @property {boolean} [textWrap] - Wraps text when it overflows\n * @property {Svg} [icon] - Icon displayed in the chip, before the text.\n * @property {string} [avatar] - Image URL to display in an avatar before the chip text.\n * @extends CoreChipProps\n * @extends DataTrackingId\n * @extends AiMarkBooleanProps\n */\nexport type ChipProps = DistributiveOmit<\n  CoreChipProps,\n  \"prefix\" | \"avatar\" | \"suffix\"\n> &\n  DataTrackingId &\n  AiMarkBooleanProps &\n  (\n    | { icon?: CoreIconProps[\"svg\"]; avatar?: never }\n    | { icon?: never; avatar?: CoreAvatarProps[\"image\"] }\n  );\n\n/**\n * Chip component for displaying compact information or tags.\n *\n * Features:\n * - Configurable sizes (small, medium)\n * - Custom color support with automatic contrast calculation\n * - Optional click handler for interactive chips\n * - Optional close button for removable chips\n * - Optional AI mark icon to indicate AI-generated content\n * - Automatic AI mark type selection: gradient on default chips, inherited color on colored chips\n * - AI mark on clickable chips (hover/focus morph temporarily disabled; see @TODO in source)\n * - Text wrapping support for long labels\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation (Enter/Space to click, Delete/Backspace to close)\n * - Screen reader instructions for removal actions\n * - Theme-aware color adaptation\n * - Layout utility props for positioning and spacing\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Chip\n *   label=\"JavaScript\"\n *   color=\"#f7df1e\"\n *   onClose={(e) => console.log('Chip removed')}\n *   onClick={(e) => console.log('Chip clicked')}\n * />\n *\n * @example\n * <Chip label=\"AI Generated\" aiMark />\n */\nexport const Chip = forwardRef(\n  (\n    {\n      icon,\n      aiMark,\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      ...props\n    }: ChipProps,\n    ref: Ref<HTMLSpanElement>,\n  ) => {\n    const data = {\n      label: props.label,\n      size: props.size,\n      color: props.color,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Chip\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const prefix =\n      icon != null ? (\n        <CoreIcon svg={icon} color=\"var(--int-font-color)\" size={props.size} />\n      ) : null;\n\n    const aiMarkType = props.color ? \"default\" : \"gradient\";\n\n    // @TODO Re-enable AI mark hover/focus morph for `aiMark` + `onClick` chips after publish.\n    // Disabled: composed animation misaligned vs static asset / layout shift (see Chip AI Mark Fix 1 stash).\n    const suffix = aiMark ? (\n      <AiMark\n        type={aiMarkType}\n        size=\"small\"\n        color={props.color ? \"var(--int-font-color)\" : undefined}\n      />\n    ) : undefined;\n\n    const interactionProps = {\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n    };\n\n    return (\n      <CoreChip\n        ref={ref}\n        data-tracking-id={trackingId}\n        {...props}\n        {...interactionProps}\n        prefix={prefix}\n        suffix={suffix}\n      />\n    );\n  },\n);\nChip.displayName = CoreChip.displayName;\n"],"names":["Chip","element","Close","CoreIcon","CoreChip"],"mappings":"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"}

package/dist/Chip.css

@@ -1,6 +1,6 @@
 @layer starter, reset, base, state, application;
 @layer reset {
-  ._chip_11ba0_2 {
+  ._chip_zuxyu_2 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -13,7 +13,7 @@
     box-sizing: border-box;
     display: inline-flex;
   }
-  ._chip_11ba0_2 ._inner_11ba0_15 {
+  ._chip_zuxyu_2 ._inner_zuxyu_15 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -26,7 +26,7 @@
     box-sizing: border-box;
     display: inline-block;
   }
-  ._chip_11ba0_2 ._close_11ba0_28 {
+  ._chip_zuxyu_2 ._close_zuxyu_28 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -39,7 +39,7 @@
     box-sizing: border-box;
     display: inline-flex;
   }
-  ._chip_11ba0_2 ._prefix_11ba0_41 {
+  ._chip_zuxyu_2 ._prefix_zuxyu_41 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -52,7 +52,20 @@
     box-sizing: border-box;
     display: inline-flex;
   }
-  ._chip_11ba0_2 ._button_11ba0_54 {
+  ._chip_zuxyu_2 ._suffix_zuxyu_54 {
+    all: unset;
+    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
+    font-size: 100%;
+    color: var(--foreground-color, #141414);
+    margin: 0;
+    padding: 0;
+    border-style: none;
+    border-width: 0;
+    border-color: transparent;
+    box-sizing: border-box;
+    display: inline-flex;
+  }
+  ._chip_zuxyu_2 ._button_zuxyu_67 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -67,7 +80,7 @@
   }
 }
 @layer base {
-  ._chip_11ba0_2 {
+  ._chip_zuxyu_2 {
     position: relative;
     min-height: 1.625rem;
     height: -moz-min-content;
@@ -87,7 +100,7 @@
     outline: 0 solid var(--focus-ring-color, #0265DC);
     transition: background-color 200ms cubic-bezier(0, 0, 0.4, 1), outline 200ms cubic-bezier(0, 0, 0.4, 1);
   }
-  ._chip_11ba0_2 ._inner_11ba0_15 {
+  ._chip_zuxyu_2 ._inner_zuxyu_15 {
     padding-block: 0.3125rem;
     text-wrap: nowrap;
     overflow: hidden;
@@ -96,7 +109,7 @@
     line-height: 1;
     color: inherit;
   }
-  ._chip_11ba0_2 ._close_11ba0_28 {
+  ._chip_zuxyu_2 ._close_zuxyu_28 {
     flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
@@ -109,22 +122,25 @@
     outline-offset: 0.125rem;
     outline: 0 solid var(--focus-ring-color, #0265DC);
   }
-  ._chip_11ba0_2 ._close_11ba0_28 span {
+  ._chip_zuxyu_2 ._close_zuxyu_28 span {
     color: inherit;
   }
-  ._chip_11ba0_2 ._close_11ba0_28 span svg {
+  ._chip_zuxyu_2 ._close_zuxyu_28 span svg {
     fill: currentColor;
   }
-  ._chip_11ba0_2 ._prefix_11ba0_41 {
+  ._chip_zuxyu_2 ._prefix_zuxyu_41 {
     padding-block: 0.25rem;
     line-height: 1rem;
     color: inherit;
   }
-  ._chip_11ba0_2 ._prefix_11ba0_41 [data-anv=icon] {
+  ._chip_zuxyu_2 ._prefix_zuxyu_41 [data-anv=icon] {
     position: relative;
     top: -1px;
   }
-  ._chip_11ba0_2 ._avatar_11ba0_124 {
+  ._chip_zuxyu_2 ._suffix_zuxyu_54 {
+    align-self: center;
+  }
+  ._chip_zuxyu_2 ._avatar_zuxyu_140 {
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
@@ -133,60 +149,60 @@
     color: inherit;
     margin-left: -0.5rem;
   }
-  ._chip_11ba0_2 ._avatar_11ba0_124._multiline_11ba0_133 {
+  ._chip_zuxyu_2 ._avatar_zuxyu_140._multiline_zuxyu_149 {
     margin-left: unset;
     padding-right: 0.25rem;
   }
-  ._chip_11ba0_2 ._avatar_11ba0_124 [data-anv=avatar] {
+  ._chip_zuxyu_2 ._avatar_zuxyu_140 [data-anv=avatar] {
     border: none;
   }
 }
 @layer state {
-  ._chip_11ba0_2:focus-visible, ._chip_11ba0_2[data-interactive=focus-visible] {
+  ._chip_zuxyu_2:focus-visible, ._chip_zuxyu_2[data-interactive=focus-visible] {
     outline-width: 0.125rem;
   }
-  ._chip_11ba0_2._text-wrap_11ba0_145 ._inner_11ba0_15 {
+  ._chip_zuxyu_2._text-wrap_zuxyu_161 ._inner_zuxyu_15 {
     overflow: visible;
     text-overflow: initial;
     white-space: normal;
     word-break: break-word;
   }
-  ._chip_11ba0_2[role=button] {
+  ._chip_zuxyu_2[role=button] {
     cursor: pointer;
   }
-  ._chip_11ba0_2[role=button]:not(:has(._close_11ba0_28:hover)):hover, ._chip_11ba0_2[role=button]:not(:has(._close_11ba0_28:hover))[data-interactive=hover] {
+  ._chip_zuxyu_2[role=button]:not(:has(._close_zuxyu_28:hover)):hover, ._chip_zuxyu_2[role=button]:not(:has(._close_zuxyu_28:hover))[data-interactive=hover] {
     background-color: var(--int-close-background-color, rgba(20, 20, 20, 0.1607843137));
   }
-  ._chip_11ba0_2 ._close_11ba0_28:hover, ._chip_11ba0_2[data-interactive=close-hover] ._close_11ba0_28 {
+  ._chip_zuxyu_2 ._close_zuxyu_28:hover, ._chip_zuxyu_2[data-interactive=close-hover] ._close_zuxyu_28 {
     background-color: var(--int-close-background-color, rgba(20, 20, 20, 0.1607843137));
   }
-  ._chip_11ba0_2._size-small_11ba0_160 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 {
     min-height: 1.125rem;
     font-size: 0.75rem;
     border-radius: 0.5625rem;
     padding-inline: 0.375rem;
     gap: 0.125rem;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._inner_11ba0_15 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._inner_zuxyu_15 {
     padding-block: 0.125rem;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._close_11ba0_28 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._close_zuxyu_28 {
     width: 1rem;
     height: 1rem;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._prefix_11ba0_41 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._prefix_zuxyu_41 {
     padding-block: 0.125rem;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._prefix_11ba0_41 [data-anv=icon] {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._prefix_zuxyu_41 [data-anv=icon] {
     top: 0px;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._avatar_11ba0_124 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._avatar_zuxyu_140 {
     margin-left: -0.375rem;
   }
-  ._chip_11ba0_2._size-small_11ba0_160 ._avatar_11ba0_124._multiline_11ba0_133 {
+  ._chip_zuxyu_2._size-small_zuxyu_176 ._avatar_zuxyu_140._multiline_zuxyu_149 {
     margin-left: unset;
   }
-  ._chip_11ba0_2._has-close_11ba0_186 {
+  ._chip_zuxyu_2._has-close_zuxyu_202 {
     padding-inline-end: 0;
   }
 }

package/dist/Chip.js

@@ -1,2 +1,2 @@
-export { C as Chip, C as default } from './Chip-DjTAR0va.js';
+export { C as Chip, C as default } from './Chip-BnofwIUN.js';
 //# sourceMappingURL=Chip.js.map

package/dist/{Combobox-By8-34bw.js → Combobox-BOxAzG9v.js}

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useEffect, useMemo, useState, useRef, forwardRef, useId, useLayoutEffect } from 'react';
-import { P as Popover, u as usePopoverContext } from './Popover-D0qSKZ1J.js';
-import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-DKfOL2RJ.js';
+import { P as Popover, u as usePopoverContext } from './Popover-CpU9VAcb.js';
+import { i as isMultiple, b as SELECT_ALL, a as defaultItemToKey, d as defaultItemToString, g as getScrollParent, A as ADD_NEW, S as SelectTriggerBase } from './SelectTriggerBase-Bxmv6oXk.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { u as useDownshiftEnvironment, c as useMultipleSelection, b as useSelect, a as useCombobox$1 } from './downshift.esm-xtSnQp44.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
 import { l as listboxStyles } from './Listbox.module-HAXMOKvC.js';
-import { T as Text } from './Text-BJo4oMI2.js';
+import { T as Text } from './Text-MVxRo6yx.js';
 import { D as Divider } from './Divider-B1UoK8ho.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
 import { S as Spinner } from './Spinner-BqmcE2pb.js';
@@ -14,7 +14,7 @@ import { l as listViewStyles } from './ListView.module-BilDg12y.js';
 import { I as Icon$1 } from './Icon-DuIlne4x.js';
 import { c as checkboxStyles } from './Checkbox.module-EkRZO48Y.js';
 import { S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
-import { A as Avatar } from './Avatar--CnTAnfD.js';
+import { A as Avatar } from './Avatar-ChybzixS.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
@@ -2301,185 +2301,188 @@ const ComboboxMultiple = function(props) {
     }
   ) });
 };
-const ComboboxElement = function(props) {
-  if (isMultiple(props)) {
-    return /* @__PURE__ */ jsx(ComboboxMultiple, { ...props });
-  } else {
-    return /* @__PURE__ */ jsx(ComboboxSingle, { ...props });
+const Combobox = Object.assign(
+  function ComboboxInner(props) {
+    if (isMultiple(props)) {
+      return /* @__PURE__ */ jsx(ComboboxMultiple, { ...props });
+    } else {
+      return /* @__PURE__ */ jsx(ComboboxSingle, { ...props });
+    }
+  },
+  {
+    /**
+     * ComboboxSelect component for selecting items from a predefined list.
+     *
+     * Features:
+     * - Single and multiple item selection from predefined options
+     * - Dropdown-style selection interface
+     * - Grouping support with custom group labels and sorting
+     * - Loading states with spinner indicators
+     * - Disabled and read-only states
+     * - Customizable popover behavior and positioning
+     * - Full accessibility support with ARIA attributes
+     * - Keyboard navigation support
+     * - Layout utility props for positioning and spacing
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Select
+     *   items={items}
+     *   itemToString={(item) => item.name}
+     *   onChange={setSelectedItem}
+     * >
+     *   <Combobox.SelectTrigger label="Select an item" />
+     *   <Combobox.Content>
+     *     {({ items }) => (
+     *       <Combobox.List>
+     *         {items.map((item, i) => (
+     *           <Combobox.Item key={item.id} item={item} index={i}>
+     *             {item.name}
+     *           </Combobox.Item>
+     *         ))}
+     *       </Combobox.List>
+     *     )}
+     *   </Combobox.Content>
+     * </Combobox.Select>
+     */
+    Select: ComboboxSelect,
+    /**
+     * ComboboxSearchField component for the search input field.
+     *
+     * Features:
+     * - Search input with clear button functionality
+     * - Supports multiple selection with chip display
+     * - Handles keyboard navigation and accessibility
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events
+     * - Enhanced prefix support for icons and avatars
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.SearchField
+     *   label="Search users"
+     *   placeholder="Type to search..."
+     *   prefix={{ icon: { svg: SearchIcon } }}
+     * />
+     */
+    SearchField: ComboboxSearchField,
+    /**
+     * ComboboxSelectTrigger component for the select trigger field.
+     *
+     * Features:
+     * - Select input with dropdown trigger
+     * - Supports single selection display
+     * - Handles keyboard navigation and accessibility
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events
+     * - Enhanced prefix support for icons and avatars
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.SelectTrigger
+     *   label="Select user"
+     *   placeholder="Choose a user..."
+     *   prefix={{ avatar: { name: "User" } }}
+     * />
+     */
+    SelectTrigger: ComboboxSelectTrigger,
+    /**
+     * ComboboxContent component for rendering the content area of a combobox.
+     *
+     * Features:
+     * - Supports both popover and inline rendering modes
+     * - Provides render props pattern for flexible content rendering
+     * - Handles grouped items with proper ARIA labels
+     * - Integrates with combobox state management
+     * - Supports custom styling and layout
+     * - Manages focus and blur events for popover behavior
+     *
+     * @example
+     * <Combobox.Content>
+     *   {({ items }) => (
+     *     <Combobox.List>
+     *       {items.map((item, index) => (
+     *         <Combobox.Item key={item.id} item={item} index={index}>
+     *           {item.name}
+     *         </Combobox.Item>
+     *       ))}
+     *     </Combobox.List>
+     *   )}
+     * </Combobox.Content>
+     */
+    Content: ComboboxContent,
+    /**
+     * ComboboxList component for rendering the list of items.
+     *
+     * Features:
+     * - Renders list of items with proper accessibility
+     * - Supports both single and multiple selection modes
+     * - Loading state with spinner
+     * - Empty state handling
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.List>
+     *   {items.map((item, i) => (
+     *     <Combobox.Item key={item.id} item={item} index={i}>
+     *       {item.name}
+     *     </Combobox.Item>
+     *   ))}
+     * </Combobox.List>
+     */
+    List: ComboboxList,
+    /**
+     * ComboboxItem component for rendering individual items in the list.
+     *
+     * Features:
+     * - Individual item rendering with proper accessibility
+     * - Support for disabled state
+     * - Custom content rendering
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Item item={item} index={index}>
+     *   <Flex direction="column">
+     *     <Text>{item.name}</Text>
+     *     <Text size="small" subdued>{item.description}</Text>
+     *   </Flex>
+     * </Combobox.Item>
+     */
+    Item: ComboboxItem,
+    /**
+     * ComboboxItemAddNew component for rendering an "Add New" option.
+     *
+     * Features:
+     * - "Add New" option that appears when no exact match is found
+     * - Customizable content rendering
+     * - Callback when selected
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.ItemAddNew onSelection={(inputValue) => addNewItem(inputValue)}>
+     *   Add "{inputValue}" as new item
+     * </Combobox.ItemAddNew>
+     */
+    ItemAddNew: ComboboxItemAddNew,
+    /**
+     * ComboboxEmpty component for rendering content when no items are available.
+     *
+     * Features:
+     * - Renders content when list is empty
+     * - Customizable empty state message
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Combobox.Empty>
+     *   <Text>No items found. Try adjusting your search.</Text>
+     * </Combobox.Empty>
+     */
+    Empty: ComboboxEmpty
   }
-};
-const Combobox = Object.assign(ComboboxElement, {
-  /**
-   * ComboboxSelect component for selecting items from a predefined list.
-   *
-   * Features:
-   * - Single and multiple item selection from predefined options
-   * - Dropdown-style selection interface
-   * - Grouping support with custom group labels and sorting
-   * - Loading states with spinner indicators
-   * - Disabled and read-only states
-   * - Customizable popover behavior and positioning
-   * - Full accessibility support with ARIA attributes
-   * - Keyboard navigation support
-   * - Layout utility props for positioning and spacing
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.Select
-   *   items={items}
-   *   itemToString={(item) => item.name}
-   *   onChange={setSelectedItem}
-   * >
-   *   <Combobox.SelectTrigger label="Select an item" />
-   *   <Combobox.Content>
-   *     {({ items }) => (
-   *       <Combobox.List>
-   *         {items.map((item, i) => (
-   *           <Combobox.Item key={item.id} item={item} index={i}>
-   *             {item.name}
-   *           </Combobox.Item>
-   *         ))}
-   *       </Combobox.List>
-   *     )}
-   *   </Combobox.Content>
-   * </Combobox.Select>
-   */
-  Select: ComboboxSelect,
-  /**
-   * ComboboxSearchField component for the search input field.
-   *
-   * Features:
-   * - Search input with clear button functionality
-   * - Supports multiple selection with chip display
-   * - Handles keyboard navigation and accessibility
-   * - Integrates with combobox state management
-   * - Supports custom styling and layout
-   * - Manages focus and blur events
-   * - Enhanced prefix support for icons and avatars
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.SearchField
-   *   label="Search users"
-   *   placeholder="Type to search..."
-   *   prefix={{ icon: { svg: SearchIcon } }}
-   * />
-   */
-  SearchField: ComboboxSearchField,
-  /**
-   * ComboboxSelectTrigger component for the select trigger field.
-   *
-   * Features:
-   * - Select input with dropdown trigger
-   * - Supports single selection display
-   * - Handles keyboard navigation and accessibility
-   * - Integrates with combobox state management
-   * - Supports custom styling and layout
-   * - Manages focus and blur events
-   * - Enhanced prefix support for icons and avatars
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.SelectTrigger
-   *   label="Select user"
-   *   placeholder="Choose a user..."
-   *   prefix={{ avatar: { name: "User" } }}
-   * />
-   */
-  SelectTrigger: ComboboxSelectTrigger,
-  /**
-   * ComboboxContent component for rendering the content area of a combobox.
-   *
-   * Features:
-   * - Supports both popover and inline rendering modes
-   * - Provides render props pattern for flexible content rendering
-   * - Handles grouped items with proper ARIA labels
-   * - Integrates with combobox state management
-   * - Supports custom styling and layout
-   * - Manages focus and blur events for popover behavior
-   *
-   * @example
-   * <Combobox.Content>
-   *   {({ items }) => (
-   *     <Combobox.List>
-   *       {items.map((item, index) => (
-   *         <Combobox.Item key={item.id} item={item} index={index}>
-   *           {item.name}
-   *         </Combobox.Item>
-   *       ))}
-   *     </Combobox.List>
-   *   )}
-   * </Combobox.Content>
-   */
-  Content: ComboboxContent,
-  /**
-   * ComboboxList component for rendering the list of items.
-   *
-   * Features:
-   * - Renders list of items with proper accessibility
-   * - Supports both single and multiple selection modes
-   * - Loading state with spinner
-   * - Empty state handling
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.List>
-   *   {items.map((item, i) => (
-   *     <Combobox.Item key={item.id} item={item} index={i}>
-   *       {item.name}
-   *     </Combobox.Item>
-   *   ))}
-   * </Combobox.List>
-   */
-  List: ComboboxList,
-  /**
-   * ComboboxItem component for rendering individual items in the list.
-   *
-   * Features:
-   * - Individual item rendering with proper accessibility
-   * - Support for disabled state
-   * - Custom content rendering
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.Item item={item} index={index}>
-   *   <Flex direction="column">
-   *     <Text>{item.name}</Text>
-   *     <Text size="small" subdued>{item.description}</Text>
-   *   </Flex>
-   * </Combobox.Item>
-   */
-  Item: ComboboxItem,
-  /**
-   * ComboboxItemAddNew component for rendering an "Add New" option.
-   *
-   * Features:
-   * - "Add New" option that appears when no exact match is found
-   * - Customizable content rendering
-   * - Callback when selected
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.ItemAddNew onSelection={(inputValue) => addNewItem(inputValue)}>
-   *   Add "{inputValue}" as new item
-   * </Combobox.ItemAddNew>
-   */
-  ItemAddNew: ComboboxItemAddNew,
-  /**
-   * ComboboxEmpty component for rendering content when no items are available.
-   *
-   * Features:
-   * - Renders content when list is empty
-   * - Customizable empty state message
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Combobox.Empty>
-   *   <Text>No items found. Try adjusting your search.</Text>
-   * </Combobox.Empty>
-   */
-  Empty: ComboboxEmpty
-});
+);
+const ComboboxElement = Combobox;
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxList as c };
-//# sourceMappingURL=Combobox-By8-34bw.js.map
+//# sourceMappingURL=Combobox-BOxAzG9v.js.map