@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-SYH4BLWA.js

@@ -0,0 +1,58 @@
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { _RichIconAvatarImage } from './chunk-444PPC5Q.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { DeletedUserRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalDeletedAvatarCssSelector = "hop-DeletedAvatar";
+function DeletedAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeValue,
+    style,
+    isDisabled,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalDeletedAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      isDisabled,
+      ref,
+      size,
+      ...mergeProps(renderProps, otherProps),
+      children: /* @__PURE__ */ jsx(DeletedUserRichIcon, {})
+    }
+  );
+}
+var _DeletedAvatar = forwardRef(DeletedAvatar);
+_DeletedAvatar.displayName = "DeletedAvatar";
+
+export { GlobalDeletedAvatarCssSelector, _DeletedAvatar };

package/dist/chunk-T2M4FTI2.js

@@ -0,0 +1,89 @@
+import { SegmentedControlContext, InternalSegmentedControlContext } from './chunk-6BJLSAMM.js';
+import { SegmentedControlItemContext } from './chunk-VS3PE4S6.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { useContextProps, ToggleGroupStateContext, ToggleButtonGroup, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./SegmentedControl.module.css#css-module
+var SegmentedControl_module_default = { "hop-SegmentedControl": "SegmentedControl-module__hop-SegmentedControl___7tk-6" };
+var GlobalSegmentedControlCssSelector = "hop-SegmentedControl";
+var SegmentedControl = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, SegmentedControlContext);
+  const state = useContext(ToggleGroupStateContext);
+  const prevRef = useRef(null);
+  const currentSelectedRef = useRef(null);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    defaultSelectedKey,
+    selectedKey,
+    onSelectionChange,
+    size,
+    isJustified,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalSegmentedControlCssSelector,
+    cssModule(
+      SegmentedControl_module_default,
+      "hop-SegmentedControl"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const onChange = (values) => {
+    const [firstKey] = values;
+    if (!firstKey) {
+      return;
+    }
+    if (currentSelectedRef.current) {
+      prevRef.current = currentSelectedRef.current.getBoundingClientRect();
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange(firstKey);
+  };
+  useEffect(() => {
+    const key = defaultSelectedKey != null ? defaultSelectedKey : selectedKey;
+    if (key) {
+      state == null ? void 0 : state.toggleKey(key);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      orientation: "horizontal",
+      onSelectionChange: onChange,
+      selectedKeys: selectedKey != null ? [selectedKey] : void 0,
+      defaultSelectedKeys: defaultSelectedKey != null ? [defaultSelectedKey] : void 0,
+      disallowEmptySelection: true,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [SegmentedControlItemContext, { size, isDisabled: otherProps.isDisabled }],
+            [InternalSegmentedControlContext, { prevRef, currentSelectedRef, isJustified }]
+          ],
+          children
+        }
+      )
+    }
+  );
+};
+var _SegmentedControl = forwardRef(SegmentedControl);
+_SegmentedControl.displayName = "SegmentedControl";
+
+export { GlobalSegmentedControlCssSelector, _SegmentedControl };

package/dist/chunk-TDAEMXEE.js

@@ -0,0 +1,53 @@
+import { SvgImageContext } from './chunk-M4CKZFAM.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:./SvgImage.module.css#css-module
+var SvgImage_module_default = { "hop-SvgImage": "SvgImage-module__hop-SvgImage___MUO08" };
+var GlobalSvgImageCssSelector = "hop-SvgImage";
+function SvgImage(props, ref) {
+  [props, ref] = useContextProps(props, ref, SvgImageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    src,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalSvgImageCssSelector,
+    cssModule(
+      SvgImage_module_default,
+      "hop-SvgImage"
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const SvgComponent = useResponsiveValue(src);
+  if (!SvgComponent) {
+    console.error("SvgImage component expects src");
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SvgComponent,
+    {
+      ...otherProps,
+      className: classNames,
+      style: mergedStyles,
+      ref,
+      role: "img"
+    }
+  );
+}
+var _SvgImage = forwardRef(SvgImage);
+_SvgImage.displayName = "SvgImage";
+
+export { GlobalSvgImageCssSelector, _SvgImage };

package/dist/chunk-THQ4OAEL.js

@@ -0,0 +1,131 @@
+import { TagGroupContext, InternalTagGroupContext } from './chunk-4BWTFR22.js';
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _Label } from './chunk-N6X66BJY.js';
+import { _HelperMessage } from './chunk-2TNVXSEJ.js';
+import { _ErrorMessage } from './chunk-3UGFIGCD.js';
+import { useFormProps } from './chunk-TRCGBAIX.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.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, composeRenderProps, FieldErrorContext, TagGroup as TagGroup$1, TagList } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./TagGroup.module.css#css-module
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___p5bWN", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___6q9SK", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___X0O42", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___H7U7g", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___jt7RK" };
+var GlobalTagGroupCssSelector = "hop-TagGroup";
+function TagGroup(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TagGroupContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    description,
+    errorMessage,
+    isInvalid = false,
+    items,
+    label,
+    necessityIndicator,
+    renderEmptyState,
+    style: styleProp,
+    size: sizeProp,
+    tagListProps,
+    variant,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const { stylingProps: tagListStylingProps, ...tagListOwnProps } = useStyledSystem(tagListProps != null ? tagListProps : {});
+  const {
+    className: tagListClassName,
+    style: tagListStyleProp,
+    ...otherTagListProps
+  } = tagListOwnProps;
+  const classNames = clsx(
+    className,
+    GlobalTagGroupCssSelector,
+    stylingProps.className,
+    cssModule(
+      TagGroup_module_default,
+      "hop-TagGroup",
+      size
+    )
+  );
+  const tagListClassNames = composeClassnameRenderProps(
+    tagListClassName,
+    cssModule(
+      TagGroup_module_default,
+      "hop-TagGroup__list",
+      size
+    ),
+    tagListStylingProps.className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  const tagListStyle = composeRenderProps(tagListStyleProp, (prev) => {
+    return {
+      ...tagListStylingProps.style,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    InternalTagGroupContext.Provider,
+    {
+      value: {
+        isInGroup: true
+      },
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [TagContext, {
+              className: TagGroup_module_default["hop-TagGroup__tag"],
+              isInvalid,
+              size,
+              variant
+            }],
+            [FieldErrorContext, {
+              isInvalid,
+              validationErrors: [],
+              validationDetails: {}
+            }]
+          ],
+          children: /* @__PURE__ */ jsxs(
+            TagGroup$1,
+            {
+              ref,
+              className: classNames,
+              style,
+              ...otherProps,
+              children: [
+                label && /* @__PURE__ */ jsx(_Label, { className: TagGroup_module_default["hop-TagGroup__Label"], necessityIndicator, children: label }),
+                /* @__PURE__ */ jsx(
+                  TagList,
+                  {
+                    items,
+                    renderEmptyState,
+                    className: tagListClassNames,
+                    style: tagListStyle,
+                    ...otherTagListProps,
+                    children
+                  }
+                ),
+                description && /* @__PURE__ */ jsx(_HelperMessage, { className: TagGroup_module_default["hop-TagGroup__error-message"], hideIcon: true, children: description }),
+                /* @__PURE__ */ jsx(_ErrorMessage, { className: TagGroup_module_default["hop-TagGroup__helper-message"], hideIcon: true, children: errorMessage })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var _TagGroup = forwardRef(TagGroup);
+_TagGroup.displayName = "TagGroup";
+
+export { GlobalTagGroupCssSelector, _TagGroup };

package/dist/chunk-TRCGBAIX.js

@@ -0,0 +1,68 @@
+import { FormContext } from './chunk-UYYHPXUH.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { Form as Form$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Form.module.css#css-module
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___FyvEO" };
+var GlobalFormCssSelector = "hop-Form";
+function useFormProps(props) {
+  const ctx = useContext(FormContext);
+  return useMemo(() => {
+    let result = props;
+    if (ctx) {
+      result = { ...props };
+      for (const key in ctx) {
+        if (result[key] === void 0) {
+          result[key] = ctx[key];
+        }
+      }
+    }
+    return result;
+  }, [ctx, props]);
+}
+function Form(props, ref) {
+  var _a;
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isFluid,
+    isDisabled,
+    necessityIndicator,
+    size: sizeProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalFormCssSelector,
+    cssModule(
+      Form_module_default,
+      "hop-Form"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { isDisabled, isFluid, necessityIndicator, size }, children: /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children
+    }
+  ) });
+}
+var _Form = forwardRef(Form);
+_Form.displayName = "Form";
+
+export { GlobalFormCssSelector, _Form, useFormProps };

package/dist/chunk-U36V63TW.js

@@ -0,0 +1,58 @@
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { SlotProvider } from './chunk-M36KANKC.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, 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___Fwn4J", "hop-Text--xs": "Text-module__hop-Text--xs___vBBia", "hop-Text--sm": "Text-module__hop-Text--sm___CuD-V", "hop-Text--md": "Text-module__hop-Text--md___29Na4", "hop-Text--lg": "Text-module__hop-Text--lg___v4hQy", "hop-Text--xl": "Text-module__hop-Text--xl___R5ZqU", "hop-Text--2xl": "Text-module__hop-Text--2xl___vOufo", "hop-Text--inherit": "Text-module__hop-Text--inherit___mSz8x" };
+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,
+    {
+      ref,
+      elementType,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [TextContext, {
+              size: "inherit"
+            }]
+          ],
+          children
+        }
+      ) })
+    }
+  );
+}
+var _Text = slot("text", forwardRef(Text));
+_Text.displayName = "Text";
+
+export { GlobalTextCssSelector, _Text };

package/dist/chunk-U4HRZ6DN.js

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

package/dist/chunk-UAYL3XDR.js

@@ -0,0 +1,124 @@
+import { SearchFieldContext } from './chunk-3NKF5TPD.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 { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SearchIcon, IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, SearchField as SearchField$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./SearchField.module.css#css-module
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___676vb", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___WJkgj", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___DJY2v", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___aWoUa", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___QA7dQ", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___gCL7W", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___K-pwp", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___x1-o5", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___D-uK7" };
+var GlobalSearchFieldCssSelector = "hop-SearchField";
+function SearchField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, SearchFieldContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    placeholder,
+    isClearable = true,
+    isFluid: isFluidProp,
+    icon = /* @__PURE__ */ jsx(SearchIcon, {}),
+    isDisabled,
+    isInvalid,
+    isRequired,
+    necessityIndicator,
+    inputGroupProps,
+    clearButtonProps,
+    isReadOnly,
+    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 classNames = composeClassnameRenderProps(
+    className,
+    GlobalSearchFieldCssSelector,
+    cssModule(
+      SearchField_module_default,
+      "hop-SearchField",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(SearchField_module_default["hop-SearchField__InputGroup"], inputGroupClassName);
+  const { className: clearButtonClassName, ...otherClearButtonProps } = clearButtonProps != null ? clearButtonProps : {};
+  const clearButtonClassNames = clsx(SearchField_module_default["hop-SearchField__ClearButton"], clearButtonClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isDisabled,
+      isInvalid,
+      isFluid: true,
+      className: inputGroupClassNames,
+      ...otherInputGroupProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [IconContext, {
+                className: SearchField_module_default["hop-SearchField__prefix"]
+              }]
+            ],
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(Input, { size, ref: inputRef, placeholder }),
+        isClearable && !isReadOnly && /* @__PURE__ */ jsx(_ClearButton, { size: "lg", isDisabled, className: clearButtonClassNames, ...otherClearButtonProps })
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: SearchField_module_default["hop-SearchField__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: SearchField_module_default["hop-SearchField__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: SearchField_module_default["hop-SearchField__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    SearchField$1,
+    {
+      ref,
+      style,
+      className: classNames,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _SearchField = forwardRef(SearchField);
+_SearchField.displayName = "SearchField";
+
+export { GlobalSearchFieldCssSelector, _SearchField };

package/dist/chunk-UL2ITI33.js

@@ -0,0 +1,44 @@
+import { OverlineTextContext } from './chunk-ZRDKRE3E.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Text } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./OverlineText.module.css#css-module
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___FGab2", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___JGsJy" };
+var GlobalOverlineTextCssSelector = "hop-OverlineText";
+function OverlineText(props, ref) {
+  [props, ref] = useContextProps(props, ref, OverlineTextContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, children, style, elementType = "span", ...otherProps } = ownProps;
+  const classNames = clsx(
+    GlobalOverlineTextCssSelector,
+    cssModule(
+      OverlineText_module_default,
+      "hop-OverlineText"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref,
+      elementType,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx("span", { className: OverlineText_module_default["hop-OverlineText__text"], children })
+    }
+  );
+}
+var _OverlineText = forwardRef(OverlineText);
+_OverlineText.displayName = "OverlineText";
+
+export { GlobalOverlineTextCssSelector, _OverlineText };

package/dist/chunk-UL5R2TMS.js

@@ -0,0 +1,46 @@
+import { TabPanelContext } from './chunk-ZXON3BAA.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./TabPanel.module.css#css-module
+var TabPanel_module_default = { "hop-TabPanel": "TabPanel-module__hop-TabPanel___Objxc" };
+var GlobalTabPanelCssSelector = "hop-TabPanel";
+function TabPanel(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTabPanelCssSelector,
+    cssModule(
+      TabPanel_module_default,
+      "hop-TabPanel"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    TabPanel$1,
+    {
+      ref,
+      style: mergedStyles,
+      className: classNames,
+      ...otherProps
+    }
+  );
+}
+var _TabPanel = forwardRef(TabPanel);
+_TabPanel.displayName = "TabPanel";
+
+export { GlobalTabPanelCssSelector, _TabPanel };