@hopper-ui/components 1.3.12 → 1.3.14

package/dist/{chunk-JSDCGGLX.js → chunk-SG2POHLX.js}

@@ -1,11 +1,10 @@
-import { _DecorativeRadio } from './chunk-LTCSPHF7.js';
-import { _DecorativeCheckbox } from './chunk-F3Y5D5LH.js';
+import { _DecorativeRadio } from './chunk-FXHZXIPR.js';
+import { _DecorativeCheckbox } from './chunk-LFFRDNDM.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import { _ListBoxItemSkeleton } from './chunk-RUASAI7F.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _ListBoxItemSkeleton } from './chunk-K2DSUPKO.js';
+import { EnsureTextWrapper } from './chunk-P2OSN32C.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -13,12 +12,13 @@ import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { CheckmarkIcon, IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
 import { forwardRef, useContext, useState } from 'react';
 import { useContextProps, composeRenderProps, ListBoxItem as ListBoxItem$1, ListStateContext, DEFAULT_SLOT } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./ListBoxItem.module.css#css-module
-var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___FsGx6", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___1rcka", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___GmXiF", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___ShKUC", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___ZPvS0", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___C4FSb", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___26r9S", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___Hw-0w", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___YeAKh", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___UUg42", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___e7swH", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___N3a4N", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___3u6me", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___9EHSW", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___RPjwT", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___t2-Lp", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___quHvk" };
+var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___BA-7R", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___C7Icn", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___TCnwR", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___R05Ea", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___c9-GC", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___uFWb9", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___-5xEw", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___a-dI7", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___omKcd", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___TO3I1", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___97rej", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___YAyJ7", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___yygp0", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___zpmIx", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___LQiWw", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___1LSWJ", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___pdbFt" };
 var GlobalListBoxItemCssSelector = "hop-ListBoxItem";
 var ListBoxItemToIconSizeAdapter = {
   xs: "sm",
@@ -50,7 +50,9 @@ function ListBoxItemInner(props) {
     selectionIndicator,
     isInvalid,
     size,
-    children
+    children,
+    radioProps,
+    checkboxProps
   } = props;
   const isRadio = selectionIndicator === "input" && selectionMode === "single";
   const isCheckbox = selectionIndicator === "input" && selectionMode === "multiple";
@@ -62,6 +64,10 @@ function ListBoxItemInner(props) {
       setIsListHasSelectionEnd((prev) => isListHasSelection && !prev);
     }
   };
+  const { className: radioClassName, ...otherRadioProps } = radioProps || {};
+  const radioClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__radio"], radioClassName);
+  const { className: checkboxClassName, ...otherCheckboxProps } = checkboxProps || {};
+  const checkboxClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__checkbox"], checkboxClassName);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -73,14 +79,15 @@ function ListBoxItemInner(props) {
         isRadio && /* @__PURE__ */ jsx(
           _DecorativeRadio,
           {
-            className: ListBoxItem_module_default["hop-ListBoxItem__radio"],
+            className: radioClassNames,
             value: "radio",
             size: "sm",
             isDisabled,
             isHovered: isHovered || isFocusVisible,
             isPressed,
             isSelected,
-            isInvalid
+            isInvalid,
+            ...otherRadioProps
           }
         ),
         isCheckbox && /* @__PURE__ */ jsx(
@@ -88,12 +95,13 @@ function ListBoxItemInner(props) {
           {
             size: "sm",
             value: "checkbox",
-            className: ListBoxItem_module_default["hop-ListBoxItem__checkbox"],
+            className: checkboxClassNames,
             isDisabled,
             isHovered: isHovered || isFocusVisible,
             isPressed,
             isSelected,
-            isInvalid
+            isInvalid,
+            ...otherCheckboxProps
           }
         ),
         isCheck && /* @__PURE__ */ jsx(CheckmarkIcon, { className: ListBoxItem_module_default["hop-ListBoxItem__checkmark"], size: "sm" }),
@@ -198,10 +206,7 @@ function ListBoxItem(props, ref) {
     };
   });
   const children = composeRenderProps(childrenProp, (prev) => {
-    if (prev && isTextOnlyChildren(prev)) {
-      return /* @__PURE__ */ jsx(_Text, { slot: "label", children: prev });
-    }
-    return prev;
+    return /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prev });
   });
   return /* @__PURE__ */ jsx(
     ListBoxItem$1,
@@ -218,19 +223,13 @@ function ListBoxItem(props, ref) {
       "aria-live": isLoading ? "polite" : void 0,
       children: (listBoxItemProps) => {
         if (isLoading) {
-          return /* @__PURE__ */ jsx(
-            "div",
+          return /* @__PURE__ */ jsx("div", { className: ListBoxItem_module_default["hop-ListBoxItem__inner"], children: /* @__PURE__ */ jsx(
+            _ListBoxItemSkeleton,
             {
-              className: ListBoxItem_module_default["hop-ListBoxItem__inner"],
-              children: /* @__PURE__ */ jsx(
-                _ListBoxItemSkeleton,
-                {
-                  size,
-                  slot: "label"
-                }
-              )
+              size,
+              slot: "label"
             }
-          );
+          ) });
         }
         return /* @__PURE__ */ jsx(
           ListBoxItemInner,

package/dist/{chunk-OARY66QV.js → chunk-TH46DMKQ.js}

@@ -1,7 +1,6 @@
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { EnsureTextWrapper } from './chunk-P2OSN32C.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { LinkContext } from './chunk-4VVNSXIB.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -13,7 +12,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___sK0-O", "hop-Link--quiet": "Link-module__hop-Link--quiet___rc7Ur", "hop-Link--primary": "Link-module__hop-Link--primary___HzaUY", "hop-Link--secondary": "Link-module__hop-Link--secondary___uws2M", "hop-Link__icon": "Link-module__hop-Link__icon___Cg5ew", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___nFXJm", "hop-Link__text": "Link-module__hop-Link__text___p-N4R", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___759bI", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___xuvYI" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___8cuBO", "hop-Link--quiet": "Link-module__hop-Link--quiet___O88Ej", "hop-Link--primary": "Link-module__hop-Link--primary___u37Nx", "hop-Link--secondary": "Link-module__hop-Link--secondary___IZGTp", "hop-Link__icon": "Link-module__hop-Link__icon___8wzYi", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___-s6DD", "hop-Link__text": "Link-module__hop-Link__text___HheeC", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___ocWgK", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___pv0Pp" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,
@@ -60,10 +59,7 @@ function Link(props, ref) {
     };
   });
   const children = composeRenderProps(childrenProp, (prev) => {
-    if (prev && isTextOnlyChildren(prev)) {
-      return /* @__PURE__ */ jsx(_Text, { children: prev });
-    }
-    return prev;
+    return /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prev });
   });
   const iconSize = LinkToIconSizeAdapter[size];
   return /* @__PURE__ */ jsx(

package/dist/{chunk-DIRREIZN.js → chunk-USP2ITRL.js}

@@ -8,7 +8,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./IconList.module.css#css-module
-var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___-7k4I" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___Vdc-e" };
 var GlobalIconListCssSelector = "hop-IconList";
 function IconList(props, ref) {
   [props, ref] = useContextProps(props, ref, IconListContext);

package/dist/{chunk-TYCTG7I2.js → chunk-VVVDQWQ3.js}

@@ -1,11 +1,10 @@
 import { useScale } from './chunk-MTDFS4CZ.js';
 import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
-import { _InputGroup } from './chunk-24KHRRRV.js';
+import { _InputGroup } from './chunk-FRVE3N27.js';
+import { EnsureTextWrapper } from './chunk-P2OSN32C.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -15,13 +14,14 @@ 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, Input, 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___3lW40", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___tqZ-J", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___uFkI1", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___UtAol", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___H2dCE", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___fuxBX", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___fKi4m", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___TppEK", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___NoU6e", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___tgIiy", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___KfLhx", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___xP-ip", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___ZxYch", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___nZe0z" };
+var NumberField_module_default = { "hop-NumberField": "NumberField-module__hop-NumberField___h7XZY", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___hzOGG", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___v4nuf", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___o00hC", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___5m892", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___9R8qa", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___K86WY", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___OAC4w", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___uddVc", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___8jK-p", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___xlqHw", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___oi3V3", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___nVzDO", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___-z7Ws" };
 var GlobalNumberFieldCssSelector = "hop-NumberField";
 var StepperButton = ({ direction }) => {
   const scale = useScale();
@@ -73,6 +73,7 @@ function NumberField(props, ref) {
     isInvalid,
     isRequired,
     necessityIndicator,
+    inputGroupProps,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -107,19 +108,23 @@ function NumberField(props, ref) {
         [TextContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }],
         [IconContext, { size, className: NumberField_module_default["hop-NumberField__prefix"] }]
       ],
-      children: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+      children: /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prefix })
     }
   ) : null;
+  const { className: inputGroupClassName, inputClassName: inputGroupInputClassName, ...otherInputGroupProps } = inputGroupProps || {};
+  const inputGroupClassNames = clsx(NumberField_module_default["hop-NumberField__InputGroup"], inputGroupClassName);
+  const inputGroupInputClassNames = clsx(NumberField_module_default["hop-NumberField__input"], inputGroupInputClassName);
   const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
     _InputGroup,
     {
       isFluid: true,
       size,
-      className: NumberField_module_default["hop-NumberField__InputGroup"],
+      className: inputGroupClassNames,
       isDisabled,
       isInvalid,
-      inputClassName: NumberField_module_default["hop-NumberField__input"],
+      inputClassName: inputGroupInputClassNames,
       inputType: "number",
+      ...otherInputGroupProps,
       children: [
         prefixMarkup,
         /* @__PURE__ */ jsx(Input, { ref: inputRef }),

package/dist/{chunk-EZTWUACB.js → chunk-X57PKGPX.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
+import { _Text } from './chunk-MLLUZ55T.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___Dzsrk", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___ZRCAJ" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___dhQPn", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___4TTDQ" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-ZQARUJYZ.js → chunk-XGS34BBU.js}

@@ -1,11 +1,11 @@
 import { isFunction } from './chunk-TIPN4VYD.js';
-import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
-import { _ListBoxItem } from './chunk-JSDCGGLX.js';
+import { _ListBoxItem } from './chunk-SG2POHLX.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
 import { SectionContext } from './chunk-5H5AZJPQ.js';
+import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { HeaderContext } from './chunk-7JOGKC3W.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
+import { _Text } from './chunk-MLLUZ55T.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -17,7 +17,7 @@ import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection }
 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___MX6Wz", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___hH-41", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___qaZSm", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___E5EdV", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___Fyn5x" };
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___nZraA", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___LxQtc", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___8Vc-j", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___27FHC", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___WL9gs" };
 var GlobalListBoxCssSelector = "hop-ListBox";
 var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
 var ListBoxToTextSizeAdapter = {
@@ -43,6 +43,7 @@ function ListBox(props, ref) {
     style: styleProp,
     selectionIndicator = "check",
     selectionMode,
+    loadingListBoxItemProps,
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
@@ -111,7 +112,6 @@ function ListBox(props, ref) {
       children: /* @__PURE__ */ jsxs(
         ListBox$1,
         {
-          ...otherProps,
           ref,
           className: classNames,
           disallowEmptySelection,
@@ -120,10 +120,21 @@ function ListBox(props, ref) {
           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") }, `loadingListItem_${index.toString()}`);
+              return /* @__PURE__ */ jsx(
+                _ListBoxItem,
+                {
+                  id: `loadingListItem_${index.toString()}`,
+                  isLoading,
+                  size,
+                  textValue: stringFormatter.format("ListBoxItem.loadingTextValue"),
+                  ...loadingListBoxItemProps
+                },
+                `loadingListItem_${index.toString()}`
+              );
             })
           ]
         }

package/dist/{chunk-2XOZMJQO.js → chunk-YYFZDZXJ.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-W5TXSSFB.js';
+import { _RichIconAvatarImage } from './chunk-PQR2DVBK.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { AnonymousRichIcon } from '@hopper-ui/icons';

package/dist/{chunk-DUDTPN7M.js → chunk-ZPLEEUPC.js}

@@ -1,13 +1,12 @@
 import { TextFieldContext } from './chunk-O4XPUINW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-2XTLP4NP.js';
-import { _InputGroup } from './chunk-24KHRRRV.js';
-import { _ClearButton } from './chunk-33FEE3VD.js';
+import { _RemainingCharacterCount } from './chunk-A265GCLA.js';
+import { _InputGroup } from './chunk-FRVE3N27.js';
+import { _ClearButton } from './chunk-JHP7LA2B.js';
+import { EnsureTextWrapper } from './chunk-P2OSN32C.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-EY4ZTKS4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -17,13 +16,14 @@ import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
 import { mergeRefs } from '@react-aria/utils';
 import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
 import { forwardRef, useState, useCallback } from 'react';
 import { useObjectRef } from 'react-aria';
 import { useContextProps, composeRenderProps, Input, TextField as TextField$1 } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___hBYLG", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___ckczp", "hop-TextField__Label": "TextField-module__hop-TextField__Label___7orfl", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___BH8Vx", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___ths8c", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___nJ2bc", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___cWuVO" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___vL3q7", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___WCJxM", "hop-TextField__Label": "TextField-module__hop-TextField__Label___Mg6Yj", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___cCGFr", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___6LUxR", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___MLIq6", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___Eetu9" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -55,8 +55,10 @@ function TextField(props, ref) {
     isDisabled,
     isInvalid,
     isRequired,
-    restrictMaxLength = true,
+    allowExceedingMaxLength,
     necessityIndicator,
+    inputGroupProps,
+    remainingCharacterCountProps,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -93,6 +95,9 @@ function TextField(props, ref) {
   if (showCharacterCount && !maxLength) {
     console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextField.");
   }
+  if (allowExceedingMaxLength && !showCharacterCount) {
+    console.warn("If allowExceedingMaxLength is true, showCharacterCount must also be true.");
+  }
   const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
     SlotProvider,
     {
@@ -100,23 +105,26 @@ function TextField(props, ref) {
         [TextContext, { size, className: TextField_module_default["hop-TextField__prefix"] }],
         [IconContext, { size, className: TextField_module_default["hop-TextField__prefix"] }]
       ],
-      children: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+      children: /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prefix })
     }
   ) : null;
   useIsomorphicLayoutEffect(() => {
-    if (restrictMaxLength) {
+    if (!allowExceedingMaxLength) {
       const newValue = truncateText(value, maxLength);
       onChange(newValue);
     }
   }, [value]);
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps || {};
+  const inputGroupClassNames = clsx(TextField_module_default["hop-TextField__InputGroup"], inputGroupClassName);
   const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
     _InputGroup,
     {
       isFluid: true,
       size,
-      className: TextField_module_default["hop-TextField__InputGroup"],
+      className: inputGroupClassNames,
       isDisabled,
       isInvalid,
+      ...otherInputGroupProps,
       children: [
         prefixMarkup,
         /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
@@ -125,7 +133,8 @@ function TextField(props, ref) {
           {
             count: maxLength - characterCount,
             isInvalid: overMaxLength,
-            isDisabled
+            isDisabled,
+            ...remainingCharacterCountProps
           }
         ),
         showClearButton && /* @__PURE__ */ jsx(_ClearButton, { isDisabled, size: "lg", onPress: handleClear })
@@ -155,7 +164,7 @@ function TextField(props, ref) {
       value,
       style,
       className: classNames,
-      maxLength: restrictMaxLength ? maxLength : void 0,
+      maxLength: !allowExceedingMaxLength ? maxLength : void 0,
       onChange,
       isDisabled,
       isInvalid,