@hopper-ui/components 1.5.12 → 1.5.13

package/dist/chunk-ND5XR6RA.js

@@ -0,0 +1,56 @@
+import { _Button } from './chunk-TNLYOFSX.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { CloseButtonContext } from './chunk-RBWFFWIG.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { DismissIcon } from '@hopper-ui/icons';
+import { useStyledSystem } 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';
+
+// css-module:./CloseButton.module.css#css-module
+var CloseButton_module_default = { "hop-CloseButton": "CloseButton-module__hop-CloseButton___3-aWC" };
+var GlobalCloseButtonCssSelector = "hop-CloseButton";
+function CloseButton(props, ref) {
+  [props, ref] = useContextProps(props, ref, CloseButtonContext);
+  const stringFormatter = useLocalizedString();
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    "aria-label": ariaLabel = stringFormatter.format("CloseButton.ariaLabel"),
+    className,
+    style,
+    variant = "ghost-secondary",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalCloseButtonCssSelector,
+    cssModule(
+      CloseButton_module_default,
+      "hop-CloseButton"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    _Button,
+    {
+      className: classNames,
+      style: mergedStyles,
+      ref,
+      "aria-label": ariaLabel,
+      variant,
+      slot: "close",
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(DismissIcon, {})
+    }
+  );
+}
+var _CloseButton = forwardRef(CloseButton);
+_CloseButton.displayName = "CloseButton";
+
+export { GlobalCloseButtonCssSelector, _CloseButton };

package/dist/chunk-NF64YIEZ.js

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

package/dist/chunk-NT7BHGVD.js

@@ -0,0 +1,135 @@
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioGroupContext } from './chunk-5MBJWRZD.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { _Label } from './chunk-SA322LHS.js';
+import { _HelperMessage } from './chunk-HANWII4T.js';
+import { _ErrorMessage } from './chunk-CFXK2ZSA.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.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, RadioGroup as RadioGroup$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./RadioGroup.module.css#css-module
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___mtC5X", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___MDLBk", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___4sqHr", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___F4jMs", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___T3r2m", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___DBceS", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___lp6G-", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___6knL-", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___SN05k" };
+var GlobalRadioGroupCssSelector = "hop-RadioGroup";
+function RadioGroup(props, ref) {
+  var _a, _b, _c;
+  [props, ref] = useContextProps(props, ref, RadioGroupContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { stylingProps: listStylingProps, ...listProps } = useStyledSystem((_a = ownProps.listProps) != null ? _a : {});
+  const {
+    className,
+    children: childrenProp,
+    description,
+    errorMessage,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    label,
+    orientation: orientationProp = "vertical",
+    size: sizeProp = "md",
+    style: styleProp,
+    variant = "borderless",
+    necessityIndicator,
+    ...otherProps
+  } = ownProps;
+  const {
+    className: listClassName,
+    slot: listSlot,
+    style: listStyleProp,
+    ...otherListProps
+  } = listProps;
+  const orientation = (_b = useResponsiveValue(orientationProp)) != null ? _b : "vertical";
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRadioGroupCssSelector,
+    cssModule(
+      RadioGroup_module_default,
+      "hop-RadioGroup",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const listClassNames = clsx(
+    RadioGroup_module_default["hop-RadioGroup__list"],
+    listClassName,
+    listStylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const listStyle = {
+    ...listStylingProps.style,
+    ...listStyleProp
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: listClassNames,
+        slot: listSlot != null ? listSlot : void 0,
+        style: listStyle,
+        ...otherListProps,
+        children: prev
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [RadioContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__radio"],
+          size
+        }],
+        [RadioFieldContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__radio"],
+          size,
+          isDisabled
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        RadioGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          isInvalid,
+          isDisabled,
+          isRequired,
+          orientation,
+          ...otherProps,
+          children: (radioGroupRenderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx(
+              _Label,
+              {
+                className: RadioGroup_module_default["hop-RadioGroup__label"],
+                isRequired,
+                necessityIndicator,
+                children: label
+              }
+            ),
+            children(radioGroupRenderProps),
+            description && /* @__PURE__ */ jsx(_HelperMessage, { className: RadioGroup_module_default["hop-RadioGroup__helper-message"], hideIcon: true, children: description }),
+            /* @__PURE__ */ jsx(_ErrorMessage, { className: RadioGroup_module_default["hop-RadioGroup__error-message"], hideIcon: true, children: errorMessage })
+          ] })
+        }
+      )
+    }
+  );
+}
+var _RadioGroup = forwardRef(RadioGroup);
+_RadioGroup.displayName = "RadioGroup";
+
+export { GlobalRadioGroupCssSelector, _RadioGroup };

package/dist/chunk-NX7YNFUX.js

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

package/dist/chunk-OBWROGLB.js

@@ -0,0 +1,157 @@
+import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
+import { Input } from './chunk-AAMIUZW2.js';
+import { _InputGroup } from './chunk-X7VALEJB.js';
+import { _Label } from './chunk-SA322LHS.js';
+import { _HelperMessage } from './chunk-HANWII4T.js';
+import { _ErrorMessage } from './chunk-CFXK2ZSA.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, NumberField as NumberField$1, Button } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./NumberField.module.css#css-module
+var NumberField_module_default = { "hop-NumberField": "NumberField-module__hop-NumberField___Ff9zj", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___QqCF5", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___LvRyr", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___8T5Pe", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___8Lz4x", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___FNaZk", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___bRVqB", "hop-NumberField__steppers": "NumberField-module__hop-NumberField__steppers___ASAwK", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___Fvs6U", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___FJO9W", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___77v-p", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___ndGIU", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___Qlu09" };
+var GlobalNumberFieldCssSelector = "hop-NumberField";
+var StepperButton = ({ direction }) => {
+  const StepperIcon = direction === "increment" ? AngleUpIcon : AngleDownIcon;
+  const stepperClasses = cssModule(
+    NumberField_module_default,
+    "hop-NumberField__stepper-button",
+    direction
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: stepperClasses,
+      slot: direction,
+      children: /* @__PURE__ */ jsx(
+        StepperIcon,
+        {
+          className: NumberField_module_default["hop-NumberField__stepper-button__icon"],
+          size: {
+            base: "md",
+            xs: "sm"
+          }
+        }
+      )
+    }
+  );
+};
+function NumberField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, NumberFieldContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    onChange: onChangeProp,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    necessityIndicator,
+    inputGroupProps,
+    label,
+    description,
+    errorMessage,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalNumberFieldCssSelector,
+    cssModule(
+      NumberField_module_default,
+      "hop-NumberField",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  const [value, onChange] = useControlledState(valueProp, defaultValue || 0, handleTextChanged);
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }],
+        [IconContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }]
+      ],
+      children: ensureTextWrapper(prefix)
+    }
+  ) : null;
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(NumberField_module_default["hop-NumberField__InputGroup"], inputGroupClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      className: inputGroupClassNames,
+      isDisabled,
+      isInvalid,
+      ...otherInputGroupProps,
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, className: NumberField_module_default["hop-NumberField__input"], size }),
+        /* @__PURE__ */ jsxs("div", { className: NumberField_module_default["hop-NumberField__steppers"], children: [
+          /* @__PURE__ */ jsx(StepperButton, { direction: "increment" }),
+          /* @__PURE__ */ jsx(StepperButton, { direction: "decrement" })
+        ] })
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: NumberField_module_default["hop-NumberField__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: NumberField_module_default["hop-NumberField__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: NumberField_module_default["hop-NumberField__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    NumberField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _NumberField = forwardRef(NumberField);
+_NumberField.displayName = "NumberField";
+
+export { GlobalNumberFieldCssSelector, _NumberField };

package/dist/chunk-OKYRSI6N.js

@@ -0,0 +1,52 @@
+import { ListBoxItemSkeletonContext } from './chunk-D4HRZVZO.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 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./ListBoxItemSkeleton.module.css#css-module
+var ListBoxItemSkeleton_module_default = { "hop-ListBoxItemSkeleton": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___OdAFV", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___JlGxB", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___dw1fE", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___0-zW7", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___OI8lR", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___LU1MW" };
+var GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
+function ListBoxItemSkeleton(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, ListBoxItemSkeletonContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeProp,
+    style: styleProp,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
+  const classNames = clsx(
+    className,
+    GlobalListBoxItemSkeletonCssSelector,
+    cssModule(
+      ListBoxItemSkeleton_module_default,
+      "hop-ListBoxItemSkeleton",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames,
+      style,
+      slot: slot != null ? slot : void 0,
+      ...otherProps
+    }
+  );
+}
+var _ListBoxItemSkeleton = forwardRef(ListBoxItemSkeleton);
+_ListBoxItemSkeleton.displayName = "ListBoxItemSkeleton";
+
+export { GlobalListBoxItemSkeletonCssSelector, _ListBoxItemSkeleton };

package/dist/chunk-OLY4PH6S.js

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

package/dist/chunk-ONWB6QY6.js

@@ -0,0 +1,153 @@
+import { isFunction } from './chunk-TIPN4VYD.js';
+import { ListBoxContext } from './chunk-4HEOTMP7.js';
+import { _ListBoxItem } from './chunk-MSIFNLMK.js';
+import { ListBoxItemContext } from './chunk-FDJDFE4U.js';
+import { ListBoxSectionContext } from './chunk-MOZ6M5ZZ.js';
+import { HeaderContext } from './chunk-FOQ7KN4V.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { useLoadMore } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./ListBox.module.css#css-module
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___-rt0w", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___MV-lu", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___cHWaO", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___LTGuz", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___n0tC4" };
+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 = "single",
+    loadingListBoxItemProps,
+    ...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
+    };
+  });
+  useLoadMore({ isLoading, onLoadMore }, ref);
+  const renderChildren = () => {
+    if (props.items) {
+      return /* @__PURE__ */ jsx(Collection, { items: props.items, children: (item) => isFunction(children) ? children(item) : children });
+    }
+    if (isFunction(children)) {
+      console.warn("ListBox: Children should not be a function when items are not provided.");
+      return null;
+    }
+    return children;
+  };
+  const handleRenderEmptyState = (renderProps) => {
+    let result = null;
+    if (renderEmptyState && isFunction(renderEmptyState)) {
+      result = renderEmptyState(renderProps);
+      if (result) {
+        return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__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"]
+        }],
+        [ListBoxSectionContext, {
+          className: ListBox_module_default["hop-ListBox__section"]
+        }],
+        [ListBoxItemContext, {
+          className: ListBox_module_default["hop-ListBox__item"],
+          size,
+          selectionIndicator,
+          isInvalid
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        ListBox$1,
+        {
+          ref,
+          className: classNames,
+          disallowEmptySelection,
+          renderEmptyState: handleRenderEmptyState,
+          selectionMode,
+          style,
+          "data-loading": isLoading,
+          shouldSelectOnPressUp: true,
+          ...otherProps,
+          children: [
+            renderChildren(),
+            isLoading && Array.from({ length: 5 }).map((_, index) => {
+              return /* @__PURE__ */ jsx(
+                _ListBoxItem,
+                {
+                  id: `loadingListItem_${index.toString()}`,
+                  isLoading,
+                  size,
+                  textValue: stringFormatter.format("ListBoxItem.loadingTextValue"),
+                  ...loadingListBoxItemProps
+                },
+                `loadingListItem_${index.toString()}`
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+var _ListBox = forwardRef(ListBox);
+_ListBox.displayName = "ListBox";
+
+export { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox };

package/dist/chunk-OXQZEGVN.js

@@ -0,0 +1,46 @@
+import { TabPanelContext } from './chunk-ZXON3BAA.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./TabPanel.module.css#css-module
+var TabPanel_module_default = { "hop-TabPanel": "TabPanel-module__hop-TabPanel___Pi4M5" };
+var GlobalTabPanelCssSelector = "hop-TabPanel";
+function TabPanel(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTabPanelCssSelector,
+    cssModule(
+      TabPanel_module_default,
+      "hop-TabPanel"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    TabPanel$1,
+    {
+      ref,
+      style: mergedStyles,
+      className: classNames,
+      ...otherProps
+    }
+  );
+}
+var _TabPanel = forwardRef(TabPanel);
+_TabPanel.displayName = "TabPanel";
+
+export { GlobalTabPanelCssSelector, _TabPanel };

package/dist/chunk-PA5BIB6Z.js

@@ -0,0 +1,6 @@
+import { DialogTrigger } from 'react-aria-components';
+
+// src/modal/src/ModalTrigger.tsx
+var ModalTrigger = DialogTrigger;
+
+export { ModalTrigger };