@bigbinary/neeto-molecules 3.16.20 → 3.16.21

package/dist/Onboarding.js

@@ -1,56 +1,652 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useMemo, useRef, useState, useEffect } from 'react';
+import React__default, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import { capitalize, findIndexBy, noop } from '@bigbinary/neeto-cist';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
-import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { n } from './inject-css-DmrvuTKK.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
 import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import RightArrow from '@bigbinary/neeto-icons/RightArrow';
-import { useTranslation, Trans } from 'react-i18next';
+import { n } from './inject-css-DmrvuTKK.js';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var CompletedScreen = withT(function (_ref) {
-  var t = _ref.t,
-    completeButtonProps = _ref.completeButtonProps;
-  return /*#__PURE__*/jsxs("div", {
-    className: "neeto-molecules-onboarding__wrapper",
-    "data-testid": "onboarding-congratulations-wrapper",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "mx-auto mb-6 w-full max-w-2xl space-y-2 px-6 pt-16",
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: "text-center",
-        "data-cy": "onboarding-congratulations-emoji",
-        style: "h1",
-        children: "\uD83C\uDF89"
-      }), /*#__PURE__*/jsxs(Typography, {
-        className: "text-center",
-        "data-cy": "onboarding-congratulations-title",
-        "data-testid": "onboarding-congratulations-title",
-        style: "h1",
-        children: [/*#__PURE__*/jsx("span", {
-          className: "neeto-ui-text-success-500",
-          children: t("neetoMolecules.onboarding.congratulations")
-        }), /*#__PURE__*/jsx("br", {}), t("neetoMolecules.onboarding.readyToUse", {
-          appName: capitalize(globalProps.appName)
-        })]
-      })]
-    }), /*#__PURE__*/jsx(Button, _objectSpread$1({
-      "data-cy": "onboarding-congratulations-button",
-      "data-testid": "onboarding-congratulations-button",
-      label: t("neetoMolecules.onboarding.helpScreen.startUsingButton", {
-        appName: globalProps.appName
-      })
-    }, completeButtonProps))]
-  });
-});
+// t: current time, b: beginning value, _c: final value, d: total duration
+var tweenFunctions = {
+  linear: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * t / d + b;
+  },
+  easeInQuad: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * (t /= d) * t + b;
+  },
+  easeOutQuad: function(t, b, _c, d) {
+    var c = _c - b;
+    return -c * (t /= d) * (t - 2) + b;
+  },
+  easeInOutQuad: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d / 2) < 1) {
+      return c / 2 * t * t + b;
+    } else {
+      return -c / 2 * ((--t) * (t - 2) - 1) + b;
+    }
+  },
+  easeInCubic: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * (t /= d) * t * t + b;
+  },
+  easeOutCubic: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * ((t = t / d - 1) * t * t + 1) + b;
+  },
+  easeInOutCubic: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d / 2) < 1) {
+      return c / 2 * t * t * t + b;
+    } else {
+      return c / 2 * ((t -= 2) * t * t + 2) + b;
+    }
+  },
+  easeInQuart: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * (t /= d) * t * t * t + b;
+  },
+  easeOutQuart: function(t, b, _c, d) {
+    var c = _c - b;
+    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+  },
+  easeInOutQuart: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d / 2) < 1) {
+      return c / 2 * t * t * t * t + b;
+    } else {
+      return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+    }
+  },
+  easeInQuint: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * (t /= d) * t * t * t * t + b;
+  },
+  easeOutQuint: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+  },
+  easeInOutQuint: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d / 2) < 1) {
+      return c / 2 * t * t * t * t * t + b;
+    } else {
+      return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+    }
+  },
+  easeInSine: function(t, b, _c, d) {
+    var c = _c - b;
+    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+  },
+  easeOutSine: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * Math.sin(t / d * (Math.PI / 2)) + b;
+  },
+  easeInOutSine: function(t, b, _c, d) {
+    var c = _c - b;
+    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+  },
+  easeInExpo: function(t, b, _c, d) {
+    var c = _c - b;
+    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+  },
+  easeOutExpo: function(t, b, _c, d) {
+    var c = _c - b;
+    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+  },
+  easeInOutExpo: function(t, b, _c, d) {
+    var c = _c - b;
+    if (t === 0) {
+      return b;
+    }
+    if (t === d) {
+      return b + c;
+    }
+    if ((t /= d / 2) < 1) {
+      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+    } else {
+      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+    }
+  },
+  easeInCirc: function(t, b, _c, d) {
+    var c = _c - b;
+    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+  },
+  easeOutCirc: function(t, b, _c, d) {
+    var c = _c - b;
+    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+  },
+  easeInOutCirc: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d / 2) < 1) {
+      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+    } else {
+      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+    }
+  },
+  easeInElastic: function(t, b, _c, d) {
+    var c = _c - b;
+    var a, p, s;
+    s = 1.70158;
+    p = 0;
+    a = c;
+    if (t === 0) {
+      return b;
+    } else if ((t /= d) === 1) {
+      return b + c;
+    }
+    if (!p) {
+      p = d * 0.3;
+    }
+    if (a < Math.abs(c)) {
+      a = c;
+      s = p / 4;
+    } else {
+      s = p / (2 * Math.PI) * Math.asin(c / a);
+    }
+    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+  },
+  easeOutElastic: function(t, b, _c, d) {
+    var c = _c - b;
+    var a, p, s;
+    s = 1.70158;
+    p = 0;
+    a = c;
+    if (t === 0) {
+      return b;
+    } else if ((t /= d) === 1) {
+      return b + c;
+    }
+    if (!p) {
+      p = d * 0.3;
+    }
+    if (a < Math.abs(c)) {
+      a = c;
+      s = p / 4;
+    } else {
+      s = p / (2 * Math.PI) * Math.asin(c / a);
+    }
+    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+  },
+  easeInOutElastic: function(t, b, _c, d) {
+    var c = _c - b;
+    var a, p, s;
+    s = 1.70158;
+    p = 0;
+    a = c;
+    if (t === 0) {
+      return b;
+    } else if ((t /= d / 2) === 2) {
+      return b + c;
+    }
+    if (!p) {
+      p = d * (0.3 * 1.5);
+    }
+    if (a < Math.abs(c)) {
+      a = c;
+      s = p / 4;
+    } else {
+      s = p / (2 * Math.PI) * Math.asin(c / a);
+    }
+    if (t < 1) {
+      return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+    } else {
+      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
+    }
+  },
+  easeInBack: function(t, b, _c, d, s) {
+    var c = _c - b;
+    if (s === void 0) {
+      s = 1.70158;
+    }
+    return c * (t /= d) * t * ((s + 1) * t - s) + b;
+  },
+  easeOutBack: function(t, b, _c, d, s) {
+    var c = _c - b;
+    if (s === void 0) {
+      s = 1.70158;
+    }
+    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+  },
+  easeInOutBack: function(t, b, _c, d, s) {
+    var c = _c - b;
+    if (s === void 0) {
+      s = 1.70158;
+    }
+    if ((t /= d / 2) < 1) {
+      return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
+    } else {
+      return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
+    }
+  },
+  easeInBounce: function(t, b, _c, d) {
+    var c = _c - b;
+    var v;
+    v = tweenFunctions.easeOutBounce(d - t, 0, c, d);
+    return c - v + b;
+  },
+  easeOutBounce: function(t, b, _c, d) {
+    var c = _c - b;
+    if ((t /= d) < 1 / 2.75) {
+      return c * (7.5625 * t * t) + b;
+    } else if (t < 2 / 2.75) {
+      return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;
+    } else if (t < 2.5 / 2.75) {
+      return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
+    } else {
+      return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
+    }
+  },
+  easeInOutBounce: function(t, b, _c, d) {
+    var c = _c - b;
+    var v;
+    if (t < d / 2) {
+      v = tweenFunctions.easeInBounce(t * 2, 0, c, d);
+      return v * 0.5 + b;
+    } else {
+      v = tweenFunctions.easeOutBounce(t * 2 - d, 0, c, d);
+      return v * 0.5 + c * 0.5 + b;
+    }
+  }
+};
+
+var tweenFunctions_1 = tweenFunctions;
+
+function degreesToRads(degrees) {
+    return (degrees * Math.PI) / 180;
+}
+function randomRange(min, max) {
+    return min + Math.random() * (max - min);
+}
+function randomInt(min, max) {
+    return Math.floor(min + Math.random() * (max - min + 1));
+}
+
+var ParticleShape;
+(function (ParticleShape) {
+    ParticleShape[ParticleShape["Circle"] = 0] = "Circle";
+    ParticleShape[ParticleShape["Square"] = 1] = "Square";
+    ParticleShape[ParticleShape["Strip"] = 2] = "Strip";
+})(ParticleShape || (ParticleShape = {}));
+var RotationDirection;
+(function (RotationDirection) {
+    RotationDirection[RotationDirection["Positive"] = 1] = "Positive";
+    RotationDirection[RotationDirection["Negative"] = -1] = "Negative";
+})(RotationDirection || (RotationDirection = {}));
+const DEFAULT_FRAME_TIME = 1000 / 60;
+class Particle {
+    constructor(context, getOptions, x, y) {
+        this.getOptions = getOptions;
+        const { colors, initialVelocityX, initialVelocityY } = this.getOptions();
+        this.context = context;
+        this.x = x;
+        this.y = y;
+        this.w = randomRange(5, 20);
+        this.h = randomRange(5, 20);
+        this.radius = randomRange(5, 10);
+        this.vx =
+            typeof initialVelocityX === 'number'
+                ? randomRange(-initialVelocityX, initialVelocityX)
+                : randomRange(initialVelocityX.min, initialVelocityX.max);
+        this.vy =
+            typeof initialVelocityY === 'number'
+                ? randomRange(-initialVelocityY, 0)
+                : randomRange(initialVelocityY.min, initialVelocityY.max);
+        this.shape = randomInt(0, 2);
+        this.angle = degreesToRads(randomRange(0, 360));
+        this.angularSpin = randomRange(-0.2, 0.2);
+        this.color = colors[Math.floor(Math.random() * colors.length)];
+        this.rotateY = randomRange(0, 1);
+        this.rotationDirection = randomRange(0, 1)
+            ? RotationDirection.Positive
+            : RotationDirection.Negative;
+    }
+    update(elapsed) {
+        const { gravity, wind, friction, opacity, drawShape } = this.getOptions();
+        const frameTimeMultiplier = elapsed / DEFAULT_FRAME_TIME;
+        this.x += this.vx * frameTimeMultiplier;
+        this.y += this.vy * frameTimeMultiplier;
+        this.vy += gravity * frameTimeMultiplier;
+        this.vx += wind * frameTimeMultiplier;
+        this.vx *= friction ** frameTimeMultiplier;
+        this.vy *= friction ** frameTimeMultiplier;
+        if (this.rotateY >= 1 &&
+            this.rotationDirection === RotationDirection.Positive) {
+            this.rotationDirection = RotationDirection.Negative;
+        }
+        else if (this.rotateY <= -1 &&
+            this.rotationDirection === RotationDirection.Negative) {
+            this.rotationDirection = RotationDirection.Positive;
+        }
+        const rotateDelta = 0.1 * this.rotationDirection * frameTimeMultiplier;
+        this.rotateY += rotateDelta;
+        this.angle += this.angularSpin;
+        this.context.save();
+        this.context.translate(this.x, this.y);
+        this.context.rotate(this.angle);
+        this.context.scale(1, this.rotateY);
+        this.context.rotate(this.angle);
+        this.context.beginPath();
+        this.context.fillStyle = this.color;
+        this.context.strokeStyle = this.color;
+        this.context.globalAlpha = opacity;
+        this.context.lineCap = 'round';
+        this.context.lineWidth = 2;
+        if (drawShape && typeof drawShape === 'function') {
+            drawShape.call(this, this.context);
+        }
+        else {
+            switch (this.shape) {
+                case ParticleShape.Circle: {
+                    this.context.beginPath();
+                    this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+                    this.context.fill();
+                    break;
+                }
+                case ParticleShape.Square: {
+                    this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
+                    break;
+                }
+                case ParticleShape.Strip: {
+                    this.context.fillRect(-this.w / 6, -this.h / 2, this.w / 3, this.h);
+                    break;
+                }
+            }
+        }
+        this.context.closePath();
+        this.context.restore();
+    }
+}
+
+class ParticleGenerator {
+    constructor(canvas, getOptions) {
+        this.x = 0;
+        this.y = 0;
+        this.w = 0;
+        this.h = 0;
+        this.lastNumberOfPieces = 0;
+        this.tweenProgress = 0;
+        this.tweenFrom = 0;
+        this.particles = [];
+        this.particlesGenerated = 0;
+        this.removeParticleAt = (i) => {
+            this.particles.splice(i, 1);
+        };
+        this.getParticle = () => {
+            const newParticleX = randomRange(this.x, this.w + this.x);
+            const newParticleY = randomRange(this.y, this.h + this.y);
+            return new Particle(this.context, this.getOptions, newParticleX, newParticleY);
+        };
+        this.animate = (elapsed) => {
+            const { canvas, context, particlesGenerated, lastNumberOfPieces } = this;
+            const { run, recycle, numberOfPieces, debug, tweenFunction, tweenDuration, } = this.getOptions();
+            if (!run) {
+                return false;
+            }
+            const nP = this.particles.length;
+            const activeCount = recycle ? nP : particlesGenerated;
+            // Initial population
+            if (activeCount < numberOfPieces) {
+                // Use the numberOfPieces prop as a key to reset the easing timing
+                if (lastNumberOfPieces !== numberOfPieces) {
+                    this.tweenProgress = 0;
+                    this.tweenFrom = activeCount;
+                    this.lastNumberOfPieces = numberOfPieces;
+                }
+                // Clamp tweenProgress between 0 and tweenDuration
+                this.tweenProgress = Math.min(tweenDuration, Math.max(0, this.tweenProgress + elapsed));
+                const tweenedVal = tweenFunction(this.tweenProgress, this.tweenFrom, numberOfPieces, tweenDuration);
+                const numToAdd = Math.round(tweenedVal - activeCount);
+                for (let i = 0; i < numToAdd; i++) {
+                    this.particles.push(this.getParticle());
+                }
+                this.particlesGenerated += numToAdd;
+            }
+            if (debug) {
+                // Draw debug text
+                context.font = '12px sans-serif';
+                context.fillStyle = '#333';
+                context.textAlign = 'right';
+                context.fillText(`Particles: ${nP}`, canvas.width - 10, canvas.height - 20);
+            }
+            // Maintain the population, iterating backwards to prevent issues when removing particles
+            for (let i = this.particles.length - 1; i >= 0; i--) {
+                const p = this.particles[i];
+                // Update each particle's position
+                p.update(elapsed);
+                // Prune the off-canvas particles
+                if (p.y > canvas.height ||
+                    p.y < -100 ||
+                    p.x > canvas.width + 100 ||
+                    p.x < -100) {
+                    if (recycle && activeCount <= numberOfPieces) {
+                        // Replace the particle with a brand new one
+                        this.particles[i] = this.getParticle();
+                    }
+                    else {
+                        this.removeParticleAt(i);
+                    }
+                }
+            }
+            return nP > 0 || activeCount < numberOfPieces;
+        };
+        this.canvas = canvas;
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Could not get canvas context');
+        }
+        this.context = ctx;
+        this.getOptions = getOptions;
+    }
+}
+
+const confettiDefaults = {
+    width: typeof window !== 'undefined' ? window.innerWidth : 300,
+    height: typeof window !== 'undefined' ? window.innerHeight : 200,
+    numberOfPieces: 200,
+    friction: 0.99,
+    wind: 0,
+    gravity: 0.1,
+    initialVelocityX: 4,
+    initialVelocityY: 10,
+    colors: [
+        '#f44336',
+        '#e91e63',
+        '#9c27b0',
+        '#673ab7',
+        '#3f51b5',
+        '#2196f3',
+        '#03a9f4',
+        '#00bcd4',
+        '#009688',
+        '#4CAF50',
+        '#8BC34A',
+        '#CDDC39',
+        '#FFEB3B',
+        '#FFC107',
+        '#FF9800',
+        '#FF5722',
+        '#795548',
+    ],
+    opacity: 1.0,
+    debug: false,
+    tweenFunction: tweenFunctions_1.easeInOutQuad,
+    tweenDuration: 5000,
+    recycle: true,
+    run: true,
+};
+class Confetti {
+    constructor(canvas, opts) {
+        this.lastFrameTime = 0;
+        this.setOptionsWithDefaults = (opts) => {
+            const computedConfettiDefaults = {
+                confettiSource: {
+                    x: 0,
+                    y: 0,
+                    w: this.canvas.width,
+                    h: 0,
+                },
+            };
+            this._options = {
+                ...computedConfettiDefaults,
+                ...confettiDefaults,
+                ...opts,
+            };
+            Object.assign(this, opts.confettiSource);
+        };
+        this.update = (timestamp = 0) => {
+            const { options: { run, onConfettiComplete, frameRate }, canvas, context, } = this;
+            // Cap elapsed time to 50ms to prevent large time steps
+            const elapsed = Math.min(timestamp - this.lastFrameTime, 50);
+            // Throttle the frame rate if set
+            if (frameRate && elapsed < 1000 / frameRate) {
+                this.rafId = requestAnimationFrame(this.update);
+                return;
+            }
+            this.lastFrameTime = timestamp - (frameRate ? elapsed % frameRate : 0);
+            if (run) {
+                context.fillStyle = 'white';
+                context.clearRect(0, 0, canvas.width, canvas.height);
+            }
+            if (this.generator.animate(elapsed)) {
+                this.rafId = requestAnimationFrame(this.update);
+            }
+            else {
+                if (onConfettiComplete &&
+                    typeof onConfettiComplete === 'function' &&
+                    this.generator.particlesGenerated > 0) {
+                    onConfettiComplete.call(this, this);
+                }
+                this._options.run = false;
+            }
+        };
+        this.reset = () => {
+            if (this.generator && this.generator.particlesGenerated > 0) {
+                this.generator.particlesGenerated = 0;
+                this.generator.particles = [];
+                this.generator.lastNumberOfPieces = 0;
+            }
+        };
+        this.stop = () => {
+            this.options = { run: false };
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = undefined;
+            }
+        };
+        this.canvas = canvas;
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Could not get canvas context');
+        }
+        this.context = ctx;
+        this.generator = new ParticleGenerator(this.canvas, () => this.options);
+        this.options = opts;
+        this.update();
+    }
+    get options() {
+        return this._options;
+    }
+    set options(opts) {
+        const lastRunState = this._options?.run;
+        const lastRecycleState = this._options?.recycle;
+        this.setOptionsWithDefaults(opts);
+        if (this.generator) {
+            Object.assign(this.generator, this.options.confettiSource);
+            if (typeof opts.recycle === 'boolean' &&
+                opts.recycle &&
+                lastRecycleState === false) {
+                this.generator.lastNumberOfPieces = this.generator.particles.length;
+            }
+        }
+        if (typeof opts.run === 'boolean' && opts.run && lastRunState === false) {
+            this.update();
+        }
+    }
+}
+
+const ref = React__default.createRef();
+class ReactConfettiInternal extends React__default.Component {
+    constructor(props) {
+        super(props);
+        this.canvas = React__default.createRef();
+        this.canvas = props.canvasRef || ref;
+    }
+    componentDidMount() {
+        if (this.canvas.current) {
+            const opts = extractCanvasProps(this.props)[0];
+            this.confetti = new Confetti(this.canvas.current, opts);
+        }
+    }
+    componentDidUpdate() {
+        const confettiOptions = extractCanvasProps(this.props)[0];
+        if (this.confetti) {
+            this.confetti.options = confettiOptions;
+        }
+    }
+    componentWillUnmount() {
+        if (this.confetti) {
+            this.confetti.stop();
+        }
+        this.confetti = undefined;
+    }
+    render() {
+        const [confettiOptions, passedProps] = extractCanvasProps(this.props);
+        const canvasStyles = {
+            zIndex: 2,
+            position: 'absolute',
+            pointerEvents: 'none',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            ...passedProps.style,
+        };
+        return (jsx("canvas", { width: confettiOptions.width, height: confettiOptions.height, ref: this.canvas, ...passedProps, style: canvasStyles }));
+    }
+}
+ReactConfettiInternal.defaultProps = {
+    ...confettiDefaults,
+};
+ReactConfettiInternal.displayName = 'ReactConfetti';
+function extractCanvasProps(props) {
+    const confettiOptions = {};
+    const refs = {};
+    const rest = {};
+    const confettiOptionKeys = [
+        ...Object.keys(confettiDefaults),
+        'confettiSource',
+        'drawShape',
+        'onConfettiComplete',
+        'frameRate',
+    ];
+    const refProps = ['canvasRef'];
+    for (const prop in props) {
+        const val = props[prop];
+        if (confettiOptionKeys.includes(prop)) {
+            confettiOptions[prop] = val;
+        }
+        else if (refProps.includes(prop)) {
+            refProps[prop] = val;
+        }
+        else {
+            rest[prop] = val;
+        }
+    }
+    return [confettiOptions, rest, refs];
+}
+const ReactConfetti = React__default.forwardRef((props, ref) => jsx(ReactConfettiInternal, { canvasRef: ref, ...props }));
 
 var GENERAL_ONBOARDING_STEPS = {
   WELCOME: "welcome",
@@ -58,9 +654,6 @@ var GENERAL_ONBOARDING_STEPS = {
   FINISH: "finish"
 };
 
-var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:0;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:.5rem 1rem;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}";
-n(css,{});
-
 var HelpScreen = function HelpScreen(_ref) {
   var setCurrentStep = _ref.setCurrentStep,
     helpScreenClassName = _ref.helpScreenClassName;
@@ -109,8 +702,8 @@ var HelpScreen = function HelpScreen(_ref) {
   });
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
   var helpStep = {
     key: GENERAL_ONBOARDING_STEPS.HELP,
@@ -122,11 +715,101 @@ var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentS
     })
   };
   return onboardingSteps.concat(helpStep).map(function (step, idx) {
-    return _objectSpread(_objectSpread({}, step), {}, {
+    return _objectSpread$1(_objectSpread$1({}, step), {}, {
       id: idx + 1
     });
   });
 };
+var getWindowDimensions = function getWindowDimensions() {
+  return typeof window !== "undefined" ? {
+    width: window.innerWidth,
+    height: window.innerHeight
+  } : {
+    width: 100,
+    height: 100
+  };
+};
+
+var useWindowDimensions = function useWindowDimensions() {
+  var _useState = useState({
+      width: 100,
+      height: 100
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowDimensions = _useState2[0],
+    setWindowDimensions = _useState2[1];
+  useLayoutEffect(function () {
+    setWindowDimensions(getWindowDimensions());
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowDimensions;
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CompletedScreen = function CompletedScreen(_ref) {
+  var completeButtonProps = _ref.completeButtonProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    dropConfetti = _useState2[0],
+    setDropConfetti = _useState2[1];
+  var _useWindowDimensions = useWindowDimensions(),
+    height = _useWindowDimensions.height,
+    width = _useWindowDimensions.width;
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      return setDropConfetti(false);
+    }, 10000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-molecules-onboarding__wrapper",
+    "data-testid": "onboarding-congratulations-wrapper",
+    children: [/*#__PURE__*/jsx(ReactConfetti, {
+      height: height,
+      width: width,
+      recycle: dropConfetti
+    }), /*#__PURE__*/jsxs("div", {
+      className: "mx-auto mb-6 w-full max-w-2xl space-y-2 px-6 pt-16",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "text-center",
+        "data-cy": "onboarding-congratulations-emoji",
+        style: "h1",
+        children: "\uD83C\uDF89"
+      }), /*#__PURE__*/jsxs(Typography, {
+        className: "text-center",
+        "data-cy": "onboarding-congratulations-title",
+        "data-testid": "onboarding-congratulations-title",
+        style: "h1",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "neeto-ui-text-success-500",
+          children: t("neetoMolecules.onboarding.congratulations")
+        }), /*#__PURE__*/jsx("br", {}), t("neetoMolecules.onboarding.readyToUse", {
+          appName: capitalize(globalProps.appName)
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Button, _objectSpread({
+      "data-cy": "onboarding-congratulations-button",
+      "data-testid": "onboarding-congratulations-button",
+      label: t("neetoMolecules.onboarding.helpScreen.startUsingButton", {
+        appName: globalProps.appName
+      })
+    }, completeButtonProps))]
+  });
+};
+
+var css = ".neeto-molecules-onboarding__wrapper{align-items:center;display:flex;flex-direction:column;flex-grow:1;height:100vh;overflow-y:auto;padding:0;width:100%}.neeto-molecules-onboarding__container{display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;width:100%}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:.5rem 1rem;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}";
+n(css,{});
 
 var WelcomeScreen = withT(function (_ref) {
   var t = _ref.t,