@hopper-ui/components 1.0.4 → 1.0.6

package/dist/chunk-BC5A7RHI.js

@@ -0,0 +1,1260 @@
+import { PopoverTrigger } from './chunk-I4VPBQI7.js';
+import { HeadingContext } from './chunk-TXZ6BMFR.js';
+import { PopoverContext } from './chunk-SC6ZK5ON.js';
+import { GlobalTagListCssSelector, _TagList } from './chunk-WWRB4K4M.js';
+import { GlobalSwitchFieldCssSelector, _SwitchField } from './chunk-XRC7XE6B.js';
+import { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+import { GlobalTagGroupCssSelector, _TagGroup } from './chunk-37NW34QM.js';
+import { TagListContext } from './chunk-XLKYXKWE.js';
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { TagGroupContext } from './chunk-LCAS3YQV.js';
+import { GlobalRadioFieldCssSelector, _RadioField } from './chunk-RCX5B3S3.js';
+import { GlobalSwitchCssSelector, _Switch } from './chunk-4JAV3FIH.js';
+import { SwitchContext } from './chunk-YHBJAXUY.js';
+import { _Footer, GlobalFooterCssSelector } from './chunk-AQITZWYM.js';
+import { FooterContext } from './chunk-I67NHYK4.js';
+import { _Grid } from './chunk-N77LTZ4U.js';
+import { _Inline } from './chunk-Y7HUXUHX.js';
+import { _Stack } from './chunk-D6UTDI2K.js';
+import { fitContent, minmax, repeat } from './chunk-GFHBDUJD.js';
+import { SearchFieldContext } from './chunk-3NKF5TPD.js';
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { _Content, GlobalContentCssSelector } from './chunk-GXBVNCVP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { _Flex } from './chunk-TVFC2MJ4.js';
+import { GlobalInputGroupCssSelector, _InputGroup } from './chunk-V5GOY6TV.js';
+import { InputGroupContext } from './chunk-6BFSSZCY.js';
+import { PasswordFieldContext } from './chunk-QW45G6K4.js';
+import { _CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-6QMIRVLY.js';
+import { _CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-3LH2JHUO.js';
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
+import { _CheckboxList, GlobalCheckboxListCssSelector } from './chunk-3LRBUQC2.js';
+import { CheckboxListContext } from './chunk-WDUQUPTE.js';
+import { _Button, GlobalButtonCssSelector } from './chunk-XGKPMLYD.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { _ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-BKC74M6Y.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { _ClearButton, GlobalClearButtonCssSelector } from './chunk-OHB5QR5P.js';
+import { ClearButtonContext } from './chunk-DXVKHP4V.js';
+import { _EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-MED2BIDV.js';
+import { EmbeddedButtonContext } from './chunk-O7IJYNVQ.js';
+import { GlobalSectionCssSelector, _Section } from './chunk-O5PTD6IN.js';
+import { GlobalSpinnerCssSelector, _Spinner } from './chunk-G242LPQE.js';
+import { GlobalLabelCssSelector, _Label } from './chunk-HR25MLRP.js';
+import { SpinnerContext } from './chunk-4ZYV2XLW.js';
+import { GlobalListBoxCssSelector, GlobalListBoxEmptyItemCssSelector, _ListBox } from './chunk-RA7PM75O.js';
+import { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './chunk-TIPN4VYD.js';
+import { SectionContext } from './chunk-5H5AZJPQ.js';
+import { ListBoxContext } from './chunk-UIEP5BA5.js';
+import { GlobalListBoxItemCssSelector, _ListBoxItem } from './chunk-E4ALW4MZ.js';
+import { GlobalRadioGroupCssSelector, _RadioGroup } from './chunk-JRDN364E.js';
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioGroupContext } from './chunk-5MBJWRZD.js';
+import { GlobalRadioListCssSelector, _RadioList } from './chunk-NKHMUPAP.js';
+import { RadioListContext } from './chunk-A7TZHALP.js';
+import { GlobalRadioCssSelector, _Radio } from './chunk-2XUHTPCX.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { _Checkbox, GlobalCheckboxCssSelector } from './chunk-53FHDOG7.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { useLocalizedString } from './chunk-ZOTVZM6F.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
+import { GlobalHopperProviderCssSelector, _HopperProvider } from './chunk-NMKBUGSO.js';
+import { GlobalIconListCssSelector, _IconList } from './chunk-3A6TTZAA.js';
+import { GlobalLinkCssSelector, _Link } from './chunk-QBCCF2C2.js';
+import { LinkContext } from './chunk-4VVNSXIB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-MVRI6GLQ.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { GlobalHeaderCssSelector, _Header } from './chunk-L5A2UTQV.js';
+import { HeaderContext } from './chunk-7JOGKC3W.js';
+import { GlobalHelperMessageCssSelector, _HelperMessage } from './chunk-P5CWOV3L.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { _Badge, GlobalBadgeCssSelector } from './chunk-SOSHKMNI.js';
+import { GlobalOverlineTextCssSelector, _OverlineText } from './chunk-K4ZGI7DJ.js';
+import { OverlineTextContext } from './chunk-WPNVVGFW.js';
+import { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _Chip, GlobalChipCssSelector } from './chunk-F2URSFJA.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { ChipContext } from './chunk-632B5YBQ.js';
+import { _Divider, GlobalDividerCssSelector } from './chunk-J53HGLCT.js';
+import { DividerContext } from './chunk-FYIHMKHI.js';
+import { _AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-JUMJ6A3K.js';
+import { _Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-E4WFKXW4.js';
+import { GlobalTextCssSelector, _Text } from './chunk-RG4JKE4N.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
+import { _DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-J33IFG4U.js';
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage } from './chunk-ITQK6JTD.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';
+import { __export, __reExport } from './chunk-2P3A4VVY.js';
+import { EyeVisibleIcon, EyeHiddenIcon, IconContext, SearchIcon } from '@hopper-ui/icons';
+import * as styled_system_star from '@hopper-ui/styled-system';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { forwardRef, useReducer, useRef, useEffect, useState, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { Collection, useContextProps, composeRenderProps, Input, TextField as TextField$1, SearchField as SearchField$1, Popover as Popover$1, Dialog, Tag as Tag$1, Heading as Heading$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AnonymousAvatar: () => _AnonymousAvatar,
+  Avatar: () => _Avatar,
+  AvatarContext: () => AvatarContext,
+  AvatarToIconSizeAdapter: () => AvatarToIconSizeAdapter,
+  AvatarToTextSizeAdapter: () => AvatarToTextSizeAdapter,
+  Badge: () => _Badge,
+  BadgeContext: () => BadgeContext,
+  Button: () => _Button,
+  ButtonContext: () => ButtonContext,
+  ButtonGroup: () => _ButtonGroup,
+  ButtonGroupContext: () => ButtonGroupContext,
+  Checkbox: () => _Checkbox,
+  CheckboxContext: () => CheckboxContext,
+  CheckboxField: () => _CheckboxField,
+  CheckboxFieldContext: () => CheckboxFieldContext,
+  CheckboxGroup: () => _CheckboxGroup,
+  CheckboxGroupContext: () => CheckboxGroupContext,
+  CheckboxList: () => _CheckboxList,
+  CheckboxListContext: () => CheckboxListContext,
+  Chip: () => _Chip,
+  ChipContext: () => ChipContext,
+  ClearButton: () => _ClearButton,
+  ClearButtonContext: () => ClearButtonContext,
+  ClearContainerSlots: () => ClearContainerSlots,
+  ClearProviders: () => ClearProviders,
+  Collection: () => Collection,
+  Content: () => _Content,
+  ContentContext: () => ContentContext,
+  DeletedAvatar: () => _DeletedAvatar,
+  Divider: () => _Divider,
+  DividerContext: () => DividerContext,
+  EmbeddedButton: () => _EmbeddedButton,
+  EmbeddedButtonContext: () => EmbeddedButtonContext,
+  ErrorMessage: () => _ErrorMessage,
+  ErrorMessageContext: () => ErrorMessageContext,
+  Flex: () => _Flex,
+  Footer: () => _Footer,
+  FooterContext: () => FooterContext,
+  GlobalAnonymousAvatarCssSelector: () => GlobalAnonymousAvatarCssSelector,
+  GlobalAvatarCssSelector: () => GlobalAvatarCssSelector,
+  GlobalBadgeCssSelector: () => GlobalBadgeCssSelector,
+  GlobalButtonCssSelector: () => GlobalButtonCssSelector,
+  GlobalButtonGroupCssSelector: () => GlobalButtonGroupCssSelector,
+  GlobalCheckboxCssSelector: () => GlobalCheckboxCssSelector,
+  GlobalCheckboxFieldCssSelector: () => GlobalCheckboxFieldCssSelector,
+  GlobalCheckboxGroupCssSelector: () => GlobalCheckboxGroupCssSelector,
+  GlobalCheckboxListCssSelector: () => GlobalCheckboxListCssSelector,
+  GlobalChipCssSelector: () => GlobalChipCssSelector,
+  GlobalClearButtonCssSelector: () => GlobalClearButtonCssSelector,
+  GlobalContentCssSelector: () => GlobalContentCssSelector,
+  GlobalDeletedAvatarCssSelector: () => GlobalDeletedAvatarCssSelector,
+  GlobalDividerCssSelector: () => GlobalDividerCssSelector,
+  GlobalEmbeddedButtonCssSelector: () => GlobalEmbeddedButtonCssSelector,
+  GlobalErrorMessageCssSelector: () => GlobalErrorMessageCssSelector,
+  GlobalFooterCssSelector: () => GlobalFooterCssSelector,
+  GlobalHeaderCssSelector: () => GlobalHeaderCssSelector,
+  GlobalHeadingCssSelector: () => GlobalHeadingCssSelector,
+  GlobalHelperMessageCssSelector: () => GlobalHelperMessageCssSelector,
+  GlobalHopperProviderCssSelector: () => GlobalHopperProviderCssSelector,
+  GlobalIconListCssSelector: () => GlobalIconListCssSelector,
+  GlobalInputGroupCssSelector: () => GlobalInputGroupCssSelector,
+  GlobalLabelCssSelector: () => GlobalLabelCssSelector,
+  GlobalLinkCssSelector: () => GlobalLinkCssSelector,
+  GlobalListBoxCssSelector: () => GlobalListBoxCssSelector,
+  GlobalListBoxEmptyItemCssSelector: () => GlobalListBoxEmptyItemCssSelector,
+  GlobalListBoxItemCssSelector: () => GlobalListBoxItemCssSelector,
+  GlobalOverlineTextCssSelector: () => GlobalOverlineTextCssSelector,
+  GlobalPasswordFieldCssSelector: () => GlobalPasswordFieldCssSelector,
+  GlobalPopoverCssSelector: () => GlobalPopoverCssSelector,
+  GlobalRadioCssSelector: () => GlobalRadioCssSelector,
+  GlobalRadioFieldCssSelector: () => GlobalRadioFieldCssSelector,
+  GlobalRadioGroupCssSelector: () => GlobalRadioGroupCssSelector,
+  GlobalRadioListCssSelector: () => GlobalRadioListCssSelector,
+  GlobalRichIconAvatarImageCssSelector: () => GlobalRichIconAvatarImageCssSelector,
+  GlobalSearchFieldCssSelector: () => GlobalSearchFieldCssSelector,
+  GlobalSectionCssSelector: () => GlobalSectionCssSelector,
+  GlobalSpinnerCssSelector: () => GlobalSpinnerCssSelector,
+  GlobalSwitchCssSelector: () => GlobalSwitchCssSelector,
+  GlobalSwitchFieldCssSelector: () => GlobalSwitchFieldCssSelector,
+  GlobalTagCssSelector: () => GlobalTagCssSelector,
+  GlobalTagGroupCssSelector: () => GlobalTagGroupCssSelector,
+  GlobalTagListCssSelector: () => GlobalTagListCssSelector,
+  GlobalTextCssSelector: () => GlobalTextCssSelector,
+  GlobalTextFieldCssSelector: () => GlobalTextFieldCssSelector,
+  Grid: () => _Grid,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6,
+  Header: () => _Header,
+  HeaderContext: () => HeaderContext,
+  Heading: () => _Heading,
+  HeadingContext: () => HeadingContext,
+  HelperMessage: () => _HelperMessage,
+  HelperMessageContext: () => HelperMessageContext,
+  HopperProvider: () => _HopperProvider,
+  IconList: () => _IconList,
+  IconListContext: () => IconListContext,
+  Inline: () => _Inline,
+  InputGroup: () => _InputGroup,
+  InputGroupContext: () => InputGroupContext,
+  Label: () => _Label,
+  LabelContext: () => LabelContext,
+  Link: () => _Link,
+  LinkContext: () => LinkContext,
+  ListBox: () => _ListBox,
+  ListBoxContext: () => ListBoxContext,
+  ListBoxItem: () => _ListBoxItem,
+  ListBoxItemContext: () => ListBoxItemContext,
+  OverlineText: () => _OverlineText,
+  OverlineTextContext: () => OverlineTextContext,
+  PasswordField: () => _PasswordField,
+  PasswordFieldContext: () => PasswordFieldContext,
+  Popover: () => _Popover,
+  PopoverContext: () => PopoverContext,
+  PopoverTrigger: () => PopoverTrigger,
+  Radio: () => _Radio,
+  RadioContext: () => RadioContext,
+  RadioField: () => _RadioField,
+  RadioFieldContext: () => RadioFieldContext,
+  RadioGroup: () => _RadioGroup,
+  RadioGroupContext: () => RadioGroupContext,
+  RadioList: () => _RadioList,
+  RadioListContext: () => RadioListContext,
+  RichIconAvatarImage: () => _RichIconAvatarImage,
+  RichIconAvatarImageContext: () => RichIconAvatarImageContext,
+  SearchField: () => _SearchField,
+  SearchFieldContext: () => SearchFieldContext,
+  Section: () => _Section,
+  SectionContext: () => SectionContext,
+  SlotProvider: () => SlotProvider,
+  Spinner: () => _Spinner,
+  SpinnerContext: () => SpinnerContext,
+  Stack: () => _Stack,
+  Switch: () => _Switch,
+  SwitchContext: () => SwitchContext,
+  SwitchField: () => _SwitchField,
+  SwitchFieldContext: () => SwitchFieldContext,
+  Tag: () => _Tag,
+  TagContext: () => TagContext,
+  TagGroup: () => _TagGroup,
+  TagGroupContext: () => TagGroupContext,
+  TagList: () => _TagList,
+  TagListContext: () => TagListContext,
+  Text: () => _Text,
+  TextContext: () => TextContext,
+  TextField: () => _TextField,
+  TextFieldContext: () => TextFieldContext,
+  composeClassnameRenderProps: () => composeClassnameRenderProps,
+  cssModule: () => cssModule,
+  fitContent: () => fitContent,
+  isArray: () => isArray,
+  isDefined: () => isDefined,
+  isEmptyArray: () => isEmptyArray,
+  isFunction: () => isFunction,
+  isNil: () => isNil,
+  isNilOrEmpty: () => isNilOrEmpty,
+  isNull: () => isNull,
+  isNumber: () => isNumber,
+  isObject: () => isObject,
+  isPlainObject: () => isPlainObject,
+  isPromise: () => isPromise,
+  isString: () => isString,
+  isTextOnlyChildren: () => isTextOnlyChildren,
+  isUndefined: () => isUndefined,
+  minmax: () => minmax,
+  repeat: () => repeat,
+  useAsyncList: () => $f86e6c1ec7da6ebb$export$bc3384a35de93d66,
+  useRenderProps: () => useRenderProps,
+  useSlot: () => useSlot
+});
+
+// css-module:./PasswordField.module.css#css-module
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___qT1M7", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___-BkfP", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___--1oo", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___-SsGj", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___KPTAA", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___EF3Zx" };
+var GlobalPasswordFieldCssSelector = "hop-PasswordField";
+function PasswordField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, PasswordFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [showPassword, setShowPassword] = useState(false);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    style: styleProp,
+    size,
+    placeholder,
+    children,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    ...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,
+    GlobalPasswordFieldCssSelector,
+    cssModule(
+      PasswordField_module_default,
+      "hop-PasswordField",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isDisabled,
+      isInvalid,
+      isFluid: true,
+      size,
+      className: PasswordField_module_default["hop-PasswordField__InputGroup"],
+      children: [
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder, type: showPassword ? "text" : "password" }),
+        /* @__PURE__ */ jsx(
+          _EmbeddedButton,
+          {
+            isDisabled,
+            "aria-label": stringFormatter.format("PasswordField.toggleVisibility"),
+            onPress: () => {
+              setShowPassword((x) => !x);
+            },
+            size: "lg",
+            children: showPassword ? /* @__PURE__ */ jsx(EyeVisibleIcon, {}) : /* @__PURE__ */ jsx(EyeHiddenIcon, {})
+          }
+        )
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: PasswordField_module_default["hop-PasswordField__Label"] }],
+            [HelperMessageContext, { className: PasswordField_module_default["hop-PasswordField__HelperMessage"] }],
+            [ErrorMessageContext, { className: PasswordField_module_default["hop-PasswordField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ref,
+      style,
+      className: classNames,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _PasswordField = forwardRef(PasswordField);
+_PasswordField.displayName = "PasswordField";
+
+// css-module:./SearchField.module.css#css-module
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___XyPuD", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___fuYKp", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___JKz99", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___mWvae", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___NPE92", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___HIr0R", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___DIvi3", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___E5AoO", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___hyUlh" };
+var GlobalSearchFieldCssSelector = "hop-SearchField";
+function SearchField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, SearchFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    size,
+    placeholder,
+    isClearable = true,
+    children,
+    isFluid: isFluidProp,
+    icon = /* @__PURE__ */ jsx(SearchIcon, {}),
+    isDisabled,
+    isInvalid,
+    ...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 inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isDisabled,
+      isInvalid,
+      isFluid: true,
+      size,
+      className: SearchField_module_default["hop-SearchField__InputGroup"],
+      children: [
+        /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [IconContext, {
+                className: SearchField_module_default["hop-SearchField__prefix"]
+              }]
+            ],
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
+        isClearable && /* @__PURE__ */ jsx(_ClearButton, { size: "lg", isDisabled, className: SearchField_module_default["hop-SearchField__ClearButton"] })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"] }],
+            [HelperMessageContext, { className: SearchField_module_default["hop-SearchField__HelperMessage"] }],
+            [ErrorMessageContext, { className: SearchField_module_default["hop-SearchField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    SearchField$1,
+    {
+      ref,
+      style,
+      className: classNames,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _SearchField = forwardRef(SearchField);
+_SearchField.displayName = "SearchField";
+
+// css-module:./Popover.module.css#css-module
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___ahosg", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___rwQSO", "hop-Popover__title": "Popover-module__hop-Popover__title___VkIXX", "hop-Popover__actions": "Popover-module__hop-Popover__actions___A24RL", "hop-Popover__action": "Popover-module__hop-Popover__action___i8Fan", "hop-Popover__content": "Popover-module__hop-Popover__content___kMgPZ", "hop-Popover__footer": "Popover-module__hop-Popover__footer___N7P2Q" };
+var GlobalPopoverCssSelector = "hop-Popover";
+function Popover(props, ref) {
+  [props, ref] = useContextProps(props, ref, PopoverContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    className,
+    offset = 4,
+    boundaryOffset,
+    ...otherProps
+  } = ownProps;
+  const { colorScheme } = (0, src_exports.useColorSchemeContext)();
+  const popoverClassNames = composeClassnameRenderProps(
+    className,
+    GlobalPopoverCssSelector,
+    cssModule(
+      Popover_module_default,
+      "hop-Popover"
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      ...otherProps,
+      offset,
+      ref,
+      className: popoverClassNames,
+      arrowBoundaryOffset: boundaryOffset,
+      children: (state) => /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          className: clsx(stylingProps.className, Popover_module_default["hop-Popover__dialog"]),
+          style: stylingProps.style,
+          children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [HeadingContext, {
+                  className: Popover_module_default["hop-Popover__title"],
+                  size: "xs"
+                }],
+                [ButtonContext, {
+                  size: "sm",
+                  className: Popover_module_default["hop-Popover__action"]
+                }],
+                [ButtonGroupContext, {
+                  size: "sm",
+                  align: "end",
+                  className: Popover_module_default["hop-Popover__actions"]
+                }],
+                [ContentContext, {
+                  className: Popover_module_default["hop-Popover__content"]
+                }],
+                [FooterContext, {
+                  className: Popover_module_default["hop-Popover__footer"]
+                }],
+                [LinkContext, {
+                  size: "sm",
+                  variant: "primary",
+                  isQuiet: true
+                }]
+              ],
+              children: isFunction(children) && !isNil(children) ? children(state) : children
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+var _Popover = forwardRef(Popover);
+_Popover.displayName = "Popover";
+
+// css-module:./Tag.module.css#css-module
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___APxsb", "hop-Tag--md": "Tag-module__hop-Tag--md___PGGfP", "hop-Tag__icon": "Tag-module__hop-Tag__icon___oelf8", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___HNt-z", "hop-Tag__badge": "Tag-module__hop-Tag__badge___IZs0J", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___PINTP", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___lbIMQ", "hop-Tag--lg": "Tag-module__hop-Tag--lg___YTw5A", "hop-Tag__text": "Tag-module__hop-Tag__text___3hZ83", "hop-Badge--secondary": "Tag-module__hop-Badge--secondary___OeS9R" };
+var GlobalTagCssSelector = "hop-Tag";
+var TagToTextSizeAdapter = {
+  md: "xs",
+  lg: "sm"
+};
+function Tag(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TagContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    isInvalid,
+    isLoading,
+    size: sizeProp = "md",
+    style: styleProp,
+    textValue: textValueProp,
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const textValue = textValueProp != null ? textValueProp : typeof childrenProp === "string" ? childrenProp : void 0;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTagCssSelector,
+    cssModule(
+      Tag_module_default,
+      "hop-Tag",
+      size
+    ),
+    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;
+  });
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style,
+      textValue,
+      "data-invalid": isInvalid || void 0,
+      "data-loading": isLoading || void 0,
+      children: (tagProps) => {
+        const { allowsRemoving, isDisabled } = tagProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Tag_module_default["hop-Tag__text"],
+                  size: TagToTextSizeAdapter[size]
+                }],
+                [IconListContext, {
+                  className: Tag_module_default["hop-Tag__icon-list"],
+                  size: "sm"
+                }],
+                [IconContext, {
+                  className: Tag_module_default["hop-Tag__icon"],
+                  size: "sm"
+                }],
+                [BadgeContext, {
+                  className: Tag_module_default["hop-Tag__badge"],
+                  isDisabled
+                }]
+              ],
+              children: children(tagProps)
+            }
+          ) }),
+          allowsRemoving && !isLoading && /* @__PURE__ */ jsx(
+            _ClearButton,
+            {
+              slot: "remove",
+              isDisabled,
+              className: Tag_module_default["hop-Tag__remove-btn"],
+              "aria-label": stringFormatter.format("Tag.removeAriaLabel"),
+              size
+            }
+          ),
+          isLoading && /* @__PURE__ */ jsx(
+            _Spinner,
+            {
+              "aria-label": stringFormatter.format("Tag.spinnerAriaLabel"),
+              size: "sm",
+              className: Tag_module_default["hop-Tag__Spinner"]
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+var _Tag = forwardRef(Tag);
+_Tag.displayName = "Tag";
+function $0d86e9c8f07f9a7b$export$79c0c687a5963b0a(opts, dispatch) {
+  let { cursor, getKey } = opts;
+  return {
+    setSelectedKeys(selectedKeys) {
+      dispatch((state) => ({
+        ...state,
+        selectedKeys
+      }));
+    },
+    setFilterText(filterText) {
+      dispatch((state) => ({
+        ...state,
+        filterText
+      }));
+    },
+    insert(index, ...values) {
+      dispatch((state) => $0d86e9c8f07f9a7b$var$insert(state, index, ...values));
+    },
+    insertBefore(key, ...values) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) index = 0;
+          else return state;
+        }
+        return $0d86e9c8f07f9a7b$var$insert(state, index, ...values);
+      });
+    },
+    insertAfter(key, ...values) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) index = 0;
+          else return state;
+        }
+        return $0d86e9c8f07f9a7b$var$insert(state, index + 1, ...values);
+      });
+    },
+    prepend(...values) {
+      dispatch((state) => $0d86e9c8f07f9a7b$var$insert(state, 0, ...values));
+    },
+    append(...values) {
+      dispatch((state) => $0d86e9c8f07f9a7b$var$insert(state, state.items.length, ...values));
+    },
+    remove(...keys) {
+      dispatch((state) => {
+        let keySet = new Set(keys);
+        let items = state.items.filter((item) => !keySet.has(getKey(item)));
+        let selection = "all";
+        if (state.selectedKeys !== "all") {
+          selection = new Set(state.selectedKeys);
+          for (let key of keys) selection.delete(key);
+        }
+        if (cursor == null && items.length === 0) selection = /* @__PURE__ */ new Set();
+        return {
+          ...state,
+          items,
+          selectedKeys: selection
+        };
+      });
+    },
+    removeSelectedItems() {
+      dispatch((state) => {
+        if (state.selectedKeys === "all") return {
+          ...state,
+          items: [],
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+        let selectedKeys = state.selectedKeys;
+        let items = state.items.filter((item) => !selectedKeys.has(getKey(item)));
+        return {
+          ...state,
+          items,
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+      });
+    },
+    move(key, toIndex) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item2) => getKey(item2) === key);
+        if (index === -1) return state;
+        let copy = state.items.slice();
+        let [item] = copy.splice(index, 1);
+        copy.splice(toIndex, 0, item);
+        return {
+          ...state,
+          items: copy
+        };
+      });
+    },
+    moveBefore(key, keys) {
+      dispatch((state) => {
+        let toIndex = state.items.findIndex((item) => getKey(item) === key);
+        if (toIndex === -1) return state;
+        let keyArray = Array.isArray(keys) ? keys : [
+          ...keys
+        ];
+        let indices = keyArray.map((key2) => state.items.findIndex((item) => getKey(item) === key2)).sort((a, b) => a - b);
+        return $0d86e9c8f07f9a7b$var$move(state, indices, toIndex);
+      });
+    },
+    moveAfter(key, keys) {
+      dispatch((state) => {
+        let toIndex = state.items.findIndex((item) => getKey(item) === key);
+        if (toIndex === -1) return state;
+        let keyArray = Array.isArray(keys) ? keys : [
+          ...keys
+        ];
+        let indices = keyArray.map((key2) => state.items.findIndex((item) => getKey(item) === key2)).sort((a, b) => a - b);
+        return $0d86e9c8f07f9a7b$var$move(state, indices, toIndex + 1);
+      });
+    },
+    update(key, newValue) {
+      dispatch((state) => {
+        let index = state.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) return state;
+        return {
+          ...state,
+          items: [
+            ...state.items.slice(0, index),
+            newValue,
+            ...state.items.slice(index + 1)
+          ]
+        };
+      });
+    }
+  };
+}
+function $0d86e9c8f07f9a7b$var$insert(state, index, ...values) {
+  return {
+    ...state,
+    items: [
+      ...state.items.slice(0, index),
+      ...values,
+      ...state.items.slice(index)
+    ]
+  };
+}
+function $0d86e9c8f07f9a7b$var$move(state, indices, toIndex) {
+  toIndex -= indices.filter((index) => index < toIndex).length;
+  let moves = indices.map((from) => ({
+    from,
+    to: toIndex++
+  }));
+  for (let i = 0; i < moves.length; i++) {
+    let a = moves[i].from;
+    for (let j = i; j < moves.length; j++) {
+      let b = moves[j].from;
+      if (b > a) moves[j].from--;
+    }
+  }
+  for (let i = 0; i < moves.length; i++) {
+    let a = moves[i];
+    for (let j = moves.length - 1; j > i; j--) {
+      let b = moves[j];
+      if (b.from < a.to) a.to++;
+      else b.from++;
+    }
+  }
+  let copy = state.items.slice();
+  for (let move of moves) {
+    let [item] = copy.splice(move.from, 1);
+    copy.splice(move.to, 0, item);
+  }
+  return {
+    ...state,
+    items: copy
+  };
+}
+function $f86e6c1ec7da6ebb$var$reducer(data, action) {
+  let selectedKeys;
+  switch (data.state) {
+    case "idle":
+    case "error":
+      switch (action.type) {
+        case "loading":
+        case "loadingMore":
+        case "sorting":
+        case "filtering":
+          var _action_filterText, _action_sortDescriptor;
+          return {
+            ...data,
+            filterText: (_action_filterText = action.filterText) !== null && _action_filterText !== void 0 ? _action_filterText : data.filterText,
+            state: action.type,
+            // Reset items to an empty list if loading, but not when sorting.
+            items: action.type === "loading" ? [] : data.items,
+            sortDescriptor: (_action_sortDescriptor = action.sortDescriptor) !== null && _action_sortDescriptor !== void 0 ? _action_sortDescriptor : data.sortDescriptor,
+            abortController: action.abortController
+          };
+        case "update":
+          return {
+            ...data,
+            ...action.updater(data)
+          };
+        case "success":
+        case "error":
+          return data;
+        default:
+          throw new Error(`Invalid action "${action.type}" in state "${data.state}"`);
+      }
+    case "loading":
+    case "sorting":
+    case "filtering":
+      switch (action.type) {
+        case "success":
+          if (action.abortController !== data.abortController) return data;
+          var _action_selectedKeys;
+          selectedKeys = (_action_selectedKeys = action.selectedKeys) !== null && _action_selectedKeys !== void 0 ? _action_selectedKeys : data.selectedKeys;
+          var _action_filterText1, _action_sortDescriptor1;
+          return {
+            ...data,
+            filterText: (_action_filterText1 = action.filterText) !== null && _action_filterText1 !== void 0 ? _action_filterText1 : data.filterText,
+            state: "idle",
+            items: [
+              ...action.items
+            ],
+            selectedKeys: selectedKeys === "all" ? "all" : new Set(selectedKeys),
+            sortDescriptor: (_action_sortDescriptor1 = action.sortDescriptor) !== null && _action_sortDescriptor1 !== void 0 ? _action_sortDescriptor1 : data.sortDescriptor,
+            abortController: null,
+            cursor: action.cursor
+          };
+        case "error":
+          if (action.abortController !== data.abortController) return data;
+          return {
+            ...data,
+            state: "error",
+            error: action.error,
+            abortController: null
+          };
+        case "loading":
+        case "loadingMore":
+        case "sorting":
+        case "filtering":
+          data.abortController.abort();
+          var _action_filterText2;
+          return {
+            ...data,
+            filterText: (_action_filterText2 = action.filterText) !== null && _action_filterText2 !== void 0 ? _action_filterText2 : data.filterText,
+            state: action.type,
+            // Reset items to an empty list if loading, but not when sorting.
+            items: action.type === "loading" ? [] : data.items,
+            abortController: action.abortController
+          };
+        case "update":
+          return {
+            ...data,
+            ...action.updater(data)
+          };
+        default:
+          throw new Error(`Invalid action "${action.type}" in state "${data.state}"`);
+      }
+    case "loadingMore":
+      switch (action.type) {
+        case "success":
+          var _action_selectedKeys1;
+          selectedKeys = data.selectedKeys === "all" || action.selectedKeys === "all" ? "all" : /* @__PURE__ */ new Set([
+            ...data.selectedKeys,
+            ...(_action_selectedKeys1 = action.selectedKeys) !== null && _action_selectedKeys1 !== void 0 ? _action_selectedKeys1 : []
+          ]);
+          var _action_sortDescriptor2;
+          return {
+            ...data,
+            state: "idle",
+            items: [
+              ...data.items,
+              ...action.items
+            ],
+            selectedKeys,
+            sortDescriptor: (_action_sortDescriptor2 = action.sortDescriptor) !== null && _action_sortDescriptor2 !== void 0 ? _action_sortDescriptor2 : data.sortDescriptor,
+            abortController: null,
+            cursor: action.cursor
+          };
+        case "error":
+          if (action.abortController !== data.abortController) return data;
+          return {
+            ...data,
+            state: "error",
+            error: action.error
+          };
+        case "loading":
+        case "sorting":
+        case "filtering":
+          data.abortController.abort();
+          var _action_filterText3;
+          return {
+            ...data,
+            filterText: (_action_filterText3 = action.filterText) !== null && _action_filterText3 !== void 0 ? _action_filterText3 : data.filterText,
+            state: action.type,
+            // Reset items to an empty list if loading, but not when sorting.
+            items: action.type === "loading" ? [] : data.items,
+            abortController: action.abortController
+          };
+        case "loadingMore":
+          action.abortController.abort();
+          return data;
+        case "update":
+          return {
+            ...data,
+            ...action.updater(data)
+          };
+        default:
+          throw new Error(`Invalid action "${action.type}" in state "${data.state}"`);
+      }
+    default:
+      throw new Error(`Invalid state "${data.state}"`);
+  }
+}
+function $f86e6c1ec7da6ebb$export$bc3384a35de93d66(options) {
+  const { load, sort, initialSelectedKeys, initialSortDescriptor, getKey = (item) => item.id || item.key, initialFilterText = "" } = options;
+  let [data, dispatch] = (useReducer)($f86e6c1ec7da6ebb$var$reducer, {
+    state: "idle",
+    error: null,
+    items: [],
+    selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys),
+    sortDescriptor: initialSortDescriptor,
+    filterText: initialFilterText
+  });
+  const dispatchFetch = async (action, fn) => {
+    let abortController = new AbortController();
+    try {
+      dispatch({
+        ...action,
+        abortController
+      });
+      var _action_filterText;
+      let previousFilterText = (_action_filterText = action.filterText) !== null && _action_filterText !== void 0 ? _action_filterText : data.filterText;
+      var _action_sortDescriptor;
+      let response = await fn({
+        items: data.items.slice(),
+        selectedKeys: data.selectedKeys,
+        sortDescriptor: (_action_sortDescriptor = action.sortDescriptor) !== null && _action_sortDescriptor !== void 0 ? _action_sortDescriptor : data.sortDescriptor,
+        signal: abortController.signal,
+        cursor: action.type === "loadingMore" ? data.cursor : null,
+        filterText: previousFilterText
+      });
+      var _response_filterText;
+      let filterText = (_response_filterText = response.filterText) !== null && _response_filterText !== void 0 ? _response_filterText : previousFilterText;
+      dispatch({
+        type: "success",
+        ...response,
+        abortController
+      });
+      if (filterText && filterText !== previousFilterText && !abortController.signal.aborted) dispatchFetch({
+        type: "filtering",
+        filterText
+      }, load);
+    } catch (e) {
+      dispatch({
+        type: "error",
+        error: e,
+        abortController
+      });
+    }
+  };
+  let didDispatchInitialFetch = (useRef)(false);
+  (useEffect)(() => {
+    if (!didDispatchInitialFetch.current) {
+      dispatchFetch({
+        type: "loading"
+      }, load);
+      didDispatchInitialFetch.current = true;
+    }
+  }, []);
+  return {
+    items: data.items,
+    selectedKeys: data.selectedKeys,
+    sortDescriptor: data.sortDescriptor,
+    isLoading: data.state === "loading" || data.state === "loadingMore" || data.state === "sorting" || data.state === "filtering",
+    loadingState: data.state,
+    error: data.error,
+    filterText: data.filterText,
+    getItem(key) {
+      return data.items.find((item) => getKey(item) === key);
+    },
+    reload() {
+      dispatchFetch({
+        type: "loading"
+      }, load);
+    },
+    loadMore() {
+      if (data.state === "loadingMore" || data.state === "filtering" || data.cursor == null) return;
+      dispatchFetch({
+        type: "loadingMore"
+      }, load);
+    },
+    sort(sortDescriptor) {
+      dispatchFetch({
+        type: "sorting",
+        sortDescriptor
+      }, sort || load);
+    },
+    ...($0d86e9c8f07f9a7b$export$79c0c687a5963b0a)({
+      ...options,
+      getKey,
+      cursor: data.cursor
+    }, (fn) => {
+      dispatch({
+        type: "update",
+        updater: fn
+      });
+    }),
+    setFilterText(filterText) {
+      dispatchFetch({
+        type: "filtering",
+        filterText
+      }, load);
+    }
+  };
+}
+
+// src/index.ts
+__reExport(src_exports, styled_system_star);
+
+// css-module:./Heading.module.css#css-module
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___0-OVa", "hop-Heading--xs": "Heading-module__hop-Heading--xs___Gv8a-", "hop-Heading--sm": "Heading-module__hop-Heading--sm___Pp2Y3", "hop-Heading--md": "Heading-module__hop-Heading--md___WcfUF", "hop-Heading--lg": "Heading-module__hop-Heading--lg___bdnQF", "hop-Heading--xl": "Heading-module__hop-Heading--xl___Lt00B", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___yT4Le", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___z-3OX" };
+var GlobalHeadingCssSelector = "hop-Heading";
+function Heading(props, ref) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
+  const size = (0, src_exports.useResponsiveValue)(sizeProp != null ? sizeProp : "md");
+  const classNames = clsx(
+    GlobalHeadingCssSelector,
+    cssModule(
+      Heading_module_default,
+      "hop-Heading",
+      size
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Heading$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      children
+    }
+  );
+}
+var _Heading = forwardRef(Heading);
+_Heading.displayName = "Heading";
+function createHeading(as) {
+  const level = parseInt(as[1]);
+  return forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsx(_Heading, { ...props, ref, level });
+  });
+}
+var H1 = createHeading("h1");
+var H2 = createHeading("h2");
+var H3 = createHeading("h3");
+var H4 = createHeading("h4");
+var H5 = createHeading("h5");
+var H6 = createHeading("h6");
+
+// css-module:./TextField.module.css#css-module
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___Ueoup", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___4EfDT", "hop-TextField__Label": "TextField-module__hop-TextField__Label___evsNo", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___84A9c", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___nPfog", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___9o-kF", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___GWvWo" };
+var GlobalTextFieldCssSelector = "hop-TextField";
+function TextField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextFieldContext);
+  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,
+    children,
+    onClear,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    ...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,
+    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 [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.");
+  }
+  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: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+    }
+  ) : null;
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      size,
+      className: TextField_module_default["hop-TextField__InputGroup"],
+      isDisabled,
+      isInvalid,
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(CharacterCount, { characterLeft: maxLength - characterCount }),
+        showClearButton && /* @__PURE__ */ jsx(_ClearButton, { isDisabled, size: "lg", onPress: handleClear })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
+            [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength,
+      onChange,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+function CharacterCount({ characterLeft }) {
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: characterLeft });
+  return /* @__PURE__ */ jsx(_Text, { "aria-label": accessibilityString, color: "neutral-weakest", size: "xs", children: characterLeft });
+}
+var _TextField = forwardRef(TextField);
+_TextField.displayName = "TextField";
+
+export { GlobalHeadingCssSelector, GlobalPasswordFieldCssSelector, GlobalPopoverCssSelector, GlobalSearchFieldCssSelector, GlobalTagCssSelector, GlobalTextFieldCssSelector, H1, H2, H3, H4, H5, H6, _Heading, _PasswordField, _Popover, _SearchField, _Tag, _TextField };