@transferwise/components 0.0.0-experimental-a2f9b4e → 0.0.0-experimental-21d2352

package/build/field/Field.js

@@ -2,6 +2,8 @@
 
 var clsx = require('clsx');
 var React = require('react');
+var reactIntl = require('react-intl');
+var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
@@ -23,11 +25,10 @@ require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 require('@transferwise/formatting');
 require('@transferwise/icons');
-require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var Field_messages = require('./Field.messages.js');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
-require('../body/Body.js');
 require('../button/Button.resolver.js');
 require('../prompt/PrimitivePrompt/PrimitivePrompt.js');
 require('../badge/Badge.js');
@@ -56,6 +57,9 @@ const Field = ({
   children,
   ...props
 }) => {
+  const {
+    formatMessage
+  } = reactIntl.useIntl();
   const labelRef = React.useRef(null);
   const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -65,6 +69,9 @@ const Field = ({
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
   const messageId = React.useId();
   const descriptionId = React.useId();
+  const counterId = React.useId();
+  const [textareaCharacterCount, setTextareaCharacterCount] = React.useState(null);
+  const handleTextareaCharacterCount = React.useCallback(state => setTextareaCharacterCount(state), []);
   /**
    * form control can have multiple messages to describe it,
    * e.g the description underneath the label and inline alert
@@ -77,6 +84,9 @@ const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(counterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
   return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
@@ -90,37 +100,55 @@ const Field = ({
         value: ariaDescribedbyByIds(),
         children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
           value: hasError,
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: clsx.clsx('np-field form-group d-block', {
-              'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
-              'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
-              'has-error': hasError,
-              'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
-            }, className),
-            children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
-                ref: labelRef,
-                id: labelId,
-                htmlFor: inputId,
-                children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
-                  children: label
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
-                id: descriptionId,
-                children: description
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "np-field-control",
-                children: children
+          children: /*#__PURE__*/jsxRuntime.jsx(contexts.TextareaCharacterCountProvider, {
+            value: handleTextareaCharacterCount,
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: clsx.clsx('np-field form-group d-block', {
+                'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
+                'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
+                'has-error': hasError,
+                'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
+              }, className),
+              children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
+                  ref: labelRef,
+                  id: labelId,
+                  htmlFor: inputId,
+                  children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
+                    children: label
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
+                  id: descriptionId,
+                  children: description
+                }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "np-field-control",
+                  children: children
+                })]
+              }) : children, (message || textareaCharacterCount) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: "np-field-validation",
+                children: [message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+                  sentiment: sentiment$1,
+                  id: messageId,
+                  mediaLabel: messageIconLabel,
+                  className: "np-field__prompt",
+                  loading: messageLoading,
+                  width: "full",
+                  children: message
+                }), textareaCharacterCount && /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
+                  as: "span",
+                  id: counterId,
+                  role: "status",
+                  "aria-live": textareaCharacterCount.current >= textareaCharacterCount.max * 0.8 ? 'polite' : 'off',
+                  "aria-atomic": "true",
+                  "aria-label": formatMessage(Field_messages.default.characterCount, {
+                    current: textareaCharacterCount.current,
+                    max: textareaCharacterCount.max
+                  }),
+                  className: "np-field-counter",
+                  children: [textareaCharacterCount.current, "/", textareaCharacterCount.max]
+                })]
               })]
-            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
-              sentiment: sentiment$1,
-              id: messageId,
-              mediaLabel: messageIconLabel,
-              className: "np-field__prompt",
-              loading: messageLoading,
-              width: "full",
-              children: message
-            })]
+            })
           })
         })
       })

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field form-group d-block',\n                  {\n                    'has-success': sentiment === Sentiment.POSITIVE,\n                    'has-warning': sentiment === Sentiment.WARNING,\n                    'has-error': hasError,\n                    'has-info': sentiment === Sentiment.NEUTRAL,\n                  },\n                  className,\n                )}\n              >\n                {label != null ? (\n                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":"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"}

package/build/field/Field.messages.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  characterCount: {
+    id: "neptune.Field.characterCount"
+  }
+});
+
+exports.default = messages;
+//# sourceMappingURL=Field.messages.js.map

package/build/field/Field.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.messages.js","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/field/Field.messages.mjs

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  characterCount: {
+    id: "neptune.Field.characterCount"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=Field.messages.mjs.map

package/build/field/Field.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.messages.mjs","sources":["../../src/field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/field/Field.mjs

@@ -1,5 +1,7 @@
 import { clsx } from 'clsx';
-import { useRef, useId } from 'react';
+import { useRef, useId, useState, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
@@ -21,11 +23,10 @@ import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import '@transferwise/formatting';
 import '@transferwise/icons';
-import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import messages from './Field.messages.mjs';
 import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
-import '../body/Body.mjs';
 import '../button/Button.resolver.mjs';
 import '../prompt/PrimitivePrompt/PrimitivePrompt.mjs';
 import '../badge/Badge.mjs';
@@ -37,7 +38,7 @@ import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
 import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../link/Link.messages.mjs';
 import '../prompt/common/Expander/Expander.messages.mjs';
-import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
+import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider, TextareaCharacterCountProvider } from '../inputs/contexts.mjs';
 import { Label as LabelNamespace } from '../label/Label.mjs';
 
 const Field = ({
@@ -54,6 +55,9 @@ const Field = ({
   children,
   ...props
 }) => {
+  const {
+    formatMessage
+  } = useIntl();
   const labelRef = useRef(null);
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
   const message = propMessage || props.error;
@@ -63,6 +67,9 @@ const Field = ({
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
   const messageId = useId();
   const descriptionId = useId();
+  const counterId = useId();
+  const [textareaCharacterCount, setTextareaCharacterCount] = useState(null);
+  const handleTextareaCharacterCount = useCallback(state => setTextareaCharacterCount(state), []);
   /**
    * form control can have multiple messages to describe it,
    * e.g the description underneath the label and inline alert
@@ -75,6 +82,9 @@ const Field = ({
     if (message) {
       messageIds.push(messageId);
     }
+    if (textareaCharacterCount) {
+      messageIds.push(counterId);
+    }
     return messageIds.length > 0 ? messageIds.join(' ') : undefined;
   }
   return /*#__PURE__*/jsx(FieldLabelContextProvider, {
@@ -88,37 +98,55 @@ const Field = ({
         value: ariaDescribedbyByIds(),
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
-          children: /*#__PURE__*/jsxs("div", {
-            className: clsx('np-field form-group d-block', {
-              'has-success': sentiment === Sentiment.POSITIVE,
-              'has-warning': sentiment === Sentiment.WARNING,
-              'has-error': hasError,
-              'has-info': sentiment === Sentiment.NEUTRAL
-            }, className),
-            children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
-              children: [/*#__PURE__*/jsx(LabelNamespace, {
-                ref: labelRef,
-                id: labelId,
-                htmlFor: inputId,
-                children: required ? label : /*#__PURE__*/jsx(LabelNamespace.Optional, {
-                  children: label
-                })
-              }), /*#__PURE__*/jsx(LabelNamespace.Description, {
-                id: descriptionId,
-                children: description
-              }), /*#__PURE__*/jsx("div", {
-                className: "np-field-control",
-                children: children
+          children: /*#__PURE__*/jsx(TextareaCharacterCountProvider, {
+            value: handleTextareaCharacterCount,
+            children: /*#__PURE__*/jsxs("div", {
+              className: clsx('np-field form-group d-block', {
+                'has-success': sentiment === Sentiment.POSITIVE,
+                'has-warning': sentiment === Sentiment.WARNING,
+                'has-error': hasError,
+                'has-info': sentiment === Sentiment.NEUTRAL
+              }, className),
+              children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx(LabelNamespace, {
+                  ref: labelRef,
+                  id: labelId,
+                  htmlFor: inputId,
+                  children: required ? label : /*#__PURE__*/jsx(LabelNamespace.Optional, {
+                    children: label
+                  })
+                }), /*#__PURE__*/jsx(LabelNamespace.Description, {
+                  id: descriptionId,
+                  children: description
+                }), /*#__PURE__*/jsx("div", {
+                  className: "np-field-control",
+                  children: children
+                })]
+              }) : children, (message || textareaCharacterCount) && /*#__PURE__*/jsxs("div", {
+                className: "np-field-validation",
+                children: [message && /*#__PURE__*/jsx(InlinePrompt, {
+                  sentiment: sentiment,
+                  id: messageId,
+                  mediaLabel: messageIconLabel,
+                  className: "np-field__prompt",
+                  loading: messageLoading,
+                  width: "full",
+                  children: message
+                }), textareaCharacterCount && /*#__PURE__*/jsxs(Body, {
+                  as: "span",
+                  id: counterId,
+                  role: "status",
+                  "aria-live": textareaCharacterCount.current >= textareaCharacterCount.max * 0.8 ? 'polite' : 'off',
+                  "aria-atomic": "true",
+                  "aria-label": formatMessage(messages.characterCount, {
+                    current: textareaCharacterCount.current,
+                    max: textareaCharacterCount.max
+                  }),
+                  className: "np-field-counter",
+                  children: [textareaCharacterCount.current, "/", textareaCharacterCount.max]
+                })]
               })]
-            }) : children, message && /*#__PURE__*/jsx(InlinePrompt, {
-              sentiment: sentiment,
-              id: messageId,
-              mediaLabel: messageIconLabel,
-              className: "np-field__prompt",
-              loading: messageLoading,
-              width: "full",
-              children: message
-            })]
+            })
           })
         })
       })

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field form-group d-block',\n                  {\n                    'has-success': sentiment === Sentiment.POSITIVE,\n                    'has-warning': sentiment === Sentiment.WARNING,\n                    'has-error': hasError,\n                    'has-info': sentiment === Sentiment.NEUTRAL,\n                  },\n                  className,\n                )}\n              >\n                {label != null ? (\n                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.js

@@ -88,11 +88,13 @@ const FlowNavigation = ({
           className: "m-x-1"
         }), closeButton]
       }),
-      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
+      bottomContent: !done && (steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
         activeStep: activeStep,
         steps: steps,
         className: clsx.clsx('np-flow-navigation__stepper')
-      }) : null,
+      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-flow-navigation__stepper"
+      })),
       layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
     })
   });

package/build/flowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : null\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,cAAA,CAACC,YAAI,IAAA,CAAG;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,cAAA,CAACS,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,SAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,cAAA,CAACuB,kBAAU,EAAA;MACTH,SAAS,EAAEC,SAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,cAAA,CAAC2B,kBAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,cAAA,CAACiC,eAAS,EAAA,EAAA;SACA,CAAC,gBAEbjC,cAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,cAAA,CAACkC,qBAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,SAAA,CACxE;AAAA,OACH,CACD;AACDuC,MAAAA,YAAY,eACVX,eAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,cAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,IAAIG,KAAK,CAACiC,MAAM,GAAG,CAAC,gBACvBtC,cAAA,CAACuC,eAAO,EAAA;AACN1C,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,SAAI,CAAC,6BAA6B;OAAE,CAC/C,GACA,IACL;MACDmB,MAAM,EAAE,CAACxB,QAAQ,GAAGyB,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;KAAW;AAE5D,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done &&\n          (steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : (\n            <div className=\"np-flow-navigation__stepper\" />\n          ))\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAMA,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,gBAAGC,cAAA,CAACC,YAAI,IAAA,CAAG;AACfC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;AACRC,EAAAA;AAAK,CACe,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,MAAMC,WAAW,GAAGL,OAAO,IAAI,IAAI,iBAAIH,cAAA,CAACS,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAER;AAAQ,IAAG;AAElF,EAAA,MAAMS,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAEhD,EAAA,MAAMC,SAAS,GAAGhB,IAAI,GAAG,IAAI,GAAGJ,MAAM;EAEtC,MAAMqB,aAAa,GAAGf,QAAQ,IAAI,IAAI,IAAIP,UAAU,GAAG,CAAC;AAExD,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEoB,IAAAA,SAAS,EAAEC,SAAI,CAAC,2EAA2E,EAAE;AAC3F,MAAA,mCAAmC,EAAE,CAACnB;AACvC,KAAA,CAAE;IAAAoB,QAAA,eAEHtB,cAAA,CAACuB,kBAAU,EAAA;MACTH,SAAS,EAAEC,SAAI,CACb,mCAAmC,EACnCT,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;QACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,QAAA,wBAAwB,EAAEA,QAAQ;AAClC,QAAA,wBAAwB,EAAEI;AAC3B,OAAA,CACL;MACFQ,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;QAAAJ,QAAA,EAAA,CACG,CAACV,QAAQ,IAAIO,aAAa,gBACzBnB,cAAA,CAAC2B,kBAAU,EAAA;AACTjB,UAAAA,IAAI,EAAE,EAAG;AACTkB,UAAAA,QAAQ,EAAC,UAAU;AACnBC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAYvB,IAAI,CAACwB,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9CrB,UAAAA,OAAO,EAAEP,QAAS;AAAAkB,UAAAA,QAAA,eAElBtB,cAAA,CAACiC,eAAS,EAAA,EAAA;SACA,CAAC,gBAEbjC,cAAA,CAAA,KAAA,EAAA;AAAKoB,UAAAA,SAAS,EAAC,sBAAsB;AAAAE,UAAAA,QAAA,EAAEvB;SAAU,CAClD,EACA,CAACa,QAAQ,IAAI,CAACV,IAAI,iBACjBF,cAAA,CAACkC,qBAAa,EAAA;AAACd,UAAAA,SAAS,EAAC,OAAO;AAACf,UAAAA,KAAK,EAAEA,KAAM;AAAC8B,UAAAA,WAAW,EAAEtC;AAAW,SAAA,CACxE;AAAA,OACH,CACD;AACDuC,MAAAA,YAAY,eACVX,eAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,iFAAiF;AAAAE,QAAAA,QAAA,GAC7FJ,SAAS,EACTA,SAAS,IAAIV,WAAW,iBAAIR,cAAA,CAAA,MAAA,EAAA;AAAMoB,UAAAA,SAAS,EAAC;SAAO,CAAG,EACtDZ,WAAW;AAAA,OACT,CACN;AACD6B,MAAAA,aAAa,EACX,CAACnC,IAAI,KACJG,KAAK,CAACiC,MAAM,GAAG,CAAC,gBACftC,cAAA,CAACuC,eAAO,EAAA;AACN1C,QAAAA,UAAU,EAAEA,UAAW;AACvBQ,QAAAA,KAAK,EAAEA,KAAM;QACbe,SAAS,EAAEC,SAAI,CAAC,6BAA6B;OAAE,CAC/C,gBAEFrB,cAAA,CAAA,KAAA,EAAA;AAAKoB,QAAAA,SAAS,EAAC;AAA6B,OAAA,CAC7C,CACF;MACDoB,MAAM,EAAE,CAACxB,QAAQ,GAAGyB,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;KAAW;AAE5D,GAAK,CAAC;AAEV;;;;"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -84,11 +84,13 @@ const FlowNavigation = ({
           className: "m-x-1"
         }), closeButton]
       }),
-      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
+      bottomContent: !done && (steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
         activeStep: activeStep,
         steps: steps,
         className: clsx('np-flow-navigation__stepper')
-      }) : null,
+      }) : /*#__PURE__*/jsx("div", {
+        className: "np-flow-navigation__stepper"
+      })),
       layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
     })
   });

package/build/flowNavigation/FlowNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : null\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done &&\n          (steps.length > 0 ? (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          ) : (\n            <div className=\"np-flow-navigation__stepper\" />\n          ))\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","length","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/i18n/en.json

@@ -20,6 +20,7 @@
   "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+  "neptune.Field.characterCount": "{current} of {max} characters used",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/build/i18n/en.json.js

@@ -24,6 +24,7 @@ var en = {
 	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+	"neptune.Field.characterCount": "{current} of {max} characters used",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
 	"neptune.Label.optional": "(Optional)",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -20,6 +20,7 @@ var en = {
 	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
+	"neptune.Field.characterCount": "{current} of {max} characters used",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
 	"neptune.Label.optional": "(Optional)",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/inputs/TextArea.js

@@ -8,12 +8,17 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   className,
+  maxLength,
   ...restProps
 }, reference) {
   const inputAttributes = contexts.useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+  contexts.useTextareaCharacterCount(currentLength, maxLength);
   return /*#__PURE__*/jsxRuntime.jsx("textarea", {
     ref: reference,
     className: clsx.clsx(className, _common.inputClassNameBase(), 'np-text-area'),
+    maxLength: maxLength,
     ...inputAttributes,
     ...restProps
   });

package/build/inputs/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAcaA,QAAQ,gBAAGC,gBAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;AAE5C,EAAA,oBACEC,cAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAEQ,0BAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GAC7DL,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextArea.js","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useTextareaCharacterCount, useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, maxLength, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const value = restProps.value ?? restProps.defaultValue ?? '';\n  const currentLength = typeof value === 'string' ? value.length : String(value).length;\n\n  useTextareaCharacterCount(currentLength, maxLength);\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      maxLength={maxLength}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","maxLength","restProps","reference","inputAttributes","useInputAttributes","value","defaultValue","currentLength","length","String","useTextareaCharacterCount","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAcaA,QAAQ,gBAAGC,gBAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAiB,EACrDC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;EAC5C,MAAMC,KAAK,GAAGJ,SAAS,CAACI,KAAK,IAAIJ,SAAS,CAACK,YAAY,IAAI,EAAE;AAC7D,EAAA,MAAMC,aAAa,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACG,MAAM,GAAGC,MAAM,CAACJ,KAAK,CAAC,CAACG,MAAM;AAErFE,EAAAA,kCAAyB,CAACH,aAAa,EAAEP,SAAS,CAAC;AAEnD,EAAA,oBACEW,cAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEV,SAAU;IACfH,SAAS,EAAEc,SAAI,CAACd,SAAS,EAAEe,0BAAkB,EAAE,EAAE,cAAc,CAAE;AACjEd,IAAAA,SAAS,EAAEA,SAAU;AAAA,IAAA,GACjBG,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}