@hopper-ui/components 1.0.4 → 1.0.6

package/dist/chunk-J33IFG4U.js

@@ -0,0 +1,46 @@
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { _RichIconAvatarImage } from './chunk-ITQK6JTD.js';
+import { DeletedUserRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalDeletedAvatarCssSelector = "hop-DeletedAvatar";
+function DeletedAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeValue,
+    style,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalDeletedAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      ...otherProps,
+      className: classNames,
+      ref,
+      size,
+      style: mergedStyles,
+      children: /* @__PURE__ */ jsx(DeletedUserRichIcon, {})
+    }
+  );
+}
+var _DeletedAvatar = forwardRef(DeletedAvatar);
+_DeletedAvatar.displayName = "DeletedAvatar";
+
+export { GlobalDeletedAvatarCssSelector, _DeletedAvatar };

package/dist/chunk-J53HGLCT.js

@@ -0,0 +1,49 @@
+import { DividerContext } from './chunk-FYIHMKHI.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Separator } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Divider.module.css#css-module
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___lUCFu", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___uIryJ" };
+var GlobalDividerCssSelector = "hop-Divider";
+function Divider(props, ref) {
+  [props, ref] = useContextProps(props, ref, DividerContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    orientation,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalDividerCssSelector,
+    cssModule(
+      Divider_module_default,
+      "hop-Divider",
+      orientation
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      orientation
+    }
+  );
+}
+var _Divider = forwardRef(Divider);
+_Divider.displayName = "Divider";
+
+export { GlobalDividerCssSelector, _Divider };

package/dist/{chunk-PDYU6DNF.js → chunk-JRDN364E.js}

@@ -1,20 +1,20 @@
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
 import { RadioGroupContext } from './chunk-5MBJWRZD.js';
 import { RadioListContext } from './chunk-A7TZHALP.js';
 import { RadioContext } from './chunk-FU5CCPLP.js';
-import { RadioFieldContext } from './chunk-DGLAGYBD.js';
-import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
-import { HelperMessageContext } from './chunk-ESVVLTEN.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
 import { useContextProps, composeRenderProps, RadioGroup as RadioGroup$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioGroup.module.css#css-module
-var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___BeZQs", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___cZzyV", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___IUAVE", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___-Nt39", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___jqTEX", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___xrMDx", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___g5qwi", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___bXfiF", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___l-UB6" };
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___S6s5y", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___CFrBV", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___2p7Wk", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___eqGjG", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___7-iXB", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___C5N0N", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___k3eYk", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___vOUPq", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___uQgIj" };
 var GlobalRadioGroupCssSelector = "hop-RadioGroup";
 function RadioGroup(props, ref) {
   var _a, _b;

package/dist/chunk-JTNMFPM4.js

@@ -0,0 +1,41 @@
+import { useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useState, useRef, useCallback } from 'react';
+
+// src/ListBox/src/useLoadOnScroll.ts
+function useLoadOnScroll(props, ref) {
+  const { isLoading, onLoadMore, scrollOffset = 5 } = props;
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const isLoadingRef = useRef(isLoading);
+  const prevProps = useRef(props);
+  const onScroll = useCallback(() => {
+    if (ref.current && !isLoadingRef.current && onLoadMore) {
+      const shouldLoadMore = ref.current.scrollHeight - ref.current.scrollTop - ref.current.clientHeight < scrollOffset;
+      if (shouldLoadMore) {
+        isLoadingRef.current = true;
+        onLoadMore();
+      }
+    }
+  }, [onLoadMore, ref, scrollOffset]);
+  const lastContentSize = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    const wasLoading = isLoadingRef.current;
+    if (props !== prevProps.current) {
+      isLoadingRef.current = isLoading;
+      prevProps.current = props;
+    }
+    const shouldLoadMore = !hasLoaded && (ref == null ? void 0 : ref.current) && !isLoadingRef.current && onLoadMore && ref.current.clientHeight === ref.current.scrollHeight && (wasLoading || ref.current.scrollHeight !== lastContentSize.current);
+    if (shouldLoadMore) {
+      isLoadingRef.current = true;
+      onLoadMore == null ? void 0 : onLoadMore();
+      setHasLoaded(true);
+    }
+    lastContentSize.current = ((_a = ref.current) == null ? void 0 : _a.scrollHeight) || 0;
+    return () => {
+      setHasLoaded(false);
+    };
+  }, [isLoading, onLoadMore, props, ref]);
+  return onScroll;
+}
+
+export { useLoadOnScroll };

package/dist/chunk-JUMJ6A3K.js

@@ -0,0 +1,46 @@
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { _RichIconAvatarImage } from './chunk-ITQK6JTD.js';
+import { AnonymousRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalAnonymousAvatarCssSelector = "hop-AnonymousAvatar";
+function AnonymousAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeValue,
+    style,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalAnonymousAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      ...otherProps,
+      className: classNames,
+      ref,
+      size,
+      style: mergedStyles,
+      children: /* @__PURE__ */ jsx(AnonymousRichIcon, {})
+    }
+  );
+}
+var _AnonymousAvatar = forwardRef(AnonymousAvatar);
+_AnonymousAvatar.displayName = "AnonymousAvatar";
+
+export { GlobalAnonymousAvatarCssSelector, _AnonymousAvatar };

package/dist/chunk-JWW56J7M.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/Avatar/src/RichIconAvatarImageContext.ts
+var RichIconAvatarImageContext = createContext({});
+RichIconAvatarImageContext.displayName = "RichIconAvatarImageContext";
+
+export { RichIconAvatarImageContext };

package/dist/{chunk-BCHUEONM.js → chunk-K4ZGI7DJ.js}

@@ -7,7 +7,7 @@ import { useContextProps, Text } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./OverlineText.module.css#css-module
-var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___lA54v", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___Z9gJ6" };
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___a5x6R", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___TV62d" };
 var GlobalOverlineTextCssSelector = "hop-OverlineText";
 function OverlineText(props, ref) {
   [props, ref] = useContextProps(props, ref, OverlineTextContext);

package/dist/chunk-L5A2UTQV.js

@@ -0,0 +1,43 @@
+import { HeaderContext } from './chunk-7JOGKC3W.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Header as Header$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalHeaderCssSelector = "hop-Header";
+function Header(props, ref) {
+  [props, ref] = useContextProps(props, ref, HeaderContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalHeaderCssSelector,
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Header$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot || void 0,
+      children
+    }
+  );
+}
+var _Header = forwardRef(Header);
+_Header.displayName = "Header";
+
+export { GlobalHeaderCssSelector, _Header };

package/dist/{chunk-6MSYEF4W.js → chunk-MED2BIDV.js}

@@ -1,7 +1,7 @@
 import { EmbeddedButtonContext } from './chunk-O7IJYNVQ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -9,7 +9,7 @@ import { useContextProps, composeRenderProps, Button } from 'react-aria-componen
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./EmbeddedButton.module.css#css-module
-var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___OMar5", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___YBpcJ", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___dFa3L", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___QZTts" };
+var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___-vxw3", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___-R-Cb", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___RoLAu", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___JHGDE" };
 var GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
 function EmbeddedButton(props, ref) {
   var _a;

package/dist/{chunk-QJBQRYJS.js → chunk-MVRI6GLQ.js}

@@ -1,6 +1,6 @@
-import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { _Text } from './chunk-RG4JKE4N.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { WarningIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -10,7 +10,7 @@ import { FieldErrorContext, useContextProps } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./ErrorMessage.module.css#css-module
-var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___mRyMK", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___w9R-k" };
+var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___SA3fD", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___cB2Bk" };
 var GlobalErrorMessageCssSelector = "hop-ErrorMessage";
 function ErrorMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-Z3ID4UEE.js → chunk-N77LTZ4U.js}

@@ -1,4 +1,4 @@
-import { Div, getSizingValue } from '@hopper-ui/styled-system';
+import { Div } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -37,19 +37,7 @@ function Grid(props, ref) {
     }
   );
 }
-function repeat(count, repetition) {
-  return `repeat(${count}, ${Array.isArray(repetition) ? interpolateGridTemplateArray(repetition) : getSizingValue(repetition)})`;
-}
-function minmax(min, max) {
-  return `minmax(${getSizingValue(min)}, ${getSizingValue(max)})`;
-}
-function fitContent(dimension) {
-  return `fit-content(${getSizingValue(dimension)})`;
-}
-function interpolateGridTemplateArray(values) {
-  return values.map((x) => getSizingValue(x)).join(" ");
-}
 var _Grid = forwardRef(Grid);
-_Grid.displayName = "Inline";
+_Grid.displayName = "Grid";
 
-export { _Grid, fitContent, minmax, repeat };
+export { _Grid };

package/dist/{chunk-ANVMQBBG.js → chunk-NMKBUGSO.js}

@@ -26,7 +26,18 @@ var HopperProvider = (props, ref) => {
   if (navigate) {
     content = /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children });
   }
-  return /* @__PURE__ */ jsx(StyledSystemProvider, { ref, withBodyStyle, colorScheme, withCssVariables, className: classNames, ...rest, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: content }) });
+  return /* @__PURE__ */ jsx(
+    StyledSystemProvider,
+    {
+      ref,
+      withBodyStyle,
+      colorScheme,
+      withCssVariables,
+      className: classNames,
+      ...rest,
+      children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: content })
+    }
+  );
 };
 var _HopperProvider = forwardRef(HopperProvider);
 _HopperProvider.displayName = "HopperProvider";

package/dist/chunk-NS3XVOQ7.js

@@ -0,0 +1,53 @@
+import { useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useState, useRef, useCallback } from 'react';
+
+// src/Avatar/src/useImageFallback.ts
+function useImageFallback(props) {
+  const { src, fallbackSrc, onError, onLoad } = props;
+  const [status, setStatus] = useState(src ? "loading" : "pending");
+  const [imageUrl, setImageUrl] = useState(src != null ? src : "");
+  const imageRef = useRef();
+  const load = useCallback(() => {
+    if (!src) {
+      return;
+    }
+    flush();
+    const image = new Image();
+    image.src = src;
+    setImageUrl(src);
+    image.onload = (event) => {
+      flush();
+      setStatus("loaded");
+      onLoad == null ? void 0 : onLoad(event);
+    };
+    image.onerror = (event) => {
+      if (src !== fallbackSrc && image.src === src && fallbackSrc) {
+        setImageUrl(fallbackSrc);
+        image.src = fallbackSrc;
+      } else {
+        setStatus("failed");
+        flush();
+      }
+      onError == null ? void 0 : onError(event);
+    };
+    imageRef.current = image;
+  }, [src, onLoad, fallbackSrc, onError]);
+  const flush = () => {
+    if (imageRef.current) {
+      imageRef.current.onload = null;
+      imageRef.current.onerror = null;
+      imageRef.current = null;
+    }
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (status === "loading") {
+      load();
+    }
+    return () => {
+      flush();
+    };
+  }, [status, load]);
+  return { imageUrl, status };
+}
+
+export { useImageFallback };

package/dist/chunk-O5PTD6IN.js

@@ -0,0 +1,41 @@
+import { SectionContext } from './chunk-5H5AZJPQ.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Section as Section$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalSectionCssSelector = "hop-Section";
+function Section(props, ref) {
+  [props, ref] = useContextProps(props, ref, SectionContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalSectionCssSelector,
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Section$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      children
+    }
+  );
+}
+var _Section = forwardRef(Section);
+_Section.displayName = "Section";
+
+export { GlobalSectionCssSelector, _Section };

package/dist/{chunk-5GRWAXTT.js → chunk-OHB5QR5P.js}

@@ -1,6 +1,6 @@
 import { ClearButtonContext } from './chunk-DXVKHP4V.js';
-import { _EmbeddedButton } from './chunk-6MSYEF4W.js';
-import { useLocalizedString } from './chunk-H6CDFWVR.js';
+import { _EmbeddedButton } from './chunk-MED2BIDV.js';
+import { useLocalizedString } from './chunk-ZOTVZM6F.js';
 import { DismissIcon } from '@hopper-ui/icons';
 import { forwardRef } from 'react';
 import { useContextProps } from 'react-aria-components';

package/dist/chunk-OKZYR4RF.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/ListBox/src/ListBoxItemSkeletonContext.ts
+var ListBoxItemSkeletonContext = createContext({});
+ListBoxItemSkeletonContext.displayName = "ListBoxItemSkeletonContext";
+
+export { ListBoxItemSkeletonContext };

package/dist/{chunk-GBABMUAI.js → chunk-P5CWOV3L.js}

@@ -1,5 +1,5 @@
-import { HelperMessageContext } from './chunk-ESVVLTEN.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { _Text } from './chunk-RG4JKE4N.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { InfoIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, FieldErrorContext } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./HelperMessage.module.css#css-module
-var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___VrfVI", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___mVrpO" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___msUnY", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___-GUWj" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-RCFB4SN4.js → chunk-QBCCF2C2.js}

@@ -1,11 +1,11 @@
+import { LinkContext } from './chunk-4VVNSXIB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-RG4JKE4N.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
-import { LinkContext } from './chunk-4VVNSXIB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Link.module.css#css-module
-var Link_module_default = { "hop-Link": "Link-module__hop-Link___aLbeK", "hop-Link--quiet": "Link-module__hop-Link--quiet___7n7m5", "hop-Link--primary": "Link-module__hop-Link--primary___-xcuv", "hop-Link--secondary": "Link-module__hop-Link--secondary___4z2HJ", "hop-Link__icon": "Link-module__hop-Link__icon___Y38KO", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___4UNng", "hop-Link__text": "Link-module__hop-Link__text___RyiFE", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___Z6aUG", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___wmb1h" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___m4HlM", "hop-Link--quiet": "Link-module__hop-Link--quiet___PEKek", "hop-Link--primary": "Link-module__hop-Link--primary___-EqWZ", "hop-Link--secondary": "Link-module__hop-Link--secondary___UNknc", "hop-Link__icon": "Link-module__hop-Link__icon___KiZR6", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___eu2Y4", "hop-Link__text": "Link-module__hop-Link__text___I34XD", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___Klqm6", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___23TDM" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/chunk-RA7PM75O.js

@@ -0,0 +1,142 @@
+import { isFunction } from './chunk-TIPN4VYD.js';
+import { useLoadOnScroll } from './chunk-JTNMFPM4.js';
+import { SectionContext } from './chunk-5H5AZJPQ.js';
+import { ListBoxContext } from './chunk-UIEP5BA5.js';
+import { _ListBoxItem } from './chunk-E4ALW4MZ.js';
+import { useLocalizedString } from './chunk-ZOTVZM6F.js';
+import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HeaderContext } from './chunk-7JOGKC3W.js';
+import { DividerContext } from './chunk-FYIHMKHI.js';
+import { _Text } from './chunk-RG4JKE4N.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./ListBox.module.css#css-module
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___SARwA", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___Imbbr", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___EdImM", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___-dZ1Z", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___F18mO", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___5vc2s" };
+var GlobalListBoxCssSelector = "hop-ListBox";
+var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
+var ListBoxToTextSizeAdapter = {
+  xs: "sm",
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+function ListBox(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, ListBoxContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    disallowEmptySelection: disallowEmptySelectionProp,
+    isFluid: isFluidProp,
+    isInvalid,
+    isLoading,
+    onLoadMore,
+    renderEmptyState,
+    size: sizeProp,
+    style: styleProp,
+    selectionIndicator = "check",
+    selectionMode,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const disallowEmptySelection = disallowEmptySelectionProp != null ? disallowEmptySelectionProp : selectionIndicator === "input" && selectionMode === "single";
+  const stringFormatter = useLocalizedString();
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalListBoxCssSelector,
+    cssModule(
+      ListBox_module_default,
+      "hop-ListBox",
+      size,
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const emptyItemClassNames = clsx(
+    GlobalListBoxEmptyItemCssSelector,
+    cssModule(
+      ListBox_module_default,
+      "hop-ListBox__empty-item",
+      size
+    )
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const onScroll = useLoadOnScroll({ isLoading, onLoadMore }, ref);
+  const renderChildren = () => {
+    if (props.items) {
+      return /* @__PURE__ */ jsx(Collection, { items: props.items, children: (item) => isFunction(children) ? children(item) : children });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  };
+  const handleRenderEmptyState = (renderProps) => {
+    let result = null;
+    if (renderEmptyState && isFunction(renderEmptyState)) {
+      result = renderEmptyState(renderProps);
+      if (result) {
+        return /* @__PURE__ */ jsx(_Text, { className: emptyItemClassNames, size: ListBoxToTextSizeAdapter[size], children: result });
+      }
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [HeaderContext, {
+          className: ListBox_module_default["hop-ListBox__section-header"]
+        }],
+        [SectionContext, {
+          className: ListBox_module_default["hop-ListBox__section"]
+        }],
+        [DividerContext, {
+          className: ListBox_module_default["hop-ListBox__divider"]
+        }],
+        [ListBoxItemContext, {
+          className: ListBox_module_default["hop-ListBox__item"],
+          size,
+          selectionIndicator,
+          isInvalid
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        ListBox$1,
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          disallowEmptySelection,
+          renderEmptyState: handleRenderEmptyState,
+          selectionMode,
+          style,
+          onScroll,
+          "data-loading": isLoading,
+          shouldSelectOnPressUp: true,
+          children: [
+            renderChildren(),
+            isLoading && Array.from({ length: 5 }).map((_, index) => {
+              return /* @__PURE__ */ jsx(_ListBoxItem, { id: `loadingListItem_${index.toString()}`, isLoading, size, textValue: stringFormatter.format("ListBoxItem.loadingTextValue") }, `loadingListItem_${index.toString()}`);
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+var _ListBox = forwardRef(ListBox);
+_ListBox.displayName = "ListBox";
+
+export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox };