@hopper-ui/components 1.1.0 → 1.2.1

package/dist/{chunk-ICDMJUNE.js → chunk-CXWMHWSS.js}

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

package/dist/{chunk-TGXZJJJA.js → chunk-DZKJZSTQ.js}

@@ -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___YX-wK", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___4MiXk", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___xPKbb", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___wEbGV" };
+var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___BR2tE", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___-cQfW", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___NGhbV", "hop-EmbeddedButton--neutral": "EmbeddedButton-module__hop-EmbeddedButton--neutral___vcdy2", "hop-EmbeddedButton--subdued": "EmbeddedButton-module__hop-EmbeddedButton--subdued___oZwBg", "hop-EmbeddedButton--progress": "EmbeddedButton-module__hop-EmbeddedButton--progress___rYnCU", "hop-EmbeddedButton--positive": "EmbeddedButton-module__hop-EmbeddedButton--positive___oxHkr", "hop-EmbeddedButton--caution": "EmbeddedButton-module__hop-EmbeddedButton--caution___-k3Mi", "hop-EmbeddedButton--negative": "EmbeddedButton-module__hop-EmbeddedButton--negative___foo-0", "hop-EmbeddedButton--option1": "EmbeddedButton-module__hop-EmbeddedButton--option1___CQod-", "hop-EmbeddedButton--option2": "EmbeddedButton-module__hop-EmbeddedButton--option2___B9Yky", "hop-EmbeddedButton--option3": "EmbeddedButton-module__hop-EmbeddedButton--option3___vhwNL", "hop-EmbeddedButton--option4": "EmbeddedButton-module__hop-EmbeddedButton--option4___-Ht34", "hop-EmbeddedButton--option5": "EmbeddedButton-module__hop-EmbeddedButton--option5___dCb-s", "hop-EmbeddedButton--option6": "EmbeddedButton-module__hop-EmbeddedButton--option6___JJJlT", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___LTuRz" };
 var GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
 function EmbeddedButton(props, ref) {
   var _a;
@@ -19,8 +19,10 @@ function EmbeddedButton(props, ref) {
     className,
     size: sizeProp,
     isDisabled,
+    isSelected = false,
     style: styleProp,
     children,
+    variant = "neutral",
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
@@ -30,7 +32,8 @@ function EmbeddedButton(props, ref) {
     cssModule(
       EmbeddedButton_module_default,
       "hop-EmbeddedButton",
-      size
+      size,
+      variant
     ),
     stylingProps.className
   );
@@ -56,6 +59,7 @@ function EmbeddedButton(props, ref) {
           className: classNames,
           style,
           isDisabled,
+          "data-selected": isSelected || void 0,
           ...otherProps,
           children
         }

package/dist/chunk-EURJK4ZT.js

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

package/dist/{chunk-GXFFLWNF.js → chunk-F47GZGT7.js}

@@ -7,7 +7,7 @@ import { useContextProps, Heading as Heading$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Heading.module.css#css-module
-var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___hJVqv", "hop-Heading--xs": "Heading-module__hop-Heading--xs___Gkvx5", "hop-Heading--sm": "Heading-module__hop-Heading--sm___GUTqC", "hop-Heading--md": "Heading-module__hop-Heading--md___AqJfy", "hop-Heading--lg": "Heading-module__hop-Heading--lg___pDVN1", "hop-Heading--xl": "Heading-module__hop-Heading--xl___T0hGA", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___qJRjZ", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___uQNVA" };
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___uAJ5h", "hop-Heading--xs": "Heading-module__hop-Heading--xs___GM0hn", "hop-Heading--sm": "Heading-module__hop-Heading--sm___jvfjH", "hop-Heading--md": "Heading-module__hop-Heading--md___8sUov", "hop-Heading--lg": "Heading-module__hop-Heading--lg___AaXUx", "hop-Heading--xl": "Heading-module__hop-Heading--xl___V5Rgs", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___21pHk", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___Z-RFz" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);

package/dist/{chunk-YEYNRBMQ.js → chunk-F4H76S4H.js}

@@ -12,7 +12,9 @@ var require_en_US = __commonJS({
       "PasswordField.toggleVisibility": `Toggle password visibility`,
       "Tag.removeAriaLabel": `Remove`,
       "ListBoxItem.loadingTextValue": `Loading Item`,
-      "ListBoxItem.indicatorAriaLabel": `List Item Selection Indicator`
+      "ListBoxItem.indicatorAriaLabel": `List Item Selection Indicator`,
+      "Label.necessityLabel.required": `Required`,
+      "Label.necessityLabel.optional": `Optional`
     };
   }
 });
@@ -28,7 +30,9 @@ var require_fr_CA = __commonJS({
       "PasswordField.toggleVisibility": `Basculer la visibilit\xE9 du mot de passe`,
       "Tag.removeAriaLabel": `Supprimer`,
       "ListBoxItem.loadingTextValue": `\xC9l\xE9ment en cours de chargement`,
-      "ListBoxItem.indicatorAriaLabel": `Indicateur de s\xE9lection d'\xE9l\xE9ment de liste`
+      "ListBoxItem.indicatorAriaLabel": `Indicateur de s\xE9lection d'\xE9l\xE9ment de liste`,
+      "Label.necessityLabel.required": `Obligatoire`,
+      "Label.necessityLabel.optional": `Facultatif`
     };
   }
 });

package/dist/{chunk-VVY3ONWS.js → chunk-F4KQUFXI.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, RadioGroup as RadioGroup$1 } from
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioGroup.module.css#css-module
-var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___PfE2S", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___otQxq", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___Fdbjb", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___OyWcZ", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___hDwDK", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___YVU4N", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___-aKOE", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___6-YxH", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___ot4ud" };
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___uUMYg", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___GS69Y", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___aaj9S", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___GZDza", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___6FEgv", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___ram8I", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___Wg80N", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___xY86-", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___vidfD" };
 var GlobalRadioGroupCssSelector = "hop-RadioGroup";
 function RadioGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-VFYGHX3N.js → chunk-IUFABTFZ.js}

@@ -7,7 +7,7 @@ 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___Sa2-p", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___xNCN7" };
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___jOTOX", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___8HYrb" };
 var GlobalDividerCssSelector = "hop-Divider";
 function Divider(props, ref) {
   [props, ref] = useContextProps(props, ref, DividerContext);

package/dist/chunk-J6YYPRGY.js

@@ -0,0 +1,150 @@
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _ClearButton } from './chunk-WYBQCRQB.js';
+import { _Spinner } from './chunk-AGRQ7UGN.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 { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _Text } from './chunk-K7DU4YR4.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { AvatarContext } from './chunk-AES7QBQE.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';
+import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Tag.module.css#css-module
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___ny25M", "hop-Tag--sm": "Tag-module__hop-Tag--sm___8HZnL", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___t3dDt", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___ElUBi", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___iBocm", "hop-Tag--md": "Tag-module__hop-Tag--md___I7jIl", "hop-Tag--lg": "Tag-module__hop-Tag--lg___qi94e", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___sFxLb", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___8gdRL", "hop-Tag--progress": "Tag-module__hop-Tag--progress___NnhA5", "hop-Tag--positive": "Tag-module__hop-Tag--positive___H8sFB", "hop-Tag--caution": "Tag-module__hop-Tag--caution___yiUVc", "hop-Tag--negative": "Tag-module__hop-Tag--negative___Kx5BK", "hop-Tag--option1": "Tag-module__hop-Tag--option1___y-QlT", "hop-Tag--option2": "Tag-module__hop-Tag--option2___eupOO", "hop-Tag--option3": "Tag-module__hop-Tag--option3___HdIm3", "hop-Tag--option4": "Tag-module__hop-Tag--option4___6MNs5", "hop-Tag--option5": "Tag-module__hop-Tag--option5___GBX7K", "hop-Tag--option6": "Tag-module__hop-Tag--option6___AQNi2", "hop-Tag__icon": "Tag-module__hop-Tag__icon___vldcj", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___DzL7g", "hop-Tag__text": "Tag-module__hop-Tag__text___iQuoP", "hop-Tag__badge": "Tag-module__hop-Tag__badge___0hHIo" };
+var GlobalTagCssSelector = "hop-Tag";
+var TagToTextSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToAvatarSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToButtonSizeAdapter = {
+  sm: "md",
+  md: "md",
+  lg: "lg"
+};
+function Tag(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TagContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    isInvalid,
+    isLoading,
+    size: sizeProp,
+    style: styleProp,
+    textValue: textValueProp,
+    variant = "neutral",
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const textValue = textValueProp != null ? textValueProp : typeof childrenProp === "string" ? childrenProp : void 0;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTagCssSelector,
+    cssModule(
+      Tag_module_default,
+      "hop-Tag",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style,
+      textValue,
+      "data-invalid": isInvalid || void 0,
+      "data-loading": isLoading || void 0,
+      children: (tagProps) => {
+        const { allowsRemoving, isDisabled, isSelected } = tagProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Tag_module_default["hop-Tag__text"],
+                  size: TagToTextSizeAdapter[size]
+                }],
+                [IconListContext, {
+                  className: Tag_module_default["hop-Tag__icon-list"],
+                  size: "sm"
+                }],
+                [IconContext, {
+                  className: Tag_module_default["hop-Tag__icon"],
+                  size: "sm"
+                }],
+                [BadgeContext, {
+                  className: Tag_module_default["hop-Tag__badge"],
+                  isDisabled
+                }],
+                [AvatarContext, {
+                  className: Tag_module_default["hop-Tag__avatar"],
+                  isDisabled,
+                  size: TagToAvatarSizeAdapter[size]
+                }]
+              ],
+              children: children(tagProps)
+            }
+          ) }),
+          allowsRemoving && !isLoading && /* @__PURE__ */ jsx(
+            _ClearButton,
+            {
+              slot: "remove",
+              isDisabled,
+              className: Tag_module_default["hop-Tag__remove-btn"],
+              "aria-label": stringFormatter.format("Tag.removeAriaLabel"),
+              size: TagToButtonSizeAdapter[size],
+              variant,
+              isSelected
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx(
+            _Spinner,
+            {
+              "aria-label": stringFormatter.format("Tag.spinnerAriaLabel"),
+              size: "sm",
+              className: Tag_module_default["hop-Tag__Spinner"]
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+var _Tag = forwardRef(Tag);
+_Tag.displayName = "Tag";
+
+export { GlobalTagCssSelector, _Tag };

package/dist/chunk-J7BXE7WN.js

@@ -0,0 +1,172 @@
+import { useScale } from './chunk-MTDFS4CZ.js';
+import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
+import { _InputGroup } from './chunk-TFELIWJO.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-K7DU4YR4.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___UgGQL", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___JQJsO", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___-rjzF", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___AIkme", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___k9Amr", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___AmBST", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___1ZR-C", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___aL7XZ", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___O8-2A", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___yxvZH", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___z-fu-", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___2Fw9-", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___QtyaS", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___XsNK4" };
+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-6MSRPPI6.js → chunk-K7DU4YR4.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___HnTiu", "hop-Text--xs": "Text-module__hop-Text--xs___ndb-c", "hop-Text--sm": "Text-module__hop-Text--sm___cv0bL", "hop-Text--md": "Text-module__hop-Text--md___daNZS", "hop-Text--lg": "Text-module__hop-Text--lg___ByUWL", "hop-Text--xl": "Text-module__hop-Text--xl___Udc-p", "hop-Text--2xl": "Text-module__hop-Text--2xl___sxc7S", "hop-Text--inherit": "Text-module__hop-Text--inherit___WU81u" };
+var Text_module_default = { "hop-Text": "Text-module__hop-Text___Ww7PP", "hop-Text--xs": "Text-module__hop-Text--xs___YsuwL", "hop-Text--sm": "Text-module__hop-Text--sm___9lTR-", "hop-Text--md": "Text-module__hop-Text--md___to5eX", "hop-Text--lg": "Text-module__hop-Text--lg___Y-6Mo", "hop-Text--xl": "Text-module__hop-Text--xl___Qo9et", "hop-Text--2xl": "Text-module__hop-Text--2xl___dViKj", "hop-Text--inherit": "Text-module__hop-Text--inherit___uMHTH" };
 var GlobalTextCssSelector = "hop-Text";
 function Text(props, ref) {
   [props, ref] = useContextProps(props, ref, TextContext);

package/dist/{chunk-XHZ4R2MB.js → chunk-LXCCS4SA.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-RD6VCI72.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { _ListBoxItem } from './chunk-4H7PKEMJ.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-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.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___cyQ8m", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___TImf9", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___nULeu", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___r3RgS", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___DWGXa", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___ncxbm" };
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___gMv2t", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___3coRA", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___gO1Qv", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___RB9VA", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___NklA1", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___fsuh2" };
 var GlobalListBoxCssSelector = "hop-ListBox";
 var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
 var ListBoxToTextSizeAdapter = {

package/dist/{chunk-6CDXS774.js → chunk-MFFXNI66.js}

@@ -1,12 +1,12 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { _Spinner } from './chunk-WAUGFWZA.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Spinner } from './chunk-AGRQ7UGN.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-6MSRPPI6.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Text } from './chunk-K7DU4YR4.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___hVNkV", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___UP8Ng", "hop-Button--fluid": "Button-module__hop-Button--fluid___i-q6U", "hop-Button--sm": "Button-module__hop-Button--sm___TSOaw", "hop-Button--primary": "Button-module__hop-Button--primary___bK7ig", "hop-Button--md": "Button-module__hop-Button--md___bw44A", "hop-Button--secondary": "Button-module__hop-Button--secondary___iQ-Xg", "hop-Button--upsell": "Button-module__hop-Button--upsell___MaRoN", "hop-Button--danger": "Button-module__hop-Button--danger___vlH3V", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___JaoY-", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___JeWkk", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___HBhCX", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___qhpjO", "hop-Button__icon": "Button-module__hop-Button__icon___lufK8", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___QNRCt", "hop-Button__text": "Button-module__hop-Button__text___MfT24", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___Wx11c", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___7VMeu" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___jX9LE", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___71t1L", "hop-Button--fluid": "Button-module__hop-Button--fluid___SYpjM", "hop-Button--sm": "Button-module__hop-Button--sm___wPAMa", "hop-Button--primary": "Button-module__hop-Button--primary___BvniH", "hop-Button--md": "Button-module__hop-Button--md___B9RAI", "hop-Button--secondary": "Button-module__hop-Button--secondary___lCKXs", "hop-Button--upsell": "Button-module__hop-Button--upsell___NyM1V", "hop-Button--danger": "Button-module__hop-Button--danger___k-o-0", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___omDnE", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___OFQHT", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___ceb7C", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___kILk7", "hop-Button__icon": "Button-module__hop-Button__icon___6lA2X", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___N8k0v", "hop-Button__text": "Button-module__hop-Button__text___Rgagt", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___M1yPt", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___E8IaO" };
 var GlobalButtonCssSelector = "hop-Button";
 var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
 function useSimulatedRACButton(props, ref) {

package/dist/{chunk-YE7RARJB.js → chunk-MX5BW5VE.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___OCaWy", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___C3XIa" };
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___N5J5g", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___EUFfb" };
 var GlobalOverlineTextCssSelector = "hop-OverlineText";
 function OverlineText(props, ref) {
   [props, ref] = useContextProps(props, ref, OverlineTextContext);