@fluentui/react-combobox 9.11.4 → 9.11.6

package/CHANGELOG.md

@@ -1,18 +1,49 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 16 May 2024 09:21:20 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:57:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.6)
+
+Thu, 23 May 2024 07:57:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.5..@fluentui/react-combobox_v9.11.6)
+
+### Patches
+
+- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-portal to v9.4.26 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-positioning to v9.15.2 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+
+## [9.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.5)
+
+Mon, 20 May 2024 12:44:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.4..@fluentui/react-combobox_v9.11.5)
+
+### Patches
+
+- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.60 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-field to v9.1.66 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-portal to v9.4.25 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-positioning to v9.15.1 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+
 ## [9.11.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.4)
 
-Thu, 16 May 2024 09:21:20 GMT 
+Thu, 16 May 2024 09:25:13 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.3..@fluentui/react-combobox_v9.11.4)
 
 ### Patches
 
 -  chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
-- Bump @fluentui/react-field to v9.1.65 ([commit](https://github.com/microsoft/fluentui/commit/3ae9ed772fbcedeff1a76e154f6eb7d515785698) by beachball)
+- Bump @fluentui/react-field to v9.1.65 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
 
 ## [9.11.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.3)
 

package/dist/index.d.ts

@@ -43,6 +43,7 @@ declare type ComboboxBaseOpenChangeData = {
     open: boolean;
 };
 
+/** Possible event types for onOpen */
 declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
 
 /**
@@ -170,6 +171,9 @@ export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
  */
 export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
     freeform?: boolean;
+    /**
+     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.
+     */
     children?: React_2.ReactNode;
 };
 
@@ -181,10 +185,15 @@ export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>,
 export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;
 
 export declare type ComboboxSlots = {
+    /** The root combobox slot */
     root: NonNullable<Slot<'div'>>;
+    /** The dropdown arrow icon */
     expandIcon?: Slot<'span'>;
+    /** The dropdown clear icon */
     clearIcon?: Slot<'span'>;
+    /** The primary slot, an input with role="combobox" */
     input: NonNullable<Slot<'input'>>;
+    /** The dropdown listbox slot */
     listbox?: Slot<typeof Listbox>;
 };
 
@@ -215,10 +224,15 @@ export declare type DropdownOpenEvents = ComboboxBaseOpenEvents;
 export declare type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;
 
 export declare type DropdownSlots = {
+    /** The root dropdown slot */
     root: NonNullable<Slot<'div'>>;
+    /** The dropdown arrow icon */
     expandIcon?: Slot<'span'>;
+    /** The dropdown clear icon */
     clearButton?: Slot<'button'>;
+    /** The primary slot, the element with role="combobox" */
     button: NonNullable<Slot<'button'>>;
+    /** The dropdown listbox slot */
     listbox?: Slot<typeof Listbox>;
 };
 
@@ -226,6 +240,7 @@ export declare type DropdownSlots = {
  * State used in rendering Dropdown
  */
 export declare type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
+    /** Whether the placeholder is currently displayed */
     placeholderVisible: boolean;
     showClearButton?: boolean;
     activeDescendantController: ActiveDescendantImperativeRef;
@@ -263,6 +278,7 @@ export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps
 export declare const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;
 
 export declare type ListboxSlots = {
+    /** The root slot, a `<div>` with `role="listbox"` */
     root: Slot<'div'>;
 };
 
@@ -318,6 +334,7 @@ declare type OptionCollectionState = {
     getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
     /** The unordered option data. */
     options: OptionValue[];
+    /** A function that child options call to register their values. Returns a function to unregister the option. */
     registerOption: (option: OptionValue, element: HTMLElement) => () => void;
 };
 
@@ -334,7 +351,12 @@ export declare const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
 export declare type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;
 
 export declare type OptionGroupSlots = {
+    /** The root group wrapper */
     root: NonNullable<Slot<'div'>>;
+    /**
+     * The option group label, displayed as static text before the child options.
+     * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.
+     */
     label?: Slot<'span'>;
 };
 
@@ -343,6 +365,10 @@ export declare type OptionGroupSlots = {
  */
 export declare type OptionGroupState = ComponentState<OptionGroupSlots>;
 
+/**
+ * Data for the onOptionSelect callback.
+ * `optionValue` and `optionText` will be undefined if multiple options are modified at once.
+ */
 export declare type OptionOnSelectData = {
     optionValue: string | undefined;
     optionText: string | undefined;
@@ -358,6 +384,11 @@ export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
      * Disabled options cannot be selected, but are still keyboard navigable
      */
     disabled?: boolean;
+    /**
+     * Defines a unique identifier for the option.
+     * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.
+     * Defaults to `text` if not provided.
+     */
     value?: string;
 } & ({
     /**
@@ -379,7 +410,9 @@ export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
 });
 
 export declare type OptionSlots = {
+    /** The root option slot, with role="option" */
     root: NonNullable<Slot<'div'>>;
+    /** The check icon that is visible for selected options */
     checkIcon: Slot<'span'>;
 };
 
@@ -395,7 +428,9 @@ export declare type OptionState = ComponentState<OptionSlots> & Pick<OptionProps
      * @deprecated - no longer used internally
      */
     focusVisible: boolean;
+    /** If true, the option is part of a multiselect combobox or listbox */
     multiselect?: boolean;
+    /** If true, the option is selected */
     selected: boolean;
 };
 
@@ -435,6 +470,7 @@ export declare const renderOption_unstable: (state: OptionState) => JSX.Element;
  */
 export declare const renderOptionGroup_unstable: (state: OptionGroupState) => JSX.Element;
 
+/** Possible event types for onOptionSelect */
 export declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 declare type SelectionProps = {
@@ -450,6 +486,7 @@ declare type SelectionProps = {
      * @default false
      */
     multiselect?: boolean;
+    /** Callback when an option is selected */
     onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
     /**
      * An array of selected option keys.
@@ -459,6 +496,7 @@ declare type SelectionProps = {
     selectedOptions?: string[];
 };
 
+/** Values returned by the useSelection hook */
 declare type SelectionState = {
     clearSelection: (event: SelectionEvents) => void;
     selectedOptions: string[];

package/lib/components/Combobox/Combobox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Combobox/useComboboxStyles.styles.js

@@ -20,10 +20,11 @@ const fieldHeights = {
 const useStyles = /*#__PURE__*/__styles({
   root: {
     Bt984gj: "f122n59",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
     B7ck84d: "f1ewtqcl",
     i8kkvl: "f14mj54c",
     mc9l5x: "fwk3njj",
@@ -43,9 +44,10 @@ const useStyles = /*#__PURE__*/__styles({
     Dlnsje: "f145g4dw",
     d9w3h3: ["f1kp91vd", "f1ibwz09"],
     B3778ie: ["f1ibwz09", "f1kp91vd"],
-    Bcgy8vk: "f14pi962",
-    Bw17bha: "f1lh990p",
-    B1q35kw: "f1jc6hxc",
+    B1q35kw: 0,
+    Bw17bha: 0,
+    Bcgy8vk: 0,
+    Bjuhk93: "f1mnjydx",
     Gjdm7m: "f13evtba",
     b1kco5: "f1yk9hq",
     Ba2ppi3: "fhwpy7i",
@@ -63,10 +65,11 @@ const useStyles = /*#__PURE__*/__styles({
   },
   listbox: {
     E5pizo: "f1hg901r",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
     Bxyxcbc: "fmmk62d",
     B7ck84d: "f1ewtqcl"
   },
@@ -91,18 +94,23 @@ const useStyles = /*#__PURE__*/__styles({
   },
   outline: {
     De3pzq: "fxugw4r",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fj3muxo",
-    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    Bgfg5da: 0,
     B9xav0g: "f1c1zstj",
-    zhjwy3: ["f1lxtadh", "f1akhkt"]
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fhz96rm"
   },
   outlineInteractive: {
     Bgoe8wy: "fvcxoqz",
@@ -116,43 +124,55 @@ const useStyles = /*#__PURE__*/__styles({
   },
   underline: {
     De3pzq: "f1c21dwh",
-    Bn0qgzm: "f1vxd6vx",
-    oivjwe: "fg706s2",
-    B9xav0g: "f1c1zstj",
-    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
-    B7oj6ja: ["f10ostut", "f1ozlkrg"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"]
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    Bgfg5da: "f9ez7ne",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fokr779"
   },
   "filled-lighter": {
     De3pzq: "fxugw4r",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w"
   },
   "filled-darker": {
     De3pzq: "f16xq7d1",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w"
   },
   invalid: {
     tvckwq: "fs4k3qj",
@@ -176,7 +196,23 @@ const useStyles = /*#__PURE__*/__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f122n59{align-items:center;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
+    p: -1
+  }], ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
+    p: -2
+  }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
+    p: -1
+  }], [".fokr779{border-radius:0;}", {
+    p: -1
+  }], [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
@@ -200,10 +236,23 @@ const useInputStyles = /*#__PURE__*/__styles({
   input: {
     qb2dma: "f1ub7u0d",
     De3pzq: "f1c21dwh",
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
     sj55zd: "f19n0e5",
     Bahqtrf: "fk6fouc",
     Brovlpu: "ftqa4ok",
@@ -215,30 +264,33 @@ const useInputStyles = /*#__PURE__*/__styles({
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1xile11", "fqznh8f"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["fxe2rs", "f1gflqzi"]
   },
   medium: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1e60jzv", "f135dnwl"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["fzy81xo", "f58b53b"]
   },
   large: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fod5ikn",
     Bhrd7zp: "figsok6",
     Bg96gwp: "faaz57k",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["fnphzt9", "flt1dlf"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1kdav7a", "footqm6"]
   },
   disabled: {
     sj55zd: "f1s2aq7o",
@@ -247,7 +299,21 @@ const useInputStyles = /*#__PURE__*/__styles({
     yvdlaj: "fahhnxm"
   }
 }, {
-  d: [".f1ub7u0d{align-self:stretch;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
+  d: [".f1ub7u0d{align-self:stretch;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fxe2rs{padding:0 0 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f1gflqzi{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 0 0;}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fzy81xo{padding:0 0 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f58b53b{padding:0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 0 0;}", {
+    p: -1
+  }], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f1kdav7a{padding:0 0 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", {
+    p: -1
+  }], [".footqm6{padding:0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 0 0;}", {
+    p: -1
+  }], ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
   f: [".ftqa4ok:focus{outline-style:none;}"]
 });
 const useIconStyles = /*#__PURE__*/__styles({
@@ -265,16 +331,19 @@ const useIconStyles = /*#__PURE__*/__styles({
   visuallyHidden: {
     Bh84pgu: "f1ekcaio",
     Bqenvij: "f1mpe4l3",
-    B6of3ja: "fkrn0sh",
-    t21cq0: ["f179hvsh", "f1538868"],
-    jrapky: "fmxx68s",
-    Frg6f3: ["f1538868", "f179hvsh"],
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
-    z8tnut: "f1nbblvp",
-    z189sj: ["fifp7yv", "f1asdtw4"],
-    Byoj8tv: "f1ov4xf1",
-    uwmqm3: ["f1asdtw4", "fifp7yv"],
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1jlpb2r",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
     a9b677: "frkrog8",
     qhf8xq: "f1euv43f"
   },
@@ -295,7 +364,13 @@ const useIconStyles = /*#__PURE__*/__styles({
     Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", ".fkrn0sh{margin-top:-1px;}", ".f179hvsh{margin-right:-1px;}", ".f1538868{margin-left:-1px;}", ".fmxx68s{margin-bottom:-1px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", [".f1jlpb2r{margin:-1px;}", {
+    p: -1
+  }], [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state