@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.121

package/Select/index.js

@@ -5,11 +5,6 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __knownSymbol = (name, symbol) => {
-  if (symbol = Symbol[name])
-    return symbol;
-  throw Error("Symbol." + name + " is not defined");
-};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -23,774 +18,105 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __await = function(promise, isYieldStar) {
-  this[0] = promise;
-  this[1] = isYieldStar;
-};
-var __yieldStar = (value) => {
-  var obj = value[__knownSymbol("asyncIterator")];
-  var isAwait = false;
-  var method;
-  var it = {};
-  if (obj == null) {
-    obj = value[__knownSymbol("iterator")]();
-    method = (k) => it[k] = (x) => obj[k](x);
-  } else {
-    obj = obj.call(value);
-    method = (k) => it[k] = (v) => {
-      if (isAwait) {
-        isAwait = false;
-        if (k === "throw")
-          throw v;
-        return v;
-      }
-      isAwait = true;
-      return {
-        done: false,
-        value: new __await(new Promise((resolve) => {
-          var x = obj[k](v);
-          if (!(x instanceof Object))
-            throw TypeError("Object expected");
-          resolve(x);
-        }), 1)
-      };
-    };
-  }
-  return it[__knownSymbol("iterator")] = () => it, method("next"), "throw" in obj ? method("throw") : it.throw = (x) => {
-    throw x;
-  }, "return" in obj && method("return"), it;
-};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const SelectOverlay = require("../__chunks__/SelectOverlay-DpI9vNLw.js");
 const utilities_css = require("../utilities/css.js");
-const InputIcon = require("../__chunks__/InputIcon-d7449227.js");
-const Text_index = require("../Text/index.js");
-const ExpandMore400 = require("../__chunks__/ExpandMore400-92646971.js");
-const UnstyledButton_index = require("../__chunks__/index-fd91868d.js");
-const _import = require("../__chunks__/import-109dab60.js");
-const useTriggerWidth = require("../__chunks__/useTriggerWidth-61c09005.js");
-const _import$1 = require("../__chunks__/import-313d3d73.js");
-const _import$2 = require("../__chunks__/import-db7a850c.js");
-const _import$3 = require("../__chunks__/import-5d56d155.js");
-const realModule = require("../__chunks__/real-module-c0f9f92a.js");
-const _import$4 = require("../__chunks__/import-dea5a24d.js");
-require("../Icon/index.js");
-require("../__chunks__/omit-fca26542.js");
-require("react-dom");
-const $b1f0cad8af73213b$export$3585ede4d035bf14 = /* @__PURE__ */ new WeakMap();
-function $b1f0cad8af73213b$var$normalizeKey(key) {
-  if (typeof key === "string")
-    return key.replace(/\s*/g, "");
-  return "" + key;
-}
-function $b1f0cad8af73213b$export$9145995848b05025(state, itemKey) {
-  let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
-  if (!data)
-    throw new Error("Unknown list");
-  return `${data.id}-option-${$b1f0cad8af73213b$var$normalizeKey(itemKey)}`;
-}
-function $c132121280ec012d$export$50eacbbf140a3141(props, state, ref) {
-  let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  let { listProps } = useTriggerWidth.$982254629710d113$export$b95089534ab7c1fd(__spreadProps(__spreadValues({}, props), {
-    ref,
-    selectionManager: state.selectionManager,
-    collection: state.collection,
-    disabledKeys: state.disabledKeys
-  }));
-  let { focusWithinProps } = _import$1.$9ab94262bd0047c7$export$420e68273165f4ec({
-    onFocusWithin: props.onFocus,
-    onBlurWithin: props.onBlur,
-    onFocusWithinChange: props.onFocusChange
-  });
-  let id = _import.$bdb11010cef70236$export$f680877a34711e37(props.id);
-  $b1f0cad8af73213b$export$3585ede4d035bf14.set(state, {
-    id,
-    shouldUseVirtualFocus: props.shouldUseVirtualFocus,
-    shouldSelectOnPressUp: props.shouldSelectOnPressUp,
-    shouldFocusOnHover: props.shouldFocusOnHover,
-    isVirtualized: props.isVirtualized,
-    onAction: props.onAction
-  });
-  let { labelProps, fieldProps } = _import$2.$d191a55c9702f145$export$8467354a121f1b9f(__spreadProps(__spreadValues({}, props), {
-    id,
-    // listbox is not an HTML input element so it
-    // shouldn't be labeled by a <label> element.
-    labelElementType: "span"
-  }));
-  return {
-    labelProps,
-    listBoxProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, focusWithinProps, state.selectionManager.selectionMode === "multiple" ? {
-      "aria-multiselectable": "true"
-    } : {}, __spreadValues({
-      role: "listbox"
-    }, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(fieldProps, listProps)))
-  };
-}
-function $293f70390ea03370$export$497855f14858aa34(props, state, ref) {
-  let { key } = props;
-  let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
-  var _props_isDisabled;
-  let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.disabledKeys.has(key);
-  var _props_isSelected;
-  let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : state.selectionManager.isSelected(key);
-  var _props_shouldSelectOnPressUp;
-  let shouldSelectOnPressUp = (_props_shouldSelectOnPressUp = props.shouldSelectOnPressUp) !== null && _props_shouldSelectOnPressUp !== void 0 ? _props_shouldSelectOnPressUp : data === null || data === void 0 ? void 0 : data.shouldSelectOnPressUp;
-  var _props_shouldFocusOnHover;
-  let shouldFocusOnHover = (_props_shouldFocusOnHover = props.shouldFocusOnHover) !== null && _props_shouldFocusOnHover !== void 0 ? _props_shouldFocusOnHover : data === null || data === void 0 ? void 0 : data.shouldFocusOnHover;
-  var _props_shouldUseVirtualFocus;
-  let shouldUseVirtualFocus = (_props_shouldUseVirtualFocus = props.shouldUseVirtualFocus) !== null && _props_shouldUseVirtualFocus !== void 0 ? _props_shouldUseVirtualFocus : data === null || data === void 0 ? void 0 : data.shouldUseVirtualFocus;
-  var _props_isVirtualized;
-  let isVirtualized = (_props_isVirtualized = props.isVirtualized) !== null && _props_isVirtualized !== void 0 ? _props_isVirtualized : data === null || data === void 0 ? void 0 : data.isVirtualized;
-  let labelId = _import.$bdb11010cef70236$export$b4cc09c592e8fdb8();
-  let descriptionId = _import.$bdb11010cef70236$export$b4cc09c592e8fdb8();
-  let optionProps = {
-    role: "option",
-    "aria-disabled": isDisabled || void 0,
-    "aria-selected": state.selectionManager.selectionMode !== "none" ? isSelected : void 0
-  };
-  if (!(_import.$c87311424ea30a05$export$9ac100e40613ea10() && _import.$c87311424ea30a05$export$78551043582a6a98())) {
-    optionProps["aria-label"] = props["aria-label"];
-    optionProps["aria-labelledby"] = labelId;
-    optionProps["aria-describedby"] = descriptionId;
-  }
-  if (isVirtualized) {
-    var _state_collection_getItem;
-    let index = Number((_state_collection_getItem = state.collection.getItem(key)) === null || _state_collection_getItem === void 0 ? void 0 : _state_collection_getItem.index);
-    optionProps["aria-posinset"] = Number.isNaN(index) ? void 0 : index + 1;
-    optionProps["aria-setsize"] = useTriggerWidth.$453cc9f0df89c0a5$export$77d5aafae4e095b2(state.collection);
-  }
-  let { itemProps, isPressed, isFocused, hasAction, allowsSelection } = useTriggerWidth.$880e95eb8b93ba9a$export$ecf600387e221c37({
-    selectionManager: state.selectionManager,
-    key,
-    ref,
-    shouldSelectOnPressUp,
-    allowsDifferentPressOrigin: shouldSelectOnPressUp && shouldFocusOnHover,
-    isVirtualized,
-    shouldUseVirtualFocus,
-    isDisabled,
-    onAction: (data === null || data === void 0 ? void 0 : data.onAction) ? () => {
-      var _data_onAction;
-      return data === null || data === void 0 ? void 0 : (_data_onAction = data.onAction) === null || _data_onAction === void 0 ? void 0 : _data_onAction.call(data, key);
-    } : void 0
-  });
-  let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
-    isDisabled: isDisabled || !shouldFocusOnHover,
-    onHoverStart() {
-      if (!_import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27()) {
-        state.selectionManager.setFocused(true);
-        state.selectionManager.setFocusedKey(key);
-      }
-    }
-  });
-  return {
-    optionProps: __spreadProps(__spreadValues(__spreadValues({}, optionProps), _import.$3ef42575df84b30b$export$9d1611c77c2fe928(itemProps, hoverProps)), {
-      id: $b1f0cad8af73213b$export$9145995848b05025(state, key)
-    }),
-    labelProps: {
-      id: labelId
-    },
-    descriptionProps: {
-      id: descriptionId
-    },
-    isFocused,
-    isFocusVisible: isFocused && _import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27(),
-    isSelected,
-    isDisabled,
-    isPressed,
-    allowsSelection,
-    hasAction
-  };
-}
-function $af383d3bef1cfdc9$export$c3f9f39876e4bc7(props) {
-  let { heading, "aria-label": ariaLabel } = props;
-  let headingId = _import.$bdb11010cef70236$export$f680877a34711e37();
-  return {
-    itemProps: {
-      role: "presentation"
-    },
-    headingProps: heading ? {
-      // Techincally, listbox cannot contain headings according to ARIA.
-      // We hide the heading from assistive technology, using role="presentation",
-      // and only use it as a visual label for the nested group.
-      id: headingId,
-      role: "presentation"
-    } : {},
-    groupProps: {
-      role: "group",
-      "aria-label": ariaLabel,
-      "aria-labelledby": heading ? headingId : void 0
-    }
-  };
-}
-function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
-  let { keyboardDelegate, isDisabled } = props;
-  let collator = realModule.$325a3faab7a68acd$export$a16aca283550c30d({
-    usage: "search",
-    sensitivity: "base"
-  });
-  let delegate = React.useMemo(() => keyboardDelegate || new useTriggerWidth.$2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, null, collator), [
-    keyboardDelegate,
-    state.collection,
-    state.disabledKeys,
-    collator
-  ]);
-  let { menuTriggerProps, menuProps } = useTriggerWidth.$168583247155ddda$export$dc9c12ed27dd1b49({
-    isDisabled,
-    type: "listbox"
-  }, state, ref);
-  let onKeyDown = (e) => {
-    switch (e.key) {
-      case "ArrowLeft": {
-        e.preventDefault();
-        let key = state.selectedKey != null ? delegate.getKeyAbove(state.selectedKey) : delegate.getFirstKey();
-        if (key)
-          state.setSelectedKey(key);
-        break;
-      }
-      case "ArrowRight": {
-        e.preventDefault();
-        let key = state.selectedKey != null ? delegate.getKeyBelow(state.selectedKey) : delegate.getFirstKey();
-        if (key)
-          state.setSelectedKey(key);
-        break;
-      }
-    }
-  };
-  let { typeSelectProps } = useTriggerWidth.$fb3050f43d946246$export$e32c88dfddc6e1d8({
-    keyboardDelegate: delegate,
-    selectionManager: state.selectionManager,
-    onTypeSelect(key) {
-      state.setSelectedKey(key);
-    }
-  });
-  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = _import$2.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
-    labelElementType: "span"
-  }));
-  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
-  delete typeSelectProps.onKeyDownCapture;
-  let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  let triggerProps = _import.$3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
-  let valueId = _import.$bdb11010cef70236$export$f680877a34711e37();
-  return {
-    labelProps: __spreadProps(__spreadValues({}, labelProps), {
-      onClick: () => {
-        if (!props.isDisabled) {
-          ref.current.focus();
-          _import$1.$507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
-        }
-      }
-    }),
-    triggerProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, triggerProps), {
-      isDisabled,
-      onKeyDown: _import.$ff5963eb1fccf552$export$e08e3b67e392101e(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
-      onKeyUp: props.onKeyUp,
-      "aria-labelledby": [
-        valueId,
-        triggerProps["aria-labelledby"],
-        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
-      ].filter(Boolean).join(" "),
-      onFocus(e) {
-        if (state.isFocused)
-          return;
-        if (props.onFocus)
-          props.onFocus(e);
-        if (props.onFocusChange)
-          props.onFocusChange(true);
-        state.setFocused(true);
-      },
-      onBlur(e) {
-        if (state.isOpen)
-          return;
-        if (props.onBlur)
-          props.onBlur(e);
-        if (props.onFocusChange)
-          props.onFocusChange(false);
-        state.setFocused(false);
-      }
-    })),
-    valueProps: {
-      id: valueId
-    },
-    menuProps: __spreadProps(__spreadValues({}, menuProps), {
-      autoFocus: state.focusStrategy || true,
-      shouldSelectOnPressUp: true,
-      shouldFocusOnHover: true,
-      disallowEmptySelection: true,
-      onBlur: (e) => {
-        if (e.currentTarget.contains(e.relatedTarget))
-          return;
-        if (props.onBlur)
-          props.onBlur(e);
-        if (props.onFocusChange)
-          props.onFocusChange(false);
-        state.setFocused(false);
-      },
-      "aria-labelledby": [
-        fieldProps["aria-labelledby"],
-        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
-      ].filter(Boolean).join(" ")
-    }),
-    descriptionProps,
-    errorMessageProps
-  };
-}
-function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
-  let { autoComplete, name, isDisabled } = props;
-  let modality = _import$1.$507fabe10e71c6fb$export$98e20ec92f614cfe();
-  let { visuallyHiddenProps } = _import$3.$5c3e21d68f1c4674$export$a966af930f325cab();
-  _import.$99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
-  var _state_selectedKey;
-  return {
-    containerProps: __spreadProps(__spreadValues({}, visuallyHiddenProps), {
-      "aria-hidden": true,
-      ["data-a11y-ignore"]: "aria-hidden-focus"
-    }),
-    inputProps: {
-      type: "text",
-      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
-      style: {
-        fontSize: 16
-      },
-      onFocus: () => triggerRef.current.focus(),
-      disabled: isDisabled
-    },
-    selectProps: {
-      tabIndex: -1,
-      autoComplete,
-      disabled: isDisabled,
-      name,
-      size: state.collection.size,
-      value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : "",
-      onChange: (e) => state.setSelectedKey(e.target.value)
-    }
-  };
-}
-function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
-  let { state, triggerRef, label, name, isDisabled } = props;
-  let selectRef = React.useRef(null);
-  let { containerProps, inputProps, selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1(__spreadProps(__spreadValues({}, props), {
-    selectRef
-  }), state, triggerRef);
-  var _state_selectedKey;
-  if (state.collection.size <= 300)
-    return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
-      "data-testid": "hidden-select-container"
-    }), /* @__PURE__ */ React.createElement("input", inputProps), /* @__PURE__ */ React.createElement("label", null, label, /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues({}, selectProps), {
-      ref: selectRef
-    }), /* @__PURE__ */ React.createElement("option", null), [
-      ...state.collection.getKeys()
-    ].map((key) => {
-      let item = state.collection.getItem(key);
-      if (item.type === "item")
-        return /* @__PURE__ */ React.createElement("option", {
-          key: item.key,
-          value: item.key
-        }, item.textValue);
-    }))));
-  else if (name)
-    return /* @__PURE__ */ React.createElement("input", {
-      type: "hidden",
-      autoComplete: selectProps.autoComplete,
-      name,
-      disabled: isDisabled,
-      value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
-    });
-  return null;
-}
-class $a02d57049d202695$export$d085fb9e920b5ca7 {
-  *[Symbol.iterator]() {
-    yield* __yieldStar(this.iterable);
-  }
-  get size() {
-    return this.keyMap.size;
-  }
-  getKeys() {
-    return this.keyMap.keys();
-  }
-  getKeyBefore(key) {
-    let node = this.keyMap.get(key);
-    return node ? node.prevKey : null;
-  }
-  getKeyAfter(key) {
-    let node = this.keyMap.get(key);
-    return node ? node.nextKey : null;
-  }
-  getFirstKey() {
-    return this.firstKey;
-  }
-  getLastKey() {
-    return this.lastKey;
-  }
-  getItem(key) {
-    return this.keyMap.get(key);
-  }
-  at(idx) {
-    const keys = [
-      ...this.getKeys()
-    ];
-    return this.getItem(keys[idx]);
-  }
-  getChildren(key) {
-    let node = this.keyMap.get(key);
-    return (node === null || node === void 0 ? void 0 : node.childNodes) || [];
-  }
-  constructor(nodes) {
-    this.keyMap = /* @__PURE__ */ new Map();
-    this.iterable = nodes;
-    let visit = (node) => {
-      this.keyMap.set(node.key, node);
-      if (node.childNodes && node.type === "section")
-        for (let child of node.childNodes)
-          visit(child);
-    };
-    for (let node of nodes)
-      visit(node);
-    let last;
-    let index = 0;
-    for (let [key, node] of this.keyMap) {
-      if (last) {
-        last.nextKey = key;
-        node.prevKey = last.key;
-      } else {
-        this.firstKey = key;
-        node.prevKey = void 0;
-      }
-      if (node.type === "item")
-        node.index = index++;
-      last = node;
-      last.nextKey = void 0;
-    }
-    this.lastKey = last === null || last === void 0 ? void 0 : last.key;
-  }
-}
-function $e72dd72e1c76a225$export$2f645645f7bca764(props) {
-  let { filter } = props;
-  let selectionState = useTriggerWidth.$7af3f5b51489e0b5$export$253fe78d46329472(props);
-  let disabledKeys = React.useMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : /* @__PURE__ */ new Set(), [
-    props.disabledKeys
-  ]);
-  let factory = React.useCallback((nodes) => filter ? new $a02d57049d202695$export$d085fb9e920b5ca7(filter(nodes)) : new $a02d57049d202695$export$d085fb9e920b5ca7(nodes), [
-    filter
-  ]);
-  let context = React.useMemo(() => ({
-    suppressTextValueWarning: props.suppressTextValueWarning
-  }), [
-    props.suppressTextValueWarning
-  ]);
-  let collection = useTriggerWidth.$7613b1592d41b092$export$6cd28814d92fa9c9(props, factory, context);
-  let selectionManager = React.useMemo(() => new useTriggerWidth.$d496c0a20b6e58ec$export$6c8a5aaad13c9852(collection, selectionState), [
-    collection,
-    selectionState
-  ]);
-  const cachedCollection = React.useRef(null);
-  React.useEffect(() => {
-    if (selectionState.focusedKey != null && !collection.getItem(selectionState.focusedKey)) {
-      const startItem = cachedCollection.current.getItem(selectionState.focusedKey);
-      const cachedItemNodes = [
-        ...cachedCollection.current.getKeys()
-      ].map((key) => {
-        const itemNode = cachedCollection.current.getItem(key);
-        return itemNode.type === "item" ? itemNode : null;
-      }).filter((node) => node !== null);
-      const itemNodes = [
-        ...collection.getKeys()
-      ].map((key) => {
-        const itemNode = collection.getItem(key);
-        return itemNode.type === "item" ? itemNode : null;
-      }).filter((node) => node !== null);
-      const diff = cachedItemNodes.length - itemNodes.length;
-      let index = Math.min(diff > 1 ? Math.max(startItem.index - diff + 1, 0) : startItem.index, itemNodes.length - 1);
-      let newNode;
-      while (index >= 0) {
-        if (!selectionManager.isDisabled(itemNodes[index].key)) {
-          newNode = itemNodes[index];
-          break;
-        }
-        if (index < itemNodes.length - 1)
-          index++;
-        else {
-          if (index > startItem.index)
-            index = startItem.index;
-          index--;
-        }
-      }
-      selectionState.setFocusedKey(newNode ? newNode.key : null);
-    }
-    cachedCollection.current = collection;
-  }, [
-    collection,
-    selectionManager,
-    selectionState,
-    selectionState.focusedKey
-  ]);
-  return {
-    collection,
-    disabledKeys,
-    selectionManager
-  };
-}
-function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {
-  var _props_defaultSelectedKey;
-  let [selectedKey, setSelectedKey] = _import$4.$458b0a5536c1a7cf$export$40bfa8c7b0832715(props.selectedKey, (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : null, props.onSelectionChange);
-  let selectedKeys = React.useMemo(() => selectedKey != null ? [
-    selectedKey
-  ] : [], [
-    selectedKey
-  ]);
-  let { collection, disabledKeys, selectionManager } = $e72dd72e1c76a225$export$2f645645f7bca764(__spreadProps(__spreadValues({}, props), {
-    selectionMode: "single",
-    disallowEmptySelection: true,
-    allowDuplicateSelectionEvents: true,
-    selectedKeys,
-    onSelectionChange: (keys) => {
-      let key = keys.values().next().value;
-      if (key === selectedKey && props.onSelectionChange)
-        props.onSelectionChange(key);
-      setSelectedKey(key);
-    }
-  }));
-  let selectedItem = selectedKey != null ? collection.getItem(selectedKey) : null;
-  return {
-    collection,
-    disabledKeys,
-    selectionManager,
-    selectedKey,
-    setSelectedKey,
-    selectedItem
-  };
-}
-function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
-  let triggerState = useTriggerWidth.$a28c903ee9ad8dc5$export$79fefeb1c2091ac3(props);
-  let listState = $a0d645289fe9b86b$export$e7f05e985daf4b5f(__spreadProps(__spreadValues({}, props), {
-    onSelectionChange: (key) => {
-      if (props.onSelectionChange != null)
-        props.onSelectionChange(key);
-      triggerState.close();
-    }
-  }));
-  let [isFocused, setFocused] = React.useState(false);
-  return __spreadProps(__spreadValues(__spreadValues({}, listState), triggerState), {
-    open() {
-      if (listState.collection.size !== 0)
-        triggerState.open();
-    },
-    toggle(focusStrategy) {
-      if (listState.collection.size !== 0)
-        triggerState.toggle(focusStrategy);
-    },
-    isFocused,
-    setFocused
-  });
-}
-const InternalSelectContext = React.createContext(null);
-function useInternalSelectContext() {
-  const selectContext = React.useContext(InternalSelectContext);
-  if (!selectContext) {
-    throw new Error("InternalSelectContext must be used inside a <Select />");
-  }
-  return selectContext;
-}
-const underlay = "_underlay_1ql77_5";
-const listboxRoot = "_listboxRoot_1ql77_10";
-const listbox = "_listbox_1ql77_10";
-const listboxList = "_listboxList_1ql77_65";
-const sectionList = "_sectionList_1ql77_66";
-const optionContent = "_optionContent_1ql77_72";
-const separator = "_separator_1ql77_73";
-const option = "_option_1ql77_72";
-const fieldRoot = "_fieldRoot_1ql77_116";
-const selectField = "_selectField_1ql77_137";
-const selectSizeSm = "_selectSizeSm_1ql77_176";
-const selectSizeLg = "_selectSizeLg_1ql77_190";
-const selectFieldError = "_selectFieldError_1ql77_198";
-const selectFieldIconStart = "_selectFieldIconStart_1ql77_206";
-const selectFieldIconEnd = "_selectFieldIconEnd_1ql77_210";
-const selectFieldIconContainer = "_selectFieldIconContainer_1ql77_214";
-const selectFieldText = "_selectFieldText_1ql77_220";
-const listboxOpen = "_listboxOpen_1ql77_224";
-const styles = {
-  underlay,
-  listboxRoot,
-  listbox,
-  listboxList,
-  sectionList,
-  optionContent,
-  separator,
-  option,
-  fieldRoot,
-  selectField,
-  selectSizeSm,
-  selectSizeLg,
-  selectFieldError,
-  selectFieldIconStart,
-  selectFieldIconEnd,
-  selectFieldIconContainer,
-  selectFieldText,
-  listboxOpen
-};
+const InputCaption = require("../__chunks__/InputCaption-CccF4ynE.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
+const InputIcon = require("../__chunks__/InputIcon-DDKBJ_Tk.js");
+const useTriggerWidth = require("../__chunks__/useTriggerWidth-NhYqZmlX.js");
 function SelectTrigger(props) {
   const { size = "md", valueProps, iconAtStart, hasError, isDisabled, children } = props;
-  const { triggerProps, triggerRef, selectState } = useInternalSelectContext();
+  const { triggerProps, triggerRef, selectState } = SelectOverlay.useInternalSelectContext();
   const hasStartIcon = !!iconAtStart;
-  const className = utilities_css.classNames(styles.selectField, styles.selectFieldIconEnd, selectState.isOpen && styles.listboxOpen, hasError && styles.selectFieldError, hasStartIcon && styles.selectFieldIconStart, styles[utilities_css.variationName("selectSize", size)]);
-  return React.createElement("div", {
-    className: styles.selectFieldIconContainer
-  }, hasStartIcon && React.createElement(InputIcon.InputIcon, {
-    alignment: "start",
-    icon: iconAtStart,
-    size,
-    isDisabled
-  }), React.createElement(UnstyledButton_index.UnstyledButton, __spreadProps(__spreadValues({}, triggerProps), {
-    ref: triggerRef,
-    className
-  }), React.createElement("span", __spreadProps(__spreadValues({}, valueProps), {
-    className: styles.selectFieldText
-  }), children)), React.createElement(InputIcon.InputIcon, {
-    alignment: "end",
-    icon: ExpandMore400.ExpandMore400,
-    size,
-    isDisabled
-  }));
+  const className = utilities_css.classNames(SelectOverlay.styles.selectField, SelectOverlay.styles.selectFieldIconEnd, selectState.isOpen && SelectOverlay.styles.listboxOpen, hasError && SelectOverlay.styles.selectFieldError, hasStartIcon && SelectOverlay.styles.selectFieldIconStart, SelectOverlay.styles[utilities_css.variationName("selectSize", size)]);
+  return jsxRuntime.jsxs("div", {
+    className: SelectOverlay.styles.selectFieldIconContainer,
+    children: [hasStartIcon && jsxRuntime.jsx(InputIcon.InputIcon, {
+      alignment: "start",
+      icon: iconAtStart,
+      size,
+      isDisabled
+    }), jsxRuntime.jsx(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, triggerProps), {
+      ref: triggerRef,
+      className,
+      children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, valueProps), {
+        className: SelectOverlay.styles.selectFieldText,
+        children
+      }))
+    })), jsxRuntime.jsx(InputIcon.InputIcon, {
+      alignment: "end",
+      icon: ExpandMore400.ExpandMore400,
+      size,
+      isDisabled
+    })]
+  });
 }
 function SelectField(props) {
-  const { isLabelVisuallyHidden = false, isDisabled = false, validationState = "valid", isLabelEmphasized = false, size = "md", label, errorText, helperText, placeholder, iconAtStart, labelProps, valueProps, errorTextProps, helperTextProps } = props;
-  const { triggerRef, selectState } = useInternalSelectContext();
+  var _a, _b;
+  const { isDisabled = false, validationState = "valid", isLabelEmphasized = false, size = "md", label, errorText, helperText, placeholder, iconAtStart, labelProps, valueProps, errorTextProps, helperTextProps } = props;
+  const { triggerRef, selectState } = SelectOverlay.useInternalSelectContext();
   const hasError = validationState === "invalid";
   const showErrorText = hasError && errorText;
   const showHelperText = !showErrorText && helperText;
   const captionProps = showHelperText ? helperTextProps : errorTextProps;
   const captionText = showHelperText ? helperText : errorText;
-  return React.createElement("div", {
-    className: utilities_css.classNames(styles.fieldRoot)
-  }, React.createElement(InputIcon.Label, __spreadValues({
-    isLabelVisuallyHidden,
-    fieldSize: size,
-    hasError,
-    isLabelEmphasized
-  }, labelProps), label), React.createElement($bdd25dc72710631f$export$cbd84cdb2e668835, {
-    isDisabled,
-    state: selectState,
-    triggerRef,
-    label
-  }), React.createElement(SelectTrigger, {
-    valueProps,
-    iconAtStart,
-    hasError,
-    isDisabled,
-    size
-  }, selectState.selectedItem ? selectState.selectedItem.rendered : React.createElement(Text_index.Text, {
-    color: "subdued"
-  }, placeholder)), (showErrorText || showHelperText) && React.createElement(InputIcon.InputCaption, __spreadValues({
-    variant: showHelperText ? "helper" : "error"
-  }, captionProps), captionText));
-}
-function SelectOption(_props) {
-  return null;
-}
-Object.assign(SelectOption, useTriggerWidth.$c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
-function SelectOptionContent({ item, state }) {
-  const ref = React.useRef(null);
-  const { optionProps, isSelected, isFocused, isDisabled } = $293f70390ea03370$export$497855f14858aa34({
-    key: item.key
-  }, state, ref);
-  return React.createElement("li", __spreadProps(__spreadValues({}, optionProps), {
-    ref,
-    className: styles.option,
-    "data-is-disabled": isDisabled,
-    "data-is-focused": isFocused,
-    "data-is-selected": isSelected
-  }), React.createElement("div", {
-    className: styles.optionContent
-  }, React.createElement(Text_index.Text, {
-    variant: "body1",
-    truncate: true
-  }, item.rendered)));
-}
-function SelectSection(_props) {
-  return null;
-}
-Object.assign(SelectSection, useTriggerWidth.$9fc4852771d079eb$export$6e2c8f0811a474ce);
-function SelectSectionContent({ section, state }) {
-  const { itemProps, groupProps } = $af383d3bef1cfdc9$export$c3f9f39876e4bc7({
-    "aria-label": section["aria-label"]
-  });
-  const { separatorProps } = useTriggerWidth.$f4b273590fab9f93$export$52210f68a14655d0({
-    elementType: "li"
+  const selectedDescription = (_b = (_a = selectState.selectedItem) == null ? void 0 : _a.props) == null ? void 0 : _b.description;
+  return jsxRuntime.jsxs("div", {
+    className: utilities_css.classNames(SelectOverlay.styles.fieldRoot),
+    children: [label && jsxRuntime.jsx(InputCaption.Label, __spreadProps(__spreadValues({
+      fieldSize: size,
+      hasError,
+      isLabelEmphasized
+    }, labelProps), {
+      children: label
+    })), jsxRuntime.jsx(SelectOverlay.$bdd25dc72710631f$export$cbd84cdb2e668835, {
+      isDisabled,
+      state: selectState,
+      triggerRef,
+      label
+    }), jsxRuntime.jsx(SelectTrigger, {
+      valueProps,
+      iconAtStart,
+      hasError,
+      isDisabled,
+      size,
+      children: selectState.selectedItem ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Text.Text, {
+          variant: "body2",
+          truncate: true,
+          children: selectState.selectedItem.rendered
+        }), selectedDescription && jsxRuntime.jsx("span", {
+          className: SelectOverlay.styles.selectedDescription,
+          children: jsxRuntime.jsx(Text.Text, {
+            variant: "caption",
+            color: "neutral.600",
+            truncate: true,
+            children: selectedDescription
+          })
+        })]
+      }) : jsxRuntime.jsx(Text.Text, {
+        color: "neutral.600",
+        children: placeholder
+      })
+    }), (showErrorText || showHelperText) && jsxRuntime.jsx(InputCaption.InputCaption, __spreadProps(__spreadValues({
+      variant: showHelperText ? "helper" : "error"
+    }, captionProps), {
+      children: captionText
+    }))]
   });
-  return React.createElement(React.Fragment, null, section.key !== state.collection.getFirstKey() && React.createElement("li", __spreadProps(__spreadValues({}, separatorProps), {
-    className: styles.separator
-  })), React.createElement("li", __spreadValues({}, itemProps), section.hasChildNodes && React.createElement("ul", __spreadProps(__spreadValues({}, groupProps), {
-    className: styles.sectionList
-  }), [...section.childNodes].map((item) => {
-    return React.createElement(SelectOptionContent, {
-      key: item.key,
-      item,
-      state
-    });
-  }))));
-}
-function SelectOverlay() {
-  const { selectState, triggerWidth } = useInternalSelectContext();
-  if (!selectState.isOpen || triggerWidth === null) {
-    return null;
-  }
-  return React.createElement(SelectOverlayContent, null);
-}
-function SelectOverlayContent() {
-  const { selectState, triggerRef, listBoxPropsFromSelect, triggerWidth } = useInternalSelectContext();
-  const popoverRef = React.useRef(null);
-  const listBoxRef = React.useRef(null);
-  const { popoverProps, underlayProps } = _import$3.$f2f8a6077418541e$export$542a6fd13ac93354({
-    containerPadding: useTriggerWidth.OVERLAY_PADDING_FROM_CONTAINER,
-    maxHeight: useTriggerWidth.ITEM_HEIGHT * Infinity + useTriggerWidth.Y_PADDING_INSIDE_OVERLAY * 2 + 2,
-    offset: useTriggerWidth.OVERLAY_OFFSET,
-    placement: useTriggerWidth.DEFAULT_PLACEMENT,
-    popoverRef,
-    scrollRef: listBoxRef,
-    triggerRef
-  }, selectState);
-  const { listBoxProps } = $c132121280ec012d$export$50eacbbf140a3141(listBoxPropsFromSelect, selectState, listBoxRef);
-  const style = __spreadValues(__spreadValues({}, popoverProps.style), useTriggerWidth.getUnmergedPopoverStyles(useTriggerWidth.DEFAULT_WIDTH, triggerWidth));
-  return React.createElement(_import$3.$f57aed4a881a3485$export$b47c3594eab58386, null, React.createElement("div", __spreadProps(__spreadValues({}, underlayProps), {
-    className: styles.underlay
-  })), React.createElement("div", __spreadProps(__spreadValues({}, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(popoverProps, {
-    style
-  })), {
-    ref: popoverRef,
-    className: styles.listboxRoot
-  }), React.createElement(_import$3.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
-    onDismiss: selectState.close
-  }), React.createElement("div", __spreadProps(__spreadValues({}, listBoxProps), {
-    ref: listBoxRef,
-    className: styles.listbox,
-    "data-width": useTriggerWidth.DEFAULT_WIDTH,
-    "data-max-items-until-scroll": Infinity,
-    "data-overlayscrollbars-initialize": true
-  }), React.createElement("ul", {
-    className: styles.listboxList
-  }, [...selectState.collection].map((item) => {
-    return item.type === "section" ? React.createElement(SelectSectionContent, {
-      key: item.key,
-      section: item,
-      state: selectState
-    }) : React.createElement(SelectOptionContent, {
-      key: item.key,
-      item,
-      state: selectState
-    });
-  }))), React.createElement(_import$3.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
-    onDismiss: selectState.close
-  })));
 }
 function Select(props) {
-  const { isLabelVisuallyHidden, isDisabled, validationState, isLabelEmphasized, size = "md", label, errorText, helperText, placeholder, iconAtStart } = props;
+  const { isDisabled, validationState, isLabelEmphasized, size = "md", "aria-label": ariaLabel, label, errorText, helperText, placeholder, iconAtStart } = props;
   const triggerRef = React.useRef(null);
-  const selectState = $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props);
-  const { labelProps, valueProps, triggerProps, menuProps: listBoxPropsFromSelect, descriptionProps: helperTextProps, errorMessageProps: errorTextProps } = $58aed456727eb0f3$export$e64b2f635402ca43(props, selectState, triggerRef);
+  const castProps = props;
+  const selectState = SelectOverlay.$2bc3a590c5373a4e$export$5159ec8b34d4ec12(castProps);
+  InputIcon.logWarningForMissingAriaLabel(label, ariaLabel);
+  const { labelProps, valueProps, triggerProps, menuProps: listBoxPropsFromSelect, descriptionProps: helperTextProps, errorMessageProps: errorTextProps } = SelectOverlay.$58aed456727eb0f3$export$e64b2f635402ca43(castProps, selectState, triggerRef);
   const triggerWidth = useTriggerWidth.useTriggerWidth(triggerRef);
   const context = React.useMemo(() => {
     return {
@@ -801,25 +127,25 @@ function Select(props) {
       triggerWidth
     };
   }, [triggerProps, listBoxPropsFromSelect, selectState, triggerWidth]);
-  return React.createElement(InternalSelectContext.Provider, {
-    value: context
-  }, React.createElement(SelectField, {
-    isLabelVisuallyHidden,
-    isDisabled,
-    validationState,
-    isLabelEmphasized,
-    size,
-    label,
-    errorText,
-    helperText,
-    placeholder,
-    iconAtStart,
-    labelProps,
-    valueProps,
-    helperTextProps,
-    errorTextProps
-  }), React.createElement(SelectOverlay, null));
+  return jsxRuntime.jsxs(SelectOverlay.InternalSelectContext.Provider, {
+    value: context,
+    children: [jsxRuntime.jsx(SelectField, {
+      isDisabled,
+      validationState,
+      isLabelEmphasized,
+      size,
+      label,
+      errorText,
+      helperText,
+      placeholder,
+      iconAtStart,
+      labelProps,
+      valueProps,
+      helperTextProps,
+      errorTextProps
+    }), jsxRuntime.jsx(SelectOverlay.SelectOverlay, {})]
+  });
 }
-Select.Section = SelectSection;
-Select.Option = SelectOption;
+Select.Section = SelectOverlay.SelectSection;
+Select.Option = SelectOverlay.SelectOption;
 exports.Select = Select;