@transferwise/components 46.44.1 → 46.46.0

package/build/popover/Popover.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var Title = require('../title/Title.js');
+var jsxRuntime = require('react/jsx-runtime');
+var logActionRequired = require('../utilities/logActionRequired.js');
+var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
+var typography = require('../common/propsValues/typography.js');
+var position = require('../common/propsValues/position.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+function resolvePlacement(preferredPlacement) {
+  switch (preferredPlacement) {
+    case 'left-top':
+    case 'right-top':
+      return 'top';
+    case 'bottom-left':
+    case 'bottom-right':
+      return 'bottom';
+    default:
+      return preferredPlacement;
+  }
+}
+function Popover({
+  children,
+  className,
+  content,
+  preferredPlacement = position.Position.RIGHT,
+  title,
+  onClose
+}) {
+  const resolvedPlacement = resolvePlacement(preferredPlacement);
+  React.useEffect(() => {
+    if (resolvedPlacement !== preferredPlacement) {
+      logActionRequired.logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
+    }
+  }, [preferredPlacement, resolvedPlacement]);
+  const anchorReference = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: classNames__default.default('np-popover', className),
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: anchorReference,
+      className: "d-inline-block",
+      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+        onClick: () => {
+          children.props.onClick?.();
+          setOpen(prevOpen => !prevOpen);
+        }
+      }) : children
+    }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel, {
+      open: open,
+      anchorRef: anchorReference,
+      position: resolvedPlacement,
+      arrow: true,
+      className: "np-popover__container",
+      onClose: handleOnClose,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "np-popover__content np-text-default-body",
+        children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
+          type: typography.Typography.TITLE_BODY,
+          className: "m-b-1",
+          children: title
+        }), content]
+      })
+    })]
+  });
+}
+
+module.exports = Popover;
+//# sourceMappingURL=Popover.js.map

package/build/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classnames from 'classnames';\nimport { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  className?: string;\n  content: React.ReactNode;\n  preferredPlacement?: PopoverPreferredPlacement;\n  onClose?: () => void;\n  title?: React.ReactNode;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n}: PopoverProps) {\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={classnames('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","classnames","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY"],"mappings":";;;;;;;;;;;;;;;AAgCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU,CAAA;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK,CAAA;AACd,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ,CAAA;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB,CAAA;AAC7B,GAAA;AACF,CAAA;AAEwB,SAAAC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,iBAAQ,CAACC,KAAK;EACnCC,KAAK;AACLC,EAAAA,OAAAA;AACa,CAAA,EAAA;AACb,EAAA,MAAMC,iBAAiB,GAAGV,gBAAgB,CAACC,kBAAkB,CAAC,CAAA;AAC9DU,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKT,kBAAkB,EAAE;AAC5CW,MAAAA,mCAAiB,CACW,CAAAX,uBAAAA,EAAAA,mBAA0ES,qDAAAA,EAAAA,iBAAiB,WAAW,CACjI,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACT,kBAAkB,EAAES,iBAAiB,CAAC,CAAC,CAAA;AAE3C,EAAA,MAAMG,eAAe,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC,CAAA;AACdP,IAAAA,OAAO,IAAI,CAAA;GACZ,CAAA;AAED,EAAA,oBACEU,eAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,SAAS,EAAEgB,2BAAU,CAAC,YAAY,EAAEhB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBACnDkB,cAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACT,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDoB,oBAAc,CAA2BpB,QAAQ,CAAC,gBAC/CqB,kBAAY,CAACrB,QAAQ,EAAE;QACrBsB,OAAO,EAAEA,MAAK;AACZtB,UAAAA,QAAQ,CAACuB,KAAK,CAACD,OAAO,IAAI,CAAA;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC,CAAA;AAClC,SAAA;OACD,CAAC,GACFxB,QAAAA;AAAQ,KACR,CACN,eAAAkB,cAAA,CAACO,eAAe,EAAA;AACdb,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL3B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAES,aAAc;AAAAf,MAAAA,QAAA,eAEvBgB,eAAA,CAAA,KAAA,EAAA;AAAKf,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EACtDK,CAAAA,KAAK,iBACJa,cAAA,CAACW,KAAK,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC/B,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAClDK,KAAAA;SACI,CACR,EACAH,OAAO,CAAA;OACL,CAAA;AACP,KAAiB,CACnB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/popover/Popover.mjs

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import { useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
+import Title from '../title/Title.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { logActionRequired } from '../utilities/logActionRequired.mjs';
+import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
+import { Typography } from '../common/propsValues/typography.mjs';
+import { Position } from '../common/propsValues/position.mjs';
+
+function resolvePlacement(preferredPlacement) {
+  switch (preferredPlacement) {
+    case 'left-top':
+    case 'right-top':
+      return 'top';
+    case 'bottom-left':
+    case 'bottom-right':
+      return 'bottom';
+    default:
+      return preferredPlacement;
+  }
+}
+function Popover({
+  children,
+  className,
+  content,
+  preferredPlacement = Position.RIGHT,
+  title,
+  onClose
+}) {
+  const resolvedPlacement = resolvePlacement(preferredPlacement);
+  useEffect(() => {
+    if (resolvedPlacement !== preferredPlacement) {
+      logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
+    }
+  }, [preferredPlacement, resolvedPlacement]);
+  const anchorReference = useRef(null);
+  const [open, setOpen] = useState(false);
+  const handleOnClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+  return /*#__PURE__*/jsxs("span", {
+    className: classNames('np-popover', className),
+    children: [/*#__PURE__*/jsx("span", {
+      ref: anchorReference,
+      className: "d-inline-block",
+      children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
+        onClick: () => {
+          children.props.onClick?.();
+          setOpen(prevOpen => !prevOpen);
+        }
+      }) : children
+    }), /*#__PURE__*/jsx(ResponsivePanel, {
+      open: open,
+      anchorRef: anchorReference,
+      position: resolvedPlacement,
+      arrow: true,
+      className: "np-popover__container",
+      onClose: handleOnClose,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "np-popover__content np-text-default-body",
+        children: [title && /*#__PURE__*/jsx(Title, {
+          type: Typography.TITLE_BODY,
+          className: "m-b-1",
+          children: title
+        }), content]
+      })
+    })]
+  });
+}
+
+export { Popover as default };
+//# sourceMappingURL=Popover.mjs.map

package/build/popover/Popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.mjs","sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classnames from 'classnames';\nimport { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';\n\nimport { Position, Typography } from '../common';\nimport ResponsivePanel from '../common/responsivePanel';\nimport Title from '../title';\nimport { logActionRequired } from '../utilities';\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype PopoverPreferredPlacementDeprecated =\n  | `${Position.LEFT_TOP}`\n  | `${Position.RIGHT_TOP}`\n  | `${Position.BOTTOM_RIGHT}`\n  | `${Position.BOTTOM_LEFT}`;\n\nexport type PopoverPreferredPlacement =\n  | `${Position.TOP}`\n  | `${Position.RIGHT}`\n  | `${Position.BOTTOM}`\n  | `${Position.LEFT}`\n  | PopoverPreferredPlacementDeprecated;\n\nexport interface PopoverProps {\n  children?: React.ReactNode;\n  className?: string;\n  content: React.ReactNode;\n  preferredPlacement?: PopoverPreferredPlacement;\n  onClose?: () => void;\n  title?: React.ReactNode;\n}\n\nfunction resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {\n  switch (preferredPlacement) {\n    case 'left-top':\n    case 'right-top':\n      return 'top';\n    case 'bottom-left':\n    case 'bottom-right':\n      return 'bottom';\n    default:\n      return preferredPlacement;\n  }\n}\n\nexport default function Popover({\n  children,\n  className,\n  content,\n  preferredPlacement = Position.RIGHT,\n  title,\n  onClose,\n}: PopoverProps) {\n  const resolvedPlacement = resolvePlacement(preferredPlacement);\n  useEffect(() => {\n    if (resolvedPlacement !== preferredPlacement) {\n      logActionRequired(\n        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,\n      );\n    }\n  }, [preferredPlacement, resolvedPlacement]);\n\n  const anchorReference = useRef(null);\n  const [open, setOpen] = useState(false);\n\n  const handleOnClose = () => {\n    setOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <span className={classnames('np-popover', className)}>\n      <span ref={anchorReference} className=\"d-inline-block\">\n        {isValidElement<{ onClick?: () => void }>(children)\n          ? cloneElement(children, {\n              onClick: () => {\n                children.props.onClick?.();\n                setOpen((prevOpen) => !prevOpen);\n              },\n            })\n          : children}\n      </span>\n      <ResponsivePanel\n        open={open}\n        anchorRef={anchorReference}\n        position={resolvedPlacement}\n        arrow\n        className=\"np-popover__container\"\n        onClose={handleOnClose}\n      >\n        <div className=\"np-popover__content np-text-default-body\">\n          {title && (\n            <Title type={Typography.TITLE_BODY} className=\"m-b-1\">\n              {title}\n            </Title>\n          )}\n          {content}\n        </div>\n      </ResponsivePanel>\n    </span>\n  );\n}\n"],"names":["resolvePlacement","preferredPlacement","Popover","children","className","content","Position","RIGHT","title","onClose","resolvedPlacement","useEffect","logActionRequired","anchorReference","useRef","open","setOpen","useState","handleOnClose","_jsxs","classnames","_jsx","ref","isValidElement","cloneElement","onClick","props","prevOpen","ResponsivePanel","anchorRef","position","arrow","Title","type","Typography","TITLE_BODY"],"mappings":";;;;;;;;;AAgCA,SAASA,gBAAgBA,CAACC,kBAA6C,EAAA;AACrE,EAAA,QAAQA,kBAAkB;AACxB,IAAA,KAAK,UAAU,CAAA;AACf,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,KAAK,CAAA;AACd,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,QAAQ,CAAA;AACjB,IAAA;AACE,MAAA,OAAOA,kBAAkB,CAAA;AAC7B,GAAA;AACF,CAAA;AAEwB,SAAAC,OAAOA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPJ,kBAAkB,GAAGK,QAAQ,CAACC,KAAK;EACnCC,KAAK;AACLC,EAAAA,OAAAA;AACa,CAAA,EAAA;AACb,EAAA,MAAMC,iBAAiB,GAAGV,gBAAgB,CAACC,kBAAkB,CAAC,CAAA;AAC9DU,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,iBAAiB,KAAKT,kBAAkB,EAAE;AAC5CW,MAAAA,iBAAiB,CACW,CAAAX,uBAAAA,EAAAA,mBAA0ES,qDAAAA,EAAAA,iBAAiB,WAAW,CACjI,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACT,kBAAkB,EAAES,iBAAiB,CAAC,CAAC,CAAA;AAE3C,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,IAAI,CAAC,CAAA;EACpC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EAEvC,MAAMC,aAAa,GAAGA,MAAK;IACzBF,OAAO,CAAC,KAAK,CAAC,CAAA;AACdP,IAAAA,OAAO,IAAI,CAAA;GACZ,CAAA;AAED,EAAA,oBACEU,IAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,SAAS,EAAEgB,UAAU,CAAC,YAAY,EAAEhB,SAAS,CAAE;AAAAD,IAAAA,QAAA,gBACnDkB,GAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,GAAG,EAAET,eAAgB;AAACT,MAAAA,SAAS,EAAC,gBAAgB;MAAAD,QAAA,eACnDoB,cAAc,CAA2BpB,QAAQ,CAAC,gBAC/CqB,YAAY,CAACrB,QAAQ,EAAE;QACrBsB,OAAO,EAAEA,MAAK;AACZtB,UAAAA,QAAQ,CAACuB,KAAK,CAACD,OAAO,IAAI,CAAA;AAC1BT,UAAAA,OAAO,CAAEW,QAAQ,IAAK,CAACA,QAAQ,CAAC,CAAA;AAClC,SAAA;OACD,CAAC,GACFxB,QAAAA;AAAQ,KACR,CACN,eAAAkB,GAAA,CAACO,eAAe,EAAA;AACdb,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,MAAAA,QAAQ,EAAEpB,iBAAkB;MAC5BqB,KAAK,EAAA,IAAA;AACL3B,MAAAA,SAAS,EAAC,uBAAuB;AACjCK,MAAAA,OAAO,EAAES,aAAc;AAAAf,MAAAA,QAAA,eAEvBgB,IAAA,CAAA,KAAA,EAAA;AAAKf,QAAAA,SAAS,EAAC,0CAA0C;AAAAD,QAAAA,QAAA,EACtDK,CAAAA,KAAK,iBACJa,GAAA,CAACW,KAAK,EAAA;UAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC/B,UAAAA,SAAS,EAAC,OAAO;AAAAD,UAAAA,QAAA,EAClDK,KAAAA;SACI,CACR,EACAH,OAAO,CAAA;OACL,CAAA;AACP,KAAiB,CACnB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/processIndicator/ProcessIndicator.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var status = require('../common/propsValues/status.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const radius = {
+  xxs: 6,
+  xs: 11,
+  sm: 22,
+  xl: 61
+};
+const ANIMATION_DURATION_IN_MS = 1500;
+class ProcessIndicator extends React.Component {
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm'
+  };
+  interval = 0;
+  timeout = 0;
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size
+    };
+  }
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = window.setInterval(() => {
+      const {
+        status: targetStatus,
+        size: targetSize,
+        onAnimationCompleted
+      } = this.props;
+      const {
+        status: currentStatus,
+        size: currentSize
+      } = this.state;
+      if (currentStatus !== targetStatus) {
+        this.setState({
+          status: targetStatus
+        }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
+      }
+      if (currentSize !== targetSize) {
+        this.setState({
+          size: targetSize
+        });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+    return isSameStatus && isSameSize;
+  }
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
+  }
+  render() {
+    const {
+      className,
+      'data-testid': dataTestId
+    } = this.props;
+    const {
+      size,
+      status: status$1
+    } = this.state;
+    const classes = classNames__default.default(`process process-${size}`, className, {
+      [`process-danger`]: status$1 === status.Status.FAILED,
+      [`process-stopped`]: status$1 === status.Status.HIDDEN,
+      [`process-success`]: status$1 === status.Status.SUCCEEDED
+    });
+    return /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: classes,
+      "data-testid": dataTestId,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "process-icon-container",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "process-icon-horizontal"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "process-icon-vertical"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          className: "process-circle",
+          cx: "50%",
+          cy: "50%",
+          r: radius[size],
+          fillOpacity: "0.0"
+        })
+      })]
+    });
+  }
+}
+
+module.exports = ProcessIndicator;
+//# sourceMappingURL=ProcessIndicator.js.map

package/build/processIndicator/ProcessIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import classNames from 'classnames';\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 = classNames(`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","classNames","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}

package/build/processIndicator/ProcessIndicator.mjs

@@ -0,0 +1,114 @@
+import classNames from 'classnames';
+import { Component } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Status } from '../common/propsValues/status.mjs';
+
+const radius = {
+  xxs: 6,
+  xs: 11,
+  sm: 22,
+  xl: 61
+};
+const ANIMATION_DURATION_IN_MS = 1500;
+class ProcessIndicator extends Component {
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm'
+  };
+  interval = 0;
+  timeout = 0;
+  constructor(props) {
+    super(props);
+    this.state = {
+      status: props.status,
+      size: props.size
+    };
+  }
+  /**
+   * Create interval for animation duration (1500ms)
+   * Update state only at the end of every interval
+   * (end of animation loop) if props changed before end of animation
+   */
+  componentDidMount() {
+    this.interval = window.setInterval(() => {
+      const {
+        status: targetStatus,
+        size: targetSize,
+        onAnimationCompleted
+      } = this.props;
+      const {
+        status: currentStatus,
+        size: currentSize
+      } = this.state;
+      if (currentStatus !== targetStatus) {
+        this.setState({
+          status: targetStatus
+        }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
+      }
+      if (currentSize !== targetSize) {
+        this.setState({
+          size: targetSize
+        });
+      }
+    }, ANIMATION_DURATION_IN_MS);
+  }
+  /**
+   * Only trigger render if comopnent's state got
+   * updated from interval callback
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    const isSameStatus = nextProps.status === nextState.status;
+    const isSameSize = nextProps.size === nextState.size;
+    return isSameStatus && isSameSize;
+  }
+  // Clear interval before destroying component
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
+  }
+  render() {
+    const {
+      className,
+      'data-testid': dataTestId
+    } = this.props;
+    const {
+      size,
+      status
+    } = this.state;
+    const classes = classNames(`process process-${size}`, className, {
+      [`process-danger`]: status === Status.FAILED,
+      [`process-stopped`]: status === Status.HIDDEN,
+      [`process-success`]: status === Status.SUCCEEDED
+    });
+    return /*#__PURE__*/jsxs("span", {
+      className: classes,
+      "data-testid": dataTestId,
+      children: [/*#__PURE__*/jsxs("span", {
+        className: "process-icon-container",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "process-icon-horizontal"
+        }), /*#__PURE__*/jsx("span", {
+          className: "process-icon-vertical"
+        })]
+      }), /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          className: "process-circle",
+          cx: "50%",
+          cy: "50%",
+          r: radius[size],
+          fillOpacity: "0.0"
+        })
+      })]
+    });
+  }
+}
+
+export { ProcessIndicator as default };
+//# sourceMappingURL=ProcessIndicator.mjs.map

package/build/processIndicator/ProcessIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import classNames from 'classnames';\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 = classNames(`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","classNames","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}

package/build/progress/Progress.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Progress = ({
+  className,
+  id,
+  progress
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsxs("progress", {
+    id: id,
+    className: classNames__default.default('np-progress d-block', className),
+    ...progress,
+    children: [Math.floor(progress.value / progress.max * 100), "%"]
+  });
+};
+
+module.exports = Progress;
+//# sourceMappingURL=Progress.js.map

package/build/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import classnames from 'classnames';\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={classnames('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","classnames","children","Math","floor","value","max"],"mappings":";;;;;;;;;AAQMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,KAAI;AAC9D,EAAA,oBACEC,eAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,2BAAU,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GACpFC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD,CAAA;AAAA,GAAU,CAAC,CAAA;AAEf;;;;"}

package/build/progress/Progress.mjs

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { jsxs } from 'react/jsx-runtime';
+
+const Progress = ({
+  className,
+  id,
+  progress
+}) => {
+  return /*#__PURE__*/jsxs("progress", {
+    id: id,
+    className: classNames('np-progress d-block', className),
+    ...progress,
+    children: [Math.floor(progress.value / progress.max * 100), "%"]
+  });
+};
+
+export { Progress as default };
+//# sourceMappingURL=Progress.mjs.map

package/build/progress/Progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mjs","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import classnames from 'classnames';\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={classnames('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","classnames","children","Math","floor","value","max"],"mappings":";;;AAQMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,KAAI;AAC9D,EAAA,oBACEC,IAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,UAAU,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GACpFC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD,CAAA;AAAA,GAAU,CAAC,CAAA;AAEf;;;;"}

package/build/progressBar/ProgressBar.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var componentsTheming = require('@wise/components-theming');
+var classNames = require('classnames');
+var Body = require('../body/Body.js');
+var Progress = require('../progress/Progress.js');
+var Title = require('../title/Title.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const ProgressBar = ({
+  className,
+  description,
+  id,
+  title,
+  progress,
+  textEnd
+}) => {
+  const {
+    isModern
+  } = componentsTheming.useTheme();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('np-progress-bar', className),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+      className: "np-progress-bar__title m-b-1",
+      htmlFor: id,
+      children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
+        type: typography.Typography.TITLE_BODY,
+        className: isModern ? `m-b-1 text-primary` : `text-primary`,
+        children: title
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Body, {
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Progress, {
+      id: id,
+      progress: progress
+    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+      as: "p",
+      type: typography.Typography.BODY_DEFAULT_BOLD,
+      className: "d-flex justify-content-end text-primary m-b-0",
+      children: textEnd
+    })]
+  });
+};
+
+module.exports = ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/build/progressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\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?: string;\n  id: string;\n  title: string;\n  progress: { value: number; max: number };\n  textEnd: string;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  const { isModern } = useTheme();\n  return (\n    <div className={classNames('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title\n          type={Typography.TITLE_BODY}\n          className={isModern ? `m-b-1 text-primary` : `text-primary`}\n        >\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","isModern","useTheme","_jsxs","classNames","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;AAiBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA,OAAAA;AAAO,CACU,KAAI;EACrB,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAES,2BAAU,CAAC,iBAAiB,EAAET,SAAS,CAAE;AAAAU,IAAAA,QAAA,gBACvDF,eAAA,CAAA,OAAA,EAAA;AAAOR,MAAAA,SAAS,EAAC,8BAA8B;AAACW,MAAAA,OAAO,EAAET,EAAG;MAAAQ,QAAA,EAAA,cAC1DE,cAAA,CAACC,KAAK,EAAA;QACJC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BhB,QAAAA,SAAS,EAAEM,QAAQ,GAAG,CAAA,kBAAA,CAAoB,GAAiB,CAAC,YAAA,CAAA;AAAAI,QAAAA,QAAA,EAE3DP,KAAAA;AAAK,OACD,CACP,EAACF,WAAW,iBAAIW,cAAA,CAACK,IAAI,EAAA;AAAAP,QAAAA,QAAA,EAAET,WAAAA;AAAW,OAAO,CAAC,CAAA;AAAA,KACrC,CACP,eAAAW,cAAA,CAACM,QAAQ,EAAA;AAAChB,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KACrC,CAAA,eAAAQ,cAAA,CAACK,IAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,qBAAU,CAACK,iBAAkB;AACnCpB,MAAAA,SAAS,EAAC,+CAA+C;AAAAU,MAAAA,QAAA,EAExDL,OAAAA;AAAO,KACJ,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/progressBar/ProgressBar.mjs

@@ -0,0 +1,45 @@
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import Body from '../body/Body.mjs';
+import Progress from '../progress/Progress.mjs';
+import Title from '../title/Title.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+const ProgressBar = ({
+  className,
+  description,
+  id,
+  title,
+  progress,
+  textEnd
+}) => {
+  const {
+    isModern
+  } = useTheme();
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('np-progress-bar', className),
+    children: [/*#__PURE__*/jsxs("label", {
+      className: "np-progress-bar__title m-b-1",
+      htmlFor: id,
+      children: [/*#__PURE__*/jsx(Title, {
+        type: Typography.TITLE_BODY,
+        className: isModern ? `m-b-1 text-primary` : `text-primary`,
+        children: title
+      }), description && /*#__PURE__*/jsx(Body, {
+        children: description
+      })]
+    }), /*#__PURE__*/jsx(Progress, {
+      id: id,
+      progress: progress
+    }), /*#__PURE__*/jsx(Body, {
+      as: "p",
+      type: Typography.BODY_DEFAULT_BOLD,
+      className: "d-flex justify-content-end text-primary m-b-0",
+      children: textEnd
+    })]
+  });
+};
+
+export { ProgressBar as default };
+//# sourceMappingURL=ProgressBar.mjs.map

package/build/progressBar/ProgressBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.mjs","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\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?: string;\n  id: string;\n  title: string;\n  progress: { value: number; max: number };\n  textEnd: string;\n};\n\nconst ProgressBar = ({\n  className,\n  description,\n  id,\n  title,\n  progress,\n  textEnd,\n}: ProgressBarProps) => {\n  const { isModern } = useTheme();\n  return (\n    <div className={classNames('np-progress-bar', className)}>\n      <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n        <Title\n          type={Typography.TITLE_BODY}\n          className={isModern ? `m-b-1 text-primary` : `text-primary`}\n        >\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","isModern","useTheme","_jsxs","classNames","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;AAiBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA,OAAAA;AAAO,CACU,KAAI;EACrB,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAES,UAAU,CAAC,iBAAiB,EAAET,SAAS,CAAE;AAAAU,IAAAA,QAAA,gBACvDF,IAAA,CAAA,OAAA,EAAA;AAAOR,MAAAA,SAAS,EAAC,8BAA8B;AAACW,MAAAA,OAAO,EAAET,EAAG;MAAAQ,QAAA,EAAA,cAC1DE,GAAA,CAACC,KAAK,EAAA;QACJC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAC5BhB,QAAAA,SAAS,EAAEM,QAAQ,GAAG,CAAA,kBAAA,CAAoB,GAAiB,CAAC,YAAA,CAAA;AAAAI,QAAAA,QAAA,EAE3DP,KAAAA;AAAK,OACD,CACP,EAACF,WAAW,iBAAIW,GAAA,CAACK,IAAI,EAAA;AAAAP,QAAAA,QAAA,EAAET,WAAAA;AAAW,OAAO,CAAC,CAAA;AAAA,KACrC,CACP,eAAAW,GAAA,CAACM,QAAQ,EAAA;AAAChB,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KACrC,CAAA,eAAAQ,GAAA,CAACK,IAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,UAAU,CAACK,iBAAkB;AACnCpB,MAAAA,SAAS,EAAC,+CAA+C;AAAAU,MAAAA,QAAA,EAExDL,OAAAA;AAAO,KACJ,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}