@primer/react 38.29.1-rc.4254fa28f → 38.30.0-rc.dc0369509

package/dist/TextInput/TextInput.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useId, useCallback, useEffect } from 'react';
+import React, { useState, useId, useCallback } from 'react';
 import { isValidElementType } from 'react-is';
 import { clsx } from 'clsx';
 import { AlertFillIcon } from '@primer/octicons-react';
@@ -8,9 +8,11 @@ import { TextInputWrapper } from '../internal/components/TextInputWrapper.js';
 import TextInputAction from '../internal/components/TextInputInnerAction.js';
 import UnstyledTextInput from '../internal/components/UnstyledTextInput.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
-import { CharacterCounter } from '../utils/character-counter.js';
+import visuallyHiddenClasses from '../_VisuallyHidden.module.css.js';
+import { SCREEN_READER_DELAY, getCharacterCountState } from '../utils/character-counter.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import { AriaStatus } from '../live-region/AriaStatus.js';
 import Text from '../Text/Text.js';
 
 // using forwardRef is important so that other components can autofocus the input
@@ -46,16 +48,22 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
   'data-component': dataComponent,
   ...inputProps
 }, ref) => {
+  var _counter$isOverLimit;
   const [isInputFocused, setIsInputFocused] = useState(false);
   const inputRef = useProvidedRefOrCreate(ref);
-  const [characterCount, setCharacterCount] = useState('');
-  const [isOverLimit, setIsOverLimit] = useState(false);
-  const [screenReaderMessage, setScreenReaderMessage] = useState('');
-  const characterCounterRef = useRef(null);
-  const lastCountedLengthRef = useRef(null);
-  const lastCharacterCountRef = useRef('');
-  const lastIsOverLimitRef = useRef(false);
-  const lastScreenReaderMessageRef = useRef('');
+
+  // For uncontrolled usage we track the length of the input's content so the
+  // character counter can be derived during render rather than synced from an
+  // effect (which would trigger an extra render on every keystroke). For
+  // controlled usage the `value` prop is the source of truth.
+  const isControlled = value !== undefined;
+  const [uncontrolledLength, setUncontrolledLength] = useState(() => defaultValue !== undefined ? String(defaultValue).length : 0);
+  const currentLength = isControlled ? String(value).length : uncontrolledLength;
+
+  // The counter and validation state are derived directly from the current
+  // length, so they stay in sync with the input without an extra render.
+  const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : undefined;
+  const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
 
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = clsx(className, 'TextInput-wrapper');
@@ -84,63 +92,13 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
     onBlur && onBlur(e_1);
   }, [onBlur]);
 
-  // Initialize character counter
-  useEffect(() => {
-    if (characterLimit) {
-      characterCounterRef.current = new CharacterCounter({
-        onCountUpdate: (count, overLimit, message) => {
-          if (message !== lastCharacterCountRef.current) {
-            lastCharacterCountRef.current = message;
-            setCharacterCount(message);
-          }
-          if (overLimit !== lastIsOverLimitRef.current) {
-            lastIsOverLimitRef.current = overLimit;
-            setIsOverLimit(overLimit);
-          }
-        },
-        onScreenReaderAnnounce: message_0 => {
-          if (message_0 !== lastScreenReaderMessageRef.current) {
-            lastScreenReaderMessageRef.current = message_0;
-            setScreenReaderMessage(message_0);
-          }
-        }
-      });
-      lastCountedLengthRef.current = null;
-      return () => {
-        var _characterCounterRef$;
-        (_characterCounterRef$ = characterCounterRef.current) === null || _characterCounterRef$ === void 0 ? void 0 : _characterCounterRef$.cleanup();
-        characterCounterRef.current = null;
-        lastCountedLengthRef.current = null;
-        lastCharacterCountRef.current = '';
-        lastIsOverLimitRef.current = false;
-        lastScreenReaderMessageRef.current = '';
-      };
-    }
-  }, [characterLimit]);
-
-  // Update character count when value changes or on mount
-  useEffect(() => {
-    if (characterLimit && characterCounterRef.current) {
-      const currentValue = value !== undefined ? String(value) : defaultValue !== undefined ? String(defaultValue) : '';
-      const currentLength = currentValue.length;
-      if (currentLength !== lastCountedLengthRef.current) {
-        lastCountedLengthRef.current = currentLength;
-        characterCounterRef.current.updateCharacterCount(currentLength, characterLimit);
-      }
-    }
-  }, [value, defaultValue, characterLimit]);
-
   // Handle input change with character counter
   const handleInputChange = useCallback(e_2 => {
-    if (characterLimit && characterCounterRef.current) {
-      const currentLength_0 = e_2.target.value.length;
-      if (currentLength_0 !== lastCountedLengthRef.current) {
-        lastCountedLengthRef.current = currentLength_0;
-        characterCounterRef.current.updateCharacterCount(currentLength_0, characterLimit);
-      }
+    if (characterLimit && !isControlled) {
+      setUncontrolledLength(e_2.target.value.length);
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(e_2);
-  }, [onChange, characterLimit]);
+  }, [onChange, characterLimit, isControlled]);
   const characterCountId = useId();
   const characterCountStaticMessageId = useId();
   const isValid = isOverLimit ? 'error' : validationStatus;
@@ -202,10 +160,11 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
         children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
       }), trailingAction]
     }), characterLimit && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(VisuallyHidden, {
-        "aria-live": "polite",
-        role: "status",
-        children: screenReaderMessage
+      children: [/*#__PURE__*/jsx(AriaStatus, {
+        announceOnShow: false,
+        delayMs: SCREEN_READER_DELAY,
+        className: visuallyHiddenClasses.InternalVisuallyHidden,
+        children: counter === null || counter === void 0 ? void 0 : counter.message
       }), /*#__PURE__*/jsxs(VisuallyHidden, {
         id: characterCountStaticMessageId,
         children: ["You can enter up to ", characterLimit, " ", characterLimit === 1 ? 'character' : 'characters']
@@ -217,7 +176,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
         "data-component": "TextInput.CharacterCounter",
         children: [isOverLimit && /*#__PURE__*/jsx(AlertFillIcon, {
           size: 16
-        }), characterCount]
+        }), counter === null || counter === void 0 ? void 0 : counter.message]
       })]
     })]
   });

package/dist/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C;;;GAGG;AACH,QAAA,MAAM,QAAQ;IA/CZ;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,oBAAoB;IACvC;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU;IACpD;;OAEG;eACQ,OAAO;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;qBACc,MAAM;2FA2IxB,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAe,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAqC,MAAM,OAAO,CAAA;AAEzD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AASlD,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAA;AAE/C;;;GAGG;AACH,QAAA,MAAM,QAAQ;IA/CZ;;OAEG;eACQ,OAAO;IAClB;;OAEG;uBACgB,oBAAoB;IACvC;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU;IACpD;;OAEG;eACQ,OAAO;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;;OAGG;qBACc,MAAM;2FA6HxB,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}

package/dist/Textarea/Textarea.js

@@ -1,12 +1,14 @@
 import { c } from 'react-compiler-runtime';
-import React, { useRef, useId, useEffect } from 'react';
+import React, { useId, useState } from 'react';
 import { TextInputBaseWrapper } from '../internal/components/TextInputWrapper.js';
 import classes from './TextArea.module.css.js';
 import { AlertFillIcon } from '@primer/octicons-react';
-import { CharacterCounter } from '../utils/character-counter.js';
+import { SCREEN_READER_DELAY, getCharacterCountState } from '../utils/character-counter.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
+import visuallyHiddenClasses from '../_VisuallyHidden.module.css.js';
 import { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AriaStatus } from '../live-region/AriaStatus.js';
 import Text from '../Text/Text.js';
 
 const DEFAULT_TEXTAREA_ROWS = 7;
@@ -17,7 +19,7 @@ const DEFAULT_TEXTAREA_RESIZE = 'both';
  * This component accepts all native HTML <textarea> attributes as props.
  */
 const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(68);
+  const $ = c(76);
   let block;
   let characterLimit;
   let className;
@@ -95,200 +97,170 @@ const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
   const rows = t1 === undefined ? DEFAULT_TEXTAREA_ROWS : t1;
   const cols = t2 === undefined ? DEFAULT_TEXTAREA_COLS : t2;
   const resize = t3 === undefined ? DEFAULT_TEXTAREA_RESIZE : t3;
-  const [characterCount, setCharacterCount] = React.useState("");
-  const [isOverLimit, setIsOverLimit] = React.useState(false);
-  const [screenReaderMessage, setScreenReaderMessage] = React.useState("");
-  const characterCounterRef = useRef(null);
   const characterCountId = useId();
   const characterCountStaticMessageId = useId();
+  const isControlled = value !== undefined;
   let t4;
-  let t5;
-  if ($[18] !== characterLimit) {
-    t4 = () => {
-      if (characterLimit) {
-        characterCounterRef.current = new CharacterCounter({
-          onCountUpdate: (count, overLimit, message) => {
-            setCharacterCount(message);
-            setIsOverLimit(overLimit);
-          },
-          onScreenReaderAnnounce: message_0 => {
-            setScreenReaderMessage(message_0);
-          }
-        });
-        return () => {
-          var _characterCounterRef$;
-          (_characterCounterRef$ = characterCounterRef.current) === null || _characterCounterRef$ === void 0 ? void 0 : _characterCounterRef$.cleanup();
-        };
-      }
-    };
-    t5 = [characterLimit];
-    $[18] = characterLimit;
+  if ($[18] !== defaultValue) {
+    t4 = () => defaultValue !== undefined ? String(defaultValue).length : 0;
+    $[18] = defaultValue;
     $[19] = t4;
-    $[20] = t5;
   } else {
     t4 = $[19];
-    t5 = $[20];
-  }
-  useEffect(t4, t5);
-  let t6;
-  let t7;
-  if ($[21] !== characterLimit || $[22] !== defaultValue || $[23] !== value) {
-    t6 = () => {
-      if (characterLimit && characterCounterRef.current) {
-        const currentValue = value !== undefined ? String(value) : defaultValue !== undefined ? String(defaultValue) : "";
-        characterCounterRef.current.updateCharacterCount(currentValue.length, characterLimit);
-      }
-    };
-    t7 = [value, defaultValue, characterLimit];
-    $[21] = characterLimit;
-    $[22] = defaultValue;
-    $[23] = value;
-    $[24] = t6;
-    $[25] = t7;
-  } else {
-    t6 = $[24];
-    t7 = $[25];
-  }
-  useEffect(t6, t7);
-  let t8;
-  if ($[26] !== characterLimit || $[27] !== onChange) {
-    t8 = e => {
-      var _onChange;
-      if (characterLimit && characterCounterRef.current) {
-        characterCounterRef.current.updateCharacterCount(e.target.value.length, characterLimit);
-      }
-      (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(e);
-    };
-    $[26] = characterLimit;
-    $[27] = onChange;
-    $[28] = t8;
-  } else {
-    t8 = $[28];
-  }
-  const handleTextareaChange = t8;
-  const isValid = isOverLimit ? "error" : validationStatus;
-  const t9 = isValid === "error" ? "true" : "false";
-  let t10;
-  if ($[29] !== maxHeight || $[30] !== minHeight || $[31] !== style) {
-    t10 = {
-      minHeight,
-      maxHeight,
-      ...style
-    };
-    $[29] = maxHeight;
-    $[30] = minHeight;
-    $[31] = style;
-    $[32] = t10;
-  } else {
-    t10 = $[32];
-  }
-  let t11;
-  if ($[33] !== characterCountStaticMessageId || $[34] !== characterLimit || $[35] !== rest) {
-    t11 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || undefined : rest["aria-describedby"];
-    $[33] = characterCountStaticMessageId;
-    $[34] = characterLimit;
-    $[35] = rest;
-    $[36] = t11;
-  } else {
-    t11 = $[36];
   }
-  let t12;
-  if ($[37] !== cols || $[38] !== defaultValue || $[39] !== disabled || $[40] !== handleTextareaChange || $[41] !== ref || $[42] !== required || $[43] !== resize || $[44] !== rest || $[45] !== rows || $[46] !== t10 || $[47] !== t11 || $[48] !== t9 || $[49] !== value) {
-    t12 = /*#__PURE__*/jsx("textarea", {
-      value: value,
-      defaultValue: defaultValue,
-      "data-resize": resize,
-      "aria-required": required,
-      "aria-invalid": t9,
-      ref: ref,
-      disabled: disabled,
-      rows: rows,
-      cols: cols,
-      className: classes.TextArea,
-      onChange: handleTextareaChange,
-      style: t10,
-      ...rest,
-      "aria-describedby": t11
-    });
-    $[37] = cols;
-    $[38] = defaultValue;
-    $[39] = disabled;
-    $[40] = handleTextareaChange;
-    $[41] = ref;
-    $[42] = required;
-    $[43] = resize;
-    $[44] = rest;
-    $[45] = rows;
-    $[46] = t10;
-    $[47] = t11;
-    $[48] = t9;
-    $[49] = value;
-    $[50] = t12;
-  } else {
-    t12 = $[50];
-  }
-  let t13;
-  if ($[51] !== block || $[52] !== className || $[53] !== contrast || $[54] !== disabled || $[55] !== isValid || $[56] !== t12) {
-    t13 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
-      validationStatus: isValid,
-      disabled: disabled,
-      block: block,
-      contrast: contrast,
-      className: className,
-      children: t12
-    });
-    $[51] = block;
-    $[52] = className;
-    $[53] = contrast;
-    $[54] = disabled;
-    $[55] = isValid;
-    $[56] = t12;
-    $[57] = t13;
-  } else {
-    t13 = $[57];
-  }
-  let t14;
-  if ($[58] !== characterCount || $[59] !== characterCountId || $[60] !== characterCountStaticMessageId || $[61] !== characterLimit || $[62] !== isOverLimit || $[63] !== screenReaderMessage) {
-    t14 = characterLimit && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(VisuallyHidden, {
-        "aria-live": "polite",
-        role: "status",
-        children: screenReaderMessage
-      }), /*#__PURE__*/jsxs(VisuallyHidden, {
-        id: characterCountStaticMessageId,
-        children: ["You can enter up to ", characterLimit, " ", characterLimit === 1 ? "character" : "characters"]
-      }), /*#__PURE__*/jsxs(Text, {
-        "aria-hidden": "true",
-        id: characterCountId,
-        size: "small",
-        className: clsx(classes.CharacterCounter, isOverLimit && classes["CharacterCounter--error"]),
-        children: [isOverLimit && /*#__PURE__*/jsx(AlertFillIcon, {
-          size: 16
-        }), characterCount]
+  const [uncontrolledLength, setUncontrolledLength] = useState(t4);
+  const currentLength = isControlled ? String(value).length : uncontrolledLength;
+  let t5;
+  if ($[20] !== block || $[21] !== characterCountId || $[22] !== characterCountStaticMessageId || $[23] !== characterLimit || $[24] !== className || $[25] !== cols || $[26] !== contrast || $[27] !== currentLength || $[28] !== defaultValue || $[29] !== disabled || $[30] !== isControlled || $[31] !== maxHeight || $[32] !== minHeight || $[33] !== onChange || $[34] !== ref || $[35] !== required || $[36] !== resize || $[37] !== rest || $[38] !== rows || $[39] !== style || $[40] !== validationStatus || $[41] !== value) {
+    var _counter$isOverLimit;
+    const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : undefined;
+    const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
+    let t6;
+    if ($[43] !== characterLimit || $[44] !== isControlled || $[45] !== onChange) {
+      t6 = e => {
+        var _onChange;
+        if (characterLimit && !isControlled) {
+          setUncontrolledLength(e.target.value.length);
+        }
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(e);
+      };
+      $[43] = characterLimit;
+      $[44] = isControlled;
+      $[45] = onChange;
+      $[46] = t6;
+    } else {
+      t6 = $[46];
+    }
+    const handleTextareaChange = t6;
+    const isValid = isOverLimit ? "error" : validationStatus;
+    const t7 = isValid === "error" ? "true" : "false";
+    let t8;
+    if ($[47] !== maxHeight || $[48] !== minHeight || $[49] !== style) {
+      t8 = {
+        minHeight,
+        maxHeight,
+        ...style
+      };
+      $[47] = maxHeight;
+      $[48] = minHeight;
+      $[49] = style;
+      $[50] = t8;
+    } else {
+      t8 = $[50];
+    }
+    let t9;
+    if ($[51] !== characterCountStaticMessageId || $[52] !== characterLimit || $[53] !== rest) {
+      t9 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || undefined : rest["aria-describedby"];
+      $[51] = characterCountStaticMessageId;
+      $[52] = characterLimit;
+      $[53] = rest;
+      $[54] = t9;
+    } else {
+      t9 = $[54];
+    }
+    let t10;
+    if ($[55] !== cols || $[56] !== defaultValue || $[57] !== disabled || $[58] !== handleTextareaChange || $[59] !== ref || $[60] !== required || $[61] !== resize || $[62] !== rest || $[63] !== rows || $[64] !== t7 || $[65] !== t8 || $[66] !== t9 || $[67] !== value) {
+      t10 = /*#__PURE__*/jsx("textarea", {
+        value: value,
+        defaultValue: defaultValue,
+        "data-resize": resize,
+        "aria-required": required,
+        "aria-invalid": t7,
+        ref: ref,
+        disabled: disabled,
+        rows: rows,
+        cols: cols,
+        className: classes.TextArea,
+        onChange: handleTextareaChange,
+        style: t8,
+        ...rest,
+        "aria-describedby": t9
+      });
+      $[55] = cols;
+      $[56] = defaultValue;
+      $[57] = disabled;
+      $[58] = handleTextareaChange;
+      $[59] = ref;
+      $[60] = required;
+      $[61] = resize;
+      $[62] = rest;
+      $[63] = rows;
+      $[64] = t7;
+      $[65] = t8;
+      $[66] = t9;
+      $[67] = value;
+      $[68] = t10;
+    } else {
+      t10 = $[68];
+    }
+    let t11;
+    if ($[69] !== block || $[70] !== className || $[71] !== contrast || $[72] !== disabled || $[73] !== isValid || $[74] !== t10) {
+      t11 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
+        validationStatus: isValid,
+        disabled: disabled,
+        block: block,
+        contrast: contrast,
+        className: className,
+        children: t10
+      });
+      $[69] = block;
+      $[70] = className;
+      $[71] = contrast;
+      $[72] = disabled;
+      $[73] = isValid;
+      $[74] = t10;
+      $[75] = t11;
+    } else {
+      t11 = $[75];
+    }
+    t5 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t11, characterLimit && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(AriaStatus, {
+          announceOnShow: false,
+          delayMs: SCREEN_READER_DELAY,
+          className: visuallyHiddenClasses.InternalVisuallyHidden,
+          children: counter === null || counter === void 0 ? void 0 : counter.message
+        }), /*#__PURE__*/jsxs(VisuallyHidden, {
+          id: characterCountStaticMessageId,
+          children: ["You can enter up to ", characterLimit, " ", characterLimit === 1 ? "character" : "characters"]
+        }), /*#__PURE__*/jsxs(Text, {
+          "aria-hidden": "true",
+          id: characterCountId,
+          size: "small",
+          className: clsx(classes.CharacterCounter, isOverLimit && classes["CharacterCounter--error"]),
+          children: [isOverLimit && /*#__PURE__*/jsx(AlertFillIcon, {
+            size: 16
+          }), counter === null || counter === void 0 ? void 0 : counter.message]
+        })]
       })]
     });
-    $[58] = characterCount;
-    $[59] = characterCountId;
-    $[60] = characterCountStaticMessageId;
-    $[61] = characterLimit;
-    $[62] = isOverLimit;
-    $[63] = screenReaderMessage;
-    $[64] = t14;
-  } else {
-    t14 = $[64];
-  }
-  let t15;
-  if ($[65] !== t13 || $[66] !== t14) {
-    t15 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t13, t14]
-    });
-    $[65] = t13;
-    $[66] = t14;
-    $[67] = t15;
+    $[20] = block;
+    $[21] = characterCountId;
+    $[22] = characterCountStaticMessageId;
+    $[23] = characterLimit;
+    $[24] = className;
+    $[25] = cols;
+    $[26] = contrast;
+    $[27] = currentLength;
+    $[28] = defaultValue;
+    $[29] = disabled;
+    $[30] = isControlled;
+    $[31] = maxHeight;
+    $[32] = minHeight;
+    $[33] = onChange;
+    $[34] = ref;
+    $[35] = required;
+    $[36] = resize;
+    $[37] = rest;
+    $[38] = rows;
+    $[39] = style;
+    $[40] = validationStatus;
+    $[41] = value;
+    $[42] = t5;
   } else {
-    t15 = $[67];
+    t5 = $[42];
   }
-  return t15;
+  return t5;
 });
 Textarea.displayName = 'Textarea';
 Textarea.__SLOT__ = Symbol('Textarea');

package/dist/_VisuallyHidden.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import classes from './_VisuallyHidden.module.css.js';
+import visuallyHiddenClasses from './_VisuallyHidden.module.css.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
@@ -36,7 +36,7 @@ function VisuallyHidden(t0) {
   let t2;
   if ($[6] !== className || $[7] !== t1) {
     t2 = clsx(className, {
-      [classes.InternalVisuallyHidden]: t1
+      [visuallyHiddenClasses.InternalVisuallyHidden]: t1
     });
     $[6] = className;
     $[7] = t1;

package/dist/_VisuallyHidden.module.css.js

@@ -1,5 +1,5 @@
 import './_VisuallyHidden-1f156b61.css';
 
-var classes = {"InternalVisuallyHidden":"prc-src-InternalVisuallyHidden-2YaI6"};
+var visuallyHiddenClasses = {"InternalVisuallyHidden":"prc-src-InternalVisuallyHidden-2YaI6"};
 
-export { classes as default };
+export { visuallyHiddenClasses as default };

package/dist/live-region/Announce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Announce.d.ts","sourceRoot":"","sources":["../../src/live-region/Announce.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAEjE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,gBAAgB,CACxE,EAAE,EACF,KAAK,EACL;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACpC,CACF,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,qBAwGtF"}
+{"version":3,"file":"Announce.d.ts","sourceRoot":"","sources":["../../src/live-region/Announce.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAEjE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,gBAAgB,CACxE,EAAE,EACF,KAAK,EACL;IACE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;CACpC,CACF,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,qBAsGtF"}