@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-LDUP2CAO.js

@@ -0,0 +1,121 @@
+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-RRJTW4Z7.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { _CloseButton } from './chunk-S5NO7N32.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___MhIz9", "hop-Modal--fullscreen": "Modal-module__hop-Modal--fullscreen___gLDcC", "hop-Modal--fullscreentakeover": "Modal-module__hop-Modal--fullscreentakeover___FfDDu", "hop-Modal__image": "Modal-module__hop-Modal__image___wj1WR", "hop-Modal__close": "Modal-module__hop-Modal__close___t-xLE", "hop-Modal__heading": "Modal-module__hop-Modal__heading___RFDzf", "hop-Modal__header": "Modal-module__hop-Modal__header___s9Snb", "hop-Modal__content": "Modal-module__hop-Modal__content___eC-y-", "hop-Modal__footer": "Modal-module__hop-Modal__footer___JZpe9", "hop-Modal__button": "Modal-module__hop-Modal__button___HluGA", "hop-Modal__button-group": "Modal-module__hop-Modal__button-group___chs5l" };
+var GlobalModalCssSelector = "hop-Modal";
+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.toLowerCase()
+    ),
+    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: [
+            isDismissible && /* @__PURE__ */ jsx(_CloseButton, { className: Modal_module_default["hop-Modal__close"] }),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [ImageContext, {
+                    className: Modal_module_default["hop-Modal__image"],
+                    ref: imageRef
+                  }],
+                  [HeadingContext, {
+                    className: Modal_module_default["hop-Modal__heading"],
+                    size: "lg",
+                    slot: "title"
+                  }],
+                  [HeaderContext, {
+                    className: Modal_module_default["hop-Modal__header"]
+                  }],
+                  [ContentContext, {
+                    className: Modal_module_default["hop-Modal__content"]
+                  }],
+                  [FooterContext, {
+                    className: Modal_module_default["hop-Modal__footer"]
+                  }],
+                  [ButtonContext, {
+                    className: Modal_module_default["hop-Modal__button"]
+                  }],
+                  [ButtonGroupContext, {
+                    className: Modal_module_default["hop-Modal__button-group"]
+                  }]
+                ],
+                children: children(renderProps)
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+var _Modal = forwardRef(Modal);
+_Modal.displayName = "Modal";
+
+export { GlobalModalCssSelector, _Modal };

package/dist/chunk-LR34EGBM.js

@@ -0,0 +1,174 @@
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { useTruncatedText } from './chunk-Z57VHYOF.js';
+import { _RemainingCharacterCount } from './chunk-F3T6W2WM.js';
+import { Input } from './chunk-GDDLFLKV.js';
+import { _InputGroup } from './chunk-DP23X6HZ.js';
+import { _Label } from './chunk-N6X66BJY.js';
+import { _HelperMessage } from './chunk-2TNVXSEJ.js';
+import { _ErrorMessage } from './chunk-3UGFIGCD.js';
+import { _ClearButton } from './chunk-FFG4K6ZQ.js';
+import { useFormProps } from './chunk-TRCGBAIX.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.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 { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, TextField as TextField$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./TextField.module.css#css-module
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___yJPWA", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___QVbqY", "hop-TextField__Label": "TextField-module__hop-TextField__Label___35t78", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___uHKb-", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___5Nbn8", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___nM2BC", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___gAJuA" };
+var GlobalTextFieldCssSelector = "hop-TextField";
+function TextField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextFieldContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b, _c, _d;
+    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b = props.defaultValue) == null ? void 0 : _b.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    isClearable,
+    onChange: onChangeProp,
+    onClear,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    allowExceedingMaxLength,
+    necessityIndicator,
+    inputGroupProps,
+    remainingCharacterCountProps,
+    label,
+    description,
+    errorMessage,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const overMaxLength = !!maxLength && characterCount > maxLength;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextFieldCssSelector,
+    cssModule(
+      TextField_module_default,
+      "hop-TextField",
+      isClearable && "clearable",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    setCharacterCount(value2.length);
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  const truncateText = useTruncatedText();
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const handleClear = useCallback(() => {
+    onChange("");
+    onClear == null ? void 0 : onClear();
+  }, [onChange, onClear]);
+  const showClearButton = isClearable && characterCount !== 0;
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextField.");
+  }
+  if (allowExceedingMaxLength && !showCharacterCount) {
+    console.warn("If allowExceedingMaxLength is true, showCharacterCount must also be true.");
+  }
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: TextField_module_default["hop-TextField__prefix"] }],
+        [IconContext, { size, className: TextField_module_default["hop-TextField__prefix"] }]
+      ],
+      children: ensureTextWrapper(prefix)
+    }
+  ) : null;
+  useIsomorphicLayoutEffect(() => {
+    if (!allowExceedingMaxLength) {
+      const newValue = truncateText(value, maxLength);
+      onChange(newValue);
+    }
+  }, [value]);
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(TextField_module_default["hop-TextField__InputGroup"], inputGroupClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      className: inputGroupClassNames,
+      isDisabled,
+      isInvalid,
+      ...otherInputGroupProps,
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder, size }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(
+          _RemainingCharacterCount,
+          {
+            count: maxLength - characterCount,
+            isInvalid: overMaxLength,
+            isDisabled,
+            ...remainingCharacterCountProps
+          }
+        ),
+        showClearButton && /* @__PURE__ */ jsx(_ClearButton, { isDisabled, size: "lg", onPress: handleClear })
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: TextField_module_default["hop-TextField__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: TextField_module_default["hop-TextField__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: TextField_module_default["hop-TextField__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength: !allowExceedingMaxLength ? maxLength : void 0,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _TextField = forwardRef(TextField);
+_TextField.displayName = "TextField";
+
+export { GlobalTextFieldCssSelector, _TextField };

package/dist/chunk-LWPDIKEX.js

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

package/dist/chunk-M4CKZFAM.js

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

package/dist/chunk-M66L3RAL.js

@@ -0,0 +1,167 @@
+import { useImageFallback } from './chunk-QJ5FQN3N.js';
+import { _BrokenAvatar } from './chunk-ENQBKOPX.js';
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { filterDOMProps, mergeProps } from '@react-aria/utils';
+import { forwardRef, useMemo } from 'react';
+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___etbiL", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___pDBeK", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___9SiY5", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___RLLPg", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___RRc8J", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___PDRQF", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___BjbW3", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___hw1T0", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___5krdM", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___HsKIl", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___YUjaH", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___nU052", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___KfDYO", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___dsTpu", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___-9YjT", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___jm8Se", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___hvXoD" };
+var GlobalAvatarCssSelector = "hop-Avatar";
+var AvatarToTextSizeAdapter = {
+  xs: "xs",
+  sm: "xs",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "xl"
+};
+function getColorIndex(name, maxNumberOfColor) {
+  let hashCode = 0;
+  for (let i = name.length - 1; i >= 0; i--) {
+    const character = name.charCodeAt(i);
+    const shift = i % 8;
+    hashCode ^= (character << shift) + (character >> 8 - shift);
+  }
+  return hashCode % maxNumberOfColor;
+}
+function getColorName(name) {
+  const variantToUse = `option${getColorIndex(name, 8) + 1}`;
+  return `decorative-${variantToUse}`;
+}
+function AvatarInitials(props) {
+  var _a;
+  const {
+    name,
+    size: sizeValue
+  } = props;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const initials = useMemo(() => {
+    const cleanName = name.replace(/\s+/g, " ").trim();
+    const [firstName, lastName] = cleanName.split(" ");
+    const letters = firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
+    return size === "xs" && letters.length > 1 ? letters.charAt(0) : letters;
+  }, [name, size]);
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      size: AvatarToTextSizeAdapter[size],
+      children: initials
+    }
+  );
+}
+function Avatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    "aria-label": ariaLabel,
+    fallbackSrc,
+    imageProps,
+    isDisabled,
+    name,
+    size: sizeValue,
+    slot,
+    src,
+    className,
+    style,
+    ...otherProps
+  } = ownProps;
+  const domProps = filterDOMProps(otherProps);
+  const { onError, onLoad, ...otherImageProps } = imageProps != null ? imageProps : {};
+  const { imageUrl, status } = useImageFallback({ src, fallbackSrc, onError, onLoad });
+  const imageLoaded = status === "loaded";
+  const imageFailed = status === "failed";
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const isFallbackInitials = fallbackSrc === null;
+  const isBrokenImage = imageFailed && !isFallbackInitials;
+  const isImage = src && !imageFailed && imageLoaded;
+  const isInitials = !src || !isImage && isFallbackInitials;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalAvatarCssSelector,
+    cssModule(
+      Avatar_module_default,
+      "hop-Avatar",
+      size,
+      isBrokenImage && "broken-image",
+      isImage && "image",
+      isInitials && getColorName(name)
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
+  if (isBrokenImage) {
+    return /* @__PURE__ */ jsx(
+      _BrokenAvatar,
+      {
+        ...mergeProps(domProps, renderProps),
+        "aria-label": ariaLabel != null ? ariaLabel : name,
+        isDisabled,
+        ref,
+        size,
+        slot
+      }
+    );
+  }
+  let content = null;
+  if (isInitials) {
+    content = /* @__PURE__ */ jsx(
+      AvatarInitials,
+      {
+        ...otherProps,
+        name,
+        size
+      }
+    );
+  }
+  if (imageLoaded) {
+    content = /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...filterDOMProps(otherImageProps),
+        alt: "",
+        "aria-hidden": true,
+        className: Avatar_module_default["hop-Avatar__image"],
+        onError,
+        src: imageUrl
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(domProps, renderProps),
+      "aria-label": ariaLabel != null ? ariaLabel : name,
+      "data-disabled": isDisabled || void 0,
+      role: "img",
+      slot: slot != null ? slot : void 0,
+      ref,
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: content })
+    }
+  );
+}
+var _Avatar = slot("avatar", forwardRef(Avatar));
+_Avatar.displayName = "Avatar";
+
+export { AvatarToTextSizeAdapter, GlobalAvatarCssSelector, _Avatar };

package/dist/chunk-MHEY55HI.js

@@ -0,0 +1,70 @@
+import { TooltipTriggerContext } from './chunk-XXEXHHC6.js';
+import { TooltipContext } from './chunk-77PD5K3M.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useColorSchemeContext, getRootCSSClasses } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, Provider, Tooltip as Tooltip$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Tooltip.module.css#css-module
+var Tooltip_module_default = { "hop-Tooltip": "Tooltip-module__hop-Tooltip___wqOUS", "hop-Tooltip--top": "Tooltip-module__hop-Tooltip--top___77P6x", "hop-Tooltip--right": "Tooltip-module__hop-Tooltip--right___ujk-Y", "hop-Tooltip--bottom": "Tooltip-module__hop-Tooltip--bottom___VYnFm", "hop-Tooltip--left": "Tooltip-module__hop-Tooltip--left___UB1ss", "slide": "Tooltip-module__slide___Ycaap" };
+var GlobalTooltipCssSelector = "hop-Tooltip";
+function Tooltip(props, ref) {
+  [props, ref] = useContextProps(props, ref, TooltipContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { colorScheme } = useColorSchemeContext();
+  const { containerPadding, crossOffset, offset, placement = "top", shouldFlip } = useContext(TooltipTriggerContext);
+  const {
+    className,
+    children,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTooltipCssSelector,
+    getRootCSSClasses(colorScheme),
+    cssModule(
+      Tooltip_module_default,
+      "hop-Tooltip",
+      placement
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      values: [
+        [TextContext, {
+          size: "xs"
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          ref,
+          style: mergedStyles,
+          className: classNames,
+          containerPadding,
+          crossOffset,
+          offset,
+          placement,
+          shouldFlip,
+          ...otherProps,
+          children: ensureTextWrapper(children)
+        }
+      )
+    }
+  );
+}
+var _Tooltip = forwardRef(Tooltip);
+_Tooltip.displayName = "Tooltip";
+
+export { GlobalTooltipCssSelector, _Tooltip };

package/dist/chunk-MKIZYDD5.js

@@ -0,0 +1,52 @@
+import { ListBoxItemSkeletonContext } from './chunk-D4HRZVZO.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___3tNNw", "placeholder-shimmer": "ListBoxItemSkeleton-module__placeholder-shimmer___ux8ef", "hop-ListBoxItemSkeleton--xs": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--xs___dHyQI", "hop-ListBoxItemSkeleton--sm": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--sm___IQD-o", "hop-ListBoxItemSkeleton--md": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--md___-WuMS", "hop-ListBoxItemSkeleton--lg": "ListBoxItemSkeleton-module__hop-ListBoxItemSkeleton--lg___NwSLj" };
+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 };