@threekit-tools/treble 0.0.83 → 0.0.85-next-2

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/components/Strips/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOption } from '../containers/formInputContainer';
 export interface IStrips extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
@@ -46,7 +47,7 @@ export declare const Strips: {
         onClick: undefined;
     };
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: IStrips) => JSX.Element | null;
 export default _default;

package/dist/components/Strips/index.js

@@ -11,7 +11,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var strips_styles_1 = require("./strips.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var Thumbnail = function (props) {
     var imageUrl = props.imageUrl, color = props.color, name = props.name, className = props.className;
@@ -100,7 +100,7 @@ exports.Strips.defaultProps = {
 };
 exports.Strips.componentName = 'strips';
 exports.Strips.compatibleAttributes = new Set([
-    constants_1.ATTRIBUTE_TYPES.asset,
-    constants_1.ATTRIBUTE_TYPES.string,
+    types_1.ATTRIBUTE_TYPES.ASSET,
+    types_1.ATTRIBUTE_TYPES.STRING,
 ]);
 exports.default = (0, formInputContainer_1.default)(exports.Strips);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOption } from '../containers/formInputContainer';
 export interface ISwatch extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
@@ -51,7 +52,7 @@ export declare const Swatch: {
         onClick: undefined;
     };
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: ISwatch) => JSX.Element | null;
 export default _default;

package/dist/components/Swatch/index.js

@@ -11,7 +11,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var swatch_styles_1 = require("./swatch.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var SwatchInfo = function (props) {
     var title = props.title, price = props.price, description = props.description;
@@ -94,7 +94,7 @@ exports.Swatch.defaultProps = {
 };
 exports.Swatch.componentName = 'swatch';
 exports.Swatch.compatibleAttributes = new Set([
-    constants_1.ATTRIBUTE_TYPES.asset,
-    constants_1.ATTRIBUTE_TYPES.string,
+    types_1.ATTRIBUTE_TYPES.ASSET,
+    types_1.ATTRIBUTE_TYPES.STRING,
 ]);
 exports.default = (0, formInputContainer_1.default)(exports.Swatch);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOption } from '../containers/formInputContainer';
 export interface ISwitch extends IFormComponentProps<IOption> {
     showDescription?: boolean;
@@ -27,7 +28,7 @@ export declare const Switch: {
         onClick: undefined;
     };
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: ISwitch) => JSX.Element | null;
 export default _default;

package/dist/components/Switch/index.js

@@ -11,7 +11,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var switch_styles_1 = require("./switch.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var Switch = function (props) {
     var title = props.title, value = props.value, onChange = props.onChange, description = props.description, customClassName = props.className, showDescription = props.showDescription;
@@ -46,5 +46,5 @@ exports.Switch.defaultProps = {
     onClick: undefined,
 };
 exports.Switch.componentName = 'Switch';
-exports.Switch.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.boolean]);
+exports.Switch.compatibleAttributes = new Set([types_1.ATTRIBUTE_TYPES.BOOLEAN]);
 exports.default = (0, formInputContainer_1.default)(exports.Switch);

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps } from '../containers/formInputContainer';
 export interface ITextInput extends IFormComponentProps<undefined> {
     maxLength?: number;
@@ -6,7 +7,7 @@ export interface ITextInput extends IFormComponentProps<undefined> {
 export declare const TextInput: {
     (props: ITextInput): JSX.Element;
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: ITextInput) => JSX.Element | null;
 export default _default;

package/dist/components/TextInput/index.js

@@ -10,7 +10,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var textInput_styles_1 = require("./textInput.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var TextInput = function (props) {
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, maxLength = props.maxLength, customClassName = props.className;
@@ -24,5 +24,5 @@ var TextInput = function (props) {
 };
 exports.TextInput = TextInput;
 exports.TextInput.componentName = 'text-input';
-exports.TextInput.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.string]);
+exports.TextInput.compatibleAttributes = new Set([types_1.ATTRIBUTE_TYPES.STRING]);
 exports.default = (0, formInputContainer_1.default)(exports.TextInput);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface ITiles extends IFormComponentProps<IOptionShared> {
     columns?: number;
@@ -32,7 +33,7 @@ export declare const Tiles: {
         onClick: undefined;
     };
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: ITiles) => JSX.Element | null;
 export default _default;

package/dist/components/Tiles/index.js

@@ -11,7 +11,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var tiles_styles_1 = require("./tiles.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var Tiles = function (props) {
     var _a = Object.assign({ columns: 2 }, props), title = _a.title, description = _a.description, options = _a.options, customClassName = _a.className, columns = _a.columns;
@@ -54,7 +54,7 @@ exports.Tiles.defaultProps = {
 };
 exports.Tiles.componentName = 'tiles';
 exports.Tiles.compatibleAttributes = new Set([
-    constants_1.ATTRIBUTE_TYPES.asset,
-    constants_1.ATTRIBUTE_TYPES.string,
+    types_1.ATTRIBUTE_TYPES.ASSET,
+    types_1.ATTRIBUTE_TYPES.STRING,
 ]);
 exports.default = (0, formInputContainer_1.default)(exports.Tiles);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface ITilesGroup extends IFormComponentProps<IOptionShared> {
     columns?: number;
@@ -30,7 +31,7 @@ export declare const TilesGroup: {
         onClick: undefined;
     };
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: ITilesGroup) => JSX.Element | null;
 export default _default;

package/dist/components/TilesGroup/index.js

@@ -11,7 +11,7 @@ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescri
 var tilesGroup_styles_1 = require("./tilesGroup.styles");
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
-var constants_1 = require("../../constants");
+var types_1 = require("../../types");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
 var TilesGroup = function (props) {
     var _a = Object.assign({ stretch: true }, props), stretch = _a.stretch, title = _a.title, description = _a.description, options = _a.options, customClassName = _a.className;
@@ -52,7 +52,7 @@ exports.TilesGroup.defaultProps = {
 };
 exports.TilesGroup.componentName = 'tiles-group';
 exports.TilesGroup.compatibleAttributes = new Set([
-    constants_1.ATTRIBUTE_TYPES.asset,
-    constants_1.ATTRIBUTE_TYPES.string,
+    types_1.ATTRIBUTE_TYPES.ASSET,
+    types_1.ATTRIBUTE_TYPES.STRING,
 ]);
 exports.default = (0, formInputContainer_1.default)(exports.TilesGroup);

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
     onChange: (file: File | undefined) => Promise<void>;
@@ -6,7 +7,7 @@ export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title
 export declare const Upload: {
     (props: IUpload): JSX.Element;
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: IUpload) => JSX.Element | null;
 export default _default;

package/dist/components/Upload/index.js

@@ -64,10 +64,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Upload = void 0;
 var react_1 = __importStar(require("react"));
-var constants_1 = require("../../constants");
 var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var shared_styles_1 = require("../shared.styles");
+var types_1 = require("../../types");
 var utils_1 = require("../../utils");
 var Spinner_1 = __importDefault(require("../../icons/Spinner"));
 var Add_1 = __importDefault(require("../../icons/Add"));
@@ -142,5 +142,5 @@ var Upload = function (props) {
 };
 exports.Upload = Upload;
 exports.Upload.componentName = 'upload';
-exports.Upload.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
+exports.Upload.compatibleAttributes = new Set([types_1.ATTRIBUTE_TYPES.ASSET]);
 exports.default = (0, formInputContainer_1.default)(exports.Upload);

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ATTRIBUTE_TYPES } from '../../types';
 import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
 export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
     onChange: (file: File) => Promise<void>;
@@ -6,7 +7,7 @@ export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title
 export declare const UploadArea: {
     (props: IUpload): JSX.Element;
     componentName: string;
-    compatibleAttributes: Set<string>;
+    compatibleAttributes: Set<ATTRIBUTE_TYPES>;
 };
 declare const _default: (props: IUpload) => JSX.Element | null;
 export default _default;

package/dist/components/UploadArea/index.js

@@ -64,10 +64,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadArea = void 0;
 var react_1 = __importStar(require("react"));
-var constants_1 = require("../../constants");
 var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var shared_styles_1 = require("../shared.styles");
+var types_1 = require("../../types");
 var utils_1 = require("../../utils");
 var Spinner_1 = __importDefault(require("../../icons/Spinner"));
 var Image_1 = __importDefault(require("../../icons/Image"));
@@ -137,5 +137,5 @@ var UploadArea = function (props) {
 };
 exports.UploadArea = UploadArea;
 exports.UploadArea.componentName = 'upload-area';
-exports.UploadArea.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
+exports.UploadArea.compatibleAttributes = new Set([types_1.ATTRIBUTE_TYPES.ASSET]);
 exports.default = (0, formInputContainer_1.default)(exports.UploadArea);

package/dist/components/formComponents.d.ts

@@ -8,5 +8,17 @@ export declare const formComponents: {
     } | {
         [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };
+    Asset: {
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
+    };
+    String: {
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null);
+    };
+    upload: {
+        [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
+    };
+    Boolean: {
+        [x: string]: (props: import("./Switch").ISwitch) => JSX.Element | null;
+    };
 };
 export default formComponents;

package/dist/components/formComponents.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 var _a, _b, _c, _d, _e, _f;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
-var constants_1 = require("../constants");
+var types_1 = require("../types");
 var Cards_1 = __importStar(require("./Cards"));
 var Dropdown_1 = __importStar(require("./Dropdown"));
 var Strips_1 = __importStar(require("./Strips"));
@@ -39,7 +39,7 @@ exports.FORM_COMPONENT_TYPES = {
     stringInput: 'string-input',
 };
 exports.formComponents = (_a = {},
-    _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
+    _a[types_1.ATTRIBUTE_TYPES.ASSET] = (_b = {},
         _b[Strips_1.Strips.componentName] = Strips_1.default,
         _b[Cards_1.Cards.componentName] = Cards_1.default,
         _b[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
@@ -47,7 +47,7 @@ exports.formComponents = (_a = {},
         _b[Tiles_1.Tiles.componentName] = Tiles_1.default,
         _b[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
         _b),
-    _a[constants_1.ATTRIBUTE_TYPES.string] = (_c = {},
+    _a[types_1.ATTRIBUTE_TYPES.STRING] = (_c = {},
         _c[Tiles_1.Tiles.componentName] = Tiles_1.default,
         _c[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
         _c[Cards_1.Cards.componentName] = Cards_1.default,
@@ -59,10 +59,10 @@ exports.formComponents = (_a = {},
     _a[exports.FORM_COMPONENT_TYPES.stringInput] = (_d = {},
         _d[TextInput_1.TextInput.componentName] = TextInput_1.default,
         _d),
-    _a[constants_1.ASSET_TYPES.upload] = (_e = {},
+    _a[types_1.ASSET_TYPES.UPLOAD] = (_e = {},
         _e[Upload_1.Upload.componentName] = Upload_1.default,
         _e),
-    _a[constants_1.ATTRIBUTE_TYPES.boolean] = (_f = {},
+    _a[types_1.ATTRIBUTE_TYPES.BOOLEAN] = (_f = {},
         _f[Switch_1.Switch.componentName] = Switch_1.default,
         _f),
     _a);

package/dist/constants.d.ts

@@ -20,17 +20,6 @@ export declare const DEFAULT_PLAYER_CONFIG: {
     showShare: boolean;
     allowMobileVerticalOrbit: boolean;
 };
-export declare const ATTRIBUTE_TYPES: {
-    asset: string;
-    string: string;
-    number: string;
-    color: string;
-    boolean: string;
-};
-export declare const ASSET_TYPES: {
-    item: string;
-    upload: string;
-};
 export declare const SORT_OPTIONS: {
     ascending: string;
     descending: string;
@@ -49,17 +38,6 @@ export declare const METADATA_RESERVED: {
     rotate: string;
     scale: string;
 };
-export declare const SNAPSHOT_FORMATS: {
-    png: string;
-    jpeg: string;
-};
-export declare const SNAPSHOT_OUTPUTS: {
-    url: string;
-    download: string;
-    dataUrl: string;
-    blob: string;
-    file: string;
-};
 export declare const WISHLIST_LOCALSTORAGE_KEY = "tk_wishlist";
 export declare const DATATABLE_FORMATS: {
     csv: string;

package/dist/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATATABLE_FORMATS = exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_PLAYER_LOADER_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = exports.TREBLE_DEBUG = void 0;
+exports.DATATABLE_FORMATS = exports.WISHLIST_LOCALSTORAGE_KEY = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_PLAYER_LOADER_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.IS_TREBLE_SCRIPTS = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = exports.TREBLE_DEBUG = void 0;
 exports.TREBLE_DEBUG = !!process.env.TREBLE_DEBUG;
 exports.DEFAULT_CLASS_NAME = 'threekit-react';
 exports.CLASS_NAME_PREFIX = 'tk';
@@ -24,17 +24,6 @@ exports.DEFAULT_PLAYER_CONFIG = {
     showShare: false,
     allowMobileVerticalOrbit: false,
 };
-exports.ATTRIBUTE_TYPES = {
-    asset: 'Asset',
-    string: 'String',
-    number: 'Number',
-    color: 'Color',
-    boolean: 'Boolean',
-};
-exports.ASSET_TYPES = {
-    item: 'item',
-    upload: 'upload',
-};
 exports.SORT_OPTIONS = {
     ascending: 'ascending',
     descending: 'descending',
@@ -53,17 +42,6 @@ exports.METADATA_RESERVED = {
     rotate: '_rotate',
     scale: '_scale',
 };
-exports.SNAPSHOT_FORMATS = {
-    png: 'png',
-    jpeg: 'jpeg',
-};
-exports.SNAPSHOT_OUTPUTS = {
-    url: 'url',
-    download: 'download',
-    dataUrl: 'dataUrl',
-    blob: 'blob',
-    file: 'file',
-};
 exports.WISHLIST_LOCALSTORAGE_KEY = 'tk_wishlist';
 exports.DATATABLE_FORMATS = {
     csv: 'csv',

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/hooks/useSingleAnimation/index.js

@@ -53,6 +53,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
 var utils_1 = require("../../utils");
+var types_1 = require("../../types");
 var prepAnimateConfig = function (config) {
     return new Promise(function (resolve) { return __awaiter(void 0, void 0, void 0, function () {
         var totalDuration, player, assetId, nodesRaw, nodes;
@@ -60,10 +61,10 @@ var prepAnimateConfig = function (config) {
             switch (_a.label) {
                 case 0:
                     totalDuration = config.duration * 1000 || 0;
-                    player = window.threekit.player.enableApi('player');
+                    player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
                     return [4, player.getAssetInstance(window.threekit.player.scene.find({
                             id: window.threekit.player.instanceId,
-                            plug: 'Proxy',
+                            plug: types_1.PLUG_TYPES.PROXY,
                             property: 'asset',
                         }))];
                 case 1:
@@ -81,8 +82,8 @@ var prepAnimateConfig = function (config) {
                                     window.threekit.player.scene.get({
                                         from: assetId,
                                         id: nodeId,
-                                        plug: 'Transform',
-                                        property: 'translation',
+                                        plug: types_1.PLUG_TYPES.TRANSFORM,
+                                        property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
                                     }),
                                     Object.assign({ x: 0, y: 0, z: 0 }, nodeData.translation),
                                 ],
@@ -93,8 +94,8 @@ var prepAnimateConfig = function (config) {
                                     window.threekit.player.scene.get({
                                         from: assetId,
                                         id: nodeId,
-                                        plug: 'Transform',
-                                        property: 'rotation',
+                                        plug: types_1.PLUG_TYPES.TRANSFORM,
+                                        property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
                                     }),
                                     Object.assign({ x: 0, y: 0, z: 0 }, nodeData.rotation),
                                 ],
@@ -105,8 +106,8 @@ var prepAnimateConfig = function (config) {
                                     window.threekit.player.scene.get({
                                         from: assetId,
                                         id: nodeId,
-                                        plug: 'Transform',
-                                        property: 'scale',
+                                        plug: types_1.PLUG_TYPES.TRANSFORM,
+                                        property: types_1.TRANSFORM_PROPERTY_TYPES.SCALE,
                                     }),
                                     Object.assign({ x: 0, y: 0, z: 0 }, nodeData.scale),
                                 ],
@@ -184,8 +185,8 @@ var useAnimation = function (animationConfig) {
                 window.threekit.player.scene.set({
                     from: ref.current.assetId,
                     id: nodeConfig.nodeId,
-                    plug: 'Transform',
-                    property: 'translation',
+                    plug: types_1.PLUG_TYPES.TRANSFORM,
+                    property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
                 }, translation);
             }
             if ('rotation' in nodeConfig) {
@@ -202,8 +203,8 @@ var useAnimation = function (animationConfig) {
                 window.threekit.player.scene.set({
                     from: ref.current.assetId,
                     id: nodeConfig.nodeId,
-                    plug: 'Transform',
-                    property: 'rotation',
+                    plug: types_1.PLUG_TYPES.TRANSFORM,
+                    property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
                 }, rotation);
             }
             if ('scale' in nodeConfig) {
@@ -220,8 +221,8 @@ var useAnimation = function (animationConfig) {
                 window.threekit.player.scene.set({
                     from: ref.current.assetId,
                     id: nodeConfig.nodeId,
-                    plug: 'Transform',
-                    property: 'scale',
+                    plug: types_1.PLUG_TYPES.TRANSFORM,
+                    property: types_1.TRANSFORM_PROPERTY_TYPES.SCALE,
                 }, scale);
             }
         });