@hopper-ui/components 1.5.12 → 1.5.13

package/dist/chunk-QYMSYYF5.js

@@ -0,0 +1,56 @@
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { _RichIconAvatarImage } from './chunk-XDFCDNZP.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { AnonymousRichIcon } 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 GlobalAnonymousAvatarCssSelector = "hop-AnonymousAvatar";
+function AnonymousAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    size: sizeValue,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalAnonymousAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...otherProps,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: props.isDisabled || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      ...mergeProps(otherProps, renderProps),
+      ref,
+      size,
+      children: /* @__PURE__ */ jsx(AnonymousRichIcon, {})
+    }
+  );
+}
+var _AnonymousAvatar = forwardRef(AnonymousAvatar);
+_AnonymousAvatar.displayName = "AnonymousAvatar";
+
+export { GlobalAnonymousAvatarCssSelector, _AnonymousAvatar };

package/dist/chunk-RFZC5CHX.js

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

package/dist/chunk-RNGNPV6Q.js

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

package/dist/chunk-RPAKOGH6.js

@@ -0,0 +1,80 @@
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { TabContext, InternalTabsContext } from './chunk-ZXON3BAA.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, Tab as Tab$1, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Tab.module.css#css-module
+var Tab_module_default = { "hop-Tab": "Tab-module__hop-Tab___I74MZ", "hop-Tab--fluid": "Tab-module__hop-Tab--fluid___sdUK4", "hop-Tab--md": "Tab-module__hop-Tab--md___LfrW0", "hop-Tab__icon": "Tab-module__hop-Tab__icon___GKOpW", "hop-Tab__text": "Tab-module__hop-Tab__text___qBNXe", "hop-Tab__badge": "Tab-module__hop-Tab__badge___zS0V-", "hop-Tab__tag": "Tab-module__hop-Tab__tag___vrQLh" };
+var GlobalTabCssSelector = "hop-Tab";
+function Tab(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TabContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { variant, size, isFluid } = (_a = useContext(InternalTabsContext)) != null ? _a : {};
+  const {
+    className,
+    children,
+    style,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalTabCssSelector,
+    cssModule(
+      Tab_module_default,
+      "hop-Tab",
+      variant,
+      size,
+      isFluid && "fluid"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    Tab$1,
+    {
+      ...otherProps,
+      style: mergedStyles,
+      className: classNames,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [TextContext, {
+              className: Tab_module_default["hop-Tab__text"],
+              size
+            }],
+            [IconContext, {
+              className: Tab_module_default["hop-Tab__icon"],
+              size
+            }],
+            [BadgeContext, {
+              className: Tab_module_default["hop-Tab__badge"]
+            }],
+            [TagContext, {
+              className: Tab_module_default["hop-Tab__tag"],
+              size
+            }]
+          ],
+          children: typeof children === "string" ? /* @__PURE__ */ jsx(_Text, { children }) : children
+        }
+      )
+    }
+  );
+}
+var _Tab = forwardRef(Tab);
+_Tab.displayName = "Tab";
+
+export { GlobalTabCssSelector, _Tab };

package/dist/chunk-RZFNJMEH.js

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

package/dist/chunk-S7KMOXY2.js

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

package/dist/chunk-SA322LHS.js

@@ -0,0 +1,76 @@
+import { LabelContext } from './chunk-YVCZUIU3.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Label as Label$1 } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Label.module.css#css-module
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___yQPNj", "hop-Label__indicator": "Label-module__hop-Label__indicator___pSeqL" };
+var GlobalLabelCssSelector = "hop-Label";
+function Label(props, ref) {
+  [props, ref] = useContextProps(props, ref, LabelContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    slot,
+    style,
+    isRequired,
+    necessityIndicator,
+    ...otherProps
+  } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const classNames = clsx(
+    className,
+    GlobalLabelCssSelector,
+    cssModule(
+      Label_module_default,
+      "hop-Label"
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const necessityLabel = isRequired ? stringFormatter.format("Label.necessityLabel.required") : stringFormatter.format("Label.necessityLabel.optional");
+  const requiredIndicator = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "aria-label": necessityLabel,
+      className: Label_module_default["hop-Label__indicator"],
+      children: "*"
+    }
+  );
+  const filteredProps = filterDOMProps(otherProps, { labelable: true });
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      ref,
+      className: classNames,
+      slot: slot || void 0,
+      style: mergedStyles,
+      ...filteredProps,
+      children: [
+        children,
+        necessityIndicator === "label" && !isRequired && /* @__PURE__ */ jsxs("span", { className: Label_module_default["hop-Label__label-indicator"], children: [
+          " (",
+          necessityLabel,
+          ")"
+        ] }),
+        necessityIndicator === "asterisk" && isRequired && requiredIndicator
+      ]
+    }
+  );
+}
+var _Label = forwardRef(Label);
+_Label.displayName = "Label";
+
+export { GlobalLabelCssSelector, _Label };

package/dist/chunk-SVY4NPVL.js

@@ -0,0 +1,288 @@
+import { useFontFaceReady } from './chunk-IU6XMS2X.js';
+import { TextAreaContext } from './chunk-MHQZXLKW.js';
+import { useTruncatedText } from './chunk-Z57VHYOF.js';
+import { _RemainingCharacterCount } from './chunk-H3CEJLCO.js';
+import { _InputGroup } from './chunk-X7VALEJB.js';
+import { _Label } from './chunk-SA322LHS.js';
+import { _HelperMessage } from './chunk-HANWII4T.js';
+import { _ErrorMessage } from './chunk-CFXK2ZSA.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import $670gB$react, { forwardRef, useState, useContext, useCallback, useRef, useMemo } from 'react';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import clsx from 'clsx';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, TextArea as TextArea$1, TextField } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+var $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ ($670gB$react).createContext($b5e257d569688ac6$var$defaultContext);
+var $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ ($670gB$react).createContext(false);
+var $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+var $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  let ref = (useRef)(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ($670gB$react).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  if (ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM && true) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter = $b5e257d569688ac6$var$useCounter(!!defaultId);
+  let prefix = `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix}-${counter}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = ($670gB$react).useId();
+  let [didSSR] = (useState)($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix}-${id}`;
+}
+typeof ($670gB$react)["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof ($670gB$react)["useSyncExternalStore"] === "function") return ($670gB$react)["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return (useContext)($b5e257d569688ac6$var$IsSSRContext);
+}
+
+// css-module:./TextArea.module.css#css-module
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___gP3c7", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___OLwgT", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___QQ32S", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___TIKue", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___hGc2s", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___Qjf1o", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___1WDb2", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___Osps-", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___vEXr0", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___XsVFW", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___NL7lo" };
+var GlobalTextAreaCssSelector = "hop-TextArea";
+var DefaultMinimumTextAreaRows = 3;
+var pxToInt = (value) => {
+  return value ? parseInt(value.replace("px", ""), 10) : 0;
+};
+function getBodyElement(isSSR) {
+  return !isSSR ? document.body : void 0;
+}
+function useCalculateRowHeight(input) {
+  const isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  const fontsLoaded = useFontFaceReady();
+  return useMemo(() => {
+    var _a, _b;
+    if (!input || !fontsLoaded) {
+      return 0;
+    }
+    const { font, lineHeight } = window.getComputedStyle(input);
+    if (lineHeight !== "normal") {
+      return pxToInt(lineHeight);
+    }
+    const element = document.createElement("span");
+    element.style.visibility = "hidden";
+    element.style.position = "absolute";
+    element.style.font = font;
+    element.innerText = "LineHeightHelper";
+    (_a = getBodyElement(isSSR)) == null ? void 0 : _a.appendChild(element);
+    const height = element.getBoundingClientRect().height;
+    (_b = getBodyElement(isSSR)) == null ? void 0 : _b.removeChild(element);
+    return height;
+  }, [input, fontsLoaded, isSSR]);
+}
+function TextArea(props, ref) {
+  var _a, _b, _c;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextAreaContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b2, _c2, _d;
+    return (_d = (_c2 = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c2 : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size: sizeProp,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    onChange: onChangeProp,
+    defaultValue,
+    maxRows,
+    cols,
+    rows: rowsProp,
+    value: valueProp,
+    resizeMode: resizeModeProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    allowExceedingMaxLength,
+    necessityIndicator,
+    inputGroupProps,
+    remainingCharacterCountProps,
+    label,
+    description,
+    errorMessage,
+    ...otherProps
+  } = ownProps;
+  const mergedTextAreaRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const resizeMode = (_b = useResponsiveValue(resizeModeProp)) != null ? _b : "none";
+  const overMaxLength = !!maxLength && characterCount > maxLength;
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextAreaCssSelector,
+    cssModule(
+      TextArea_module_default,
+      "hop-TextArea",
+      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]);
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextArea.");
+  }
+  if (allowExceedingMaxLength && !showCharacterCount) {
+    console.warn("If allowExceedingMaxLength is true, showCharacterCount must also be true.");
+  }
+  const rowHeight = useCalculateRowHeight(mergedTextAreaRef.current);
+  const defaultNumberOfRows = maxRows && maxRows < DefaultMinimumTextAreaRows ? maxRows : DefaultMinimumTextAreaRows;
+  const [rows, setRows] = useState(rowsProp != null ? rowsProp : defaultNumberOfRows);
+  const truncateText = useTruncatedText();
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const adjustRows = useCallback(() => {
+    const input = mergedTextAreaRef.current;
+    if (rowHeight === 0 || !input) {
+      return;
+    }
+    const { paddingBottom, paddingTop } = window.getComputedStyle(input);
+    const originalRows = input.rows;
+    const originalOverflow = input.style.overflow;
+    input.rows = 1;
+    input.style.overflow = "hidden";
+    const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
+    const currentRowsWithText = Math.floor((input.scrollHeight - padding) / rowHeight);
+    input.rows = originalRows;
+    input.style.overflow = originalOverflow;
+    if (rowsProp) {
+      setRows(rowsProp);
+    } else if (maxRows && currentRowsWithText >= maxRows) {
+      setRows(maxRows);
+    } else {
+      setRows(Math.max(currentRowsWithText, DefaultMinimumTextAreaRows));
+    }
+  }, [mergedTextAreaRef, rowHeight, maxRows, rowsProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (!allowExceedingMaxLength) {
+      const newValue = truncateText(value, maxLength);
+      onChange(newValue);
+    }
+    adjustRows();
+  }, [value, adjustRows]);
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
+  const inputGroupClassNames = clsx(TextArea_module_default["hop-TextArea__InputGroup"], inputGroupClassName);
+  const textAreaClassNames = cssModule(
+    TextArea_module_default,
+    "hop-TextArea__textarea",
+    size,
+    showCharacterCount && maxLength && "with-character-count"
+  );
+  const { className: remainingCharacterCountClassName, ...otherRemainingCharacterCountProps } = remainingCharacterCountProps != null ? remainingCharacterCountProps : {};
+  const remainingCharacterCountClassNames = clsx(TextArea_module_default["hop-TextArea__RemainingCharacterCount"], remainingCharacterCountClassName);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      className: inputGroupClassNames,
+      isDisabled,
+      isInvalid,
+      ...otherInputGroupProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          TextArea$1,
+          {
+            ref: mergedTextAreaRef,
+            placeholder,
+            cols,
+            rows,
+            className: textAreaClassNames
+          }
+        ),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(
+          _RemainingCharacterCount,
+          {
+            className: remainingCharacterCountClassNames,
+            count: maxLength - characterCount,
+            isInvalid: overMaxLength,
+            isDisabled,
+            ...otherRemainingCharacterCountProps
+          }
+        )
+      ]
+    }
+  ) });
+  const childrenMarkup = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(_Label, { className: TextArea_module_default["hop-TextArea__Label"], isRequired, necessityIndicator, children: label }),
+    inputMarkup,
+    description && /* @__PURE__ */ jsx(_HelperMessage, { className: TextArea_module_default["hop-TextArea__HelperMessage"], children: description }),
+    /* @__PURE__ */ jsx(_ErrorMessage, { className: TextArea_module_default["hop-TextArea__ErrorMessage"], children: errorMessage })
+  ] });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength: !allowExceedingMaxLength ? maxLength : void 0,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      "data-resize-mode": resizeMode,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+var _TextArea = forwardRef(TextArea);
+_TextArea.displayName = "TextArea";
+
+export { GlobalTextAreaCssSelector, _TextArea };

package/dist/chunk-SYFFZMMH.js

@@ -0,0 +1,144 @@
+import { _BaseModal } from './chunk-YCKOALBB.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { _ButtonGroup } from './chunk-CJ3TZIBR.js';
+import { _CloseButton } from './chunk-ND5XR6RA.js';
+import { _Button } from './chunk-TNLYOFSX.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { AlertContext } from './chunk-5DT3S5YY.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { chain } from 'react-aria';
+import { useContextProps, composeRenderProps, Dialog, Provider } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Alert.module.css#css-module
+var Alert_module_default = { "hop-Alert": "Alert-module__hop-Alert___c2UGW", "hop-Alert__button-group": "Alert-module__hop-Alert__button-group___83J7P", "hop-Alert__heading": "Alert-module__hop-Alert__heading___JTioE", "hop-Alert__close": "Alert-module__hop-Alert__close___IU-V2", "hop-Alert__content": "Alert-module__hop-Alert__content___QIIuk" };
+var GlobalAlertCssSelector = "hop-Alert";
+function Alert(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AlertContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    slot,
+    size: sizeProp,
+    autoFocusButton,
+    cancelButtonLabel,
+    isDismissable = true,
+    onCancelButtonClick,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    primaryButtonLabel,
+    secondaryButtonDisabled,
+    secondaryButtonLabel,
+    variant = "confirmation",
+    overlayProps,
+    isLoading,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalAlertCssSelector,
+    cssModule(
+      Alert_module_default,
+      GlobalAlertCssSelector,
+      variant
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      size,
+      isDismissable: isDismissable && !isLoading,
+      isKeyboardDismissDisabled: isDismissable && !isLoading,
+      ...overlayProps,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          role: "alertdialog",
+          ref,
+          slot,
+          style: mergedStyles,
+          className: classNames,
+          ...otherProps,
+          children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            isDismissable && /* @__PURE__ */ jsx(
+              _CloseButton,
+              {
+                isDisabled: isLoading,
+                className: Alert_module_default["hop-Alert__close"]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [HeadingContext, {
+                    className: Alert_module_default["hop-Alert__heading"],
+                    size: "lg",
+                    slot: "title"
+                  }],
+                  [ContentContext, {
+                    className: Alert_module_default["hop-Alert__content"]
+                  }]
+                ],
+                children: children(renderProps)
+              }
+            ),
+            /* @__PURE__ */ jsxs(_ButtonGroup, { align: "end", className: Alert_module_default["hop-Alert__button-group"], children: [
+              cancelButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onCancelButtonClick == null ? void 0 : onCancelButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading,
+                  autoFocus: autoFocusButton === "cancel",
+                  children: cancelButtonLabel
+                }
+              ),
+              secondaryButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onSecondaryButtonClick == null ? void 0 : onSecondaryButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading || secondaryButtonDisabled,
+                  autoFocus: autoFocusButton === "secondary",
+                  children: secondaryButtonLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  variant: variant === "confirmation" ? "primary" : "danger",
+                  isLoading,
+                  isDisabled: primaryButtonDisabled,
+                  autoFocus: autoFocusButton === "primary",
+                  onPress: () => chain(onPrimaryButtonClick == null ? void 0 : onPrimaryButtonClick(), renderProps.close),
+                  children: primaryButtonLabel
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+var _Alert = forwardRef(Alert);
+_Alert.displayName = "Alert";
+
+export { GlobalAlertCssSelector, _Alert };