@hopper-ui/components 0.1.0 → 1.0.0

package/dist/chunk-HVRSS5RT.js

@@ -0,0 +1,186 @@
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { useLocalizedString } from './chunk-BPM4ETTB.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Spinner } from './chunk-DFUQTSEV.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { chain, filterDOMProps, useRouter, shouldClientNavigate } from '@react-aria/utils';
+import { forwardRef } from 'react';
+import { useFocusRing, useHover, useButton, mergeProps } from 'react-aria';
+import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Button.module.css#css-module
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___cJ-uA", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___ZlRhs", "hop-Button--fluid": "Button-module__hop-Button--fluid___8QjEJ", "hop-Button--sm": "Button-module__hop-Button--sm___bUHes", "hop-Button--primary": "Button-module__hop-Button--primary___2PGPX", "hop-Button--md": "Button-module__hop-Button--md___-ftkr", "hop-Button--secondary": "Button-module__hop-Button--secondary___eHbc0", "hop-Button--upsell": "Button-module__hop-Button--upsell___P5EbP", "hop-Button--danger": "Button-module__hop-Button--danger___-gnFY", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___aL9kX", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___zpfVo", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___fFsQn", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___oFd2F", "hop-Button__icon": "Button-module__hop-Button__icon___V-Xu7", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___QbCfg", "hop-Button__text": "Button-module__hop-Button__text___d4ZlX", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___bIHjn", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___hpAvJ" };
+var GlobalButtonCssSelector = "hop-Button";
+var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
+function useSimulatedRACButton(props, ref) {
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing(props);
+  const { hoverProps, isHovered } = useHover(props);
+  const ctx = props;
+  const elementType = props.href ? "a" : "button";
+  const { buttonProps, isPressed } = useButton({
+    ...props,
+    elementType,
+    isDisabled: props.isDisabled || props.isLoading
+  }, ref);
+  const state = {
+    isFocused,
+    isFocusVisible,
+    isHovered,
+    isPressed,
+    isDisabled: props.isDisabled || false
+  };
+  const mergedProps = {
+    ...mergeProps(buttonProps, focusProps, hoverProps),
+    "data-disabled": props.isDisabled || void 0,
+    "data-pressed": ctx.isPressed || isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0
+  };
+  return [mergedProps, state];
+}
+function useCreateRouterLinkClickEventHandler(props) {
+  const router = useRouter();
+  return (e) => {
+    if (!router.isNative && e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.href && // If props are applied to a router Link component, it may have already prevented default.
+    !e.isDefaultPrevented() && shouldClientNavigate(e.currentTarget, e) && props.href) {
+      e.preventDefault();
+      router.open(e.currentTarget, e, props.href, props.routerOptions);
+    }
+  };
+}
+function Button(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, ButtonContext);
+  [props, ref] = useContextProps(props, ref, ButtonContext$1);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [{ onClick, ...buttonProps }, state] = useSimulatedRACButton(ownProps, ref);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    fluid: fluidProp,
+    variant = "primary",
+    isLoading,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const [textRef, hasText] = useSlot();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const fluid = (_b = useResponsiveValue(fluidProp)) != null ? _b : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalButtonCssSelector,
+    cssModule(
+      Button_module_default,
+      "hop-Button",
+      variant,
+      size,
+      fluid && "fluid",
+      isLoading && "loading",
+      !hasText && "icon-only"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const renderProps = useRenderProps({
+    className: classNames,
+    style,
+    children,
+    values: state
+  });
+  const hasAriaLabel = !!buttonProps["aria-label"] || !!buttonProps["aria-labelledby"];
+  if (!hasText && !hasAriaLabel) {
+    console.warn("[hopper-ui] If you do not provide a text children, you must specify an aria-label for accessibility");
+  }
+  const handleClick = chain(
+    onClick,
+    useCreateRouterLinkClickEventHandler(props)
+  );
+  const As = props.href ? "a" : "button";
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: Button_module_default["hop-Button__icon-list"]
+            },
+            "end-icon": {
+              size,
+              className: Button_module_default["hop-Button__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: Button_module_default["hop-Button__icon"]
+            },
+            "end-icon": {
+              size,
+              className: Button_module_default["hop-Button__end-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          className: Button_module_default["hop-Button__text"],
+          size,
+          ref: textRef
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        As,
+        {
+          ...filterDOMProps(otherProps, { propNames: additionalButtonHTMLAttributes }),
+          ...buttonProps,
+          ...renderProps,
+          onClick: handleClick,
+          ref,
+          slot: props.slot || void 0,
+          "data-loading": isLoading,
+          children: [
+            renderProps.children,
+            isLoading && /* @__PURE__ */ jsx(
+              _Spinner,
+              {
+                "aria-label": stringFormatter.format("Button.spinnerAriaLabel"),
+                size,
+                className: Button_module_default["hop-Button__Spinner"]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var _Button = forwardRef(Button);
+_Button.displayName = "Button";
+
+export { GlobalButtonCssSelector, _Button };

package/dist/chunk-HXI3MEEK.js

@@ -0,0 +1,27 @@
+import { TextContext } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/src/ClearSlots.tsx
+function ClearProviders({
+  values,
+  children
+}) {
+  for (const Context of values) {
+    children = /* @__PURE__ */ jsx(Context.Provider, { value: null, children });
+  }
+  return children;
+}
+function ClearContainerSlots({ children }) {
+  return /* @__PURE__ */ jsx(
+    ClearProviders,
+    {
+      values: [
+        TextContext,
+        TextContext
+      ],
+      children
+    }
+  );
+}
+
+export { ClearContainerSlots, ClearProviders };

package/dist/chunk-I7AMDVGG.js

@@ -0,0 +1,124 @@
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { LinkContext } from './chunk-4VVNSXIB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Link.module.css#css-module
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___pvGQC", "hop-Link--quiet": "Link-module__hop-Link--quiet___RRkch", "hop-Link--primary": "Link-module__hop-Link--primary___XGqPo", "hop-Link--secondary": "Link-module__hop-Link--secondary___VfX7X", "hop-Link__icon": "Link-module__hop-Link__icon___ckEZL", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___8jaym", "hop-Link__text": "Link-module__hop-Link__text___uXUoO", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___ZImUS", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___yfs8D" };
+var GlobalLinkCssSelector = "hop-Link";
+var LinkToIconSizeAdapter = {
+  inherit: void 0,
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+  "2xl": "lg"
+};
+function Link(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, LinkContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    style: styleProp,
+    isQuiet,
+    isExternal,
+    variant = "primary",
+    rel,
+    target,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "inherit";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalLinkCssSelector,
+    cssModule(
+      Link_module_default,
+      "hop-Link",
+      isQuiet && "quiet",
+      variant,
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const iconSize = LinkToIconSizeAdapter[size];
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon-list"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          size,
+          className: Link_module_default["hop-Link__text"]
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Link$1,
+        {
+          ...otherProps,
+          rel: rel != null ? rel : isExternal ? "noopener noreferrer" : void 0,
+          target: target != null ? target : isExternal ? "_blank" : void 0,
+          ref,
+          className: classNames,
+          style,
+          children
+        }
+      )
+    }
+  );
+}
+var _Link = forwardRef(Link);
+_Link.displayName = "Link";
+
+export { GlobalLinkCssSelector, _Link };

package/dist/{chunk-XCKF6EU7.js → chunk-IYITZANI.js}

@@ -1,26 +1,26 @@
-import { cssModule } from './chunk-6BEVZRUL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
 import { LabelContext } from './chunk-HVKOIMMW.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useContextProps, Label as Label$1 } from 'react-aria-components';
-import clsx from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
-// src/Label/src/Label.module.css
-var Label_default = {};
+// css-module:./Label.module.css#css-module
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___sZV4v", "hop-Label--xs": "Label-module__hop-Label--xs___7Flvr", "hop-Label--sm": "Label-module__hop-Label--sm___q7-gY", "hop-Label--md": "Label-module__hop-Label--md___ZxMc1", "hop-Label--lg": "Label-module__hop-Label--lg___qnzoz", "hop-Label--xl": "Label-module__hop-Label--xl___3pCXT", "hop-Label--2xl": "Label-module__hop-Label--2xl___CuLU9", "hop-Label--inherit": "Label-module__hop-Label--inherit___pCJ8C" };
 var GlobalLabelCssSelector = "hop-Label";
-var DefaultLabelSlot = "label";
 function Label(props, ref) {
-  [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultLabelSlot }, ref, LabelContext);
+  var _a;
+  [props, ref] = useContextProps(props, ref, LabelContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
-  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
   const classNames = clsx(
     className,
     GlobalLabelCssSelector,
     cssModule(
-      Label_default,
-      "hop-label",
+      Label_module_default,
+      "hop-Label",
       size
     ),
     stylingProps.className

package/dist/chunk-JHY3TXL4.js

@@ -0,0 +1,101 @@
+import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
+import { HelperMessageContext } from './chunk-ESVVLTEN.js';
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
+import { CheckboxListContext } from './chunk-WDUQUPTE.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { LabelContext } from './chunk-HVKOIMMW.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./CheckboxGroup.module.css#css-module
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___G2wza", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___fe2Pt", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___q-5jl", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___x3Gpi", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___BcXsD", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___bGx-3", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___kNMWV", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___hif0E", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___Slue-" };
+var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
+function CheckboxGroup(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    isInvalid,
+    orientation: orientationProp = "vertical",
+    size: sizeProp = "md",
+    style: styleProp,
+    variant = "borderless",
+    ...otherProps
+  } = ownProps;
+  const orientation = (_a = useResponsiveValue(orientationProp)) != null ? _a : "vertical";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalCheckboxGroupCssSelector,
+    cssModule(
+      CheckboxGroup_module_default,
+      "hop-CheckboxGroup",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [LabelContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__label"],
+          size
+        }],
+        [CheckboxContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size
+        }],
+        [CheckboxFieldContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size,
+          isDisabled
+        }],
+        [CheckboxListContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__list"]
+        }],
+        [ErrorMessageContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__error-message"],
+          hideIcon: true
+        }],
+        [HelperMessageContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__helper-message"],
+          hideIcon: true
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        CheckboxGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          isInvalid,
+          isDisabled,
+          "data-orientation": orientation,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.displayName = "CheckboxGroup";
+
+export { GlobalCheckboxGroupCssSelector, _CheckboxGroup };

package/dist/{chunk-6BEVZRUL.js → chunk-KVDXQMWI.js}

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-// src/utils/src/css-module.ts
+// src/utils/src/cssModule.ts
 function cssModule(cssModules, componentName, ...modifiers) {
   const classes = clsx(modifiers).split(" ").filter((x) => x && x !== "");
   return classes.reduce((acc, className) => {

package/dist/chunk-M6UHXS6K.js

@@ -0,0 +1,58 @@
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.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, Text as Text$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Text.module.css#css-module
+var Text_module_default = { "hop-Text": "Text-module__hop-Text___-u1e-", "hop-Text--xs": "Text-module__hop-Text--xs___P2Mlk", "hop-Text--sm": "Text-module__hop-Text--sm___DIgJn", "hop-Text--md": "Text-module__hop-Text--md___EBUtj", "hop-Text--lg": "Text-module__hop-Text--lg___Au1wj", "hop-Text--xl": "Text-module__hop-Text--xl___UoQSa", "hop-Text--2xl": "Text-module__hop-Text--2xl___Nxjf-", "hop-Text--inherit": "Text-module__hop-Text--inherit___WPX1D" };
+var GlobalTextCssSelector = "hop-Text";
+function Text(props, ref) {
+  [props, ref] = useContextProps(props, ref, TextContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, children, style, elementType = "span", ...otherProps } = ownProps;
+  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const classNames = clsx(
+    GlobalTextCssSelector,
+    cssModule(
+      Text_module_default,
+      "hop-Text",
+      size
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Text$1,
+    {
+      ...otherProps,
+      ref,
+      elementType,
+      className: classNames,
+      style: mergedStyles,
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [TextContext, {
+              size: "inherit"
+            }]
+          ],
+          children
+        }
+      ) })
+    }
+  );
+}
+var _Text = forwardRef(Text);
+_Text.displayName = "Text";
+
+export { GlobalTextCssSelector, _Text };

package/dist/chunk-MD6IFXLG.js

@@ -0,0 +1,57 @@
+import { HelperMessageContext } from './chunk-ESVVLTEN.js';
+import { _Text } from './chunk-M6UHXS6K.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___1YNO0", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___c7iS1" };
+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,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      size: "xs",
+      slot,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(InfoIcon, { size: "sm", className: HelperMessage_module_default["hop-HelperMessage__icon"] }),
+        children
+      ]
+    }
+  );
+});
+
+export { GlobalHelperMessageCssSelector, _HelperMessage };