@hopper-ui/components 1.6.0 → 1.7.0

package/dist/chunk-6T7TUF6N.js

@@ -0,0 +1,178 @@
+import { ModalContext } from './chunk-JBPNJWC7.js';
+import { ImageContext } from './chunk-JAR7CXVS.js';
+import { FooterContext } from './chunk-I67NHYK4.js';
+import { HeaderContext } from './chunk-FOQ7KN4V.js';
+import { _BaseModal } from './chunk-3FHJOMUC.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { _CloseButton } from './chunk-CNG2EXC7.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Dialog, OverlayTriggerStateContext, Provider } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Modal.module.css#css-module
+var Modal_module_default = { "hop-Modal": "Modal-module__hop-Modal___Ei--r", "hop-Modal__top-container": "Modal-module__hop-Modal__top-container___bA5g3", "hop-Modal__bottom-container": "Modal-module__hop-Modal__bottom-container___gOf9-", "hop-Modal--has-image": "Modal-module__hop-Modal--has-image___Cl1Cz", "hop-Modal--fullscreen": "Modal-module__hop-Modal--fullscreen___4buL0", "hop-Modal--fullscreenTakeover": "Modal-module__hop-Modal--fullscreenTakeover___-YGbR", "hop-Modal__close": "Modal-module__hop-Modal__close___n6bxv", "hop-Modal__image": "Modal-module__hop-Modal__image___Y8e77", "hop-Modal__heading": "Modal-module__hop-Modal__heading___jPz-7", "hop-Modal__header": "Modal-module__hop-Modal__header___oNd92", "hop-Modal__content": "Modal-module__hop-Modal__content___LQcDa", "hop-Modal__footer": "Modal-module__hop-Modal__footer___GBCoi", "hop-Modal__button": "Modal-module__hop-Modal__button___XPYVr", "hop-Modal__button-group": "Modal-module__hop-Modal__button-group___5-j-Q" };
+var GlobalModalCssSelector = "hop-Modal";
+var ClearContexts = [ImageContext, HeadingContext, HeaderContext, ContentContext, FooterContext, ButtonContext, ButtonGroupContext];
+var Modal = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, ModalContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [imageRef, hasImage] = useSlot();
+  const {
+    className,
+    style,
+    slot,
+    isDismissible = true,
+    isKeyboardDismissDisabled,
+    size: sizeProp,
+    children: childrenProp,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    overlayProps,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalModalCssSelector,
+    cssModule(
+      Modal_module_default,
+      GlobalModalCssSelector,
+      size,
+      hasImage && "has-image"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      ...overlayProps,
+      isOpen,
+      defaultOpen,
+      onOpenChange,
+      hasImage,
+      size,
+      isDismissable: isDismissible,
+      isKeyboardDismissDisabled,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot,
+          children: (renderProps) => /* @__PURE__ */ jsxs(OverlayTriggerStateContext.Provider, { value: null, children: [
+            /* @__PURE__ */ jsxs("div", { className: Modal_module_default["hop-Modal__top-container"], children: [
+              /* @__PURE__ */ jsx(
+                Provider,
+                {
+                  values: [
+                    [ImageContext, { isHidden: true }],
+                    [HeadingContext, {
+                      className: Modal_module_default["hop-Modal__heading"],
+                      size: "lg",
+                      slot: "title",
+                      clearContexts: ClearContexts
+                    }],
+                    [HeaderContext, {
+                      className: Modal_module_default["hop-Modal__header"],
+                      clearContexts: ClearContexts
+                    }],
+                    [ContentContext, { isHidden: true }],
+                    [FooterContext, { isHidden: true }],
+                    [ButtonContext, { isHidden: true }],
+                    [ButtonGroupContext, { isHidden: true }]
+                  ],
+                  children: children(renderProps)
+                }
+              ),
+              isDismissible && /* @__PURE__ */ jsx(_CloseButton, { className: Modal_module_default["hop-Modal__close"] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [ImageContext, { isHidden: true }],
+                  [HeadingContext, { isHidden: true }],
+                  [HeaderContext, { isHidden: true }],
+                  [ContentContext, {
+                    className: Modal_module_default["hop-Modal__content"],
+                    clearContexts: ClearContexts
+                  }],
+                  [FooterContext, { isHidden: true }],
+                  [ButtonContext, { isHidden: true }],
+                  [ButtonGroupContext, { isHidden: true }]
+                ],
+                children: children(renderProps)
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: Modal_module_default["hop-Modal__bottom-container"], children: /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [ImageContext, { isHidden: true }],
+                  [HeadingContext, { isHidden: true }],
+                  [HeaderContext, { isHidden: true }],
+                  [ContentContext, { isHidden: true }],
+                  [FooterContext, {
+                    className: Modal_module_default["hop-Modal__footer"],
+                    clearContexts: ClearContexts
+                  }],
+                  [ButtonContext, {
+                    className: Modal_module_default["hop-Modal__button"],
+                    clearContexts: ClearContexts
+                  }],
+                  [ButtonGroupContext, {
+                    className: Modal_module_default["hop-Modal__button-group"],
+                    clearContexts: ClearContexts
+                  }]
+                ],
+                children: children(renderProps)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  //TODO: should support illustrations
+                  [ImageContext, {
+                    className: Modal_module_default["hop-Modal__image"],
+                    ref: imageRef,
+                    clearContexts: ClearContexts
+                  }],
+                  [HeadingContext, { isHidden: true }],
+                  [HeaderContext, { isHidden: true }],
+                  [ContentContext, { isHidden: true }],
+                  [FooterContext, { isHidden: true }],
+                  [ButtonContext, { isHidden: true }],
+                  [ButtonGroupContext, { isHidden: true }]
+                ],
+                children: children(renderProps)
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+var _Modal = forwardRef(Modal);
+_Modal.displayName = "Modal";
+
+export { GlobalModalCssSelector, _Modal };

package/dist/{chunk-ONCR64LB.js → chunk-AC5FLJJL.js}

@@ -1,6 +1,6 @@
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
 import { FloatingBadgeContext } from './chunk-KZSTJ3QZ.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./FloatingBadge.module.css#css-module
-var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___1dg-U", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___0A0N2" };
+var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___TCgcQ", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___sf8Z8" };
 var GlobalFloatingBadgeCssSelector = "hop-FloatingBadge";
 function FloatingBadge(props, ref) {
   [props, ref] = useContextProps(props, ref, FloatingBadgeContext);

package/dist/{chunk-H6CZ6DKP.js → chunk-ACG3BFJQ.js}

@@ -7,7 +7,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SvgImage.module.css#css-module
-var SvgImage_module_default = { "hop-SvgImage": "SvgImage-module__hop-SvgImage___PGHot" };
+var SvgImage_module_default = { "hop-SvgImage": "SvgImage-module__hop-SvgImage___WqqEa" };
 var GlobalSvgImageCssSelector = "hop-SvgImage";
 function SvgImage(props, ref) {
   [props, ref] = useContextProps(props, ref, SvgImageContext);

package/dist/{chunk-XKREPRGK.js → chunk-AV7XDPXN.js}

@@ -11,7 +11,7 @@ import { useContextProps, composeRenderProps } 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___jlIf6", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___vxH-6", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___l8zKZ", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___dl7qB", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___b2V01", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___oZubf", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___S1-4q", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___Tpkbm" };
+var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___1PUxR", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___AaOnx", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___8Ecej", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___aIh9w", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___9uTaH", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___ZOuAb", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___ybj8I", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___SKpum" };
 var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
 var AvatarToIconSizeAdapter = {
   xs: "md",

package/dist/{chunk-LAN2LJO2.js → chunk-AX3SYX3G.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___BeAQ5", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___X1dmW", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___LUDsc", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___ujK2H", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___H-YEh", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___rEkJI" };
+var ListBoxItemSkeleton_module_default = { "hop-ListBoxItemSkeleton": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___rObah", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___-NuVJ", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___iG7AV", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___RTYn-", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___79v-l", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___oDs-0" };
 var GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
 function ListBoxItemSkeleton(props, ref) {
   var _a;

package/dist/{chunk-H637L477.js → chunk-CC5SXS5R.js}

@@ -7,7 +7,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Card.module.css#css-module
-var Card_module_default = { "hop-Card": "Card-module__hop-Card___8DADe", "hop-Card--main": "Card-module__hop-Card--main___wRogx", "hop-Card--second-level": "Card-module__hop-Card--second-level___-P9wl" };
+var Card_module_default = { "hop-Card": "Card-module__hop-Card___B597M", "hop-Card--main": "Card-module__hop-Card--main___VI3rp", "hop-Card--second-level": "Card-module__hop-Card--second-level___9tutu" };
 var GlobalCardCssSelector = "hop-Card";
 var Card = (props, ref) => {
   [props, ref] = useContextProps(props, ref, CardContext);

package/dist/{chunk-KUGVMCIB.js → chunk-CIQZIY5N.js}

@@ -1,5 +1,5 @@
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-CQHB3HRC.js';
+import { _Text } from './chunk-L7DSMPLQ.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ensureTextWrapper(children, elementType) {

package/dist/{chunk-AYAKR4MK.js → chunk-CNG2EXC7.js}

@@ -1,5 +1,5 @@
-import { _Button } from './chunk-SW4UF2MM.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { _Button } from './chunk-5FXGGEA5.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
 import { CloseButtonContext } from './chunk-RBWFFWIG.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { DismissIcon } from '@hopper-ui/icons';
@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CloseButton.module.css#css-module
-var CloseButton_module_default = { "hop-CloseButton": "CloseButton-module__hop-CloseButton___GS-3t" };
+var CloseButton_module_default = { "hop-CloseButton": "CloseButton-module__hop-CloseButton___aWaMI" };
 var GlobalCloseButtonCssSelector = "hop-CloseButton";
 function CloseButton(props, ref) {
   [props, ref] = useContextProps(props, ref, CloseButtonContext);

package/dist/{chunk-REXPSB5P.js → chunk-CT3S2ZJP.js}

@@ -1,5 +1,5 @@
-import { TabLine } from './chunk-R5CEXZPL.js';
 import { TabListContext, InternalTabsContext } from './chunk-ZXON3BAA.js';
+import { TabLine } from './chunk-EDDYY4KO.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ import { useContextProps, TabListStateContext, TabList as TabList$1 } from 'reac
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./TabList.module.css#css-module
-var TabList_module_default = { "hop-TabList": "TabList-module__hop-TabList___qrByZ", "hop-TabList--standalone": "TabList-module__hop-TabList--standalone___1FRRe", "hop-TabList--in-card": "TabList-module__hop-TabList--in-card___T1-jb", "hop-TabList__tablist": "TabList-module__hop-TabList__tablist___kGXeu", "hop-TabList--heading": "TabList-module__hop-TabList--heading___cnucT" };
+var TabList_module_default = { "hop-TabList": "TabList-module__hop-TabList___WpnwV", "hop-TabList--standalone": "TabList-module__hop-TabList--standalone___kwlhx", "hop-TabList--in-card": "TabList-module__hop-TabList--in-card___gqOCv", "hop-TabList__tablist": "TabList-module__hop-TabList__tablist___IKAk3", "hop-TabList--heading": "TabList-module__hop-TabList--heading___BzPNj" };
 var GlobalTabListCssSelector = "hop-TabList";
 function TabList(props, ref) {
   var _a, _b;

package/dist/{chunk-B2PCJYJW.js → chunk-DE74UTDH.js}

@@ -1,7 +1,7 @@
 import { ToggleArrowContext } from './chunk-LWPDIKEX.js';
 import { DisclosureHeaderContext } from './chunk-CPAFY34U.js';
-import { DisclosureContext } from './chunk-U4HRZ6DN.js';
 import { DisclosurePanelContext } from './chunk-5XY5L6ZN.js';
+import { DisclosureContext } from './chunk-U4HRZ6DN.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -12,7 +12,7 @@ import { useContextProps, useSlottedContext, composeRenderProps, Disclosure as D
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Disclosure.module.css#css-module
-var Disclosure_module_default = { "hop-Disclosure": "Disclosure-module__hop-Disclosure___N9slg", "hop-Disclosure__header": "Disclosure-module__hop-Disclosure__header___LUzeY", "hop-Disclosure--inline": "Disclosure-module__hop-Disclosure--inline___yVuJf", "hop-Disclosure__panel": "Disclosure-module__hop-Disclosure__panel___OmJUv" };
+var Disclosure_module_default = { "hop-Disclosure": "Disclosure-module__hop-Disclosure___ouzzc", "hop-Disclosure__header": "Disclosure-module__hop-Disclosure__header___tLUKD", "hop-Disclosure--inline": "Disclosure-module__hop-Disclosure--inline___j8F9D", "hop-Disclosure__panel": "Disclosure-module__hop-Disclosure__panel___LejU6" };
 var GlobalDisclosureCssSelector = "hop-Disclosure";
 function Disclosure(props, ref) {
   [props, ref] = useContextProps(props, ref, DisclosureContext);

package/dist/{chunk-W53AAAUA.js → chunk-DEFXMEBJ.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-PNEJ6JDM.js';
-import { _Text } from './chunk-CQHB3HRC.js';
+import { _Text } from './chunk-L7DSMPLQ.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___bH5cE", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___lLc5y" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___QIP7E", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___bYyzZ" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-HGSA2Y3P.js → chunk-DP4FHVJR.js}

@@ -1,15 +1,15 @@
-import { TextFieldContext } from './chunk-O4XPUINW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-2USDHEIV.js';
-import { Input } from './chunk-U35DID2L.js';
-import { _InputGroup } from './chunk-MYPNAEEC.js';
-import { _Label } from './chunk-SINPHU2Z.js';
-import { _HelperMessage } from './chunk-W53AAAUA.js';
-import { _ErrorMessage } from './chunk-HCFKAC4T.js';
-import { _ClearButton } from './chunk-L4D32IWU.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { ensureTextWrapper } from './chunk-KUGVMCIB.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { _RemainingCharacterCount } from './chunk-67EK2P5M.js';
+import { Input } from './chunk-S5AHDRSE.js';
+import { _InputGroup } from './chunk-UBILZ2MS.js';
+import { FieldLabel } from './chunk-PDWWX5JI.js';
+import { _HelperMessage } from './chunk-DEFXMEBJ.js';
+import { _ErrorMessage } from './chunk-23WYVBUK.js';
+import { _ClearButton } from './chunk-JNJFX2LE.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
+import { ensureTextWrapper } from './chunk-CIQZIY5N.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -25,7 +25,7 @@ import { useContextProps, composeRenderProps, TextField as TextField$1 } from 'r
 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___Z-vt8", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___MSPVi", "hop-TextField__Label": "TextField-module__hop-TextField__Label___1tFwQ", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___gg6U0", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___cMdpL", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___tr0-h", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___OWalD" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___nNpMg", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___f42pQ", "hop-TextField__Label": "TextField-module__hop-TextField__Label___5MOpI", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___vsNDI", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___KqLxZ", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___4kKV8", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___4owpa" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -62,6 +62,7 @@ function TextField(props, ref) {
     inputGroupProps,
     remainingCharacterCountProps,
     label,
+    contextualHelp,
     description,
     errorMessage,
     ...otherProps
@@ -146,7 +147,18 @@ function TextField(props, ref) {
     }
   ) });
   const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && /* @__PURE__ */ jsx(_Label, { className: TextField_module_default["hop-TextField__Label"], isRequired, necessityIndicator, children: label }),
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        wrapperProps: {
+          className: TextField_module_default["hop-TextField__Label"]
+        },
+        isRequired,
+        necessityIndicator,
+        contextualHelp,
+        children: label
+      }
+    ),
     inputMarkup,
     description && /* @__PURE__ */ jsx(_HelperMessage, { className: TextField_module_default["hop-TextField__HelperMessage"], children: description }),
     /* @__PURE__ */ jsx(_ErrorMessage, { className: TextField_module_default["hop-TextField__ErrorMessage"], children: errorMessage })

package/dist/{chunk-62EZGVKH.js → chunk-EBXH6HHZ.js}

@@ -1,13 +1,13 @@
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
-import { Input } from './chunk-U35DID2L.js';
-import { _InputGroup } from './chunk-MYPNAEEC.js';
-import { _Label } from './chunk-SINPHU2Z.js';
-import { _HelperMessage } from './chunk-W53AAAUA.js';
-import { _ErrorMessage } from './chunk-HCFKAC4T.js';
-import { _EmbeddedButton } from './chunk-5WUSHVW7.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { Input } from './chunk-S5AHDRSE.js';
+import { _InputGroup } from './chunk-UBILZ2MS.js';
+import { FieldLabel } from './chunk-PDWWX5JI.js';
+import { _HelperMessage } from './chunk-DEFXMEBJ.js';
+import { _ErrorMessage } from './chunk-23WYVBUK.js';
+import { _EmbeddedButton } from './chunk-KKUSWUZC.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { EyeVisibleIcon, EyeHiddenIcon } from '@hopper-ui/icons';
@@ -20,7 +20,7 @@ import { useContextProps, composeRenderProps, TextField } from 'react-aria-compo
 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___vX7Ej", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___ATND8", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___ugjsl", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___Y3Mwq", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___IVRNw", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___EXILm" };
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___15NYm", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___fjZCZ", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___fQTe4", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___9BMhI", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___BMY87", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___tjF1T" };
 var GlobalPasswordFieldCssSelector = "hop-PasswordField";
 function PasswordField(props, ref) {
   var _a;
@@ -35,6 +35,7 @@ function PasswordField(props, ref) {
   const stringFormatter = useLocalizedString();
   const {
     className,
+    contextualHelp,
     style: styleProp,
     size,
     placeholder,
@@ -100,7 +101,16 @@ function PasswordField(props, ref) {
     }
   ) });
   const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && /* @__PURE__ */ jsx(_Label, { className: PasswordField_module_default["hop-PasswordField__Label"], isRequired, necessityIndicator, children: label }),
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        className: PasswordField_module_default["hop-PasswordField__Label"],
+        contextualHelp,
+        isRequired,
+        necessityIndicator,
+        children: label
+      }
+    ),
     inputMarkup,
     description && /* @__PURE__ */ jsx(_HelperMessage, { className: PasswordField_module_default["hop-PasswordField__HelperMessage"], children: description }),
     /* @__PURE__ */ jsx(_ErrorMessage, { className: PasswordField_module_default["hop-PasswordField__ErrorMessage"], children: errorMessage })

package/dist/{chunk-R5CEXZPL.js → chunk-EDDYY4KO.js}

@@ -5,7 +5,7 @@ import { TabListStateContext } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./TabLine.module.css#css-module
-var TabLine_module_default = { "hop-TabLine": "TabLine-module__hop-TabLine___rpJnT", "hop-TabLine--disabled": "TabLine-module__hop-TabLine--disabled___4cyUU" };
+var TabLine_module_default = { "hop-TabLine": "TabLine-module__hop-TabLine___5CNI1", "hop-TabLine--disabled": "TabLine-module__hop-TabLine--disabled___cjaWT" };
 var GlobalTabLineCssSelector = "hop-TabLine";
 function TabLine(props) {
   var _a;

package/dist/{chunk-SINPHU2Z.js → chunk-FIY4TUYL.js}

@@ -1,31 +1,25 @@
 import { LabelContext } from './chunk-YVCZUIU3.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem } from '@hopper-ui/styled-system';
 import { filterDOMProps } from '@react-aria/utils';
 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';
+import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Label.module.css#css-module
-var Label_module_default = { "hop-Label": "Label-module__hop-Label___tzV87", "hop-Label__indicator": "Label-module__hop-Label__indicator___Wp4MQ" };
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___dgJtM" };
 var GlobalLabelCssSelector = "hop-Label";
 function Label(props, ref) {
   [props, ref] = useContextProps(props, ref, LabelContext);
-  props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,
     children,
     slot,
     style,
-    isRequired,
-    necessityIndicator,
     ...otherProps
   } = ownProps;
-  const stringFormatter = useLocalizedString();
   const classNames = clsx(
     className,
     GlobalLabelCssSelector,
@@ -39,18 +33,8 @@ function Label(props, ref) {
     ...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: "*"
-    }
-  );
   const filteredProps = filterDOMProps(otherProps, { labelable: true });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Label$1,
     {
       ref,
@@ -58,15 +42,7 @@ function Label(props, ref) {
       slot: slot || void 0,
       style: mergedStyles,
       ...filteredProps,
-      children: [
-        children,
-        necessityIndicator === "label" && !isRequired && /* @__PURE__ */ jsxs("span", { className: Label_module_default["hop-Label__label-indicator"], children: [
-          " (",
-          necessityLabel,
-          ")"
-        ] }),
-        necessityIndicator === "asterisk" && isRequired && requiredIndicator
-      ]
+      children
     }
   );
 }

package/dist/{chunk-V2AGZ5A5.js → chunk-G2IQWVGX.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___JGBdL" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___m2E3v" };
 var GlobalIconListCssSelector = "hop-IconList";
 function IconList(props, ref) {
   [props, ref] = useContextProps(props, ref, IconListContext);

package/dist/{chunk-K73FGFB2.js → chunk-G5GYOSK7.js}

@@ -1,16 +1,16 @@
 import { InternalTagGroupContext } from './chunk-4BWTFR22.js';
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _ClearButton } from './chunk-L4D32IWU.js';
-import { mapOrbiterToHopperVariants } from './chunk-5WUSHVW7.js';
+import { _ClearButton } from './chunk-JNJFX2LE.js';
+import { mapOrbiterToHopperVariants } from './chunk-KKUSWUZC.js';
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
 import { AvatarContext } from './chunk-FA26RZSE.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { _Spinner } from './chunk-C76BH4QR.js';
+import { _Spinner } from './chunk-53QBBZR4.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { ensureTextWrapper } from './chunk-KUGVMCIB.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { ensureTextWrapper } from './chunk-CIQZIY5N.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -25,7 +25,7 @@ import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-co
 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___mI4Rh", "hop-Tag--sm": "Tag-module__hop-Tag--sm___lgosf", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___ENywy", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___RHtd3", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___fBoBy", "hop-Tag--md": "Tag-module__hop-Tag--md___09iZG", "hop-Tag--lg": "Tag-module__hop-Tag--lg___cILfj", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___MrJAc", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___6AySc", "hop-Tag--progress": "Tag-module__hop-Tag--progress___v6gGs", "hop-Tag--positive": "Tag-module__hop-Tag--positive___WFbf2", "hop-Tag--caution": "Tag-module__hop-Tag--caution___OrSwB", "hop-Tag--negative": "Tag-module__hop-Tag--negative___sV4vK", "hop-Tag--option1": "Tag-module__hop-Tag--option1___cw6KP", "hop-Tag--option2": "Tag-module__hop-Tag--option2___wG4lZ", "hop-Tag--option3": "Tag-module__hop-Tag--option3___tXci-", "hop-Tag--option4": "Tag-module__hop-Tag--option4___Tq-l3", "hop-Tag--option5": "Tag-module__hop-Tag--option5___WK1on", "hop-Tag--option6": "Tag-module__hop-Tag--option6___hkYXa", "hop-Tag__icon": "Tag-module__hop-Tag__icon___iBJ1n", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___lUIms", "hop-Tag__text": "Tag-module__hop-Tag__text___RUrMx", "hop-Tag__badge": "Tag-module__hop-Tag__badge___XDiNI", "hop-Tag__badge--subdued": "Tag-module__hop-Tag__badge--subdued___L5nxZ" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___TUAuQ", "hop-Tag--sm": "Tag-module__hop-Tag--sm___qupvw", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___LWGUY", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___owefL", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___JGUX1", "hop-Tag--md": "Tag-module__hop-Tag--md___orF2o", "hop-Tag--lg": "Tag-module__hop-Tag--lg___JhLRp", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___dqPlQ", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___o7oto", "hop-Tag--progress": "Tag-module__hop-Tag--progress___fCcQd", "hop-Tag--positive": "Tag-module__hop-Tag--positive___xBCWA", "hop-Tag--caution": "Tag-module__hop-Tag--caution___U-1Km", "hop-Tag--negative": "Tag-module__hop-Tag--negative___0ynAV", "hop-Tag--option1": "Tag-module__hop-Tag--option1___i9Q9R", "hop-Tag--option2": "Tag-module__hop-Tag--option2___srQPr", "hop-Tag--option3": "Tag-module__hop-Tag--option3___X7s-B", "hop-Tag--option4": "Tag-module__hop-Tag--option4___8hbe-", "hop-Tag--option5": "Tag-module__hop-Tag--option5___1GGgO", "hop-Tag--option6": "Tag-module__hop-Tag--option6___BMtkR", "hop-Tag__icon": "Tag-module__hop-Tag__icon___qdNLu", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___0ljri", "hop-Tag__text": "Tag-module__hop-Tag__text___0JZM5", "hop-Tag__badge": "Tag-module__hop-Tag__badge___bA1PK", "hop-Tag__badge--subdued": "Tag-module__hop-Tag__badge--subdued___9EbJ-" };
 var GlobalTagCssSelector = "hop-Tag";
 var TagToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-TZZQP76M.js → chunk-GR5QWFCA.js}

@@ -1,8 +1,8 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { ensureTextWrapper } from './chunk-KUGVMCIB.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
+import { ensureTextWrapper } from './chunk-CIQZIY5N.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.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___oHb0r", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___ZuGio", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___f9YGd", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___Ft4Xh", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___VcJuW", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___puaui", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___w8beQ", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___3zmf2" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___RAOey", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___i3CSP", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___GL7zO", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___s-OVR", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___LdGhF", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___oqQ7-", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___QKTgI", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___vQWZ9" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/{chunk-BI3MQKBI.js → chunk-HERQEWF5.js}

@@ -1,7 +1,7 @@
-import { _OverlineText } from './chunk-SLFA36JO.js';
+import { _OverlineText } from './chunk-J5FY5YAZ.js';
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { slot, useStyledSystem } from '@hopper-ui/styled-system';
@@ -23,7 +23,7 @@ function mapOrbiterToHopperVariants(variant) {
 }
 
 // css-module:./Badge.module.css#css-module
-var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___KJ3W2", "hop-Badge--primary": "Badge-module__hop-Badge--primary___SQC7m", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___HYQtN", "hop-Badge--subdued": "Badge-module__hop-Badge--subdued___zilnb" };
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___A-Bla", "hop-Badge--primary": "Badge-module__hop-Badge--primary___E55Gz", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___0bxAx", "hop-Badge--subdued": "Badge-module__hop-Badge--subdued___zdomT" };
 var GlobalBadgeCssSelector = "hop-Badge";
 function Badge(props, ref) {
   [props, ref] = useContextProps(props, ref, BadgeContext);

package/dist/{chunk-R4ICRVDS.js → chunk-HQJZSCV7.js}

@@ -7,7 +7,7 @@ import { Form as Form$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Form.module.css#css-module
-var Form_module_default = { "hop-Form": "Form-module__hop-Form___F-45c" };
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___7RaBZ" };
 var GlobalFormCssSelector = "hop-Form";
 function useFormProps(props) {
   const ctx = useContext(FormContext);