@hopper-ui/components 1.1.0 → 1.2.0

package/dist/{chunk-BXPZ6HPC.js → chunk-TCOZUCPD.js}

@@ -1,142 +1,107 @@
 import { PopoverContext } from './chunk-SC6ZK5ON.js';
-import { TagContext } from './chunk-EWMWQ2MC.js';
 import { ContentContext } from './chunk-IXB2WK56.js';
 import { FooterContext } from './chunk-I67NHYK4.js';
+import { PasswordFieldContext } from './chunk-QW45G6K4.js';
+import { SearchFieldContext } from './chunk-3NKF5TPD.js';
+import { TextAreaContext } from './chunk-MHQZXLKW.js';
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
-import { _ClearButton } from './chunk-SR3GAXY5.js';
-import { _Spinner } from './chunk-WAUGFWZA.js';
 import { LinkContext } from './chunk-4VVNSXIB.js';
 import { isFunction, isNil } from './chunk-TIPN4VYD.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { RadioGroupContext } from './chunk-5MBJWRZD.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { _HopperProvider } from './chunk-NMKBUGSO.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
-import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { _Text } from './chunk-6MSRPPI6.js';
-import { TextContext } from './chunk-X6SER3TZ.js';
-import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { FormContext } from './chunk-EURJK4ZT.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { IconContext } from '@hopper-ui/icons';
-import { useStyledSystem, useResponsiveValue, useColorSchemeContext } from '@hopper-ui/styled-system';
+import { useStyledSystem, useColorSchemeContext, useResponsiveValue } from '@hopper-ui/styled-system';
 export * from '@hopper-ui/styled-system';
+import clsx from 'clsx';
 import { forwardRef, useReducer, useRef, useEffect } from 'react';
-import { useContextProps, composeRenderProps, Tag as Tag$1, Popover as Popover$1, Dialog } from 'react-aria-components';
+import { useContextProps, Popover as Popover$1, Dialog, Form as Form$1 } from 'react-aria-components';
 export { Collection } from 'react-aria-components';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
 
-// css-module:./Tag.module.css#css-module
-var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___k---H", "hop-Tag--md": "Tag-module__hop-Tag--md___wMJTU", "hop-Tag__icon": "Tag-module__hop-Tag__icon___DvajY", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___x4CpF", "hop-Tag__badge": "Tag-module__hop-Tag__badge___3b9Gq", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___KIdVL", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___BOJ61", "hop-Tag--lg": "Tag-module__hop-Tag--lg___VTvaj", "hop-Tag__text": "Tag-module__hop-Tag__text___nkMOg", "hop-Badge--secondary": "Tag-module__hop-Badge--secondary___sb6Pa" };
-var GlobalTagCssSelector = "hop-Tag";
-var TagToTextSizeAdapter = {
-  md: "xs",
-  lg: "sm"
-};
-function Tag(props, ref) {
-  var _a;
-  [props, ref] = useContextProps(props, ref, TagContext);
+// css-module:./Popover.module.css#css-module
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___nKZak", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___vnp7r", "hop-Popover__title": "Popover-module__hop-Popover__title___NazSs", "hop-Popover__actions": "Popover-module__hop-Popover__actions___VImV7", "hop-Popover__action": "Popover-module__hop-Popover__action___fsXDT", "hop-Popover__content": "Popover-module__hop-Popover__content___fZfhh", "hop-Popover__footer": "Popover-module__hop-Popover__footer___GPaEX" };
+var GlobalPopoverCssSelector = "hop-Popover";
+function Popover(props, ref) {
+  [props, ref] = useContextProps(props, ref, PopoverContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
+    children,
     className,
-    children: childrenProp,
-    isInvalid,
-    isLoading,
-    size: sizeProp = "md",
-    style: styleProp,
-    textValue: textValueProp,
+    offset = 4,
+    boundaryOffset,
     ...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(
+  const { colorScheme } = useColorSchemeContext();
+  const popoverClassNames = composeClassnameRenderProps(
     className,
-    GlobalTagCssSelector,
+    GlobalPopoverCssSelector,
     cssModule(
-      Tag_module_default,
-      "hop-Tag",
-      size
-    ),
-    stylingProps.className
+      Popover_module_default,
+      "hop-Popover"
+    )
   );
-  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,
+    Popover$1,
     {
       ...otherProps,
+      offset,
       ref,
-      className: classNames,
-      style,
-      textValue,
-      "data-invalid": isInvalid || void 0,
-      "data-loading": isLoading || void 0,
-      children: (tagProps) => {
-        const { allowsRemoving, isDisabled } = tagProps;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+      className: popoverClassNames,
+      arrowBoundaryOffset: boundaryOffset,
+      children: (state) => /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          className: clsx(stylingProps.className, Popover_module_default["hop-Popover__dialog"]),
+          style: stylingProps.style,
+          children: /* @__PURE__ */ jsx(
             SlotProvider,
             {
               values: [
-                [TextContext, {
-                  className: Tag_module_default["hop-Tag__text"],
-                  size: TagToTextSizeAdapter[size]
+                [HeadingContext, {
+                  className: Popover_module_default["hop-Popover__title"],
+                  size: "xs"
+                }],
+                [ButtonContext, {
+                  size: "sm",
+                  className: Popover_module_default["hop-Popover__action"]
+                }],
+                [ButtonGroupContext, {
+                  size: "sm",
+                  align: "end",
+                  className: Popover_module_default["hop-Popover__actions"]
                 }],
-                [IconListContext, {
-                  className: Tag_module_default["hop-Tag__icon-list"],
-                  size: "sm"
+                [ContentContext, {
+                  className: Popover_module_default["hop-Popover__content"]
                 }],
-                [IconContext, {
-                  className: Tag_module_default["hop-Tag__icon"],
-                  size: "sm"
+                [FooterContext, {
+                  className: Popover_module_default["hop-Popover__footer"]
                 }],
-                [BadgeContext, {
-                  className: Tag_module_default["hop-Tag__badge"],
-                  isDisabled
+                [LinkContext, {
+                  size: "sm",
+                  variant: "primary",
+                  isQuiet: true
                 }]
               ],
-              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
-            }
-          ),
-          isLoading && /* @__PURE__ */ jsx(
-            _Spinner,
-            {
-              "aria-label": stringFormatter.format("Tag.spinnerAriaLabel"),
-              size: "sm",
-              className: Tag_module_default["hop-Tag__Spinner"]
+              children: isFunction(children) && !isNil(children) ? children(state) : children
             }
           )
-        ] });
-      }
+        }
+      ) })
     }
   );
 }
-var _Tag = forwardRef(Tag);
-_Tag.displayName = "Tag";
+var _Popover = forwardRef(Popover);
+_Popover.displayName = "Popover";
 function $0d86e9c8f07f9a7b$export$79c0c687a5963b0a(opts, dispatch) {
   let { cursor, getKey } = opts;
   return {
@@ -547,79 +512,97 @@ function $f86e6c1ec7da6ebb$export$bc3384a35de93d66(options) {
   };
 }
 
-// css-module:./Popover.module.css#css-module
-var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___1SG-H", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___Smzz-", "hop-Popover__title": "Popover-module__hop-Popover__title___ZwhJ9", "hop-Popover__actions": "Popover-module__hop-Popover__actions___YGimS", "hop-Popover__action": "Popover-module__hop-Popover__action___G3Beb", "hop-Popover__content": "Popover-module__hop-Popover__content___Agt74", "hop-Popover__footer": "Popover-module__hop-Popover__footer___S49O3" };
-var GlobalPopoverCssSelector = "hop-Popover";
-function Popover(props, ref) {
-  [props, ref] = useContextProps(props, ref, PopoverContext);
+// css-module:./Form.module.css#css-module
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___WWA27" };
+var GlobalFormCssSelector = "hop-Form";
+function Form(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, FormContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
-    children,
     className,
-    offset = 4,
-    boundaryOffset,
+    children,
+    style,
+    isFluid,
+    isDisabled,
+    size: sizeProp,
     ...otherProps
   } = ownProps;
-  const { colorScheme } = useColorSchemeContext();
-  const popoverClassNames = composeClassnameRenderProps(
-    className,
-    GlobalPopoverCssSelector,
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalFormCssSelector,
     cssModule(
-      Popover_module_default,
-      "hop-Popover"
-    )
+      Form_module_default,
+      "hop-Form"
+    ),
+    stylingProps.className,
+    className
   );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
   return /* @__PURE__ */ jsx(
-    Popover$1,
+    SlotProvider,
     {
-      ...otherProps,
-      offset,
-      ref,
-      className: popoverClassNames,
-      arrowBoundaryOffset: boundaryOffset,
-      children: (state) => /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, children: /* @__PURE__ */ jsx(
-        Dialog,
+      values: [
+        [TextFieldContext, {
+          isDisabled,
+          isFluid,
+          size
+        }],
+        [PasswordFieldContext, {
+          isDisabled,
+          isFluid,
+          size
+        }],
+        [SearchFieldContext, {
+          isDisabled,
+          isFluid,
+          size
+        }],
+        [NumberFieldContext, {
+          isDisabled,
+          size,
+          isFluid
+        }],
+        [TextAreaContext, {
+          isDisabled,
+          size,
+          isFluid
+        }],
+        [RadioGroupContext, {
+          isDisabled,
+          size
+        }],
+        [CheckboxContext, {
+          isDisabled,
+          size
+        }],
+        [CheckboxFieldContext, {
+          isDisabled,
+          size
+        }],
+        [CheckboxGroupContext, {
+          isDisabled,
+          size
+        }],
+        [ButtonContext, { isDisabled, size }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Form$1,
         {
-          className: clsx(stylingProps.className, Popover_module_default["hop-Popover__dialog"]),
-          style: stylingProps.style,
-          children: /* @__PURE__ */ jsx(
-            SlotProvider,
-            {
-              values: [
-                [HeadingContext, {
-                  className: Popover_module_default["hop-Popover__title"],
-                  size: "xs"
-                }],
-                [ButtonContext, {
-                  size: "sm",
-                  className: Popover_module_default["hop-Popover__action"]
-                }],
-                [ButtonGroupContext, {
-                  size: "sm",
-                  align: "end",
-                  className: Popover_module_default["hop-Popover__actions"]
-                }],
-                [ContentContext, {
-                  className: Popover_module_default["hop-Popover__content"]
-                }],
-                [FooterContext, {
-                  className: Popover_module_default["hop-Popover__footer"]
-                }],
-                [LinkContext, {
-                  size: "sm",
-                  variant: "primary",
-                  isQuiet: true
-                }]
-              ],
-              children: isFunction(children) && !isNil(children) ? children(state) : children
-            }
-          )
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          children
         }
-      ) })
+      )
     }
   );
 }
-var _Popover = forwardRef(Popover);
-_Popover.displayName = "Popover";
+var _Form = forwardRef(Form);
+_Form.displayName = "Form";
 
-export { $f86e6c1ec7da6ebb$export$bc3384a35de93d66, GlobalPopoverCssSelector, GlobalTagCssSelector, _Popover, _Tag };
+export { $f86e6c1ec7da6ebb$export$bc3384a35de93d66, GlobalFormCssSelector, GlobalPopoverCssSelector, _Form, _Popover };

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

@@ -1,8 +1,8 @@
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
-import { _EmbeddedButton } from './chunk-TGXZJJJA.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___K1Viz", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___A9xrf", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___PEh-V", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___-KMzA", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___hiN1T", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___Dc3vM" };
+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-6CDXS774.js → chunk-U56LEEEA.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-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-6MSRPPI6.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___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___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-AT7ZY6GA.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___F7Sqr", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___OFdvy", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___EV-BP", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___0syeJ", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___IEB0s", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___8RrK4" };
+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-CXCOSGTO.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___8bpFk", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___OoqBw", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___o5U5A", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___-Vy2o", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___Ys-Hl" };
+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 };