@hopper-ui/components 1.6.1 → 1.8.0

package/dist/checkbox/src/index.js

@@ -1,25 +1,26 @@
-export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from '../../chunk-MC6PDZR7.js';
+export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from '../../chunk-DSK6IH5M.js';
+export { _CheckboxGroup as CheckboxGroup, GlobalCheckboxGroupCssSelector } from '../../chunk-FJUFE7XU.js';
+export { CheckboxFieldContext } from '../../chunk-ZGNK4GWA.js';
 export { CheckboxGroupContext } from '../../chunk-N7YDPVZL.js';
-import '../../chunk-Q5UDUQNS.js';
+import '../../chunk-E5RHW4IY.js';
+import '../../chunk-BD2ZOQJW.js';
 import '../../chunk-YVCZUIU3.js';
-import '../../chunk-CFBDROF2.js';
+import '../../chunk-57WEWZ4L.js';
 import '../../chunk-PNEJ6JDM.js';
-import '../../chunk-H7EN3SVB.js';
+import '../../chunk-DOP43XH5.js';
 import '../../chunk-FV74YT2D.js';
-export { _DecorativeCheckbox as DecorativeCheckbox, GlobalDecorativeCheckboxCssSelector } from '../../chunk-5H7VC5CQ.js';
-export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from '../../chunk-O7H6JXIB.js';
-export { _CheckboxField as CheckboxField, GlobalCheckboxFieldCssSelector } from '../../chunk-2PIBQPSE.js';
-export { CheckboxFieldContext } from '../../chunk-ZGNK4GWA.js';
+export { _DecorativeCheckbox as DecorativeCheckbox, GlobalDecorativeCheckboxCssSelector } from '../../chunk-7WJAJGOX.js';
+export { _Checkbox as Checkbox, GlobalCheckboxCssSelector } from '../../chunk-VECFKZI5.js';
 export { CheckboxContext } from '../../chunk-2EAZPH3M.js';
 import '../../chunk-2NSUMKNH.js';
-import '../../chunk-GBWXEK6N.js';
-import '../../chunk-4V3BBI6M.js';
+import '../../chunk-K3GNQGLK.js';
 import '../../chunk-UYYHPXUH.js';
-import '../../chunk-75DHKNW2.js';
-import '../../chunk-GDUMGSIP.js';
+import '../../chunk-GBWXEK6N.js';
+import '../../chunk-NNLLQWDS.js';
+import '../../chunk-NGZNCS3G.js';
 import '../../chunk-ZWU6DRRZ.js';
-import '../../chunk-QYLYNHMO.js';
-import '../../chunk-WJ55ZV54.js';
+import '../../chunk-QCFV6G6K.js';
+import '../../chunk-PQSMCDAM.js';
 import '../../chunk-ZNOU2CGM.js';
 import '../../chunk-65JPI4FL.js';
 import '../../chunk-M36KANKC.js';

package/dist/{chunk-SGQFSCGP.js → chunk-2AD6XN2R.js}

@@ -1,7 +1,7 @@
-import { DisclosureContext } from './chunk-U4HRZ6DN.js';
 import { DisclosurePanelContext } from './chunk-5XY5L6ZN.js';
+import { DisclosureContext } from './chunk-U4HRZ6DN.js';
 import { FormContext } from './chunk-UYYHPXUH.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -12,7 +12,7 @@ import { useContextProps, useSlottedContext, composeRenderProps, DisclosurePanel
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./DisclosurePanel.module.css#css-module
-var DisclosurePanel_module_default = { "hop-DisclosurePanel": "DisclosurePanel-module__hop-DisclosurePanel___FbQux", "hop-DisclosurePanel--inline": "DisclosurePanel-module__hop-DisclosurePanel--inline___B7fkD", "hop-DisclosurePanel--disabled": "DisclosurePanel-module__hop-DisclosurePanel--disabled___XwxeW", "hop-DisclosurePanel__text": "DisclosurePanel-module__hop-DisclosurePanel__text___tbvtU" };
+var DisclosurePanel_module_default = { "hop-DisclosurePanel": "DisclosurePanel-module__hop-DisclosurePanel___HLhIQ", "hop-DisclosurePanel--inline": "DisclosurePanel-module__hop-DisclosurePanel--inline___9ivvO", "hop-DisclosurePanel--disabled": "DisclosurePanel-module__hop-DisclosurePanel--disabled___fcp3t", "hop-DisclosurePanel__text": "DisclosurePanel-module__hop-DisclosurePanel__text___OdXkh" };
 var GlobalDisclosurePanelCssSelector = "hop-DisclosurePanel";
 function DisclosurePanel(props, ref) {
   [props, ref] = useContextProps(props, ref, DisclosurePanelContext);

package/dist/chunk-3ETJUGAP.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-ZHEWPE46.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { _CloseButton } from './chunk-HL2I2YUG.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___ySHCj", "hop-Modal__top-container": "Modal-module__hop-Modal__top-container___bFrTu", "hop-Modal__bottom-container": "Modal-module__hop-Modal__bottom-container___WTLwC", "hop-Modal--has-image": "Modal-module__hop-Modal--has-image___sl-TK", "hop-Modal--fullscreen": "Modal-module__hop-Modal--fullscreen___YAq2t", "hop-Modal--fullscreenTakeover": "Modal-module__hop-Modal--fullscreenTakeover___vQhe1", "hop-Modal__close": "Modal-module__hop-Modal__close___-vEV5", "hop-Modal__image": "Modal-module__hop-Modal__image___w1y6y", "hop-Modal__heading": "Modal-module__hop-Modal__heading___3DZyE", "hop-Modal__header": "Modal-module__hop-Modal__header___O6d3Y", "hop-Modal__content": "Modal-module__hop-Modal__content___CT88q", "hop-Modal__footer": "Modal-module__hop-Modal__footer___BNSrO", "hop-Modal__button": "Modal-module__hop-Modal__button___8qI8d", "hop-Modal__button-group": "Modal-module__hop-Modal__button-group___QyHfu" };
+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-6EXB57VD.js → chunk-3OGBUJLO.js}

@@ -1,9 +1,9 @@
 import { useImageFallback } from './chunk-QJ5FQN3N.js';
-import { _BrokenAvatar } from './chunk-S37LFZ2Z.js';
+import { _BrokenAvatar } from './chunk-FXNQDM7U.js';
 import { AvatarContext } from './chunk-FA26RZSE.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { _Text } from './chunk-QYLYNHMO.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { _Text } from './chunk-QCFV6G6K.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___UK5w-", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___kGlrt", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___d9LVJ", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___rKLQC", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___VadBR", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___cG4AH", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___gYpb7", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___rPJY3", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___wGv-I", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___B4LtG", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___AMRxq", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___q-beY", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___zR-1U", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___V7lf3", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___M6MKQ", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___IlUqF", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___JwMgS" };
+var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___sOX9A", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___i1aUW", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___nwUvL", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___uyw33", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___Mui78", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___hHaUG", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___pqrQN", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___s0WXt", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___c3i5W", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___vCyti", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___JbRKY", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___xoYBk", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___T7ZoY", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___wTPOD", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___swMm0", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___en8-c", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___aGfAg" };
 var GlobalAvatarCssSelector = "hop-Avatar";
 var AvatarToTextSizeAdapter = {
   xs: "xs",

package/dist/chunk-3YYC7XZW.js

@@ -0,0 +1,190 @@
+import { PopoverTrigger } from './chunk-KHDRGFVV.js';
+import { _PopoverBase } from './chunk-QXTTPOP5.js';
+import { ContextualHelpContext } from './chunk-MR5BPD6R.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.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___-cswK", "hop-ContextualHelp__popover": "ContextualHelp-module__hop-ContextualHelp__popover___-vnF0" };
+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-CFBDROF2.js → chunk-57WEWZ4L.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-PNEJ6JDM.js';
-import { _Text } from './chunk-QYLYNHMO.js';
+import { _Text } from './chunk-QCFV6G6K.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___-PNk8", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___mhyT3" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___eMQ7m", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___hi1Mh" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-B3VVOS3E.js → chunk-5F2LUFRN.js}

@@ -1,7 +1,7 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.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';
@@ -13,7 +13,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___OpfZi", "hop-Radio--sm": "Radio-module__hop-Radio--sm___QtBHX", "hop-Radio--md": "Radio-module__hop-Radio--md___PPakb", "hop-Radio__icon": "Radio-module__hop-Radio__icon___-VX5c", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___Hp7Kz", "hop-Radio__box": "Radio-module__hop-Radio__box___YlKA6", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___ndDTR", "hop-Radio__text": "Radio-module__hop-Radio__text___vjWkf" };
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___H2CQS", "hop-Radio--sm": "Radio-module__hop-Radio--sm___wsMEb", "hop-Radio--md": "Radio-module__hop-Radio--md___Y9v6E", "hop-Radio__icon": "Radio-module__hop-Radio__icon___AnsTY", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___bpfWX", "hop-Radio__box": "Radio-module__hop-Radio__box___sb7RR", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___d4tcu", "hop-Radio__text": "Radio-module__hop-Radio__text___y2Kzb" };
 var GlobalRadioCssSelector = "hop-Radio";
 function Radio(props, ref) {
   var _a;

package/dist/{chunk-ZJKGATZR.js → chunk-5I6PDORP.js}

@@ -1,4 +1,5 @@
 import { ContentContext } from './chunk-IXB2WK56.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 Content(props, ref) {
     children,
     style,
     slot,
+    isHidden,
+    clearContexts,
     ...otherProps
   } = ownProps;
+  if (isHidden) {
+    return null;
+  }
   const classNames = clsx(
     GlobalContentCssSelector,
     stylingProps.className,
@@ -25,7 +31,7 @@ function Content(props, ref) {
     ...stylingProps.style,
     ...style
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClearProviders, { values: clearContexts, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -35,7 +41,7 @@ function Content(props, ref) {
       ...otherProps,
       children
     }
-  );
+  ) });
 }
 var _Content = slot("content", forwardRef(Content));
 _Content.displayName = "Content";

package/dist/{chunk-V6QSG3P7.js → chunk-5MNBACCS.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___H7rOL", "hop-Input--sm": "Input-module__hop-Input--sm___PJnM1" };
+var Input_module_default = { "hop-Input": "Input-module__hop-Input___J6jKQ", "hop-Input--sm": "Input-module__hop-Input--sm___4-YdC" };
 var InputContext = createContext({});
 var Input = forwardRef(function Input2(props, ref) {
   var _a;

package/dist/{chunk-N63SCDXK.js → chunk-72UDPGXN.js}

@@ -1,6 +1,6 @@
+import { DisclosurePanelContext } from './chunk-5XY5L6ZN.js';
 import { DisclosureHeaderContext } from './chunk-CPAFY34U.js';
 import { DisclosureContext } from './chunk-U4HRZ6DN.js';
-import { DisclosurePanelContext } from './chunk-5XY5L6ZN.js';
 import { AccordionContext } from './chunk-NF64YIEZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -11,7 +11,7 @@ import { useContextProps, composeRenderProps, DisclosureGroup } from 'react-aria
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Accordion.module.css#css-module
-var Accordion_module_default = { "hop-Accordion": "Accordion-module__hop-Accordion___j7Phb", "hop-Accordion--inline": "Accordion-module__hop-Accordion--inline___oCeR0", "hop-Accordion__disclosure": "Accordion-module__hop-Accordion__disclosure___Lofju", "hop-Accordion__disclosure-header": "Accordion-module__hop-Accordion__disclosure-header___Lmmhd", "hop-Accordion__disclosure-panel": "Accordion-module__hop-Accordion__disclosure-panel___OAvBJ" };
+var Accordion_module_default = { "hop-Accordion": "Accordion-module__hop-Accordion___8aIDO", "hop-Accordion--inline": "Accordion-module__hop-Accordion--inline___1qVx0", "hop-Accordion__disclosure": "Accordion-module__hop-Accordion__disclosure___Ivbc-", "hop-Accordion__disclosure-header": "Accordion-module__hop-Accordion__disclosure-header___NoAk6", "hop-Accordion__disclosure-panel": "Accordion-module__hop-Accordion__disclosure-panel___HVQa-" };
 var GlobalAccordionCssSelector = "hop-Accordion";
 function Accordion(props, ref) {
   [props, ref] = useContextProps(props, ref, AccordionContext);

package/dist/{chunk-TVDSIL3G.js → chunk-76JOA74P.js}

@@ -1,9 +1,9 @@
 import { TagGroupContext, InternalTagGroupContext } from './chunk-4BWTFR22.js';
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _Label } from './chunk-Q5UDUQNS.js';
-import { _HelperMessage } from './chunk-CFBDROF2.js';
-import { _ErrorMessage } from './chunk-H7EN3SVB.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
+import { FieldLabel } from './chunk-E5RHW4IY.js';
+import { _HelperMessage } from './chunk-57WEWZ4L.js';
+import { _ErrorMessage } from './chunk-DOP43XH5.js';
+import { useFormProps } from './chunk-K3GNQGLK.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___TZZaK", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___5Fhna", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___wWsFW", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___QIUDH", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___wj7lM" };
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___X4UhS", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___ilXlq", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___8tq8Q", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___1CYPQ", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___iWSHu" };
 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,
                   {

package/dist/{chunk-3WNM2QCE.js → chunk-7K3TKE2R.js}

@@ -1,6 +1,6 @@
 import { TooltipContext } from './chunk-77PD5K3M.js';
 import { TooltipTriggerContext } from './chunk-XXEXHHC6.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useColorSchemeContext, getRootCSSClasses } from '@hopper-ui/styled-system';
@@ -10,7 +10,7 @@ import { useContextProps, Provider, Tooltip as Tooltip$1 } from 'react-aria-comp
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Tooltip.module.css#css-module
-var Tooltip_module_default = { "hop-Tooltip": "Tooltip-module__hop-Tooltip___P0P5e", "hop-Tooltip--top": "Tooltip-module__hop-Tooltip--top___ZfA-q", "hop-Tooltip--right": "Tooltip-module__hop-Tooltip--right___zw45r", "hop-Tooltip--bottom": "Tooltip-module__hop-Tooltip--bottom___dlSjn", "hop-Tooltip--left": "Tooltip-module__hop-Tooltip--left___IRimW", "slide": "Tooltip-module__slide___Wdi5R" };
+var Tooltip_module_default = { "hop-Tooltip": "Tooltip-module__hop-Tooltip___nVbS-", "hop-Tooltip--top": "Tooltip-module__hop-Tooltip--top___0Picg", "hop-Tooltip--right": "Tooltip-module__hop-Tooltip--right___J7XGb", "hop-Tooltip--bottom": "Tooltip-module__hop-Tooltip--bottom___apr36", "hop-Tooltip--left": "Tooltip-module__hop-Tooltip--left___98KWK", "slide": "Tooltip-module__slide___COczJ" };
 var GlobalTooltipCssSelector = "hop-Tooltip";
 function Tooltip(props, ref) {
   [props, ref] = useContextProps(props, ref, TooltipContext);

package/dist/{chunk-Z6Z2LMH2.js → chunk-7KXUKO5L.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-FA26RZSE.js';
-import { _RichIconAvatarImage } from './chunk-N6FVXOZU.js';
+import { _RichIconAvatarImage } from './chunk-NRUHVUQY.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { AnonymousRichIcon } from '@hopper-ui/icons';