@doist/reactist 25.2.0 → 26.1.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)],
@@ -581,12 +581,14 @@ function Tooltip({
   position = 'top',
   gapSize = 3,
   withArrow = false,
+  showTimeout = 500,
+  hideTimeout = 100,
   exceptionallySetClassName
 }) {
   const tooltip = react.useTooltipStore({
     placement: position,
-    showTimeout: 500,
-    hideTimeout: 100
+    showTimeout,
+    hideTimeout
   });
   const isOpen = tooltip.useState('open');
   const child = React__namespace.Children.only(children);
@@ -623,7 +625,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 +708,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), {}, {
@@ -808,7 +810,7 @@ function CloseIcon(props) {
   }));
 }
 
-var modules_6205a58e = {"container":"_51a84fb3","tone-info":"_5649104a","icon":"_79fa06e2","tone-positive":"c67632e4","tone-caution":"_654ff216","tone-critical":"b1ee4ff1"};
+var modules_6205a58e = {"container":"d6be7fe9","content":"ad8ace2f","icon":"ab71a9dc","tone-info":"_043941a6","tone-positive":"f34b89d4","tone-caution":"a069ea07","tone-critical":"e505aabb"};
 
 function Alert({
   id,
@@ -833,10 +835,13 @@ function Alert({
     className: modules_6205a58e.icon
   })), /*#__PURE__*/React__namespace.createElement(Column, null, /*#__PURE__*/React__namespace.createElement(Box$1, {
     paddingY: "xsmall",
-    paddingRight: onClose != null && closeLabel != null ? undefined : 'small'
+    paddingRight: onClose != null && closeLabel != null ? undefined : 'small',
+    display: "flex",
+    alignItems: "center",
+    className: modules_6205a58e.content
   }, children)), onClose != null && closeLabel != null ? /*#__PURE__*/React__namespace.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/React__namespace.createElement(Button$1, {
+  }, /*#__PURE__*/React__namespace.createElement(IconButton, {
     variant: "quaternary",
     size: "small",
     onClick: onClose,
@@ -1743,29 +1748,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 +1761,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 +1882,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 +1939,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 +1994,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 +2029,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 +2040,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 +2063,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 +2083,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 +2133,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 +2195,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) {
@@ -2653,7 +2744,7 @@ function TabAwareSlot({
 const _excluded$4 = ["children", "onItemSelect"],
       _excluded2 = ["exceptionallySetClassName"],
       _excluded3 = ["render"],
-      _excluded4 = ["exceptionallySetClassName", "modal"],
+      _excluded4 = ["exceptionallySetClassName", "modal", "flip"],
       _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName"],
       _excluded6 = ["label", "children", "exceptionallySetClassName"];
 const MenuContext = /*#__PURE__*/React__namespace.createContext({
@@ -2662,6 +2753,9 @@ const MenuContext = /*#__PURE__*/React__namespace.createContext({
   getAnchorRect: null,
   setAnchorRect: () => undefined
 });
+const SubMenuContext = /*#__PURE__*/React__namespace.createContext({
+  isSubMenu: false
+});
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
@@ -2754,7 +2848,8 @@ const ContextMenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Con
 const MenuList = /*#__PURE__*/React__namespace.forwardRef(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
-    modal = true
+    modal = true,
+    flip
   } = _ref4,
       props = _objectWithoutProperties(_ref4, _excluded4);
 
@@ -2767,6 +2862,9 @@ const MenuList = /*#__PURE__*/React__namespace.forwardRef(function MenuList(_ref
     throw new Error('MenuList must be wrapped in <Menu/>');
   }
 
+  const {
+    isSubMenu
+  } = React__namespace.useContext(SubMenuContext);
   const isOpen = menuStore.useState('open');
   return isOpen ? /*#__PURE__*/React__namespace.createElement(react.Portal, {
     preserveTabOrder: true
@@ -2777,7 +2875,8 @@ const MenuList = /*#__PURE__*/React__namespace.forwardRef(function MenuList(_ref
     ref: ref,
     className: classNames__default["default"]('reactist_menulist', exceptionallySetClassName),
     getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
-    modal: modal
+    modal: modal,
+    flip: flip != null ? flip : isSubMenu ? 'bottom' : undefined
   }))) : null;
 });
 /**
@@ -2868,6 +2967,9 @@ const SubMenu = /*#__PURE__*/React__namespace.forwardRef(function SubMenu({
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
   const [button, list] = React__namespace.Children.toArray(children);
   const buttonElement = button;
+  const subMenuContextValue = React__namespace.useMemo(() => ({
+    isSubMenu: true
+  }), []);
   return /*#__PURE__*/React__namespace.createElement(Menu, {
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/React__namespace.createElement(react.MenuItem, {
@@ -2875,7 +2977,9 @@ const SubMenu = /*#__PURE__*/React__namespace.forwardRef(function SubMenu({
     ref: ref,
     hideOnClick: false,
     render: buttonElement
-  }, buttonElement.props.children), list);
+  }, buttonElement.props.children), /*#__PURE__*/React__namespace.createElement(SubMenuContext.Provider, {
+    value: subMenuContextValue
+  }, list));
 });
 /**
  * A way to semantically group some menu items.