@hopper-ui/components 1.5.12 → 1.5.13

package/dist/chunk-FJYBZVXI.js

@@ -0,0 +1,219 @@
+import { InternalTagGroupContext } from './chunk-4BWTFR22.js';
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _ClearButton } from './chunk-CHA2MOQZ.js';
+import { mapOrbiterToHopperVariants } from './chunk-PHYO5KW6.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { _Spinner } from './chunk-DQT6VAIZ.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { useObjectRef, mergeProps, filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef, useEffect, useContext } from 'react';
+import { useFocusRing, useLink, useHover } from 'react-aria';
+import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Tag.module.css#css-module
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___UquVH", "hop-Tag--sm": "Tag-module__hop-Tag--sm___pv0Vq", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___ua5iJ", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___QNauM", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___FoPw2", "hop-Tag--md": "Tag-module__hop-Tag--md___B1pwh", "hop-Tag--lg": "Tag-module__hop-Tag--lg___pVvJ5", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___QZaUb", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___qXgSt", "hop-Tag--progress": "Tag-module__hop-Tag--progress___yqqh0", "hop-Tag--positive": "Tag-module__hop-Tag--positive___9wS6d", "hop-Tag--caution": "Tag-module__hop-Tag--caution___xk-Ho", "hop-Tag--negative": "Tag-module__hop-Tag--negative___bgSvP", "hop-Tag--option1": "Tag-module__hop-Tag--option1___z-6bh", "hop-Tag--option2": "Tag-module__hop-Tag--option2___dxesW", "hop-Tag--option3": "Tag-module__hop-Tag--option3___qpNsX", "hop-Tag--option4": "Tag-module__hop-Tag--option4___ujgfx", "hop-Tag--option5": "Tag-module__hop-Tag--option5___bVL8T", "hop-Tag--option6": "Tag-module__hop-Tag--option6___Q0P8h", "hop-Tag__icon": "Tag-module__hop-Tag__icon___T7DXs", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___1wTJZ", "hop-Tag__text": "Tag-module__hop-Tag__text___wFJvs", "hop-Tag__badge": "Tag-module__hop-Tag__badge___NxvcI", "hop-Tag__badge--subdued": "Tag-module__hop-Tag__badge--subdued___cV5Bu" };
+var GlobalTagCssSelector = "hop-Tag";
+var TagToTextSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToAvatarSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToButtonSizeAdapter = {
+  sm: "md",
+  md: "md",
+  lg: "lg"
+};
+function Tag(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TagContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    isInvalid,
+    isLoading,
+    size: sizeProp,
+    style: styleProp,
+    textValue: textValueProp,
+    variant = "neutral",
+    clearButtonProps,
+    spinnerProps,
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const textValue = textValueProp != null ? textValueProp : typeof childrenProp === "string" ? childrenProp : void 0;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTagCssSelector,
+    cssModule(
+      Tag_module_default,
+      "hop-Tag",
+      size,
+      mapOrbiterToHopperVariants(variant)
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  const { className: spinnerClassName, ...otherSpinnerProps } = spinnerProps != null ? spinnerProps : {};
+  const spinnerClassNames = clsx(Tag_module_default["hop-Tag__Spinner"], spinnerClassName);
+  const { className: clearButtonClassName, ...otherClearButtonProps } = clearButtonProps != null ? clearButtonProps : {};
+  const clearButtonClassNames = clsx(Tag_module_default["hop-Tag__remove-btn"], clearButtonClassName);
+  const ElementType = useContext(InternalTagGroupContext).isInGroup ? Tag$1 : StandaloneTag;
+  return /* @__PURE__ */ jsx(
+    ElementType,
+    {
+      ref,
+      className: classNames,
+      style,
+      textValue,
+      "data-invalid": isInvalid || void 0,
+      "data-loading": isLoading || void 0,
+      ...otherProps,
+      children: (tagProps) => {
+        const { allowsRemoving, isDisabled, isSelected } = tagProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Tag_module_default["hop-Tag__text"],
+                  size: TagToTextSizeAdapter[size]
+                }],
+                [IconListContext, {
+                  className: Tag_module_default["hop-Tag__icon-list"],
+                  size: "sm"
+                }],
+                [IconContext, {
+                  className: Tag_module_default["hop-Tag__icon"],
+                  size: "sm"
+                }],
+                [BadgeContext, {
+                  className: ({ variant: badgeVariant }) => {
+                    return cssModule(
+                      Tag_module_default,
+                      "hop-Tag__badge",
+                      badgeVariant
+                    );
+                  },
+                  isDisabled
+                }],
+                [AvatarContext, {
+                  className: Tag_module_default["hop-Tag__avatar"],
+                  isDisabled,
+                  size: TagToAvatarSizeAdapter[size]
+                }]
+              ],
+              children: children(tagProps)
+            }
+          ) }),
+          allowsRemoving && !isLoading && /* @__PURE__ */ jsx(
+            _ClearButton,
+            {
+              slot: "remove",
+              isDisabled,
+              className: clearButtonClassNames,
+              "aria-label": stringFormatter.format("Tag.removeAriaLabel"),
+              size: TagToButtonSizeAdapter[size],
+              variant,
+              isSelected,
+              ...otherClearButtonProps
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx(
+            _Spinner,
+            {
+              "aria-label": stringFormatter.format("Tag.spinnerAriaLabel"),
+              size: "sm",
+              className: spinnerClassNames,
+              ...otherSpinnerProps
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+var StandaloneTag = forwardRef((props, ref) => {
+  var _a;
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({ within: true });
+  const objectRef = useObjectRef(ref);
+  const { linkProps } = useLink(props, objectRef);
+  const { hoverProps, isHovered } = useHover({
+    // disabled, since we don't allow selection.
+    isDisabled: true,
+    onHoverStart: props.onHoverStart,
+    onHoverChange: props.onHoverChange,
+    onHoverEnd: props.onHoverEnd
+  });
+  const isLink = props.href != null;
+  const itemProps = isLink ? linkProps : props;
+  const ElementType = isLink ? "a" : "div";
+  const renderProps = useRenderProps({
+    ...itemProps,
+    id: void 0,
+    children: props.children,
+    values: {
+      isFocusVisible,
+      isHovered,
+      isDisabled: (_a = props.isDisabled) != null ? _a : false,
+      isFocused,
+      isPressed: false,
+      allowsRemoving: false,
+      isSelected: false,
+      selectionBehavior: "toggle",
+      selectionMode: "none"
+    }
+  });
+  useEffect(() => {
+    if (!props.textValue) {
+      console.warn("A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.");
+    }
+  }, [props.textValue]);
+  return /* @__PURE__ */ jsx(
+    ElementType,
+    {
+      ref: objectRef,
+      "aria-label": props.textValue,
+      ...mergeProps(filterDOMProps(itemProps, { labelable: true }), focusProps, hoverProps),
+      ...renderProps,
+      "data-disabled": props.isDisabled || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focused": isFocused || void 0,
+      "data-focus-visible": isFocusVisible || void 0
+    }
+  );
+});
+var _Tag = slot("tag", forwardRef(Tag));
+_Tag.displayName = "Tag";
+
+export { GlobalTagCssSelector, _Tag };

package/dist/chunk-FOQ7KN4V.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/header/src/HeaderContext.ts
+var HeaderContext = createContext({});
+HeaderContext.displayName = "HeaderContext";
+
+export { HeaderContext };

package/dist/chunk-FV74YT2D.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/error-message/src/ErrorMessageContext.ts
+var ErrorMessageContext = createContext({});
+ErrorMessageContext.displayName = "ErrorMessageContext";
+
+export { ErrorMessageContext };

package/dist/chunk-G7F2YUBR.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/avatar/src/AvatarGroupContext.ts
+var AvatarGroupContext = createContext({});
+AvatarGroupContext.displayName = "AvatarGroupContext";
+
+export { AvatarGroupContext };

package/dist/chunk-GBWXEK6N.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/icon-list/src/IconListContext.ts
+var IconListContext = createContext({});
+IconListContext.displayName = "IconListContext";
+
+export { IconListContext };

package/dist/chunk-GEZ2O7GH.js

@@ -0,0 +1,85 @@
+import { ImageContext } from './chunk-JAR7CXVS.js';
+import { SvgImageContext } from './chunk-M4CKZFAM.js';
+import { IllustratedMessageContext } from './chunk-W4TCUPPA.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, Div } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./IllustratedMessage.module.css#css-module
+var IllustratedMessage_module_default = { "hop-IllustratedMessage": "IllustratedMessage-module__hop-IllustratedMessage___Ho-hr", "hop-IllustratedMessage--sm": "IllustratedMessage-module__hop-IllustratedMessage--sm___UyNHT", "hop-IllustratedMessage--md": "IllustratedMessage-module__hop-IllustratedMessage--md___ONIGp", "hop-IllustratedMessage--lg": "IllustratedMessage-module__hop-IllustratedMessage--lg___5vyP1", "hop-IllustratedMessage__image": "IllustratedMessage-module__hop-IllustratedMessage__image___xy14C", "hop-IllustratedMessage__heading": "IllustratedMessage-module__hop-IllustratedMessage__heading___T0RDj", "hop-IllustratedMessage-md": "IllustratedMessage-module__hop-IllustratedMessage-md___1d17i", "hop-IllustratedMessage__content": "IllustratedMessage-module__hop-IllustratedMessage__content___e9xa1", "hop-IllustratedMessage__buttonGroup": "IllustratedMessage-module__hop-IllustratedMessage__buttonGroup___ujr5p", "hop-IllustratedMessage__button": "IllustratedMessage-module__hop-IllustratedMessage__button___2z169" };
+var GlobalIllustratedMessageCssSelector = "hop-IllustratedMessage";
+function IllustratedMessage(props, ref) {
+  [props, ref] = useContextProps(props, ref, IllustratedMessageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    slot,
+    children,
+    size = "md",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalIllustratedMessageCssSelector,
+    cssModule(
+      IllustratedMessage_module_default,
+      "hop-IllustratedMessage",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Div,
+    {
+      ...otherProps,
+      className: classNames,
+      style: mergedStyles,
+      ref,
+      slot: slot != null ? slot : void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [SvgImageContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__image"]
+            }],
+            [ImageContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__image"]
+            }],
+            [HeadingContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__heading"]
+            }],
+            [ContentContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__content"],
+              color: "neutral-weak"
+            }],
+            [ButtonGroupContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__buttonGroup"]
+            }],
+            [ButtonContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__button"]
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _IllustratedMessage = forwardRef(IllustratedMessage);
+_IllustratedMessage.displayName = "IllustratedMessage";
+
+export { GlobalIllustratedMessageCssSelector, _IllustratedMessage };

package/dist/chunk-H3CEJLCO.js

@@ -0,0 +1,58 @@
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./RemainingCharacterCount.module.css#css-module
+var RemainingCharacterCount_module_default = { "hop-RemainingCharacterCount": "RemainingCharacterCount-module__hop-RemainingCharacterCount___5ZVBc" };
+var GlobalRemainingCharacterCountCssSelector = "hop-RemainingCharacterCount";
+function RemainingCharacterCount(props, ref) {
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, style, slot, count, isDisabled, isInvalid, ...textProps } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: count });
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRemainingCharacterCountCssSelector,
+    cssModule(RemainingCharacterCount_module_default, "hop-RemainingCharacterCount")
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false,
+      isInvalid: isInvalid || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      ...mergeProps(textProps, renderProps),
+      ref,
+      "aria-label": accessibilityString,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      role: "status",
+      slot: slot || void 0,
+      size: "xs",
+      children: count
+    }
+  );
+}
+var _RemainingCharacterCount = forwardRef(RemainingCharacterCount);
+_RemainingCharacterCount.displayName = "RemainingCharacterCount";
+
+export { GlobalRemainingCharacterCountCssSelector, _RemainingCharacterCount };

package/dist/chunk-H3THQ7OK.js

@@ -0,0 +1,57 @@
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Heading as Heading$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Heading.module.css#css-module
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___Ar-xg", "hop-Heading--xs": "Heading-module__hop-Heading--xs___-I9vY", "hop-Heading--sm": "Heading-module__hop-Heading--sm___3Uw0i", "hop-Heading--md": "Heading-module__hop-Heading--md___curln", "hop-Heading--lg": "Heading-module__hop-Heading--lg___wTnwT", "hop-Heading--xl": "Heading-module__hop-Heading--xl___DNuF7", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___cWmCg", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___-fSuo" };
+var GlobalHeadingCssSelector = "hop-Heading";
+function Heading(props, ref) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
+  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const classNames = clsx(
+    GlobalHeadingCssSelector,
+    cssModule(
+      Heading_module_default,
+      "hop-Heading",
+      size
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Heading$1,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _Heading = slot("heading", forwardRef(Heading));
+_Heading.displayName = "Heading";
+function createHeading(as) {
+  const level = parseInt(as[1]);
+  return forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsx(_Heading, { ...props, ref, level });
+  });
+}
+var H1 = createHeading("h1");
+var H2 = createHeading("h2");
+var H3 = createHeading("h3");
+var H4 = createHeading("h4");
+var H5 = createHeading("h5");
+var H6 = createHeading("h6");
+
+export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading };

package/dist/chunk-H4FHS5GM.js

@@ -0,0 +1,66 @@
+import { PopoverBaseContext } from './chunk-3B2PUC6W.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useColorSchemeContext, useResponsiveValue, getRootCSSClasses } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Popover } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./PopoverBase.module.css#css-module
+var PopoverBase_module_default = { "hop-PopoverBase": "PopoverBase-module__hop-PopoverBase___fSdHr" };
+var GlobalPopoverBaseCssSelector = "hop-PopoverBase";
+function PopoverBase(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, PopoverBaseContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { colorScheme } = useColorSchemeContext();
+  const {
+    children,
+    className,
+    placement: placementProp,
+    style: styleProp,
+    containerPadding,
+    ...otherProps
+  } = ownProps;
+  const placement = (_a = useResponsiveValue(placementProp)) != null ? _a : "bottom";
+  const popoverClassNames = composeClassnameRenderProps(
+    className,
+    GlobalPopoverBaseCssSelector,
+    cssModule(
+      PopoverBase_module_default,
+      "hop-PopoverBase"
+    ),
+    getRootCSSClasses(colorScheme),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    let extraStyles = {};
+    if (containerPadding) {
+      extraStyles = {
+        ...extraStyles,
+        "--container-padding": `${containerPadding}px`
+      };
+    }
+    return {
+      ...stylingProps.style,
+      ...extraStyles,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref,
+      style,
+      className: popoverClassNames,
+      containerPadding,
+      placement,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _PopoverBase = forwardRef(PopoverBase);
+_PopoverBase.displayName = "PopoverBase";
+
+export { GlobalPopoverBaseCssSelector, _PopoverBase };

package/dist/chunk-HANWII4T.js

@@ -0,0 +1,57 @@
+import { HelperMessageContext } from './chunk-PNEJ6JDM.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { InfoIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+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___qbc2x", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___07Gqs" };
+var GlobalHelperMessageCssSelector = "hop-HelperMessage";
+function HelperMessage(props, ref) {
+  const validation = useContext(FieldErrorContext);
+  if (validation == null ? void 0 : validation.isInvalid) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(HelperMessageInner, { ...props, ref });
+}
+var _HelperMessage = forwardRef(HelperMessage);
+_HelperMessage.displayName = "HelperMessage";
+var HelperMessageInner = forwardRef((props, ref) => {
+  [props, ref] = useContextProps(props, ref, HelperMessageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, children, hideIcon = false, style, slot = "description", ...otherProps } = ownProps;
+  const classNames = clsx(
+    GlobalHelperMessageCssSelector,
+    cssModule(
+      HelperMessage_module_default,
+      "hop-HelperMessage"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    _Text,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      size: "xs",
+      slot,
+      ...otherProps,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(InfoIcon, { size: "sm", className: HelperMessage_module_default["hop-HelperMessage__icon"] }),
+        children
+      ]
+    }
+  );
+});
+
+export { GlobalHelperMessageCssSelector, _HelperMessage };

package/dist/chunk-IJC3LMVD.js

@@ -0,0 +1,72 @@
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { FloatingBadgeContext } from './chunk-KZSTJ3QZ.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+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___La-cL", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___4qLEQ" };
+var GlobalFloatingBadgeCssSelector = "hop-FloatingBadge";
+function FloatingBadge(props, ref) {
+  [props, ref] = useContextProps(props, ref, FloatingBadgeContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    className,
+    offset = [0, 0],
+    overlap = "rectangular",
+    placement = "top right",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalFloatingBadgeCssSelector,
+    cssModule(
+      FloatingBadge_module_default,
+      "hop-FloatingBadge"
+    ),
+    stylingProps.className
+  );
+  const offsetXValue = typeof offset[0] === "string" ? offset[0] : `${offset[0]}px`;
+  const offsetYValue = typeof offset[1] === "string" ? offset[1] : `${offset[1]}px`;
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style,
+    "--hop-FloatingBadge-offset-x": offsetXValue,
+    "--hop-FloatingBadge-offset-y": offsetYValue
+  };
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [BadgeContext, {
+          className: FloatingBadge_module_default["hop-FloatingBadge__badge"]
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          "data-overlap": overlap,
+          "data-placement": placement,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  ) });
+}
+var _FloatingBadge = forwardRef(FloatingBadge);
+_FloatingBadge.displayName = "FloatingBadge";
+
+export { GlobalFloatingBadgeCssSelector, _FloatingBadge };