@transferwise/components 46.153.0 → 46.155.0

package/build/Stepper/Stepper.mjs

@@ -0,0 +1,114 @@
+import { clsx } from 'clsx';
+import 'react';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import '../common/PropsValues/control.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 { Position } from '../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/formatting';
+import '@transferwise/icons';
+import 'react-intl';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@transferwise/neptune-validation';
+import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
+import Tooltip from '../Tooltip/Tooltip.mjs';
+import { isTouchDevice } from './deviceDetection.mjs';
+
+function clamp(from, to, value) {
+  return Math.max(Math.min(to, value), from);
+}
+/**
+ * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
+ * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
+ */
+const Stepper = ({
+  steps,
+  activeStep = 0,
+  className,
+  testId
+}) => {
+  const {
+    isRTL
+  } = useDirection();
+  if (steps.length === 0) {
+    return null;
+  }
+  const activeStepIndex = clamp(0, steps.length - 1, activeStep);
+  const stepPercentage = 1 / (steps.length - 1);
+  const percentageCompleted = activeStepIndex / (steps.length - 1);
+  const getProgressWidth = () => {
+    if (percentageCompleted === 0) {
+      return '0%';
+    }
+    /**
+     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
+     * which are used for progress vertical delimiter.
+     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.
+     */
+    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;
+  };
+  const renderStep = (step, index) => {
+    const active = index === activeStepIndex;
+    const clickable = step.onClick && !active;
+    const labelButton = clickable ? /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: "btn-unstyled tw-stepper__step-label",
+      onClick: () => clickable && step.onClick?.(),
+      children: /*#__PURE__*/jsx("small", {
+        children: step.label
+      })
+    }) : /*#__PURE__*/jsx("span", {
+      className: "tw-stepper__step-label",
+      children: step.label
+    });
+    return /*#__PURE__*/jsx("li", {
+      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      "aria-current": active ? 'step' : false,
+      style: isRTL ? {
+        right: `${index * stepPercentage * 100}%`
+      } : {
+        left: `${index * stepPercentage * 100}%`
+      },
+      children: step.hoverLabel && !isTouchDevice() ? /*#__PURE__*/jsx(Tooltip, {
+        position: Position.BOTTOM,
+        label: step.hoverLabel,
+        children: labelButton
+      }) : labelButton
+    }, index);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: clsx('tw-stepper', className),
+    "data-testid": testId,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "progress",
+      children: /*#__PURE__*/jsx("div", {
+        className: "progress-bar",
+        style: {
+          width: getProgressWidth()
+        },
+        "data-testid": "progress-bar"
+      })
+    }), /*#__PURE__*/jsx("ol", {
+      className: "tw-stepper-steps p-t-1 m-b-0",
+      children: steps.map(renderStep)
+    })]
+  });
+};
+
+export { Stepper as default };
+//# sourceMappingURL=Stepper.mjs.map

package/build/Stepper/Stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Stepper/deviceDetection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deviceDetection.js","sources":["../../src/Stepper/deviceDetection.ts"],"sourcesContent":["function supportsTouchEvents() {\n  const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;\n  const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;\n\n  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined);\n}\n\nfunction userAgentSuggestsTouchDevice() {\n  const sampleTouchDevices = [\n    'android',\n    'iemobile',\n    'iphone',\n    'ipad',\n    'ipod',\n    'blackberry',\n    'bada',\n  ];\n  const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.\n// Only use this for small vanity changes where it still works either way.\nexport function isTouchDevice() {\n  return supportsTouchEvents() || userAgentSuggestsTouchDevice();\n}\n"],"names":["supportsTouchEvents","onTouchStartIsDefined","window","ontouchstart","undefined","maxTouchPointsIsDefined","navigator","maxTouchPoints","userAgentSuggestsTouchDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","test","userAgent","isTouchDevice"],"mappings":";;AAAA,SAASA,mBAAmBA,GAAA;EAC1B,MAAMC,qBAAqB,GAAG,OAAOC,MAAM,KAAK,WAAW,IAAIA,MAAM,CAACC,YAAY,KAAKC,SAAS;EAChG,MAAMC,uBAAuB,GAAG,OAAOC,SAAS,KAAK,WAAW,IAAIA,SAAS,CAACC,cAAc;AAE5F,EAAA,OAAO,CAAC,EAAEN,qBAAqB,IAAII,uBAAuB,CAAC;AAC7D;AAEA,SAASG,4BAA4BA,GAAA;AACnC,EAAA,MAAMC,kBAAkB,GAAG,CACzB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,CACP;AACD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAM,IAAK,CAAA,CAAA,EAAIA,MAAM,GAAG,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAC/E,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC;AAC3C,EAAA,OAAO,OAAOJ,SAAS,KAAK,WAAW,IAAI,CAAC,CAACQ,KAAK,CAACE,IAAI,CAACV,SAAS,CAACW,SAAS,CAAC;AAC9E;AACA;AACA;SACgBC,aAAaA,GAAA;AAC3B,EAAA,OAAOlB,mBAAmB,EAAE,IAAIQ,4BAA4B,EAAE;AAChE;;;;"}

package/build/Stepper/deviceDetection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"deviceDetection.mjs","sources":["../../src/Stepper/deviceDetection.ts"],"sourcesContent":["function supportsTouchEvents() {\n  const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;\n  const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;\n\n  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined);\n}\n\nfunction userAgentSuggestsTouchDevice() {\n  const sampleTouchDevices = [\n    'android',\n    'iemobile',\n    'iphone',\n    'ipad',\n    'ipod',\n    'blackberry',\n    'bada',\n  ];\n  const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');\n  const regex = new RegExp(matchString, 'gi');\n  return typeof navigator !== 'undefined' && !!regex.test(navigator.userAgent);\n}\n// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.\n// Only use this for small vanity changes where it still works either way.\nexport function isTouchDevice() {\n  return supportsTouchEvents() || userAgentSuggestsTouchDevice();\n}\n"],"names":["supportsTouchEvents","onTouchStartIsDefined","window","ontouchstart","undefined","maxTouchPointsIsDefined","navigator","maxTouchPoints","userAgentSuggestsTouchDevice","sampleTouchDevices","matchString","map","device","join","regex","RegExp","test","userAgent","isTouchDevice"],"mappings":"AAAA,SAASA,mBAAmBA,GAAA;EAC1B,MAAMC,qBAAqB,GAAG,OAAOC,MAAM,KAAK,WAAW,IAAIA,MAAM,CAACC,YAAY,KAAKC,SAAS;EAChG,MAAMC,uBAAuB,GAAG,OAAOC,SAAS,KAAK,WAAW,IAAIA,SAAS,CAACC,cAAc;AAE5F,EAAA,OAAO,CAAC,EAAEN,qBAAqB,IAAII,uBAAuB,CAAC;AAC7D;AAEA,SAASG,4BAA4BA,GAAA;AACnC,EAAA,MAAMC,kBAAkB,GAAG,CACzB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,MAAM,CACP;AACD,EAAA,MAAMC,WAAW,GAAGD,kBAAkB,CAACE,GAAG,CAAEC,MAAM,IAAK,CAAA,CAAA,EAAIA,MAAM,GAAG,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EAC/E,MAAMC,KAAK,GAAG,IAAIC,MAAM,CAACL,WAAW,EAAE,IAAI,CAAC;AAC3C,EAAA,OAAO,OAAOJ,SAAS,KAAK,WAAW,IAAI,CAAC,CAACQ,KAAK,CAACE,IAAI,CAACV,SAAS,CAACW,SAAS,CAAC;AAC9E;AACA;AACA;SACgBC,aAAaA,GAAA;AAC3B,EAAA,OAAOlB,mBAAmB,EAAE,IAAIQ,4BAA4B,EAAE;AAChE;;;;"}

package/build/Sticky/Sticky.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../common/theme.js');
+require('../common/direction.js');
+require('@transferwise/neptune-tokens');
+require('../common/PropsValues/control.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');
+var position = 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/formatting');
+require('@transferwise/icons');
+require('clsx');
+require('react');
+require('react-intl');
+require('../common/CloseButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var SlidingPanel = require('../SlidingPanel/SlidingPanel.js');
+
+const Sticky = ({
+  children,
+  open = true,
+  position: position$1 = position.Position.BOTTOM,
+  testId
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(SlidingPanel.default, {
+    testId: testId,
+    open: open,
+    position: position$1,
+    slidingPanelPositionFixed: true,
+    showSlidingPanelBorder: true,
+    children: children
+  });
+};
+
+exports.default = Sticky;
+//# sourceMappingURL=Sticky.js.map

package/build/Sticky/Sticky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky.js","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}

package/build/Sticky/Sticky.mjs

@@ -0,0 +1,46 @@
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import '../common/PropsValues/control.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 { Position } from '../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/formatting';
+import '@transferwise/icons';
+import 'clsx';
+import 'react';
+import 'react-intl';
+import '../common/CloseButton/CloseButton.messages.mjs';
+import { jsx } from 'react/jsx-runtime';
+import SlidingPanel from '../SlidingPanel/SlidingPanel.mjs';
+
+const Sticky = ({
+  children,
+  open = true,
+  position = Position.BOTTOM,
+  testId
+}) => {
+  return /*#__PURE__*/jsx(SlidingPanel, {
+    testId: testId,
+    open: open,
+    position: position,
+    slidingPanelPositionFixed: true,
+    showSlidingPanelBorder: true,
+    children: children
+  });
+};
+
+export { Sticky as default };
+//# sourceMappingURL=Sticky.mjs.map

package/build/Sticky/Sticky.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky.mjs","sources":["../../src/Sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../SlidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}

package/build/Switch/Switch.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var clsx = require('clsx');
+var contexts = require('../Inputs/contexts.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Switch = props => {
+  const inputAttributes = contexts.useInputAttributes({
+    nonLabelable: true
+  });
+  const {
+    checked,
+    className,
+    id = inputAttributes.id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledbyProp,
+    'aria-describedby': ariaDescribedbyProp,
+    onClick,
+    disabled
+  } = props;
+  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    className: clsx.clsx('np-switch', {
+      'np-switch--unchecked': !checked,
+      'np-switch--checked': checked,
+      disabled
+    }, className),
+    type: "button",
+    role: "switch",
+    ...inputAttributes,
+    id: id,
+    "aria-checked": Boolean(checked),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedbyProp,
+    disabled: disabled,
+    onClick: !disabled ? onClick : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "np-switch--thumb"
+    })
+  });
+};
+
+exports.default = Switch;
+//# sourceMappingURL=Switch.js.map

package/build/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../Inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={Boolean(checked)}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","Boolean","children"],"mappings":";;;;;;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,cAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;IACP,cAAA,EAAcY,OAAO,CAACd,OAAO,CAAE;AAC/B,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAM,IAAAA,QAAA,eAEzCL,cAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}

package/build/Switch/Switch.mjs

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import { useInputAttributes } from '../Inputs/contexts.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Switch = props => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const {
+    checked,
+    className,
+    id = inputAttributes.id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledbyProp,
+    'aria-describedby': ariaDescribedbyProp,
+    onClick,
+    disabled
+  } = props;
+  const ariaLabelledby = (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
+  return /*#__PURE__*/jsx("button", {
+    className: clsx('np-switch', {
+      'np-switch--unchecked': !checked,
+      'np-switch--checked': checked,
+      disabled
+    }, className),
+    type: "button",
+    role: "switch",
+    ...inputAttributes,
+    id: id,
+    "aria-checked": Boolean(checked),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedbyProp,
+    disabled: disabled,
+    onClick: !disabled ? onClick : undefined,
+    children: /*#__PURE__*/jsx("span", {
+      className: "np-switch--thumb"
+    })
+  });
+};
+
+export { Switch as default };
+//# sourceMappingURL=Switch.mjs.map

package/build/Switch/Switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.mjs","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../Inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Identifies the element(s) that describes the element on which the attribute is set */\n  'aria-describedby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    'aria-describedby': ariaDescribedbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <button\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      type=\"button\"\n      role=\"switch\"\n      {...inputAttributes}\n      id={id}\n      aria-checked={Boolean(checked)}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedbyProp}\n      disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n    </button>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","ariaDescribedbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","Boolean","children"],"mappings":";;;;AAyBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;AACrC,IAAA,kBAAkB,EAAEC,mBAAmB;IACvCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGX,KAAK;AAET,EAAA,MAAMY,cAAc,GAClB,CAACL,SAAS,GAAGM,SAAS,GAAGL,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEa,GAAA,CAAA,QAAA,EAAA;AACET,IAAAA,SAAS,EAAEU,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACX,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BO,MAAAA;KACD,EACDN,SAAS,CACT;AACFW,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACThB,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;IACP,cAAA,EAAcY,OAAO,CAACd,OAAO,CAAE;AAC/B,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBK,cAAe;AAChC,IAAA,kBAAA,EAAkBH,mBAAoB;AACtCE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAM,IAAAA,QAAA,eAEzCL,GAAA,CAAA,MAAA,EAAA;AAAMT,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}

package/build/Table/Cell/TableCell.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TableStatusText = require('../StatusText/TableStatusText.js');
+var StatusIcon = require('../../StatusIcon/StatusIcon.js');
+var art = require('@wise/art');
+require('react');
+var clsx = require('clsx');
+var Body = require('../../Body/Body.js');
+var Money = require('../../Money/Money.js');
+var AvatarView = require('../../AvatarView/AvatarView.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const TableCell = ({
+  cell,
+  alignment = 'left',
+  className,
+  colSpan,
+  children
+}) => {
+  const getContentMedia = () => {
+    let mediaContent = null;
+    if (cell?.type === 'leading' && cell?.avatar) {
+      mediaContent = /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+        size: 40,
+        ...cell.avatar,
+        imgSrc: cell.avatar.imgSrc ?? cell.avatar.src,
+        children: cell.avatar.asset
+      });
+    }
+    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
+      mediaContent = /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
+        code: cell?.primaryCurrency?.currency?.toLowerCase(),
+        intrinsicSize: 24
+      });
+    }
+    if (cell?.type === 'status') {
+      mediaContent = /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+        size: 24,
+        sentiment: cell?.sentiment ?? 'neutral'
+      });
+    }
+    if (cell?.type === 'media' && cell.media) {
+      // eslint-disable-next-line jsx-a11y/alt-text
+      mediaContent = /*#__PURE__*/jsxRuntime.jsx("img", {
+        ...cell.media
+      });
+    }
+    if (mediaContent) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        "aria-hidden": "true",
+        className: "np-table-content-media",
+        "data-testid": "np-table-content-media",
+        children: mediaContent
+      });
+    }
+  };
+  const formatCurrencyValue = currency => {
+    if (currency) {
+      return /*#__PURE__*/jsxRuntime.jsx(Money.default, {
+        amount: currency.amount,
+        currency: currency.currency,
+        alwaysShowDecimals: true
+      });
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("td", {
+    className: clsx.clsx('np-table-cell', cell?.type ? `np-table-cell--${cell?.type}` : '', `np-table-cell--${alignment}`, className),
+    colSpan: colSpan,
+    children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsxRuntime.jsx(TableStatusText.default, {
+      text: cell?.text,
+      status: cell?.status
+    }), cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('np-table-content', {
+        'np-table-content--reversed': alignment === 'right'
+      }),
+      "data-testid": "np-table-content",
+      children: [getContentMedia(), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "np-table-content-body",
+        children: [(cell?.primaryCurrency ?? cell?.primaryText) && /*#__PURE__*/jsxRuntime.jsx(TableStatusText.default, {
+          text: cell?.type === 'currency' ? formatCurrencyValue(cell?.primaryCurrency) : cell?.primaryText ?? '',
+          status: cell?.type !== 'status' ? cell?.status : undefined,
+          typography: "default-bold"
+        }), (cell?.secondaryCurrency ?? cell?.secondaryText) && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+          children: cell?.type === 'currency' ? formatCurrencyValue(cell?.secondaryCurrency) : cell?.secondaryText
+        })]
+      })]
+    }), children]
+  });
+};
+
+exports.default = TableCell;
+//# sourceMappingURL=TableCell.js.map

package/build/Table/Cell/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../src/Table/Cell/TableCell.tsx"],"sourcesContent":["import TableStatusText from '../StatusText/TableStatusText';\nimport StatusIcon from '../../StatusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../../Body';\nimport Money, { MoneyProps } from '../../Money';\nimport AvatarView, { AvatarViewProps } from '../../AvatarView';\n\ninterface TableCellTypeProp {\n  type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n  primaryText?: string;\n  secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n  status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n  media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n  extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {\n  avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {\n    asset?: AvatarViewProps['children'];\n    /** @deprecated Use `\"imgSrc\" instead. */\n    src?: AvatarViewProps['imgSrc'];\n  };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n  text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n  primaryCurrency?: MoneyProps;\n  secondaryCurrency?: MoneyProps;\n  flag?: boolean;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n  cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n  alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n  className?: string;\n  colSpan?: number;\n  children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n  const getContentMedia = () => {\n    let mediaContent = null;\n\n    if (cell?.type === 'leading' && cell?.avatar) {\n      mediaContent = (\n        <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>\n          {cell.avatar.asset}\n        </AvatarView>\n      );\n    }\n\n    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {\n      mediaContent = (\n        <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n      );\n    }\n\n    if (cell?.type === 'status') {\n      mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n    }\n\n    if (cell?.type === 'media' && cell.media) {\n      // eslint-disable-next-line jsx-a11y/alt-text\n      mediaContent = <img {...cell.media} />;\n    }\n\n    if (mediaContent) {\n      return (\n        <div\n          aria-hidden=\"true\"\n          className=\"np-table-content-media\"\n          data-testid=\"np-table-content-media\"\n        >\n          {mediaContent}\n        </div>\n      );\n    }\n  };\n\n  const formatCurrencyValue = (currency?: MoneyProps) => {\n    if (currency) {\n      return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n    }\n\n    return '';\n  };\n\n  return (\n    <td\n      className={clsx(\n        'np-table-cell',\n        cell?.type ? `np-table-cell--${cell?.type}` : '',\n        `np-table-cell--${alignment}`,\n        className,\n      )}\n      colSpan={colSpan}\n    >\n      {cell?.type === 'text' && cell?.text && (\n        <TableStatusText text={cell?.text} status={cell?.status} />\n      )}\n      {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n        <div\n          className={clsx('np-table-content', {\n            'np-table-content--reversed': alignment === 'right',\n          })}\n          data-testid=\"np-table-content\"\n        >\n          {getContentMedia()}\n          <div className=\"np-table-content-body\">\n            {(cell?.primaryCurrency ?? cell?.primaryText) && (\n              <TableStatusText\n                text={\n                  cell?.type === 'currency'\n                    ? formatCurrencyValue(cell?.primaryCurrency)\n                    : (cell?.primaryText ?? '')\n                }\n                status={cell?.type !== 'status' ? cell?.status : undefined}\n                typography=\"default-bold\"\n              />\n            )}\n            {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n              <Body>\n                {cell?.type === 'currency'\n                  ? formatCurrencyValue(cell?.secondaryCurrency)\n                  : cell?.secondaryText}\n              </Body>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","_jsx","AvatarView","size","imgSrc","src","asset","primaryCurrency","currency","flag","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}

package/build/Table/Cell/TableCell.mjs

@@ -0,0 +1,91 @@
+import TableStatusText from '../StatusText/TableStatusText.mjs';
+import StatusIcon from '../../StatusIcon/StatusIcon.mjs';
+import { Flag } from '@wise/art';
+import 'react';
+import { clsx } from 'clsx';
+import Body from '../../Body/Body.mjs';
+import Money from '../../Money/Money.mjs';
+import AvatarView from '../../AvatarView/AvatarView.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TableCell = ({
+  cell,
+  alignment = 'left',
+  className,
+  colSpan,
+  children
+}) => {
+  const getContentMedia = () => {
+    let mediaContent = null;
+    if (cell?.type === 'leading' && cell?.avatar) {
+      mediaContent = /*#__PURE__*/jsx(AvatarView, {
+        size: 40,
+        ...cell.avatar,
+        imgSrc: cell.avatar.imgSrc ?? cell.avatar.src,
+        children: cell.avatar.asset
+      });
+    }
+    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {
+      mediaContent = /*#__PURE__*/jsx(Flag, {
+        code: cell?.primaryCurrency?.currency?.toLowerCase(),
+        intrinsicSize: 24
+      });
+    }
+    if (cell?.type === 'status') {
+      mediaContent = /*#__PURE__*/jsx(StatusIcon, {
+        size: 24,
+        sentiment: cell?.sentiment ?? 'neutral'
+      });
+    }
+    if (cell?.type === 'media' && cell.media) {
+      // eslint-disable-next-line jsx-a11y/alt-text
+      mediaContent = /*#__PURE__*/jsx("img", {
+        ...cell.media
+      });
+    }
+    if (mediaContent) {
+      return /*#__PURE__*/jsx("div", {
+        "aria-hidden": "true",
+        className: "np-table-content-media",
+        "data-testid": "np-table-content-media",
+        children: mediaContent
+      });
+    }
+  };
+  const formatCurrencyValue = currency => {
+    if (currency) {
+      return /*#__PURE__*/jsx(Money, {
+        amount: currency.amount,
+        currency: currency.currency,
+        alwaysShowDecimals: true
+      });
+    }
+    return '';
+  };
+  return /*#__PURE__*/jsxs("td", {
+    className: clsx('np-table-cell', cell?.type ? `np-table-cell--${cell?.type}` : '', `np-table-cell--${alignment}`, className),
+    colSpan: colSpan,
+    children: [cell?.type === 'text' && cell?.text && /*#__PURE__*/jsx(TableStatusText, {
+      text: cell?.text,
+      status: cell?.status
+    }), cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && /*#__PURE__*/jsxs("div", {
+      className: clsx('np-table-content', {
+        'np-table-content--reversed': alignment === 'right'
+      }),
+      "data-testid": "np-table-content",
+      children: [getContentMedia(), /*#__PURE__*/jsxs("div", {
+        className: "np-table-content-body",
+        children: [(cell?.primaryCurrency ?? cell?.primaryText) && /*#__PURE__*/jsx(TableStatusText, {
+          text: cell?.type === 'currency' ? formatCurrencyValue(cell?.primaryCurrency) : cell?.primaryText ?? '',
+          status: cell?.type !== 'status' ? cell?.status : undefined,
+          typography: "default-bold"
+        }), (cell?.secondaryCurrency ?? cell?.secondaryText) && /*#__PURE__*/jsx(Body, {
+          children: cell?.type === 'currency' ? formatCurrencyValue(cell?.secondaryCurrency) : cell?.secondaryText
+        })]
+      })]
+    }), children]
+  });
+};
+
+export { TableCell as default };
+//# sourceMappingURL=TableCell.mjs.map

package/build/Table/Cell/TableCell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.mjs","sources":["../../../src/Table/Cell/TableCell.tsx"],"sourcesContent":["import TableStatusText from '../StatusText/TableStatusText';\nimport StatusIcon from '../../StatusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../../Body';\nimport Money, { MoneyProps } from '../../Money';\nimport AvatarView, { AvatarViewProps } from '../../AvatarView';\n\ninterface TableCellTypeProp {\n  type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n  primaryText?: string;\n  secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n  status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n  media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n  extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {\n  avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {\n    asset?: AvatarViewProps['children'];\n    /** @deprecated Use `\"imgSrc\" instead. */\n    src?: AvatarViewProps['imgSrc'];\n  };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n  text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n  primaryCurrency?: MoneyProps;\n  secondaryCurrency?: MoneyProps;\n  flag?: boolean;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n  sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n  cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n  alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n  className?: string;\n  colSpan?: number;\n  children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n  const getContentMedia = () => {\n    let mediaContent = null;\n\n    if (cell?.type === 'leading' && cell?.avatar) {\n      mediaContent = (\n        <AvatarView size={40} {...cell.avatar} imgSrc={cell.avatar.imgSrc ?? cell.avatar.src}>\n          {cell.avatar.asset}\n        </AvatarView>\n      );\n    }\n\n    if (cell?.type === 'currency' && cell?.primaryCurrency?.currency && cell?.flag !== false) {\n      mediaContent = (\n        <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n      );\n    }\n\n    if (cell?.type === 'status') {\n      mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n    }\n\n    if (cell?.type === 'media' && cell.media) {\n      // eslint-disable-next-line jsx-a11y/alt-text\n      mediaContent = <img {...cell.media} />;\n    }\n\n    if (mediaContent) {\n      return (\n        <div\n          aria-hidden=\"true\"\n          className=\"np-table-content-media\"\n          data-testid=\"np-table-content-media\"\n        >\n          {mediaContent}\n        </div>\n      );\n    }\n  };\n\n  const formatCurrencyValue = (currency?: MoneyProps) => {\n    if (currency) {\n      return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n    }\n\n    return '';\n  };\n\n  return (\n    <td\n      className={clsx(\n        'np-table-cell',\n        cell?.type ? `np-table-cell--${cell?.type}` : '',\n        `np-table-cell--${alignment}`,\n        className,\n      )}\n      colSpan={colSpan}\n    >\n      {cell?.type === 'text' && cell?.text && (\n        <TableStatusText text={cell?.text} status={cell?.status} />\n      )}\n      {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n        <div\n          className={clsx('np-table-content', {\n            'np-table-content--reversed': alignment === 'right',\n          })}\n          data-testid=\"np-table-content\"\n        >\n          {getContentMedia()}\n          <div className=\"np-table-content-body\">\n            {(cell?.primaryCurrency ?? cell?.primaryText) && (\n              <TableStatusText\n                text={\n                  cell?.type === 'currency'\n                    ? formatCurrencyValue(cell?.primaryCurrency)\n                    : (cell?.primaryText ?? '')\n                }\n                status={cell?.type !== 'status' ? cell?.status : undefined}\n                typography=\"default-bold\"\n              />\n            )}\n            {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n              <Body>\n                {cell?.type === 'currency'\n                  ? formatCurrencyValue(cell?.secondaryCurrency)\n                  : cell?.secondaryText}\n              </Body>\n            )}\n          </div>\n        </div>\n      )}\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","_jsx","AvatarView","size","imgSrc","src","asset","primaryCurrency","currency","flag","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}