@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

package/dist/esm/components/segmentedControl/index.js

@@ -0,0 +1,42 @@
+import { _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+
+var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
+var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
+styleInject(css_248z);
+
+var SegmentedControl = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, values = _a.values, selectedIndex = _a.selectedIndex, onChange = _a.onChange;
+    var _c = useState({ left: 0, width: 0 }), selectedChipBackgroundWidthLeft = _c[0], setSelectedChipBackgroundWidthLeft = _c[1];
+    var chipContainer = useRef(null);
+    var height = typeof values[0] === 'string' ? 48 : 66;
+    useEffect(function () {
+        var _a;
+        var selectedChip = (_a = chipContainer.current) === null || _a === void 0 ? void 0 : _a.children[selectedIndex];
+        var left = selectedChip.offsetLeft;
+        var width = selectedChip.offsetWidth;
+        setSelectedChipBackgroundWidthLeft({ left: left, width: width });
+    }, [selectedIndex]);
+    return (jsx("div", __assign({ className: className }, { children: jsxs("div", __assign({ className: styles['background-container'] }, { children: [jsx("div", __assign({ ref: chipContainer, className: styles['chip-container'], style: { height: height + "px" } }, { children: values.map(function (value, index) {
+                        return (jsx("div", __assign({ role: "button", tabIndex: 0, onKeyDown: function (e) {
+                                if (e.key === 'Enter') {
+                                    onChange(index);
+                                }
+                            }, onClick: function () {
+                                onChange(index);
+                            }, className: styles.chip }, { children: typeof value === 'string' ? (jsx("div", __assign({ className: "p-h4 ta-center " + (selectedIndex === index ? '' : 'tc-primary-500') }, { children: value }), void 0)) : (jsxs(Fragment, { children: [jsx("div", __assign({ className: "p-h4 ta-center " + (selectedIndex === index ? '' : 'tc-primary-500') }, { children: value.title }), void 0),
+                                    jsx("div", __assign({ className: "p-p--small ta-center " + (selectedIndex === index
+                                            ? 'tc-grey-500'
+                                            : 'tc-primary-500') }, { children: value.subtitle }), void 0)] }, void 0)) }), typeof value === 'string' ? value : value.title));
+                    }) }), void 0),
+                jsx("div", { className: styles['select-chip-background'], style: {
+                        width: selectedChipBackgroundWidthLeft.width + "px",
+                        height: height - 16 + "px",
+                        left: selectedChipBackgroundWidthLeft.left + "px",
+                    } }, void 0)] }), void 0) }), void 0));
+};
+
+export default SegmentedControl;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/segmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAQM,gBAAgB,GAAG,UAAC,EAUzB;QATC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAOF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,sBAAK,SAAS,EAAE,SAAS,gBACvBC,uBAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,iBAC5CD,sBACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAK,MAAM,OAAI,EAAE,gBAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,sBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oCACrB,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,gBAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,YACF,KAENC,4BACED,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,CAAC,KAAK,YACR;oCACNA,sBACE,SAAS,EAAE,2BACT,aAAa,KAAK,KAAK;8CACnB,aAAa;8CACb,gBAAgB,CACpB,gBAED,KAAK,CAAC,QAAQ,YACX,YACL,CACJ,KA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,YACE;gBACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAK,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAK,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAK,+BAA+B,CAAC,IAAI,OAAI;qBAClD,WACD,aACE,YACF,EACN;AACJ;;;;"}

package/dist/esm/components/segmentedControl/index.test.js

@@ -0,0 +1,63 @@
+import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender } from '../../customRender-39982d87.js';
+import SegmentedControl from './index.js';
+import 'react';
+import 'react-dom';
+import '../../_commonjsHelpers-0f86abda.js';
+import 'react-dom/test-utils';
+import '../../style-inject.es-1f59c1d0.js';
+
+var setup = function (onChange) {
+    if (onChange === void 0) { onChange = function () { }; }
+    return customRender(jsx(SegmentedControl, { values: ['kg', 'lbs'], onChange: onChange, selectedIndex: 0 }, void 0));
+};
+describe('SegmentedControl component', function () {
+    it('Should provide the index of the clicked button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var callback, _a, getAllByRole, user, buttons;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    callback = jest.fn();
+                    _a = setup(callback), getAllByRole = _a.getAllByRole, user = _a.user;
+                    buttons = getAllByRole('button');
+                    // click first button
+                    return [4 /*yield*/, user.click(buttons[0])];
+                case 1:
+                    // click first button
+                    _b.sent();
+                    // click second button
+                    return [4 /*yield*/, user.click(buttons[1])];
+                case 2:
+                    // click second button
+                    _b.sent();
+                    expect(callback.mock.calls).toEqual([[0], [1]]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should provide the index of the selected button on key down', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var callback, _a, getAllByRole, user, buttons;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    callback = jest.fn();
+                    _a = setup(callback), getAllByRole = _a.getAllByRole, user = _a.user;
+                    buttons = getAllByRole('button');
+                    // focus first button and select with keyboard
+                    buttons[0].focus();
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 1:
+                    _b.sent();
+                    // focus second button and select with keyboard
+                    buttons[1].focus();
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 2:
+                    _b.sent();
+                    expect(callback.mock.calls).toEqual([[0], [1]]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=index.test.js.map

package/dist/esm/components/segmentedControl/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/segmentedControl/index.test.tsx"],"sourcesContent":[null],"names":["render","_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAG,UAAC,QAAoD;IAApD,yBAAA,EAAA,0BAAoD;IACjE,OAAOA,YAAM,CACXC,IAAC,gBAAgB,IACf,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EACrB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,WAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,4BAA4B,EAAE;IACrC,EAAE,CAAC,gDAAgD,EAAE;;;;;oBAC7C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;;oBAG7B,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;oBAE7B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE;;;;;oBAC1D,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;;oBAG/B,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;oBAE/B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/signaturePad/index.js

@@ -0,0 +1,560 @@
+import { e as __extends, _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { Component } from 'react';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+
+/*!
+ * Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
+ * (c) 2020 Szymon Nowak | Released under the MIT license
+ */
+
+class Point {
+    constructor(x, y, time) {
+        this.x = x;
+        this.y = y;
+        this.time = time || Date.now();
+    }
+    distanceTo(start) {
+        return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
+    }
+    equals(other) {
+        return this.x === other.x && this.y === other.y && this.time === other.time;
+    }
+    velocityFrom(start) {
+        return this.time !== start.time
+            ? this.distanceTo(start) / (this.time - start.time)
+            : 0;
+    }
+}
+
+class Bezier {
+    constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+        this.startPoint = startPoint;
+        this.control2 = control2;
+        this.control1 = control1;
+        this.endPoint = endPoint;
+        this.startWidth = startWidth;
+        this.endWidth = endWidth;
+    }
+    static fromPoints(points, widths) {
+        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+    }
+    static calculateControlPoints(s1, s2, s3) {
+        const dx1 = s1.x - s2.x;
+        const dy1 = s1.y - s2.y;
+        const dx2 = s2.x - s3.x;
+        const dy2 = s2.y - s3.y;
+        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+        const dxm = m1.x - m2.x;
+        const dym = m1.y - m2.y;
+        const k = l2 / (l1 + l2);
+        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+        const tx = s2.x - cm.x;
+        const ty = s2.y - cm.y;
+        return {
+            c1: new Point(m1.x + tx, m1.y + ty),
+            c2: new Point(m2.x + tx, m2.y + ty),
+        };
+    }
+    length() {
+        const steps = 10;
+        let length = 0;
+        let px;
+        let py;
+        for (let i = 0; i <= steps; i += 1) {
+            const t = i / steps;
+            const cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
+            const cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+            if (i > 0) {
+                const xdiff = cx - px;
+                const ydiff = cy - py;
+                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+            }
+            px = cx;
+            py = cy;
+        }
+        return length;
+    }
+    point(t, start, c1, c2, end) {
+        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
+            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
+            + (3.0 * c2 * (1.0 - t) * t * t)
+            + (end * t * t * t);
+    }
+}
+
+function throttle(fn, wait = 250) {
+    let previous = 0;
+    let timeout = null;
+    let result;
+    let storedContext;
+    let storedArgs;
+    const later = () => {
+        previous = Date.now();
+        timeout = null;
+        result = fn.apply(storedContext, storedArgs);
+        if (!timeout) {
+            storedContext = null;
+            storedArgs = [];
+        }
+    };
+    return function wrapper(...args) {
+        const now = Date.now();
+        const remaining = wait - (now - previous);
+        storedContext = this;
+        storedArgs = args;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = fn.apply(storedContext, storedArgs);
+            if (!timeout) {
+                storedContext = null;
+                storedArgs = [];
+            }
+        }
+        else if (!timeout) {
+            timeout = window.setTimeout(later, remaining);
+        }
+        return result;
+    };
+}
+
+class SignaturePad {
+    constructor(canvas, options = {}) {
+        this.canvas = canvas;
+        this.options = options;
+        this._handleMouseDown = (event) => {
+            if (event.which === 1) {
+                this._mouseButtonDown = true;
+                this._strokeBegin(event);
+            }
+        };
+        this._handleMouseMove = (event) => {
+            if (this._mouseButtonDown) {
+                this._strokeMoveUpdate(event);
+            }
+        };
+        this._handleMouseUp = (event) => {
+            if (event.which === 1 && this._mouseButtonDown) {
+                this._mouseButtonDown = false;
+                this._strokeEnd(event);
+            }
+        };
+        this._handleTouchStart = (event) => {
+            event.preventDefault();
+            if (event.targetTouches.length === 1) {
+                const touch = event.changedTouches[0];
+                this._strokeBegin(touch);
+            }
+        };
+        this._handleTouchMove = (event) => {
+            event.preventDefault();
+            const touch = event.targetTouches[0];
+            this._strokeMoveUpdate(touch);
+        };
+        this._handleTouchEnd = (event) => {
+            const wasCanvasTouched = event.target === this.canvas;
+            if (wasCanvasTouched) {
+                event.preventDefault();
+                const touch = event.changedTouches[0];
+                this._strokeEnd(touch);
+            }
+        };
+        this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
+        this.minWidth = options.minWidth || 0.5;
+        this.maxWidth = options.maxWidth || 2.5;
+        this.throttle = ('throttle' in options ? options.throttle : 16);
+        this.minDistance = ('minDistance' in options
+            ? options.minDistance
+            : 5);
+        this.dotSize =
+            options.dotSize ||
+                function dotSize() {
+                    return (this.minWidth + this.maxWidth) / 2;
+                };
+        this.penColor = options.penColor || 'black';
+        this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
+        this.onBegin = options.onBegin;
+        this.onEnd = options.onEnd;
+        this._strokeMoveUpdate = this.throttle
+            ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
+            : SignaturePad.prototype._strokeUpdate;
+        this._ctx = canvas.getContext('2d');
+        this.clear();
+        this.on();
+    }
+    clear() {
+        const { _ctx: ctx, canvas } = this;
+        ctx.fillStyle = this.backgroundColor;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this._data = [];
+        this._reset();
+        this._isEmpty = true;
+    }
+    fromDataURL(dataUrl, options = {}, callback) {
+        const image = new Image();
+        const ratio = options.ratio || window.devicePixelRatio || 1;
+        const width = options.width || this.canvas.width / ratio;
+        const height = options.height || this.canvas.height / ratio;
+        this._reset();
+        image.onload = () => {
+            this._ctx.drawImage(image, 0, 0, width, height);
+            if (callback) {
+                callback();
+            }
+        };
+        image.onerror = (error) => {
+            if (callback) {
+                callback(error);
+            }
+        };
+        image.src = dataUrl;
+        this._isEmpty = false;
+    }
+    toDataURL(type = 'image/png', encoderOptions) {
+        switch (type) {
+            case 'image/svg+xml':
+                return this._toSVG();
+            default:
+                return this.canvas.toDataURL(type, encoderOptions);
+        }
+    }
+    on() {
+        this.canvas.style.touchAction = 'none';
+        this.canvas.style.msTouchAction = 'none';
+        if (window.PointerEvent) {
+            this._handlePointerEvents();
+        }
+        else {
+            this._handleMouseEvents();
+            if ('ontouchstart' in window) {
+                this._handleTouchEvents();
+            }
+        }
+    }
+    off() {
+        this.canvas.style.touchAction = 'auto';
+        this.canvas.style.msTouchAction = 'auto';
+        this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
+        this.canvas.removeEventListener('pointermove', this._handleMouseMove);
+        document.removeEventListener('pointerup', this._handleMouseUp);
+        this.canvas.removeEventListener('mousedown', this._handleMouseDown);
+        this.canvas.removeEventListener('mousemove', this._handleMouseMove);
+        document.removeEventListener('mouseup', this._handleMouseUp);
+        this.canvas.removeEventListener('touchstart', this._handleTouchStart);
+        this.canvas.removeEventListener('touchmove', this._handleTouchMove);
+        this.canvas.removeEventListener('touchend', this._handleTouchEnd);
+    }
+    isEmpty() {
+        return this._isEmpty;
+    }
+    fromData(pointGroups) {
+        this.clear();
+        this._fromData(pointGroups, ({ color, curve }) => this._drawCurve({ color, curve }), ({ color, point }) => this._drawDot({ color, point }));
+        this._data = pointGroups;
+    }
+    toData() {
+        return this._data;
+    }
+    _strokeBegin(event) {
+        const newPointGroup = {
+            color: this.penColor,
+            points: [],
+        };
+        if (typeof this.onBegin === 'function') {
+            this.onBegin(event);
+        }
+        this._data.push(newPointGroup);
+        this._reset();
+        this._strokeUpdate(event);
+    }
+    _strokeUpdate(event) {
+        if (this._data.length === 0) {
+            this._strokeBegin(event);
+            return;
+        }
+        const x = event.clientX;
+        const y = event.clientY;
+        const point = this._createPoint(x, y);
+        const lastPointGroup = this._data[this._data.length - 1];
+        const lastPoints = lastPointGroup.points;
+        const lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+        const isLastPointTooClose = lastPoint
+            ? point.distanceTo(lastPoint) <= this.minDistance
+            : false;
+        const color = lastPointGroup.color;
+        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+            const curve = this._addPoint(point);
+            if (!lastPoint) {
+                this._drawDot({ color, point });
+            }
+            else if (curve) {
+                this._drawCurve({ color, curve });
+            }
+            lastPoints.push({
+                time: point.time,
+                x: point.x,
+                y: point.y,
+            });
+        }
+    }
+    _strokeEnd(event) {
+        this._strokeUpdate(event);
+        if (typeof this.onEnd === 'function') {
+            this.onEnd(event);
+        }
+    }
+    _handlePointerEvents() {
+        this._mouseButtonDown = false;
+        this.canvas.addEventListener('pointerdown', this._handleMouseDown);
+        this.canvas.addEventListener('pointermove', this._handleMouseMove);
+        document.addEventListener('pointerup', this._handleMouseUp);
+    }
+    _handleMouseEvents() {
+        this._mouseButtonDown = false;
+        this.canvas.addEventListener('mousedown', this._handleMouseDown);
+        this.canvas.addEventListener('mousemove', this._handleMouseMove);
+        document.addEventListener('mouseup', this._handleMouseUp);
+    }
+    _handleTouchEvents() {
+        this.canvas.addEventListener('touchstart', this._handleTouchStart);
+        this.canvas.addEventListener('touchmove', this._handleTouchMove);
+        this.canvas.addEventListener('touchend', this._handleTouchEnd);
+    }
+    _reset() {
+        this._lastPoints = [];
+        this._lastVelocity = 0;
+        this._lastWidth = (this.minWidth + this.maxWidth) / 2;
+        this._ctx.fillStyle = this.penColor;
+    }
+    _createPoint(x, y) {
+        const rect = this.canvas.getBoundingClientRect();
+        return new Point(x - rect.left, y - rect.top, new Date().getTime());
+    }
+    _addPoint(point) {
+        const { _lastPoints } = this;
+        _lastPoints.push(point);
+        if (_lastPoints.length > 2) {
+            if (_lastPoints.length === 3) {
+                _lastPoints.unshift(_lastPoints[0]);
+            }
+            const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+            const curve = Bezier.fromPoints(_lastPoints, widths);
+            _lastPoints.shift();
+            return curve;
+        }
+        return null;
+    }
+    _calculateCurveWidths(startPoint, endPoint) {
+        const velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+            (1 - this.velocityFilterWeight) * this._lastVelocity;
+        const newWidth = this._strokeWidth(velocity);
+        const widths = {
+            end: newWidth,
+            start: this._lastWidth,
+        };
+        this._lastVelocity = velocity;
+        this._lastWidth = newWidth;
+        return widths;
+    }
+    _strokeWidth(velocity) {
+        return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+    }
+    _drawCurveSegment(x, y, width) {
+        const ctx = this._ctx;
+        ctx.moveTo(x, y);
+        ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+        this._isEmpty = false;
+    }
+    _drawCurve({ color, curve }) {
+        const ctx = this._ctx;
+        const widthDelta = curve.endWidth - curve.startWidth;
+        const drawSteps = Math.floor(curve.length()) * 2;
+        ctx.beginPath();
+        ctx.fillStyle = color;
+        for (let i = 0; i < drawSteps; i += 1) {
+            const t = i / drawSteps;
+            const tt = t * t;
+            const ttt = tt * t;
+            const u = 1 - t;
+            const uu = u * u;
+            const uuu = uu * u;
+            let x = uuu * curve.startPoint.x;
+            x += 3 * uu * t * curve.control1.x;
+            x += 3 * u * tt * curve.control2.x;
+            x += ttt * curve.endPoint.x;
+            let y = uuu * curve.startPoint.y;
+            y += 3 * uu * t * curve.control1.y;
+            y += 3 * u * tt * curve.control2.y;
+            y += ttt * curve.endPoint.y;
+            const width = Math.min(curve.startWidth + ttt * widthDelta, this.maxWidth);
+            this._drawCurveSegment(x, y, width);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    _drawDot({ color, point, }) {
+        const ctx = this._ctx;
+        const width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+        ctx.beginPath();
+        this._drawCurveSegment(point.x, point.y, width);
+        ctx.closePath();
+        ctx.fillStyle = color;
+        ctx.fill();
+    }
+    _fromData(pointGroups, drawCurve, drawDot) {
+        for (const group of pointGroups) {
+            const { color, points } = group;
+            if (points.length > 1) {
+                for (let j = 0; j < points.length; j += 1) {
+                    const basicPoint = points[j];
+                    const point = new Point(basicPoint.x, basicPoint.y, basicPoint.time);
+                    this.penColor = color;
+                    if (j === 0) {
+                        this._reset();
+                    }
+                    const curve = this._addPoint(point);
+                    if (curve) {
+                        drawCurve({ color, curve });
+                    }
+                }
+            }
+            else {
+                this._reset();
+                drawDot({
+                    color,
+                    point: points[0],
+                });
+            }
+        }
+    }
+    _toSVG() {
+        const pointGroups = this._data;
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        const minX = 0;
+        const minY = 0;
+        const maxX = this.canvas.width / ratio;
+        const maxY = this.canvas.height / ratio;
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', this.canvas.width.toString());
+        svg.setAttribute('height', this.canvas.height.toString());
+        this._fromData(pointGroups, ({ color, curve }) => {
+            const path = document.createElement('path');
+            if (!isNaN(curve.control1.x) &&
+                !isNaN(curve.control1.y) &&
+                !isNaN(curve.control2.x) &&
+                !isNaN(curve.control2.y)) {
+                const attr = `M ${curve.startPoint.x.toFixed(3)},${curve.startPoint.y.toFixed(3)} ` +
+                    `C ${curve.control1.x.toFixed(3)},${curve.control1.y.toFixed(3)} ` +
+                    `${curve.control2.x.toFixed(3)},${curve.control2.y.toFixed(3)} ` +
+                    `${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
+                path.setAttribute('d', attr);
+                path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
+                path.setAttribute('stroke', color);
+                path.setAttribute('fill', 'none');
+                path.setAttribute('stroke-linecap', 'round');
+                svg.appendChild(path);
+            }
+        }, ({ color, point }) => {
+            const circle = document.createElement('circle');
+            const dotSize = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+            circle.setAttribute('r', dotSize.toString());
+            circle.setAttribute('cx', point.x.toString());
+            circle.setAttribute('cy', point.y.toString());
+            circle.setAttribute('fill', color);
+            svg.appendChild(circle);
+        });
+        const prefix = 'data:image/svg+xml;base64,';
+        const header = '<svg' +
+            ' xmlns="http://www.w3.org/2000/svg"' +
+            ' xmlns:xlink="http://www.w3.org/1999/xlink"' +
+            ` viewBox="${minX} ${minY} ${maxX} ${maxY}"` +
+            ` width="${maxX}"` +
+            ` height="${maxY}"` +
+            '>';
+        let body = svg.innerHTML;
+        if (body === undefined) {
+            const dummy = document.createElement('dummy');
+            const nodes = svg.childNodes;
+            dummy.innerHTML = '';
+            for (let i = 0; i < nodes.length; i += 1) {
+                dummy.appendChild(nodes[i].cloneNode(true));
+            }
+            body = dummy.innerHTML;
+        }
+        const footer = '</svg>';
+        const data = header + body + footer;
+        return prefix + btoa(data);
+    }
+}
+
+var css_248z = ".style-module_container__1VolG {\n  position: relative;\n  background-color: var(--ds-grey-200);\n  border-radius: 8px;\n  height: 272px;\n}\n\n.style-module_canvas__1Q440 {\n  width: 100%;\n  height: 100%;\n}\n\n.style-module_separator__Fdmnn {\n  position: absolute;\n  height: 2px;\n  right: 112px;\n  left: 72px;\n  bottom: 32px;\n  background-color: var(--ds-grey-400);\n  border-radius: 1px;\n}\n\n.style-module_reset__1ePiM {\n  display: flex;\n  position: absolute;\n  right: 16px;\n  bottom: 32px;\n  color: var(--ds-primary-500);\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  font-size: 16px;\n  line-height: 24px;\n  background-color: transparent;\n}\n.style-module_reset__1ePiM:hover {\n  color: var(--ds-primary-700);\n}\n.style-module_reset__1ePiM:before {\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  width: 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  background-color: currentColor;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-background-color: currentColor;\n  margin-right: 4px;\n}\n.style-module_reset__1ePiM[disabled] {\n  color: var(--ds-grey-500);\n}\n\n.style-module_sign__35Gp2 {\n  position: absolute;\n  bottom: 32px;\n  left: 16px;\n  height: 24px;\n  width: 24px;\n  mask-size: 24px 24px;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  -webkit-mask-size: 24px 24px;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  background-color: var(--ds-grey-500);\n}";
+var styles = {"container":"style-module_container__1VolG","canvas":"style-module_canvas__1Q440","separator":"style-module_separator__Fdmnn","reset":"style-module_reset__1ePiM","sign":"style-module_sign__35Gp2"};
+styleInject(css_248z);
+
+var sign = "data:image/svg+xml,%3Csvg%20width%3D%2280%22%20height%3D%2280%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.7%203.70001C13.3%204.00001%2013.5%205.10001%2014.1%206.20001C14.7%207.30001%2014.9%209.20001%2014.6%2010.5C14.1%2012.3%2015.3%2014.4%2019.3%2019.7C22.2%2023.4%2025.6%2028%2026.9%2029.8L29.2%2033L23%2039.7C19.7%2043.4%2017.1%2046.9%2017.4%2047.6C17.7%2048.3%2017.2%2049.4%2016.4%2050C14.8%2051.4%2014.5%2054%2016.1%2054C17.5%2054%2023.6%2049.5%2029%2044.4L33.5%2040.1L41%2051.3C49.2%2063.6%2053.7%2069%2055.8%2069C56.6%2069%2056.8%2068.5%2056.4%2067.7C56%2067.1%2057.8%2068.9%2060.5%2071.8C63.1%2074.7%2065.5%2076.9%2065.7%2076.6C65.9%2076.4%2065.2%2074.4%2064.1%2072.1C62.9%2069.9%2062%2067.2%2062%2066.2C62%2063.3%2054.5%2047.6%2048.9%2039C46.2%2034.8%2044%2031%2044%2030.6C44%2030.2%2046.2%2027.3%2048.9%2024.2C54.3%2017.9%2059%2011.2%2059%209.80001C59%209.30001%2057.7%209.10001%2056%209.50001C54.2%209.90001%2050.5%2012.7%2046.4%2017.1C42.7%2020.9%2039.4%2024%2039.1%2024C38.8%2024%2036.3%2020.7%2033.6%2016.8C30.9%2012.9%2027.9%209.50001%2027%209.30001C26%209.00001%2024.3%207.60001%2023.2%206.10001C21.7%204.10001%2020.3%203.30001%2017.7%203.20001C15.8%203.10001%2014%203.30001%2013.7%203.70001Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fsvg%3E";
+
+var reset = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%204V10H7%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3.51%2014.9999C4.15839%2016.8403%205.38734%2018.4201%207.01166%2019.5013C8.63598%2020.5825%2010.5677%2021.1065%2012.5157%2020.9944C14.4637%2020.8823%2016.3226%2020.1401%2017.8121%2018.8797C19.3017%2017.6193%2020.3413%2015.9089%2020.7742%2014.0063C21.2072%2012.1037%2021.0101%2010.1119%2020.2126%208.33105C19.4152%206.55019%2018.0605%205.07674%2016.3528%204.13271C14.6451%203.18868%2012.6769%202.82521%2010.7447%203.09707C8.81245%203.36892%207.02091%204.26137%205.64%205.63995L1%209.99995%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
+var Signature = /** @class */ (function (_super) {
+    __extends(Signature, _super);
+    function Signature(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasContent: false,
+        };
+        _this.canvasRef = React__default.createRef();
+        _this.notifyOnChange = _this.notifyOnChange.bind(_this);
+        _this.resizeCanvas = _this.resizeCanvas.bind(_this);
+        _this.clear = _this.clear.bind(_this);
+        return _this;
+    }
+    Signature.prototype.componentDidMount = function () {
+        this.canvas = this.canvasRef.current;
+        this.signaturePad = new SignaturePad(this.canvas, {
+            onEnd: this.notifyOnChange,
+        });
+        this.resizeCanvas();
+    };
+    Signature.prototype.render = function () {
+        var hasContent = this.state.hasContent;
+        return (jsxs(Fragment, { children: [jsx("style", { dangerouslySetInnerHTML: {
+                        __html: "." + styles.reset + "::before { \n              -webkit-mask-image: url(\"" + reset + "\");\n              mask-image: url(\"" + reset + "\");\n           }",
+                    } }, void 0),
+                jsxs("div", __assign({ className: styles.container }, { children: [jsx("canvas", { className: styles.canvas, ref: this.canvasRef }, void 0),
+                        jsx("div", { className: styles.separator }, void 0),
+                        jsx("div", { className: styles.sign, style: {
+                                WebkitMaskImage: "url(\"" + sign + "\")",
+                                maskImage: "url(\"" + sign + "\")",
+                            } }, void 0),
+                        jsx("button", __assign({ className: styles.reset, onClick: this.clear, disabled: !hasContent }, { children: "Reset" }), void 0)] }), void 0)] }, void 0));
+    };
+    Signature.prototype.notifyOnChange = function () {
+        var onChange = this.props.onChange;
+        onChange(this.signaturePad.isEmpty() ? '' : this.signaturePad.toDataURL());
+        this.setState({ hasContent: !this.signaturePad.isEmpty() });
+    };
+    Signature.prototype.resizeCanvas = function () {
+        var ratio = Math.max(window.devicePixelRatio || 1, 1);
+        this.canvas.width = this.canvas.offsetWidth * ratio;
+        this.canvas.height = this.canvas.offsetHeight * ratio;
+        this.canvas.getContext('2d').scale(ratio, ratio);
+    };
+    Signature.prototype.clear = function () {
+        this.signaturePad.clear();
+        this.notifyOnChange();
+    };
+    return Signature;
+}(Component));
+
+export default Signature;
+//# sourceMappingURL=index.js.map