@box/blueprint-web 8.1.1 → 8.2.0

package/lib-esm/combobox/combobox.js

@@ -9,11 +9,12 @@ import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { TextArea } from '../text-area/text-area.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { ChipsGroup } from './chips-group.js';
 import styles from './combobox.module.js';
-import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
@@ -45,6 +46,7 @@ const RootInner = ({
     open,
     onOpenChange,
     onFocus,
+    onBlur,
     defaultInputValue = '',
     inputValue: inputValueProp,
     onInputValueChange,
@@ -70,11 +72,12 @@ const RootInner = ({
     focusLoop,
     clearButtonAriaLabel,
     endComboboxIcon,
+    idForLabel,
     ...comboboxProps
   } = rest;
   const isInput = useMemo(() => as === 'input', [as]);
   const inputRef = useRef(null);
-  const comboboxId = useUniqueId('combobox-');
+  const comboboxId = useUniqueId('combobox-', !idForLabel) || idForLabel || 'default-combobox-id';
   const popoverRef = useRef(null);
   const popoverRefCallback = useCallback(node => {
     popoverRef.current = node;
@@ -277,13 +280,15 @@ const RootInner = ({
             ...comboboxProps,
             ref: reference,
             "aria-describedby": ariaDescribedBy,
-            "aria-invalid": hasError,
+            ...(hasError && {
+              'aria-invalid': 'true'
+            }),
             "aria-required": required,
             autoSelect: false,
             className: styles.textInput,
             disabled: disabled,
             id: comboboxId,
-            onBlur: handleOnBlur,
+            onBlur: composeEventHandlers(onBlur, handleOnBlur),
             onFocus: handleOnFocus,
             onKeyDown: handleKeyDown,
             required: required,
@@ -315,14 +320,16 @@ const RootInner = ({
     id: comboboxId,
     render: jsx(TextArea, {
       ref: reference,
-      "aria-invalid": hasError,
+      ...(hasError && {
+        'aria-invalid': 'true'
+      }),
       "aria-required": required,
       className: styles.textInput,
       disabled: disabled,
       error: error,
       hideLabel: hideLabel,
       label: label,
-      onBlur: handleOnBlur,
+      onBlur: composeEventHandlers(onBlur, handleOnBlur),
       onFocus: handleOnFocus,
       onKeyDown: handleKeyDown,
       required: required

package/lib-esm/combobox/combobox.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--92da0","disabled":"bp_combobox_module_disabled--92da0","label":"bp_combobox_module_label--92da0","hiddenLabel":"bp_combobox_module_hiddenLabel--92da0","comboboxContainer":"bp_combobox_module_comboboxContainer--92da0","withComboboxButtons":"bp_combobox_module_withComboboxButtons--92da0","error":"bp_combobox_module_error--92da0","textInputWrapper":"bp_combobox_module_textInputWrapper--92da0","textInput":"bp_combobox_module_textInput--92da0","errorIcon":"bp_combobox_module_errorIcon--92da0","comboboxButtons":"bp_combobox_module_comboboxButtons--92da0","withChips":"bp_combobox_module_withChips--92da0","inlineError":"bp_combobox_module_inlineError--92da0","popover":"bp_combobox_module_popover--92da0","option":"bp_combobox_module_option--92da0","indicator":"bp_combobox_module_indicator--92da0","indicatorIcon":"bp_combobox_module_indicatorIcon--92da0","optionWithIndicator":"bp_combobox_module_optionWithIndicator--92da0","loadingIndicator":"bp_combobox_module_loadingIndicator--92da0","noResultOption":"bp_combobox_module_noResultOption--92da0"};
+var styles = {"container":"bp_combobox_module_container--4d653","disabled":"bp_combobox_module_disabled--4d653","label":"bp_combobox_module_label--4d653","hiddenLabel":"bp_combobox_module_hiddenLabel--4d653","comboboxContainer":"bp_combobox_module_comboboxContainer--4d653","withComboboxButtons":"bp_combobox_module_withComboboxButtons--4d653","error":"bp_combobox_module_error--4d653","textInputWrapper":"bp_combobox_module_textInputWrapper--4d653","textInput":"bp_combobox_module_textInput--4d653","errorIcon":"bp_combobox_module_errorIcon--4d653","comboboxButtons":"bp_combobox_module_comboboxButtons--4d653","withChips":"bp_combobox_module_withChips--4d653","inlineError":"bp_combobox_module_inlineError--4d653","popover":"bp_combobox_module_popover--4d653","option":"bp_combobox_module_option--4d653","indicator":"bp_combobox_module_indicator--4d653","indicatorIcon":"bp_combobox_module_indicatorIcon--4d653","optionWithIndicator":"bp_combobox_module_optionWithIndicator--4d653","loadingIndicator":"bp_combobox_module_loadingIndicator--4d653","noResultOption":"bp_combobox_module_noResultOption--4d653"};
 
 export { styles as default };

package/lib-esm/combobox/types.d.ts

@@ -185,6 +185,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Callback used when combobox input/textarea is focused
      */
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback used when combobox input/textarea loses focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /**
      * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
      */
@@ -194,6 +198,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * it disappears when the input is not empty
      */
     endComboboxIcon?: React.ReactNode;
+    /**
+     * `idForLabel` is used in the Combobox Group to define the id of the subcomponent associated with the Combobox Group label.
+     */
+    idForLabel?: string;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/lib-esm/combobox-group/combobox-group-combobox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ComboboxGroupComboboxProps } from './types';
+export declare const ComboboxGroupCombobox: import("react").ForwardRefExoticComponent<ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/combobox-group/combobox-group-combobox.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { Combobox } from '../combobox/combobox.js';
+import { useComboboxGroupContext } from './combobox-group-context.js';
+import styles from './combobox-group.module.js';
+
+const ComboboxGroupCombobox = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    position = 'leading',
+    error = false,
+    portalElement,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    errors,
+    setError,
+    inlineErrorId,
+    isDisabled,
+    isSelectFocused,
+    setComboboxFocus,
+    comboboxId,
+    setSubcomponentId
+  } = useComboboxGroupContext();
+  const borderStyles = position === 'trailing' ? styles.trailing : styles.leading;
+  const handleFocus = useCallback(() => setComboboxFocus(true), [setComboboxFocus]);
+  const handleBlur = useCallback(() => setComboboxFocus(false), [setComboboxFocus]);
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const isLeading = position === 'leading';
+  useEffect(() => {
+    if (isLeading) {
+      setSubcomponentId(comboboxId);
+    }
+  }, [isLeading, comboboxId, setSubcomponentId]);
+  useEffect(() => {
+    setError('combobox', error);
+  }, [error, setError]);
+  return jsx(Combobox, {
+    as: "input",
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": comboboxHasError ? inlineErrorId : undefined,
+    "aria-invalid": comboboxHasError,
+    className: clsx(borderStyles, {
+      [styles.errorSelect]: selectHasError
+    }, {
+      [styles.errorCombobox]: comboboxHasError
+    }, {
+      [styles.selectHasFocus]: isSelectFocused
+    }),
+    disabled: isDisabled,
+    error: null,
+    idForLabel: comboboxId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    portalElement: portalElement
+  });
+});
+
+export { ComboboxGroupCombobox };

package/lib-esm/combobox-group/combobox-group-context.d.ts

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from 'react';
+interface ComboboxGroupContextType {
+    errors: {
+        combobox?: boolean;
+        select?: boolean;
+    };
+    setError: (type: 'combobox' | 'select', error: boolean) => void;
+    inlineErrorId: string;
+    selectId: string;
+    comboboxId: string;
+    subcomponentId: string;
+    setSubcomponentId: (id: string) => void;
+    isDisabled: boolean;
+    isComboboxFocused: boolean;
+    setComboboxFocus: (focus: boolean) => void;
+    isSelectFocused: boolean;
+    setSelectFocus: (focus: boolean) => void;
+}
+export declare const ComboboxGroupProvider: React.FC<{
+    children: ReactNode;
+    isDisabled: boolean;
+}>;
+export declare const useComboboxGroupContext: () => ComboboxGroupContextType;
+export {};

package/lib-esm/combobox-group/combobox-group-context.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useUniqueId } from '../utils/useUniqueId.js';
+
+const ComboboxGroupContext = /*#__PURE__*/createContext(undefined);
+const ComboboxGroupProvider = ({
+  children,
+  isDisabled
+}) => {
+  const [errors, setErrors] = useState({});
+  const [isComboboxFocused, setComboboxFocus] = useState(false);
+  const [isSelectFocused, setSelectFocus] = useState(false);
+  const [subcomponentId, setSubcomponentId] = useState('');
+  const inlineErrorId = useUniqueId('inline-error-');
+  const selectId = useUniqueId('select-');
+  const comboboxId = useUniqueId('combobox-');
+  const setError = useCallback((type, hasError) => {
+    setErrors(prev => ({
+      ...prev,
+      [type]: hasError
+    }));
+  }, []);
+  const contextValue = useMemo(() => ({
+    isDisabled,
+    errors,
+    setError,
+    inlineErrorId,
+    isComboboxFocused,
+    setComboboxFocus,
+    isSelectFocused,
+    setSelectFocus,
+    subcomponentId,
+    setSubcomponentId,
+    selectId,
+    comboboxId
+  }), [isDisabled, errors, setError, inlineErrorId, isComboboxFocused, setComboboxFocus, isSelectFocused, setSelectFocus, subcomponentId, setSubcomponentId, selectId, comboboxId]);
+  return jsx(ComboboxGroupContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+const useComboboxGroupContext = () => {
+  const context = useContext(ComboboxGroupContext);
+  if (!context) {
+    throw new Error('useComboboxGroupContext must be used within a component wrapped in ComboboxGroup.');
+  }
+  return context;
+};
+
+export { ComboboxGroupProvider, useComboboxGroupContext };

package/lib-esm/combobox-group/combobox-group-select.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ComboboxGroupSelectProps } from './types';
+export declare const ComboboxGroupSelect: import("react").ForwardRefExoticComponent<ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/combobox-group/combobox-group-select.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { Select } from '../select/select.js';
+import { useComboboxGroupContext } from './combobox-group-context.js';
+import styles from './combobox-group.module.js';
+
+const ComboboxGroupSelect = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    position = 'trailing',
+    error = false,
+    disabled,
+    ...rest
+  } = props;
+  const {
+    errors,
+    setError,
+    inlineErrorId,
+    isDisabled,
+    setSelectFocus,
+    isComboboxFocused,
+    setSubcomponentId,
+    selectId
+  } = useComboboxGroupContext();
+  const handleFocus = useCallback(() => setSelectFocus(true), [setSelectFocus]);
+  const handleBlur = useCallback(() => setSelectFocus(false), [setSelectFocus]);
+  const borderStyles = position === 'trailing' ? styles.trailing : styles.leading;
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const isLeading = position === 'leading';
+  useEffect(() => {
+    if (isLeading) {
+      setSubcomponentId(selectId);
+    }
+  }, [isLeading, selectId, setSubcomponentId]);
+  useEffect(() => {
+    setError('select', error);
+  }, [error, setError]);
+  return jsx(Select, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-describedby": selectHasError ? inlineErrorId : undefined,
+    "aria-invalid": selectHasError,
+    className: clsx(borderStyles, {
+      [styles.errorSelect]: selectHasError
+    }, {
+      [styles.errorCombobox]: comboboxHasError
+    }, {
+      [styles.comboboxHasFocus]: isComboboxFocused
+    }),
+    disabled: isDisabled,
+    error: null,
+    id: selectId,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  });
+});
+
+export { ComboboxGroupSelect };

package/lib-esm/combobox-group/combobox-group.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ComboboxGroupProps } from './types';
+export declare const ComboboxGroup: {
+    ({ children, disabled, ...props }: ComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    Combobox: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupComboboxProps<true, true, import("../combobox").OptionValue> & import("react").RefAttributes<HTMLInputElement>>;
+    Select: import("react").ForwardRefExoticComponent<import("./types").ComboboxGroupSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/lib-esm/combobox-group/combobox-group.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
+import { ComboboxGroupCombobox } from './combobox-group-combobox.js';
+import { ComboboxGroupProvider, useComboboxGroupContext } from './combobox-group-context.js';
+import { ComboboxGroupSelect } from './combobox-group-select.js';
+import styles from './combobox-group.module.js';
+
+const Root = /*#__PURE__*/forwardRef(({
+  children,
+  label,
+  errorMessage,
+  hideLabel,
+  ...props
+}, forwardedRef) => {
+  const {
+    errors,
+    inlineErrorId,
+    isDisabled,
+    subcomponentId
+  } = useComboboxGroupContext();
+  const selectHasError = !!errors.select;
+  const comboboxHasError = !!errors.combobox;
+  const Label = useLabelable(label, subcomponentId);
+  return jsxs("div", {
+    ...props,
+    ref: forwardedRef,
+    className: clsx(styles.container, {
+      [styles.disabled]: isDisabled
+    }),
+    children: [jsx(Label, {
+      className: styles.label,
+      hideLabel: hideLabel
+    }), jsx("div", {
+      className: styles.comboboxGroupcontainer,
+      children: children
+    }), (comboboxHasError || selectHasError) && jsx(InlineError, {
+      id: inlineErrorId,
+      children: errorMessage
+    })]
+  });
+});
+const ComboboxGroup = ({
+  children,
+  disabled,
+  ...props
+}) => {
+  return jsx(ComboboxGroupProvider, {
+    isDisabled: !!disabled,
+    children: jsx(Root, {
+      ...props,
+      children: children
+    })
+  });
+};
+ComboboxGroup.Combobox = ComboboxGroupCombobox;
+ComboboxGroup.Select = ComboboxGroupSelect;
+
+export { ComboboxGroup };

package/lib-esm/combobox-group/combobox-group.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"container":"bp_combobox_group_module_container--88b97","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--88b97","disabled":"bp_combobox_group_module_disabled--88b97","label":"bp_combobox_group_module_label--88b97","trailing":"bp_combobox_group_module_trailing--88b97","leading":"bp_combobox_group_module_leading--88b97","errorCombobox":"bp_combobox_group_module_errorCombobox--88b97","errorSelect":"bp_combobox_group_module_errorSelect--88b97","selectHasFocus":"bp_combobox_group_module_selectHasFocus--88b97","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--88b97"};
+
+export { styles as default };

package/lib-esm/combobox-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './combobox-group';
+export * from './types';

package/lib-esm/combobox-group/types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { type ComboboxBaseProps, type OptionValue } from '../combobox/types';
+import { type SelectProps } from '../select/types';
+export interface ComboboxGroupProps {
+    children: React.ReactNode;
+    disabled?: boolean;
+    errorMessage?: string;
+    label: string;
+    hideLabel?: boolean;
+}
+export interface ComboboxGroupSelectProps extends SelectProps {
+    disabled?: never;
+    error?: boolean;
+    label: never;
+    position?: 'leading' | 'trailing';
+}
+export interface ComboboxGroupComboboxProps<Multiple extends boolean = true, FreeInput extends boolean = true, T extends OptionValue = OptionValue> extends ComboboxBaseProps<Multiple, FreeInput, T> {
+    disabled?: never;
+    error?: boolean;
+    label: never;
+    position?: 'leading' | 'trailing';
+}

package/lib-esm/index.css

@@ -1556,7 +1556,7 @@
   max-width:100%;
 }
 
-.bp_combobox_module_container--92da0{
+.bp_combobox_module_container--4d653{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1567,10 +1567,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--92da0.bp_combobox_module_disabled--92da0{
+.bp_combobox_module_container--4d653.bp_combobox_module_disabled--4d653{
   opacity:60%;
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_label--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_label--4d653{
   color:var(--text-text-on-light);
   flex:0 0 fit-content;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1582,13 +1582,16 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_label--92da0:not(.bp_combobox_module_hiddenLabel--92da0){
+.bp_combobox_module_container--4d653 .bp_combobox_module_label--4d653:not(.bp_combobox_module_hiddenLabel--4d653){
   margin-block-end:var(--space-2);
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653{
   background-color:var(--surface-dropdown-surface);
-  border:var(--border-1) solid var(--border-input-border);
+  border-bottom:var(--blueprint-combobox-border-bottom-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
+  border-left:var(--blueprint-combobox-border-left-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
   border-radius:var(--blueprint-combobox-input-radius, var(--radius-2));
+  border-right:var(--blueprint-combobox-border-right-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
+  border-top:var(--blueprint-combobox-border-top-width, var(--border-1)) solid var(--blueprint-combobox-border-color, var(--border-input-border));
   box-shadow:var(--innershadow-1);
   display:flex;
   flex-wrap:wrap;
@@ -1598,25 +1601,29 @@
   padding-inline:var(--space-3);
   position:relative;
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0.bp_combobox_module_withComboboxButtons--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653.bp_combobox_module_withComboboxButtons--4d653{
   padding-inline-end:var(--space-10);
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0:not(.bp_combobox_module_error--92da0):has(input:focus),.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0:not(.bp_combobox_module_error--92da0):has(input[data-focus-visible]:focus){
-  border-color:#0000;
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653:not(:disabled):has(input:focus),.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653:not(:disabled):has(input[data-focus-visible]:focus){
+  background-color:var(--surface-dropdown-surface-focus);
+  border:var(--border-2), solid, var(--outline-focus-on-light);
+  padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0:not(:disabled).bp_combobox_module_error--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653:not(:disabled).bp_combobox_module_error--4d653,.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653:not(:disabled):has([aria-invalid=true]){
   background-color:var(--surface-dropdown-surface-error);
-  border:var(--border-2) solid var(--border-input-border-error);
+  border-bottom:var(--blueprint-combobox-border-error-bottom-width, var(--border-2)) solid var(--border-input-border-error);
+  border-left:var(--blueprint-combobox-border-error-left-width, var(--border-2)) solid var(--border-input-border-error);
+  border-right:var(--blueprint-combobox-border-error-right-width, var(--border-2)) solid var(--border-input-border-error);
+  border-top:var(--blueprint-combobox-border-error-top-width, var(--border-2)) solid var(--border-input-border-error);
   padding-block:calc((2.5rem - var(--space-5))/2 - var(--border-2));
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0 .bp_combobox_module_textInputWrapper--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653 .bp_combobox_module_textInputWrapper--4d653{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--space-2);
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0 .bp_combobox_module_textInputWrapper--92da0 .bp_combobox_module_textInput--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653 .bp_combobox_module_textInputWrapper--4d653 .bp_combobox_module_textInput--4d653{
   background-color:initial;
   border:none;
   color:var(--text-text-on-light);
@@ -1632,28 +1639,28 @@
   text-transform:none;
   width:100%;
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0 .bp_combobox_module_textInputWrapper--92da0 .bp_combobox_module_errorIcon--92da0 path{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653 .bp_combobox_module_textInputWrapper--4d653 .bp_combobox_module_errorIcon--4d653 path{
   fill:var(--icon-icon-error-on-light);
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0 .bp_combobox_module_textInputWrapper--92da0 .bp_combobox_module_comboboxButtons--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653 .bp_combobox_module_textInputWrapper--4d653 .bp_combobox_module_comboboxButtons--4d653{
   align-items:center;
   display:flex;
   position:absolute;
   right:var(--space-2);
   top:var(--space-2);
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0.bp_combobox_module_withChips--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653.bp_combobox_module_withChips--4d653{
   max-height:calc(var(--space-2)*2 + var(--space-6)*3);
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-1));
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_comboboxContainer--92da0.bp_combobox_module_withChips--92da0:not(:disabled).bp_combobox_module_error--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_comboboxContainer--4d653.bp_combobox_module_withChips--4d653:not(:disabled).bp_combobox_module_error--4d653{
   padding-block:calc((2.5rem - var(--space-7))/2 - var(--border-2));
 }
-.bp_combobox_module_container--92da0 .bp_combobox_module_inlineError--92da0{
+.bp_combobox_module_container--4d653 .bp_combobox_module_inlineError--4d653{
   margin-block-start:var(--space-2);
 }
 
-.bp_combobox_module_popover--92da0{
+.bp_combobox_module_popover--4d653{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -1671,7 +1678,7 @@
   text-transform:none;
   z-index:380;
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653{
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   box-sizing:border-box;
@@ -1685,17 +1692,17 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0[aria-disabled]{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653[aria-disabled]{
   opacity:60%;
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653[data-active-item]:not([aria-disabled]){
   background-color:var(--surface-menu-surface-focus);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0:hover{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653:hover{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0 .bp_combobox_module_indicator--92da0{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653 .bp_combobox_module_indicator--4d653{
   align-items:center;
   display:flex;
   height:var(--size-9);
@@ -1704,21 +1711,268 @@
   position:absolute;
   top:0;
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_option--92da0 .bp_combobox_module_indicator--92da0 .bp_combobox_module_indicatorIcon--92da0 path{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_option--4d653 .bp_combobox_module_indicator--4d653 .bp_combobox_module_indicatorIcon--4d653 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_optionWithIndicator--92da0{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_optionWithIndicator--4d653{
   padding-inline:var(--space-10) var(--space-2);
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_loadingIndicator--92da0{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_loadingIndicator--4d653{
   position:unset;
 }
-.bp_combobox_module_popover--92da0 .bp_combobox_module_noResultOption--92da0{
+.bp_combobox_module_popover--4d653 .bp_combobox_module_noResultOption--4d653{
   color:var(--text-text-on-light);
   -webkit-user-select:none;
           user-select:none;
 }
 
+.bp_combobox_group_module_container--88b97{
+  align-items:flex-start;
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-2);
+  max-width:358px;
+}
+
+.bp_combobox_group_module_comboboxGroupcontainer--88b97{
+  display:flex;
+  flex-direction:row;
+}
+
+.bp_combobox_group_module_disabled--88b97{
+  opacity:60%;
+  pointer-events:none;
+}
+
+.bp_combobox_group_module_label--88b97{
+  color:var(--text-text-on-light);
+  flex:0 0 fit-content;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:700;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  overflow-wrap:break-word;
+  text-decoration:none;
+  text-transform:none;
+}
+
+.bp_combobox_group_module_trailing--88b97{
+  --blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
+  --blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
+  --blueprint-combobox-border-left-width:none;
+  --blueprint-select-border-left-width:none;
+}
+
+.bp_combobox_group_module_leading--88b97{
+  --blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
+  --blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
+}
+
+.bp_combobox_group_module_errorCombobox--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-select-border-right-width:none;
+}
+
+.bp_combobox_group_module_errorSelect--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-combobox-border-right-width:none;
+}
+
+.bp_combobox_group_module_errorCombobox--88b97.bp_combobox_group_module_errorSelect--88b97.bp_combobox_group_module_trailing--88b97{
+  --blueprint-select-border-error-left-width:none;
+}
+
+.bp_combobox_group_module_errorCombobox--88b97.bp_combobox_group_module_errorSelect--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-select-border-error-right-width:none;
+}
+
+.bp_combobox_group_module_selectHasFocus--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-combobox-border-right-width:none;
+}
+
+.bp_combobox_group_module_selectHasFocus--88b97.bp_combobox_group_module_errorCombobox--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-combobox-border-error-right-width:none;
+}
+
+.bp_combobox_group_module_selectHasFocus--88b97.bp_combobox_group_module_errorCombobox--88b97.bp_combobox_group_module_trailing--88b97{
+  --blueprint-combobox-border-error-left-width:none;
+}
+
+.bp_combobox_group_module_comboboxHasFocus--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-select-border-right-width:none;
+}
+
+.bp_combobox_group_module_comboboxHasFocus--88b97.bp_combobox_group_module_errorSelect--88b97.bp_combobox_group_module_leading--88b97{
+  --blueprint-select-border-error-right-width:none;
+}
+
+.bp_combobox_group_module_comboboxHasFocus--88b97.bp_combobox_group_module_errorSelect--88b97.bp_combobox_group_module_trailing--88b97{
+  --blueprint-select-border-error-left-width:none;
+}
+
+.bp_select_module_container--ec76a{
+  display:flex;
+  flex-direction:column;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  gap:var(--space-2);
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  text-decoration:none;
+  text-transform:none;
+}
+.bp_select_module_container--ec76a.bp_select_module_disabled--ec76a{
+  opacity:60%;
+}
+.bp_select_module_container--ec76a .bp_select_module_label--ec76a{
+  flex:0 0 fit-content;
+  font-weight:700;
+  overflow-wrap:break-word;
+}
+.bp_select_module_container--ec76a .bp_select_module_label--ec76a,.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a{
+  color:var(--text-text-on-light);
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  text-decoration:none;
+  text-transform:none;
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a{
+  align-items:center;
+  background-color:var(--surface-dropdown-surface);
+  border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
+  border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
+  border-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
+  border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
+  border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
+  box-shadow:var(--dropshadow-2);
+  cursor:pointer;
+  display:flex;
+  font-weight:400;
+  gap:var(--space-2);
+  height:var(--size-10);
+  justify-content:space-between;
+  outline:none;
+  padding-block:0;
+  padding-inline:var(--space-3);
+  text-align:start;
+  width:100%;
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a span:first-child{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:disabled{
+  cursor:default;
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:not(:disabled).bp_select_module_error--ec76a,.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:not(:disabled)[aria-invalid=true]{
+  background-color:var(--surface-dropdown-surface-error);
+  border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:focus,.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:not(:disabled).bp_select_module_error--ec76a:focus,.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:not(:disabled)[aria-invalid=true]:focus{
+  background-color:var(--surface-dropdown-surface-focus);
+  border:var(--border-2), solid, var(--outline-focus-on-light);
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a:not(:disabled):not(:focus):not(.bp_select_module_error--ec76a):not([aria-invalid]):hover{
+  background-color:var(--surface-dropdown-surface-hover);
+  border-color:var(--border-dropdown-border-hover);
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a .bp_select_module_iconWrapper--ec76a{
+  flex-shrink:0;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a .bp_select_module_icon--ec76a{
+  display:block;
+  height:var(--size-2);
+  width:var(--size-2);
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a .bp_select_module_icon--ec76a path{
+  fill:var(--icon-icon-on-light);
+}
+.bp_select_module_container--ec76a .bp_select_module_triggerBtn--ec76a[data-state=open] .bp_select_module_icon--ec76a{
+  transform:rotate(180deg);
+}
+
+.bp_select_module_content--ec76a{
+  background-color:var(--surface-menu-surface);
+  border:var(--border-1) solid var(--border-card-border);
+  border-radius:var(--radius-3);
+  box-shadow:var(--dropshadow-3);
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  max-height:var(--blueprint-select-content-max-height, var(--radix-select-content-available-height));
+  max-width:min(var(--blueprint-select-content-max-width, 50vw), var(--radix-select-content-available-width));
+  min-width:var(--blueprint-select-content-min-width, var(--radix-select-trigger-width));
+  overflow:auto;
+  text-decoration:none;
+  text-transform:none;
+  z-index:380;
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a{
+  padding-block:var(--space-3);
+  padding-inline:var(--space-3);
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a{
+  border:var(--border-2) solid #0000;
+  border-radius:var(--radius-3);
+  cursor:pointer;
+  display:flex;
+  flex-wrap:wrap;
+  gap:var(--space-2);
+  justify-content:space-between;
+  outline:none;
+  padding-block:var(--space-2);
+  padding-inline:var(--space-10) var(--space-2);
+  position:relative;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a[data-disabled]{
+  opacity:60%;
+  pointer-events:none;
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a[data-highlighted]{
+  background-color:var(--surface-menu-surface-focus);
+  border:var(--border-2) solid var(--outline-focus-on-light);
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a:hover{
+  background-color:var(--surface-menu-surface-hover);
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a span:first-child{
+  overflow:hidden;
+  overflow-wrap:break-word;
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a .bp_select_module_secondaryText--ec76a{
+  color:var(--text-text-on-light-secondary);
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a .bp_select_module_indicator--ec76a{
+  align-items:center;
+  display:flex;
+  height:var(--size-9);
+  justify-content:center;
+  left:var(--space-2);
+  position:absolute;
+  top:0;
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_option--ec76a .bp_select_module_indicator--ec76a path{
+  fill:var(--icon-icon-on-light);
+}
+.bp_select_module_content--ec76a .bp_select_module_viewport--ec76a .bp_select_module_separator--ec76a{
+  background-color:var(--border-divider-border);
+  flex-shrink:0;
+  height:var(--border-1);
+  margin-block:var(--space-2);
+}
+
 .bp_content_card_module_card--e2f08{
   background-color:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
@@ -4997,165 +5251,6 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transform:translateY(-50%);
 }
 
-.bp_select_module_container--56f5c{
-  display:flex;
-  flex-direction:column;
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  font-weight:400;
-  gap:var(--space-2);
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  text-decoration:none;
-  text-transform:none;
-}
-.bp_select_module_container--56f5c.bp_select_module_disabled--56f5c{
-  opacity:60%;
-}
-.bp_select_module_container--56f5c .bp_select_module_label--56f5c{
-  flex:0 0 fit-content;
-  font-weight:700;
-  overflow-wrap:break-word;
-}
-.bp_select_module_container--56f5c .bp_select_module_label--56f5c,.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c{
-  color:var(--text-text-on-light);
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  text-decoration:none;
-  text-transform:none;
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c{
-  align-items:center;
-  background-color:var(--surface-dropdown-surface);
-  border:var(--border-1) solid var(--border-dropdown-border);
-  border-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
-  box-shadow:var(--dropshadow-2);
-  cursor:pointer;
-  display:flex;
-  font-weight:400;
-  gap:var(--space-2);
-  height:var(--size-10);
-  justify-content:space-between;
-  outline:none;
-  padding-block:0;
-  padding-inline:var(--space-3);
-  text-align:start;
-  width:100%;
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c span:first-child{
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap;
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c:disabled{
-  cursor:default;
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c:not(.bp_select_module_error--56f5c):focus{
-  background-color:var(--surface-dropdown-surface-focus);
-  border-color:#0000;
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c:not(:disabled):not(:focus):not(.bp_select_module_error--56f5c):hover{
-  background-color:var(--surface-dropdown-surface-hover);
-  border-color:var(--border-dropdown-border-hover);
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c:not(:disabled).bp_select_module_error--56f5c{
-  background-color:var(--surface-dropdown-surface-error);
-  border:var(--border-2) solid var(--border-dropdown-border-error);
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c .bp_select_module_iconWrapper--56f5c{
-  flex-shrink:0;
-  -webkit-user-select:none;
-          user-select:none;
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c .bp_select_module_icon--56f5c{
-  display:block;
-  height:var(--size-2);
-  width:var(--size-2);
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c .bp_select_module_icon--56f5c path{
-  fill:var(--icon-icon-on-light);
-}
-.bp_select_module_container--56f5c .bp_select_module_triggerBtn--56f5c[data-state=open] .bp_select_module_icon--56f5c{
-  transform:rotate(180deg);
-}
-
-.bp_select_module_content--56f5c{
-  background-color:var(--surface-menu-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-3);
-  box-shadow:var(--dropshadow-3);
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  font-weight:400;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  max-height:var(--blueprint-select-content-max-height, var(--radix-select-content-available-height));
-  max-width:min(var(--blueprint-select-content-max-width, 50vw), var(--radix-select-content-available-width));
-  min-width:var(--blueprint-select-content-min-width, var(--radix-select-trigger-width));
-  overflow:auto;
-  text-decoration:none;
-  text-transform:none;
-  z-index:380;
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c{
-  padding-block:var(--space-3);
-  padding-inline:var(--space-3);
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c{
-  border:var(--border-2) solid #0000;
-  border-radius:var(--radius-3);
-  cursor:pointer;
-  display:flex;
-  flex-wrap:wrap;
-  gap:var(--space-2);
-  justify-content:space-between;
-  outline:none;
-  padding-block:var(--space-2);
-  padding-inline:var(--space-10) var(--space-2);
-  position:relative;
-  -webkit-user-select:none;
-          user-select:none;
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c[data-disabled]{
-  opacity:60%;
-  pointer-events:none;
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c[data-highlighted]{
-  background-color:var(--surface-menu-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c:hover{
-  background-color:var(--surface-menu-surface-hover);
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c span:first-child{
-  overflow:hidden;
-  overflow-wrap:break-word;
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c .bp_select_module_secondaryText--56f5c{
-  color:var(--text-text-on-light-secondary);
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c .bp_select_module_indicator--56f5c{
-  align-items:center;
-  display:flex;
-  height:var(--size-9);
-  justify-content:center;
-  left:var(--space-2);
-  position:absolute;
-  top:0;
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_option--56f5c .bp_select_module_indicator--56f5c path{
-  fill:var(--icon-icon-on-light);
-}
-.bp_select_module_content--56f5c .bp_select_module_viewport--56f5c .bp_select_module_separator--56f5c{
-  background-color:var(--border-divider-border);
-  flex-shrink:0;
-  height:var(--border-1);
-  margin-block:var(--space-2);
-}
-
 .bp_side_panel_module_content--4e61a{
   background-color:var(--gray-white);
   border-inline-start:var(--border-1) solid var(--border-divider-border);

package/lib-esm/index.d.ts

@@ -9,6 +9,7 @@ export * from './card-tooltip';
 export * from './checkbox';
 export * from './collapsible';
 export * from './combobox';
+export * from './combobox-group';
 export * from './content-card';
 export * from './content-field';
 export * from './data-table/data-table';

package/lib-esm/index.js

@@ -12,6 +12,7 @@ export { CardTooltip } from './card-tooltip/card-tooltip.js';
 export { Checkbox } from './checkbox/index.js';
 export { CollapsibleSection } from './collapsible/collapsible-section.js';
 export { Combobox, Root } from './combobox/combobox.js';
+export { ComboboxGroup } from './combobox-group/combobox-group.js';
 export { ContentCard } from './content-card/content-card.js';
 export { ContentField } from './content-field/content-field.js';
 export { DataTableWrapper, StickyCell } from './data-table/data-table.js';

package/lib-esm/select/select.js

@@ -5,9 +5,9 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './select.module.js';
-import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -28,10 +28,11 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     name,
     disabled,
     required,
+    id,
     // RadixSelectTrigger props
     ...triggerProps
   } = props;
-  const selectId = useUniqueId('select-');
+  const selectId = useUniqueId('select-', !id) || id || 'default-select-id';
   const hasError = !!error && !disabled;
   // Restrict consumers from opening options menu when Root is disabled
   const isSelectDefaultOpen = defaultOpen && !disabled;

package/lib-esm/select/select.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--56f5c","disabled":"bp_select_module_disabled--56f5c","label":"bp_select_module_label--56f5c","triggerBtn":"bp_select_module_triggerBtn--56f5c","error":"bp_select_module_error--56f5c","iconWrapper":"bp_select_module_iconWrapper--56f5c","icon":"bp_select_module_icon--56f5c","content":"bp_select_module_content--56f5c","viewport":"bp_select_module_viewport--56f5c","option":"bp_select_module_option--56f5c","secondaryText":"bp_select_module_secondaryText--56f5c","indicator":"bp_select_module_indicator--56f5c","separator":"bp_select_module_separator--56f5c"};
+var styles = {"container":"bp_select_module_container--ec76a","disabled":"bp_select_module_disabled--ec76a","label":"bp_select_module_label--ec76a","triggerBtn":"bp_select_module_triggerBtn--ec76a","error":"bp_select_module_error--ec76a","iconWrapper":"bp_select_module_iconWrapper--ec76a","icon":"bp_select_module_icon--ec76a","content":"bp_select_module_content--ec76a","viewport":"bp_select_module_viewport--ec76a","option":"bp_select_module_option--ec76a","secondaryText":"bp_select_module_secondaryText--ec76a","indicator":"bp_select_module_indicator--ec76a","separator":"bp_select_module_separator--ec76a"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "8.1.1",
+    "version": "8.2.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "b2737e017afef7990166091b1ca1e8aa245ca20a",
+    "gitHead": "e8ce4660827c02409096c1972517bcf898d1f251",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {