@transferwise/components 46.119.5 → 46.120.0

package/build/field/Field.js

@@ -2,30 +2,12 @@
 
 var clsx = require('clsx');
 var React = require('react');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
 var sentiment = require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
 require('@transferwise/icons');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var InlineAlert = require('../inlineAlert/InlineAlert.js');
+var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
 var contexts = require('../inputs/contexts.js');
 var Label = require('../label/Label.js');
 
@@ -35,6 +17,7 @@ const Field = ({
   required = true,
   message: propMessage,
   messageIconLabel,
+  messageLoading,
   hint,
   description = hint,
   sentiment: propType = sentiment.Sentiment.NEUTRAL,
@@ -51,6 +34,7 @@ const Field = ({
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
   const messageId = React.useId();
   const descriptionId = React.useId();
+
   /**
    * form control can have multiple messages to describe it,
    * e.g the description underneath the label and inline alert
@@ -98,10 +82,13 @@ const Field = ({
                 className: "np-field-control",
                 children: children
               })]
-            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert.default, {
-              type: sentiment$1,
+            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+              sentiment: sentiment$1,
               id: messageId,
-              iconLabel: messageIconLabel,
+              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 InlineAlert from '../inlineAlert/InlineAlert';\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  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\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  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                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","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","InlineAlert","type","iconLabel"],"mappings":"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"}
+{"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  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   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\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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"}

package/build/field/Field.mjs

@@ -1,29 +1,11 @@
 import { clsx } from 'clsx';
 import { useRef, useId } from 'react';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
 import { Sentiment } from '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import InlineAlert from '../inlineAlert/InlineAlert.mjs';
+import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
 import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
 import { Label as LabelNamespace } from '../label/Label.mjs';
 
@@ -33,6 +15,7 @@ const Field = ({
   required = true,
   message: propMessage,
   messageIconLabel,
+  messageLoading,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -49,6 +32,7 @@ const Field = ({
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
   const messageId = useId();
   const descriptionId = useId();
+
   /**
    * form control can have multiple messages to describe it,
    * e.g the description underneath the label and inline alert
@@ -96,10 +80,13 @@ const Field = ({
                 className: "np-field-control",
                 children: children
               })]
-            }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
-              type: sentiment,
+            }) : children, message && /*#__PURE__*/jsx(InlinePrompt, {
+              sentiment: sentiment,
               id: messageId,
-              iconLabel: messageIconLabel,
+              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 InlineAlert from '../inlineAlert/InlineAlert';\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  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\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  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                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","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","InlineAlert","type","iconLabel"],"mappings":"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"}
+{"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  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   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\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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"}

package/build/flowNavigation/FlowNavigation.js

@@ -4,25 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
 var reactIntl = require('react-intl');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
 var breakpoint = require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
 var layouts = require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var FlowHeader = require('../common/flowHeader/FlowHeader.js');
 var Logo = require('../logo/Logo.js');

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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\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","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\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","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.messages.js","sources":["../../src/flowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"FlowNavigation.messages.js","sources":["../../src/flowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEJ;AACF,CAAC,CAAC;;;;"}

package/build/flowNavigation/FlowNavigation.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.messages.mjs","sources":["../../src/flowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"FlowNavigation.messages.mjs","sources":["../../src/flowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEJ;AACF,CAAC,CAAC;;;;"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -1,24 +1,7 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
 import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
 import { Layout } from '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
 import Logo from '../logo/Logo.mjs';

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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\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","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  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\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            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\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","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport List from '../../list';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
+{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport List from '../../list';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport List from '../../list';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
+{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport List from '../../list';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/header/Header.js

@@ -3,25 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
 require('@transferwise/icons');
 var React = require('react');
 require('react-intl');
@@ -34,6 +16,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+/**
+ * Renders a header action which can be either a button or a link.
+ *
+ * @param {Object} props - The properties object.
+ * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
+ * @returns {JSX.Element} The rendered header action component.
+ */
 const HeaderAction = /*#__PURE__*/React__default.default.forwardRef(({
   action
 }, ref) => {
@@ -48,6 +37,7 @@ const HeaderAction = /*#__PURE__*/React__default.default.forwardRef(({
   });
 });
 HeaderAction.displayName = 'HeaderAction';
+
 /**
  * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
  * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.

package/build/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/header/Header.mjs

@@ -1,23 +1,5 @@
 import { clsx } from 'clsx';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
 import '@transferwise/icons';
 import React__default, { useRef, useEffect } from 'react';
 import 'react-intl';
@@ -26,6 +8,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import Link from '../link/Link.mjs';
 import Title from '../title/Title.mjs';
 
+/**
+ * Renders a header action which can be either a button or a link.
+ *
+ * @param {Object} props - The properties object.
+ * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
+ * @returns {JSX.Element} The rendered header action component.
+ */
 const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
   action
 }, ref) => {
@@ -40,6 +29,7 @@ const HeaderAction = /*#__PURE__*/React__default.forwardRef(({
   });
 });
 HeaderAction.displayName = 'HeaderAction';
+
 /**
  * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
  * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.