@doist/reactist 25.1.1 → 26.0.0

package/dist/reactist.cjs.development.js

@@ -367,7 +367,7 @@ const Box$1 = /*#__PURE__*/polymorphicComponent(function Box(_ref9, ref) {
 var modules_67f2d07a = {"container":"eae3d34f","container-xsmall":"_9b4012c9","container-small":"e35e0320","container-medium":"_0703e67f","container-large":"_1cf15621","container-xlarge":"_1c7dff67","container-xxlarge":"_25bee9b6","columnWidth-content":"_4bb9987d","columnWidth-auto":"_9dd31975","columnWidth-1-2":"_38d11c0e","columnWidth-1-3":"_7ac225c6","columnWidth-2-3":"_9c340680","columnWidth-1-4":"_81cb99d2","columnWidth-3-4":"_10fd355f","columnWidth-1-5":"_3ee66520","columnWidth-2-5":"df1201a5","columnWidth-3-5":"f772e0b2","columnWidth-4-5":"_880cbbb1"};
 
 const _excluded$u = ["width", "children", "exceptionallySetClassName"],
-      _excluded2$4 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
+      _excluded2$6 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
 const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
   let {
     width = 'auto',
@@ -394,7 +394,7 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
     children,
     exceptionallySetClassName
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$4);
+      props = _objectWithoutProperties(_ref2, _excluded2$6);
 
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
     className: [exceptionallySetClassName, modules_67f2d07a.container, getClassNames(modules_67f2d07a, 'container', space)],
@@ -623,7 +623,7 @@ function Tooltip({
 var modules_5357ebb8 = {"baseButton":"_3930afa0","label":"_90654824","shape-rounded":"c05d17c2","size-small":"_1e29d236","size-normal":"_7246d092","size-large":"_2d084671","disabled":"_2b0b9d95","iconButton":"abd5766f","startIcon":"_380e7c73","endIcon":"_20fe4105","variant-primary":"_7ea1378e","variant-secondary":"_64ee8afd","variant-tertiary":"_650176bf","variant-quaternary":"aa19cb97","tone-destructive":"_7a2d9a8c"};
 
 const _excluded$p = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "width", "align"],
-      _excluded2$3 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "icon"];
+      _excluded2$5 = ["variant", "tone", "size", "shape", "type", "disabled", "loading", "tooltip", "render", "onClick", "exceptionallySetClassName", "children", "icon"];
 
 function preventDefault(event) {
   event.preventDefault();
@@ -706,7 +706,7 @@ const IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(
     children,
     icon
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$3);
+      props = _objectWithoutProperties(_ref2, _excluded2$5);
 
   const isDisabled = loading || disabled;
   const buttonElement = /*#__PURE__*/React__namespace.createElement(react.Role.button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -1743,29 +1743,12 @@ function PasswordHiddenIcon(props) {
   })));
 }
 
-var modules_540a88ff = {"container":"_7acdc928","auxiliaryLabel":"_815bad88","bordered":"e35886fe","error":"_6c7b5dc8","primaryLabel":"ec74af87","secondaryLabel":"_6db0ec44","messageIcon":"_05c35af8"};
+var modules_540a88ff = {"container":"d5ff04da","auxiliaryLabel":"_8d2b52f1","bordered":"_49c37b27","error":"_922ff337","primaryLabel":"af23c791","loadingIcon":"_75edcef6"};
 
-function FieldHint(props) {
-  return /*#__PURE__*/React__namespace.createElement(Text, _objectSpread2({
-    as: "p",
-    tone: "secondary",
-    size: "copy"
-  }, props));
-}
+const MAX_LENGTH_THRESHOLD = 10;
 
-function MessageIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _objectSpread2({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
-    fill: "currentColor"
-  }));
+function fieldToneToTextTone(tone) {
+  return tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'secondary';
 }
 
 function FieldMessage({
@@ -1773,55 +1756,117 @@ function FieldMessage({
   children,
   tone
 }) {
-  const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
   return /*#__PURE__*/React__namespace.createElement(Text, {
     as: "p",
-    tone: textTone,
+    tone: fieldToneToTextTone(tone),
     size: "copy",
     id: id
-  }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+  }, tone === 'loading' ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     as: "span",
     marginRight: "xsmall",
     display: "inlineFlex",
-    className: modules_540a88ff.messageIcon
-  }, tone === 'loading' ? /*#__PURE__*/React__namespace.createElement(Spinner, {
+    className: modules_540a88ff.loadingIcon
+  }, /*#__PURE__*/React__namespace.createElement(Spinner, {
     size: 16
-  }) : /*#__PURE__*/React__namespace.createElement(MessageIcon, {
-    "aria-hidden": true
-  })), children);
+  })) : null, children);
+}
+
+function FieldCharacterCount({
+  children,
+  tone
+}) {
+  return /*#__PURE__*/React__namespace.createElement(Text, {
+    tone: fieldToneToTextTone(tone),
+    size: "copy"
+  }, children);
+}
+
+function validateInputLength({
+  value,
+  maxLength
+}) {
+  if (!maxLength) {
+    return {
+      count: null,
+      tone: 'neutral'
+    };
+  }
+
+  const currentLength = String(value || '').length;
+  const isNearMaxLength = maxLength - currentLength <= MAX_LENGTH_THRESHOLD;
+  return {
+    count: currentLength + "/" + maxLength,
+    tone: isNearMaxLength ? 'error' : 'neutral'
+  };
 }
 
 function BaseField({
   variant = 'default',
   label,
-  secondaryLabel,
+  value,
   auxiliaryLabel,
-  hint,
   message,
   tone = 'neutral',
   className,
   children,
   maxWidth,
+  maxLength,
   hidden,
   'aria-describedby': originalAriaDescribedBy,
   id: originalId
 }) {
   const id = useId(originalId);
-  const hintId = useId();
   const messageId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : [message ? messageId : null, hintId].filter(Boolean).join(' ');
-  const childrenProps = {
+  const inputLength = validateInputLength({
+    value,
+    maxLength
+  });
+  const [characterCount, setCharacterCount] = React__namespace.useState(inputLength.count);
+  const [characterCountTone, setCharacterCountTone] = React__namespace.useState(inputLength.tone);
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : null;
+
+  const childrenProps = _objectSpread2(_objectSpread2({
     id,
-    'aria-describedby': ariaDescribedBy,
-    'aria-invalid': tone === 'error' ? true : undefined
-  };
+    value
+  }, ariaDescribedBy ? {
+    'aria-describedby': ariaDescribedBy
+  } : {}), {}, {
+    'aria-invalid': tone === 'error' ? true : undefined,
+
+    onChange(event) {
+      if (!maxLength) {
+        return;
+      }
+
+      const inputLength = validateInputLength({
+        value: event.currentTarget.value,
+        maxLength
+      });
+      setCharacterCount(inputLength.count);
+      setCharacterCountTone(inputLength.tone);
+    }
+
+  });
+
+  React__namespace.useEffect(function updateCharacterCountOnPropChange() {
+    if (!maxLength) {
+      return;
+    }
+
+    const inputLength = validateInputLength({
+      value,
+      maxLength
+    });
+    setCharacterCount(inputLength.count);
+    setCharacterCountTone(inputLength.tone);
+  }, [maxLength, value]);
   return /*#__PURE__*/React__namespace.createElement(Stack, {
-    space: "small",
+    space: "xsmall",
     hidden: hidden
   }, /*#__PURE__*/React__namespace.createElement(Box$1, {
     className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
     maxWidth: maxWidth
-  }, label || secondaryLabel || auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+  }, label || auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
@@ -1832,38 +1877,46 @@ function BaseField({
     htmlFor: id
   }, label ? /*#__PURE__*/React__namespace.createElement("span", {
     className: modules_540a88ff.primaryLabel
-  }, label) : null, secondaryLabel ? /*#__PURE__*/React__namespace.createElement("span", {
-    className: modules_540a88ff.secondaryLabel
-  }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+  }, label) : null), auxiliaryLabel ? /*#__PURE__*/React__namespace.createElement(Box$1, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null) : null, children(childrenProps)), message ? /*#__PURE__*/React__namespace.createElement(FieldMessage, {
+  }, auxiliaryLabel) : null) : null, children(childrenProps)), message || characterCount ? /*#__PURE__*/React__namespace.createElement(Columns, {
+    align: "right",
+    space: "small",
+    maxWidth: maxWidth
+  }, message ? /*#__PURE__*/React__namespace.createElement(Column, {
+    width: "auto"
+  }, /*#__PURE__*/React__namespace.createElement(FieldMessage, {
     id: messageId,
     tone: tone
-  }, message) : null, hint ? /*#__PURE__*/React__namespace.createElement(FieldHint, {
-    id: hintId
-  }, hint) : null);
+  }, message)) : null, characterCount ? /*#__PURE__*/React__namespace.createElement(Column, {
+    width: "content"
+  }, /*#__PURE__*/React__namespace.createElement(FieldCharacterCount, {
+    tone: characterCountTone
+  }, characterCount)) : null) : null);
 }
 
-var modules_aaf25250 = {"inputWrapper":"dea25485","bordered":"_80b6b376","error":"_1a32867a","slot":"dbbd207e"};
+var modules_aaf25250 = {"inputWrapper":"f2de4e8d","readOnly":"ee26e40c","bordered":"_3afb1a56","error":"f3ff9f57","slot":"_3eb7b0ef"};
 
-const _excluded$d = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
+const _excluded$d = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "type", "maxWidth", "maxLength", "hidden", "aria-describedby", "startSlot", "endSlot", "onChange"],
+      _excluded2$4 = ["onChange"];
 const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     type = 'text',
     maxWidth,
+    maxLength,
     hidden,
     'aria-describedby': ariaDescribedBy,
     startSlot,
-    endSlot
+    endSlot,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$d);
 
@@ -1881,39 +1934,52 @@ const TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(_r
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     maxWidth: maxWidth,
+    maxLength: maxLength,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, extraProps => /*#__PURE__*/React__namespace.createElement(Box$1, {
-    display: "flex",
-    alignItems: "center",
-    className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null],
-    onClick: handleClick
-  }, startSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
-    className: modules_aaf25250.slot,
-    display: "flex",
-    marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
-    marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
-  }, startSlot) : null, /*#__PURE__*/React__namespace.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    type: type,
-    ref: combinedRef
-  })), endSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
-    className: modules_aaf25250.slot,
-    display: "flex",
-    marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
-    marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
-  }, endSlot) : null));
+  }, _ref2 => {
+    let {
+      onChange
+    } = _ref2,
+        extraProps = _objectWithoutProperties(_ref2, _excluded2$4);
+
+    return /*#__PURE__*/React__namespace.createElement(Box$1, {
+      display: "flex",
+      alignItems: "center",
+      className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null, props.readOnly ? modules_aaf25250.readOnly : null],
+      onClick: handleClick
+    }, startSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+      className: modules_aaf25250.slot,
+      display: "flex",
+      marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
+      marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
+    }, startSlot) : null, /*#__PURE__*/React__namespace.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+      type: type,
+      ref: combinedRef,
+      maxLength: maxLength,
+      onChange: event => {
+        originalOnChange == null ? void 0 : originalOnChange(event);
+        onChange == null ? void 0 : onChange(event);
+      }
+    })), endSlot ? /*#__PURE__*/React__namespace.createElement(Box$1, {
+      className: modules_aaf25250.slot,
+      display: "flex",
+      marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
+      marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
+    }, endSlot) : null);
+  });
 });
 
-const _excluded$c = ["togglePasswordLabel"];
+const _excluded$c = ["togglePasswordLabel", "endSlot"];
 const PasswordField = /*#__PURE__*/React__namespace.forwardRef(function PasswordField(_ref, ref) {
   let {
-    togglePasswordLabel = 'Toggle password visibility'
+    togglePasswordLabel = 'Toggle password visibility',
+    endSlot
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$c);
 
@@ -1923,34 +1989,34 @@ const PasswordField = /*#__PURE__*/React__namespace.forwardRef(function Password
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/React__namespace.createElement(IconButton, {
+    endSlot: /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, endSlot, /*#__PURE__*/React__namespace.createElement(IconButton, {
       variant: "quaternary",
       icon: /*#__PURE__*/React__namespace.createElement(Icon, {
         "aria-hidden": true
       }),
       "aria-label": togglePasswordLabel,
       onClick: () => setPasswordVisible(v => !v)
-    })
+    }))
   }));
 });
 
 var modules_1fa9b208 = {"selectWrapper":"b930bb07","bordered":"e1f620b6","error":"_7e87474e"};
 
-const _excluded$b = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$b = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby", "onChange"];
 const SelectField = /*#__PURE__*/React__namespace.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     maxWidth,
     children,
     hidden,
-    'aria-describedby': ariaDescribedBy
+    'aria-describedby': ariaDescribedBy,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$b);
 
@@ -1958,9 +2024,8 @@ const SelectField = /*#__PURE__*/React__namespace.forwardRef(function SelectFiel
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     maxWidth: maxWidth,
@@ -1970,7 +2035,10 @@ const SelectField = /*#__PURE__*/React__namespace.forwardRef(function SelectFiel
     "data-testid": "select-wrapper",
     className: [modules_1fa9b208.selectWrapper, tone === 'error' ? modules_1fa9b208.error : null, variant === 'bordered' ? modules_1fa9b208.bordered : null]
   }, /*#__PURE__*/React__namespace.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    ref: ref
+    ref: ref,
+    onChange: event => {
+      originalOnChange == null ? void 0 : originalOnChange(event);
+    }
   }), children), /*#__PURE__*/React__namespace.createElement(SelectChevron, {
     "aria-hidden": true
   })));
@@ -1990,13 +2058,14 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"bae487be","disabled":"_408d32a0","checked":"_99b0ead7","toggle":"_5af09fb5","label":"a66e1846","handle":"_0dcf70ec","keyFocused":"_1f5e7fd4"};
 
-const _excluded$a = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$a = ["label", "message", "tone", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React__namespace.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
   let {
     label,
-    hint,
+    message,
+    tone = 'neutral',
     disabled = false,
     hidden,
     defaultChecked,
@@ -2009,8 +2078,8 @@ const SwitchField = /*#__PURE__*/React__namespace.forwardRef(function SwitchFiel
       props = _objectWithoutProperties(_ref, _excluded$a);
 
   const id = useId(originalId);
-  const hintId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const messageId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : message ? messageId : undefined;
   const ariaLabel = originalAriaLabel != null ? originalAriaLabel : undefined;
   const ariaLabelledBy = originalAriaLabelledby != null ? originalAriaLabelledby : undefined;
   const [keyFocused, setKeyFocused] = React__namespace.useState(false);
@@ -2059,35 +2128,40 @@ const SwitchField = /*#__PURE__*/React__namespace.forwardRef(function SwitchFiel
     className: modules_8e05f7c9.handle
   })), /*#__PURE__*/React__namespace.createElement(Text, {
     exceptionallySetClassName: modules_8e05f7c9.label
-  }, label)), hint ? /*#__PURE__*/React__namespace.createElement(FieldHint, {
-    id: hintId
-  }, hint) : null);
+  }, label)), message ? /*#__PURE__*/React__namespace.createElement(FieldMessage, {
+    id: messageId,
+    tone: tone
+  }, message) : null);
 });
 
-var modules_2728c236 = {"textAreaContainer":"_55ccf266","innerContainer":"_89bb7098","bordered":"_02a47358","error":"_704ff540","autoExpand":"_145ca8f0"};
+var modules_2728c236 = {"textAreaContainer":"a95cb864","innerContainer":"ab9873f7","bordered":"de380efd","error":"_29a9d12f","disableResize":"_44f7147e"};
 
-const _excluded$9 = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded$9 = ["variant", "id", "label", "value", "auxiliaryLabel", "message", "tone", "maxWidth", "maxLength", "hidden", "aria-describedby", "rows", "autoExpand", "disableResize", "onChange"],
+      _excluded2$3 = ["onChange"];
 const TextArea = /*#__PURE__*/React__namespace.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
     id,
     label,
-    secondaryLabel,
+    value,
     auxiliaryLabel,
-    hint,
     message,
     tone,
     maxWidth,
+    maxLength,
     hidden,
     'aria-describedby': ariaDescribedBy,
     rows,
-    autoExpand = false
+    autoExpand = false,
+    disableResize = false,
+    onChange: originalOnChange
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$9);
 
   const containerRef = React__namespace.useRef(null);
   const internalRef = React__namespace.useRef(null);
   const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
+  const textAreaClassName = classNames__default["default"]([autoExpand ? modules_2728c236.disableResize : null, disableResize ? modules_2728c236.disableResize : null]);
   React__namespace.useEffect(function setupAutoExpand() {
     const containerElement = containerRef.current;
 
@@ -2116,25 +2190,37 @@ const TextArea = /*#__PURE__*/React__namespace.forwardRef(function TextArea(_ref
     variant: variant,
     id: id,
     label: label,
-    secondaryLabel: secondaryLabel,
+    value: value,
     auxiliaryLabel: auxiliaryLabel,
-    hint: hint,
     message: message,
     tone: tone,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy,
     className: [modules_2728c236.textAreaContainer, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
-    maxWidth: maxWidth
-  }, extraProps => /*#__PURE__*/React__namespace.createElement(Box$1, {
-    width: "full",
-    display: "flex",
-    className: modules_2728c236.innerContainer,
-    ref: containerRef
-  }, /*#__PURE__*/React__namespace.createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    ref: combinedRef,
-    rows: rows,
-    className: autoExpand ? modules_2728c236.autoExpand : undefined
-  }))));
+    maxWidth: maxWidth,
+    maxLength: maxLength
+  }, _ref2 => {
+    let {
+      onChange
+    } = _ref2,
+        extraProps = _objectWithoutProperties(_ref2, _excluded2$3);
+
+    return /*#__PURE__*/React__namespace.createElement(Box$1, {
+      width: "full",
+      display: "flex",
+      className: modules_2728c236.innerContainer,
+      ref: containerRef
+    }, /*#__PURE__*/React__namespace.createElement("textarea", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+      ref: combinedRef,
+      rows: rows,
+      className: textAreaClassName,
+      maxLength: maxLength,
+      onChange: event => {
+        originalOnChange == null ? void 0 : originalOnChange(event);
+        onChange == null ? void 0 : onChange(event);
+      }
+    })));
+  });
 });
 
 function getInitials(name) {
@@ -2427,7 +2513,7 @@ function ModalHeader(_ref2) {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
@@ -2436,7 +2522,7 @@ function ModalHeader(_ref2) {
  * @see ModalFooter
  */
 
-function ModalBody(_ref3) {
+const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody(_ref3, ref) {
   let {
     exceptionallySetClassName,
     children
@@ -2447,6 +2533,7 @@ function ModalBody(_ref3) {
     height
   } = React__namespace.useContext(ModalContext);
   return /*#__PURE__*/React__namespace.createElement(Box$1, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
     className: exceptionallySetClassName,
     flexGrow: height === 'expand' ? 1 : 0,
     height: height === 'expand' ? 'full' : undefined,
@@ -2455,7 +2542,7 @@ function ModalBody(_ref3) {
     padding: "large",
     paddingBottom: "xxlarge"
   }, children));
-}
+});
 /**
  * Renders a standard modal footer area.
  *