@hopper-ui/components 1.0.13 → 1.2.0

package/dist/{chunk-M4IVTAHY.js → chunk-TG623HPA.js}

@@ -1,8 +1,8 @@
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
-import { _InputGroup } from './chunk-CCIVRIKG.js';
-import { _EmbeddedButton } from './chunk-ZXDN2IRM.js';
+import { _InputGroup } from './chunk-Q63YLWI6.js';
+import { _EmbeddedButton } from './chunk-5IB23E3O.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, Input, TextField } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./PasswordField.module.css#css-module
-var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___ban52", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___nt8Nm", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___lGjUQ", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___tZgCe", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___f-Szj", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___RJzJX" };
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___BZw2q", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___Vy6O6", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___3feE7", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___6fO8H", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___ACyog", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___xp9kN" };
 var GlobalPasswordFieldCssSelector = "hop-PasswordField";
 function PasswordField(props, ref) {
   var _a;
@@ -39,6 +39,7 @@ function PasswordField(props, ref) {
     isFluid: isFluidProp,
     isDisabled,
     isInvalid,
+    isRequired,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -90,7 +91,7 @@ function PasswordField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: PasswordField_module_default["hop-PasswordField__Label"] }],
+            [LabelContext, { className: PasswordField_module_default["hop-PasswordField__Label"], isRequired }],
             [HelperMessageContext, { className: PasswordField_module_default["hop-PasswordField__HelperMessage"] }],
             [ErrorMessageContext, { className: PasswordField_module_default["hop-PasswordField__ErrorMessage"] }]
           ],
@@ -108,6 +109,7 @@ function PasswordField(props, ref) {
       className: classNames,
       isDisabled,
       isInvalid,
+      isRequired,
       ...otherProps,
       children: childrenMarkup
     }

package/dist/{chunk-723W7LGB.js → chunk-U56LEEEA.js}

@@ -1,12 +1,12 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { _Spinner } from './chunk-AMXRADUV.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Spinner } from './chunk-CKKLDA5J.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -19,7 +19,7 @@ import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps,
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "hop-Button": "Button-module__hop-Button___UtanL", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___s6kpk", "hop-Button--fluid": "Button-module__hop-Button--fluid___kCVkQ", "hop-Button--sm": "Button-module__hop-Button--sm___7J-M-", "hop-Button--primary": "Button-module__hop-Button--primary___qii5D", "hop-Button--md": "Button-module__hop-Button--md___rwP06", "hop-Button--secondary": "Button-module__hop-Button--secondary___I-J5f", "hop-Button--upsell": "Button-module__hop-Button--upsell___hZ0mQ", "hop-Button--danger": "Button-module__hop-Button--danger___CfP6K", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___o-67i", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___dePjg", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___X44aS", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___jkKCi", "hop-Button__icon": "Button-module__hop-Button__icon___Yc-Tb", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___cvJTK", "hop-Button__text": "Button-module__hop-Button__text___Z3j32", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___fUClA", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___F7DGT" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___ot9lw", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___i5ahP", "hop-Button--fluid": "Button-module__hop-Button--fluid___7p5MN", "hop-Button--sm": "Button-module__hop-Button--sm___8f5C7", "hop-Button--primary": "Button-module__hop-Button--primary___eGhk1", "hop-Button--md": "Button-module__hop-Button--md___Nq4Ho", "hop-Button--secondary": "Button-module__hop-Button--secondary___EK4MQ", "hop-Button--upsell": "Button-module__hop-Button--upsell___tKts9", "hop-Button--danger": "Button-module__hop-Button--danger___kCc82", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___p0AWu", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___Mh--L", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___bHqEG", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___pYUr5", "hop-Button__icon": "Button-module__hop-Button__icon___8a7Yy", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___7KNrU", "hop-Button__text": "Button-module__hop-Button__text___a4lmJ", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___oJS-s", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___iyDSw" };
 var GlobalButtonCssSelector = "hop-Button";
 var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
 function useSimulatedRACButton(props, ref) {

package/dist/{chunk-THQZBL4T.js → chunk-UT4CSUUM.js}

@@ -7,7 +7,7 @@ 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___9KoCq", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___hlN0J", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___ztoOV", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___SipZz", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___eAJ9R", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___w5aPz" };
+var ListBoxItemSkeleton_module_default = { "hop-ListBoxItemSkeleton": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___wrIL3", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___kPWk2", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___cHo6m", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___Kyk8k", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___a5cds", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___dn0c2" };
 var GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
 function ListBoxItemSkeleton(props, ref) {
   var _a;

package/dist/{chunk-MVWQVBTK.js → chunk-V5Q245NH.js}

@@ -13,7 +13,7 @@ import { useContextProps, FieldErrorContext, TagGroup as TagGroup$1 } from 'reac
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./TagGroup.module.css#css-module
-var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___tIhOW", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___TsXgv", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___L9Azr", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___qJgpi", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___-lcHp" };
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___nGYNE", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___sR56G", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___8M4Dw", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___Wzu9G", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___VOUZz" };
 var GlobalTagGroupCssSelector = "hop-TagGroup";
 function TagGroup(props, ref) {
   var _a;
@@ -25,6 +25,7 @@ function TagGroup(props, ref) {
     isInvalid = false,
     style: styleProp,
     size: sizeProp,
+    variant,
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
@@ -55,7 +56,8 @@ function TagGroup(props, ref) {
         [TagContext, {
           className: TagGroup_module_default["hop-TagGroup__tag"],
           isInvalid,
-          size
+          size,
+          variant
         }],
         [ErrorMessageContext, {
           className: TagGroup_module_default["hop-TagGroup__error-message"],

package/dist/chunk-VISBUD2K.js

@@ -0,0 +1,172 @@
+import { useScale } from './chunk-MTDFS4CZ.js';
+import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
+import { _InputGroup } from './chunk-Q63YLWI6.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { _Text } from './chunk-XT2MZWEV.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.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 { 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___IQHRz", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___cBL6Z", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___83Tka", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___QqEtX", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___zfJ4v", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___rpkuJ", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___isGtg", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___7p6WZ", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___ofNwv", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___BXGLT", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___vWXrK", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___lZj4N", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___-KSsu", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___lQVE0" };
+var GlobalNumberFieldCssSelector = "hop-NumberField";
+var StepperButton = ({ direction }) => {
+  const scale = useScale();
+  const isMobile = scale === "large";
+  const StepperIcon = direction === "increment" ? AngleUpIcon : AngleDownIcon;
+  const stepperClasses = cssModule(
+    NumberField_module_default,
+    "hop-NumberField__stepper-button",
+    direction,
+    isMobile && "mobile"
+  );
+  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);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    placeholder,
+    onChange: onChangeProp,
+    children,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const scale = useScale();
+  const isMobile = scale === "large";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalNumberFieldCssSelector,
+    cssModule(
+      NumberField_module_default,
+      "hop-NumberField",
+      isFluid && "fluid",
+      isMobile && "mobile"
+    ),
+    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: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+    }
+  ) : null;
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid,
+      size,
+      className: NumberField_module_default["hop-NumberField__InputGroup"],
+      isDisabled,
+      isInvalid,
+      inputClassName: NumberField_module_default["hop-NumberField__input"],
+      inputType: "number",
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: inputRef,
+            placeholder
+          }
+        ),
+        /* @__PURE__ */ jsx(StepperButton, { direction: "increment" }),
+        /* @__PURE__ */ jsx(StepperButton, { direction: "decrement" })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: NumberField_module_default["hop-NumberField__Label"], isRequired }],
+            [HelperMessageContext, { className: NumberField_module_default["hop-NumberField__HelperMessage"] }],
+            [ErrorMessageContext, { className: NumberField_module_default["hop-NumberField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  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-QTV45NTY.js → chunk-VYKPDMP3.js}

@@ -1,8 +1,8 @@
 import { SwitchContext } from './chunk-YHBJAXUY.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Switch as Switch$1 } from 'react-a
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Switch.module.css#css-module
-var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___r5edU", "hop-Switch--sm": "Switch-module__hop-Switch--sm___g5O2w", "hop-Switch--md": "Switch-module__hop-Switch--md___F6pgw", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___GZeio", "hop-Switch__text": "Switch-module__hop-Switch__text___8JPWQ", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___sXzkG", "hop-Switch__icon": "Switch-module__hop-Switch__icon___yeaOO" };
+var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___Mf5VL", "hop-Switch--sm": "Switch-module__hop-Switch--sm___-gT1c", "hop-Switch--md": "Switch-module__hop-Switch--md___bPSgp", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___Ak4ez", "hop-Switch__text": "Switch-module__hop-Switch__text___yWPwC", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___Lx1ak", "hop-Switch__icon": "Switch-module__hop-Switch__icon___vAPk1" };
 var GlobalSwitchCssSelector = "hop-Switch";
 function Switch(props, ref) {
   var _a;

package/dist/{chunk-CS2RAWQB.js → chunk-W2BQZEW6.js}

@@ -2,13 +2,13 @@ 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-SW7LHIQ2.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { _ListBoxItem } from './chunk-W474WFOP.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
 import { HeaderContext } from './chunk-7JOGKC3W.js';
 import { DividerContext } from './chunk-FYIHMKHI.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -18,7 +18,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___XQDch", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___3Im73", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___65r5k", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___XEwSd", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___GjNW9", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___KcKrr" };
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___84c8C", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___mHn4u", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___iv9s3", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___rQ48O", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___WUF4y", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___PU1hF" };
 var GlobalListBoxCssSelector = "hop-ListBox";
 var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
 var ListBoxToTextSizeAdapter = {

package/dist/{chunk-SW7LHIQ2.js → chunk-W474WFOP.js}

@@ -1,16 +1,17 @@
-import { _Radio } from './chunk-SSMGKQ27.js';
-import { _RadioGroup } from './chunk-NHM3MQI3.js';
 import { _RadioList } from './chunk-NKHMUPAP.js';
-import { _Checkbox } from './chunk-W34MMJ2L.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { _Radio } from './chunk-J44DIB5J.js';
+import { _RadioGroup } from './chunk-EJUIYBAC.js';
+import { _Checkbox } from './chunk-FOKTHCFK.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import { _ListBoxItemSkeleton } from './chunk-THQZBL4T.js';
-import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _ListBoxItemSkeleton } from './chunk-UT4CSUUM.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
+import { AvatarContext } from './chunk-AES7QBQE.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { CheckmarkIcon, IconContext } from '@hopper-ui/icons';
@@ -20,7 +21,7 @@ import { useContextProps, composeRenderProps, ListBoxItem as ListBoxItem$1, List
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./ListBoxItem.module.css#css-module
-var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___NSPLY", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___7hc2A", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___85bzp", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___MoEKQ", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___RDITm", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___zN4iO", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___SwFBV", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___FeYgQ", "hop-ListBoxItem__radio-group": "ListBoxItem-module__hop-ListBoxItem__radio-group___QRD7t", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___ERb2a", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___gaSut", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___3-13V", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___wPgqZ", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___dSaVa", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___MadkE", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___mXgdz", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___C8-JS" };
+var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___u6Es7", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___yXyVw", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___937pQ", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___ymimv", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___1mW38", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___I35FE", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___LAbSz", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___EPW2R", "hop-ListBoxItem__radio-group": "ListBoxItem-module__hop-ListBoxItem__radio-group___g-HnK", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___ppGNP", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___QwkiM", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___Yhy58", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___mFm52", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___y1bWL", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___LBHo2", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___Luvle", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___bdsUo" };
 var GlobalListBoxItemCssSelector = "hop-ListBoxItem";
 var ListBoxItemToIconSizeAdapter = {
   xs: "sm",
@@ -34,6 +35,12 @@ var ListBoxItemToTextSizeAdapter = {
   md: "sm",
   lg: "md"
 };
+var ListBoxItemToAvatarSizeAdapter = {
+  xs: "xs",
+  sm: "xs",
+  md: "md",
+  lg: "md"
+};
 function ListBoxItemInner(props) {
   const stringFormatter = useLocalizedString();
   const listStateContext = useContext(ListStateContext);
@@ -153,6 +160,11 @@ function ListBoxItemInner(props) {
               [BadgeContext, {
                 className: ListBoxItem_module_default["hop-ListBoxItem__badge"],
                 isDisabled
+              }],
+              [AvatarContext, {
+                className: ListBoxItem_module_default["hop-ListBoxItem__avatar"],
+                isDisabled,
+                size: ListBoxItemToAvatarSizeAdapter[size]
               }]
             ],
             children

package/dist/{chunk-ESRYOELK.js → chunk-X253QCYD.js}

@@ -1,4 +1,4 @@
-import { _OverlineText } from './chunk-5WWMVQI4.js';
+import { _OverlineText } from './chunk-CEUQHDEQ.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -9,7 +9,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Badge.module.css#css-module
-var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___xwY2X", "hop-Badge--primary": "Badge-module__hop-Badge--primary___t93CO", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___CO6Af" };
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___lrDM9", "hop-Badge--primary": "Badge-module__hop-Badge--primary___B9IJu", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___rsYF4" };
 var GlobalBadgeCssSelector = "hop-Badge";
 function Badge(props, ref) {
   [props, ref] = useContextProps(props, ref, BadgeContext);
@@ -47,6 +47,7 @@ function Badge(props, ref) {
       slot: slot != null ? slot : void 0,
       "data-disabled": isDisabled || void 0,
       "aria-disabled": isDisabled || void 0,
+      "data-variant": variant,
       children
     }
   ) });

package/dist/{chunk-PAYZGXTT.js → chunk-XT2MZWEV.js}

@@ -9,7 +9,7 @@ import { useContextProps, Text as Text$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Text.module.css#css-module
-var Text_module_default = { "hop-Text": "Text-module__hop-Text___XGciL", "hop-Text--xs": "Text-module__hop-Text--xs___8DcIm", "hop-Text--sm": "Text-module__hop-Text--sm___B0mGK", "hop-Text--md": "Text-module__hop-Text--md___QwBMo", "hop-Text--lg": "Text-module__hop-Text--lg___BAtSv", "hop-Text--xl": "Text-module__hop-Text--xl___QUy6V", "hop-Text--2xl": "Text-module__hop-Text--2xl___DFqJ4", "hop-Text--inherit": "Text-module__hop-Text--inherit___WkAxg" };
+var Text_module_default = { "hop-Text": "Text-module__hop-Text___7s-NC", "hop-Text--xs": "Text-module__hop-Text--xs___uRZNm", "hop-Text--sm": "Text-module__hop-Text--sm___LfDaA", "hop-Text--md": "Text-module__hop-Text--md___aGVbv", "hop-Text--lg": "Text-module__hop-Text--lg___TgsRg", "hop-Text--xl": "Text-module__hop-Text--xl___gAcxP", "hop-Text--2xl": "Text-module__hop-Text--2xl___n-9B9", "hop-Text--inherit": "Text-module__hop-Text--inherit___SEa0P" };
 var GlobalTextCssSelector = "hop-Text";
 function Text(props, ref) {
   [props, ref] = useContextProps(props, ref, TextContext);

package/dist/{chunk-SNWJJ3FF.js → chunk-XUJNQNB3.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-AYPCLDGU.js';
+import { _RichIconAvatarImage } from './chunk-M3K4IYX6.js';
 import { DeletedUserRichIcon } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';

package/dist/chunk-Z57VHYOF.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+// src/utils/src/useTruncatedText.ts
+var useTruncatedText = () => {
+  const truncateText = useCallback((inputText, limit) => {
+    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+    const segments = segmenter.segment(inputText);
+    let truncatedText = "";
+    let count = 0;
+    for (const segment of segments) {
+      if (limit && count + segment.segment.length > limit) {
+        break;
+      }
+      truncatedText += segment.segment;
+      count += segment.segment.length;
+    }
+    return truncatedText;
+  }, []);
+  return truncateText;
+};
+
+export { useTruncatedText };

package/dist/i18n/src/index.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+export { useLocalizedString } from '../../chunk-F4H76S4H.js';
 import '../../chunk-JSBRDJBE.js';

package/dist/i18n/src/useLocalizedString.js

@@ -1,2 +1,2 @@
-export { useLocalizedString } from '../../chunk-YEYNRBMQ.js';
+export { useLocalizedString } from '../../chunk-F4H76S4H.js';
 import '../../chunk-JSBRDJBE.js';