@transferwise/components 46.141.0 → 46.142.0

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.141.0",
+  "version": "46.142.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,7 +91,7 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.1",
+    "@transferwise/neptune-css": "14.27.2",
     "@wise/components-theming": "1.10.2",
     "@wise/wds-configs": "0.0.0"
   },

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -13,7 +13,7 @@ export default {
 
 type Story = StoryObj<typeof AvatarLayout>;
 
-const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];
 
 export const Diagonal: Story = {
   render: () => (

package/src/avatarLayout/AvatarLayout.tsx

@@ -94,6 +94,8 @@ const DIAGONAL_LAYOUT_STYLE_CONFIG = {
   48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },
   56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },
   72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },
+  88: { avatarSize: 54, offset: 7, fontSize: 26, iconSize: 27 },
+  96: { avatarSize: 58, offset: 8, fontSize: 28, iconSize: 29 },
 };
 
 /** Horizontal layout have custom offset between avatars */
@@ -105,4 +107,6 @@ const HORIZONTAL_LAYOUT_OFFSET = {
   48: 4,
   56: 6,
   72: 8,
+  88: 10,
+  96: 10,
 };

package/src/avatarView/AvatarView.css

@@ -4,10 +4,10 @@
   display: inline-block;
 }
 .np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
 .np-dot-badge {
   position: absolute;

package/src/avatarView/AvatarView.story.tsx

@@ -30,7 +30,7 @@ type Story = StoryObj<typeof AvatarView>;
 
 const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
-const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];
 
 const withComponentGrid = (Story: () => JSX.Element) => (
   <div
@@ -97,15 +97,19 @@ export const Badge: Story = {
           gap: '1em',
           display: 'grid',
           justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(7, min-content)',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
         }}
       >
         {sizes.map((size) => (
           <Body type="body-large-bold">{size}</Body>
         ))}
         {sizes.map((size, index) => (
-          <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
-            {icons[index]}
+          <AvatarView
+            key={size}
+            size={size}
+            badge={{ flagCode: currencies[index % currencies.length] }}
+          >
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
@@ -129,43 +133,43 @@ export const Badge: Story = {
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
         {sizes.map((size, index) => (
           <AvatarView key={size} size={size} badge={{ type: 'action' }}>
-            {icons[index]}
+            {icons[index % icons.length]}
           </AvatarView>
         ))}
 
@@ -322,7 +326,7 @@ export const Images: Story = {
           gap: '1em',
           display: 'grid',
           justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(7, min-content)',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
         }}
       >
         {sizes.map((size) => (
@@ -376,7 +380,7 @@ export const Profiles: Story = {
           gap: '1em',
           display: 'grid',
           justifyContent: 'space-between',
-          gridTemplate: 'auto auto / repeat(7, min-content)',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
         }}
       >
         {sizes.map((size) => (

package/src/avatarView/AvatarView.tsx

@@ -25,7 +25,7 @@ export type Props = {
    */
   profileName?: string | null;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
-  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
   badge?: AvatarViewBadgeProps;
   interactive?: boolean;
   selected?: boolean;
@@ -92,6 +92,8 @@ const MAP_BADGE_ASSET_SIZE = {
   48: 16,
   56: 24,
   72: 24,
+  88: 24,
+  96: 24,
 } satisfies Record<number, BadgeAssetsProps['size']>;
 
 /** Border width for `selected` state determined by avatar size */
@@ -103,6 +105,8 @@ const MAP_SELECTED_BORDER_WIDTH = {
   48: 2,
   56: 2,
   72: 2,
+  88: 2,
+  96: 2,
 };
 
 /** Certain sizes of AvatarView has a custom offset for badge */

package/src/avatarView/Dot.css

@@ -4,10 +4,10 @@
   display: inline-block;
 }
 .np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
 }
 .np-dot-badge {
   position: absolute;

package/src/avatarView/Dot.less

@@ -5,11 +5,11 @@
 
   &-mask {
     mask-image: radial-gradient(
-        circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
-                  left calc(100% - calc(var(--np-dot-size) / 2)),
-        transparent 0,
-        transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
-        black 0
+      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left
+        calc(100% - calc(var(--np-dot-size) / 2)),
+      transparent 0,
+      transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
+      black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px)
     );
   }
 
@@ -19,7 +19,7 @@
     height: var(--np-dot-size);
     border-radius: var(--radius-full);
     right: 0;
-    
+
     &-notification {
       background-color: var(--color-sentiment-negative);
     }

package/src/avatarView/Dot.tsx

@@ -18,6 +18,8 @@ const MAP_STYLE_CONFIG = {
   48: { size: 14, offset: 2 },
   56: { size: 16, offset: 3 },
   72: { size: 20, offset: 3 },
+  88: { size: 24, offset: 4 },
+  96: { size: 24, offset: 4 },
 };
 
 export default function Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {

package/src/common/circle/Circle.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { useMedia } from '../hooks/useMedia';
 import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
 
 export type Props = {
   /**
@@ -33,6 +33,8 @@ const MAP_ICON_SIZE = {
   48: 24,
   56: 28,
   72: 36,
+  88: 44,
+  96: 48,
 };
 
 /**
@@ -48,6 +50,8 @@ const MAP_FONT_SIZE = {
   48: 22,
   56: 26,
   72: 30,
+  88: 36,
+  96: 40,
 };
 
 const Circle = forwardRef(function Circle(

package/src/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -21,6 +21,7 @@
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -29,6 +30,7 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }
 .wds-currency-selector:disabled {
   opacity: 1 !important;

package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
 import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
@@ -21,3 +22,45 @@ export const WithAutofocus: Story = {
     autoFocus: true,
   },
 };
+
+const locales = [
+  { lang: 'en', label: 'English', currency: 'GBP' },
+  { lang: 'cs', label: 'Czech', currency: 'CZK' },
+  { lang: 'de', label: 'German', currency: 'EUR' },
+  { lang: 'es', label: 'Spanish', currency: 'EUR' },
+  { lang: 'fr', label: 'French', currency: 'EUR' },
+  { lang: 'hu', label: 'Hungarian', currency: 'HUF', supportsDecimals: false },
+  { lang: 'id', label: 'Indonesian', currency: 'IDR', supportsDecimals: false },
+  { lang: 'it', label: 'Italian', currency: 'EUR' },
+  { lang: 'ja', label: 'Japanese', currency: 'JPY', supportsDecimals: false },
+  { lang: 'nl', label: 'Dutch', currency: 'EUR' },
+  { lang: 'pl', label: 'Polish', currency: 'PLN' },
+  { lang: 'pt', label: 'Portuguese', currency: 'EUR' },
+  { lang: 'ro', label: 'Romanian', currency: 'RON' },
+  { lang: 'ru', label: 'Russian', currency: 'RUB' },
+  { lang: 'th', label: 'Thai', currency: 'THB' },
+  { lang: 'tr', label: 'Turkish', currency: 'TRY' },
+  { lang: 'uk', label: 'Ukrainian', currency: 'UAH' },
+  { lang: 'zh-CN', label: 'Simplified Chinese', currency: 'CNY' },
+  { lang: 'zh-HK', label: 'Traditional Chinese', currency: 'HKD' },
+];
+
+/**
+ * Verifies that the .wds-text-display--forced class correctly overrides locale-specific
+ * font restrictions (ja, zh-HK, zh-CN, th) so amounts render in Wise Sans across all
+ * supported locales. Each row represents a different language context.
+ */
+export const LocaleFontOverride = () => (
+  <>
+    {locales.map(({ lang, label, currency, supportsDecimals = true }) => (
+      <div key={lang} lang={lang} className="m-b-4">
+        <ExpressiveMoneyInput
+          label={`${label} locale (${lang})`}
+          currency={currency}
+          amount={supportsDecimals ? 1234.56 : 123456}
+          onAmountChange={fn()}
+        />
+      </div>
+    ))}
+  </>
+);

package/src/expressiveMoneyInput/amountInput/AmountInput.css

@@ -21,6 +21,7 @@
   flex-grow: 1;
   text-align: right;
   background-color: transparent;
+  line-height: inherit;
 }
 .wds-amount-input-input:focus-visible {
   outline: none;
@@ -29,4 +30,5 @@
   flex-grow: 0;
   display: flex;
   align-items: center;
+  line-height: inherit;
 }

package/src/expressiveMoneyInput/amountInput/AmountInput.less

@@ -29,6 +29,7 @@
     flex-grow: 1;
     text-align: right;
     background-color: transparent;
+    line-height: inherit;
 
     &:focus-visible {
       outline: none;
@@ -39,5 +40,6 @@
     flex-grow: 0;
     display: flex;
     align-items: center;
+    line-height: inherit;
   }
 }

package/src/expressiveMoneyInput/amountInput/AmountInput.tsx

@@ -298,7 +298,7 @@ export const AmountInput = ({
   return (
     <div className="wds-amount-input-container">
       <div
-        className={clsx('wds-amount-input-input-container', 'np-text-display-large')}
+        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
         style={style}
       >
         <input

package/src/field/Field.css

@@ -1,13 +1,29 @@
-.np-field-control,
-.np-field__prompt {
+.np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field-validation {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.np-field-textarea-char-counter {
+  min-width: 55px;
+  text-align: right;
+  margin-left: auto;
+  padding: 4px 0;
+  padding: var(--size-4) 0;
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .np-field .form-group--typeahead[class],
 .np-field .np-checkbox-label[class] {
   margin-bottom: 0;
 }
-.np-field:has(.wds-radio-group) .np-field__prompt {
+.np-field:has(.wds-radio-group) .np-field-validation {
   margin-top: 12px;
   margin-top: var(--size-12);
 }

package/src/field/Field.less

@@ -1,16 +1,30 @@
 .np-field {
-  &-control,
-  &__prompt {
+  &-control {
     margin-top: var(--size-4);
   }
 
+  &-validation {
+    display: flex;
+    align-items: flex-start;
+    margin-top: var(--size-4);
+    gap: var(--size-8);
+  }
+
+  &-textarea-char-counter {
+    min-width: 55px;
+    text-align: right;
+    margin-left: auto;
+    padding: var(--size-4) 0;
+    color: var(--color-content-tertiary);
+  }
+
   // @FIXME space between individual fields should be 24px, while some older inputs
   //        inject extraneous space.
   .form-group--typeahead[class],
   .np-checkbox-label[class] {
     margin-bottom: 0;
   }
-  &:has(.wds-radio-group) &__prompt {
+  &:has(.wds-radio-group) &-validation {
     margin-top: var(--size-12);
   }
 }

package/src/field/Field.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  characterCount: {
+    id: 'neptune.Field.characterCount',
+    defaultMessage: '{current} of {max} characters used',
+  },
+});

package/src/field/Field.story.tsx

@@ -84,7 +84,11 @@ export const Basic = (args: FieldProps) => {
           messageIconLabel={args.messageIconLabel}
           messageLoading={args.messageLoading}
         >
-          <TextArea />
+          <TextArea
+            maxLength={200}
+            value={value}
+            onChange={({ target }) => setValue(target.value)}
+          />
         </Field>
 
         <Field

package/src/field/Field.test.tsx

@@ -1,5 +1,6 @@
 import Info from '../info/Info';
 import { Input } from '../inputs/Input';
+import { TextArea } from '../inputs/TextArea';
 import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 
 import { Field } from './Field';
@@ -163,4 +164,93 @@ describe('Field', () => {
     expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
     expect(screen.getByText('Processing your request')).toBeInTheDocument();
   });
+
+  describe('TextArea character count', () => {
+    it('renders counter when TextArea has maxLength', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('5/200')).toBeInTheDocument();
+    });
+
+    it('does not render counter when TextArea has no maxLength', () => {
+      render(
+        <Field label="Message">
+          <TextArea value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.queryByText(/\/\d+/)).not.toBeInTheDocument();
+    });
+
+    it('includes counter id in aria-describedby of the textarea', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      const textarea = screen.getByRole('textbox');
+      const counter = screen.getByText('5/200');
+      expect(textarea).toHaveAttribute('aria-describedby', expect.stringContaining(counter.id));
+    });
+
+    it('does not have role=status below 80% threshold', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="short" onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('5/200');
+      expect(counter).not.toHaveAttribute('role');
+      expect(counter).not.toHaveAttribute('aria-live');
+    });
+
+    it('has role=status and aria-live=polite at 80% threshold', () => {
+      const value = 'x'.repeat(160);
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value={value} onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('160/200');
+      expect(counter).toHaveAttribute('role', 'status');
+      expect(counter).toHaveAttribute('aria-live', 'polite');
+      expect(counter).toHaveAttribute('aria-atomic', 'true');
+    });
+
+    it('updates counter when text changes', () => {
+      const { rerender } = render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hi" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('2/200')).toBeInTheDocument();
+
+      rerender(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello world" onChange={() => {}} />
+        </Field>,
+      );
+
+      expect(screen.getByText('11/200')).toBeInTheDocument();
+    });
+
+    it('provides accessible aria-label on the counter', () => {
+      render(
+        <Field label="Message">
+          <TextArea maxLength={200} value="hello" onChange={() => {}} />
+        </Field>,
+      );
+
+      const counter = screen.getByText('5/200');
+      expect(counter).toHaveAttribute('aria-label', '5 of 200 characters used');
+    });
+  });
 });