@astroapps/aria-base 1.5.1 → 1.6.1

package/lib/index.js

@@ -1,13 +1,9 @@
-var reactAriaComponents = require('react-aria-components');
-var React = require('react');
-var reactAria = require('react-aria');
-var tailwindVariants = require('tailwind-variants');
-var reactStately = require('react-stately');
-var tailwindMerge = require('tailwind-merge');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+import { Button as Button$1, composeRenderProps, Popover as Popover$1, OverlayArrow, Label as Label$1, Text, FieldError as FieldError$1, Group, Input as Input$1, ListBoxItem, ListBoxSection, Header, Collection, Select as Select$1, SelectValue, ListBox } from 'react-aria-components';
+import React, { useRef } from 'react';
+import { useDialog, useModalOverlay, Overlay, useOverlayTrigger } from 'react-aria';
+import { tv } from 'tailwind-variants';
+import { useOverlayTriggerState } from 'react-stately';
+import { twMerge } from 'tailwind-merge';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -28,261 +24,266 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var _excluded$4 = ["children", "className"];
+const _excluded$4 = ["children", "className"];
 function Button(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
+  let {
+      children,
+      className
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Button, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Button$1, _extends({}, props, {
     className: className
-  }), reactAriaComponents.composeRenderProps(children, function (children, _ref2) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
-  }));
+  }), composeRenderProps(children, (children, {
+    isPending
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, children)));
 }
 
-var _excluded$3 = ["title", "children"];
-var DefaultDialogClasses = {};
+const _excluded$3 = ["title", "children"];
+const DefaultDialogClasses = {};
 function Dialog(_ref) {
-  var title = _ref.title,
-    children = _ref.children,
+  let {
+      title,
+      children
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var ref = React.useRef(null);
-  var _DefaultDialogClasses = _extends({}, DefaultDialogClasses, props),
-    className = _DefaultDialogClasses.className,
-    titleClass = _DefaultDialogClasses.titleClass;
-  var _useDialog = reactAria.useDialog(props, ref),
-    dialogProps = _useDialog.dialogProps,
-    titleProps = _useDialog.titleProps;
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, dialogProps, {
+  let ref = useRef(null);
+  const {
+    className,
+    titleClass
+  } = _extends({}, DefaultDialogClasses, props);
+  let {
+    dialogProps,
+    titleProps
+  } = useDialog(props, ref);
+  return /*#__PURE__*/React.createElement("div", _extends({}, dialogProps, {
     ref: ref,
     className: className
-  }), title && /*#__PURE__*/React__default["default"].createElement("h3", _extends({}, titleProps, {
+  }), title && /*#__PURE__*/React.createElement("h3", _extends({}, titleProps, {
     className: titleClass
   }), title), children);
 }
 
-var _excluded$2 = ["children", "showArrow", "className"];
-var styles$1 = tailwindVariants.tv({
+const _excluded$2 = ["children", "showArrow", "className"];
+const styles$1 = tv({
   base: "font-sans bg-white forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-black/10 text-neutral-700 outline-0",
   variants: {
     isEntering: {
-      "true": "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200"
+      true: "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200"
     },
     isExiting: {
-      "true": "animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150"
+      true: "animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150"
     }
   }
 });
 function Popover(_ref) {
-  var children = _ref.children,
-    showArrow = _ref.showArrow,
-    className = _ref.className,
+  let {
+      children,
+      showArrow,
+      className
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var offset = showArrow ? 12 : 8;
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Popover, _extends({
+  let offset = showArrow ? 12 : 8;
+  return /*#__PURE__*/React.createElement(Popover$1, _extends({
     offset: offset
   }, props, {
-    className: reactAriaComponents.composeRenderProps(className, function (className, renderProps) {
-      return styles$1(_extends({}, renderProps, {
-        className: className
-      }));
-    })
-  }), showArrow && /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.OverlayArrow, {
+    className: composeRenderProps(className, (className, renderProps) => styles$1(_extends({}, renderProps, {
+      className
+    })))
+  }), showArrow && /*#__PURE__*/React.createElement(OverlayArrow, {
     className: "group"
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     className: "block fill-white forced-colors:fill-[Canvas] stroke-1 stroke-black/10 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     d: "M0 0 L6 6 L12 0"
   }))), children);
 }
-var DefaultPopoverClasses = {
+const DefaultPopoverClasses = {
   underlayClass: "fixed inset-0",
   popoverClass: "bg-white"
 };
 function createOverlayState(ref) {
   return {
     isOpen: ref.value,
-    setOpen: function setOpen(o) {
-      return ref.value = o;
-    },
-    open: function open() {
-      return ref.value = true;
-    },
-    close: function close() {
-      return ref.value = false;
-    },
-    toggle: function toggle() {
-      return ref.value = !ref.value;
-    }
+    setOpen: o => ref.value = o,
+    open: () => ref.value = true,
+    close: () => ref.value = false,
+    toggle: () => ref.value = !ref.value
   };
 }
 
-var _excluded$1 = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside", "portalContainer"],
+const _excluded$1 = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside", "portalContainer"],
   _excluded2 = ["trigger", "children"],
   _excluded3 = ["onPress"],
   _excluded4 = ["children", "footer", "defaultOpen", "isDismissable", "titleClass"];
-var DefaultModalDialogClasses = {
+const DefaultModalDialogClasses = {
   underlayClass: "fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]",
   containerClass: "relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm"
 };
 function Modal(_ref) {
-  var state = _ref.state,
-    children = _ref.children,
-    isDismissable = _ref.isDismissable,
-    isKeyboardDismissDisabled = _ref.isKeyboardDismissDisabled,
-    shouldCloseOnInteractOutside = _ref.shouldCloseOnInteractOutside,
-    portalContainer = _ref.portalContainer,
+  let {
+      state,
+      children,
+      isDismissable,
+      isKeyboardDismissDisabled,
+      shouldCloseOnInteractOutside,
+      portalContainer
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var ref = React__default["default"].useRef(null);
-  var _useModalOverlay = reactAria.useModalOverlay({
-      isDismissable: isDismissable,
-      isKeyboardDismissDisabled: isKeyboardDismissDisabled,
-      shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
-    }, state, ref),
-    modalProps = _useModalOverlay.modalProps,
-    underlayProps = _useModalOverlay.underlayProps;
-  var _DefaultModalDialogCl = _extends({}, DefaultModalDialogClasses, props),
-    underlayClass = _DefaultModalDialogCl.underlayClass,
-    containerClass = _DefaultModalDialogCl.containerClass;
-  return /*#__PURE__*/React__default["default"].createElement(reactAria.Overlay, {
+  let ref = React.useRef(null);
+  let {
+    modalProps,
+    underlayProps
+  } = useModalOverlay({
+    isDismissable,
+    isKeyboardDismissDisabled,
+    shouldCloseOnInteractOutside
+  }, state, ref);
+  const {
+    underlayClass,
+    containerClass
+  } = _extends({}, DefaultModalDialogClasses, props);
+  return /*#__PURE__*/React.createElement(Overlay, {
     portalContainer: portalContainer
-  }, /*#__PURE__*/React__default["default"].createElement("div", _extends({
+  }, /*#__PURE__*/React.createElement("div", _extends({
     className: underlayClass
-  }, underlayProps), /*#__PURE__*/React__default["default"].createElement("div", _extends({}, modalProps, {
+  }, underlayProps), /*#__PURE__*/React.createElement("div", _extends({}, modalProps, {
     ref: ref,
     className: containerClass
   }), children)));
 }
 function ModalTrigger(_ref2) {
-  var trigger = _ref2.trigger,
-    children = _ref2.children,
+  let {
+      trigger,
+      children
+    } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var state = reactStately.useOverlayTriggerState(_extends({}, props));
-  var _useOverlayTrigger = reactAria.useOverlayTrigger({
-      type: "dialog"
-    }, state),
-    triggerProps = _useOverlayTrigger.triggerProps,
-    overlayProps = _useOverlayTrigger.overlayProps;
-  var onPress = triggerProps.onPress,
+  let state = useOverlayTriggerState(_extends({}, props));
+  let {
+    triggerProps,
+    overlayProps
+  } = useOverlayTrigger({
+    type: "dialog"
+  }, state);
+  const {
+      onPress
+    } = triggerProps,
     otherTriggerProps = _objectWithoutPropertiesLoose(triggerProps, _excluded3);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "// TODO: react-19", React__default["default"].cloneElement(trigger, _extends({}, otherTriggerProps, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, "// TODO: react-19", React.cloneElement(trigger, _extends({}, otherTriggerProps, {
     onClick: onPress
-  })), state.isOpen && /*#__PURE__*/React__default["default"].createElement(Modal, _extends({
+  })), state.isOpen && /*#__PURE__*/React.createElement(Modal, _extends({
     state: state
-  }, props), React__default["default"].cloneElement(children, overlayProps)));
+  }, props), React.cloneElement(children, overlayProps)));
 }
 function ModalDialog(_ref3) {
-  var children = _ref3.children,
-    footer = _ref3.footer,
-    _ref3$defaultOpen = _ref3.defaultOpen,
-    defaultOpen = _ref3$defaultOpen === void 0 ? false : _ref3$defaultOpen,
-    _ref3$isDismissable = _ref3.isDismissable,
-    isDismissable = _ref3$isDismissable === void 0 ? true : _ref3$isDismissable,
+  let {
+      children,
+      footer,
+      defaultOpen = false,
+      isDismissable = true,
+      titleClass = "text-2xl font-bold"
+    } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
-  var _DefaultModalDialogCl2 = _extends({}, DefaultModalDialogClasses, props),
-    className = _DefaultModalDialogCl2.className;
-  return /*#__PURE__*/React__default["default"].createElement(ModalTrigger, _extends({
+  const {
+    className
+  } = _extends({}, DefaultModalDialogClasses, props);
+  return /*#__PURE__*/React.createElement(ModalTrigger, _extends({
     defaultOpen: defaultOpen,
     isDismissable: isDismissable
-  }, props), /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({
+  }, props), /*#__PURE__*/React.createElement(Dialog, _extends({
     className: className
   }, props), children, footer));
 }
 
-var focusRing = tailwindVariants.tv({
+const focusRing = tv({
   base: "outline outline-secondary-600 forced-colors:outline-[Highlight] outline-offset-2",
   variants: {
     isFocusVisible: {
-      "false": "outline-0",
-      "true": "outline-2"
+      false: "outline-0",
+      true: "outline-2"
     }
   }
 });
 function composeTailwindRenderProps(className, tw) {
-  return reactAriaComponents.composeRenderProps(className, function (className) {
-    return tailwindMerge.twMerge(tw, className);
-  });
+  return composeRenderProps(className, className => twMerge(tw, className));
 }
 
 function Label(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Label, _extends({}, props, {
-    className: tailwindMerge.twMerge("font-sans text-sm text-neutral-600 font-medium cursor-default w-fit", props.className)
+  return /*#__PURE__*/React.createElement(Label$1, _extends({}, props, {
+    className: twMerge("font-sans text-sm text-neutral-600 font-medium cursor-default w-fit", props.className)
   }));
 }
 function Description(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Text, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Text, _extends({}, props, {
     slot: "description",
-    className: tailwindMerge.twMerge("text-sm text-neutral-600", props.className)
+    className: twMerge("text-sm text-neutral-600", props.className)
   }));
 }
 function FieldError(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.FieldError, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(FieldError$1, _extends({}, props, {
     className: composeTailwindRenderProps(props.className, "text-sm text-red-600 forced-colors:text-[Mark]")
   }));
 }
-var fieldBorderStyles = tailwindVariants.tv({
+const fieldBorderStyles = tv({
   base: "transition",
   variants: {
     isFocusWithin: {
-      "false": "border-neutral-300 hover:border-neutral-400 forced-colors:border-[ButtonBorder]",
-      "true": "border-neutral-600 forced-colors:border-[Highlight]"
+      false: "border-neutral-300 hover:border-neutral-400 forced-colors:border-[ButtonBorder]",
+      true: "border-neutral-600 forced-colors:border-[Highlight]"
     },
     isInvalid: {
-      "true": "border-red-600 forced-colors:border-[Mark]"
+      true: "border-red-600 forced-colors:border-[Mark]"
     },
     isDisabled: {
-      "true": "border-neutral-200 forced-colors:border-[GrayText]"
+      true: "border-neutral-200 forced-colors:border-[GrayText]"
     }
   }
 });
-var fieldGroupStyles = tailwindVariants.tv({
+const fieldGroupStyles = tv({
   extend: focusRing,
   base: "group flex items-center h-9 box-border bg-white forced-colors:bg-[Field] border rounded-lg overflow-hidden transition",
   variants: fieldBorderStyles.variants
 });
 function FieldGroup(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Group, _extends({}, props, {
-    className: reactAriaComponents.composeRenderProps(props.className, function (className, renderProps) {
-      return fieldGroupStyles(_extends({}, renderProps, {
-        className: className
-      }));
-    })
+  return /*#__PURE__*/React.createElement(Group, _extends({}, props, {
+    className: composeRenderProps(props.className, (className, renderProps) => fieldGroupStyles(_extends({}, renderProps, {
+      className
+    })))
   }));
 }
 function Input(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
     className: composeTailwindRenderProps(props.className, "px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white font-sans text-sm text-neutral-800 placeholder:text-neutral-600 disabled:text-neutral-200 disabled:placeholder:text-neutral-200 [-webkit-tap-highlight-color:transparent]")
   }));
 }
 
-tailwindVariants.tv({
+tv({
   extend: focusRing,
   base: "group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none",
   variants: {
     isSelected: {
-      "false": "text-neutral-700 hover:bg-neutral-100 pressed:bg-neutral-100 -outline-offset-2",
-      "true": "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white forced-colors:outline-[HighlightText]"
+      false: "text-neutral-700 hover:bg-neutral-100 pressed:bg-neutral-100 -outline-offset-2",
+      true: "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white forced-colors:outline-[HighlightText]"
     },
     isDisabled: {
-      "true": "text-neutral-300 forced-colors:text-[GrayText]"
+      true: "text-neutral-300 forced-colors:text-[GrayText]"
     }
   }
 });
-var dropdownItemStyles = tailwindVariants.tv({
+const dropdownItemStyles = tv({
   base: "group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]",
   variants: {
     isDisabled: {
-      "false": "text-neutral-900",
-      "true": "text-neutral-300 forced-colors:text-[GrayText]"
+      false: "text-neutral-900",
+      true: "text-neutral-300 forced-colors:text-[GrayText]"
     },
     isPressed: {
-      "true": "bg-neutral-100"
+      true: "bg-neutral-100"
     },
     isFocused: {
-      "true": "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+      true: "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
     }
   },
   compoundVariants: [{
@@ -292,96 +293,75 @@ var dropdownItemStyles = tailwindVariants.tv({
   }]
 });
 function DropdownItem(props) {
-  var textValue = props.textValue || (typeof props.children === "string" ? props.children : undefined);
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBoxItem, _extends({}, props, {
+  let textValue = props.textValue || (typeof props.children === "string" ? props.children : undefined);
+  return /*#__PURE__*/React.createElement(ListBoxItem, _extends({}, props, {
     textValue: textValue,
     className: dropdownItemStyles
-  }), reactAriaComponents.composeRenderProps(props.children, function (children, _ref2) {
-    var isSelected = _ref2.isSelected;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold"
-    }, children), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "flex items-center w-5"
-    }, isSelected && /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "w-4 h-4 fa fa-check"
-    })));
-  }));
+  }), composeRenderProps(props.children, (children, {
+    isSelected
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold"
+  }, children), /*#__PURE__*/React.createElement("span", {
+    className: "flex items-center w-5"
+  }, isSelected && /*#__PURE__*/React.createElement("i", {
+    className: "w-4 h-4 fa fa-check"
+  })))));
 }
 function DropdownSection(props) {
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBoxSection, {
+  return /*#__PURE__*/React.createElement(ListBoxSection, {
     className: "first:-mt-[5px] after:content-[''] after:block after:h-[5px] last:after:hidden"
-  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Header, {
+  }, /*#__PURE__*/React.createElement(Header, {
     className: "text-sm font-semibold text-neutral-500 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-neutral-100/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 border-y border-y-neutral-200 [&+*]:mt-1"
-  }, props.title), /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Collection, {
+  }, props.title), /*#__PURE__*/React.createElement(Collection, {
     items: props.items
   }, props.children));
 }
 
-var _excluded = ["label", "description", "errorMessage", "children", "items"];
-var styles = tailwindVariants.tv({
+const _excluded = ["label", "description", "errorMessage", "children", "items"];
+const styles = tv({
   extend: focusRing,
   base: "flex items-center text-start gap-4 w-full font-sans border border-black/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[72px] transition bg-neutral-50 [-webkit-tap-highlight-color:transparent]",
   variants: {
     isDisabled: {
-      "false": "text-neutral-800 hover:bg-neutral-100 pressed:bg-neutral-200 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]",
-      "true": "border-transparent text-neutral-200 forced-colors:text-[GrayText] bg-neutral-100"
+      false: "text-neutral-800 hover:bg-neutral-100 pressed:bg-neutral-200 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]",
+      true: "border-transparent text-neutral-200 forced-colors:text-[GrayText] bg-neutral-100"
     }
   }
 });
 function Select(_ref) {
-  var label = _ref.label,
-    description = _ref.description,
-    errorMessage = _ref.errorMessage,
-    children = _ref.children,
-    items = _ref.items,
+  let {
+      label,
+      description,
+      errorMessage,
+      children,
+      items
+    } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Select, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Select$1, _extends({}, props, {
     className: composeTailwindRenderProps(props.className, "group flex flex-col gap-1 relative font-sans")
-  }), label && /*#__PURE__*/React__default["default"].createElement(Label, null, label), /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.Button, {
+  }), label && /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(Button$1, {
     className: styles
-  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.SelectValue, {
+  }, /*#__PURE__*/React.createElement(SelectValue, {
     className: "flex-1 text-sm text-nowrap"
-  }, function (_ref2) {
-    var selectedText = _ref2.selectedText,
-      defaultChildren = _ref2.defaultChildren;
-    return selectedText || defaultChildren;
-  }), /*#__PURE__*/React__default["default"].createElement("i", {
+  }, ({
+    selectedText,
+    defaultChildren
+  }) => selectedText || defaultChildren), /*#__PURE__*/React.createElement("i", {
     "aria-hidden": true,
     className: "w-4 h-4 fa fa-chevron-down text-neutral-600 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 forced-colors:group-disabled:text-[GrayText]"
-  })), description && /*#__PURE__*/React__default["default"].createElement(Description, null, description), /*#__PURE__*/React__default["default"].createElement(FieldError, null, errorMessage), /*#__PURE__*/React__default["default"].createElement(Popover, {
+  })), description && /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(FieldError, null, errorMessage), /*#__PURE__*/React.createElement(Popover, {
     className: "min-w-(--trigger-width)"
-  }, /*#__PURE__*/React__default["default"].createElement(reactAriaComponents.ListBox, {
+  }, /*#__PURE__*/React.createElement(ListBox, {
     items: items,
-    className: "outline-hidden box-border p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"
+    className: "outline-hidden box-border p-1 max-h-96 overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"
   }, children)));
 }
 function SelectItem(props) {
-  return /*#__PURE__*/React__default["default"].createElement(DropdownItem, props);
+  return /*#__PURE__*/React.createElement(DropdownItem, props);
 }
 function SelectSection(props) {
-  return /*#__PURE__*/React__default["default"].createElement(DropdownSection, props);
+  return /*#__PURE__*/React.createElement(DropdownSection, props);
 }
 
-exports.Button = Button;
-exports.DefaultDialogClasses = DefaultDialogClasses;
-exports.DefaultModalDialogClasses = DefaultModalDialogClasses;
-exports.DefaultPopoverClasses = DefaultPopoverClasses;
-exports.Description = Description;
-exports.Dialog = Dialog;
-exports.FieldError = FieldError;
-exports.FieldGroup = FieldGroup;
-exports.Input = Input;
-exports.Label = Label;
-exports.Modal = Modal;
-exports.ModalDialog = ModalDialog;
-exports.ModalTrigger = ModalTrigger;
-exports.Popover = Popover;
-exports.Select = Select;
-exports.SelectItem = SelectItem;
-exports.SelectSection = SelectSection;
-exports.composeTailwindRenderProps = composeTailwindRenderProps;
-exports.createOverlayState = createOverlayState;
-exports.fieldBorderStyles = fieldBorderStyles;
-exports.fieldGroupStyles = fieldGroupStyles;
-exports.focusRing = focusRing;
+export { Button, DefaultDialogClasses, DefaultModalDialogClasses, DefaultPopoverClasses, Description, Dialog, FieldError, FieldGroup, Input, Label, Modal, ModalDialog, ModalTrigger, Popover, Select, SelectItem, SelectSection, composeTailwindRenderProps, createOverlayState, fieldBorderStyles, fieldGroupStyles, focusRing };
 //# sourceMappingURL=index.js.map