@hopper-ui/components 1.0.13 → 1.2.0

package/dist/{chunk-44KY7MFF.js → chunk-FA4IXLWZ.js}

@@ -1,13 +1,13 @@
 import { TextFieldContext } from './chunk-O4XPUINW.js';
-import { _InputGroup } from './chunk-CCIVRIKG.js';
-import { _ClearButton } from './chunk-KARK64JC.js';
+import { _InputGroup } from './chunk-Q63YLWI6.js';
+import { _ClearButton } from './chunk-2XO5CZBO.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -22,7 +22,7 @@ import { useContextProps, composeRenderProps, Input, TextField as TextField$1 }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___MhexN", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___L7sJC", "hop-TextField__Label": "TextField-module__hop-TextField__Label___Dhi3n", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___SmAfg", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___3UroJ", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___xXkxs", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___JAlbC" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___p1zZl", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___upyKv", "hop-TextField__Label": "TextField-module__hop-TextField__Label___KP7AK", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___o3YUl", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___b7EQq", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___oXqwU", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___WN1xO" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -53,6 +53,7 @@ function TextField(props, ref) {
     isFluid: isFluidProp,
     isDisabled,
     isInvalid,
+    isRequired,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -119,7 +120,7 @@ function TextField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"], isRequired }],
             [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
             [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
           ],
@@ -140,6 +141,7 @@ function TextField(props, ref) {
       onChange,
       isDisabled,
       isInvalid,
+      isRequired,
       ...otherProps,
       children: childrenMarkup
     }
@@ -148,7 +150,16 @@ function TextField(props, ref) {
 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 });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      "aria-label": accessibilityString,
+      role: "status",
+      color: "neutral-weakest",
+      size: "xs",
+      children: characterLeft
+    }
+  );
 }
 var _TextField = forwardRef(TextField);
 _TextField.displayName = "TextField";

package/dist/chunk-FOD7XUSJ.js

@@ -0,0 +1,150 @@
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _ClearButton } from './chunk-2XO5CZBO.js';
+import { _Spinner } from './chunk-CKKLDA5J.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _Text } from './chunk-XT2MZWEV.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Tag.module.css#css-module
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___RskTT", "hop-Tag--sm": "Tag-module__hop-Tag--sm___dT9Zg", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___gqTvd", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___itlq9", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___k-w6U", "hop-Tag--md": "Tag-module__hop-Tag--md___EFXGm", "hop-Tag--lg": "Tag-module__hop-Tag--lg___-7S-k", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___ziL-o", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___bYJN1", "hop-Tag--progress": "Tag-module__hop-Tag--progress___Scd9q", "hop-Tag--positive": "Tag-module__hop-Tag--positive___GJ1Wb", "hop-Tag--caution": "Tag-module__hop-Tag--caution___de6ZF", "hop-Tag--negative": "Tag-module__hop-Tag--negative___Dz8WI", "hop-Tag--option1": "Tag-module__hop-Tag--option1___Va6Mb", "hop-Tag--option2": "Tag-module__hop-Tag--option2___eck-O", "hop-Tag--option3": "Tag-module__hop-Tag--option3___ZlmMR", "hop-Tag--option4": "Tag-module__hop-Tag--option4___L3EmX", "hop-Tag--option5": "Tag-module__hop-Tag--option5___B7Tp-", "hop-Tag--option6": "Tag-module__hop-Tag--option6___GvCgh", "hop-Tag__icon": "Tag-module__hop-Tag__icon___nUqBw", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___ybqv1", "hop-Tag__text": "Tag-module__hop-Tag__text___TYNqw", "hop-Tag__badge": "Tag-module__hop-Tag__badge___oUeLt" };
+var GlobalTagCssSelector = "hop-Tag";
+var TagToTextSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToAvatarSizeAdapter = {
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+var TagToButtonSizeAdapter = {
+  sm: "md",
+  md: "md",
+  lg: "lg"
+};
+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,
+    style: styleProp,
+    textValue: textValueProp,
+    variant = "neutral",
+    ...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,
+      variant
+    ),
+    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, isSelected } = 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
+                }],
+                [AvatarContext, {
+                  className: Tag_module_default["hop-Tag__avatar"],
+                  isDisabled,
+                  size: TagToAvatarSizeAdapter[size]
+                }]
+              ],
+              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: TagToButtonSizeAdapter[size],
+              variant,
+              isSelected
+            }
+          ),
+          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";
+
+export { GlobalTagCssSelector, _Tag };

package/dist/{chunk-W34MMJ2L.js → chunk-FOKTHCFK.js}

@@ -1,8 +1,8 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___2SBYs", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___GUWfq", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___-rDr8", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___kLFm-", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___ku6Fh", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___m1kW9", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___9T-B2", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___Xzo43", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___tSdwv", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___nWURg", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___G2FeR" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___OTh5S", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___urS3p", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___Wwpsr", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___tG3Hj", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___gKd-M", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___WAPyo", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___SzESn", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___lWkgH", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___UxA4d", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___iNG2Y", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___-kuqp" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/chunk-HCRWIU7V.js

@@ -0,0 +1,276 @@
+import { useFontFaceReady } from './chunk-IU6XMS2X.js';
+import { useTruncatedText } from './chunk-Z57VHYOF.js';
+import { TextAreaContext } from './chunk-MHQZXLKW.js';
+import { _InputGroup } from './chunk-Q63YLWI6.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { useLocalizedString } from './chunk-F4H76S4H.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { _Text } from './chunk-XT2MZWEV.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import $670gB$react, { forwardRef, useContext, useState, useCallback, useRef, useMemo } from 'react';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+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) 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 = ctx === $b5e257d569688ac6$var$defaultContext && false ? "react-aria" : `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___Oqrhm", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___2QsEG", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___6uZvZ", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___UGSsJ", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___m2oHv", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___-aEby", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___-TDoe", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___Gj-AJ", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___FVgxx" };
+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;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextAreaContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b2, _c, _d;
+    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    onChange: onChangeProp,
+    children,
+    defaultValue,
+    maxRows,
+    cols,
+    rows: rowsProp,
+    value: valueProp,
+    resizeMode: resizeModeProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    restrictMaxLength = true,
+    ...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 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.");
+  }
+  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 (restrictMaxLength) {
+      const newValue = truncateText(value, maxLength);
+      onChange(newValue);
+    }
+    adjustRows();
+  }, [value, adjustRows]);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      size,
+      className: TextArea_module_default["hop-TextArea__InputGroup"],
+      isDisabled,
+      isInvalid,
+      inputClassName: TextArea_module_default["hop-TextArea__textarea"],
+      inputType: "textarea",
+      children: [
+        /* @__PURE__ */ jsx(TextArea$1, { ref: mergedTextAreaRef, placeholder, cols, rows }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(CharacterCount, { charactersLeft: maxLength - characterCount, isInvalid: overMaxLength })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: TextArea_module_default["hop-TextArea__Label"] }],
+            [HelperMessageContext, { className: TextArea_module_default["hop-TextArea__HelperMessage"] }],
+            [ErrorMessageContext, { className: TextArea_module_default["hop-TextArea__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength: restrictMaxLength ? maxLength : void 0,
+      onChange,
+      isDisabled,
+      isInvalid,
+      "data-resize-mode": resizeMode,
+      "data-over-max-length": overMaxLength || void 0,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+function CharacterCount({ charactersLeft, isInvalid }) {
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: charactersLeft });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      "aria-label": accessibilityString,
+      role: "status",
+      size: "xs",
+      className: TextArea_module_default["hop-TextArea__char-count"],
+      "data-invalid": isInvalid || void 0,
+      children: charactersLeft
+    }
+  );
+}
+var _TextArea = forwardRef(TextArea);
+_TextArea.displayName = "TextArea";
+
+export { GlobalTextAreaCssSelector, _TextArea };

package/dist/chunk-IU6XMS2X.js

@@ -0,0 +1,21 @@
+import { useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useState } from 'react';
+
+// src/utils/src/useFontFaceReady.ts
+var useFontFaceReady = () => {
+  const [ready, setReady] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    let isCancelled = false;
+    document.fonts.ready.then(() => {
+      if (!isCancelled) {
+        setReady(true);
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+  return ready;
+};
+
+export { useFontFaceReady };

package/dist/{chunk-JN2FF2IX.js → chunk-IUOLKHYQ.js}

@@ -8,7 +8,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./IconList.module.css#css-module
-var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___RdFGP" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___-mdbp" };
 var GlobalIconListCssSelector = "hop-IconList";
 function IconList(props, ref) {
   [props, ref] = useContextProps(props, ref, IconListContext);

package/dist/{chunk-2MUGMKNO.js → chunk-IXWYHDGU.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 }
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CheckboxGroup.module.css#css-module
-var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___FjF8x", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___XA5SU", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___7B-pz", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___w1E3n", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___J4Zt0", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___7VYNk", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___XFiwo", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___sdk-v", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___t8MLr" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___ElEYk", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___oEe87", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___ETF-H", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___5bM6E", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___zvdEY", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___-cq2A", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___GhnAo", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___wZAUv", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___qN21A" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-SSMGKQ27.js → chunk-J44DIB5J.js}

@@ -1,8 +1,8 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Radio as Radio$1 } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Radio.module.css#css-module
-var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___uyamy", "hop-Radio--focused": "Radio-module__hop-Radio--focused___TGZbx", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___YkYk3", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___SYCe0", "hop-Radio--sm": "Radio-module__hop-Radio--sm___0rL4j", "hop-Radio--md": "Radio-module__hop-Radio--md___2Sf0G", "hop-Radio__icon": "Radio-module__hop-Radio__icon___xaWvn", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___ipHyc", "hop-Radio__box": "Radio-module__hop-Radio__box___HK3bx", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___9QxuR", "hop-Radio__text": "Radio-module__hop-Radio__text___DVOte" };
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___2E1Ba", "hop-Radio--focused": "Radio-module__hop-Radio--focused___uZjvZ", "hop-Radio--hovered": "Radio-module__hop-Radio--hovered___I3nXi", "hop-Radio--pressed": "Radio-module__hop-Radio--pressed___g-XN4", "hop-Radio--sm": "Radio-module__hop-Radio--sm___fb-Zv", "hop-Radio--md": "Radio-module__hop-Radio--md___WvIhk", "hop-Radio__icon": "Radio-module__hop-Radio__icon___f49M7", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___65C4k", "hop-Radio__box": "Radio-module__hop-Radio__box___HLxF3", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___SgKK1", "hop-Radio__text": "Radio-module__hop-Radio__text___uZHkI" };
 var GlobalRadioCssSelector = "hop-Radio";
 function Radio(props, ref) {
   var _a;

package/dist/{chunk-GH5LAOQU.js → chunk-JJ4EFTES.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-AYPCLDGU.js';
+import { _RichIconAvatarImage } from './chunk-M3K4IYX6.js';
 import { AnonymousRichIcon } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';

package/dist/{chunk-RGGVZKNN.js → chunk-L5KI4ZCL.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-XT2MZWEV.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { InfoIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, FieldErrorContext } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./HelperMessage.module.css#css-module
-var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___0xUz2", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___N2F4v" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___KQaJ4", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___1a1jj" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-AYPCLDGU.js → chunk-M3K4IYX6.js}

@@ -9,7 +9,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RichIconAvatarImage.module.css#css-module
-var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___XXd8y", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___KPG-W", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___9CNdx", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___h5-5b", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___ikRI1", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___6eMAN", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___8uwXA", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___AneXe" };
+var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___sG-Yd", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___h-WpU", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___QasW-", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___QjQ3I", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___PrX57", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___fZOdF", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___E-1I9", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___JDA4Q" };
 var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
 var AvatarToIconSizeAdapter = {
   xs: "md",

package/dist/chunk-MHQZXLKW.js

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

package/dist/{chunk-IEE2HHGR.js → chunk-MJHMFANK.js}

@@ -11,7 +11,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SwitchField.module.css#css-module
-var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___MbE-q", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___dRzOt", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___xG-1g", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___SpFMs", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___132nd" };
+var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___7GWRP", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___kZQJI", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___M0ask", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___7fE6W", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___5McYm" };
 var GlobalSwitchFieldCssSelector = "hop-SwitchField";
 var SwitchToDescriptionSizeAdapter = {
   sm: "xs",