@hopper-ui/components 1.1.0 → 1.2.0

package/dist/{chunk-A7HLXFSP.js → chunk-FA4IXLWZ.js}

@@ -1,13 +1,13 @@
 import { TextFieldContext } from './chunk-O4XPUINW.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
-import { _ClearButton } from './chunk-SR3GAXY5.js';
+import { _InputGroup } from './chunk-Q63YLWI6.js';
+import { _ClearButton } from './chunk-2XO5CZBO.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.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 { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-6MSRPPI6.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';
@@ -22,7 +22,7 @@ import { useContextProps, composeRenderProps, Input, TextField as TextField$1 }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___Pmegw", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___gB9AM", "hop-TextField__Label": "TextField-module__hop-TextField__Label___5O2K-", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___YFY4G", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___qnReJ", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___IU7x-", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___QChBo" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___p1zZl", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___upyKv", "hop-TextField__Label": "TextField-module__hop-TextField__Label___KP7AK", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___o3YUl", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___b7EQq", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___oXqwU", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___WN1xO" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -53,6 +53,7 @@ function TextField(props, ref) {
     isFluid: isFluidProp,
     isDisabled,
     isInvalid,
+    isRequired,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -119,7 +120,7 @@ function TextField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"], isRequired }],
             [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
             [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
           ],
@@ -140,6 +141,7 @@ function TextField(props, ref) {
       onChange,
       isDisabled,
       isInvalid,
+      isRequired,
       ...otherProps,
       children: childrenMarkup
     }

package/dist/chunk-FOD7XUSJ.js

@@ -0,0 +1,150 @@
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _ClearButton } from './chunk-2XO5CZBO.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 { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _Text } from './chunk-XT2MZWEV.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___RskTT", "hop-Tag--sm": "Tag-module__hop-Tag--sm___dT9Zg", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___gqTvd", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___itlq9", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___k-w6U", "hop-Tag--md": "Tag-module__hop-Tag--md___EFXGm", "hop-Tag--lg": "Tag-module__hop-Tag--lg___-7S-k", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___ziL-o", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___bYJN1", "hop-Tag--progress": "Tag-module__hop-Tag--progress___Scd9q", "hop-Tag--positive": "Tag-module__hop-Tag--positive___GJ1Wb", "hop-Tag--caution": "Tag-module__hop-Tag--caution___de6ZF", "hop-Tag--negative": "Tag-module__hop-Tag--negative___Dz8WI", "hop-Tag--option1": "Tag-module__hop-Tag--option1___Va6Mb", "hop-Tag--option2": "Tag-module__hop-Tag--option2___eck-O", "hop-Tag--option3": "Tag-module__hop-Tag--option3___ZlmMR", "hop-Tag--option4": "Tag-module__hop-Tag--option4___L3EmX", "hop-Tag--option5": "Tag-module__hop-Tag--option5___B7Tp-", "hop-Tag--option6": "Tag-module__hop-Tag--option6___GvCgh", "hop-Tag__icon": "Tag-module__hop-Tag__icon___nUqBw", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___ybqv1", "hop-Tag__text": "Tag-module__hop-Tag__text___TYNqw", "hop-Tag__badge": "Tag-module__hop-Tag__badge___oUeLt" };
+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-ZNGSZW7M.js → chunk-FOKTHCFK.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-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, 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___OTh5S", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___urS3p", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___Wwpsr", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___tG3Hj", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___gKd-M", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___WAPyo", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___SzESn", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___lWkgH", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___UxA4d", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___iNG2Y", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___-kuqp" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/{chunk-XGI4LDIF.js → chunk-HCRWIU7V.js}

@@ -1,13 +1,13 @@
 import { useFontFaceReady } from './chunk-IU6XMS2X.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
-import { _InputGroup } from './chunk-YRUBXLBX.js';
+import { _InputGroup } from './chunk-Q63YLWI6.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';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -79,7 +79,7 @@ function $b5e257d569688ac6$export$535bd6ca7f90a273() {
 }
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___uQGKH", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___sNZwX", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___x0-91", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___ozMT-", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___1hWlx", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___r0SC4", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___TBxZb", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___F5Ho0", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___EXkDT" };
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___Oqrhm", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___2QsEG", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___6uZvZ", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___UGSsJ", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___m2oHv", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___-aEby", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___-TDoe", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___Gj-AJ", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___FVgxx" };
 var GlobalTextAreaCssSelector = "hop-TextArea";
 var DefaultMinimumTextAreaRows = 3;
 var pxToInt = (value) => {

package/dist/{chunk-BGRKDTCG.js → chunk-IUOLKHYQ.js}

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

package/dist/{chunk-FQO2QRSC.js → chunk-IXWYHDGU.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 }
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CheckboxGroup.module.css#css-module
-var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___-Gmwt", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___Av4tA", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___a-rGV", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___gesFW", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___CekdI", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___Zjl4m", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___7GpOF", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___NU59S", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___FNKdd" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___ElEYk", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___oEe87", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___ETF-H", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___5bM6E", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___zvdEY", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___-cq2A", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___GhnAo", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___wZAUv", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___qN21A" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-TMWNNF4J.js → chunk-J44DIB5J.js}

@@ -1,8 +1,8 @@
 import { RadioContext } from './chunk-FU5CCPLP.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-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Radio as Radio$1 } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Radio.module.css#css-module
-var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___kje-D", "hop-Radio--focused": "Radio-module__hop-Radio--focused___WiNxl", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___JZ4wW", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___FbKXV", "hop-Radio--sm": "Radio-module__hop-Radio--sm___2I3ad", "hop-Radio--md": "Radio-module__hop-Radio--md___LkLVW", "hop-Radio__icon": "Radio-module__hop-Radio__icon___ZWDWh", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___pNFMD", "hop-Radio__box": "Radio-module__hop-Radio__box___-Sj0e", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___-iiHZ", "hop-Radio__text": "Radio-module__hop-Radio__text___LvdVH" };
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___2E1Ba", "hop-Radio--focused": "Radio-module__hop-Radio--focused___uZjvZ", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___I3nXi", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___g-XN4", "hop-Radio--sm": "Radio-module__hop-Radio--sm___fb-Zv", "hop-Radio--md": "Radio-module__hop-Radio--md___WvIhk", "hop-Radio__icon": "Radio-module__hop-Radio__icon___f49M7", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___65C4k", "hop-Radio__box": "Radio-module__hop-Radio__box___HLxF3", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___SgKK1", "hop-Radio__text": "Radio-module__hop-Radio__text___uZHkI" };
 var GlobalRadioCssSelector = "hop-Radio";
 function Radio(props, ref) {
   var _a;

package/dist/{chunk-TVV4RMFR.js → chunk-JJ4EFTES.js}

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

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

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-XT2MZWEV.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___KQaJ4", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___1a1jj" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-6PH4IIEW.js → chunk-M3K4IYX6.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___sG-Yd", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___h-WpU", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___QasW-", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___QjQ3I", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___PrX57", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___fZOdF", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___E-1I9", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___JDA4Q" };
 var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
 var AvatarToIconSizeAdapter = {
   xs: "md",

package/dist/{chunk-TKB5Q2WX.js → chunk-MJHMFANK.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___7GWRP", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___kZQJI", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___M0ask", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___7fE6W", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___5McYm" };
 var GlobalSwitchFieldCssSelector = "hop-SwitchField";
 var SwitchToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-BLQ72S4U.js → chunk-PFABSIDM.js}

@@ -12,7 +12,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioField.module.css#css-module
-var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___Jgsbe", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___OOojW", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___XP22b", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___01pmv", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___68qIi" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___uuirX", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___1lfkD", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___ytruf", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___waqNk", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___ySRK1" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-GXFFLWNF.js → chunk-PQXVL3YJ.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___FVhfN", "hop-Heading--xs": "Heading-module__hop-Heading--xs___t30s-", "hop-Heading--sm": "Heading-module__hop-Heading--sm___R6y6i", "hop-Heading--md": "Heading-module__hop-Heading--md___d6d9m", "hop-Heading--lg": "Heading-module__hop-Heading--lg___yqjzy", "hop-Heading--xl": "Heading-module__hop-Heading--xl___U0Gfz", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___B7lym", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___P65x-" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);

package/dist/{chunk-YRUBXLBX.js → chunk-Q63YLWI6.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___PiLz0", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___Cp15-", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___ZeMr9", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___xLgn9", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___6Go7N" };
 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-BQZQTNI6.js → chunk-RQKU3XDG.js}

@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___04OMd", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___gfk88", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___AWwpV", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___2HDvA", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___cWrk2", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___h-8op", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___-uxgb", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___TAcci" };
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___pg9lD", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___IeYfB", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___20OwE", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___8cAOO", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___bXsRU", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___QRAcI", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___72Z7i", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___cVwde" };
 var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
 function ButtonGroup(props, ref) {
   var _a, _b, _c, _d, _e;

package/dist/chunk-RWAVMW7T.js

@@ -0,0 +1,70 @@
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Label as Label$1 } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Label.module.css#css-module
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___L4zrw", "hop-Label__indicator": "Label-module__hop-Label__indicator___mWy1n" };
+var GlobalLabelCssSelector = "hop-Label";
+function Label(props, ref) {
+  [props, ref] = useContextProps(props, ref, LabelContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isRequired,
+    necessityIndicator = isRequired != null ? "icon" : null,
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const classNames = clsx(
+    className,
+    GlobalLabelCssSelector,
+    cssModule(
+      Label_module_default,
+      "hop-Label"
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const necessityLabel = isRequired ? stringFormatter.format("Label.necessityLabel.required") : stringFormatter.format("Label.necessityLabel.optional");
+  const requiredIndicator = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "aria-label": necessityLabel,
+      className: Label_module_default["hop-Label__indicator"],
+      children: "*"
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      children: [
+        children,
+        necessityIndicator === "label" && /* @__PURE__ */ jsxs("span", { children: [
+          " (",
+          necessityLabel,
+          ")"
+        ] }),
+        necessityIndicator === "icon" && isRequired && requiredIndicator
+      ]
+    }
+  );
+}
+var _Label = forwardRef(Label);
+_Label.displayName = "Label";
+
+export { GlobalLabelCssSelector, _Label };

package/dist/{chunk-6K6W32Q7.js → chunk-S5CK32KM.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-Q63YLWI6.js';
+import { _ClearButton } from './chunk-2XO5CZBO.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___eeVrI", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___tJI3Z", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___FHalK", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___051pF", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___4Vkaq", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___yge5P", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___TgcwI", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___ACElD", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___zKqjG" };
 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-I6OII2RA.js → chunk-SZSQZ4C7.js}

@@ -1,8 +1,8 @@
 import { LinkContext } from './chunk-4VVNSXIB.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-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Link.module.css#css-module
-var Link_module_default = { "hop-Link": "Link-module__hop-Link___aC99m", "hop-Link--quiet": "Link-module__hop-Link--quiet___f5kFR", "hop-Link--primary": "Link-module__hop-Link--primary___hGo6S", "hop-Link--secondary": "Link-module__hop-Link--secondary___PARtM", "hop-Link__icon": "Link-module__hop-Link__icon___s7bL3", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___nHoUZ", "hop-Link__text": "Link-module__hop-Link__text___WH945", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___4Suu1", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___fCZzm" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___7j4hs", "hop-Link--quiet": "Link-module__hop-Link--quiet___qnop0", "hop-Link--primary": "Link-module__hop-Link--primary___rpo9E", "hop-Link--secondary": "Link-module__hop-Link--secondary___SMBNe", "hop-Link__icon": "Link-module__hop-Link__icon___vyHs-", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___6SUHC", "hop-Link__text": "Link-module__hop-Link__text___y7rFF", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___tiWhC", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___kbqc7" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/{chunk-Q52NUBN7.js → chunk-T6MAOVLH.js}

@@ -1,6 +1,6 @@
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-6MSRPPI6.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { WarningIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -10,7 +10,7 @@ import { FieldErrorContext, useContextProps } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./ErrorMessage.module.css#css-module
-var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___dDEnR", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___pGy0-" };
+var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___6qmlS", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___m4Mae" };
 var GlobalErrorMessageCssSelector = "hop-ErrorMessage";
 function ErrorMessage(props, ref) {
   const validation = useContext(FieldErrorContext);