@onepercentio/one-ui 0.19.2 → 0.19.4

package/dist/components/LavaLamp/LavaLamp.js

@@ -1,76 +1,113 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const LavaLamp_data_1 = __importDefault(require("./LavaLamp.data"));
-const LavaLamp_module_scss_1 = __importDefault(require("./LavaLamp.module.scss"));
+exports.default = LavaLamp;
+var _react = _interopRequireWildcard(require("react"));
+var _LavaLamp = _interopRequireDefault(require("./LavaLamp.data"));
+var _LavaLampModule = _interopRequireDefault(require("./LavaLamp.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * A peaceful component simulating an interactive lavalamp
  **/
-function LavaLamp({ className, children, }) {
-    const circleRef = (0, react_1.useRef)(null);
-    const { relativeTo, d, circlesConfig } = (0, LavaLamp_data_1.default)((cx, cy) => {
-        const style = circleRef.current.style;
-        style.cx = cx;
-        style.cy = cy;
-    }, (size) => {
-        const style = circleRef.current.style;
-        style.r = size;
+function LavaLamp(_ref) {
+  let className = _ref.className,
+    children = _ref.children;
+  const circleRef = (0, _react.useRef)(null);
+  const _useLavaLampSetup = (0, _LavaLamp.default)(function () {}, function () {}),
+    relativeTo = _useLavaLampSetup.relativeTo,
+    d = _useLavaLampSetup.d,
+    circlesConfig = _useLavaLampSetup.circlesConfig;
+  const randomCircles = (0, _react.useMemo)(function () {
+    return circlesConfig.map(function (_ref2) {
+      let baseSize = _ref2.baseSize,
+        startX = _ref2.startX,
+        startY = _ref2.startY,
+        translateX = _ref2.translateX,
+        translateY = _ref2.translateY;
+      return /*#__PURE__*/_react.default.createElement("circle", {
+        r: baseSize + Math.random() * (baseSize / 2),
+        fill: "#fff",
+        cx: startX,
+        cy: startY
+      }, /*#__PURE__*/_react.default.createElement("animateTransform", {
+        additive: "sum",
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "translate",
+        values: "0 0; ".concat(translateX, " ").concat(translateY, "; 0 0;"),
+        dur: "".concat(5 + Math.random() * 5, "s"),
+        repeatCount: "indefinite"
+      }));
     });
-    const randomCircles = (0, react_1.useMemo)(() => {
-        return circlesConfig.map(({ baseSize, startX, startY, translateX, translateY }) => (react_1.default.createElement("circle", { r: baseSize + Math.random() * (baseSize / 2), fill: "#fff", cx: startX, cy: startY },
-            react_1.default.createElement("animateTransform", { additive: "sum", attributeName: "transform", attributeType: "XML", type: "translate", values: `0 0; ${translateX} ${translateY}; 0 0;`, dur: `${5 + Math.random() * 5}s`, repeatCount: "indefinite" }))));
-    }, [circlesConfig]);
-    return (react_1.default.createElement("div", { ref: relativeTo, className: `${LavaLamp_module_scss_1.default.root} ${className}` },
-        d && (react_1.default.createElement("svg", { className: LavaLamp_module_scss_1.default.effect, viewBox: `0 0 ${d.width} ${d.height}` },
-            react_1.default.createElement("filter", { id: `goo-lava-lamp`, width: "10", height: "10", x: "0%", y: "0%", filterRes: "1" },
-                react_1.default.createElement("feGaussianBlur", { in: "SourceGraphic", result: "blur", stdDeviation: "40" }),
-                react_1.default.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -7", result: "goo" })),
-            react_1.default.createElement("mask", { id: `mask-lava-lamp` },
-                react_1.default.createElement("g", { filter: `url(#${`goo-lava-lamp`})`, fill: "#fff" },
-                    randomCircles,
-                    react_1.default.createElement("circle", { ref: circleRef, fill: "#fff" }))),
-            react_1.default.createElement("defs", null,
-                react_1.default.createElement("radialGradient", { id: "grad1", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" },
-                    react_1.default.createElement("stop", { offset: "0%", style: {
-                            stopColor: "var(--lava-lamp-color-a)",
-                            stopOpacity: 1,
-                        } }),
-                    react_1.default.createElement("stop", { offset: "67.33%", style: {
-                            stopColor: "var(--lava-lamp-color-b)",
-                            stopOpacity: 1,
-                        } }),
-                    react_1.default.createElement("stop", { offset: "88.33%", style: {
-                            stopColor: "var(--lava-lamp-color-c)",
-                            stopOpacity: 1,
-                        } }))),
-            react_1.default.createElement("rect", { x: "-50%", y: "-50%", mask: `url(#${`mask-lava-lamp`})`, width: "200%", height: "200%", style: { fill: "url(#grad1)" } }))),
-        react_1.default.createElement("div", null, children)));
-}
-exports.default = LavaLamp;
-//# sourceMappingURL=LavaLamp.js.map
+  }, [circlesConfig]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: relativeTo,
+    className: "".concat(_LavaLampModule.default.root, " ").concat(className)
+  }, d && /*#__PURE__*/_react.default.createElement("svg", {
+    className: _LavaLampModule.default.effect,
+    viewBox: "0 0 ".concat(d.width, " ").concat(d.height)
+  }, /*#__PURE__*/_react.default.createElement("filter", {
+    id: "goo-lava-lamp",
+    width: "10",
+    height: "10",
+    x: "0%",
+    y: "0%",
+    filterRes: "1"
+  }, /*#__PURE__*/_react.default.createElement("feGaussianBlur", {
+    in: "SourceGraphic",
+    result: "blur",
+    stdDeviation: "40"
+  }), /*#__PURE__*/_react.default.createElement("feColorMatrix", {
+    in: "blur",
+    mode: "matrix",
+    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -7",
+    result: "goo"
+  })), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask-lava-lamp"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    filter: "url(#".concat("goo-lava-lamp", ")"),
+    fill: "#fff"
+  }, randomCircles, /*#__PURE__*/_react.default.createElement("circle", {
+    ref: circleRef,
+    fill: "#fff"
+  }))), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("radialGradient", {
+    id: "grad1",
+    cx: "50%",
+    cy: "50%",
+    r: "50%",
+    fx: "50%",
+    fy: "50%"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0%",
+    style: {
+      stopColor: "var(--lava-lamp-color-a)",
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "67.33%",
+    style: {
+      stopColor: "var(--lava-lamp-color-b)",
+      stopOpacity: 1
+    }
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "88.33%",
+    style: {
+      stopColor: "var(--lava-lamp-color-c)",
+      stopOpacity: 1
+    }
+  }))), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "-50%",
+    y: "-50%",
+    mask: "url(#".concat("mask-lava-lamp", ")"),
+    width: "200%",
+    height: "200%",
+    style: {
+      fill: "url(#grad1)"
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", null, children));
+}

package/dist/components/LavaLamp/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var LavaLamp_1 = require("./LavaLamp");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LavaLamp_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _LavaLamp.default;
+  }
+});
+var _LavaLamp = _interopRequireDefault(require("./LavaLamp"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/LavaLamp/v2/LavaLamp.js

@@ -1,189 +1,207 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const useMergeRefs_1 = __importDefault(require("../../../hooks/useMergeRefs"));
-const LavaLamp_data_1 = __importStar(require("../LavaLamp.data"));
-const LavaLamp_module_scss_1 = __importDefault(require("./LavaLamp.module.scss"));
-function LavaLamp({ className, children, }) {
-    const guideConfig = (0, react_1.useRef)({
-        size: 0,
-        sizeTimestamp: Date.now(),
-        sizeIncrement: 0,
-        x: 0,
-        y: 0,
-        posTimestamp: Date.now(),
-        posIncrement: [0, 0],
-    });
-    const { relativeTo, circlesConfig, d } = (0, LavaLamp_data_1.default)((x, y) => {
-        guideConfig.current.posIncrement = [
-            x - guideConfig.current.x,
-            y - guideConfig.current.y,
-        ];
-        guideConfig.current.x = x;
-        guideConfig.current.y = y;
-        guideConfig.current.posTimestamp = Date.now();
-    }, (_size) => {
-        const size = _size * 1.2;
-        guideConfig.current.sizeIncrement =
-            guideConfig.current.size === 0 ? 0 : size - guideConfig.current.size;
-        guideConfig.current.size = size;
-        guideConfig.current.sizeTimestamp = Date.now();
-    });
-    const _canvasRef = (0, react_1.useRef)(null);
-    const canvasRef = (0, useMergeRefs_1.default)(_canvasRef, relativeTo);
-    (0, react_1.useEffect)(() => {
-        if (!d)
-            return;
-        const fc = canvasRef.current;
-        const baseColor = getComputedStyle(relativeTo.current).getPropertyValue("--digital-blue") || "#000000";
-        var c = document.createElement("canvas"), w = (c.width = fc.width = d.width), h = (c.height = fc.height = d.height), ctx = c.getContext("2d"), fctx = fc.getContext("2d"), // f means final
-        opts = {
-            orbCount: circlesConfig.length,
-            baseVel: Math.max(d.width * 0.0010, 1),
-            addedVel: Math.max(d.width * 0.0010, 1),
-            alphaThreshold: 200,
-        }, orbs = [];
-        let animFrame;
-        function anim() {
-            animFrame = window.requestAnimationFrame(anim);
-            ctx.clearRect(0, 0, w, h);
-            fctx.fillStyle = "#0000";
-            fctx.fillRect(0, 0, w, h);
-            for (var i = 0; i < orbs.length; i++)
-                orbs[i].step();
-            var image = ctx.getImageData(0, 0, w, h), data = new Uint8Array(image.data.buffer);
-            for (var i = 3; i < data.length; i += 4)
-                data[i] /= data[i] < opts.alphaThreshold ? 6 : 1;
-            fctx.putImageData(image, 0, 0);
-        }
-        class BaseOrb {
-            oldDrawCircle(x, y, radius) {
-                ctx.fillStyle = this.gradient;
-                ctx.translate(x | 0, y | 0);
-                ctx.beginPath();
-                ctx.arc(0, 0, radius, 0, Math.PI * 2);
-                ctx.fill();
-                ctx.translate(-x | 0, -y | 0);
-            }
-            drawCircle(x, y, radius) {
-                this.oldDrawCircle(x, y, radius);
-            }
+exports.default = LavaLamp;
+var _react = _interopRequireWildcard(require("react"));
+var _useMergeRefs = _interopRequireDefault(require("../../../hooks/useMergeRefs"));
+var _LavaLamp = _interopRequireWildcard(require("../LavaLamp.data"));
+var _LavaLampModule = _interopRequireDefault(require("./LavaLamp.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function LavaLamp(_ref) {
+  let className = _ref.className,
+    children = _ref.children;
+  const guideConfig = (0, _react.useRef)({
+    size: 0,
+    sizeTimestamp: Date.now(),
+    sizeIncrement: 0,
+    x: 0,
+    y: 0,
+    posTimestamp: Date.now(),
+    posIncrement: [0, 0]
+  });
+  const _useLavaLampSetup = (0, _LavaLamp.default)(function (x, y) {
+      guideConfig.current.posIncrement = [x - guideConfig.current.x, y - guideConfig.current.y];
+      guideConfig.current.x = x;
+      guideConfig.current.y = y;
+      guideConfig.current.posTimestamp = Date.now();
+    }, function (_size) {
+      const size = _size * 1.2;
+      guideConfig.current.sizeIncrement = guideConfig.current.size === 0 ? 0 : size - guideConfig.current.size;
+      guideConfig.current.size = size;
+      guideConfig.current.sizeTimestamp = Date.now();
+    }),
+    relativeTo = _useLavaLampSetup.relativeTo,
+    circlesConfig = _useLavaLampSetup.circlesConfig,
+    d = _useLavaLampSetup.d;
+  const _canvasRef = (0, _react.useRef)(null);
+  const canvasRef = (0, _useMergeRefs.default)(_canvasRef, relativeTo);
+  (0, _react.useEffect)(function () {
+    if (!d) return;
+    const fc = canvasRef.current;
+    const baseColor = getComputedStyle(relativeTo.current).getPropertyValue("--digital-blue") || "#000000";
+    var c = document.createElement("canvas"),
+      w = c.width = fc.width = d.width,
+      h = c.height = fc.height = d.height,
+      ctx = c.getContext("2d"),
+      fctx = fc.getContext("2d"),
+      // f means final
+      opts = {
+        orbCount: circlesConfig.length,
+        baseVel: Math.max(d.width * 0.0010, 1),
+        addedVel: Math.max(d.width * 0.0010, 1),
+        alphaThreshold: 200
+      },
+      orbs = [];
+    let animFrame;
+    function anim() {
+      animFrame = window.requestAnimationFrame(anim);
+      ctx.clearRect(0, 0, w, h);
+      fctx.fillStyle = "#0000";
+      fctx.fillRect(0, 0, w, h);
+      for (var i = 0; i < orbs.length; i++) orbs[i].step();
+      var image = ctx.getImageData(0, 0, w, h),
+        data = new Uint8Array(image.data.buffer);
+      for (var i = 3; i < data.length; i += 4) data[i] /= data[i] < opts.alphaThreshold ? 6 : 1;
+      fctx.putImageData(image, 0, 0);
+    }
+    let BaseOrb = /*#__PURE__*/function () {
+      function BaseOrb() {
+        _classCallCheck(this, BaseOrb);
+      }
+      _createClass(BaseOrb, [{
+        key: "oldDrawCircle",
+        value: function oldDrawCircle(x, y, radius) {
+          ctx.fillStyle = this.gradient;
+          ctx.translate(x | 0, y | 0);
+          ctx.beginPath();
+          ctx.arc(0, 0, radius, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.translate(-x | 0, -y | 0);
         }
-        class Orb extends BaseOrb {
-            constructor(radius) {
-                super();
-                this.x = (Math.random() * w) | 0;
-                this.y = (Math.random() * h) | 0;
-                this.radius = radius;
-                var color = baseColor;
-                this.gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.radius);
-                this.gradient.addColorStop(0, `${color}ff`);
-                this.gradient.addColorStop(0.8, `${color}cc`);
-                this.gradient.addColorStop(1, `${color}00`);
-                var radiant = Math.random() * Math.PI * 2, vel = (opts.baseVel + opts.addedVel * Math.random()) | 0;
-                vel *= 0.2;
-                this.vx = Math.cos(radiant) * vel;
-                this.vy = Math.sin(radiant) * vel;
-            }
-            step() {
-                this.x += this.vx;
-                this.y += this.vy;
-                var radius = this.radius / 2;
-                if (this.x < -radius || this.x > w + radius)
-                    this.vx *= -1;
-                if (this.y < -radius || this.y > h + radius)
-                    this.vy *= -1;
-                this.drawCircle(this.x | 0, this.y | 0, this.radius);
-            }
+      }, {
+        key: "drawCircle",
+        value: function drawCircle(x, y, radius) {
+          this.oldDrawCircle(x, y, radius);
         }
-        class GuideOrb extends BaseOrb {
-            step() {
-                const deltaTime = Date.now() - guideConfig.current.sizeTimestamp;
-                const deltaTimePercent = deltaTime > 250 ? 1 : (deltaTime * 100) / 250 / 100;
-                const radius = guideConfig.current.size -
-                    (guideConfig.current.sizeIncrement -
-                        guideConfig.current.sizeIncrement * deltaTimePercent);
-                this.lastRadius = radius;
-                var color = baseColor;
-                const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
-                gradient.addColorStop(0, `${color}ff`);
-                gradient.addColorStop(0.8, `${color}cc`);
-                gradient.addColorStop(1, `${color}00`);
-                this.gradient = gradient;
-                const deltaTimePos = Date.now() - guideConfig.current.posTimestamp;
-                const deltaTimePosPercent = deltaTimePos > LavaLamp_data_1.transitionPositionMs
-                    ? 1
-                    : (deltaTimePos * 100) / LavaLamp_data_1.transitionPositionMs / 100;
-                const translateX = guideConfig.current.x -
-                    (guideConfig.current.posIncrement[0] -
-                        guideConfig.current.posIncrement[0] * deltaTimePosPercent);
-                this.lastX = translateX;
-                const translateY = guideConfig.current.y -
-                    (guideConfig.current.posIncrement[1] -
-                        guideConfig.current.posIncrement[1] * deltaTimePosPercent);
-                this.lastY = translateY;
-                this.drawCircle(translateX | 0, translateY | 0, radius);
-            }
+      }]);
+      return BaseOrb;
+    }();
+    let Orb = /*#__PURE__*/function (_BaseOrb) {
+      _inherits(Orb, _BaseOrb);
+      var _super = _createSuper(Orb);
+      function Orb(radius) {
+        var _this;
+        _classCallCheck(this, Orb);
+        _this = _super.call(this);
+        _this.x = Math.random() * w | 0;
+        _this.y = Math.random() * h | 0;
+        _this.radius = radius;
+        var color = baseColor;
+        _this.gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, _this.radius);
+        _this.gradient.addColorStop(0, "".concat(color, "ff"));
+        _this.gradient.addColorStop(0.8, "".concat(color, "cc"));
+        _this.gradient.addColorStop(1, "".concat(color, "00"));
+        var radiant = Math.random() * Math.PI * 2,
+          vel = opts.baseVel + opts.addedVel * Math.random() | 0;
+        vel *= 0.2;
+        _this.vx = Math.cos(radiant) * vel;
+        _this.vy = Math.sin(radiant) * vel;
+        return _this;
+      }
+      _createClass(Orb, [{
+        key: "step",
+        value: function step() {
+          this.x += this.vx;
+          this.y += this.vy;
+          var radius = this.radius / 2;
+          if (this.x < -radius || this.x > w + radius) this.vx *= -1;
+          if (this.y < -radius || this.y > h + radius) this.vy *= -1;
+          this.drawCircle(this.x | 0, this.y | 0, this.radius);
         }
-        for (let circleConfig of circlesConfig) {
-            const radius = circleConfig.baseSize * 1.5;
-            const randomRadius = (radius + (radius / 2) * Math.random()) | 0;
-            orbs.push(new Orb(randomRadius));
+      }]);
+      return Orb;
+    }(BaseOrb);
+    let GuideOrb = /*#__PURE__*/function (_BaseOrb2) {
+      _inherits(GuideOrb, _BaseOrb2);
+      var _super2 = _createSuper(GuideOrb);
+      function GuideOrb() {
+        _classCallCheck(this, GuideOrb);
+        return _super2.apply(this, arguments);
+      }
+      _createClass(GuideOrb, [{
+        key: "step",
+        value: function step() {
+          const deltaTime = Date.now() - guideConfig.current.sizeTimestamp;
+          const deltaTimePercent = deltaTime > 250 ? 1 : deltaTime * 100 / 250 / 100;
+          const radius = guideConfig.current.size - (guideConfig.current.sizeIncrement - guideConfig.current.sizeIncrement * deltaTimePercent);
+          this.lastRadius = radius;
+          var color = baseColor;
+          const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
+          gradient.addColorStop(0, "".concat(color, "ff"));
+          gradient.addColorStop(0.8, "".concat(color, "cc"));
+          gradient.addColorStop(1, "".concat(color, "00"));
+          this.gradient = gradient;
+          const deltaTimePos = Date.now() - guideConfig.current.posTimestamp;
+          const deltaTimePosPercent = deltaTimePos > _LavaLamp.transitionPositionMs ? 1 : deltaTimePos * 100 / _LavaLamp.transitionPositionMs / 100;
+          const translateX = guideConfig.current.x - (guideConfig.current.posIncrement[0] - guideConfig.current.posIncrement[0] * deltaTimePosPercent);
+          this.lastX = translateX;
+          const translateY = guideConfig.current.y - (guideConfig.current.posIncrement[1] - guideConfig.current.posIncrement[1] * deltaTimePosPercent);
+          this.lastY = translateY;
+          this.drawCircle(translateX | 0, translateY | 0, radius);
         }
-        const guideOrbInstance = new GuideOrb();
-        let guideOrbAutoInstance;
+      }]);
+      return GuideOrb;
+    }(BaseOrb);
+    for (let circleConfig of circlesConfig) {
+      const radius = circleConfig.baseSize * 1.5;
+      const randomRadius = radius + radius / 2 * Math.random() | 0;
+      orbs.push(new Orb(randomRadius));
+    }
+    const guideOrbInstance = new GuideOrb();
+    let guideOrbAutoInstance;
+    orbs.push(guideOrbInstance);
+    canvasRef.current.parentElement.onmouseleave = function () {
+      const indexOfGuide = orbs.indexOf(guideOrbInstance);
+      if (indexOfGuide !== -1) {
+        guideOrbAutoInstance = new Orb(guideOrbInstance.lastRadius);
+        guideOrbAutoInstance.radius = guideOrbInstance.lastRadius;
+        guideOrbAutoInstance.x = guideOrbInstance.lastX;
+        guideOrbAutoInstance.y = guideOrbInstance.lastY;
+        orbs.splice(indexOfGuide, 1);
+        orbs.push(guideOrbAutoInstance);
+      }
+    };
+    canvasRef.current.parentElement.onmouseenter = function () {
+      if (orbs.indexOf(guideOrbInstance) === -1) {
         orbs.push(guideOrbInstance);
-        canvasRef.current.parentElement.onmouseleave = () => {
-            const indexOfGuide = orbs.indexOf(guideOrbInstance);
-            if (indexOfGuide !== -1) {
-                guideOrbAutoInstance = new Orb(guideOrbInstance.lastRadius);
-                guideOrbAutoInstance.radius = guideOrbInstance.lastRadius;
-                guideOrbAutoInstance.x = guideOrbInstance.lastX;
-                guideOrbAutoInstance.y = guideOrbInstance.lastY;
-                orbs.splice(indexOfGuide, 1);
-                orbs.push(guideOrbAutoInstance);
-            }
-        };
-        canvasRef.current.parentElement.onmouseenter = () => {
-            if (orbs.indexOf(guideOrbInstance) === -1) {
-                orbs.push(guideOrbInstance);
-                orbs.splice(orbs.indexOf(guideOrbAutoInstance), 1);
-            }
-        };
-        anim();
-        return () => {
-            window.cancelAnimationFrame(animFrame);
-        };
-    }, [circlesConfig]);
-    return (react_1.default.createElement("div", { className: `${className} ${LavaLamp_module_scss_1.default.root}` },
-        react_1.default.createElement("canvas", { ref: canvasRef }),
-        react_1.default.createElement("div", null, children)));
-}
-exports.default = LavaLamp;
-//# sourceMappingURL=LavaLamp.js.map
+        orbs.splice(orbs.indexOf(guideOrbAutoInstance), 1);
+      }
+    };
+    anim();
+    return function () {
+      window.cancelAnimationFrame(animFrame);
+    };
+  }, [circlesConfig]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(className, " ").concat(_LavaLampModule.default.root)
+  }, /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasRef
+  }), /*#__PURE__*/_react.default.createElement("div", null, children));
+}