@transferwise/components 0.0.0-experimental-46166ff → 0.0.0-experimental-34deb6d

package/src/main.css

@@ -2432,191 +2432,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
   fill: var(--color-interactive-primary);
 }
-.wds-flow-progress {
-  position: relative;
-  height: 8px;
-  height: var(--size-8);
-  width: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  overflow: hidden;
-  --start: 0%;
-  --end: 0%;
-}
-.wds-flow-progress .track {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-}
-.wds-flow-progress .bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  clip-path: inset(0 calc(100% - var(--end)) 0 var(--start));
-}
-.wds-flow-progress .tapestry {
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-.wds-flow-progress.light .track {
-  background-color: #E9ECEF;
-}
-.wds-flow-progress.light .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_05.jpg);
-}
-.wds-flow-progress.dark .track {
-  background-color: #343A40;
-}
-.wds-flow-progress.dark .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_08.jpg);
-}
-.wds-flow-progress.determinate .bar {
-  animation: determinateAnim 700ms cubic-bezier(0.47, 0, 0.67, 1) forwards;
-}
-.wds-flow-progress.indeterminate .bar {
-  animation: indeterminateAnim 1000ms linear infinite;
-}
-.wds-flow-progress.indeterminate .tapestry.moving {
-  animation: tapestryMove 1500ms linear infinite;
-}
-.wds-flow-progress.scale-in {
-  transform: scaleY(0);
-  animation: scaleIn 330ms cubic-bezier(0.33, 0, 0.23, 1.53) forwards;
-}
-.wds-flow-progress.exiting {
-  animation: exitCollapse 320ms cubic-bezier(0.96, 0, 0.67, 1) forwards;
-}
-@keyframes determinateAnim {
-  0% {
-    --end: 0%;
-  }
-  100% {
-    --end: 100%;
-  }
-}
-@keyframes indeterminateAnim {
-  0% {
-    --start: 0%;
-    --end: 0%;
-  }
-  5% {
-    --start: 0.11%;
-    --end: 1.01%;
-  }
-  10% {
-    --start: 0.47%;
-    --end: 2.55%;
-  }
-  15% {
-    --start: 1.11%;
-    --end: 4.72%;
-  }
-  20% {
-    --start: 2.05%;
-    --end: 7.65%;
-  }
-  25% {
-    --start: 3.35%;
-    --end: 11.53%;
-  }
-  30% {
-    --start: 5.06%;
-    --end: 16.61%;
-  }
-  35% {
-    --start: 7.25%;
-    --end: 23.25%;
-  }
-  40% {
-    --start: 10%;
-    --end: 31.97%;
-  }
-  45% {
-    --start: 13.44%;
-    --end: 43.48%;
-  }
-  50% {
-    --start: 17.72%;
-    --end: 58.19%;
-  }
-  55% {
-    --start: 23.08%;
-    --end: 74.39%;
-  }
-  60% {
-    --start: 29.82%;
-    --end: 87.45%;
-  }
-  65% {
-    --start: 38.39%;
-    --end: 95.26%;
-  }
-  70% {
-    --start: 49.38%;
-    --end: 98.98%;
-  }
-  75% {
-    --start: 63.03%;
-    --end: 100%;
-  }
-  80% {
-    --start: 77.61%;
-    --end: 100%;
-  }
-  85% {
-    --start: 89.1%;
-    --end: 100%;
-  }
-  90% {
-    --start: 95.9%;
-    --end: 100%;
-  }
-  95% {
-    --start: 99.12%;
-    --end: 100%;
-  }
-  100% {
-    --start: 100%;
-    --end: 100%;
-  }
-}
-@keyframes tapestryMove {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-@keyframes scaleIn {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-@keyframes exitCollapse {
-  0% {
-    height: 8px;
-    height: var(--size-8);
-  }
-  100% {
-    height: 0;
-  }
-}
 .np-header {
   display: grid;
   grid-template-columns: 1fr auto;

package/src/main.less

@@ -35,7 +35,6 @@
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
 @import "./flowNavigation/FlowNavigation.less";
-@import "./flowProgress/FlowProgress.less";
 @import "./header/Header.less";
 @import "./image/Image.less";
 @import "./info/Info.less";

package/src/neptune-css/NeptuneCSS.story.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import clsx from 'clsx';
+import AvatarView from '../avatarView';
+import Tooltip from '../tooltip';
+import IconButton from '../iconButton';
+import Body from '../body';
+
+const meta: Meta = {
+  title: 'NeptuneCSS',
+  component: () => <div>NeptuneCSS Example</div>,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Colors: Story = {
+  render: () => {
+    return (
+      <Body>
+        {colorTokens.map((token) => (
+          <ColorToken key={token} token={token} className="m-b-2" />
+        ))}
+      </Body>
+    );
+  },
+};
+
+const colorTokens = [
+  '--color-content-primary',
+  '--color-bright-yellow',
+  '--color-bright-orange',
+  '--color-dark-purple',
+  '--color-dark-gold',
+  '--color-bright-blue',
+  '--color-dark-charcoal',
+  '--color-white',
+  '--color-black',
+  '--color-bright-green',
+  '--color-forest-green',
+  '--color-bright-pink',
+  '--color-dark-maroon',
+  '--color-content-primary',
+  '--color-content-secondary',
+  '--color-content-tertiary',
+  '--color-content-link',
+  '--color-content-link-hover',
+  '--color-content-link-active',
+  '--color-interactive-control',
+  '--color-interactive-control-hover',
+  '--color-interactive-control-active',
+  '--color-interactive-primary',
+  '--color-interactive-primary-hover',
+  '--color-interactive-primary-active',
+  '--color-interactive-secondary',
+  '--color-interactive-secondary-hover',
+  '--color-interactive-secondary-active',
+  '--color-interactive-accent',
+  '--color-interactive-accent-hover',
+  '--color-interactive-accent-active',
+  '--color-interactive-contrast',
+  '--color-interactive-contrast-hover',
+  '--color-interactive-contrast-active',
+  '--color-interactive-neutral',
+  '--color-interactive-neutral-hover',
+  '--color-interactive-neutral-active',
+  '--color-border-neutral',
+  '--color-border-overlay',
+  '--color-background-screen',
+  '--color-background-screen-hover',
+  '--color-background-screen-active',
+  '--color-background-elevated',
+  '--color-background-neutral',
+  '--color-background-neutral-hover',
+  '--color-background-neutral-active',
+  '--color-background-overlay',
+  '--color-background-surface',
+  '--color-sentiment-negative',
+  '--color-sentiment-negative-hover',
+  '--color-sentiment-negative-active',
+  '--color-sentiment-negative-primary',
+  '--color-sentiment-negative-primary-hover',
+  '--color-sentiment-negative-primary-active',
+  '--color-sentiment-negative-secondary',
+  '--color-sentiment-negative-secondary-hover',
+  '--color-sentiment-negative-secondary-active',
+  '--color-sentiment-positive',
+  '--color-sentiment-positive-hover',
+  '--color-sentiment-positive-active',
+  '--color-sentiment-positive-primary',
+  '--color-sentiment-positive-primary-hover',
+  '--color-sentiment-positive-primary-active',
+  '--color-sentiment-positive-secondary',
+  '--color-sentiment-positive-secondary-hover',
+  '--color-sentiment-positive-secondary-active',
+  '--color-sentiment-warning',
+  '--color-sentiment-warning-hover',
+  '--color-sentiment-warning-active',
+  '--color-sentiment-warning-primary',
+  '--color-sentiment-warning-primary-hover',
+  '--color-sentiment-warning-primary-active',
+  '--color-sentiment-warning-secondary',
+  '--color-sentiment-warning-secondary-hover',
+  '--color-sentiment-warning-secondary-active',
+  '--color-sentiment-warning-content',
+  '--color-sentiment-warning-content-hover',
+  '--color-sentiment-warning-content-active',
+  '--color-contrast',
+  '--color-light',
+  '--color-dark',
+  '--color-contrast-overlay',
+  '--color-contrast-theme',
+];
+
+function ColorToken(props: { token: string; className?: string }) {
+  const color = `var(${props.token})`;
+  const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
+  return (
+    <div className={clsx('d-flex', 'align-items-center', props.className)}>
+      <IconButton
+        aria-label="Copy color"
+        size={72}
+        className="m-r-2"
+        onClick={async () => {
+          await navigator.clipboard.writeText(color);
+          setTooltipLabel('Copied!');
+        }}
+      >
+        <Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
+          <AvatarView
+            size={72}
+            style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
+          >
+            {null}
+          </AvatarView>
+        </Tooltip>
+      </IconButton>
+      <code className="m-l-2">{props.token}</code>
+    </div>
+  );
+}

package/build/flowProgress/FlowProgress.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var componentsTheming = require('@wise/components-theming');
-var clsx = require('clsx');
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function FlowProgress({
-  type = 'indeterminate'
-}) {
-  const indeterminate = type === 'indeterminate';
-  const determinate = !indeterminate;
-  const {
-    screenMode
-  } = componentsTheming.useTheme();
-  const [exiting, setExiting] = React.useState(false);
-  const [visible, setVisible] = React.useState(true);
-  React.useEffect(() => {
-    if (determinate) {
-      const timer = setTimeout(() => setExiting(true), 720);
-      return () => clearTimeout(timer);
-    }
-  }, [determinate]);
-  React.useEffect(() => {
-    if (exiting) {
-      const timer = setTimeout(() => setVisible(false), 300);
-      return () => clearTimeout(timer);
-    }
-  }, [exiting]);
-  if (!visible) return null;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: clsx.clsx('wds-flow-progress', screenMode, indeterminate ? 'indeterminate scale-in' : 'determinate', {
-      exiting
-    }, 'm-y-1'),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "track"
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: `bar ${indeterminate ? 'indeterminate-bar' : ''}`,
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: `tapestry ${indeterminate ? 'moving' : ''}`,
-        style: indeterminate ? {
-          width: '200%'
-        } : {
-          width: '100%'
-        }
-      })
-    })]
-  });
-}
-
-exports.default = FlowProgress;
-//# sourceMappingURL=FlowProgress.js.map

package/build/flowProgress/FlowProgress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowProgress.js","sources":["../../src/flowProgress/FlowProgress.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect } from 'react';\n\nexport type Props = {\n  /**\n   * Type of the progress bar\n   * \n   * `'indeterminate'` - shows an ongoing activity without a specific completion time.\n   * \n   * `'determinate'` - ...\n   * \n   * @default 'indeterminate'\n   */\n  type?: 'indeterminate' | 'determinate';\n};\n\nfunction FlowProgress({ type = 'indeterminate' }: Props) {\n  const indeterminate = type === 'indeterminate';\n  const determinate = !indeterminate;\n  const { screenMode } = useTheme();\n  const [exiting, setExiting] = useState(false);\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (determinate) {\n      const timer = setTimeout(() => setExiting(true), 720);\n      return () => clearTimeout(timer);\n    }\n  }, [determinate]);\n\n  useEffect(() => {\n    if (exiting) {\n      const timer = setTimeout(() => setVisible(false), 300);\n      return () => clearTimeout(timer);\n    }\n  }, [exiting]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx(\n        'wds-flow-progress',\n        screenMode,\n        indeterminate ? 'indeterminate scale-in' : 'determinate',\n        { exiting },\n        'm-y-1',\n      )}\n    >\n      <div className=\"track\" />\n      <div className={`bar ${indeterminate ? 'indeterminate-bar' : ''}`}>\n        <div\n          className={`tapestry ${indeterminate ? 'moving' : ''}`}\n          style={indeterminate ? { width: '200%' } : { width: '100%' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default FlowProgress;\n"],"names":["FlowProgress","type","indeterminate","determinate","screenMode","useTheme","exiting","setExiting","useState","visible","setVisible","useEffect","timer","setTimeout","clearTimeout","_jsxs","className","clsx","children","_jsx","style","width"],"mappings":";;;;;;;;;AAiBA,SAASA,YAAYA,CAAC;AAAEC,EAAAA,IAAI,GAAG;AAAe,CAAS,EAAA;AACrD,EAAA,MAAMC,aAAa,GAAGD,IAAI,KAAK,eAAe;EAC9C,MAAME,WAAW,GAAG,CAACD,aAAa;EAClC,MAAM;AAAEE,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EACjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGF,cAAQ,CAAC,IAAI,CAAC;AAE5CG,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIR,WAAW,EAAE;MACf,MAAMS,KAAK,GAAGC,UAAU,CAAC,MAAMN,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC;AACrD,MAAA,OAAO,MAAMO,YAAY,CAACF,KAAK,CAAC;AAClC,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;AAEjBQ,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,OAAO,EAAE;MACX,MAAMM,KAAK,GAAGC,UAAU,CAAC,MAAMH,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AACtD,MAAA,OAAO,MAAMI,YAAY,CAACF,KAAK,CAAC;AAClC,IAAA;AACF,EAAA,CAAC,EAAE,CAACN,OAAO,CAAC,CAAC;AAEb,EAAA,IAAI,CAACG,OAAO,EAAE,OAAO,IAAI;AAEzB,EAAA,oBACEM,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,SAAI,CACb,mBAAmB,EACnBb,UAAU,EACVF,aAAa,GAAG,wBAAwB,GAAG,aAAa,EACxD;AAAEI,MAAAA;KAAS,EACX,OAAO,CACP;AAAAY,IAAAA,QAAA,gBAEFC,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC;KAAO,CACtB,eAAAG,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAE,CAAA,IAAA,EAAOd,aAAa,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAG;AAAAgB,MAAAA,QAAA,eAChEC,cAAA,CAAA,KAAA,EAAA;AACEH,QAAAA,SAAS,EAAE,CAAA,SAAA,EAAYd,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAG;QACvDkB,KAAK,EAAElB,aAAa,GAAG;AAAEmB,UAAAA,KAAK,EAAE;AAAM,SAAE,GAAG;AAAEA,UAAAA,KAAK,EAAE;AAAM;OAAG;AAEjE,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/flowProgress/FlowProgress.mjs

@@ -1,50 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import { clsx } from 'clsx';
-import { useState, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function FlowProgress({
-  type = 'indeterminate'
-}) {
-  const indeterminate = type === 'indeterminate';
-  const determinate = !indeterminate;
-  const {
-    screenMode
-  } = useTheme();
-  const [exiting, setExiting] = useState(false);
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    if (determinate) {
-      const timer = setTimeout(() => setExiting(true), 720);
-      return () => clearTimeout(timer);
-    }
-  }, [determinate]);
-  useEffect(() => {
-    if (exiting) {
-      const timer = setTimeout(() => setVisible(false), 300);
-      return () => clearTimeout(timer);
-    }
-  }, [exiting]);
-  if (!visible) return null;
-  return /*#__PURE__*/jsxs("div", {
-    className: clsx('wds-flow-progress', screenMode, indeterminate ? 'indeterminate scale-in' : 'determinate', {
-      exiting
-    }, 'm-y-1'),
-    children: [/*#__PURE__*/jsx("div", {
-      className: "track"
-    }), /*#__PURE__*/jsx("div", {
-      className: `bar ${indeterminate ? 'indeterminate-bar' : ''}`,
-      children: /*#__PURE__*/jsx("div", {
-        className: `tapestry ${indeterminate ? 'moving' : ''}`,
-        style: indeterminate ? {
-          width: '200%'
-        } : {
-          width: '100%'
-        }
-      })
-    })]
-  });
-}
-
-export { FlowProgress as default };
-//# sourceMappingURL=FlowProgress.mjs.map

package/build/flowProgress/FlowProgress.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowProgress.mjs","sources":["../../src/flowProgress/FlowProgress.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState, useEffect } from 'react';\n\nexport type Props = {\n  /**\n   * Type of the progress bar\n   * \n   * `'indeterminate'` - shows an ongoing activity without a specific completion time.\n   * \n   * `'determinate'` - ...\n   * \n   * @default 'indeterminate'\n   */\n  type?: 'indeterminate' | 'determinate';\n};\n\nfunction FlowProgress({ type = 'indeterminate' }: Props) {\n  const indeterminate = type === 'indeterminate';\n  const determinate = !indeterminate;\n  const { screenMode } = useTheme();\n  const [exiting, setExiting] = useState(false);\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (determinate) {\n      const timer = setTimeout(() => setExiting(true), 720);\n      return () => clearTimeout(timer);\n    }\n  }, [determinate]);\n\n  useEffect(() => {\n    if (exiting) {\n      const timer = setTimeout(() => setVisible(false), 300);\n      return () => clearTimeout(timer);\n    }\n  }, [exiting]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx(\n        'wds-flow-progress',\n        screenMode,\n        indeterminate ? 'indeterminate scale-in' : 'determinate',\n        { exiting },\n        'm-y-1',\n      )}\n    >\n      <div className=\"track\" />\n      <div className={`bar ${indeterminate ? 'indeterminate-bar' : ''}`}>\n        <div\n          className={`tapestry ${indeterminate ? 'moving' : ''}`}\n          style={indeterminate ? { width: '200%' } : { width: '100%' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default FlowProgress;\n"],"names":["FlowProgress","type","indeterminate","determinate","screenMode","useTheme","exiting","setExiting","useState","visible","setVisible","useEffect","timer","setTimeout","clearTimeout","_jsxs","className","clsx","children","_jsx","style","width"],"mappings":";;;;;AAiBA,SAASA,YAAYA,CAAC;AAAEC,EAAAA,IAAI,GAAG;AAAe,CAAS,EAAA;AACrD,EAAA,MAAMC,aAAa,GAAGD,IAAI,KAAK,eAAe;EAC9C,MAAME,WAAW,GAAG,CAACD,aAAa;EAClC,MAAM;AAAEE,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EACjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGF,QAAQ,CAAC,IAAI,CAAC;AAE5CG,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIR,WAAW,EAAE;MACf,MAAMS,KAAK,GAAGC,UAAU,CAAC,MAAMN,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC;AACrD,MAAA,OAAO,MAAMO,YAAY,CAACF,KAAK,CAAC;AAClC,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;AAEjBQ,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIL,OAAO,EAAE;MACX,MAAMM,KAAK,GAAGC,UAAU,CAAC,MAAMH,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AACtD,MAAA,OAAO,MAAMI,YAAY,CAACF,KAAK,CAAC;AAClC,IAAA;AACF,EAAA,CAAC,EAAE,CAACN,OAAO,CAAC,CAAC;AAEb,EAAA,IAAI,CAACG,OAAO,EAAE,OAAO,IAAI;AAEzB,EAAA,oBACEM,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,SAAS,EAAEC,IAAI,CACb,mBAAmB,EACnBb,UAAU,EACVF,aAAa,GAAG,wBAAwB,GAAG,aAAa,EACxD;AAAEI,MAAAA;KAAS,EACX,OAAO,CACP;AAAAY,IAAAA,QAAA,gBAEFC,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC;KAAO,CACtB,eAAAG,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAE,CAAA,IAAA,EAAOd,aAAa,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAG;AAAAgB,MAAAA,QAAA,eAChEC,GAAA,CAAA,KAAA,EAAA;AACEH,QAAAA,SAAS,EAAE,CAAA,SAAA,EAAYd,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAG;QACvDkB,KAAK,EAAElB,aAAa,GAAG;AAAEmB,UAAAA,KAAK,EAAE;AAAM,SAAE,GAAG;AAAEA,UAAAA,KAAK,EAAE;AAAM;OAAG;AAEjE,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/styles/flowProgress/FlowProgress.css

@@ -1,185 +0,0 @@
-.wds-flow-progress {
-  position: relative;
-  height: 8px;
-  height: var(--size-8);
-  width: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  overflow: hidden;
-  --start: 0%;
-  --end: 0%;
-}
-.wds-flow-progress .track {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-}
-.wds-flow-progress .bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  clip-path: inset(0 calc(100% - var(--end)) 0 var(--start));
-}
-.wds-flow-progress .tapestry {
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-.wds-flow-progress.light .track {
-  background-color: #E9ECEF;
-}
-.wds-flow-progress.light .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_05.jpg);
-}
-.wds-flow-progress.dark .track {
-  background-color: #343A40;
-}
-.wds-flow-progress.dark .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_08.jpg);
-}
-.wds-flow-progress.determinate .bar {
-  animation: determinateAnim 700ms cubic-bezier(0.47, 0, 0.67, 1) forwards;
-}
-.wds-flow-progress.indeterminate .bar {
-  animation: indeterminateAnim 1000ms linear infinite;
-}
-.wds-flow-progress.indeterminate .tapestry.moving {
-  animation: tapestryMove 1500ms linear infinite;
-}
-.wds-flow-progress.scale-in {
-  transform: scaleY(0);
-  animation: scaleIn 330ms cubic-bezier(0.33, 0, 0.23, 1.53) forwards;
-}
-.wds-flow-progress.exiting {
-  animation: exitCollapse 320ms cubic-bezier(0.96, 0, 0.67, 1) forwards;
-}
-@keyframes determinateAnim {
-  0% {
-    --end: 0%;
-  }
-  100% {
-    --end: 100%;
-  }
-}
-@keyframes indeterminateAnim {
-  0% {
-    --start: 0%;
-    --end: 0%;
-  }
-  5% {
-    --start: 0.11%;
-    --end: 1.01%;
-  }
-  10% {
-    --start: 0.47%;
-    --end: 2.55%;
-  }
-  15% {
-    --start: 1.11%;
-    --end: 4.72%;
-  }
-  20% {
-    --start: 2.05%;
-    --end: 7.65%;
-  }
-  25% {
-    --start: 3.35%;
-    --end: 11.53%;
-  }
-  30% {
-    --start: 5.06%;
-    --end: 16.61%;
-  }
-  35% {
-    --start: 7.25%;
-    --end: 23.25%;
-  }
-  40% {
-    --start: 10%;
-    --end: 31.97%;
-  }
-  45% {
-    --start: 13.44%;
-    --end: 43.48%;
-  }
-  50% {
-    --start: 17.72%;
-    --end: 58.19%;
-  }
-  55% {
-    --start: 23.08%;
-    --end: 74.39%;
-  }
-  60% {
-    --start: 29.82%;
-    --end: 87.45%;
-  }
-  65% {
-    --start: 38.39%;
-    --end: 95.26%;
-  }
-  70% {
-    --start: 49.38%;
-    --end: 98.98%;
-  }
-  75% {
-    --start: 63.03%;
-    --end: 100%;
-  }
-  80% {
-    --start: 77.61%;
-    --end: 100%;
-  }
-  85% {
-    --start: 89.1%;
-    --end: 100%;
-  }
-  90% {
-    --start: 95.9%;
-    --end: 100%;
-  }
-  95% {
-    --start: 99.12%;
-    --end: 100%;
-  }
-  100% {
-    --start: 100%;
-    --end: 100%;
-  }
-}
-@keyframes tapestryMove {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-@keyframes scaleIn {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-@keyframes exitCollapse {
-  0% {
-    height: 8px;
-    height: var(--size-8);
-  }
-  100% {
-    height: 0;
-  }
-}

package/build/types/flowProgress/FlowProgress.d.ts

@@ -1,15 +0,0 @@
-export type Props = {
-    /**
-     * Type of the progress bar
-     *
-     * `'indeterminate'` - shows an ongoing activity without a specific completion time.
-     *
-     * `'determinate'` - ...
-     *
-     * @default 'indeterminate'
-     */
-    type?: 'indeterminate' | 'determinate';
-};
-declare function FlowProgress({ type }: Props): import("react").JSX.Element | null;
-export default FlowProgress;
-//# sourceMappingURL=FlowProgress.d.ts.map

package/build/types/flowProgress/FlowProgress.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowProgress.d.ts","sourceRoot":"","sources":["../../../src/flowProgress/FlowProgress.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;CACxC,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,IAAsB,EAAE,EAAE,KAAK,sCA0CtD;AAED,eAAe,YAAY,CAAC"}

package/build/types/flowProgress/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './FlowProgress';
-export type { Props as FlowProgressProps } from './FlowProgress';
-//# sourceMappingURL=index.d.ts.map

package/build/types/flowProgress/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flowProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}