@hopper-ui/components 1.1.0 → 1.2.1

package/dist/{chunk-BXPZ6HPC.js → chunk-PUNJWQAN.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___RNUtp", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___EcMei", "hop-Popover__title": "Popover-module__hop-Popover__title___mb1-K", "hop-Popover__actions": "Popover-module__hop-Popover__actions___OAUQ0", "hop-Popover__action": "Popover-module__hop-Popover__action___5Ok8v", "hop-Popover__content": "Popover-module__hop-Popover__content___n-NbF", "hop-Popover__footer": "Popover-module__hop-Popover__footer___zKrod" };
+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___QJzNB" };
+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-TKB5Q2WX.js → chunk-QGC3OX7W.js}

@@ -11,7 +11,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SwitchField.module.css#css-module
-var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___jJcKw", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___GA-Gy", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___vj2y9", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___22sTZ", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___qIcZO" };
+var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___zDwCH", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___lMs5H", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___QxTMV", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___VfRpb", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___CmbgN" };
 var GlobalSwitchFieldCssSelector = "hop-SwitchField";
 var SwitchToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-GCJT5PQ4.js → chunk-RLDQEH6F.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-TFELIWJO.js';
+import { _EmbeddedButton } from './chunk-DZKJZSTQ.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___lt7Vx", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___gKwge", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___sPG7D", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___xPVPF", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___b3s4v", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___oeGil" };
 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-TVV4RMFR.js → chunk-RYZNMKWB.js}

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

package/dist/{chunk-PQV24MM4.js → chunk-SPFANCCV.js}

@@ -1,7 +1,7 @@
 import { useImageFallback } from './chunk-NS3XVOQ7.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-6PH4IIEW.js';
+import { _RichIconAvatarImage } from './chunk-THUFFPGX.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { BrokenImageRichIcon } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -12,7 +12,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___fT8iZ", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___kKBMv", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___PdVKz", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___3CYGy", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___2xN4n", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___g3C7I", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___9n9-v", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___LxMkW", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___hsrVs", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___vVkVP", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___RTYeY", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___nfoHP", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___Lw1n-", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___pGWQV", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___iKwn8", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___CRHN1", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___IyBz1" };
+var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___IsFnk", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___xVZ4Y", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___dAvAi", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___v2kru", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___4a7C-", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___GGmZt", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___V0vm2", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___WjAhq", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___lp7nc", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___L4QFf", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___XDAjT", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___HT6Yj", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___ID7fC", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___yDEQt", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___FKawW", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___y4zJc", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___ikmZz" };
 var GlobalAvatarCssSelector = "hop-Avatar";
 var AvatarToTextSizeAdapter = {
   xs: "xs",

package/dist/{chunk-ZNGSZW7M.js → chunk-T7QJEHL7.js}

@@ -1,8 +1,8 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.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-6MSRPPI6.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';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___uSRQR", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___l2Kcq", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___KKr7X", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___vlnLv", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___FNsCG", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___NSNfJ", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___RWn1y", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___FaUCo", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___zmD2H", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___NpzB3", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___mh-4B" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___RQpte", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___sxf-2", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___9BGUP", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___o-zB5", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___2KCPX", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___WC3aH", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___L-2Lw", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___vNkoh", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___ZGHp6", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___kD0CL", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___YwAjq" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/{chunk-YRUBXLBX.js → chunk-TFELIWJO.js}

@@ -4,12 +4,12 @@ import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { mergeRefs } from '@react-aria/utils';
-import { forwardRef, useRef, useCallback } from 'react';
-import { useContextProps, useSlottedContext, InputContext, TextAreaContext, composeRenderProps, Group } from 'react-aria-components';
+import { forwardRef, useRef, useContext, useCallback } from 'react';
+import { useContextProps, useSlottedContext, InputContext, TextAreaContext, FieldErrorContext, composeRenderProps, Group } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./InputGroup.module.css#css-module
-var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___MpyEZ", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___nXqi6", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___tvLAO", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___lecEl", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___e89Dj" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___JGJFG", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___6JfQH", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___JoxWu", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___2VtDU", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___eOkGw" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;
@@ -27,6 +27,7 @@ function InputGroup(props, ref) {
     children,
     size: sizeProp,
     isFluid: isFluidProp,
+    isInvalid,
     inputClassName,
     inputType = "text",
     onMouseDown,
@@ -45,6 +46,7 @@ function InputGroup(props, ref) {
     ),
     stylingProps.className
   );
+  const validation = useContext(FieldErrorContext);
   const style = composeRenderProps(styleProp, (prev) => {
     return {
       ...stylingProps.style,
@@ -77,6 +79,7 @@ function InputGroup(props, ref) {
         Group,
         {
           ...otherProps,
+          isInvalid: (validation == null ? void 0 : validation.isInvalid) || isInvalid,
           onMouseDown: handleMouseDown,
           ref,
           className: classNames,

package/dist/{chunk-6PH4IIEW.js → chunk-THUFFPGX.js}

@@ -9,7 +9,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RichIconAvatarImage.module.css#css-module
-var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___9cs6o", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___XYcPi", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___CONVZ", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___c6v95", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___xPXKj", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___2zIed", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___Zgfsg", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___wjKFz" };
+var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___jKuOm", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___YOClX", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___orivw", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___0grkn", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___qCvt-", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___lVnHc", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___RlCbj", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___--Ntp" };
 var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
 var AvatarToIconSizeAdapter = {
   xs: "md",

package/dist/{chunk-P7UUQGGF.js → chunk-TM4R5NO7.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-K7DU4YR4.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { InfoIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, FieldErrorContext } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./HelperMessage.module.css#css-module
-var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___U0gBi", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___z35Yf" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___g-wQa", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___3-slU" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-6K6W32Q7.js → chunk-VQC5F6I7.js}

@@ -1,6 +1,6 @@
 import { SearchFieldContext } from './chunk-3NKF5TPD.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
-import { _ClearButton } from './chunk-SR3GAXY5.js';
+import { _InputGroup } from './chunk-TFELIWJO.js';
+import { _ClearButton } from './chunk-WYBQCRQB.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
@@ -17,7 +17,7 @@ import { useContextProps, composeRenderProps, Input, SearchField as SearchField$
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./SearchField.module.css#css-module
-var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___Bzhek", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___-XKVD", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___laPoU", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___-OhTw", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___-gzSx", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___1bAv6", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___j3nmG", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___WEhqH", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___SN3ZA" };
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___1Lofe", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___FFqyK", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___X46if", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___mdypj", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___-mBBv", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___7zPYO", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___ETtN4", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___yE4eo", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___-jk3D" };
 var GlobalSearchFieldCssSelector = "hop-SearchField";
 function SearchField(props, ref) {
   var _a;
@@ -38,6 +38,7 @@ function SearchField(props, ref) {
     icon = /* @__PURE__ */ jsx(SearchIcon, {}),
     isDisabled,
     isInvalid,
+    isRequired,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -89,7 +90,7 @@ function SearchField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"] }],
+            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"], isRequired }],
             [HelperMessageContext, { className: SearchField_module_default["hop-SearchField__HelperMessage"] }],
             [ErrorMessageContext, { className: SearchField_module_default["hop-SearchField__ErrorMessage"] }]
           ],
@@ -107,6 +108,7 @@ function SearchField(props, ref) {
       className: classNames,
       isDisabled,
       isInvalid,
+      isRequired,
       ...otherProps,
       children: childrenMarkup
     }

package/dist/{chunk-AT7ZY6GA.js → chunk-WQSVNGFJ.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___gNkoN", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___NWJHR", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___FVwx5", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___NUBWK", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___8jdqN", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___e6YxG" };
 var GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
 function ListBoxItemSkeleton(props, ref) {
   var _a;

package/dist/{chunk-SR3GAXY5.js → chunk-WYBQCRQB.js}

@@ -1,6 +1,6 @@
 import { ClearButtonContext } from './chunk-DXVKHP4V.js';
-import { _EmbeddedButton } from './chunk-TGXZJJJA.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { _EmbeddedButton } from './chunk-DZKJZSTQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
 import { DismissIcon } from '@hopper-ui/icons';
 import { forwardRef } from 'react';
 import { useContextProps } from 'react-aria-components';