@threekit-tools/treble 0.0.10-alpha.16 → 0.0.14

package/dist/components/Accordion/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var react_1 = __importStar(require("react"));
+var accordion_styles_1 = require("./accordion.styles");
+var CaretDown_1 = __importDefault(require("../../icons/CaretDown"));
+var AccordionItem = function (props) {
+    var selected = props.selected, handleClick = props.handleClick, label = props.label, children = props.children;
+    return (react_1.default.createElement(accordion_styles_1.Wrapper, { selected: selected },
+        react_1.default.createElement("div", { onClick: handleClick },
+            react_1.default.createElement("div", null, label),
+            react_1.default.createElement("div", null),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(CaretDown_1.default
+                // style={{
+                //   transition: `all 0.3s`,
+                //   transform: selected ? 'rotate(180deg)' : 'rotate(0)',
+                // }}
+                , null))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", null, children))));
+};
+var Accordion = function (props) {
+    var _a = (0, react_1.useState)(undefined), selected = _a[0], setSelected = _a[1];
+    var handleSelect = function (idx) {
+        return setSelected(idx === selected ? undefined : idx);
+    };
+    if (!props.children)
+        return null;
+    return react_1.default.Children.map(props.children, function (child, idx) {
+        if (child.type !== AccordionItem)
+            return null;
+        return react_1.default.cloneElement(child, {
+            selected: selected === idx,
+            handleClick: function () { return handleSelect(idx); },
+        });
+    });
+};
+exports.Accordion = Accordion;
+exports.Accordion.AccordionItem = AccordionItem;
+exports.default = exports.Accordion;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOption } from '../containers/formInputContainer';
-export interface ICards extends IFormComponenetProps<IOption> {
+import { IFormComponentProps, IOption } from '../containers/formInputContainer';
+export interface ICards extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
     showPrice?: boolean;
     showDescription?: boolean;

package/dist/components/Drawer/index.js

@@ -45,7 +45,6 @@ var Drawer = function (props) {
     var title = props.title, children = props.children, handleClose = props.handleClose, showHeader = props.showHeader, className = props.className;
     var _a = (0, react_1.useState)(false), show = _a[0], setShow = _a[1];
     (0, react_1.useEffect)(function () {
-        ;
         (function () {
             setShow(true);
         })();

package/dist/components/Dropdown/dropdown.styles.js

@@ -30,9 +30,7 @@ exports.OptionTitle = styled_components_1.default.div(templateObject_6 || (templ
 exports.OptionDescription = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 13px;\n  padding-bottom: 5px;\n  margin-right: 10px;\n  font-family: ", ";\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 13px;\n  padding-bottom: 5px;\n  margin-right: 10px;\n  font-family: ", ";\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; });
 exports.OptionPrice = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  text-align: right;\n  font-family: ", ";\n\n  height: max-content;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  text-align: right;\n  font-family: ", ";\n\n  height: max-content;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n"])), function (props) { return props.theme.textColorSecondary; }, function (props) { return props.theme.fontFamily; });
 exports.IconWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-left: 8px;\n  height: 20px;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  margin-left: 8px;\n  height: 20px;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n"])));
-exports.OptionWrapper = (0, styled_components_1.default)(exports.OptionWrapperStyles)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n\n  ", " {\n    color: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n  ", " {\n    color: ", ";\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  background: ", ";\n\n  ", " {\n    color: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n  ", " {\n    color: ", ";\n  }\n\n  &:hover {\n    ", "\n  }\n"])), function (props) {
-    return props.selected ? props.theme.primaryColor : '#fff';
-}, exports.OptionDescription, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, exports.OptionTitle, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, exports.OptionPrice, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, function (props) {
+exports.OptionWrapper = (0, styled_components_1.default)(exports.OptionWrapperStyles)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: ", ";\n\n  ", " {\n    color: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n  ", " {\n    color: ", ";\n  }\n\n  &:hover {\n    ", "\n  }\n"], ["\n  background: ", ";\n\n  ", " {\n    color: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n  ", " {\n    color: ", ";\n  }\n\n  &:hover {\n    ", "\n  }\n"])), function (props) { return (props.selected ? props.theme.primaryColor : '#fff'); }, exports.OptionDescription, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, exports.OptionTitle, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, exports.OptionPrice, function (props) { return (props.selected ? '#fff' : props.theme.textColor); }, function (props) {
     return props.selected ? '' : "background: ".concat(props.theme.primaryColor, "18;");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOption } from '../containers/formInputContainer';
-export interface IDropdown extends IFormComponenetProps<IOption> {
+import { IFormComponentProps, IOption } from '../containers/formInputContainer';
+export interface IDropdown extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
     showPrice?: boolean;
     showDescription?: boolean;

package/dist/components/FormComponentDescription/index.js

@@ -10,7 +10,7 @@ var FormComponentDescription = function (props) {
     var description = props.description, className = props.className;
     if (!description)
         return null;
-    return react_1.default.createElement(formComponentDescription_styles_1.Wrapper, { className: "".concat(className, "-description") }, description);
+    return (react_1.default.createElement(formComponentDescription_styles_1.Wrapper, { className: "".concat(className, "-description") }, description));
 };
 exports.FormComponentDescription = FormComponentDescription;
 exports.default = exports.FormComponentDescription;

package/dist/components/Modal/index.js

@@ -65,5 +65,7 @@ exports.ModalComponent.defaultProps = {
 };
 exports.Modal.componentName = 'modal';
 exports.default = (function (props) {
-    return props.show ? react_dom_1.default.createPortal(react_1.default.createElement(exports.Modal, __assign({}, props)), document.body) : null;
+    return props.show
+        ? react_dom_1.default.createPortal(react_1.default.createElement(exports.Modal, __assign({}, props)), document.body)
+        : null;
 });

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
+interface ShareProps {
+    shape?: BUTTON_SHAPES;
+    type?: BUTTON_TYPES;
+    className?: string;
+    message?: string;
+}
+export declare const Share: {
+    (props: ShareProps): JSX.Element | null;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        /**
+         * The presentational type of the input component. Options
+         * include: `hollow`, `standard`, `accent`, `primary`
+         */
+        type: PropTypes.Requireable<string>;
+        /**
+         * Used to set the shape of the Widget button. Options
+         * include: `square`, `round`
+         */
+        shape: PropTypes.Requireable<string>;
+        /**
+         * Used to set an overwrite of the message presented to the user
+         * when the share URL has been successfully copied.
+         */
+        message: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        className: string;
+        shape: string;
+        type: string;
+        message: string;
+    };
+};
+export default Share;

package/dist/components/Share/index.js

@@ -0,0 +1,51 @@
+"use strict";
+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 prop_types_1 = __importDefault(require("prop-types"));
+var Button_1 = __importDefault(require("../Button"));
+var icons_1 = require("../../icons");
+var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
+var useShare_1 = __importDefault(require("../../hooks/useShare"));
+var utils_1 = require("../../utils");
+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 hasLoaded = (0, useThreekitInitStatus_1.default)();
+    var handleShare = (0, useShare_1.default)();
+    if (!hasLoaded || !handleShare)
+        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: icons_1.ShareIcon.iconName, onClick: handleClick }));
+};
+exports.Share = Share;
+exports.Share.propTypes = {
+    className: prop_types_1.default.string,
+    /**
+     * The presentational type of the input component. Options
+     * include: `hollow`, `standard`, `accent`, `primary`
+     */
+    type: prop_types_1.default.string,
+    /**
+     * Used to set the shape of the Widget button. Options
+     * include: `square`, `round`
+     */
+    shape: prop_types_1.default.string,
+    /**
+     * Used to set an overwrite of the message presented to the user
+     * when the share URL has been successfully copied.
+     */
+    message: prop_types_1.default.string,
+};
+exports.Share.defaultProps = {
+    className: '',
+    shape: 'round',
+    type: 'threekit',
+    message: 'Link copied!',
+};
+exports.default = exports.Share;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOption } from '../containers/formInputContainer';
-export interface IStrips extends IFormComponenetProps<IOption> {
+import { IFormComponentProps, IOption } from '../containers/formInputContainer';
+export interface IStrips extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
     showPrice?: boolean;
     showDescription?: boolean;

package/dist/components/Strips/index.js

@@ -23,7 +23,7 @@ var Title = function (props) {
     var name = props.name, className = props.className;
     if (!name)
         return null;
-    return react_1.default.createElement(strips_styles_1.StripTitle, { className: "".concat(className, " option-title") }, name);
+    return (react_1.default.createElement(strips_styles_1.StripTitle, { className: "".concat(className, " option-title") }, name));
 };
 var Description = function (props) {
     var description = props.description, className = props.className;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOption } from '../containers/formInputContainer';
-export interface ISwatch extends IFormComponenetProps<IOption> {
+import { IFormComponentProps, IOption } from '../containers/formInputContainer';
+export interface ISwatch extends IFormComponentProps<IOption> {
     showThumbnail?: boolean;
     showPrice?: boolean;
     showDescription?: boolean;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TabPaneProps extends React.FC {
+    selected: boolean;
+    label: string;
+    handleClick: () => void;
+}
+interface TabsProps<T> {
+    children: React.FunctionComponentElement<T>;
+}
+export declare const Tabs: {
+    ({ children }: TabsProps<TabPaneProps>): JSX.Element | null;
+    TabPane: React.FC<{}>;
+};
+export default Tabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+var react_1 = __importStar(require("react"));
+var tabs_styles_1 = require("./tabs.styles");
+var TabPane = function (props) { return react_1.default.createElement(react_1.default.Fragment, null, props.children); };
+var Tabs = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(0), selected = _b[0], setSelected = _b[1];
+    var handleSelect = function (idx) {
+        return setSelected(idx === selected ? undefined : idx);
+    };
+    if (!children)
+        return null;
+    return (react_1.default.createElement(tabs_styles_1.Wrapper, null,
+        react_1.default.createElement(tabs_styles_1.TabsWrapper, null, react_1.default.Children.map(children, function (child, idx) {
+            if (child.type !== TabPane)
+                return null;
+            return (react_1.default.createElement(tabs_styles_1.Tab, { selected: selected === idx, onClick: function () { return handleSelect(idx); } }, child.props.label));
+        })),
+        react_1.default.createElement(tabs_styles_1.TabContent, null, react_1.default.Children.map(children, function (child, idx) {
+            if (child.type !== TabPane)
+                return null;
+            if (selected !== idx)
+                return null;
+            return react_1.default.cloneElement(child, {
+                selected: selected === idx,
+                handleClick: function () { return handleSelect(idx); },
+            });
+        }))));
+};
+exports.Tabs = Tabs;
+exports.Tabs.TabPane = TabPane;
+exports.default = exports.Tabs;

package/dist/components/Tabs/tabs.styles.d.ts

@@ -0,0 +1,8 @@
+interface TabWrapper {
+    selected?: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabWrapper, never>;
+export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/Tabs/tabs.styles.js

@@ -0,0 +1,20 @@
+"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.TabContent = exports.Tab = exports.TabsWrapper = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.TabsWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  width: 100%;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  width: 100%;\n  border-bottom: 1px solid ", ";\n"])), function (props) { return props.theme.borderColorBase; });
+exports.Tab = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: translateY(1px);\n\n  cursor: pointer;\n  width: max-content;\n  padding: 10px 2px;\n  margin: 0px 15px;\n\n  border-bottom: ", ";\n\n  text-align: center;\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 600;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  transform: translateY(1px);\n\n  cursor: pointer;\n  width: max-content;\n  padding: 10px 2px;\n  margin: 0px 15px;\n\n  border-bottom: ", ";\n\n  text-align: center;\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: 600;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (props) {
+    return props.selected ? "2px solid ".concat(props.theme.primaryColor) : 'none';
+}, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.fontFamily; }, function (props) {
+    return props.selected ? props.theme.primaryColor : props.theme.headingColor;
+}, function (props) { return props.theme.primaryColor; });
+exports.TabContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  font-family: ", ";\n"], ["\n  padding: 10px;\n  font-family: ", ";\n"])), function (props) { return props.theme.fontFamily; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,7 +1,16 @@
 import React from 'react';
-import { ILaunchConfig } from '../../store/threekit';
+import { ILaunchConfig, IThreekitCredentials } from '../../store/threekit';
+interface ICredentials {
+    preview: IThreekitCredentials;
+    'admin-fts': IThreekitCredentials;
+}
+interface Theme {
+    [key: string]: string | number;
+}
 export interface ThreekitProviderProps {
-    config: ILaunchConfig;
+    credentials: ICredentials;
+    playerConfig?: ILaunchConfig;
+    theme?: Theme;
     threekitEnv?: string;
     children: React.ReactNode;
 }

package/dist/components/ThreekitProvider/index.js

@@ -34,18 +34,18 @@ var App = function (props) {
     (0, react_1.useEffect)(function () {
         var init = function () {
             var threekitEnv = props.threekitEnv || process.env.THREEKIT_ENV;
-            var threekitConfig = Object.assign({ threekitEnv: threekitEnv }, props.config);
+            var threekitConfig = Object.assign({ threekitEnv: threekitEnv }, props.credentials, props.playerConfig);
             dispatch((0, threekit_1.launch)(threekitConfig));
         };
         init();
         return;
-    }, [props.config, props.threekitEnv]);
+    }, [props.credentials, props.threekitEnv, , props.playerConfig]);
     return react_1.default.createElement(react_1.default.Fragment, null, props.children);
 };
 var ThreekitProvider = function (props) {
     return (react_1.default.createElement(react_redux_1.Provider, { store: store_1.default },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             react_1.default.createElement(GlobalStyles_styles_1.default, null),
-            react_1.default.createElement(App, { config: props.config, threekitEnv: props.threekitEnv }, props.children))));
+            react_1.default.createElement(App, { theme: props.theme, credentials: props.credentials, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv }, props.children))));
 };
 exports.default = ThreekitProvider;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOptionShared } from '../containers/formInputContainer';
-export interface ITiles extends IFormComponenetProps<IOptionShared> {
+import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
+export interface ITiles extends IFormComponentProps<IOptionShared> {
     columns?: number;
 }
 export declare const Tiles: {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { IFormComponenetProps, IOptionShared } from '../containers/formInputContainer';
-export interface ITilesGroup extends IFormComponenetProps<IOptionShared> {
+import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
+export interface ITilesGroup extends IFormComponentProps<IOptionShared> {
     columns?: number;
 }
 export declare const TilesGroup: {

package/dist/components/containers/formInputContainer.d.ts

@@ -23,7 +23,7 @@ export interface IFormContainerProps {
     onClick?: (value: string) => void;
     className?: string;
 }
-export interface IFormComponenetProps<T extends IOptionShared> {
+export interface IFormComponentProps<T extends IOptionShared> {
     title?: string;
     description?: string;
     value?: string;

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

@@ -0,0 +1,3 @@
+declare type UseShareHook = undefined | ((msg: string | undefined) => Promise<void>);
+declare const useShare: () => UseShareHook;
+export default useShare;

package/dist/hooks/useShare/index.js

@@ -0,0 +1,71 @@
+"use strict";
+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 });
+var store_1 = require("../../store");
+var threekit_1 = require("../../store/threekit");
+var message_1 = __importDefault(require("../../components/message"));
+var utils_1 = require("../../utils");
+var useShare = function () {
+    var isLoaded = (0, store_1.useThreekitSelector)(threekit_1.isThreekitLoaded);
+    if (!isLoaded)
+        return undefined;
+    var handleShare = function (msg) {
+        if (msg === void 0) { msg = 'Link copied'; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var configuration;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, window.threekit.treble.saveConfiguration()];
+                    case 1:
+                        configuration = _a.sent();
+                        if (!configuration)
+                            return [2 /*return*/];
+                        (0, utils_1.copyToClipboard)(configuration.resumableUrl);
+                        if (msg === null || msg === void 0 ? void 0 : msg.length)
+                            message_1.default.info(msg);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return handleShare;
+};
+exports.default = useShare;

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

@@ -1,7 +1,6 @@
-import { IConfigurationResponse } from '../../http/configurations';
-import { ISaveConfigurationConfig } from '../../Treble';
+import { ISaveConfigurationConfig, WishlistArray } from '../../Treble';
 declare type UseWishlistHook = [
-    Array<IConfigurationResponse>,
+    WishlistArray,
     (config?: ISaveConfigurationConfig) => Promise<void>,
     (idx: number) => void,
     (idx: number) => void,

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import useThreekitInitStatus from './hooks/useThreekitInitStatus';
 import useZoom from './hooks/useZoom';
 import useSnapshot from './hooks/useSnapshot';
 import useWishlist from './hooks/useWishlist';
+import useShare from './hooks/useShare';
 import ThreekitProvider from './components/ThreekitProvider';
 import Player from './components/Player';
 import Button from './components/Button';
@@ -25,10 +26,13 @@ import TotalPrice from './components/TotalPrice';
 import message from './components/message';
 import Modal from './components/TotalPrice';
 import Drawer from './components/Drawer';
+import Accordion from './components/Accordion';
+import Tabs from './components/Tabs';
 import PortalToElement from './components/PortalToElement';
 import AwaitThreekitLoad from './components/AwaitThreekitLoad';
 import FlatForm from './components/FlatForm';
 import Zoom from './components/Zoom';
 import Snapshots from './components/Snapshots';
 import Wishlist from './components/Wishlist';
-export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, };
+import Share from './components/Share';
+export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
+exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -25,6 +25,8 @@ var useSnapshot_1 = __importDefault(require("./hooks/useSnapshot"));
 exports.useSnapshot = useSnapshot_1.default;
 var useWishlist_1 = __importDefault(require("./hooks/useWishlist"));
 exports.useWishlist = useWishlist_1.default;
+var useShare_1 = __importDefault(require("./hooks/useShare"));
+exports.useShare = useShare_1.default;
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;
@@ -64,6 +66,10 @@ var TotalPrice_2 = __importDefault(require("./components/TotalPrice"));
 exports.Modal = TotalPrice_2.default;
 var Drawer_1 = __importDefault(require("./components/Drawer"));
 exports.Drawer = Drawer_1.default;
+var Accordion_1 = __importDefault(require("./components/Accordion"));
+exports.Accordion = Accordion_1.default;
+var Tabs_1 = __importDefault(require("./components/Tabs"));
+exports.Tabs = Tabs_1.default;
 //  Wrappers
 var PortalToElement_1 = __importDefault(require("./components/PortalToElement"));
 exports.PortalToElement = PortalToElement_1.default;
@@ -79,3 +85,5 @@ var Snapshots_1 = __importDefault(require("./components/Snapshots"));
 exports.Snapshots = Snapshots_1.default;
 var Wishlist_1 = __importDefault(require("./components/Wishlist"));
 exports.Wishlist = Wishlist_1.default;
+var Share_1 = __importDefault(require("./components/Share"));
+exports.Share = Share_1.default;

package/dist/store/threekit.d.ts

@@ -1,8 +1,7 @@
 import { RootState, ThreekitDispatch } from './index';
-import { IConfiguration, ISetConfiguration, IThreekitDisplayAttribute, IMetadata } from '../threekit';
+import { IConfiguration, ISetConfiguration, IThreekitDisplayAttribute, IMetadata, DISPLAY_OPTIONS } from '../threekit';
 import { ITranslationMap } from '../api/products';
-import { ISaveConfigurationConfig } from '../Treble';
-import { IConfigurationResponse } from '../http/configurations';
+import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
@@ -32,6 +31,7 @@ export interface ILaunchConfig {
     locale?: string;
     allowMobileVerticalOrbit?: boolean;
     publishStage?: string;
+    display?: DISPLAY_OPTIONS;
     language?: string | undefined;
 }
 interface IPriceConfig {
@@ -55,7 +55,7 @@ export interface ThreekitState {
     isPlayerLoading: boolean;
     isThreekitLoaded: boolean;
     attributes: undefined | Array<IThreekitDisplayAttribute>;
-    wishlist: Array<IConfigurationResponse>;
+    wishlist: WishlistArray;
 }
 declare const reducer: import("redux").Reducer<ThreekitState, import("redux").AnyAction>;
 export declare const setThreekitLoaded: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>;
@@ -71,7 +71,7 @@ export declare const getMetadata: (state: RootState) => undefined | IMetadata;
 export declare const getLanguage: (state: RootState) => undefined | string;
 export declare const getLanguageOptions: (state: RootState) => Array<string>;
 export declare const getAttributes: (state: RootState) => undefined | Record<string, IThreekitDisplayAttribute>;
-export declare const getWishlist: (state: RootState) => IConfigurationResponse[];
+export declare const getWishlist: (state: RootState) => WishlistArray;
 /*****************************************************
  * Complex Selectors
  ****************************************************/