@hopper-ui/components 1.6.0 → 1.7.0

package/dist/{chunk-XUO7HGRK.js → chunk-PJ2RHMZ3.js}

@@ -1,5 +1,5 @@
 import { CustomModalContext } from './chunk-AJKN2ALX.js';
-import { _BaseModal } from './chunk-HEHMZWBC.js';
+import { _BaseModal } from './chunk-3FHJOMUC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ import { useContextProps, composeRenderProps, Dialog, OverlayTriggerStateContext
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CustomModal.module.css#css-module
-var CustomModal_module_default = { "hop-CustomModal": "CustomModal-module__hop-CustomModal___vgagD" };
+var CustomModal_module_default = { "hop-CustomModal": "CustomModal-module__hop-CustomModal___CihLj" };
 var GlobalCustomModalCssSelector = "hop-CustomModal";
 var CustomModal = (props, ref) => {
   var _a;

package/dist/{chunk-WJ55ZV54.js → chunk-PQSMCDAM.js}

@@ -6,6 +6,9 @@ function ClearProviders({
   values,
   children
 }) {
+  if (!values || values.length === 0) {
+    return children;
+  }
   for (const Context of values) {
     children = /* @__PURE__ */ jsx(Context.Provider, { value: null, children });
   }

package/dist/{chunk-ARCWWXRR.js → chunk-PQVBUEXC.js}

@@ -1,8 +1,8 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { ensureTextWrapper } from './chunk-KUGVMCIB.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.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';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./DecorativeCheckbox.module.css#css-module
-var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___8GaHh Checkbox-module__hop-Checkbox___oHb0r", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___fwtbW Checkbox-module__hop-Checkbox--sm___ZuGio", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___i0oAM Checkbox-module__hop-Checkbox--md___f9YGd", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___PyeWV Checkbox-module__hop-Checkbox__icon___Ft4Xh", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___tFw7N Checkbox-module__hop-Checkbox__icon___Ft4Xh", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___Aztjh Checkbox-module__hop-Checkbox__box___puaui", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___0u5F4 Checkbox-module__hop-Checkbox__check___w8beQ", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___bKeKU Checkbox-module__hop-Checkbox__text___3zmf2" };
+var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___agg1U Checkbox-module__hop-Checkbox___RAOey", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___9dMA0 Checkbox-module__hop-Checkbox--sm___i3CSP", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___Rd0Gm Checkbox-module__hop-Checkbox--md___GL7zO", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___6J6me Checkbox-module__hop-Checkbox__icon___s-OVR", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___w-8bI Checkbox-module__hop-Checkbox__icon___s-OVR", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___Uw7KN Checkbox-module__hop-Checkbox__box___oqQ7-", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___m8tUW Checkbox-module__hop-Checkbox__check___QKTgI", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___0JcKA Checkbox-module__hop-Checkbox__text___vQWZ9" };
 var GlobalDecorativeCheckboxCssSelector = "hop-DecorativeCheckbox";
 function DecorativeCheckbox(props, ref) {
   var _a;

package/dist/{chunk-SEQN7G35.js → chunk-QARGGDML.js}

@@ -1,9 +1,9 @@
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
-import { _Text } from './chunk-CQHB3HRC.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
+import { _Text } from './chunk-L7DSMPLQ.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./CheckboxField.module.css#css-module
-var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___WbOMN", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___8V3hn", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___OiTum", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___Yx0se", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___2kOCO" };
+var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___5HYK9", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___5W8yn", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___90C92", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___Dqu-O", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___JDrLW" };
 var GlobalCheckboxFieldCssSelector = "hop-CheckboxField";
 var CheckboxToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-IJZK5LYV.js → chunk-QDN24QKG.js}

@@ -5,7 +5,7 @@ import { MenuSection as MenuSection$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./MenuSection.module.css#css-module
-var MenuSection_module_default = { "hop-MenuSection": "MenuSection-module__hop-MenuSection___tvNCh" };
+var MenuSection_module_default = { "hop-MenuSection": "MenuSection-module__hop-MenuSection___I83No" };
 var GlobalMenuSectionCssSelector = "hop-MenuSection";
 function MenuSection(props) {
   const { stylingProps, ...ownProps } = useStyledSystem(props);

package/dist/{chunk-QVHMDEWO.js → chunk-QSCBTSIF.js}

@@ -1,6 +1,7 @@
 import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { ClearProviders } from './chunk-PQSMCDAM.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -11,7 +12,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___gelmV", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___UVKLL", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___3ofI0", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___xZhf2", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___wmyqi", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___5V2JT", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___3A-HD", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___rcGGk" };
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___-ALaZ", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___DnLYQ", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___xVumF", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___MCLnI", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___Yzha7", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___TPfzu", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___lpmtc", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___bOmqM" };
 var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
 function ButtonGroup(props, ref) {
   var _a, _b, _c, _d;
@@ -27,6 +28,8 @@ function ButtonGroup(props, ref) {
     style: styleProp,
     orientation: orientationProp,
     wrap: wrapProp,
+    isHidden,
+    clearContexts,
     ...otherProps
   } = ownProps;
   const align = useResponsiveValue(alignProp);
@@ -34,6 +37,9 @@ function ButtonGroup(props, ref) {
   const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
   const wrap = (_c = useResponsiveValue(wrapProp)) != null ? _c : true;
   const orientation = (_d = useResponsiveValue(orientationProp)) != null ? _d : "horizontal";
+  if (isHidden) {
+    return null;
+  }
   const classNames = clsx(
     className,
     GlobalButtonGroupCssSelector,
@@ -52,7 +58,7 @@ function ButtonGroup(props, ref) {
     ...stylingProps.style,
     ...styleProp
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClearProviders, { values: clearContexts, children: /* @__PURE__ */ jsx(
     "div",
     {
       ...filterDOMProps(otherProps, { labelable: true }),
@@ -79,7 +85,7 @@ function ButtonGroup(props, ref) {
         }
       )
     }
-  );
+  ) });
 }
 var _ButtonGroup = slot("button-group", forwardRef(ButtonGroup));
 _ButtonGroup.displayName = "ButtonGroup";

package/dist/{chunk-RNVPPIZQ.js → chunk-RIFW5PYW.js}

@@ -1,8 +1,8 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { ensureTextWrapper } from './chunk-KUGVMCIB.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.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';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./DecorativeRadio.module.css#css-module
-var DecorativeRadio_module_default = { "hop-DecorativeRadio": "DecorativeRadio-module__hop-DecorativeRadio___AlhGD Radio-module__hop-Radio___eBueo", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___UnzCt Radio-module__hop-Radio--sm___GQdC5", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___wNI7X Radio-module__hop-Radio--md___63v-N", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___PfsHi Radio-module__hop-Radio__icon___dVuoR", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___XQuSG Radio-module__hop-Radio__icon___dVuoR", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___Y-AnD Radio-module__hop-Radio__box___6R1dw", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___sfqjq Radio-module__hop-Radio__bullet___gVfg-", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___Z41w7 Radio-module__hop-Radio__text___3WXI3" };
+var DecorativeRadio_module_default = { "hop-DecorativeRadio": "DecorativeRadio-module__hop-DecorativeRadio___X2ojB Radio-module__hop-Radio___oBKRQ", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___0duOP Radio-module__hop-Radio--sm___C-Q1U", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___qlpiC Radio-module__hop-Radio--md___8cI7H", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___X3Y3Y Radio-module__hop-Radio__icon___Ai4EA", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___Pe71- Radio-module__hop-Radio__icon___Ai4EA", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___whoC1 Radio-module__hop-Radio__box___gF3Ys", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___-GKnC Radio-module__hop-Radio__bullet___DLVyb", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___RXYUE Radio-module__hop-Radio__text___md8fJ" };
 var GlobalDecorativeRadioCssSelector = "hop-DecorativeRadio";
 function DecorativeRadio(props, ref) {
   var _a;

package/dist/{chunk-VOZN65OL.js → chunk-RN3FLBX4.js}

@@ -1,4 +1,5 @@
 import { FooterContext } from './chunk-I67NHYK4.js';
+import { ClearProviders } from './chunk-PQSMCDAM.js';
 import { slot, useStyledSystem } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
@@ -14,8 +15,13 @@ function Footer(props, ref) {
     children,
     style,
     slot,
+    isHidden,
+    clearContexts,
     ...otherProps
   } = ownProps;
+  if (isHidden) {
+    return null;
+  }
   const classNames = clsx(
     GlobalFooterCssSelector,
     stylingProps.className,
@@ -25,7 +31,7 @@ function Footer(props, ref) {
     ...stylingProps.style,
     ...style
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClearProviders, { values: clearContexts, children: /* @__PURE__ */ jsx(
     "footer",
     {
       ref,
@@ -35,7 +41,7 @@ function Footer(props, ref) {
       ...otherProps,
       children
     }
-  );
+  ) });
 }
 var _Footer = slot("footer", forwardRef(Footer));
 _Footer.displayName = "Footer";

package/dist/{chunk-U35DID2L.js → chunk-S5AHDRSE.js}

@@ -6,7 +6,7 @@ import { useContextProps, Input as Input$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Input.module.css#css-module
-var Input_module_default = { "hop-Input": "Input-module__hop-Input___IIwfV", "hop-Input--sm": "Input-module__hop-Input--sm___EpnTy" };
+var Input_module_default = { "hop-Input": "Input-module__hop-Input___b2lYS", "hop-Input--sm": "Input-module__hop-Input--sm___T3sjx" };
 var InputContext = createContext({});
 var Input = forwardRef(function Input2(props, ref) {
   var _a;

package/dist/chunk-TQQMWXRK.js

@@ -0,0 +1,190 @@
+import { PopoverTrigger } from './chunk-KHDRGFVV.js';
+import { _PopoverBase } from './chunk-W2EX7F7K.js';
+import { ContextualHelpContext } from './chunk-MR5BPD6R.js';
+import { ensureTextWrapper } from './chunk-CIQZIY5N.js';
+import { ClearProviders, ClearContainerSlots } from './chunk-PQSMCDAM.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { QuestionIcon, InfoIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { useContextProps, ButtonContext, Button, Provider } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./ContextualHelp.module.css#css-module
+var ContextualHelp_module_default = { "hop-ContextualHelp": "ContextualHelp-module__hop-ContextualHelp___DzLJ0", "hop-ContextualHelp__popover": "ContextualHelp-module__hop-ContextualHelp__popover___rV7qC" };
+var GlobalContextualHelpCssSelector = "hop-ContextualHelp";
+function ContextualHelp(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, ContextualHelpContext);
+  const popoverRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const [openTrigger, setOpenTrigger] = useState(void 0);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    defaultOpen,
+    isOpen: isOpenProp,
+    offset,
+    crossOffset,
+    onHoverStart,
+    onOpenChange,
+    onPress,
+    popoverProps,
+    placement = "top",
+    shouldFlip,
+    size: sizeProp,
+    style,
+    slot,
+    variant = "help",
+    ...otherProps
+  } = ownProps;
+  const [isOpen, setOpen] = useControlledState(isOpenProp, defaultOpen || false, onOpenChange);
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
+  const classNames = clsx(
+    GlobalContextualHelpCssSelector,
+    cssModule(
+      ContextualHelp_module_default,
+      GlobalContextualHelpCssSelector,
+      placement
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const clearCloseTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const scheduleClose = useCallback(() => {
+    clearCloseTimeout();
+    timeoutRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 50);
+  }, [clearCloseTimeout, setOpen]);
+  const handleOpenChanged = useCallback((open) => {
+    if (openTrigger === "hover") {
+      setOpen(open || isOpen);
+    } else {
+      setOpen(open);
+    }
+    if (!open) {
+      setOpenTrigger(void 0);
+    }
+  }, [openTrigger, setOpen, isOpen]);
+  const handleMouseMove = useCallback((event) => {
+    if (!isOpen || openTrigger !== "hover") {
+      return;
+    }
+    const { clientX, clientY } = event;
+    if (isPointInSafeArea(clientX, clientY, ref, popoverRef)) {
+      clearCloseTimeout();
+    } else {
+      scheduleClose();
+    }
+  }, [isOpen, openTrigger, ref, clearCloseTimeout, scheduleClose]);
+  const handleTriggerMouseEnter = useCallback(() => {
+    clearCloseTimeout();
+    setOpen(true);
+  }, [clearCloseTimeout, setOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        clearCloseTimeout();
+      };
+    }
+  }, [clearCloseTimeout, handleMouseMove, isOpen]);
+  const handlePressed = useCallback((e) => {
+    onPress == null ? void 0 : onPress(e);
+    setOpenTrigger("click");
+  }, [setOpenTrigger, onPress]);
+  const handleHoverStarted = useCallback((e) => {
+    onHoverStart == null ? void 0 : onHoverStart(e);
+    handleTriggerMouseEnter();
+    if (openTrigger === void 0) {
+      setOpenTrigger("hover");
+    }
+  }, [handleTriggerMouseEnter, openTrigger, setOpenTrigger, onHoverStart]);
+  const Icon = variant === "help" ? QuestionIcon : InfoIcon;
+  return (
+    /**
+     * TODO: Remove the ClearContainerSlots once RAC deploys the issue of Contexts being passed down to Popovers.
+     * https://github.com/adobe/react-spectrum/pull/8321#issue-3098913572
+     */
+    /* @__PURE__ */ jsx(
+      ClearProviders,
+      {
+        values: [
+          ButtonContext
+        ],
+        children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(PopoverTrigger, { isOpen, onOpenChange: handleOpenChanged, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              slot: slot != null ? slot : void 0,
+              className: classNames,
+              style: mergedStyles,
+              ref,
+              onPress: handlePressed,
+              onHoverStart: handleHoverStarted,
+              ...otherProps,
+              children: /* @__PURE__ */ jsx(Icon, { size })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            _PopoverBase,
+            {
+              ref: popoverRef,
+              crossOffset,
+              isNonModal: openTrigger === "hover",
+              offset,
+              placement,
+              shouldFlip,
+              className: clsx(popoverProps == null ? void 0 : popoverProps.className, ContextualHelp_module_default["hop-ContextualHelp__popover"]),
+              children: /* @__PURE__ */ jsx(
+                Provider,
+                {
+                  values: [
+                    [TextContext, {
+                      size: "xs"
+                    }]
+                  ],
+                  children: ensureTextWrapper(children)
+                }
+              )
+            }
+          )
+        ] }) })
+      }
+    )
+  );
+}
+function isPointInSafeArea(x, y, triggeRef, popoverRef) {
+  if (!triggeRef.current || !popoverRef.current) {
+    return false;
+  }
+  const triggerRect = triggeRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const safeArea = {
+    top: Math.min(triggerRect.top, popoverRect.top),
+    right: Math.max(triggerRect.right, popoverRect.right),
+    bottom: Math.max(triggerRect.bottom, popoverRect.bottom),
+    left: Math.min(triggerRect.left, popoverRect.left)
+  };
+  const isSafe = x >= safeArea.left && x <= safeArea.right && y >= safeArea.top && y <= safeArea.bottom;
+  return isSafe;
+}
+var _ContextualHelp = forwardRef(ContextualHelp);
+_ContextualHelp.displayName = "ContextualHelp";
+
+export { GlobalContextualHelpCssSelector, _ContextualHelp };

package/dist/{chunk-PPV6OKAK.js → chunk-UBBZ4LV5.js}

@@ -1,13 +1,13 @@
 import { useFontFaceReady } from './chunk-IU6XMS2X.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-2USDHEIV.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 { useFormProps } from './chunk-R4ICRVDS.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { _RemainingCharacterCount } from './chunk-67EK2P5M.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 { useFormProps } from './chunk-HQJZSCV7.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
@@ -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___JnHZz", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___Uxp21", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___HitQI", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___K7MP0", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___ylLfV", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___1c4z3", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___VSP2v", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___R1-br", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___LcK5s", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___rkljN", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___RyLcV" };
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___r1Sqd", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___Bw9Pn", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___r0qV8", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___aO21j", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___M1s4z", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___Izeth", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___voe0u", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___qYCcv", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___czWmy", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___NNXnP", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___p2t1X" };
 var GlobalTextAreaCssSelector = "hop-TextArea";
 var DefaultMinimumTextAreaRows = 3;
 var pxToInt = (value) => {
@@ -126,6 +126,7 @@ function TextArea(props, ref) {
   });
   const {
     className,
+    contextualHelp,
     style: styleProp,
     size: sizeProp,
     showCharacterCount,
@@ -259,7 +260,16 @@ function TextArea(props, ref) {
     }
   ) });
   const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && /* @__PURE__ */ jsx(_Label, { className: TextArea_module_default["hop-TextArea__Label"], isRequired, necessityIndicator, children: label }),
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        className: TextArea_module_default["hop-TextArea__Label"],
+        contextualHelp,
+        isRequired,
+        necessityIndicator,
+        children: label
+      }
+    ),
     inputMarkup,
     description && /* @__PURE__ */ jsx(_HelperMessage, { className: TextArea_module_default["hop-TextArea__HelperMessage"], children: description }),
     /* @__PURE__ */ jsx(_ErrorMessage, { className: TextArea_module_default["hop-TextArea__ErrorMessage"], children: errorMessage })

package/dist/{chunk-MYPNAEEC.js → chunk-UBILZ2MS.js}

@@ -7,7 +7,7 @@ import { useContextProps, FieldErrorContext, composeRenderProps, Group } from 'r
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./InputGroup.module.css#css-module
-var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___Zq6pe", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___sAGm7" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___dpz8J", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___LJngv" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a;

package/dist/{chunk-VLGOJ5DY.js → chunk-UFR36PXP.js}

@@ -1,9 +1,9 @@
 import { useIsOverflow } from './chunk-EHXOXTDN.js';
 import { AvatarContext } from './chunk-FA26RZSE.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { _Text } from './chunk-CQHB3HRC.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { _Text } from './chunk-L7DSMPLQ.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';
@@ -16,7 +16,7 @@ import { useContextProps, SelectValueContext, SelectStateContext, useSlottedCont
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SelectValue.module.css#css-module
-var SelectValue_module_default = { "hop-SelectValue": "SelectValue-module__hop-SelectValue___Zjd3W", "hop-SelectValue__text": "SelectValue-module__hop-SelectValue__text___ZmIiN", "hop-SelectValue__avatar": "SelectValue-module__hop-SelectValue__avatar___1lyYH", "hop-SelectValue__icon": "SelectValue-module__hop-SelectValue__icon___h463a", "hop-SelectValue__end-icon": "SelectValue-module__hop-SelectValue__end-icon___BB8t-" };
+var SelectValue_module_default = { "hop-SelectValue": "SelectValue-module__hop-SelectValue___WZbm6", "hop-SelectValue__text": "SelectValue-module__hop-SelectValue__text___k7mso", "hop-SelectValue__avatar": "SelectValue-module__hop-SelectValue__avatar___ZOHuW", "hop-SelectValue__icon": "SelectValue-module__hop-SelectValue__icon___dZdIH", "hop-SelectValue__end-icon": "SelectValue-module__hop-SelectValue__end-icon___DZR8u" };
 var GlobalSelectValueCssSelector = "hop-SelectValue";
 var SelectValueToAvatarSizeAdapter = {
   sm: "xs",

package/dist/{chunk-KEDXRQG2.js → chunk-ULY62A7P.js}

@@ -1,12 +1,12 @@
 import { isFunction } from './chunk-TIPN4VYD.js';
+import { ListBoxSectionContext } from './chunk-MOZ6M5ZZ.js';
 import { ListBoxContext } from './chunk-4HEOTMP7.js';
-import { _ListBoxItem } from './chunk-RKZRG2QV.js';
+import { _ListBoxItem } from './chunk-VSCRFXJ2.js';
 import { ListBoxItemContext } from './chunk-FDJDFE4U.js';
-import { ListBoxSectionContext } from './chunk-MOZ6M5ZZ.js';
 import { HeaderContext } from './chunk-FOQ7KN4V.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { _Text } from './chunk-CQHB3HRC.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { _Text } from './chunk-L7DSMPLQ.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection }
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./ListBox.module.css#css-module
-var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___AbTVV", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___Hu9yL", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___juwhb", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___tEB62", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___l0TVR" };
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___lYzDi", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___s8oHK", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___dSbP6", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___-NndN", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___OPwVg" };
 var GlobalListBoxCssSelector = "hop-ListBox";
 var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
 var ListBoxToTextSizeAdapter = {

package/dist/{chunk-FOD6Q7UN.js → chunk-V5PLUMR5.js}

@@ -1,6 +1,6 @@
-import { InternalSegmentedControlContext } from './chunk-6BJLSAMM.js';
 import { SegmentedControlItemContext } from './chunk-VS3PE4S6.js';
-import { _Text } from './chunk-CQHB3HRC.js';
+import { InternalSegmentedControlContext } from './chunk-6BJLSAMM.js';
+import { _Text } from './chunk-L7DSMPLQ.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext } from '@hopper-ui/icons';
@@ -11,7 +11,7 @@ import { useContextProps, ToggleGroupStateContext, ToggleButton, Provider, DEFAU
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./SegmentedControlItem.module.css#css-module
-var SegmentedControlItem_module_default = { "hop-SegmentedControlItem": "SegmentedControlItem-module__hop-SegmentedControlItem___KPgag", "hop-SegmentedControlItem__slider": "SegmentedControlItem-module__hop-SegmentedControlItem__slider___-2PFd", "hop-SegmentedControlItem__wrapper": "SegmentedControlItem-module__hop-SegmentedControlItem__wrapper___mRtoH", "hop-SegmentedControlItem--md": "SegmentedControlItem-module__hop-SegmentedControlItem--md___n9lQG", "hop-SegmentedControlItem__icon": "SegmentedControlItem-module__hop-SegmentedControlItem__icon___bzFeG", "hop-SegmentedControlItem__text": "SegmentedControlItem-module__hop-SegmentedControlItem__text___kWoiS", "hop-SegmentedControlItem__start-icon": "SegmentedControlItem-module__hop-SegmentedControlItem__start-icon___kjYYJ", "hop-SegmentedControlItem--justified": "SegmentedControlItem-module__hop-SegmentedControlItem--justified___XcetV" };
+var SegmentedControlItem_module_default = { "hop-SegmentedControlItem": "SegmentedControlItem-module__hop-SegmentedControlItem___d8bYH", "hop-SegmentedControlItem__slider": "SegmentedControlItem-module__hop-SegmentedControlItem__slider___HEESq", "hop-SegmentedControlItem__wrapper": "SegmentedControlItem-module__hop-SegmentedControlItem__wrapper___SAyeX", "hop-SegmentedControlItem--md": "SegmentedControlItem-module__hop-SegmentedControlItem--md___qQnJa", "hop-SegmentedControlItem__icon": "SegmentedControlItem-module__hop-SegmentedControlItem__icon___3m6Ek", "hop-SegmentedControlItem__text": "SegmentedControlItem-module__hop-SegmentedControlItem__text___JlSFG", "hop-SegmentedControlItem__start-icon": "SegmentedControlItem-module__hop-SegmentedControlItem__start-icon___dtSqN", "hop-SegmentedControlItem--justified": "SegmentedControlItem-module__hop-SegmentedControlItem--justified___7duSS" };
 var GlobalSegmentedControlItemCssSelector = "hop-SegmentedControlItem";
 var SegmentedControlItem = (props, ref) => {
   var _a;

package/dist/{chunk-UIOWILYW.js → chunk-V7OAPBQT.js}

@@ -8,7 +8,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./ToggleArrow.module.css#css-module
-var ToggleArrow_module_default = { "hop-ToggleArrow": "ToggleArrow-module__hop-ToggleArrow___ZiCm7" };
+var ToggleArrow_module_default = { "hop-ToggleArrow": "ToggleArrow-module__hop-ToggleArrow___F3uDI" };
 var GlobalToggleArrowCssSelector = "hop-ToggleArrow";
 function ToggleArrow(props, ref) {
   [props, ref] = useContextProps(props, ref, ToggleArrowContext);

package/dist/{chunk-ZSOUOAD4.js → chunk-V7VDYDIQ.js}

@@ -1,8 +1,8 @@
-import { _PopoverBase } from './chunk-WDZO4L7Z.js';
+import { InternalMenuTriggerContext } from './chunk-ERUOMTWL.js';
 import { MenuContext, InternalMenuContext } from './chunk-U4LYXB7W.js';
 import { MenuItemContext } from './chunk-OGC6BUEX.js';
-import { InternalMenuTriggerContext } from './chunk-ERUOMTWL.js';
 import { DividerContext } from './chunk-AB4BRU6Z.js';
+import { _PopoverBase } from './chunk-W2EX7F7K.js';
 import { HeaderContext } from './chunk-FOQ7KN4V.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -13,7 +13,7 @@ import { useContextProps, Menu as Menu$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Menu.module.css#css-module
-var Menu_module_default = { "hop-Menu": "Menu-module__hop-Menu___FgwQR", "hop-Menu__popover": "Menu-module__hop-Menu__popover___5EIMV", "hop-Menu__header": "Menu-module__hop-Menu__header___vxEhp", "hop-Menu__divider": "Menu-module__hop-Menu__divider___LzWEK" };
+var Menu_module_default = { "hop-Menu": "Menu-module__hop-Menu___dxMmH", "hop-Menu__header": "Menu-module__hop-Menu__header___mkIkj", "hop-Menu__divider": "Menu-module__hop-Menu__divider___92H4y" };
 var GlobalMenuCssSelector = "hop-Menu";
 function Menu(props, ref) {
   [props, ref] = useContextProps(props, ref, MenuContext);
@@ -84,7 +84,6 @@ function Menu(props, ref) {
         outline: "none",
         offset: isSubmenu ? 12 : 8,
         crossOffset: isSubmenu ? -10 : 0,
-        className: clsx(popoverProps == null ? void 0 : popoverProps.className, Menu_module_default["hop-Menu__popover"]),
         ...popoverProps,
         children: content
       }

package/dist/{chunk-MP4UER4S.js → chunk-VBJVG2YA.js}

@@ -1,9 +1,9 @@
 import { TagGroupContext, InternalTagGroupContext } from './chunk-4BWTFR22.js';
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _Label } from './chunk-SINPHU2Z.js';
-import { _HelperMessage } from './chunk-W53AAAUA.js';
-import { _ErrorMessage } from './chunk-HCFKAC4T.js';
-import { useFormProps } from './chunk-R4ICRVDS.js';
+import { FieldLabel } from './chunk-PDWWX5JI.js';
+import { _HelperMessage } from './chunk-DEFXMEBJ.js';
+import { _ErrorMessage } from './chunk-23WYVBUK.js';
+import { useFormProps } from './chunk-HQJZSCV7.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, FieldErrorContext, TagGroup as Tag
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./TagGroup.module.css#css-module
-var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___RiCxo", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___mhhZK", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___DG3Es", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___K0kzq", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___KAUaL" };
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___48fwW", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___8gSQ3", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___FWPsU", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___IKwxJ", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___ysCU-" };
 var GlobalTagGroupCssSelector = "hop-TagGroup";
 function TagGroup(props, ref) {
   var _a;
@@ -24,6 +24,7 @@ function TagGroup(props, ref) {
   const {
     className,
     children,
+    contextualHelp,
     description,
     errorMessage,
     isInvalid = false,
@@ -103,7 +104,15 @@ function TagGroup(props, ref) {
               style,
               ...otherProps,
               children: [
-                label && /* @__PURE__ */ jsx(_Label, { className: TagGroup_module_default["hop-TagGroup__Label"], necessityIndicator, children: label }),
+                /* @__PURE__ */ jsx(
+                  FieldLabel,
+                  {
+                    className: TagGroup_module_default["hop-TagGroup__Label"],
+                    necessityIndicator,
+                    contextualHelp,
+                    children: label
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   TagList,
                   {