@hopper-ui/components 1.5.11 → 1.5.13

package/dist/chunk-J6MKCZDV.js

@@ -1,124 +0,0 @@
-import { CalloutContext } from './chunk-NZ4VFVXA.js';
-import { _CloseButton } from './chunk-DZNKA3W5.js';
-import { useSlot } from './chunk-H5YTU3U7.js';
-import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
-import { ContentContext } from './chunk-IXB2WK56.js';
-import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { HeadingContext } from './chunk-TXZ6BMFR.js';
-import { SlotProvider } from './chunk-M36KANKC.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
-import { InfoRichIcon, UpsellRichIcon, SuccessRichIcon, CautionRichIcon, RichIconContext } from '@hopper-ui/icons';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
-import clsx from 'clsx';
-import { forwardRef, useMemo } from 'react';
-import { useContextProps } from 'react-aria-components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// css-module:./Callout.module.css#css-module
-var Callout_module_default = { "hop-Callout": "Callout-module__hop-Callout___lYDRl", "hop-Callout__icon": "Callout-module__hop-Callout__icon___Z-ElG", "hop-Callout__heading": "Callout-module__hop-Callout__heading___1qV--", "hop-Callout__content": "Callout-module__hop-Callout__content___1f3Aj", "hop-Callout__button": "Callout-module__hop-Callout__button___VYapt", "hop-Callout__dismiss": "Callout-module__hop-Callout__dismiss___e7nKE", "hop-Callout--information": "Callout-module__hop-Callout--information___lUXPf", "hop-Callout--success": "Callout-module__hop-Callout--success___EZhfD", "hop-Callout--warning": "Callout-module__hop-Callout--warning___4Dv15", "hop-Callout--upsell": "Callout-module__hop-Callout--upsell___Pmmxi", "hop-Callout--subtle-fill": "Callout-module__hop-Callout--subtle-fill___M3gdU" };
-var GlobalCalloutCssSelector = "hop-Callout";
-var Callout = (props, ref) => {
-  [props, ref] = useContextProps(props, ref, CalloutContext);
-  const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const {
-    className,
-    children,
-    style,
-    slot,
-    hideIcon: hideIconProp,
-    onClose,
-    fillStyle = "border",
-    variant = "information",
-    ...otherProps
-  } = ownProps;
-  const hideIcon = useResponsiveValue(hideIconProp);
-  const [iconRef, hasIcon] = useSlot();
-  const classNames = clsx(
-    GlobalCalloutCssSelector,
-    cssModule(
-      Callout_module_default,
-      "hop-Callout",
-      variant,
-      fillStyle === "subtleFill" && "subtle-fill"
-    ),
-    stylingProps.className,
-    className
-  );
-  const mergedStyles = {
-    ...style,
-    ...stylingProps.style
-  };
-  const icon = useMemo(() => {
-    if (hideIcon) {
-      return null;
-    }
-    switch (variant) {
-      case "warning":
-        return /* @__PURE__ */ jsx(CautionRichIcon, {});
-      case "success":
-        return /* @__PURE__ */ jsx(SuccessRichIcon, {});
-      case "upsell":
-        return /* @__PURE__ */ jsx(UpsellRichIcon, {});
-      default:
-        return /* @__PURE__ */ jsx(InfoRichIcon, {});
-    }
-  }, [hideIcon, variant]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: classNames,
-      style: mergedStyles,
-      slot: slot != null ? slot : void 0,
-      ...otherProps,
-      children: /* @__PURE__ */ jsxs(
-        SlotProvider,
-        {
-          values: [
-            [HeadingContext, {
-              className: Callout_module_default["hop-Callout__heading"]
-            }],
-            [ContentContext, {
-              className: Callout_module_default["hop-Callout__content"]
-            }],
-            [LinkButtonContext, {
-              className: Callout_module_default["hop-Callout__button"],
-              variant: "secondary"
-            }],
-            [ButtonContext, {
-              className: Callout_module_default["hop-Callout__button"],
-              variant: "secondary"
-            }],
-            [RichIconContext, {
-              className: Callout_module_default["hop-Callout__icon"],
-              variant,
-              size: "xl"
-            }]
-          ],
-          children: [
-            !hasIcon && icon,
-            /* @__PURE__ */ jsx(
-              SlotProvider,
-              {
-                values: [
-                  [RichIconContext, {
-                    className: Callout_module_default["hop-Callout__icon"],
-                    variant,
-                    size: "xl",
-                    ref: iconRef
-                  }]
-                ],
-                children
-              }
-            ),
-            onClose && /* @__PURE__ */ jsx(_CloseButton, { size: "sm", className: Callout_module_default["hop-Callout__dismiss"], onPress: onClose })
-          ]
-        }
-      )
-    }
-  );
-};
-var _Callout = forwardRef(Callout);
-_Callout.displayName = "Callout";
-
-export { GlobalCalloutCssSelector, _Callout };

package/dist/chunk-J6WBI2I2.js

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

package/dist/chunk-JHX5QEIH.js

@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-
-// src/SegmentedControl/src/SegmentedControlContext.ts
-var SegmentedControlContext = createContext({});
-SegmentedControlContext.displayName = "SegmentedControlContext";
-var InternalSegmentedControlContext = createContext({});
-
-export { InternalSegmentedControlContext, SegmentedControlContext };

package/dist/chunk-JI5YG2S7.js

@@ -1,57 +0,0 @@
-import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-WXLTW6WM.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___6KR9n", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___wJeNH" };
-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-JTNKUYE5.js

@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-
-// src/Tile/src/TileContext.ts
-var TileContext = createContext({});
-TileContext.displayName = "TileContext";
-var InternalTileContext = createContext({});
-
-export { InternalTileContext, TileContext };

package/dist/chunk-JWW56J7M.js

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

package/dist/chunk-K3S2ERD7.js

@@ -1,246 +0,0 @@
-import { _DecorativeRadio } from './chunk-J4LVCU2Q.js';
-import { _DecorativeCheckbox } from './chunk-V4GE24KV.js';
-import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import { _ListBoxItemSkeleton } from './chunk-K62ZDUWC.js';
-import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
-import { ensureTextWrapper } from './chunk-UZLOWYWR.js';
-import { TextContext } from './chunk-X6SER3TZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { SlotProvider } from './chunk-M36KANKC.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
-import { AvatarContext } from './chunk-AES7QBQE.js';
-import { CheckmarkIcon, IconContext } from '@hopper-ui/icons';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
-import clsx from 'clsx';
-import { forwardRef, useContext, useState } from 'react';
-import { useContextProps, composeRenderProps, ListBoxItem as ListBoxItem$1, ListStateContext, DEFAULT_SLOT } from 'react-aria-components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// css-module:./ListBoxItem.module.css#css-module
-var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___Mp9m7", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___eTJ6o", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___KRPqB", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___2fBkk", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___5k78P", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___bjvEv", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___upuVs", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___h2JvV", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___2N3ru", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___Bh-e-", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___r6tpI", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___XtO9w", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___fa44w", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___slcl0", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___cCr0q", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___kqrVV", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___sOw6e" };
-var GlobalListBoxItemCssSelector = "hop-ListBoxItem";
-var ListBoxItemToIconSizeAdapter = {
-  xs: "sm",
-  sm: "sm",
-  md: "md",
-  lg: "md"
-};
-var ListBoxItemToTextSizeAdapter = {
-  xs: "sm",
-  sm: "sm",
-  md: "sm",
-  lg: "md"
-};
-var ListBoxItemToAvatarSizeAdapter = {
-  xs: "xs",
-  sm: "xs",
-  md: "md",
-  lg: "md"
-};
-function ListBoxItemInner(props) {
-  var _a, _b;
-  const listStateContext = useContext(ListStateContext);
-  const {
-    selectionMode,
-    isDisabled,
-    isFocusVisible,
-    isPressed,
-    isHovered,
-    isSelected,
-    selectionIndicator,
-    isInvalid,
-    size,
-    children,
-    radioProps,
-    checkboxProps
-  } = props;
-  const isRadio = selectionIndicator === "input" && selectionMode === "single";
-  const isCheckbox = selectionIndicator === "input" && selectionMode === "multiple";
-  const isCheck = selectionIndicator === "check" && selectionMode !== "none";
-  const selectedKeysLength = (_b = (_a = listStateContext == null ? void 0 : listStateContext.selectionManager) == null ? void 0 : _a.selectedKeys) == null ? void 0 : _b.size;
-  const isListHasSelection = (selectedKeysLength != null ? selectedKeysLength : 0) > 0;
-  const [isListHasSelectionEnd, setIsListHasSelectionEnd] = useState(isListHasSelection);
-  const handleTransitionEnd = (event) => {
-    if (event.propertyName === "grid-template-columns") {
-      setIsListHasSelectionEnd((prev) => isListHasSelection && !prev);
-    }
-  };
-  const { className: radioClassName, ...otherRadioProps } = radioProps != null ? radioProps : {};
-  const radioClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__radio"], radioClassName);
-  const { className: checkboxClassName, ...otherCheckboxProps } = checkboxProps != null ? checkboxProps : {};
-  const checkboxClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__checkbox"], checkboxClassName);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: ListBoxItem_module_default["hop-ListBoxItem__inner"],
-      "data-list-has-selection": isListHasSelection || void 0,
-      "data-list-has-selection-end": isListHasSelectionEnd || void 0,
-      onTransitionEnd: handleTransitionEnd,
-      children: [
-        isRadio && /* @__PURE__ */ jsx(
-          _DecorativeRadio,
-          {
-            className: radioClassNames,
-            value: "radio",
-            size: "sm",
-            isDisabled,
-            isHovered: isHovered || isFocusVisible,
-            isPressed,
-            isSelected,
-            isInvalid,
-            ...otherRadioProps
-          }
-        ),
-        isCheckbox && /* @__PURE__ */ jsx(
-          _DecorativeCheckbox,
-          {
-            size: "sm",
-            value: "checkbox",
-            className: checkboxClassNames,
-            isDisabled,
-            isHovered: isHovered || isFocusVisible,
-            isPressed,
-            isSelected,
-            isInvalid,
-            ...otherCheckboxProps
-          }
-        ),
-        isCheck && /* @__PURE__ */ jsx(CheckmarkIcon, { className: ListBoxItem_module_default["hop-ListBoxItem__checkmark"], size: "sm" }),
-        /* @__PURE__ */ jsx(
-          SlotProvider,
-          {
-            values: [
-              [TextContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {
-                    slot: "label",
-                    className: ListBoxItem_module_default["hop-ListBoxItem__label"],
-                    size: ListBoxItemToTextSizeAdapter[size]
-                  },
-                  description: {
-                    className: ListBoxItem_module_default["hop-ListBoxItem__description"],
-                    size: "xs"
-                  }
-                }
-              }],
-              [IconListContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {
-                    className: ListBoxItem_module_default["hop-ListBoxItem__icon-list"],
-                    size: ListBoxItemToIconSizeAdapter[size]
-                  },
-                  "end-icon": {
-                    className: ListBoxItem_module_default["hop-ListBoxItem__end-icon-list"],
-                    size: ListBoxItemToIconSizeAdapter[size]
-                  }
-                }
-              }],
-              [IconContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {
-                    className: ListBoxItem_module_default["hop-ListBoxItem__icon"],
-                    size: ListBoxItemToIconSizeAdapter[size]
-                  },
-                  "end-icon": {
-                    className: ListBoxItem_module_default["hop-ListBoxItem__end-icon"],
-                    size: ListBoxItemToIconSizeAdapter[size]
-                  }
-                }
-              }],
-              [BadgeContext, {
-                className: ListBoxItem_module_default["hop-ListBoxItem__badge"],
-                isDisabled
-              }],
-              [AvatarContext, {
-                className: ListBoxItem_module_default["hop-ListBoxItem__avatar"],
-                isDisabled,
-                size: ListBoxItemToAvatarSizeAdapter[size]
-              }]
-            ],
-            children
-          }
-        )
-      ]
-    }
-  );
-}
-function ListBoxItem(props, ref) {
-  var _a;
-  [props, ref] = useContextProps(props, ref, ListBoxItemContext);
-  const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const {
-    className,
-    children: childrenProp,
-    isDisabled,
-    isInvalid,
-    isLoading,
-    size: sizeProp,
-    style: styleProp,
-    textValue: textValueProp,
-    selectionIndicator,
-    ...otherProps
-  } = ownProps;
-  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
-  const textValue = textValueProp != null ? textValueProp : typeof childrenProp === "string" ? childrenProp : void 0;
-  const classNames = composeClassnameRenderProps(
-    className,
-    GlobalListBoxItemCssSelector,
-    cssModule(
-      ListBoxItem_module_default,
-      "hop-ListBoxItem",
-      size,
-      selectionIndicator
-    ),
-    stylingProps.className
-  );
-  const style = composeRenderProps(styleProp, (prev) => {
-    return {
-      ...stylingProps.style,
-      ...prev
-    };
-  });
-  const children = composeRenderProps(childrenProp, (prev) => {
-    return ensureTextWrapper(prev);
-  });
-  return /* @__PURE__ */ jsx(
-    ListBoxItem$1,
-    {
-      ref,
-      className: classNames,
-      style,
-      textValue,
-      isDisabled: isLoading || isDisabled,
-      "data-invalid": isInvalid || void 0,
-      "data-loading": isLoading || void 0,
-      "aria-label": isLoading ? "Loading" : void 0,
-      "aria-live": isLoading ? "polite" : void 0,
-      ...otherProps,
-      children: (listBoxItemProps) => {
-        if (isLoading) {
-          return /* @__PURE__ */ jsx("div", { className: ListBoxItem_module_default["hop-ListBoxItem__inner"], children: /* @__PURE__ */ jsx(
-            _ListBoxItemSkeleton,
-            {
-              size,
-              slot: "label"
-            }
-          ) });
-        }
-        return /* @__PURE__ */ jsx(
-          ListBoxItemInner,
-          {
-            ...listBoxItemProps,
-            selectionIndicator,
-            isInvalid,
-            size,
-            children: children(listBoxItemProps)
-          }
-        );
-      }
-    }
-  );
-}
-var _ListBoxItem = forwardRef(ListBoxItem);
-_ListBoxItem.displayName = "ListBoxItem";
-
-export { GlobalListBoxItemCssSelector, _ListBoxItem };

package/dist/chunk-K62ZDUWC.js

@@ -1,52 +0,0 @@
-import { ListBoxItemSkeletonContext } from './chunk-OKZYR4RF.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 } from 'react-aria-components';
-import { jsx } from 'react/jsx-runtime';
-
-// css-module:./ListBoxItemSkeleton.module.css#css-module
-var ListBoxItemSkeleton_module_default = { "hop-ListBoxItemSkeleton": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton___N-6vo", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___1gvN-", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___5vJ-d", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___I9kQm", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___drn-b", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___-4PxP" };
-var GlobalListBoxItemSkeletonCssSelector = "hop-ListBoxItemSkeleton";
-function ListBoxItemSkeleton(props, ref) {
-  var _a;
-  [props, ref] = useContextProps(props, ref, ListBoxItemSkeletonContext);
-  const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const {
-    className,
-    size: sizeProp,
-    style: styleProp,
-    slot,
-    ...otherProps
-  } = ownProps;
-  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "sm";
-  const classNames = clsx(
-    className,
-    GlobalListBoxItemSkeletonCssSelector,
-    cssModule(
-      ListBoxItemSkeleton_module_default,
-      "hop-ListBoxItemSkeleton",
-      size
-    ),
-    stylingProps.className
-  );
-  const style = {
-    ...stylingProps.style,
-    ...styleProp
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: classNames,
-      style,
-      slot: slot != null ? slot : void 0,
-      ...otherProps
-    }
-  );
-}
-var _ListBoxItemSkeleton = forwardRef(ListBoxItemSkeleton);
-_ListBoxItemSkeleton.displayName = "ListBoxItemSkeleton";
-
-export { GlobalListBoxItemSkeletonCssSelector, _ListBoxItemSkeleton };

package/dist/chunk-LUO2HNXA.js

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

package/dist/chunk-M2XJDWZ7.js

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

package/dist/chunk-MA5VDART.js

@@ -1,58 +0,0 @@
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { _Text } from './chunk-WXLTW6WM.js';
-import { useRenderProps } from './chunk-2NSUMKNH.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___ep-vK" };
-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 };