@transferwise/components 0.0.0-experimental-369191f → 0.0.0-experimental-77bcd0d

package/build/inputs/contexts.js

@@ -25,6 +25,20 @@ function useInputAttributes({
 function useFieldLabelRef() {
   return React.useContext(FieldLabelContext)?.ref;
 }
+const TextareaCharacterCountContext = /*#__PURE__*/React.createContext(undefined);
+const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+function useTextareaCharacterCount(current, max) {
+  const setCharacterCount = React.useContext(TextareaCharacterCountContext);
+  React.useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({
+        current,
+        max
+      });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
 function withInputAttributes(Component, args) {
   function ComponentWithInputAttributes(props) {
     return /*#__PURE__*/jsxRuntime.jsx(Component, {
@@ -40,7 +54,9 @@ exports.FieldLabelContextProvider = FieldLabelContextProvider;
 exports.InputDescribedByProvider = InputDescribedByProvider;
 exports.InputIdContextProvider = InputIdContextProvider;
 exports.InputInvalidProvider = InputInvalidProvider;
+exports.TextareaCharacterCountProvider = TextareaCharacterCountProvider;
 exports.useFieldLabelRef = useFieldLabelRef;
 exports.useInputAttributes = useInputAttributes;
+exports.useTextareaCharacterCount = useTextareaCharacterCount;
 exports.withInputAttributes = withInputAttributes;
 //# sourceMappingURL=contexts.js.map

package/build/inputs/contexts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;"}
+{"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n  ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n  const setCharacterCount = useContext(TextareaCharacterCountContext);\n  useEffect(() => {\n    if (setCharacterCount && max != null) {\n      setCharacterCount({ current, max });\n      return () => setCharacterCount(null);\n    }\n  }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,mBAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,gBAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;;;"}

package/build/inputs/contexts.mjs

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const FieldLabelContext = /*#__PURE__*/createContext(undefined);
@@ -23,6 +23,20 @@ function useInputAttributes({
 function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
+const TextareaCharacterCountContext = /*#__PURE__*/createContext(undefined);
+const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+function useTextareaCharacterCount(current, max) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({
+        current,
+        max
+      });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
 function withInputAttributes(Component, args) {
   function ComponentWithInputAttributes(props) {
     return /*#__PURE__*/jsx(Component, {
@@ -34,5 +48,5 @@ function withInputAttributes(Component, args) {
   return ComponentWithInputAttributes;
 }
 
-export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, useFieldLabelRef, useInputAttributes, withInputAttributes };
+export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, TextareaCharacterCountProvider, useFieldLabelRef, useInputAttributes, useTextareaCharacterCount, withInputAttributes };
 //# sourceMappingURL=contexts.mjs.map

package/build/inputs/contexts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}
+{"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n  ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n  const setCharacterCount = useContext(TextareaCharacterCountContext);\n  useEffect(() => {\n    if (setCharacterCount && max != null) {\n      setCharacterCount({ current, max });\n      return () => setCharacterCount(null);\n    }\n  }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,aAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,UAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}

package/build/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:11 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,53 +4351,48 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --padding-x-small: 4px;
-    --padding-small: 8px;
-    --padding-medium: 12px;
-    --padding-large: 16px;
-    --size-4: 2px;
-    --size-5: 2.5px;
-    --size-8: 4px;
-    --size-10: 5px;
-    --size-12: 6px;
-    --size-14: 7px;
-    --size-16: 8px;
-    --size-24: 12px;
-    --size-32: 16px;
-    --size-40: 20px;
-    --size-48: 24px;
-    --size-52: 26px;
-    --size-56: 28px;
-    --size-60: 30px;
-    --size-64: 32px;
-    --size-72: 36px;
-    --size-80: 40px;
-    --size-88: 44px;
-    --size-96: 48px;
-    --size-104: 52px;
-    --size-112: 56px;
-    --size-120: 60px;
-    --size-126: 63px;
-    --size-128: 64px;
-    --size-146: 73px;
-    --size-154: 77px;
-    --size-160: 80px;
-    --size-x-small: 12px;
-    --size-small: 16px;
-    --size-medium: 20px;
-    --size-large: 24px;
-    --size-x-large: 28px;
-    --size-2x-large: 36px;
-    --space-content-horizontal: 8px;
-    --space-small: 8px;
-    --space-medium: 16px;
-    --space-large: 20px;
-    --space-x-large: 28px;
-  }
-}
-
-@media (max-width: 320px) {
-  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-5: calc(5px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);
@@ -29935,10 +29930,28 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.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],
@@ -29946,7 +29959,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   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/build/styles/css/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:11 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 23:15:55 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,53 +4351,48 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --padding-x-small: 4px;
-    --padding-small: 8px;
-    --padding-medium: 12px;
-    --padding-large: 16px;
-    --size-4: 2px;
-    --size-5: 2.5px;
-    --size-8: 4px;
-    --size-10: 5px;
-    --size-12: 6px;
-    --size-14: 7px;
-    --size-16: 8px;
-    --size-24: 12px;
-    --size-32: 16px;
-    --size-40: 20px;
-    --size-48: 24px;
-    --size-52: 26px;
-    --size-56: 28px;
-    --size-60: 30px;
-    --size-64: 32px;
-    --size-72: 36px;
-    --size-80: 40px;
-    --size-88: 44px;
-    --size-96: 48px;
-    --size-104: 52px;
-    --size-112: 56px;
-    --size-120: 60px;
-    --size-126: 63px;
-    --size-128: 64px;
-    --size-146: 73px;
-    --size-154: 77px;
-    --size-160: 80px;
-    --size-x-small: 12px;
-    --size-small: 16px;
-    --size-medium: 20px;
-    --size-large: 24px;
-    --size-x-large: 28px;
-    --size-2x-large: 36px;
-    --space-content-horizontal: 8px;
-    --space-small: 8px;
-    --space-medium: 16px;
-    --space-large: 20px;
-    --space-x-large: 28px;
-  }
-}
-
-@media (max-width: 320px) {
-  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-5: calc(5px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / var(--delta));
+    --padding-x-small: var(--size-8);
+    --padding-small: var(--size-16);
+    --padding-medium: var(--size-24);
+    --padding-large: var(--size-32);
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/build/styles/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/build/styles/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 23:15:55 GMT
+// Generated on Wed, 13 May 2026 12:45:11 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 23:15:54 GMT
+// Generated on Wed, 13 May 2026 12:45:11 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;