@threekit-tools/treble 0.0.85-next-1 → 0.0.85-next-4

package/dist/Treble/Treble.d.ts

@@ -1,10 +1,10 @@
 import threekitAPI from '../api';
-import type { IThreekitPlayer, IThreekitPrivatePlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
-import type { IWishlist } from './wishlist';
+import { IThreekitPlayer, IThreekitPrivatePlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
+import { IWishlist } from './wishlist';
 import snapshots from './snapshots';
-import type { ISaveConfiguration } from '../api/configurations';
-import type { ICreateOrder } from '../api/orders';
-import type { ICartItem } from '../http/orders';
+import { ISaveConfiguration } from '../api/configurations';
+import { ICreateOrder } from '../api/orders';
+import { ICartItem } from '../http/orders';
 interface ITreble {
     player: IThreekitPlayer;
     orgId: string;
@@ -18,9 +18,6 @@ interface IEmailShareCredentials {
 interface IOrder extends Omit<ICreateOrder, 'cart'> {
     cart?: Array<ICartItem>;
 }
-interface ISaveConfigurationObject extends Omit<ISaveConfiguration, 'configuraiton'> {
-    saveSceneGraphState: boolean;
-}
 declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPrivatePlayer;
@@ -31,7 +28,7 @@ declare class Treble {
     _debugMode: boolean;
     constructor({ player, orgId, initialConfiguration }: ITreble);
     createOrder: (order?: IOrder) => Promise<import("../http/orders").IOrderResponse>;
-    saveConfiguration: (config?: Partial<ISaveConfigurationObject>) => Promise<{
+    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, 'configuration'>>) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;

package/dist/Treble/Treble.js

@@ -46,7 +46,6 @@ var constants_1 = require("../constants");
 var utils_1 = require("../utils");
 var wishlist_1 = __importDefault(require("./wishlist"));
 var snapshots_1 = __importDefault(require("./snapshots"));
-var shortid_1 = __importDefault(require("shortid"));
 var Treble = (function () {
     function Treble(_a) {
         var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
@@ -81,32 +80,24 @@ var Treble = (function () {
             });
         }); };
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, _a, customerId, metadata, productVersion, attachments, saveSceneGraphState, player, sceneGraphState, sceneGraphResponse, response, params, url;
+            var threekitDomain, _a, customerId, metadata, productVersion, attachments, player, response, params, url;
             var _b;
             var _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         threekitDomain = connection_1.default.getConnection().threekitDomain;
-                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments, saveSceneGraphState = _a.saveSceneGraphState;
+                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments;
                         player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
-                        if (!(saveSceneGraphState && player.saveSceneGraphState)) return [3, 2];
-                        return [4, api_1.default.files.saveFile(player.saveSceneGraphState())];
+                        return [4, api_1.default.configurations.save({
+                                assetId: window.threekit.player.assetId,
+                                configuration: player.getConfigurator().getFullConfiguration(),
+                                customerId: customerId,
+                                metadata: metadata,
+                                productVersion: productVersion,
+                                attachments: attachments,
+                            })];
                     case 1:
-                        sceneGraphResponse = _d.sent();
-                        sceneGraphState = sceneGraphResponse.files[0].hash;
-                        _d.label = 2;
-                    case 2: return [4, api_1.default.configurations.save({
-                            shortId: shortid_1.default.generate(),
-                            assetId: window.threekit.player.assetId,
-                            configuration: player.getConfigurator().getFullConfiguration(),
-                            customerId: customerId,
-                            metadata: metadata,
-                            productVersion: productVersion,
-                            attachments: attachments,
-                            sceneGraphState: sceneGraphState,
-                        })];
-                    case 3:
                         response = _d.sent();
                         params = Object.assign((0, utils_1.getParams)(), (_b = {},
                             _b[constants_1.TK_SAVED_CONFIG_PARAM_KEY] = response.data.shortId,

package/dist/api/configurations.d.ts

@@ -1,14 +1,12 @@
 import { IConfigurationResponse } from '../http/configurations';
 import { IConfiguration, IMetadata } from '../types';
 export interface ISaveConfiguration {
-    shortId?: string;
     assetId: string;
     customerId?: string;
     configuration: IConfiguration;
     metadata?: IMetadata;
     productVersion?: string;
     attachments?: Record<string, File>;
-    sceneGraphState?: string;
 }
 export declare const save: (saveConfig: ISaveConfiguration) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;
 export declare const fetch: (configurationId: string) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;

package/dist/api/configurations.js

@@ -42,9 +42,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchAll = exports.fetch = exports.save = void 0;
 var http_1 = __importDefault(require("../http"));
 var save = function (saveConfig) { return __awaiter(void 0, void 0, void 0, function () {
-    var assetId, customerId, configuration, metadata, productVersion, attachments, sceneGraphState, error, fd, attachmentsPrepped_1;
+    var assetId, customerId, configuration, metadata, productVersion, attachments, error, fd, attachmentsPrepped_1;
     return __generator(this, function (_a) {
-        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments, sceneGraphState = saveConfig.sceneGraphState;
+        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments;
         if (!assetId)
             error = 'Requires Asset Id';
         if (!configuration)
@@ -59,8 +59,6 @@ var save = function (saveConfig) { return __awaiter(void 0, void 0, void 0, func
             fd.append('metadata', JSON.stringify(metadata));
         if (customerId)
             fd.append('customerId', customerId);
-        if (sceneGraphState)
-            fd.append('sceneGraphState', sceneGraphState);
         if (attachments && Object.keys(attachments).length) {
             attachmentsPrepped_1 = {};
             Object.entries(attachments).forEach(function (_a) {

package/dist/api/index.d.ts

@@ -1,4 +1,3 @@
-import * as files from './files';
 import * as products from './products';
 import * as configurations from './configurations';
 import * as price from './price';
@@ -7,7 +6,6 @@ import * as catalog from './catalog';
 import * as datatables from './datatables';
 import * as server from './server';
 declare const _default: {
-    files: typeof files;
     products: typeof products;
     configurations: typeof configurations;
     price: typeof price;

package/dist/api/index.js

@@ -23,7 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var files = __importStar(require("./files"));
 var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
 var price = __importStar(require("./price"));
@@ -32,7 +31,6 @@ var catalog = __importStar(require("./catalog"));
 var datatables = __importStar(require("./datatables"));
 var server = __importStar(require("./server"));
 exports.default = {
-    files: files,
     products: products,
     configurations: configurations,
     price: price,

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

@@ -1,6 +1,7 @@
 import React from 'react';
-interface IAwaitThreekitLoad {
+interface AwaitThreekitLoadProps {
     children: React.ReactNode;
+    fallback?: React.ReactNode;
 }
-declare const AwaitThreekitLoad: (props: IAwaitThreekitLoad) => JSX.Element | null;
+declare const AwaitThreekitLoad: React.FC<AwaitThreekitLoadProps>;
 export default AwaitThreekitLoad;

package/dist/components/AwaitThreekitLoad/index.js

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
 var AwaitThreekitLoad = function (props) {
-    var children = props.children;
+    var children = props.children, fallback = props.fallback;
     var isLoaded = (0, useThreekitInitStatus_1.default)();
-    if (!isLoaded || !children)
+    if (!isLoaded) {
+        if (fallback)
+            return react_1.default.createElement(react_1.default.Fragment, null, fallback);
+        return null;
+    }
+    if (!children)
         return null;
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 };

package/dist/components/DraggableHint/draggableIndicator.styles.d.ts

@@ -0,0 +1,5 @@
+import { DraggableIndicatorProps } from './index';
+declare type HandWrapperProps = Pick<DraggableIndicatorProps, 'color' | 'duration'>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HandWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HandWrapperProps, never>;
+export {};

package/dist/components/DraggableHint/draggableIndicator.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HandWrapper = exports.Wrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var bounce = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n        transform: translateX(0);\n    }\n\n    50% {\n        transform: translateX(-100px);\n    }\n\n    100% {\n        transform: translateX(0);\n    }\n"], ["\n    0% {\n        transform: translateX(0);\n    }\n\n    50% {\n        transform: translateX(-100px);\n    }\n\n    100% {\n        transform: translateX(0);\n    }\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  z-index: 100;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"], ["\n  width: max-content;\n  position: absolute;\n  z-index: 100;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])));
+exports.HandWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 56px;\n  width: 56px;\n  background: ", ";\n  margin: 0 auto;\n  border-radius: 50%;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n\n  animation: ", " ", "s ease infinite;\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    margin: 0 auto;\n  }\n"], ["\n  height: 56px;\n  width: 56px;\n  background: ", ";\n  margin: 0 auto;\n  border-radius: 50%;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n\n  animation: ", " ", "s ease infinite;\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    margin: 0 auto;\n  }\n"])), function (props) { return props.color || '#78c4a299'; }, bounce, function (props) { return props.duration || 2.5; });
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface DraggableIndicatorProps {
+    color?: string;
+    duration?: number;
+    timeout?: number;
+}
+export declare function DraggableIndicator(props: DraggableIndicatorProps): JSX.Element | null;
+export default DraggableIndicator;

package/dist/components/DraggableHint/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableIndicator = void 0;
+var react_1 = __importStar(require("react"));
+var draggableIndicator_styles_1 = require("./draggableIndicator.styles");
+var Draggable_1 = __importDefault(require("../../icons/Draggable"));
+var useFirstPlayerInteraction_1 = __importDefault(require("../../hooks/useFirstPlayerInteraction"));
+function DraggableIndicator(props) {
+    var awaitingFirstInteraction = (0, useFirstPlayerInteraction_1.default)();
+    var _a = (0, react_1.useState)(false), hasTimeoutExpired = _a[0], setHasTimeoutExpired = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (awaitingFirstInteraction && props.timeout)
+            setTimeout(function () { return setHasTimeoutExpired(true); }, props.timeout);
+    }, [awaitingFirstInteraction]);
+    if (!awaitingFirstInteraction || hasTimeoutExpired)
+        return null;
+    return (react_1.default.createElement(draggableIndicator_styles_1.Wrapper, null,
+        react_1.default.createElement(draggableIndicator_styles_1.HandWrapper, { color: props.color, duration: props.duration },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(Draggable_1.default, null)))));
+}
+exports.DraggableIndicator = DraggableIndicator;
+exports.default = DraggableIndicator;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface PlayerLoadingCircularProps {
+    size?: string;
+}
+export declare function PlayerLoadingCircular(props: PlayerLoadingCircularProps): JSX.Element | null;
+export default PlayerLoadingCircular;

package/dist/components/PlayerLoadingCircular/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerLoadingCircular = void 0;
+var react_1 = __importDefault(require("react"));
+var playerLoadingCircular_styles_1 = require("./playerLoadingCircular.styles");
+var useLoadingProgress_1 = __importDefault(require("../../hooks/useLoadingProgress"));
+function PlayerLoadingCircular(props) {
+    var progress = (0, useLoadingProgress_1.default)();
+    if (progress === 100 || progress === undefined)
+        return null;
+    return (react_1.default.createElement(playerLoadingCircular_styles_1.Wrapper, { size: props.size },
+        react_1.default.createElement(playerLoadingCircular_styles_1.Progress, { size: props.size, progress: progress })));
+}
+exports.PlayerLoadingCircular = PlayerLoadingCircular;
+exports.default = PlayerLoadingCircular;

package/dist/components/PlayerLoadingCircular/playerLoadingCircular.styles.d.ts

@@ -0,0 +1,7 @@
+import { PlayerLoadingCircularProps } from './index';
+interface ProgressProps extends PlayerLoadingCircularProps {
+    progress: number;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ProgressProps, "size">, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps, never>;
+export {};

package/dist/components/PlayerLoadingCircular/playerLoadingCircular.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var PRIMARY_COLOR = '#369';
+var SECONDARY_COLOR = '#adf';
+var SIZE = '120px';
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"], ["\n  height: ", ";\n  width: ", ";\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%);\n"])), function (props) { return props.size || SIZE; }, function (props) { return props.size || SIZE; });
+exports.Progress = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: progress 2s 0.5s forwards;\n  width: ", ";\n  aspect-ratio: 1;\n  border-radius: 50%;\n  position: relative;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: conic-gradient(\n      ", " calc(", " * 1%),\n      ", " 0\n    );\n    mask: radial-gradient(#0000 55%, #000 0);\n    mask-mode: alpha;\n  }\n\n  &::after {\n    counter-reset: percentage ", ";\n    content: counter(percentage) '%';\n    font-family: Helvetica, Arial, sans-serif;\n    font-size: calc(", " / 5);\n    color: ", ";\n  }\n"], ["\n  animation: progress 2s 0.5s forwards;\n  width: ", ";\n  aspect-ratio: 1;\n  border-radius: 50%;\n  position: relative;\n  overflow: hidden;\n  display: grid;\n  place-items: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: conic-gradient(\n      ", " calc(", " * 1%),\n      ", " 0\n    );\n    mask: radial-gradient(#0000 55%, #000 0);\n    mask-mode: alpha;\n  }\n\n  &::after {\n    counter-reset: percentage ", ";\n    content: counter(percentage) '%';\n    font-family: Helvetica, Arial, sans-serif;\n    font-size: calc(", " / 5);\n    color: ", ";\n  }\n"])), function (props) { return props.size || SIZE; }, PRIMARY_COLOR, function (props) { return props.progress; }, SECONDARY_COLOR, function (props) { return props.progress; }, function (props) { return props.size || SIZE; }, PRIMARY_COLOR);
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PlayerLoadingSpinnerProps {
+    duration?: number;
+    size?: string;
+}
+export declare function PlayerLoadingSpinner(props: PlayerLoadingSpinnerProps): JSX.Element | null;
+export default PlayerLoadingSpinner;

package/dist/components/PlayerLoadingSpinner/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerLoadingSpinner = void 0;
+var react_1 = __importDefault(require("react"));
+var playerLoadingSpinner_styles_1 = require("./playerLoadingSpinner.styles");
+var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
+function PlayerLoadingSpinner(props) {
+    var hide = (0, useThreekitInitStatus_1.default)();
+    if (hide)
+        return null;
+    return react_1.default.createElement(playerLoadingSpinner_styles_1.Wrapper, { size: props.size, duration: props.duration });
+}
+exports.PlayerLoadingSpinner = PlayerLoadingSpinner;
+exports.default = PlayerLoadingSpinner;

package/dist/components/PlayerLoadingSpinner/playerLoadingSpinner.styles.d.ts

@@ -0,0 +1,4 @@
+import { PlayerLoadingSpinnerProps } from './index';
+declare type WrapperProps = Pick<PlayerLoadingSpinnerProps, 'duration' | 'size'>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WrapperProps, never>;
+export {};

package/dist/components/PlayerLoadingSpinner/playerLoadingSpinner.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var SIZE = '36px';
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n  transform:  translateY(-50%) translateX(-50%) rotate(1turn);\n}\n"], ["\nto {\n  transform:  translateY(-50%) translateX(-50%) rotate(1turn);\n}\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  width: ", ";\n  aspect-ratio: 1;\n  display: grid;\n  mask: conic-gradient(from 22deg, #0001, #000);\n  animation: ", " ", "s steps(8) infinite;\n\n  &,\n  &:before {\n    background: linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/34% 8% space no-repeat,\n    linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/8% 34% no-repeat space;\n  }\n\n  &:before {\n    content: \"\";\n    transform: rotate(45deg);\n  }\n}\n\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateY(-50%) translateX(-50%);\n  width: ", ";\n  aspect-ratio: 1;\n  display: grid;\n  mask: conic-gradient(from 22deg, #0001, #000);\n  animation: ", " ", "s steps(8) infinite;\n\n  &,\n  &:before {\n    background: linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/34% 8% space no-repeat,\n    linear-gradient(hsl(230deg 100% 20%) 0 0) 50%/8% 34% no-repeat space;\n  }\n\n  &:before {\n    content: \"\";\n    transform: rotate(45deg);\n  }\n}\n\n"])), function (props) { return props.size || SIZE; }, spin, function (props) { return props.duration || 1; });
+var templateObject_1, templateObject_2;

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

@@ -8,7 +8,6 @@ interface ShareProps {
     className?: string;
     message?: string;
     position: Positions;
-    saveSceneGraphState?: boolean;
 }
 export declare const Share: {
     (props: ShareProps): JSX.Element | null;
@@ -23,7 +22,6 @@ export declare const Share: {
         shape: string;
         type: string;
         message: string;
-        saveSceneGraphState: boolean;
     };
 };
 export default Share;

package/dist/components/Share/index.js

@@ -77,8 +77,7 @@ var Share = function (props) {
         shape: 'round',
         message: 'Link copied!',
         position: 'bottom-right',
-        saveSceneGraphState: false,
-    }, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position, saveSceneGraphState = _a.saveSceneGraphState;
+    }, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position;
     var hasLoaded = (0, useThreekitInitStatus_1.default)();
     var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
     var _c = (0, react_1.useState)(null), resumeUrl = _c[0], setResumeUrl = _c[1];
@@ -114,9 +113,7 @@ var Share = function (props) {
                         setShow(!show);
                         return [2];
                     }
-                    return [4, window.threekit.treble.saveConfiguration({
-                            saveSceneGraphState: saveSceneGraphState,
-                        })];
+                    return [4, window.threekit.treble.saveConfiguration()];
                 case 1:
                     configuration = _a.sent();
                     _a.label = 2;
@@ -168,6 +165,5 @@ exports.Share.defaultProps = {
     shape: 'round',
     type: 'threekit',
     message: 'Link copied!',
-    saveSceneGraphState: false,
 };
 exports.default = exports.Share;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SkeletonProps {
+    shimmer?: boolean;
+}
+interface ISkeleton extends React.FC<SkeletonProps> {
+    ColorSwatchSkeleton: React.FC<SkeletonProps>;
+    CardsSkeleton: React.FC<SkeletonProps>;
+    StripsSkeleton: React.FC<SkeletonProps>;
+    FormHeaderSkeleton: React.FC<SkeletonProps>;
+    FormDescriptionSkeleton: React.FC<SkeletonProps>;
+}
+export declare const FormHeaderSkeleton: React.FC<SkeletonProps>;
+export declare const FormDescriptionSkeleton: React.FC<SkeletonProps>;
+export declare const StripsSkeleton: React.FC<SkeletonProps>;
+export declare const CardsSkeleton: React.FC<SkeletonProps>;
+export declare const ColowSwatchSkeleton: React.FC<SkeletonProps>;
+declare const Skeleton: ISkeleton;
+export default Skeleton;

package/dist/components/Skeleton/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColowSwatchSkeleton = exports.CardsSkeleton = exports.StripsSkeleton = exports.FormDescriptionSkeleton = exports.FormHeaderSkeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var skeleton_styles_1 = require("./skeleton.styles");
+var FormHeaderSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.FormHeaderWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+        react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)));
+};
+exports.FormHeaderSkeleton = FormHeaderSkeleton;
+var FormDescriptionSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return react_1.default.createElement(skeleton_styles_1.FormDescriptionWrapper, { shimmer: shimmer });
+};
+exports.FormDescriptionSkeleton = FormDescriptionSkeleton;
+var StripsSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement("div", null, Array(3)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.StripsItem, { key: i },
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null)))); }))));
+};
+exports.StripsSkeleton = StripsSkeleton;
+var CardsSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.RowWrapper, null, Array(3)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.CardItem, { key: i },
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null),
+            react_1.default.createElement(skeleton_styles_1.ShimmerDiv, null))); }))));
+};
+exports.CardsSkeleton = CardsSkeleton;
+var ColowSwatchSkeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement(skeleton_styles_1.SkeletonWrapper, { shimmer: shimmer },
+        react_1.default.createElement(skeleton_styles_1.TitleWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.DescriptionWrapper, { shimmer: shimmer }),
+        react_1.default.createElement(skeleton_styles_1.RowWrapper, null, Array(8)
+            .fill(null)
+            .map(function (_, i) { return (react_1.default.createElement(skeleton_styles_1.SwatchItem, { key: i })); }))));
+};
+exports.ColowSwatchSkeleton = ColowSwatchSkeleton;
+var Skeleton = function (props) {
+    var shimmer = props.shimmer;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(exports.FormHeaderSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.FormDescriptionSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.StripsSkeleton, { shimmer: shimmer }),
+        react_1.default.createElement(exports.CardsSkeleton, { shimmer: shimmer })));
+};
+Skeleton.FormHeaderSkeleton = exports.FormHeaderSkeleton;
+Skeleton.FormDescriptionSkeleton = exports.FormDescriptionSkeleton;
+Skeleton.ColorSwatchSkeleton = exports.ColowSwatchSkeleton;
+Skeleton.CardsSkeleton = exports.CardsSkeleton;
+Skeleton.StripsSkeleton = exports.StripsSkeleton;
+exports.default = Skeleton;

package/dist/components/Skeleton/skeleton.styles.d.ts

@@ -0,0 +1,14 @@
+interface ShimmerProps {
+    shimmer?: boolean;
+}
+export declare const ShimmerDiv: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const FormHeaderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const FormDescriptionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const RowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwatchItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ShimmerProps, never>;
+export declare const StripsItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CardItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};