@transferwise/components 46.119.5 → 46.120.0

package/build/processIndicator/ProcessIndicator.js

@@ -4,25 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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');
 var status = 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');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
@@ -49,6 +31,7 @@ class ProcessIndicator extends React.Component {
       size: props.size
     };
   }
+
   /**
    * Create interval for animation duration (1500ms)
    * Update state only at the end of every interval
@@ -83,6 +66,7 @@ class ProcessIndicator extends React.Component {
       }
     }, ANIMATION_DURATION_IN_MS);
   }
+
   /**
    * Only trigger render if comopnent's state got
    * updated from interval callback
@@ -92,6 +76,7 @@ class ProcessIndicator extends React.Component {
     const isSameSize = nextProps.size === nextState.size;
     return isSameStatus && isSameSize;
   }
+
   // Clear interval before destroying component
   componentWillUnmount() {
     window.clearInterval(this.interval);

package/build/processIndicator/ProcessIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
+{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE;AAAG,CAAC;AAEjD,MAAMC,wBAAwB,GAAG,IAAI;AAetB,MAAMC,gBAAgB,SAASC,eAAS,CAGrD;AAIA,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,MAAM,EAAE,YAAY;AACpBC,IAAAA,IAAI,EAAE;GACP;AAEDC,EAAAA,QAAQ,GAAG,CAAC;AACZC,EAAAA,OAAO,GAAG,CAAC;EAEXC,WAAWA,CAACC,KAAgC,EAAE;IAC5C,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACXN,MAAM,EAAEK,KAAK,CAACL,MAAM;MACpBC,IAAI,EAAEI,KAAK,CAACJ;KACb;AACH,EAAA;;AAEA;AACF;AACA;AACA;AACA;AACEM,EAAAA,iBAAiBA,GAAG;AAClB,IAAA,IAAI,CAACL,QAAQ,GAAGM,MAAM,CAACC,WAAW,CAAC,MAAM;MACvC,MAAM;AAAET,QAAAA,MAAM,EAAEU,YAAY;AAAET,QAAAA,IAAI,EAAEU,UAAU;AAAEC,QAAAA;OAAsB,GAAG,IAAI,CAACP,KAAK;MACnF,MAAM;AAAEL,QAAAA,MAAM,EAAEa,aAAa;AAAEZ,QAAAA,IAAI,EAAEa;OAAa,GAAG,IAAI,CAACR,KAAK;MAE/D,IAAIO,aAAa,KAAKH,YAAY,EAAE;QAClC,IAAI,CAACK,QAAQ,CAAC;AAAEf,UAAAA,MAAM,EAAEU;AAAa,SAAC,EAAE,MAAM;AAC5C,UAAA,IAAIE,oBAAoB,EAAE;AACxB,YAAA,IAAI,CAACT,OAAO,GAAGK,MAAM,CAACQ,UAAU,CAAC,MAAM;cACrCJ,oBAAoB,CAACF,YAAY,CAAC;YACpC,CAAC,EAAEd,wBAAwB,CAAC;AAC9B,UAAA;AACF,QAAA,CAAC,CAAC;AACJ,MAAA;MAEA,IAAIkB,WAAW,KAAKH,UAAU,EAAE;QAC9B,IAAI,CAACI,QAAQ,CAAC;AAAEd,UAAAA,IAAI,EAAEU;AAAW,SAAC,CAAC;AACrC,MAAA;IACF,CAAC,EAAEf,wBAAwB,CAAC;AAC9B,EAAA;;AAEA;AACF;AACA;AACA;AACEqB,EAAAA,qBAAqBA,CAACC,SAAoC,EAAEC,SAAgC,EAAE;IAC5F,MAAMC,YAAY,GAAGF,SAAS,CAAClB,MAAM,KAAKmB,SAAS,CAACnB,MAAM;IAC1D,MAAMqB,UAAU,GAAGH,SAAS,CAACjB,IAAI,KAAKkB,SAAS,CAAClB,IAAI;IAEpD,OAAOmB,YAAY,IAAIC,UAAU;AACnC,EAAA;;AAEA;AACAC,EAAAA,oBAAoBA,GAAG;AACrBd,IAAAA,MAAM,CAACe,aAAa,CAAC,IAAI,CAACrB,QAAQ,CAAC;AACnCM,IAAAA,MAAM,CAACgB,YAAY,CAAC,IAAI,CAACrB,OAAO,CAAC;AACnC,EAAA;AAEAsB,EAAAA,MAAMA,GAAG;IACP,MAAM;MAAEC,SAAS;AAAE,MAAA,aAAa,EAAEC;KAAY,GAAG,IAAI,CAACtB,KAAK;IAC3D,MAAM;MAAEJ,IAAI;AAAED,cAAAA;KAAQ,GAAG,IAAI,CAACM,KAAK;IACnC,MAAMsB,OAAO,GAAGC,SAAI,CAAC,mBAAmB5B,IAAI,CAAA,CAAE,EAAEyB,SAAS,EAAE;AACzD,MAAA,CAAC,gBAAgB,GAAG1B,QAAM,KAAK8B,aAAM,CAACC,MAAM;AAC5C,MAAA,CAAC,iBAAiB,GAAG/B,QAAM,KAAK8B,aAAM,CAACE,MAAM;AAC7C,MAAA,CAAC,CAAA,eAAA,CAAiB,GAAGhC,QAAM,KAAK8B,aAAM,CAACG;AACzC,KAAC,CAAC;AAEF,IAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAEE,OAAQ;AAAC,MAAA,aAAA,EAAaD,UAAW;AAAAQ,MAAAA,QAAA,gBAChDD,eAAA,CAAA,MAAA,EAAA;AAAMR,QAAAA,SAAS,EAAC,wBAAwB;AAAAS,QAAAA,QAAA,gBACtCC,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;SAA2B,CAAC,eAC5CU,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;AAAuB,SAAE,CAAC;OACtC,CAAC,eACPU,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,KAAK,EAAC,4BAA4B;AAAAF,QAAAA,QAAA,eACrCC,cAAA,CAAA,QAAA,EAAA;AAAQV,UAAAA,SAAS,EAAC,gBAAgB;AAACY,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,CAAC,EAAEjD,MAAM,CAACU,IAAI,CAAE;AAACwC,UAAAA,WAAW,EAAC;SAAO;AAAC,OACvF,CAAC;AAAA,KACF,CAAC;AAEX,EAAA;AACF;;;;"}

package/build/processIndicator/ProcessIndicator.mjs

@@ -1,24 +1,6 @@
 import { clsx } from 'clsx';
 import { Component } 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 { Status } from '../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-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
@@ -45,6 +27,7 @@ class ProcessIndicator extends Component {
       size: props.size
     };
   }
+
   /**
    * Create interval for animation duration (1500ms)
    * Update state only at the end of every interval
@@ -79,6 +62,7 @@ class ProcessIndicator extends Component {
       }
     }, ANIMATION_DURATION_IN_MS);
   }
+
   /**
    * Only trigger render if comopnent's state got
    * updated from interval callback
@@ -88,6 +72,7 @@ class ProcessIndicator extends Component {
     const isSameSize = nextProps.size === nextState.size;
     return isSameStatus && isSameSize;
   }
+
   // Clear interval before destroying component
   componentWillUnmount() {
     window.clearInterval(this.interval);

package/build/processIndicator/ProcessIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
+{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  status?: ProcessIndicatorStatus;\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}

package/build/progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n  className?: string;\n  id: string;\n  progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n  return (\n    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n      {Math.floor((progress.value / progress.max) * 100)}%\n    </progress>\n  );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":";;;;;;;AAQA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA;AAAQ,CAAiB,KAAI;AAC9D,EAAA,oBACEC,eAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,SAAI,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GAC9EC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD;AAAA,GAAU,CAAC;AAEf;;;;"}
+{"version":3,"file":"Progress.js","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n  className?: string;\n  id: string;\n  progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n  return (\n    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n      {Math.floor((progress.value / progress.max) * 100)}%\n    </progress>\n  );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":";;;;;;;AAQA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA;AAAwB,CAAC,KAAK;AAC/D,EAAA,oBACEC,eAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,SAAI,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GAC9EC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD;AAAA,GAAU,CAAC;AAEf;;;;"}

package/build/progress/Progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.mjs","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n  className?: string;\n  id: string;\n  progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n  return (\n    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n      {Math.floor((progress.value / progress.max) * 100)}%\n    </progress>\n  );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":";;;AAQA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA;AAAQ,CAAiB,KAAI;AAC9D,EAAA,oBACEC,IAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,IAAI,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GAC9EC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD;AAAA,GAAU,CAAC;AAEf;;;;"}
+{"version":3,"file":"Progress.mjs","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n  className?: string;\n  id: string;\n  progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n  return (\n    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n      {Math.floor((progress.value / progress.max) * 100)}%\n    </progress>\n  );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":";;;AAQA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA;AAAwB,CAAC,KAAK;AAC/D,EAAA,oBACEC,IAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,IAAI,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GAC9EC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD;AAAA,GAAU,CAAC;AAEf;;;;"}

package/build/progressBar/ProgressBar.js

@@ -4,25 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
 var Body = require('../body/Body.js');
-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');
 require('react');
 require('react-intl');

package/build/progressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n  className?: string;\n  description?: React.ReactNode;\n  id: string;\n  title: React.ReactNode;\n  progress: { value: number; max: number };\n  textEnd: React.ReactNode;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  return (\n    <div className={clsx('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title type={Typography.TITLE_BODY} className=\"m-b-1 text-primary\">\n          {title}\n        </Title>\n        {description && <Body>{description}</Body>}\n      </label>\n      <Progress id={id} progress={progress} />\n      <Body\n        as=\"p\"\n        type={Typography.BODY_DEFAULT_BOLD}\n        className=\"d-flex justify-content-end text-primary m-b-0\"\n      >\n        {textEnd}\n      </Body>\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAO,CACU,KAAI;AACrB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAEO,SAAI,CAAC,iBAAiB,EAAEP,SAAS,CAAE;AAAAQ,IAAAA,QAAA,gBACjDF,eAAA,CAAA,OAAA,EAAA;AAAON,MAAAA,SAAS,EAAC,8BAA8B;AAACS,MAAAA,OAAO,EAAEP,EAAG;MAAAM,QAAA,EAAA,cAC1DE,cAAA,CAACC,aAAK,EAAA;QAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACd,QAAAA,SAAS,EAAC,oBAAoB;AAAAQ,QAAAA,QAAA,EAC/DL;AAAK,OACD,CACP,EAACF,WAAW,iBAAIS,cAAA,CAACK,YAAI,EAAA;AAAAP,QAAAA,QAAA,EAAEP;AAAW,OAAO,CAAC;AAAA,KACrC,CACP,eAAAS,cAAA,CAACM,gBAAQ,EAAA;AAACd,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA;AAAS,KAAA,CACrC,eAAAM,cAAA,CAACK,YAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,qBAAU,CAACK,iBAAkB;AACnClB,MAAAA,SAAS,EAAC,+CAA+C;AAAAQ,MAAAA,QAAA,EAExDH;AAAO,KACJ,CACR;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n  className?: string;\n  description?: React.ReactNode;\n  id: string;\n  title: React.ReactNode;\n  progress: { value: number; max: number };\n  textEnd: React.ReactNode;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  return (\n    <div className={clsx('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title type={Typography.TITLE_BODY} className=\"m-b-1 text-primary\">\n          {title}\n        </Title>\n        {description && <Body>{description}</Body>}\n      </label>\n      <Progress id={id} progress={progress} />\n      <Body\n        as=\"p\"\n        type={Typography.BODY_DEFAULT_BOLD}\n        className=\"d-flex justify-content-end text-primary m-b-0\"\n      >\n        {textEnd}\n      </Body>\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AACgB,CAAC,KAAK;AACtB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAEO,SAAI,CAAC,iBAAiB,EAAEP,SAAS,CAAE;AAAAQ,IAAAA,QAAA,gBACjDF,eAAA,CAAA,OAAA,EAAA;AAAON,MAAAA,SAAS,EAAC,8BAA8B;AAACS,MAAAA,OAAO,EAAEP,EAAG;MAAAM,QAAA,EAAA,cAC1DE,cAAA,CAACC,aAAK,EAAA;QAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACd,QAAAA,SAAS,EAAC,oBAAoB;AAAAQ,QAAAA,QAAA,EAC/DL;AAAK,OACD,CAAC,EACPF,WAAW,iBAAIS,cAAA,CAACK,YAAI,EAAA;AAAAP,QAAAA,QAAA,EAAEP;AAAW,OAAO,CAAC;AAAA,KACrC,CAAC,eACRS,cAAA,CAACM,gBAAQ,EAAA;AAACd,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA;AAAS,KAAE,CAAC,eACxCM,cAAA,CAACK,YAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,qBAAU,CAACK,iBAAkB;AACnClB,MAAAA,SAAS,EAAC,+CAA+C;AAAAQ,MAAAA,QAAA,EAExDH;AAAO,KACJ,CAAC;AAAA,GACJ,CAAC;AAEV;;;;"}

package/build/progressBar/ProgressBar.mjs

@@ -1,24 +1,6 @@
 import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
-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';
 import 'react-intl';

package/build/progressBar/ProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n  className?: string;\n  description?: React.ReactNode;\n  id: string;\n  title: React.ReactNode;\n  progress: { value: number; max: number };\n  textEnd: React.ReactNode;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  return (\n    <div className={clsx('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title type={Typography.TITLE_BODY} className=\"m-b-1 text-primary\">\n          {title}\n        </Title>\n        {description && <Body>{description}</Body>}\n      </label>\n      <Progress id={id} progress={progress} />\n      <Body\n        as=\"p\"\n        type={Typography.BODY_DEFAULT_BOLD}\n        className=\"d-flex justify-content-end text-primary m-b-0\"\n      >\n        {textEnd}\n      </Body>\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AAAO,CACU,KAAI;AACrB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAEP,SAAS,CAAE;AAAAQ,IAAAA,QAAA,gBACjDF,IAAA,CAAA,OAAA,EAAA;AAAON,MAAAA,SAAS,EAAC,8BAA8B;AAACS,MAAAA,OAAO,EAAEP,EAAG;MAAAM,QAAA,EAAA,cAC1DE,GAAA,CAACC,KAAK,EAAA;QAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACd,QAAAA,SAAS,EAAC,oBAAoB;AAAAQ,QAAAA,QAAA,EAC/DL;AAAK,OACD,CACP,EAACF,WAAW,iBAAIS,GAAA,CAACK,IAAI,EAAA;AAAAP,QAAAA,QAAA,EAAEP;AAAW,OAAO,CAAC;AAAA,KACrC,CACP,eAAAS,GAAA,CAACM,QAAQ,EAAA;AAACd,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA;AAAS,KAAA,CACrC,eAAAM,GAAA,CAACK,IAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,UAAU,CAACK,iBAAkB;AACnClB,MAAAA,SAAS,EAAC,+CAA+C;AAAAQ,MAAAA,QAAA,EAExDH;AAAO,KACJ,CACR;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"ProgressBar.mjs","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n  className?: string;\n  description?: React.ReactNode;\n  id: string;\n  title: React.ReactNode;\n  progress: { value: number; max: number };\n  textEnd: React.ReactNode;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  return (\n    <div className={clsx('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title type={Typography.TITLE_BODY} className=\"m-b-1 text-primary\">\n          {title}\n        </Title>\n        {description && <Body>{description}</Body>}\n      </label>\n      <Progress id={id} progress={progress} />\n      <Body\n        as=\"p\"\n        type={Typography.BODY_DEFAULT_BOLD}\n        className=\"d-flex justify-content-end text-primary m-b-0\"\n      >\n        {textEnd}\n      </Body>\n    </div>\n  );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AACgB,CAAC,KAAK;AACtB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKN,IAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAEP,SAAS,CAAE;AAAAQ,IAAAA,QAAA,gBACjDF,IAAA,CAAA,OAAA,EAAA;AAAON,MAAAA,SAAS,EAAC,8BAA8B;AAACS,MAAAA,OAAO,EAAEP,EAAG;MAAAM,QAAA,EAAA,cAC1DE,GAAA,CAACC,KAAK,EAAA;QAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACd,QAAAA,SAAS,EAAC,oBAAoB;AAAAQ,QAAAA,QAAA,EAC/DL;AAAK,OACD,CAAC,EACPF,WAAW,iBAAIS,GAAA,CAACK,IAAI,EAAA;AAAAP,QAAAA,QAAA,EAAEP;AAAW,OAAO,CAAC;AAAA,KACrC,CAAC,eACRS,GAAA,CAACM,QAAQ,EAAA;AAACd,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA;AAAS,KAAE,CAAC,eACxCM,GAAA,CAACK,IAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,UAAU,CAACK,iBAAkB;AACnClB,MAAAA,SAAS,EAAC,+CAA+C;AAAAQ,MAAAA,QAAA,EAExDH;AAAO,KACJ,CAAC;AAAA,GACJ,CAAC;AAEV;;;;"}

package/build/promoCard/PromoCard.js

@@ -6,25 +6,7 @@ var icons = require('@transferwise/icons');
 var clsx = require('clsx');
 var React = require('react');
 var Body = require('../body/Body.js');
-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('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -39,6 +21,47 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+/**
+ * PromoCard component.
+ *
+ * PromoCard is a marketing style component that is used to group marketing
+ * product related information (such as choosing Card types). It can be used to
+ * display information in a structured way, and can be customized with various
+ * props to suit different use cases.
+ *
+ * @component
+ * @param {string} className - Additional class name for the PromoCard.
+ * @param {string} description - Description text for the PromoCard.
+ * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.
+ * @param {string} download - Download file name for links.
+ * @param {string} href - URL for links.
+ * @param {string} hrefLang - Language code for linked URL.
+ * @param {string} id - ID of the PromoCard.
+ * @param {string} imageAlt - Alt text for the image.
+ * @param {string} imageSource - Source URL of the image.
+ * @param {string} indicatorLabel - Label for the indicator icon.
+ * @param {boolean} isChecked - Checked state for checkboxes and radios.
+ * @param {boolean} isDisabled - Whether the PromoCard is disabled.
+ * @param {Function} onClick - Click event handler for the PromoCard.
+ * @param {string} rel - Relationship between the URL and the current page.
+ * @param {number} tabIndex - Tab index for keyboard navigation.
+ * @param {string} target - Target window for links.
+ * @param {string} testId - ID used for testing.
+ * @param {string} title - Title text of the PromoCard.
+ * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).
+ * @param {string} value - Value for checkboxes and radios.
+ * @returns {React.JSX.Element} The rendered PromoCard component.
+ * @example
+ * <PromoCard
+ *   title="Example PromoCard"
+ *   description="This is an example PromoCard with a link variation."
+ *   href="https://example.com"
+ *   target="_blank"
+ *   imageSource="https://example.com/image.png"
+ *   imageAlt="Example Image"
+ *   indicatorLabel="Learn More"
+ * />
+ */
 const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
   className,
   description,
@@ -88,9 +111,11 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
   };
   const fallbackId = React.useId();
   const componentId = id || fallbackId;
+
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
   // `icon` to `undefined`.
+
   // Create a function to get icon type
   const getIconType = () => {
     if (indicatorIcon) {
@@ -104,6 +129,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
     }
     return undefined;
   };
+
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = clsx.clsx({
@@ -112,6 +138,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
     'np-Card--link': href && !type,
     'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
   }, className);
+
   // Object with common props that will be passed to the `Card` components
   const commonProps = {
     className: commonClasses,
@@ -123,6 +150,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
     'data-testid': testId,
     isSmall
   };
+
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
   const anchorProps = href && !isDisabled ? {
@@ -134,6 +162,7 @@ const PromoCard$1 = /*#__PURE__*/React.forwardRef(({
     ref: anchorRef,
     id: anchorId
   } : {};
+
   // Object of all Checked props that will be passed to the root `Card` component
   const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
     ...commonProps,

package/build/promoCard/PromoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n  | ''\n  | 'alternate'\n  | 'author'\n  | 'bookmark'\n  | 'external'\n  | 'help'\n  | 'license'\n  | 'next'\n  | 'nofollow'\n  | 'noreferrer'\n  | 'noopener'\n  | 'prev'\n  | 'search'\n  | 'tag';\n\nexport interface PromoCardCommonProps {\n  /** Optional prop to specify classNames onto the PromoCard */\n  className?: string;\n\n  /** Optional prop to specify the ID of the PromoCard */\n  id?: string;\n\n  /** Required prop to specify the descriptive text of the PromoCard  */\n  description: string;\n\n  /**\n   * Optional prop to specify the heading level of the PromoCard\n   *\n   * @default 'h3'\n   */\n  headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n  /** Optional prop to specify text for the indicator label of the PromoCard */\n  indicatorLabel?: string;\n\n  /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n  indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n  /** Optional prop to specify an image alt text  */\n  imageAlt?: string;\n\n  /** Optional prop to specify an image class  */\n  imageClass?: string;\n\n  /** Optional prop to specify an image source url  */\n  imageSource?: string;\n\n  /** Specify whether the PromoCard is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify an onClick event handler */\n  onClick?: () => void;\n\n  /** Specify an onKeyDown event handler */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Required prop to specify the title text of the PromoCard  */\n  title: string;\n\n  /** Set to false to use body font style for the title   */\n  useDisplayFont?: boolean;\n\n  ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n  /**\n   * Optional prop to prompts a user to save the linked URL instead of\n   * navigating to it\n   */\n  download?: string;\n\n  /** Optionally specify an href for your PromoCard to contain an <a> element */\n  href?: string;\n\n  /** Optionally specify the language of the linked URL */\n  hrefLang?: string;\n\n  /** Optional property that can be pass a ref for the anchor. */\n  anchorRef?: React.Ref<HTMLAnchorElement>;\n\n  /**\n   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n   */\n  anchorId?: string;\n\n  /**\n   * Relationship between the PromoCard href URL and the current page. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n   */\n  rel?: RelatedTypes;\n\n  /** Optional prop to to display where the linked URL will show */\n  target?: React.HTMLAttributeAnchorTarget;\n\n  /** Only applies to role=\"radio\" or \"checkbox\" */\n  defaultChecked?: never;\n  isChecked?: never;\n  tabIndex?: never;\n  type?: never;\n  ref?: ReferenceType;\n  value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n  /** Specify the initial checked attribute of the PromoCard */\n  defaultChecked?: boolean;\n\n  /** Specify whether the PromoCard is checked, or not */\n  isChecked?: boolean;\n\n  /** Optional prop to specify the tabIndex of the PromoCard */\n  tabIndex?: number;\n\n  /** Optional property to provide component Ref */\n  ref?: ReferenceType;\n\n  /** Optional prop to specify the input type of the PromoCard  */\n  type?: 'checkbox' | 'radio';\n\n  /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n  value?: string;\n\n  /** Only applies to <a />s */\n  download?: never;\n  href?: never;\n  anchorRef?: never;\n  anchorId?: never;\n  hrefLang?: never;\n  rel?: never;\n  target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n  props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n *   title=\"Example PromoCard\"\n *   description=\"This is an example PromoCard with a link variation.\"\n *   href=\"https://example.com\"\n *   target=\"_blank\"\n *   imageSource=\"https://example.com/image.png\"\n *   imageAlt=\"Example Image\"\n *   indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n  (\n    {\n      className,\n      description,\n      defaultChecked,\n      download,\n      href,\n      hrefLang,\n      id,\n      headingLevel = 'h3',\n      imageAlt,\n      imageClass,\n      imageSource,\n      indicatorLabel,\n      indicatorIcon,\n      isChecked,\n      isDisabled,\n      onClick,\n      onKeyDown,\n      rel,\n      tabIndex,\n      target,\n      testId,\n      title,\n      type,\n      value,\n      isSmall,\n      useDisplayFont = true,\n      anchorRef,\n      anchorId,\n      ...props\n    },\n    ref: ReferenceType,\n  ) => {\n    // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n    // or the value of `isChecked` if it is truthy, or `false` if neither\n    // is truthy.\n    const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n    const [checked, setChecked] = useState(\n      type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n    );\n\n    const handleClick = () => {\n      if (type === 'radio') {\n        onChange(value || ''); // Update the context state for radio\n      } else if (type === 'checkbox') {\n        setChecked(!checked); // Update local state for checkbox\n      }\n    };\n\n    const fallbackId = useId();\n    const componentId = id || fallbackId;\n\n    // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n    // `'download'` if `download` is truthy. If neither condition is true, set\n    // `icon` to `undefined`.\n\n    // Create a function to get icon type\n    const getIconType = () => {\n      if (indicatorIcon) {\n        return indicatorIcon;\n      }\n\n      if (download) {\n        return 'download';\n      }\n\n      if (href && !type) {\n        return 'arrow';\n      }\n\n      return undefined;\n    };\n\n    const CardTitle = useDisplayFont ? Display : Title;\n\n    // Define all class names string based on the values of the `href`, `type`,\n    // `checked`, and `className` props.\n    const commonClasses = clsx(\n      {\n        'np-Card--promoCard': true,\n        'np-Card--checked': !href && type,\n        'np-Card--link': href && !type,\n        'is-checked':\n          type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n      },\n      className,\n    );\n\n    // Object with common props that will be passed to the `Card` components\n    const commonProps = {\n      className: commonClasses,\n      id: componentId,\n      isDisabled: isDisabled || contextIsDisabled,\n      onClick,\n      onKeyDown,\n      ref,\n      'data-testid': testId,\n      isSmall,\n    };\n\n    // Object with Anchor props that will be passed to the `a` element. These\n    // won't be refurned if set to `isDisabled`\n    const anchorProps =\n      href && !isDisabled\n        ? {\n            download,\n            href: href || undefined,\n            hrefLang,\n            rel,\n            target,\n            ref: anchorRef,\n            id: anchorId,\n          }\n        : {};\n\n    // Object of all Checked props that will be passed to the root `Card` component\n    const checkedProps =\n      (type === 'checkbox' || type === 'radio') && !href\n        ? {\n            ...commonProps,\n            'aria-checked':\n              type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n            'aria-describedby': `${componentId}-title`,\n            'aria-disabled': isDisabled,\n            'data-value': value ?? undefined,\n            role: type === 'checkbox' || type === 'radio' ? type : undefined,\n            onClick: handleClick,\n            onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleClick();\n              }\n            },\n            ref,\n            tabIndex: 0,\n          }\n        : {};\n\n    const getTitle = () => {\n      const titleContent =\n        href && !type ? (\n          <a className=\"np-Card-titleLink\" {...anchorProps}>\n            {title}\n          </a>\n        ) : (\n          title\n        );\n\n      const titleProps = {\n        id: `${componentId}-title`,\n        as: headingLevel,\n        className: 'np-Card-title',\n      };\n\n      return useDisplayFont ? (\n        <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n          {titleContent}\n        </Display>\n      ) : (\n        <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n          {titleContent}\n        </Title>\n      );\n    };\n\n    useEffect(() => {\n      setChecked(defaultChecked ?? isChecked ?? false);\n    }, [defaultChecked, isChecked]);\n\n    return (\n      <Card {...commonProps} {...checkedProps} {...props}>\n        {(value === state || checked) && (\n          <span className=\"np-Card-check\">\n            <Check size={24} aria-hidden=\"true\" />\n          </span>\n        )}\n\n        {getTitle()}\n\n        <Body className=\"np-Card-description\">{description}</Body>\n\n        {imageSource && (\n          <div className={clsx('np-Card-image', { imageClass })}>\n            <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n          </div>\n        )}\n\n        <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n      </Card>\n    );\n  },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
+{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n  | ''\n  | 'alternate'\n  | 'author'\n  | 'bookmark'\n  | 'external'\n  | 'help'\n  | 'license'\n  | 'next'\n  | 'nofollow'\n  | 'noreferrer'\n  | 'noopener'\n  | 'prev'\n  | 'search'\n  | 'tag';\n\nexport interface PromoCardCommonProps {\n  /** Optional prop to specify classNames onto the PromoCard */\n  className?: string;\n\n  /** Optional prop to specify the ID of the PromoCard */\n  id?: string;\n\n  /** Required prop to specify the descriptive text of the PromoCard  */\n  description: string;\n\n  /**\n   * Optional prop to specify the heading level of the PromoCard\n   *\n   * @default 'h3'\n   */\n  headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n  /** Optional prop to specify text for the indicator label of the PromoCard */\n  indicatorLabel?: string;\n\n  /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n  indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n  /** Optional prop to specify an image alt text  */\n  imageAlt?: string;\n\n  /** Optional prop to specify an image class  */\n  imageClass?: string;\n\n  /** Optional prop to specify an image source url  */\n  imageSource?: string;\n\n  /** Specify whether the PromoCard is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify an onClick event handler */\n  onClick?: () => void;\n\n  /** Specify an onKeyDown event handler */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n\n  /** Required prop to specify the title text of the PromoCard  */\n  title: string;\n\n  /** Set to false to use body font style for the title   */\n  useDisplayFont?: boolean;\n\n  ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n  /**\n   * Optional prop to prompts a user to save the linked URL instead of\n   * navigating to it\n   */\n  download?: string;\n\n  /** Optionally specify an href for your PromoCard to contain an <a> element */\n  href?: string;\n\n  /** Optionally specify the language of the linked URL */\n  hrefLang?: string;\n\n  /** Optional property that can be pass a ref for the anchor. */\n  anchorRef?: React.Ref<HTMLAnchorElement>;\n\n  /**\n   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n   */\n  anchorId?: string;\n\n  /**\n   * Relationship between the PromoCard href URL and the current page. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n   */\n  rel?: RelatedTypes;\n\n  /** Optional prop to to display where the linked URL will show */\n  target?: React.HTMLAttributeAnchorTarget;\n\n  /** Only applies to role=\"radio\" or \"checkbox\" */\n  defaultChecked?: never;\n  isChecked?: never;\n  tabIndex?: never;\n  type?: never;\n  ref?: ReferenceType;\n  value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n  /** Specify the initial checked attribute of the PromoCard */\n  defaultChecked?: boolean;\n\n  /** Specify whether the PromoCard is checked, or not */\n  isChecked?: boolean;\n\n  /** Optional prop to specify the tabIndex of the PromoCard */\n  tabIndex?: number;\n\n  /** Optional property to provide component Ref */\n  ref?: ReferenceType;\n\n  /** Optional prop to specify the input type of the PromoCard  */\n  type?: 'checkbox' | 'radio';\n\n  /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n  value?: string;\n\n  /** Only applies to <a />s */\n  download?: never;\n  href?: never;\n  anchorRef?: never;\n  anchorId?: never;\n  hrefLang?: never;\n  rel?: never;\n  target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n  props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n *   title=\"Example PromoCard\"\n *   description=\"This is an example PromoCard with a link variation.\"\n *   href=\"https://example.com\"\n *   target=\"_blank\"\n *   imageSource=\"https://example.com/image.png\"\n *   imageAlt=\"Example Image\"\n *   indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n  (\n    {\n      className,\n      description,\n      defaultChecked,\n      download,\n      href,\n      hrefLang,\n      id,\n      headingLevel = 'h3',\n      imageAlt,\n      imageClass,\n      imageSource,\n      indicatorLabel,\n      indicatorIcon,\n      isChecked,\n      isDisabled,\n      onClick,\n      onKeyDown,\n      rel,\n      tabIndex,\n      target,\n      testId,\n      title,\n      type,\n      value,\n      isSmall,\n      useDisplayFont = true,\n      anchorRef,\n      anchorId,\n      ...props\n    },\n    ref: ReferenceType,\n  ) => {\n    // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n    // or the value of `isChecked` if it is truthy, or `false` if neither\n    // is truthy.\n    const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n    const [checked, setChecked] = useState(\n      type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n    );\n\n    const handleClick = () => {\n      if (type === 'radio') {\n        onChange(value || ''); // Update the context state for radio\n      } else if (type === 'checkbox') {\n        setChecked(!checked); // Update local state for checkbox\n      }\n    };\n\n    const fallbackId = useId();\n    const componentId = id || fallbackId;\n\n    // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n    // `'download'` if `download` is truthy. If neither condition is true, set\n    // `icon` to `undefined`.\n\n    // Create a function to get icon type\n    const getIconType = () => {\n      if (indicatorIcon) {\n        return indicatorIcon;\n      }\n\n      if (download) {\n        return 'download';\n      }\n\n      if (href && !type) {\n        return 'arrow';\n      }\n\n      return undefined;\n    };\n\n    const CardTitle = useDisplayFont ? Display : Title;\n\n    // Define all class names string based on the values of the `href`, `type`,\n    // `checked`, and `className` props.\n    const commonClasses = clsx(\n      {\n        'np-Card--promoCard': true,\n        'np-Card--checked': !href && type,\n        'np-Card--link': href && !type,\n        'is-checked':\n          type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n      },\n      className,\n    );\n\n    // Object with common props that will be passed to the `Card` components\n    const commonProps = {\n      className: commonClasses,\n      id: componentId,\n      isDisabled: isDisabled || contextIsDisabled,\n      onClick,\n      onKeyDown,\n      ref,\n      'data-testid': testId,\n      isSmall,\n    };\n\n    // Object with Anchor props that will be passed to the `a` element. These\n    // won't be refurned if set to `isDisabled`\n    const anchorProps =\n      href && !isDisabled\n        ? {\n            download,\n            href: href || undefined,\n            hrefLang,\n            rel,\n            target,\n            ref: anchorRef,\n            id: anchorId,\n          }\n        : {};\n\n    // Object of all Checked props that will be passed to the root `Card` component\n    const checkedProps =\n      (type === 'checkbox' || type === 'radio') && !href\n        ? {\n            ...commonProps,\n            'aria-checked':\n              type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n            'aria-describedby': `${componentId}-title`,\n            'aria-disabled': isDisabled,\n            'data-value': value ?? undefined,\n            role: type === 'checkbox' || type === 'radio' ? type : undefined,\n            onClick: handleClick,\n            onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleClick();\n              }\n            },\n            ref,\n            tabIndex: 0,\n          }\n        : {};\n\n    const getTitle = () => {\n      const titleContent =\n        href && !type ? (\n          <a className=\"np-Card-titleLink\" {...anchorProps}>\n            {title}\n          </a>\n        ) : (\n          title\n        );\n\n      const titleProps = {\n        id: `${componentId}-title`,\n        as: headingLevel,\n        className: 'np-Card-title',\n      };\n\n      return useDisplayFont ? (\n        <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n          {titleContent}\n        </Display>\n      ) : (\n        <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n          {titleContent}\n        </Title>\n      );\n    };\n\n    useEffect(() => {\n      setChecked(defaultChecked ?? isChecked ?? false);\n    }, [defaultChecked, isChecked]);\n\n    return (\n      <Card {...commonProps} {...checkedProps} {...props}>\n        {(value === state || checked) && (\n          <span className=\"np-Card-check\">\n            <Check size={24} aria-hidden=\"true\" />\n          </span>\n        )}\n\n        {getTitle()}\n\n        <Body className=\"np-Card-description\">{description}</Body>\n\n        {imageSource && (\n          <div className={clsx('np-Card-image', { imageClass })}>\n            <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n          </div>\n        )}\n\n        <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n      </Card>\n    );\n  },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}

package/build/promoCard/PromoCard.mjs

@@ -2,25 +2,7 @@ import { Check } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import React__default, { forwardRef, useState, useId, useEffect } from 'react';
 import Body from '../body/Body.mjs';
-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 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -31,6 +13,47 @@ import Title from '../title/Title.mjs';
 import { usePromoCardContext } from './PromoCardContext.mjs';
 import PromoCardIndicator from './PromoCardIndicator.mjs';
 
+/**
+ * PromoCard component.
+ *
+ * PromoCard is a marketing style component that is used to group marketing
+ * product related information (such as choosing Card types). It can be used to
+ * display information in a structured way, and can be customized with various
+ * props to suit different use cases.
+ *
+ * @component
+ * @param {string} className - Additional class name for the PromoCard.
+ * @param {string} description - Description text for the PromoCard.
+ * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.
+ * @param {string} download - Download file name for links.
+ * @param {string} href - URL for links.
+ * @param {string} hrefLang - Language code for linked URL.
+ * @param {string} id - ID of the PromoCard.
+ * @param {string} imageAlt - Alt text for the image.
+ * @param {string} imageSource - Source URL of the image.
+ * @param {string} indicatorLabel - Label for the indicator icon.
+ * @param {boolean} isChecked - Checked state for checkboxes and radios.
+ * @param {boolean} isDisabled - Whether the PromoCard is disabled.
+ * @param {Function} onClick - Click event handler for the PromoCard.
+ * @param {string} rel - Relationship between the URL and the current page.
+ * @param {number} tabIndex - Tab index for keyboard navigation.
+ * @param {string} target - Target window for links.
+ * @param {string} testId - ID used for testing.
+ * @param {string} title - Title text of the PromoCard.
+ * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).
+ * @param {string} value - Value for checkboxes and radios.
+ * @returns {React.JSX.Element} The rendered PromoCard component.
+ * @example
+ * <PromoCard
+ *   title="Example PromoCard"
+ *   description="This is an example PromoCard with a link variation."
+ *   href="https://example.com"
+ *   target="_blank"
+ *   imageSource="https://example.com/image.png"
+ *   imageAlt="Example Image"
+ *   indicatorLabel="Learn More"
+ * />
+ */
 const PromoCard = /*#__PURE__*/forwardRef(({
   className,
   description,
@@ -80,9 +103,11 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   };
   const fallbackId = useId();
   const componentId = id || fallbackId;
+
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
   // `icon` to `undefined`.
+
   // Create a function to get icon type
   const getIconType = () => {
     if (indicatorIcon) {
@@ -96,6 +121,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     }
     return undefined;
   };
+
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = clsx({
@@ -104,6 +130,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     'np-Card--link': href && !type,
     'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
   }, className);
+
   // Object with common props that will be passed to the `Card` components
   const commonProps = {
     className: commonClasses,
@@ -115,6 +142,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     'data-testid': testId,
     isSmall
   };
+
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
   const anchorProps = href && !isDisabled ? {
@@ -126,6 +154,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     ref: anchorRef,
     id: anchorId
   } : {};
+
   // Object of all Checked props that will be passed to the root `Card` component
   const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
     ...commonProps,