@threekit-tools/treble 0.0.84 → 0.0.85-next-3

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

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
 import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
+import type { Positions } from './share.styles';
 interface ShareProps {
     shape?: BUTTON_SHAPES;
     type?: BUTTON_TYPES;
     className?: string;
     message?: string;
+    position: Positions;
 }
 export declare const Share: {
     (props: ShareProps): JSX.Element | null;

package/dist/components/Share/index.js

@@ -1,27 +1,157 @@
 "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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Share = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Button_1 = __importDefault(require("../Button"));
+var message_1 = __importDefault(require("../message"));
 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");
+var share_styles_1 = require("./share.styles");
 var Share = function (props) {
-    var _a = Object.assign({ type: 'threekit', shape: 'round', message: 'Link copied!' }, props), shape = _a.shape, type = _a.type, className = _a.className, message = _a.message;
+    var _a = Object.assign({
+        type: 'threekit',
+        shape: 'round',
+        message: 'Link copied!',
+        position: 'bottom-right',
+    }, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position;
     var hasLoaded = (0, useThreekitInitStatus_1.default)();
-    var handleShare = (0, useShare_1.default)();
-    if (!hasLoaded || !handleShare)
+    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];
+    var resumeUrlElRef = (0, react_1.useRef)(null);
+    var shareButtonRef = (0, react_1.useRef)(null);
+    var shareContentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (e) {
+            var _a, _b;
+            if (!e)
+                return;
+            if (!((_a = shareButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
+                !((_b = shareContentRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+                setShow(false);
+                e.stopPropagation();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [show, shareButtonRef, shareContentRef]);
+    if (!hasLoaded)
         return null;
     var cls = (0, utils_1.generateWidgetClassName)('share', className);
-    var handleClick = function () {
-        handleShare(message);
-    };
-    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }));
+    var handleClick = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var configuration, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (show) {
+                        setResumeUrl(null);
+                        setShow(!show);
+                        return [2];
+                    }
+                    return [4, window.threekit.treble.saveConfiguration()];
+                case 1:
+                    configuration = _a.sent();
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 4, , 5]);
+                    return [4, navigator.clipboard.writeText(configuration.resumableUrl)];
+                case 3:
+                    _a.sent();
+                    if (msg === null || msg === void 0 ? void 0 : msg.length)
+                        message_1.default.info(msg);
+                    return [3, 5];
+                case 4:
+                    e_1 = _a.sent();
+                    setResumeUrl(configuration.resumableUrl);
+                    setShow(!show);
+                    return [3, 5];
+                case 5: return [2];
+            }
+        });
+    }); };
+    var handleClickCopy = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            if (!((_a = resumeUrlElRef.current) === null || _a === void 0 ? void 0 : _a.value))
+                return [2];
+            navigator.clipboard.writeText(resumeUrlElRef.current.value);
+            if (msg === null || msg === void 0 ? void 0 : msg.length)
+                message_1.default.info(msg);
+            return [2];
+        });
+    }); };
+    return (react_1.default.createElement(share_styles_1.Wrapper, { ref: shareButtonRef },
+        react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }),
+        show ? (react_1.default.createElement(share_styles_1.ShareWrapper, { position: position },
+            react_1.default.createElement(share_styles_1.Content, { ref: shareContentRef },
+                react_1.default.createElement("input", { type: "text", ref: resumeUrlElRef, value: resumeUrl || '', onChange: function () { } }),
+                react_1.default.createElement("button", { type: "button", onClick: handleClickCopy }, "copy link")),
+            react_1.default.createElement(share_styles_1.Caret, null))) : null));
 };
 exports.Share = Share;
 exports.Share.propTypes = {

package/dist/components/Share/share.styles.d.ts

@@ -0,0 +1,9 @@
+export declare type Positions = 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
+interface PositionProps {
+    position: Positions;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Caret: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ShareWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, PositionProps, never>;
+export {};

package/dist/components/Share/share.styles.js

@@ -0,0 +1,23 @@
+"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.ShareWrapper = exports.Caret = exports.Content = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n  position: relative;\n"], ["\n  height: 40px;\n  width: 40px;\n  position: relative;\n"])));
+var ShareWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 24px 18px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  font-size: 16px;\n  width: 290px;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n\n  input {\n    background: #555555;\n    color: #ffffff;\n    border: none;\n    outline: none;\n    padding: 9px;\n    border-radius: 4px;\n    font-size: 13px;\n    text-overflow: ellipsis;\n    width: 180px;\n  }\n\n  button {\n    color: #2a94f5;\n    font-size: 13px;\n    background: none;\n    outline: none;\n    border: none;\n    cursor: pointer;\n  }\n"], ["\n  padding: 24px 18px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  font-size: 16px;\n  width: 290px;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n\n  input {\n    background: #555555;\n    color: #ffffff;\n    border: none;\n    outline: none;\n    padding: 9px;\n    border-radius: 4px;\n    font-size: 13px;\n    text-overflow: ellipsis;\n    width: 180px;\n  }\n\n  button {\n    color: #2a94f5;\n    font-size: 13px;\n    background: none;\n    outline: none;\n    border: none;\n    cursor: pointer;\n  }\n"])));
+exports.Caret = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 0;\n  height: 0;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n  position: absolute;\n"], ["\n  width: 0;\n  height: 0;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n  position: absolute;\n"])));
+exports.ShareWrapper = (0, styled_components_1.default)(ShareWrapperStyles)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  top: ", ";\n  left: ", ";\n  transform: ", ";\n\n  ", " {\n    left: ", ";\n    top: ", ";\n\n    transform: ", ";\n  }\n"], ["\n  top: ", ";\n  left: ", ";\n  transform: ", ";\n\n  ", " {\n    left: ", ";\n    top: ", ";\n\n    transform: ", ";\n  }\n"])), function (props) { return (props.position.includes('top') ? '14px' : '-100%'); }, function (props) { return (props.position.includes('right') ? '-250px' : 'auto'); }, function (props) {
+    return props.position.includes('top')
+        ? ''
+        : 'translateY(calc(0px - 14px - 100%))';
+}, exports.Caret, function (props) { return (props.position.includes('right') ? '260px' : '10px'); }, function (props) { return (props.position.includes('top') ? '0' : 'auto'); }, function (props) {
+    return props.position.includes('top') ? 'translateY(-100%) scaleY(-1)' : '';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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 {};

package/dist/components/Skeleton/skeleton.styles.js

@@ -0,0 +1,43 @@
+"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.CardItem = exports.StripsItem = exports.SwatchItem = exports.RowWrapper = exports.DescriptionWrapper = exports.TitleWrapper = exports.FormDescriptionWrapper = exports.FormHeaderWrapper = exports.SkeletonWrapper = exports.ShimmerDiv = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var shimmer = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      background-position: -468px 0;\n    }\n    \n    100% {\n      background-position: 468px 0; \n    }\n"], ["\n    0% {\n      background-position: -468px 0;\n    }\n    \n    100% {\n      background-position: 468px 0; \n    }\n"])));
+exports.ShimmerDiv = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: #d9d9d9;\n  background-image: linear-gradient(\n    to right,\n    #d9d9d9 0%,\n    #c9c9c9 20%,\n    #d9d9d9 40%,\n    #d9d9d9 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 140px;\n\n  animation-duration: 1.4s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"], ["\n  background: #d9d9d9;\n  background-image: linear-gradient(\n    to right,\n    #d9d9d9 0%,\n    #c9c9c9 20%,\n    #d9d9d9 40%,\n    #d9d9d9 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 140px;\n\n  animation-duration: 1.4s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), shimmer);
+exports.SkeletonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 32px 0 32px 0;\n\n  ", " {\n    ", "\n  }\n"], ["\n  margin: 32px 0 32px 0;\n\n  ", " {\n    ", "\n  }\n"])), exports.ShimmerDiv, function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.FormHeaderWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div:nth-child(1) {\n    height: 32px;\n    width: 400px;\n    border-radius: 2px;\n    margin-bottom: 10px;\n    ", "\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 250px;\n    border-radius: 2px;\n    ", "\n  }\n"], ["\n  & > div:nth-child(1) {\n    height: 32px;\n    width: 400px;\n    border-radius: 2px;\n    margin-bottom: 10px;\n    ", "\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 250px;\n    border-radius: 2px;\n    ", "\n  }\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); }, function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.FormDescriptionWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 440px;\n  height: 62px;\n  border-radius: 2px;\n  margin: 32px 0;\n\n  background-size: 800px 62px;\n  ", "\n"], ["\n  width: 100%;\n  max-width: 440px;\n  height: 62px;\n  border-radius: 2px;\n  margin: 32px 0;\n\n  background-size: 800px 62px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.TitleWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 32px;\n  width: 200px;\n  ", "\n"], ["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 32px;\n  width: 200px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.DescriptionWrapper = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 20px;\n  width: 250px;\n  ", "\n"], ["\n  border-radius: 2px;\n  margin-bottom: 8px;\n  height: 20px;\n  width: 250px;\n  ", "\n"])), function (props) { return (props.shimmer ? '' : "background: #d9d9d9;"); });
+exports.RowWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  & > div {\n    margin-right: 12px;\n  }\n\n  & > div:last-child {\n    margin-right: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  & > div {\n    margin-right: 12px;\n  }\n\n  & > div:last-child {\n    margin-right: 0;\n  }\n"])));
+exports.SwatchItem = (0, styled_components_1.default)(exports.ShimmerDiv)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n"], ["\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n"])));
+exports.StripsItem = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: max-content;\n  width: 440px;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 8px;\n  margin-bottom: 10px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 12px;\n\n  & > div:nth-child(1) {\n    height: 48px;\n    width: 48px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(2) {\n    & > div:nth-child(1) {\n      height: 20px;\n      width: 220px;\n      margin-bottom: 6px;\n      border-radius: 2px;\n    }\n\n    & > div:nth-child(2) {\n      height: 20px;\n      width: 170px;\n      border-radius: 2px;\n    }\n  }\n\n  & > div:nth-child(3) {\n    height: 100%;\n    display: flex;\n    justify-content: space-around;\n    flex-direction: column;\n\n    & > div {\n      height: 20px;\n      width: 61px;\n      border-radius: 2px;\n    }\n  }\n"], ["\n  height: max-content;\n  width: 440px;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 8px;\n  margin-bottom: 10px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 12px;\n\n  & > div:nth-child(1) {\n    height: 48px;\n    width: 48px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(2) {\n    & > div:nth-child(1) {\n      height: 20px;\n      width: 220px;\n      margin-bottom: 6px;\n      border-radius: 2px;\n    }\n\n    & > div:nth-child(2) {\n      height: 20px;\n      width: 170px;\n      border-radius: 2px;\n    }\n  }\n\n  & > div:nth-child(3) {\n    height: 100%;\n    display: flex;\n    justify-content: space-around;\n    flex-direction: column;\n\n    & > div {\n      height: 20px;\n      width: 61px;\n      border-radius: 2px;\n    }\n  }\n"])));
+exports.CardItem = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: max-content;\n  width: max-content;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 22px 12px;\n\n  & > div:nth-child(1) {\n    height: 110px;\n    width: 110px;\n    margin-bottom: 6px;\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 110px;\n    margin-bottom: 6px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(3) {\n    height: 20px;\n    width: 72px;\n    border-radius: 2px;\n  }\n"], ["\n  height: max-content;\n  width: max-content;\n  border-radius: 2px;\n  background: #d9d9d94d;\n  padding: 22px 12px;\n\n  & > div:nth-child(1) {\n    height: 110px;\n    width: 110px;\n    margin-bottom: 6px;\n  }\n\n  & > div:nth-child(2) {\n    height: 20px;\n    width: 110px;\n    margin-bottom: 6px;\n    border-radius: 2px;\n  }\n\n  & > div:nth-child(3) {\n    height: 20px;\n    width: 72px;\n    border-radius: 2px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -0,0 +1,6 @@
+export interface DraggablePlayerTipProps {
+    color?: string;
+    duration?: number;
+}
+declare const useFirstPlayerInteraction: () => undefined | boolean;
+export default useFirstPlayerInteraction;

package/dist/hooks/useFirstPlayerInteraction/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var useFirstPlayerInteraction = function () {
+    var awaitingFirstInteraction = (0, store_1.useThreekitSelector)(treble_1.getPlayerInteraction);
+    return awaitingFirstInteraction;
+};
+exports.default = useFirstPlayerInteraction;

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

@@ -1,2 +1,2 @@
-declare const useLoadingProgress: () => number;
+declare const useLoadingProgress: () => number | undefined;
 export default useLoadingProgress;

package/dist/icons/Draggable.d.ts

@@ -0,0 +1,3 @@
+import { IIcon } from './index';
+export declare const Draggable: IIcon;
+export default Draggable;

package/dist/icons/Draggable.js

@@ -0,0 +1,23 @@
+"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.Draggable = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var SVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .tk-icon {\n    fill: ", ";\n  }\n"], ["\n  .tk-icon {\n    fill: ", ";\n  }\n"])), function (props) { return props.theme.textColor; });
+var Draggable = function () {
+    return (react_1.default.createElement(SVG, { width: "38", height: "40", viewBox: "0 0 38 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M27.9815 5.45671L30.0862 8.65278L33.828 7.40553L36.9461 8.65278L36.7122 29.9339L33.1264 35.5466L27.5138 38.5867L14.1838 38.9765L7.47985 36.7938L3.66015 34.3773L2.33495 31.8048L1.63337 29.5442L1.0877 16.2922L3.66015 12.0827L7.47985 9.82208L8.57119 1.87087L12.6247 0.701577L15.587 4.13151L18.1594 3.35198H20.8098L22.7586 6.70396L25.0972 5.45671H27.9815Z", fill: "#8C8C8C" }),
+        react_1.default.createElement("path", { d: "M33.96 24.7661C33.7703 28.3711 32.751 31.153 30.8585 33.1273C28.966 35.1017 25.8767 35.8779 21.8818 36.2584C21.5389 36.291 21.2874 36.5954 21.3201 36.9383C21.3527 37.2812 21.6571 37.5327 22 37.5C26.1901 37.1009 29.5979 36.2449 31.759 33.9904C33.9201 31.7357 35.0055 28.6321 35.2055 24.8316C35.2236 24.4877 34.9595 24.1942 34.6156 24.1761C34.2716 24.158 33.9781 24.4221 33.96 24.7661Z", fill: "rgba(0,0,0,0.65)", className: "tk-icon" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.22391 9.36853C5.44399 9.98874 4.1305 10.6237 3.10979 11.513C2.03569 12.4487 1.33529 13.622 0.715487 15.2188L0.69783 15.2643L0.687463 15.312L1.29685 15.4445C0.687463 15.312 0.68725 15.313 0.68725 15.313L0.687032 15.314L0.686578 15.3162L0.685604 15.3208C0.684925 15.3242 0.684185 15.3279 0.683386 15.332C0.681792 15.3403 0.679952 15.3503 0.67789 15.3624C0.673775 15.3864 0.668707 15.4188 0.662907 15.4616C0.651334 15.5469 0.636567 15.6753 0.620646 15.8632C0.588839 16.2385 0.551819 16.8582 0.527256 17.8554C0.478135 19.8497 0.478465 23.3704 0.673545 29.4959C0.781702 32.892 3.31916 35.5153 6.78326 37.2629C10.2666 39.0203 14.836 39.9799 19.3695 39.9997C23.8999 40.0195 28.4686 39.1009 31.9279 37.0266C35.4133 34.9366 37.7789 31.6612 37.7789 27.0595V10.8453C37.7593 9.50257 37.2334 8.45356 36.4198 7.74523C35.6029 7.0341 34.5338 6.69847 33.4881 6.70404C32.4425 6.7096 31.3762 7.05644 30.5622 7.76798C30.498 7.82408 30.4356 7.88228 30.375 7.94255C30.2006 6.9769 29.7369 6.20175 29.0922 5.6405C28.2753 4.92937 27.2062 4.59374 26.1605 4.59931C25.1149 4.60487 24.0486 4.95171 23.2346 5.66325C23.1816 5.70954 23.1299 5.75726 23.0794 5.80639C22.936 4.7462 22.4538 3.90185 21.7646 3.30191C20.9478 2.59078 19.8787 2.25515 18.833 2.26072C17.7873 2.26628 16.721 2.61312 15.907 3.32466C15.8506 3.37394 15.7956 3.42484 15.7421 3.47733C15.5875 2.44918 15.1113 1.62824 14.437 1.04126C13.6202 0.330136 12.5511 -0.00549506 11.5054 6.80095e-05C10.4597 0.00563089 9.39343 0.352475 8.57942 1.06401C7.81729 1.7302 7.30554 2.69185 7.23077 3.90742L7.22487 3.90742L7.22485 4.02731C7.22248 4.09063 7.22129 4.15461 7.22129 4.21926H7.22481L7.22391 9.36853ZM9.40027 2.00307C8.88313 2.45511 8.51195 3.1253 8.47209 4.05205L8.4686 24.0195C8.46854 24.364 8.18928 24.6431 7.84487 24.643C7.50045 24.643 7.22129 24.3637 7.22135 24.0193L7.22368 10.693C5.72634 11.2416 4.70404 11.7782 3.92908 12.4534C3.07383 13.1985 2.47294 14.1538 1.90141 15.6107C1.90061 15.6163 1.89975 15.6225 1.89883 15.6293C1.89061 15.6899 1.87797 15.7971 1.86344 15.9685C1.83434 16.3118 1.79828 16.9054 1.77413 17.8861C1.7258 19.848 1.72547 23.343 1.92016 29.4562C2.00689 32.1794 4.04917 34.4866 7.34505 36.1494C10.6217 37.8025 14.9925 38.7333 19.3749 38.7524C23.7604 38.7716 28.0831 37.8778 31.2865 35.957C34.4635 34.0519 36.5316 31.1496 36.5316 27.0595L36.5316 10.9232C36.5316 9.88678 36.1454 9.16004 35.6008 8.68594C35.0437 8.20097 34.2809 7.94708 33.4948 7.95127C32.7085 7.95545 31.9429 8.21761 31.383 8.70704C30.862 9.16245 30.4892 9.83928 30.454 10.7768L30.4515 16.6922C30.4514 17.0366 30.172 17.3157 29.8276 17.3155C29.4832 17.3154 29.2041 17.0361 29.2043 16.6916L29.2067 10.9232H29.204C29.204 10.8667 29.2049 10.8106 29.2068 10.755L29.2076 8.8185H29.204C29.204 7.78205 28.8178 7.05531 28.2732 6.58121C27.7162 6.09624 26.9534 5.84235 26.1672 5.84654C25.3809 5.85072 24.6153 6.11288 24.0554 6.60231C23.5343 7.05787 23.1613 7.73502 23.1264 8.67305L23.1237 15.4449C23.1236 15.7893 22.8443 16.0684 22.4999 16.0683C22.1554 16.0681 21.8763 15.7888 21.8765 15.4444L21.8791 8.8185H21.8764C21.8764 8.76232 21.8773 8.70664 21.8791 8.65146L21.88 6.47991H21.8764C21.8764 5.44346 21.4903 4.71672 20.9457 4.24262C20.3886 3.75765 19.6258 3.50376 18.8396 3.50795C18.0534 3.51213 17.2878 3.77429 16.7278 4.26372C16.2071 4.71888 15.8344 5.39523 15.7989 6.33197L15.7963 13.8858C15.7961 14.2302 15.5168 14.5093 15.1724 14.5092C14.828 14.5091 14.5489 14.2298 14.549 13.8854L14.5516 6.47991H14.5489C14.5489 6.42277 14.5498 6.36614 14.5517 6.31003L14.5524 4.21926H14.5489C14.5489 3.18282 14.1627 2.45608 13.6181 1.98197C13.061 1.497 12.2982 1.24312 11.512 1.2473C10.7258 1.25148 9.96018 1.51365 9.40027 2.00307Z", fill: "rgba(0,0,0,0.65)", className: "tk-icon" })));
+};
+exports.Draggable = Draggable;
+exports.Draggable.iconName = 'draggable';
+exports.default = exports.Draggable;
+var templateObject_1;

package/dist/icons/index.js

@@ -22,6 +22,7 @@ var DoubleCaretLeft_1 = __importDefault(require("./DoubleCaretLeft"));
 var DoubleCaretRight_1 = __importDefault(require("./DoubleCaretRight"));
 var Download_1 = __importDefault(require("./Download"));
 var Drag_1 = __importDefault(require("./Drag"));
+var Draggable_1 = __importDefault(require("./Draggable"));
 var Edit_1 = __importDefault(require("./Edit"));
 var Heart_1 = __importDefault(require("./Heart"));
 var Image_1 = __importDefault(require("./Image"));
@@ -64,6 +65,7 @@ exports.default = (_a = {},
     _a[DoubleCaretRight_1.default.iconName] = DoubleCaretRight_1.default,
     _a[Download_1.default.iconName] = Download_1.default,
     _a[Drag_1.default.iconName] = Drag_1.default,
+    _a[Draggable_1.default.iconName] = Draggable_1.default,
     _a[Edit_1.default.iconName] = Edit_1.default,
     _a[Heart_1.default.iconName] = Heart_1.default,
     _a[Image_1.default.iconName] = Image_1.default,

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import useAttribute from './hooks/useAttribute';
 import useConfigurator from './hooks/useConfigurator';
 import useConfigurationLoader from './hooks/useConfigurationLoader';
+import useFirstPlayerInteraction from './hooks/useFirstPlayerInteraction';
 import useMetadata from './hooks/useMetadata';
 import useName from './hooks/useName';
 import usePlayerLoadingStatus from './hooks/usePlayerLoadingStatus';
@@ -31,6 +32,7 @@ import ProductDescription from './components/ProductDescription';
 import AttributeTitle from './components/AttributeTitle';
 import AttributeValue from './components/AttributeValue';
 import TotalPrice from './components/TotalPrice';
+import Skeleton from './components/Skeleton';
 import message from './components/message';
 import Modal from './components/Modal';
 import Drawer from './components/Drawer';
@@ -46,6 +48,9 @@ import Wishlist from './components/Wishlist';
 import Share from './components/Share';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
+import PlayerLoadingCircular from './components/PlayerLoadingCircular';
+import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
+import DraggableHint from './components/DraggableHint';
 import AddIcon from './icons/Add';
 import ArrowLeftIcon from './icons/ArrowLeft';
 import ArrowRightIcon from './icons/ArrowRight';
@@ -63,6 +68,7 @@ import DeleteIcon from './icons/Delete';
 import DoubleCaretLeftIcon from './icons/DoubleCaretLeft';
 import DoubleCaretRightIcon from './icons/DoubleCaretRight';
 import DownloadIcon from './icons/Download';
+import DraggableIcon from './icons/Draggable';
 import DragIcon from './icons/Drag';
 import EditIcon from './icons/Edit';
 import HeartIcon from './icons/Heart';
@@ -87,4 +93,4 @@ import WishlistIcon from './icons/Wishlist';
 import ZoomInIcon from './icons/ZoomIn';
 import ZoomOutIcon from './icons/ZoomOut';
 import SpinnerIcon from './icons/Spinner';
-export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
+export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };

package/dist/index.js

@@ -3,14 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrowLeftIcon = exports.AddIcon = exports.ProductLayout = exports.TrebleApp = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
-exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = void 0;
+exports.ProductLayout = exports.TrebleApp = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.Skeleton = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useFirstPlayerInteraction = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
+exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.DraggableHint = exports.PlayerLoadingSpinner = exports.PlayerLoadingCircular = void 0;
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
 var useConfigurator_1 = __importDefault(require("./hooks/useConfigurator"));
 exports.useConfigurator = useConfigurator_1.default;
 var useConfigurationLoader_1 = __importDefault(require("./hooks/useConfigurationLoader"));
 exports.useConfigurationLoader = useConfigurationLoader_1.default;
+var useFirstPlayerInteraction_1 = __importDefault(require("./hooks/useFirstPlayerInteraction"));
+exports.useFirstPlayerInteraction = useFirstPlayerInteraction_1.default;
 var useMetadata_1 = __importDefault(require("./hooks/useMetadata"));
 exports.useMetadata = useMetadata_1.default;
 var useName_1 = __importDefault(require("./hooks/useName"));
@@ -71,6 +73,8 @@ var AttributeValue_1 = __importDefault(require("./components/AttributeValue"));
 exports.AttributeValue = AttributeValue_1.default;
 var TotalPrice_1 = __importDefault(require("./components/TotalPrice"));
 exports.TotalPrice = TotalPrice_1.default;
+var Skeleton_1 = __importDefault(require("./components/Skeleton"));
+exports.Skeleton = Skeleton_1.default;
 var message_1 = __importDefault(require("./components/message"));
 exports.message = message_1.default;
 var Modal_1 = __importDefault(require("./components/Modal"));
@@ -101,6 +105,12 @@ var TrebleApp_1 = __importDefault(require("./components/TrebleApp"));
 exports.TrebleApp = TrebleApp_1.default;
 var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
 exports.ProductLayout = ProductLayout_1.default;
+var PlayerLoadingCircular_1 = __importDefault(require("./components/PlayerLoadingCircular"));
+exports.PlayerLoadingCircular = PlayerLoadingCircular_1.default;
+var PlayerLoadingSpinner_1 = __importDefault(require("./components/PlayerLoadingSpinner"));
+exports.PlayerLoadingSpinner = PlayerLoadingSpinner_1.default;
+var DraggableHint_1 = __importDefault(require("./components/DraggableHint"));
+exports.DraggableHint = DraggableHint_1.default;
 var Add_1 = __importDefault(require("./icons/Add"));
 exports.AddIcon = Add_1.default;
 var ArrowLeft_1 = __importDefault(require("./icons/ArrowLeft"));
@@ -135,6 +145,8 @@ var DoubleCaretRight_1 = __importDefault(require("./icons/DoubleCaretRight"));
 exports.DoubleCaretRightIcon = DoubleCaretRight_1.default;
 var Download_1 = __importDefault(require("./icons/Download"));
 exports.DownloadIcon = Download_1.default;
+var Draggable_1 = __importDefault(require("./icons/Draggable"));
+exports.DraggableIcon = Draggable_1.default;
 var Drag_1 = __importDefault(require("./icons/Drag"));
 exports.DragIcon = Drag_1.default;
 var Edit_1 = __importDefault(require("./icons/Edit"));

package/dist/store/treble.d.ts

@@ -34,7 +34,8 @@ export interface TrebleState {
     isThreekitInitialized: boolean;
     playerElId: undefined | string;
     notifications: boolean;
-    loadingProgress: number;
+    loadingProgress: undefined | number;
+    awaitingFirstInteraction: undefined | boolean;
 }
 export interface NotificationEvent extends Event {
     detail: {
@@ -51,12 +52,14 @@ export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorW
 export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
 export declare const updateLoadingProgress: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
 export declare const getThreekitEnv: (state: RootState) => string;
 export declare const isThreekitInitialized: (state: RootState) => boolean;
 export declare const isPlayerLoading: (state: RootState) => boolean;
 export declare const getPlayerElementId: (state: RootState) => undefined | string;
-export declare const getLoadingProgress: (state: RootState) => number;
+export declare const getLoadingProgress: (state: RootState) => undefined | number;
+export declare const getPlayerInteraction: (state: RootState) => undefined | boolean;
 export declare const initPlayer: (config: IPlayerInit) => (dispatch: ThreekitDispatch, getState: () => RootState) => Promise<void>;
 export declare const launch: (launchConfig?: Partial<ILaunchConfig>) => (dispatch: ThreekitDispatch) => Promise<void>;
 export declare const unloadPlayer: () => (dispatch: ThreekitDispatch) => Promise<void>;

package/dist/store/treble.js

@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
 var connection_1 = __importDefault(require("../connection"));
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
@@ -87,7 +87,8 @@ var initialState = {
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
-    loadingProgress: 0,
+    loadingProgress: undefined,
+    awaitingFirstInteraction: undefined,
 };
 exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
 exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
@@ -95,6 +96,7 @@ exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loadin
 exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
 exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
 exports.updateLoadingProgress = (0, toolkit_1.createAction)('treble/update-loading-progress');
+exports.setPlayerInteraction = (0, toolkit_1.createAction)('treble/set-player-interaction');
 var reducer = (0, toolkit_1.createSlice)({
     name: 'treble',
     initialState: initialState,
@@ -123,6 +125,9 @@ var reducer = (0, toolkit_1.createSlice)({
             state.loadingProgress = Math.round(action.payload * 100);
             return state;
         });
+        builder.addCase(exports.setPlayerInteraction, function (state, action) {
+            return __assign(__assign({}, state), { awaitingFirstInteraction: action.payload });
+        });
     },
 }).reducer;
 var getThreekitEnv = function (state) {
@@ -145,13 +150,18 @@ var getLoadingProgress = function (state) {
     return state.treble.loadingProgress;
 };
 exports.getLoadingProgress = getLoadingProgress;
+var getPlayerInteraction = function (state) {
+    return state.treble.awaitingFirstInteraction;
+};
+exports.getPlayerInteraction = getPlayerInteraction;
 var initPlayer = function (config) {
     return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
-        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
+        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator, ruleName;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    dispatch((0, exports.updateLoadingProgress)(0));
                     return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
                                 dispatch((0, exports.updateLoadingProgress)(progress));
@@ -182,6 +192,23 @@ var initPlayer = function (config) {
                     dispatch((0, exports.setThreekitInitialized)(true));
                     dispatch((0, exports.setPlayerLoading)(false));
                     dispatch((0, exports.updateLoadingProgress)(1));
+                    dispatch((0, exports.setPlayerInteraction)(true));
+                    ruleName = 'use-first-player-interaction';
+                    window.threekit.player.tools.addTool({
+                        key: ruleName,
+                        label: 'use-first-player-interaction',
+                        active: true,
+                        enabled: true,
+                        handlers: {
+                            mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    dispatch((0, exports.setPlayerInteraction)(false));
+                                    window.threekit.player.tools.removeTool(ruleName);
+                                    return [2];
+                                });
+                            }); },
+                        },
+                    });
                     if (window.threekit.treble._debugMode)
                         (0, utils_1.runDebugger)();
                     window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.84",
+  "version": "0.0.85-next-3",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -43,6 +43,8 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
     "axios": "^0.22.0",
+    "chokidar": "^3.5.3",
+    "live-server": "^1.2.2",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",