@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.60

package/__chunks__/SelectOverlay-pFcbx7UM.js

@@ -0,0 +1,571 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+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 = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const useFormValidation = require("./useFormValidation-C2DoIczP.js");
+const Overlay = require("./Overlay-ZinDp2HW.js");
+const useSingleSelectListState = require("./useSingleSelectListState-5RB1w9vv.js");
+const React = require("react");
+const mergeProps = require("./mergeProps-DniMwM6P.js");
+const filterDOMProps = require("./filterDOMProps-D3iOHP0H.js");
+const useSelectableList = require("./useSelectableList-DlkRkps4.js");
+const useSelectableItem = require("./useSelectableItem-BGvBbIwY.js");
+const useFocusVisible = require("./useFocusVisible-PBQuklI8.js");
+const useField = require("./useField-BJW_bXVD.js");
+const useTriggerWidth = require("./useTriggerWidth-C7OT3WI9.js");
+const useFormReset = require("./useFormReset-Bgj93eR3.js");
+const VisuallyHidden = require("./VisuallyHidden-CVfjb1YY.js");
+const Text = require("./Text-CEI17LPu.js");
+const Item = require("./Item-CfWjPrxx.js");
+const usePress = require("./usePress-Dz8YYpge.js");
+const isVirtualEvent = require("./isVirtualEvent-DwoP1rNI.js");
+const useHover = require("./useHover-BIKwjrCT.js");
+const utilities_useScrollbar = require("../utilities/useScrollbar.js");
+const useFocusWithin = require("./useFocusWithin-C1ioGWec.js");
+const useLabel = require("./useLabel-t-N6anB8.js");
+function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
+  let triggerState = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let [focusStrategy, setFocusStrategy] = React.useState(null);
+  let listState = useSingleSelectListState.$a0d645289fe9b86b$export$e7f05e985daf4b5f(__spreadProps(__spreadValues({}, props), {
+    onSelectionChange: (key) => {
+      if (props.onSelectionChange != null) props.onSelectionChange(key);
+      triggerState.close();
+      validationState.commitValidation();
+    }
+  }));
+  let validationState = useFormValidation.$e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: listState.selectedKey
+  }));
+  let [isFocused, setFocused] = React.useState(false);
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, validationState), listState), triggerState), {
+    focusStrategy,
+    open(focusStrategy2 = null) {
+      if (listState.collection.size !== 0) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.open();
+      }
+    },
+    toggle(focusStrategy2 = null) {
+      if (listState.collection.size !== 0) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.toggle();
+      }
+    },
+    isFocused,
+    setFocused
+  });
+}
+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 = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let selectionBehavior = props.selectionBehavior || "toggle";
+  let linkBehavior = props.linkBehavior || (selectionBehavior === "replace" ? "action" : "override");
+  if (selectionBehavior === "toggle" && linkBehavior === "action")
+    linkBehavior = "override";
+  let { listProps } = useSelectableList.$982254629710d113$export$b95089534ab7c1fd(__spreadProps(__spreadValues({}, props), {
+    ref,
+    selectionManager: state.selectionManager,
+    collection: state.collection,
+    disabledKeys: state.disabledKeys,
+    linkBehavior
+  }));
+  let { focusWithinProps } = useFocusWithin.$9ab94262bd0047c7$export$420e68273165f4ec({
+    onFocusWithin: props.onFocus,
+    onBlurWithin: props.onBlur,
+    onFocusWithinChange: props.onFocusChange
+  });
+  let id = mergeProps.$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,
+    linkBehavior
+  });
+  let { labelProps, fieldProps } = useLabel.$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: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, focusWithinProps, state.selectionManager.selectionMode === "multiple" ? {
+      "aria-multiselectable": "true"
+    } : {}, __spreadValues({
+      role: "listbox"
+    }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(fieldProps, listProps)))
+  };
+}
+function $293f70390ea03370$export$497855f14858aa34(props, state, ref) {
+  var _item_props, _item_props1;
+  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.selectionManager.isDisabled(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 = mergeProps.$bdb11010cef70236$export$b4cc09c592e8fdb8();
+  let descriptionId = mergeProps.$bdb11010cef70236$export$b4cc09c592e8fdb8();
+  let optionProps = {
+    role: "option",
+    "aria-disabled": isDisabled || void 0,
+    "aria-selected": state.selectionManager.selectionMode !== "none" ? isSelected : void 0
+  };
+  if (!(isVirtualEvent.$c87311424ea30a05$export$9ac100e40613ea10() && isVirtualEvent.$c87311424ea30a05$export$78551043582a6a98())) {
+    optionProps["aria-label"] = props["aria-label"];
+    optionProps["aria-labelledby"] = labelId;
+    optionProps["aria-describedby"] = descriptionId;
+  }
+  let item = state.collection.getItem(key);
+  if (isVirtualized) {
+    let index = Number(item === null || item === void 0 ? void 0 : item.index);
+    optionProps["aria-posinset"] = Number.isNaN(index) ? void 0 : index + 1;
+    optionProps["aria-setsize"] = useTriggerWidth.$453cc9f0df89c0a5$export$77d5aafae4e095b2(state.collection);
+  }
+  let 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 { itemProps, isPressed, isFocused, hasAction, allowsSelection } = useSelectableItem.$880e95eb8b93ba9a$export$ecf600387e221c37({
+    selectionManager: state.selectionManager,
+    key,
+    ref,
+    shouldSelectOnPressUp,
+    allowsDifferentPressOrigin: shouldSelectOnPressUp && shouldFocusOnHover,
+    isVirtualized,
+    shouldUseVirtualFocus,
+    isDisabled,
+    onAction: onAction || (item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.onAction) ? mergeProps.$ff5963eb1fccf552$export$e08e3b67e392101e(item === null || item === void 0 ? void 0 : (_item_props1 = item.props) === null || _item_props1 === void 0 ? void 0 : _item_props1.onAction, onAction) : void 0,
+    linkBehavior: data === null || data === void 0 ? void 0 : data.linkBehavior
+  });
+  let { hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({
+    isDisabled: isDisabled || !shouldFocusOnHover,
+    onHoverStart() {
+      if (!useFocusVisible.$507fabe10e71c6fb$export$b9b3dfddab17db27()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+      }
+    }
+  });
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(item === null || item === void 0 ? void 0 : item.props);
+  delete domProps.id;
+  let linkProps = usePress.$ea8dcbcb9ea1b556$export$7e924b3091a3bd18(item === null || item === void 0 ? void 0 : item.props);
+  return {
+    optionProps: __spreadProps(__spreadValues(__spreadValues({}, optionProps), mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, itemProps, hoverProps, linkProps)), {
+      id: $b1f0cad8af73213b$export$9145995848b05025(state, key)
+    }),
+    labelProps: {
+      id: labelId
+    },
+    descriptionProps: {
+      id: descriptionId
+    },
+    isFocused,
+    isFocusVisible: isFocused && useFocusVisible.$507fabe10e71c6fb$export$b9b3dfddab17db27(),
+    isSelected,
+    isDisabled,
+    isPressed,
+    allowsSelection,
+    hasAction
+  };
+}
+function $af383d3bef1cfdc9$export$c3f9f39876e4bc7(props) {
+  let { heading, "aria-label": ariaLabel } = props;
+  let headingId = mergeProps.$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
+    }
+  };
+}
+const $58aed456727eb0f3$export$703601b7e90536f8 = /* @__PURE__ */ new WeakMap();
+function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
+  let { keyboardDelegate, isDisabled, isRequired, name, validationBehavior = "aria" } = props;
+  let collator = useSelectableList.$325a3faab7a68acd$export$a16aca283550c30d({
+    usage: "search",
+    sensitivity: "base"
+  });
+  let delegate = React.useMemo(() => keyboardDelegate || new useSelectableList.$2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, ref, 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": {
+        var _delegate_getKeyAbove, _delegate_getFirstKey;
+        e.preventDefault();
+        let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
+        if (key) state.setSelectedKey(key);
+        break;
+      }
+      case "ArrowRight": {
+        var _delegate_getKeyBelow, _delegate_getFirstKey1;
+        e.preventDefault();
+        let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
+        if (key) state.setSelectedKey(key);
+        break;
+      }
+    }
+  };
+  let { typeSelectProps } = useSelectableItem.$fb3050f43d946246$export$e32c88dfddc6e1d8({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKey(key);
+    }
+  });
+  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let triggerProps = mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
+  let valueId = mergeProps.$bdb11010cef70236$export$f680877a34711e37();
+  $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
+    isDisabled,
+    isRequired,
+    name,
+    validationBehavior
+  });
+  return {
+    labelProps: __spreadProps(__spreadValues({}, labelProps), {
+      onClick: () => {
+        if (!props.isDisabled) {
+          var _ref_current;
+          (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+          useFocusVisible.$507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
+        }
+      }
+    }),
+    triggerProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, triggerProps), {
+      isDisabled,
+      onKeyDown: mergeProps.$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,
+      linkBehavior: "selection",
+      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,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
+  let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
+  let { autoComplete, name = data.name, isDisabled = data.isDisabled } = props;
+  let { validationBehavior, isRequired } = data;
+  let { visuallyHiddenProps } = VisuallyHidden.$5c3e21d68f1c4674$export$a966af930f325cab();
+  useFormReset.$99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
+  useFormValidation.$e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior,
+    focus: () => {
+      var _triggerRef_current;
+      return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }
+  }, state, props.selectRef);
+  var _state_selectedKey;
+  return {
+    containerProps: __spreadProps(__spreadValues({}, visuallyHiddenProps), {
+      "aria-hidden": true,
+      // @ts-ignore
+      ["data-react-aria-prevent-focus"]: true,
+      // @ts-ignore
+      ["data-a11y-ignore"]: "aria-hidden-focus"
+    }),
+    inputProps: {
+      style: {
+        display: "none"
+      }
+    },
+    selectProps: {
+      tabIndex: -1,
+      autoComplete,
+      disabled: isDisabled,
+      required: validationBehavior === "native" && isRequired,
+      name,
+      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, 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("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 && 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;
+}
+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_hj1d5_5";
+const listboxRoot = "_listboxRoot_hj1d5_10";
+const listbox = "_listbox_hj1d5_10";
+const listboxList = "_listboxList_hj1d5_79";
+const sectionList = "_sectionList_hj1d5_80";
+const optionContent = "_optionContent_hj1d5_86";
+const separator = "_separator_hj1d5_87";
+const option = "_option_hj1d5_86";
+const fieldRoot = "_fieldRoot_hj1d5_130";
+const selectField = "_selectField_hj1d5_151";
+const selectSizeSm = "_selectSizeSm_hj1d5_188";
+const selectSizeLg = "_selectSizeLg_hj1d5_200";
+const selectFieldError = "_selectFieldError_hj1d5_206";
+const selectFieldIconStart = "_selectFieldIconStart_hj1d5_214";
+const selectFieldIconEnd = "_selectFieldIconEnd_hj1d5_218";
+const selectFieldIconContainer = "_selectFieldIconContainer_hj1d5_222";
+const selectFieldText = "_selectFieldText_hj1d5_228";
+const listboxOpen = "_listboxOpen_hj1d5_232";
+const styles = {
+  underlay,
+  listboxRoot,
+  listbox,
+  listboxList,
+  sectionList,
+  optionContent,
+  separator,
+  option,
+  fieldRoot,
+  selectField,
+  selectSizeSm,
+  selectSizeLg,
+  selectFieldError,
+  selectFieldIconStart,
+  selectFieldIconEnd,
+  selectFieldIconContainer,
+  selectFieldText,
+  listboxOpen
+};
+function SelectOption(_props) {
+  return null;
+}
+Object.assign(SelectOption, Item.$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.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"
+  });
+  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 } = useTriggerWidth.$f2f8a6077418541e$export$542a6fd13ac93354({
+    containerPadding: useTriggerWidth.OVERLAY_PADDING_FROM_CONTAINER,
+    maxHeight: useTriggerWidth.ITEM_HEIGHT * useTriggerWidth.DEFAULT_MAX_ITEMS_UNTIL_SCROLL + 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);
+  utilities_useScrollbar.useScrollbar(listBoxRef, "ezui-os-theme-overlay");
+  const style = __spreadValues(__spreadValues({}, popoverProps.style), useTriggerWidth.getUnmergedPopoverStyles(useTriggerWidth.DEFAULT_WIDTH, triggerWidth));
+  return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement("div", __spreadProps(__spreadValues({}, underlayProps), {
+    className: styles.underlay
+  })), React.createElement("div", __spreadProps(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(popoverProps, {
+    style
+  })), {
+    ref: popoverRef,
+    className: styles.listboxRoot
+  }), React.createElement(useTriggerWidth.$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": useTriggerWidth.DEFAULT_MAX_ITEMS_UNTIL_SCROLL,
+    "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(useTriggerWidth.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: selectState.close
+  })));
+}
+exports.$2bc3a590c5373a4e$export$5159ec8b34d4ec12 = $2bc3a590c5373a4e$export$5159ec8b34d4ec12;
+exports.$58aed456727eb0f3$export$e64b2f635402ca43 = $58aed456727eb0f3$export$e64b2f635402ca43;
+exports.$bdd25dc72710631f$export$cbd84cdb2e668835 = $bdd25dc72710631f$export$cbd84cdb2e668835;
+exports.InternalSelectContext = InternalSelectContext;
+exports.SelectOption = SelectOption;
+exports.SelectOverlay = SelectOverlay;
+exports.SelectSection = SelectSection;
+exports.styles = styles;
+exports.useInternalSelectContext = useInternalSelectContext;