@threekit-tools/treble 0.0.81 → 0.0.82

package/dist/Treble/Treble.d.ts

@@ -22,13 +22,13 @@ declare class Treble {
     takeSnapshots: Snapshots['takeSnapshots'];
     _debugMode: boolean;
     constructor({ player, orgId, initialConfiguration }: ITreble);
-    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, "configuration">> | undefined) => Promise<{
+    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, 'configuration'>>) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;
     }>;
     getNestedConfigurator: (address: string | Array<string>) => undefined | IThreekitPrivateConfigurator;
-    resetConfiguration: (configuration?: ISetConfiguration | undefined) => void;
+    resetConfiguration: (configuration?: ISetConfiguration) => void;
     sendEmail: (credentials: IEmailShareCredentials, templateData: Record<string, any>) => Promise<import("../http/server").IPostEmailResponse>;
 }
 export default Treble;

package/dist/Treble/Treble.js

@@ -47,8 +47,8 @@ var Wishlist_1 = __importDefault(require("./Wishlist"));
 var Snapshots_1 = __importDefault(require("./Snapshots"));
 var Treble = /** @class */ (function () {
     function Treble(_a) {
-        var _this = this;
         var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
+        var _this = this;
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
             var threekitDomain, _a, customerId, metadata, productVersion, attachments, player, response, params, url;
             var _b;

package/dist/Treble/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/api/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Accordion/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Drawer/index.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -39,7 +43,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var drawer_styles_1 = require("./drawer.styles");
 var utils_1 = require("../../utils");
-var icons_1 = require("../../icons");
+var Remove_1 = __importDefault(require("../../icons/Remove"));
 var TRANSITION_DURATION = 0.2;
 var Drawer = function (props) {
     var title = props.title, children = props.children, handleClose = props.handleClose, showHeader = props.showHeader, className = props.className;
@@ -63,7 +67,7 @@ var Drawer = function (props) {
             showHeader ? (react_1.default.createElement(drawer_styles_1.Header, { className: "".concat(cls, " drawer-header") },
                 react_1.default.createElement("div", { className: "".concat(cls, " drawer-title") }, title),
                 react_1.default.createElement("div", { onClick: handleClickClose },
-                    react_1.default.createElement(icons_1.RemoveIcon, null)))) : null,
+                    react_1.default.createElement(Remove_1.default, null)))) : null,
             react_1.default.createElement(drawer_styles_1.Content, { className: "".concat(cls, " drawer-content") }, children))));
 };
 exports.Drawer = Drawer;

package/dist/components/Dropdown/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -28,7 +32,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var dropdown_styles_1 = require("./dropdown.styles");
-var icons_1 = require("../../icons");
+var CaretDown_1 = __importDefault(require("../../icons/CaretDown"));
 var utils_1 = require("../../utils");
 var constants_1 = require("../../constants");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
@@ -90,7 +94,7 @@ var Dropdown = function (props) {
                     react_1.default.createElement(Description, { description: selectedOpt === null || selectedOpt === void 0 ? void 0 : selectedOpt.description, className: "".concat(cls, " selected") })),
                 react_1.default.createElement(Price, { price: selectedOpt === null || selectedOpt === void 0 ? void 0 : selectedOpt.price, className: cls }),
                 react_1.default.createElement(dropdown_styles_1.IconWrapper, null,
-                    react_1.default.createElement(icons_1.CaretDownIcon, null))),
+                    react_1.default.createElement(CaretDown_1.default, null))),
             react_1.default.createElement(dropdown_styles_1.DropdownOptions, { hide: hide, dropdownMaxHeight: dropdownMaxHeight },
                 react_1.default.createElement("div", null, options === null || options === void 0 ? void 0 : options.map(function (el, i) {
                     var _a = Object.assign({}, el, {

package/dist/components/FlatForm/index.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Modal/index.js

@@ -20,14 +20,14 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var modal_styles_1 = require("./modal.styles");
 var utils_1 = require("../../utils");
-var icons_1 = require("../../icons");
+var Remove_1 = __importDefault(require("../../icons/Remove"));
 var ModalComponent = function (props) {
     var title = props.title, children = props.children, handleClose = props.handleClose, showHeader = props.showHeader, className = props.className;
     return (react_1.default.createElement(modal_styles_1.Wrapper, { onClick: function (e) { return e.stopPropagation(); }, className: "".concat(className, " modal-main") },
         showHeader ? (react_1.default.createElement(modal_styles_1.Header, { className: "".concat(className, " modal-header") },
             react_1.default.createElement("div", { className: "".concat(className, " modal-title") }, title),
             react_1.default.createElement("div", { onClick: handleClose },
-                react_1.default.createElement(icons_1.RemoveIcon, null)))) : null,
+                react_1.default.createElement(Remove_1.default, null)))) : null,
         react_1.default.createElement(modal_styles_1.Content, { className: "".concat(className, " modal-content") }, children)));
 };
 exports.ModalComponent = ModalComponent;

package/dist/components/PortalToArOverlay/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Share/index.js

@@ -7,7 +7,7 @@ exports.Share = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Button_1 = __importDefault(require("../Button"));
-var icons_1 = require("../../icons");
+var Share_1 = __importDefault(require("../../icons/Share"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var useShare_1 = __importDefault(require("../../hooks/useShare"));
 var utils_1 = require("../../utils");
@@ -21,7 +21,7 @@ var Share = function (props) {
     var handleClick = function () {
         handleShare(message);
     };
-    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: icons_1.ShareIcon.iconName, onClick: handleClick }));
+    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }));
 };
 exports.Share = Share;
 exports.Share.propTypes = {

package/dist/components/Snapshots/index.js

@@ -7,7 +7,7 @@ exports.Snapshots = void 0;
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Button_1 = __importDefault(require("../Button"));
-var icons_1 = require("../../icons");
+var Download_1 = __importDefault(require("../../icons/Download"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var useSnapshot_1 = __importDefault(require("../../hooks/useSnapshot"));
 var utils_1 = require("../../utils");
@@ -19,7 +19,7 @@ var Snapshots = function (props) {
     if (!hasLoaded)
         return null;
     var cls = (0, utils_1.generateWidgetClassName)('snapshots', className);
-    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: icons_1.DownloadIcon.iconName, onClick: takeSnapshot }));
+    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Download_1.default.iconName, onClick: takeSnapshot }));
 };
 exports.Snapshots = Snapshots;
 exports.Snapshots.propTypes = {

package/dist/components/Tabs/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/ThreekitProvider/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/TrebleApp/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/Upload/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -65,13 +69,14 @@ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var icons_1 = require("../../icons");
+var Spinner_1 = __importDefault(require("../../icons/Spinner"));
+var Add_1 = __importDefault(require("../../icons/Add"));
+var Delete_1 = __importDefault(require("../../icons/Delete"));
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var upload_styles_1 = require("./upload.styles");
 var Upload = function (props) {
-    var _a, _b;
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
-    var _c = (0, react_1.useState)(false), isUploading = _c[0], setIsUploading = _c[1];
+    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
     var inputRef = (0, react_1.useRef)(null);
     var imgRef = (0, react_1.useRef)(null);
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
@@ -110,7 +115,7 @@ var Upload = function (props) {
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
-        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && ((_a = value) === null || _a === void 0 ? void 0 : _a.length)) },
+        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && (value === null || value === void 0 ? void 0 : value.length)) },
             react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
                     var _a;
                     return __generator(this, function (_b) {
@@ -122,8 +127,8 @@ var Upload = function (props) {
                 }); } }),
             react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(upload_styles_1.IconWrapper, null,
-                    react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
-                react_1.default.createElement("div", null, "Uploading..."))) : ((_b = value) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
+                    react_1.default.createElement(Spinner_1.default, { size: "28px" })),
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("img", { ref: imgRef, src: "#" })),
                 react_1.default.createElement(upload_styles_1.ImageActionArea, null,
@@ -131,9 +136,9 @@ var Upload = function (props) {
                             handleUpload(undefined);
                             e.stopPropagation();
                         } },
-                        react_1.default.createElement(icons_1.DeleteIcon, null))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Delete_1.default, null))))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(upload_styles_1.IconWrapper, null,
-                    react_1.default.createElement(icons_1.AddIcon, null)),
+                    react_1.default.createElement(Add_1.default, null)),
                 react_1.default.createElement("div", null, "Upload")))))));
 };
 exports.Upload = Upload;

package/dist/components/UploadArea/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -65,14 +69,14 @@ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var icons_1 = require("../../icons");
+var Spinner_1 = __importDefault(require("../../icons/Spinner"));
+var Image_1 = __importDefault(require("../../icons/Image"));
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var uploadArea_styles_1 = require("./uploadArea.styles");
 var UploadArea = function (props) {
-    var _a;
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
-    var _b = (0, react_1.useState)(false), isUploading = _b[0], setIsUploading = _b[1];
-    var _c = (0, react_1.useState)(undefined), filename = _c[0], setFilename = _c[1];
+    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
+    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
     var inputRef = (0, react_1.useRef)(null);
     var imgRef = (0, react_1.useRef)(null);
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
@@ -120,15 +124,15 @@ var UploadArea = function (props) {
                 }); } }),
             react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
-                react_1.default.createElement("div", null, "Uploading..."))) : ((_a = value) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
+                    react_1.default.createElement(Spinner_1.default, { size: "28px" })),
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("img", { ref: imgRef, src: "#" })),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("div", null, filename),
                     react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(icons_1.ImageIcon, null)),
+                    react_1.default.createElement(Image_1.default, null)),
                 react_1.default.createElement("div", null, "Click to upload"),
                 react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
 };

package/dist/components/Wishlist/index.d.ts

@@ -30,6 +30,6 @@ export declare const Wishlist: {
         type: string;
     };
     componentName: string;
-    Icon: import("../../icons").IIcon;
+    Icon: import("../..").IIcon;
 };
 export default Wishlist;

package/dist/components/Wishlist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -61,7 +65,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wishlist = exports.WishlistButton = exports.AddWishlistButton = void 0;
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
-var icons_1 = require("../../icons");
+var Heart_1 = __importDefault(require("../../icons/Heart"));
+var Wishlist_1 = __importDefault(require("../../icons/Wishlist"));
 var Button_1 = require("../Button");
 var Drawer_1 = __importDefault(require("../Drawer"));
 var shared_styles_1 = require("../shared.styles");
@@ -71,12 +76,12 @@ var wishlist_styles_1 = require("./wishlist.styles");
 var useWishlist_1 = __importDefault(require("../../hooks/useWishlist"));
 var AddWishlistButton = function (props) {
     var title = props.title, type = props.type, shape = props.shape, className = props.className, onClick = props.onClick;
-    return (react_1.default.createElement(Button_1.Button, { title: title, icon: icons_1.HeartIcon.iconName, className: className, onClick: onClick, type: type, shape: shape }));
+    return (react_1.default.createElement(Button_1.Button, { title: title, icon: Heart_1.default.iconName, className: className, onClick: onClick, type: type, shape: shape }));
 };
 exports.AddWishlistButton = AddWishlistButton;
 var WishlistButton = function (props) {
     var title = props.title, type = props.type, shape = props.shape, className = props.className, onClick = props.onClick;
-    return (react_1.default.createElement(Button_1.Button, { title: title, icon: icons_1.WishlistIcon.iconName, className: className, onClick: onClick, type: type, shape: shape }));
+    return (react_1.default.createElement(Button_1.Button, { title: title, icon: Wishlist_1.default.iconName, className: className, onClick: onClick, type: type, shape: shape }));
 };
 exports.WishlistButton = WishlistButton;
 var Wishlist = function (props) {
@@ -122,5 +127,5 @@ exports.Wishlist.defaultProps = {
     type: 'threekit',
 };
 exports.Wishlist.componentName = 'wishlist';
-exports.Wishlist.Icon = icons_1.WishlistIcon;
+exports.Wishlist.Icon = Wishlist_1.default;
 exports.default = exports.Wishlist;

package/dist/components/Zoom/index.d.ts

@@ -46,7 +46,7 @@ export declare const Zoom: {
         type: string;
     };
     componentName: string;
-    Icon: import("../../icons").IIcon;
+    Icon: import("../..").IIcon;
     ZoomOut: (props: ZoomComponentProps) => JSX.Element | null;
     ZoomIn: (props: ZoomComponentProps) => JSX.Element | null;
 };

package/dist/components/Zoom/index.js

@@ -19,7 +19,8 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var shared_styles_1 = require("../shared.styles");
 var Button_1 = __importDefault(require("../Button"));
-var icons_1 = require("../../icons");
+var ZoomIn_1 = __importDefault(require("../../icons/ZoomIn"));
+var ZoomOut_1 = __importDefault(require("../../icons/ZoomOut"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var useZoom_1 = __importDefault(require("../../hooks/useZoom"));
 var utils_1 = require("../../utils");
@@ -40,7 +41,7 @@ var ZoomOutComponent = function (props) {
         return null;
     var handleZoomOut = function () { return zoomOut(Math.abs(step)); };
     var cls = (0, utils_1.generateWidgetClassName)('zoom', className);
-    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-out"), shape: shape, type: type, icon: icons_1.ZoomOutIcon.iconName, onClick: handleZoomOut }));
+    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-out"), shape: shape, type: type, icon: ZoomOut_1.default.iconName, onClick: handleZoomOut }));
 };
 exports.ZoomOutComponent = ZoomOutComponent;
 var ZoomInComponent = function (props) {
@@ -55,7 +56,7 @@ var ZoomInComponent = function (props) {
         return null;
     var handleZoomOut = function () { return zoomIn(Math.abs(step)); };
     var cls = (0, utils_1.generateWidgetClassName)('zoom', className);
-    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-in"), shape: shape, type: type, icon: icons_1.ZoomInIcon.iconName, onClick: handleZoomOut }));
+    return (react_1.default.createElement(Button_1.default, { className: "".concat(cls, " zoom-in"), shape: shape, type: type, icon: ZoomIn_1.default.iconName, onClick: handleZoomOut }));
 };
 exports.ZoomInComponent = ZoomInComponent;
 var Zoom = function (props) {
@@ -113,7 +114,7 @@ exports.Zoom.defaultProps = {
     type: 'threekit',
 };
 exports.Zoom.componentName = 'zoom';
-exports.Zoom.Icon = icons_1.ZoomInIcon;
+exports.Zoom.Icon = ZoomIn_1.default;
 exports.Zoom.ZoomOut = exports.ZoomOutComponent;
 exports.Zoom.ZoomIn = exports.ZoomInComponent;
 exports.default = exports.Zoom;

package/dist/components/formComponents.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/components/message/index.js

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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;
-});
-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 };
 };
@@ -27,7 +8,8 @@ var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var message_styles_1 = require("./message.styles");
-var icons_1 = __importStar(require("../../icons"));
+var icons_1 = __importDefault(require("../../icons"));
+var Info_1 = __importDefault(require("../../icons/Info"));
 var styled_components_1 = require("styled-components");
 var theme_1 = __importDefault(require("../../theme"));
 var messagesEl;
@@ -57,7 +39,7 @@ var MessageComponent = function (props) {
     var content = props.content, icon = props.icon;
     if (!content)
         return null;
-    var Icon = icon ? icons_1.default[icon] : icons_1.InfoIcon;
+    var Icon = icon ? icons_1.default[icon] : Info_1.default;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
         react_1.default.createElement(message_styles_1.Wrapper, null,
             react_1.default.createElement(message_styles_1.IconWrapper, null,
@@ -105,7 +87,7 @@ exports.MessageComponent.propTypes = {
 };
 exports.MessageComponent.defaultProps = {
     content: undefined,
-    icon: icons_1.InfoIcon.iconName,
+    icon: Info_1.default.iconName,
     className: undefined,
 };
 exports.default = { config: config, info: info };

package/dist/hooks/useAttribute/index.d.ts

@@ -6,5 +6,5 @@ declare type UseAttributeSuccess = [
     (val: RawAttributeValue) => Promise<void>
 ];
 declare type UseAttributeHook = UseAttributeError | UseAttributeSuccess;
-declare const useAttribute: (attributeName?: string | undefined) => UseAttributeHook;
+declare const useAttribute: (attributeName?: string) => UseAttributeHook;
 export default useAttribute;

package/dist/http/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/icons/Spinner.js

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/store/index.d.ts

@@ -29,7 +29,7 @@ declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     wishlist: import("../Treble").WishlistArray;
     price: import("./price").PriceState;
 }, import("redux").Dispatch<import("redux").AnyAction>>>>;
-export declare const createStore: (reducer?: Record<string, Reducer<any, import("redux").AnyAction>> | undefined) => import("@reduxjs/toolkit").EnhancedStore<{
+export declare const createStore: (reducer?: Record<string, Reducer>) => import("@reduxjs/toolkit").EnhancedStore<{
     treble: import("./treble").TrebleState;
     product: import("./product").ProductState;
     attributes: import("./attributes").AttributesState;

package/dist/store/product.d.ts

@@ -58,13 +58,13 @@ export declare const getProductCache: (state: RootState) => Array<Pick<CachedPro
 /*****************************************************
  * Complex Actions
  ****************************************************/
-export declare const initProduct: (prods?: IHydratedProducts | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
-export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, "label" | "thumbnail"> | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
+export declare const initProduct: (prods?: IHydratedProducts) => (dispatch: ThreekitDispatch, getState: () => RootState) => void;
+export declare const cacheActiveProduct: (config?: Pick<IReloadConfig, 'label' | 'thumbnail'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => {
     payload: CachedProductState;
     type: string;
 };
-export declare const loadProduct: (id: string, config?: LoadProductConfig | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const loadProduct: (id: string, config?: LoadProductConfig) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const loadNewProduct: (config: undefined | string | IReloadConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const changeActiveCacheIdx: (idx: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const removeProductIdx: (idx?: number | undefined) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
+export declare const removeProductIdx: (idx?: number) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/store/translations.d.ts

@@ -14,7 +14,7 @@ export declare let TRANSLATIONS: undefined | ITranslationMap;
  * Actions
  ****************************************************/
 export declare const setLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
-export declare const initTranslations: (language?: string | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const initTranslations: (language?: string) => (dispatch: ThreekitDispatch) => Promise<void>;
 declare const reducer: import("redux").Reducer<TranslationsState, import("redux").AnyAction>;
 /*****************************************************
  * Standard Selectors

package/dist/store/treble.d.ts

@@ -73,7 +73,7 @@ export declare const getLoadingProgress: (state: RootState) => number;
  * Complex Actions
  ****************************************************/
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
-export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
+export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const reloadPlayer: (config: undefined | string | Pick<IReloadConfig, 'assetId' | 'stageId' | 'configurationId' | 'configuration'>) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export default reducer;

package/dist/types.d.ts

@@ -161,6 +161,56 @@ export interface ISnapshotConfig {
     };
 }
 export declare type SNAPSHOT_FORMAT_TYPES = 'jpg' | 'png';
+/***************************************************
+ * Tools
+ **************************************************/
+export interface Node {
+    name: string;
+    nodeId: string;
+    type: string;
+}
+export interface HitNode {
+    distance: number;
+    intersection: ICoordinates;
+    nodeId: string;
+    hierarchy: Array<Node>;
+}
+export interface PlayerToolEvent {
+    altKey: boolean;
+    clientX: number;
+    clientY: number;
+    deltaX: number;
+    deltaY: number;
+    ctrlKey: boolean;
+    isTouch: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    which: number;
+    originalEvent: MouseEvent;
+    rect: DOMRect;
+    hitNodes: Array<HitNode>;
+}
+export interface CustomPlayerTool {
+    key: string;
+    label: string;
+    active: boolean;
+    enabled: boolean;
+    handlers: {
+        click?: (event: PlayerToolEvent) => void | Promise<void>;
+        mousedown?: (event: PlayerToolEvent) => void | Promise<void>;
+        mouseup?: (event: PlayerToolEvent) => void | Promise<void>;
+    };
+}
+export interface IThreekitTools {
+    addTool: (tool: string | CustomPlayerTool) => void;
+    addTools: (tools: Array<string | CustomPlayerTool>) => void;
+    removeTool: (tool: string) => void;
+    removeTools: (tools: Array<string>) => void;
+    setPrimary: (tool: string) => void;
+    getPrimaryTool: () => string;
+    setTool: () => void;
+    setTools: () => void;
+}
 /***************************************************
  *  Threekit Api
  **************************************************/
@@ -189,16 +239,6 @@ export interface IThreekitScene {
     find: (query: ISceneQuery | string) => ISceneResult;
     set: (query: ISceneQuery | string, transform: ICoordinates) => void;
 }
-export interface IThreekitTools {
-    addTool: (tool: string) => void;
-    addTools: (tools: string[]) => void;
-    removeTool: (tool: string) => void;
-    removeTools: (tools: string[]) => void;
-    setPrimary: (tool: string) => void;
-    getPrimaryTool: () => string;
-    setTool: () => void;
-    setTools: () => void;
-}
 export interface IThreekitCamera {
     frameBoundingSphere: () => void;
     getPosition: () => ICoordinates;

package/dist/utils.d.ts

@@ -15,13 +15,13 @@ interface IAttributeComponentProps {
 interface IAttributesComponentProps {
     [attributeName: string]: undefined | false | IAttributeComponentProps;
 }
-export declare const generateClassName: (baseClass: string) => (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateInputClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateWidgetClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateLayoutClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
+export declare const generateClassName: (baseClass: string) => (component: string, customClassName?: string, title?: string) => string;
+export declare const generateInputClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateWidgetClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateLayoutClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateToolClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateDisplayClassName: (component: string, customClassName?: string, title?: string) => string;
+export declare const generateFormClassName: (component: string, customClassName?: string, title?: string) => string;
 export declare const isIOS: () => RegExpMatchArray | null;
 export declare const isJsonString: (str: string) => boolean;
 export declare const objectToQueryStr: (obj: Record<string, any>) => string;
@@ -57,7 +57,7 @@ export declare const selectionToConfiguration: (value: RawAttributeValue, attrib
     assetId: RawAttributeValue;
 } | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
-export declare const isUuid: (str?: string | undefined) => boolean;
+export declare const isUuid: (str?: string) => boolean;
 export declare const runDebugger: () => Promise<void>;
 export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [

package/dist/hooks/useImageEditor/index.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-interface UseImageEditorConfig {
-    canvasHeight?: number;
-    canvasWidth?: number;
-    cornerCircleSize?: number;
-    cropRatio?: number;
-}
-declare function useImageEditor(image: string, config: UseImageEditorConfig): null[] | (import("react").MutableRefObject<HTMLCanvasElement | null> | {
-    handleCrop: () => void;
-} | {
-    handleInvert: () => void;
-    handleGrayscale: () => void;
-})[];
-export default useImageEditor;

package/dist/hooks/useImageEditor/index.js

@@ -1,320 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var CANVAS_HEIGHT = 600;
-var CANVAS_WIDTH = 900;
-var INVERT_COLOR = false;
-var APPLY_GRAYSCALE = false;
-var CORNER_BOX_SIZE = 4;
-var CROP_RATIO = 'custom';
-function useImageEditor(image, config) {
-    var _a = Object.assign({}, {
-        canvasHeight: CANVAS_HEIGHT,
-        canvasWidth: CANVAS_WIDTH,
-        cornerCircleSize: CORNER_BOX_SIZE,
-        cropRatio: CROP_RATIO,
-    }, config), canvasHeight = _a.canvasHeight, canvasWidth = _a.canvasWidth, cornerCircleSize = _a.cornerCircleSize;
-    var _b = (0, react_1.useState)(INVERT_COLOR), invertColor = _b[0], setInvertColor = _b[1];
-    var _c = (0, react_1.useState)(APPLY_GRAYSCALE), applyGrayscale = _c[0], setApplyGrayscale = _c[1];
-    var imageRef = (0, react_1.useRef)(null);
-    var canvasRef = (0, react_1.useRef)(null);
-    var cropStartRef = (0, react_1.useRef)(null);
-    var cropBoxRef = (0, react_1.useRef)(null);
-    var moveCropBoxOffsetRef = (0, react_1.useRef)(null);
-    var resizeCropBoxOffsetRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        if (!image || !canvasRef.current)
-            return;
-        var ctx = canvasRef.current.getContext('2d');
-        if (!ctx)
-            return;
-        canvasRef.current.height = canvasHeight;
-        canvasRef.current.width = canvasWidth;
-        var background = new Image();
-        background.src = image;
-        background.onload = function () {
-            imageRef.current = background;
-            drawImage(ctx, background);
-        };
-    }, [image, canvasHeight, canvasWidth]);
-    (0, react_1.useEffect)(function () {
-        if (!image)
-            return function () { };
-        if (canvasRef && canvasRef.current) {
-            canvasRef.current.addEventListener('mousedown', handleMouseDown);
-            canvasRef.current.addEventListener('mousemove', handleMouseMove);
-            canvasRef.current.addEventListener('mouseup', handleMouseUp);
-            return function () {
-                var _a, _b, _c;
-                (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', handleMouseDown);
-                (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousemove', handleMouseMove);
-                (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-        return function () { };
-        function handleMouseDown(e) {
-            if (cropBoxRef === null || cropBoxRef === void 0 ? void 0 : cropBoxRef.current) {
-                if (e.offsetX >= cropBoxRef.current.startX &&
-                    e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
-                    e.offsetY >= cropBoxRef.current.startY &&
-                    e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY) {
-                    moveCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
-                    return;
-                }
-                if (e.offsetX >=
-                    cropBoxRef.current.startX +
-                        cropBoxRef.current.deltaX -
-                        cornerCircleSize / 2 &&
-                    e.offsetX <=
-                        cropBoxRef.current.startX +
-                            cropBoxRef.current.deltaX +
-                            cornerCircleSize / 2 &&
-                    e.offsetY >=
-                        cropBoxRef.current.startY +
-                            cropBoxRef.current.deltaY -
-                            cornerCircleSize / 2 &&
-                    e.offsetY <=
-                        cropBoxRef.current.startY +
-                            cropBoxRef.current.deltaY +
-                            cornerCircleSize / 2) {
-                    resizeCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
-                    return;
-                }
-            }
-            cropStartRef.current = { x: e.offsetX, y: e.offsetY };
-            cropBoxRef.current = null;
-        }
-        function handleMouseMove(e) {
-            var _a, _b, _c, _d;
-            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!ctx || !cropBoxRef.current)
-                return;
-            if ((_b = moveCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
-                var deltaX = e.offsetX - moveCropBoxOffsetRef.current.x;
-                var deltaY = e.offsetY - moveCropBoxOffsetRef.current.y;
-                var rect_1 = Object.assign({}, cropBoxRef.current, {
-                    startX: cropBoxRef.current.startX + deltaX,
-                    startY: cropBoxRef.current.startY + deltaY,
-                });
-                draw(ctx, rect_1, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-                return;
-            }
-            if ((_c = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _c === void 0 ? void 0 : _c.x) {
-                var deltaX = e.offsetX - resizeCropBoxOffsetRef.current.x;
-                var deltaY = e.offsetY - resizeCropBoxOffsetRef.current.y;
-                var rect_2 = Object.assign({}, cropBoxRef.current, {
-                    deltaX: cropBoxRef.current.deltaX + deltaX,
-                    deltaY: cropBoxRef.current.deltaY + deltaY,
-                });
-                draw(ctx, rect_2, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-                return;
-            }
-            if (!((_d = cropStartRef === null || cropStartRef === void 0 ? void 0 : cropStartRef.current) === null || _d === void 0 ? void 0 : _d.x))
-                return;
-            var rect = {
-                startX: cropStartRef.current.x,
-                startY: cropStartRef.current.y,
-                deltaX: e.offsetX - cropStartRef.current.x,
-                deltaY: e.offsetY - cropStartRef.current.y,
-            };
-            draw(ctx, rect, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-        }
-        function handleMouseUp(e) {
-            var _a, _b;
-            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!ctx || !cropBoxRef.current || !cropStartRef.current)
-                return;
-            if (moveCropBoxOffsetRef.current) {
-                var deltaX_1 = moveCropBoxOffsetRef.current.x - e.offsetX;
-                var deltaY_1 = moveCropBoxOffsetRef.current.y - e.offsetY;
-                var rect_3 = Object.assign(cropBoxRef.current, {
-                    startX: cropBoxRef.current.startX - deltaX_1,
-                    startY: cropBoxRef.current.startY - deltaY_1,
-                });
-                draw(ctx, rect_3, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
-                cropBoxRef.current = rect_3;
-                moveCropBoxOffsetRef.current = null;
-                return;
-            }
-            if ((_b = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
-                var deltaX_2 = e.offsetX - resizeCropBoxOffsetRef.current.x;
-                var deltaY_2 = e.offsetY - resizeCropBoxOffsetRef.current.y;
-                var rect_4 = Object.assign({}, cropBoxRef.current, {
-                    deltaX: cropBoxRef.current.deltaX + deltaX_2,
-                    deltaY: cropBoxRef.current.deltaY + deltaY_2,
-                });
-                draw(ctx, rect_4, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
-                cropBoxRef.current = rect_4;
-                resizeCropBoxOffsetRef.current = null;
-                return;
-            }
-            var deltaX = e.offsetX - cropStartRef.current.x;
-            var deltaY = e.offsetY - cropStartRef.current.y;
-            var rect = {
-                startX: deltaX > 0 ? cropStartRef.current.x : cropStartRef.current.x + deltaX,
-                startY: deltaY > 0 ? cropStartRef.current.y : cropStartRef.current.y + deltaY,
-                deltaX: Math.abs(deltaX),
-                deltaY: Math.abs(deltaY),
-            };
-            cropBoxRef.current = rect;
-            draw(ctx, rect, { drawCornerBoxes: true });
-            cropStartRef.current = null;
-        }
-    }, [image, canvasHeight, canvasWidth]);
-    // useEffect(() => {
-    //   if (!image) return;
-    //   if (canvasRef && canvasRef.current) {
-    //     canvasRef.current.addEventListener("mousemove", handleMouseMove);
-    //     return () => {
-    //       canvasRef.current.removeEventListener("mousemove", handleMouseMove);
-    //     };
-    //   }
-    //   function handleMouseMove(e) {
-    //     if (cropBoxRef?.current) {
-    //       if (
-    //         e.offsetX >= cropBoxRef.current.startX &&
-    //         e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
-    //         e.offsetY >= cropBoxRef.current.startY &&
-    //         e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY
-    //       ) {
-    //         canvasRef.current.style.cursor = "move";
-    //         return;
-    //       }
-    //       if (
-    //         e.offsetX >=
-    //           cropBoxRef.current.startX +
-    //             cropBoxRef.current.deltaX -
-    //             cornerCircleSize / 2 &&
-    //         e.offsetX <=
-    //           cropBoxRef.current.startX +
-    //             cropBoxRef.current.deltaX +
-    //             cornerCircleSize / 2 &&
-    //         e.offsetY >=
-    //           cropBoxRef.current.startY +
-    //             cropBoxRef.current.deltaY -
-    //             cornerCircleSize / 2 &&
-    //         e.offsetY <=
-    //           cropBoxRef.current.startY +
-    //             cropBoxRef.current.deltaY +
-    //             cornerCircleSize / 2
-    //       ) {
-    //         canvasRef.current.style.cursor = "pointer";
-    //         return;
-    //       }
-    //     }
-    //     canvasRef.current.style.cursor = "default";
-    //   }
-    // }, [image, canvasHeight, canvasWidth]);
-    function drawImage(ctx, image, config) {
-        var _a = config || {}, invertColor = _a.invertColor, applyGrayscale = _a.applyGrayscale;
-        if (invertColor)
-            ctx.filter = 'invert(1)';
-        else if (applyGrayscale)
-            ctx.filter = 'grayscale(1)';
-        else
-            ctx.filter = 'invert(0)';
-        // else ctx.filter = "grayscale(0)";
-        var wRatio = ctx.canvas.width / image.width;
-        var hRatio = ctx.canvas.height / image.height;
-        var ratio = Math.min(wRatio, hRatio);
-        var centerOffsetX = (ctx.canvas.width - image.width * ratio) / 2;
-        var centerOffsetY = (ctx.canvas.height - image.height * ratio) / 2;
-        ctx.drawImage(image, 0, 0, image.width, image.height, centerOffsetX, centerOffsetY, image.width * ratio, image.height * ratio);
-    }
-    function draw(ctx, rect, config) {
-        var _a = config || {}, drawCornerBoxes = _a.drawCornerBoxes, invertColor = _a.invertColor;
-        // clear the canvas
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-        // redraw the image
-        if (!imageRef.current)
-            return;
-        drawImage(ctx, imageRef.current, { invertColor: invertColor });
-        if (!rect)
-            return;
-        // redraw one or more things based on their javascript objects
-        ctx.beginPath();
-        ctx.setLineDash([]);
-        ctx.rect(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
-        ctx.rect(canvasWidth, 0, 0 - canvasWidth, canvasHeight);
-        ctx.closePath();
-        ctx.strokeStyle = '#fff';
-        ctx.stroke();
-        ctx.fillStyle = '#00000055';
-        ctx.fill();
-        if (!drawCornerBoxes)
-            return;
-        ctx.beginPath();
-        ctx.arc(rect.startX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX + rect.deltaX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.arc(rect.startX + rect.deltaX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
-        ctx.fillStyle = '#fff';
-        ctx.fill();
-        ctx.closePath();
-    }
-    function handleCrop() {
-        var _a, _b;
-        if (!cropBoxRef.current)
-            return;
-        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx || !imageRef.current)
-            return;
-        var rect = cropBoxRef.current;
-        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-        drawImage(ctx, imageRef.current, { invertColor: invertColor, applyGrayscale: applyGrayscale });
-        var imageData = ctx.getImageData(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
-        var clone = (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.cloneNode();
-        if (!clone)
-            return;
-        clone.width = rect.deltaX;
-        clone.height = rect.deltaY;
-        var cloneCtx = clone.getContext('2d');
-        if (!cloneCtx)
-            return;
-        cloneCtx.putImageData(imageData, 0, 0);
-        var url = clone.toDataURL();
-        console.log(url);
-        cropBoxRef.current = null;
-    }
-    function handleInvert() {
-        var _a;
-        if (!cropBoxRef.current)
-            return;
-        var updated = !invertColor;
-        setInvertColor(updated);
-        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx)
-            return;
-        draw(ctx, cropBoxRef.current, {
-            invertColor: updated,
-            drawCornerBoxes: true,
-            applyGrayscale: applyGrayscale,
-        });
-    }
-    function handleGrayscale() {
-        setApplyGrayscale(!applyGrayscale);
-    }
-    if (!image)
-        return [null, null];
-    var crop = {
-        handleCrop: handleCrop,
-    };
-    var color = {
-        handleInvert: handleInvert,
-        handleGrayscale: handleGrayscale,
-    };
-    return [canvasRef, crop, color];
-}
-exports.default = useImageEditor;