@threekit-tools/treble 0.0.18 → 0.0.22

package/dist/components/Cards/cards.styles.js

@@ -11,7 +11,7 @@ exports.CardWrapper = exports.CardPrice = exports.CardDescription = exports.Card
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.CardsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  transition: all 0.2s;\n\n  & > div {\n    margin-bottom: 5px;\n  }\n\n  & > div:not(:last-child) {\n    margin-right: 5px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  transition: all 0.2s;\n\n  & > div {\n    margin-bottom: 5px;\n  }\n\n  & > div:not(:last-child) {\n    margin-right: 5px;\n  }\n"])));
 exports.CardWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* min-height: 234px; */\n  width: 170px;\n  border-radius: ", ";\n  border: 1px solid lightgrey;\n\n  background: #fff;\n\n  padding: 14px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  cursor: pointer;\n"], ["\n  /* min-height: 234px; */\n  width: 170px;\n  border-radius: ", ";\n  border: 1px solid lightgrey;\n\n  background: #fff;\n\n  padding: 14px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  cursor: pointer;\n"])), function (props) { return props.theme.borderRadius; });
-exports.CardThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 120px;\n  width: 100%;\n  margin-bottom: 5px;\n  text-align: center;\n\n  ", "\n\n  img {\n    height: 120px;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 120px;\n  width: 100%;\n  margin-bottom: 5px;\n  text-align: center;\n\n  ", "\n\n  img {\n    height: 120px;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
+exports.CardThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 120px;\n  width: 100%;\n  margin-bottom: 5px;\n  text-align: center;\n  display: block;\n\n  ", "\n\n  img {\n    height: 120px;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 120px;\n  width: 100%;\n  margin-bottom: 5px;\n  text-align: center;\n  display: block;\n\n  ", "\n\n  img {\n    height: 120px;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
 exports.CardTitle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  transition: all 0.2s;\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  transition: all 0.2s;\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; });
 exports.CardDescription = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 13px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  padding-bottom: 5px;\n  transition: all 0.2s;\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 13px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  padding-bottom: 5px;\n  transition: all 0.2s;\n"])), function (props) { return props.theme.textColorSecondary; }, function (props) { return props.theme.fontFamily; });
 exports.CardPrice = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  transition: all 0.2s;\n"], ["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  font-family: ", ";\n  line-height: 20px;\n  text-align: center;\n  transition: all 0.2s;\n"])), function (props) { return props.theme.textColorSecondary; }, function (props) { return props.theme.fontFamily; });

package/dist/components/Cards/index.js

@@ -17,7 +17,7 @@ var Thumbnail = function (props) {
     var imageUrl = props.imageUrl, color = props.color, name = props.name, className = props.className;
     if (!imageUrl && !color)
         return null;
-    return (react_1.default.createElement(cards_styles_1.CardThumbnail, { className: "".concat(className, " option-thumbnail"), color: color }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : null));
+    return (react_1.default.createElement(cards_styles_1.CardThumbnail, { className: "".concat(className, " option-thumbnail"), color: color }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
 };
 var Title = function (props) {
     var name = props.name, className = props.className;

package/dist/components/Drawer/drawer.styles.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Header = exports.Wrapper = exports.Background = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Background = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  opacity: ", ";\n  transition: all ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  opacity: ", ";\n  transition: all ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"])), function (props) { return (props.show ? 1 : 0); }, function (props) { return props.transitionDuration; });
-exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"])), function (props) { return props.theme.borderRadius; }, function (props) { return (props.show ? '0%' : '100%'); }, function (props) { return props.transitionDuration; });
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n  z-index: 10;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  min-width: 400px;\n  height: 100vh;\n  background: #fff;\n  border-radius: ", ";\n  opacity: 1;\n  z-index: 10;\n\n  transform: translateX(", ");\n  transition: all ", ";\n\n  position: absolute;\n  top: 0;\n  right: 0;\n"])), function (props) { return props.theme.borderRadius; }, function (props) { return (props.show ? '0%' : '100%'); }, function (props) { return props.transitionDuration; });
 exports.Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n  padding: 20px;\n\n  & > div {\n    /* height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%); */\n  }\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n    height: 20px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n  padding: 20px;\n\n  & > div {\n    /* height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%); */\n  }\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n    height: 20px;\n  }\n"])), function (props) { return props.theme.fontFamily; });
 exports.Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), function (props) { return props.theme.fontFamily; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Modal/modal.styles.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Header = exports.Wrapper = exports.Background = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Background = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  background: #33333377;\n\n  position: fixed;\n  top: 0;\n  left: 0;\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (props) { return props.theme.borderRadius; });
+exports.Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  z-index: 10;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"], ["\n  min-width: 400px;\n  max-width: 100%;\n  min-height: 200px;\n  opacity: 1;\n  overflow: scroll;\n  z-index: 10;\n  background: #fff;\n  border-radius: ", ";\n\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (props) { return props.theme.borderRadius; });
 exports.Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  font-family: ", ";\n\n  & > div:nth-child(2) {\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.fontFamily; });
 exports.Content = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), function (props) { return props.theme.fontFamily; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ProductLayoutProps {
+    products: string | Array<string> | Record<string, string>;
+}
+declare const ProductLayout: React.FC<ProductLayoutProps>;
+export default ProductLayout;

package/dist/components/ProductLayout/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ProductLayout = function (props) {
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+exports.default = ProductLayout;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/// <reference types="webpack-env" />
+import { ThreekitProviderProps } from '../ThreekitProvider';
+interface IProducts {
+    ctx: __WebpackModuleApi.RequireContext;
+}
+interface ProductLoaderProps extends Omit<ThreekitProviderProps, 'children'> {
+    productId: string;
+    products: IProducts;
+}
+export default function ProductLoader(props: ProductLoaderProps): JSX.Element | null;
+export {};

package/dist/components/ProductLoader/index.js

@@ -0,0 +1,82 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
+var productAssetId = {};
+var productComponents = [];
+var productToComponentMap = {};
+function ProductLoader(props) {
+    var productId = props.productId, products = props.products, credentials = props.credentials, playerConfig = props.playerConfig, theme = props.theme, threekitEnv = props.threekitEnv;
+    if (!productId || !products)
+        return null;
+    if (!productComponents.length) {
+        products.ctx.keys().forEach(function (fileName) {
+            if (!fileName.includes('product.js'))
+                return;
+            if (fileName.includes('].product.js'))
+                return;
+            productComponents.push(products.ctx(fileName).default);
+        });
+        react_1.Children.forEach(Object.values(productComponents).map(function (el) { return el({}); }), function (jsx, i) {
+            var _a;
+            if (!jsx)
+                return;
+            if (jsx.type.name !== 'ProductLayout')
+                return;
+            if (!jsx.props.products)
+                return;
+            var products;
+            if (Array.isArray(jsx.props.products))
+                products = jsx.props.products.reduce(function (output, id) {
+                    var _a;
+                    return Object.assign(output, (_a = {}, _a[id] = id, _a));
+                }, {});
+            else if (typeof jsx.props.products === 'string') {
+                var prdStr = jsx.props.products;
+                products = (_a = {}, _a[prdStr] = prdStr, _a);
+            }
+            else {
+                products = jsx.props.products;
+            }
+            Object.entries(products).forEach(function (_a) {
+                var key = _a[0], assetId = _a[1];
+                productAssetId[key] = assetId;
+                productToComponentMap[key] = i;
+            });
+        });
+    }
+    var Product = productComponents[productToComponentMap[props.productId]];
+    if (!Product)
+        return null;
+    var assetId = productAssetId[props.productId];
+    var env = threekitEnv || 'preview';
+    var preppedCredentials = Object.assign({}, credentials);
+    preppedCredentials[env] = Object.assign(preppedCredentials[env], {
+        assetId: assetId,
+    });
+    return (react_1.default.createElement(ThreekitProvider_1.default, { credentials: preppedCredentials, playerConfig: Object.assign({}, playerConfig), theme: theme },
+        react_1.default.createElement(Product, null)));
+}
+exports.default = ProductLoader;

package/dist/components/Strips/index.js

@@ -17,7 +17,7 @@ var Thumbnail = function (props) {
     var imageUrl = props.imageUrl, color = props.color, name = props.name, className = props.className;
     if (!imageUrl && !color)
         return null;
-    return (react_1.default.createElement(strips_styles_1.StripThumbnail, { className: "".concat(className, " option-thumbnail"), color: color }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : null));
+    return (react_1.default.createElement(strips_styles_1.StripThumbnail, { className: "".concat(className, " option-thumbnail"), color: color }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
 };
 var Title = function (props) {
     var name = props.name, className = props.className;

package/dist/components/Strips/strips.styles.js

@@ -11,7 +11,7 @@ exports.StripWrapper = exports.StripPrice = exports.StripDescription = exports.S
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.StripsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  & > div:not(:first-child) {\n    margin-top: 8px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  & > div:not(:first-child) {\n    margin-top: 8px;\n  }\n"])));
 exports.StripWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: max-content;\n  width: 100%;\n  border-radius: ", ";\n  border: 1px solid lightgrey;\n  background: #fff;\n\n  padding: 5px 12px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 8px;\n\n  cursor: pointer;\n\n  & > div:nth-child(2) {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"], ["\n  height: max-content;\n  width: 100%;\n  border-radius: ", ";\n  border: 1px solid lightgrey;\n  background: #fff;\n\n  padding: 5px 12px;\n\n  display: grid;\n  grid-template-columns: max-content auto max-content;\n  grid-gap: 8px;\n\n  cursor: pointer;\n\n  & > div:nth-child(2) {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])), function (props) { return props.theme.borderRadius || '2px'; });
-exports.StripThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n  margin-right: 5px;\n\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 48px;\n  width: 48px;\n  margin-right: 5px;\n\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) {
+exports.StripThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n  margin-right: 5px;\n  display: block;\n\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 48px;\n  width: 48px;\n  margin-right: 5px;\n  display: block;\n\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) {
     return props.color
         ? "background: ".concat(props.color, "; border-radius: ").concat(props.theme.borderRadius, ";")
         : '';

package/dist/components/Swatch/index.js

@@ -27,7 +27,7 @@ var Thumbnail = function (props) {
     var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, className = props.className;
     if (!imageUrl && !color)
         return react_1.default.createElement("div", null);
-    return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : null));
+    return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
 };
 var Swatch = function (props) {
     var _a = Object.assign({ shape: 'round' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription;

package/dist/components/Swatch/swatch.styles.js

@@ -19,7 +19,7 @@ exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 |
         ? ''
         : "border: 2px solid ".concat(props.theme.primaryColor, "55;");
 });
-exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) {
+exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"], ["\n  height: 52px;\n  width: 52px;\n  text-align: center;\n  display: block;\n\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  img {\n    height: 100%;\n    width: auto;\n    object-fit: cover;\n  }\n"])), function (props) {
     return props.shape === 'round' ? '50%' : props.theme.borderRadius;
 }, function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
 exports.SwatchInfoWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: max-content;\n  position: relative;\n  top: -100%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n  padding-bottom: 4px;\n  color: white;\n  font-family: ", ";\n\n  display: none;\n\n  & > div:nth-child(1) {\n    background: rgba(0, 0, 0, 0.6);\n    padding: 4px 6px;\n    border-radius: ", ";\n    max-width: 250px;\n  }\n\n  & > div:nth-child(2) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n\n    & > div {\n      width: 0;\n      height: 0;\n      border-left: 8px solid transparent;\n      border-right: 8px solid transparent;\n\n      border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n      overflow: hidden;\n      pointer-events: none;\n    }\n  }\n"], ["\n  width: max-content;\n  position: relative;\n  top: -100%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-100%);\n  padding-bottom: 4px;\n  color: white;\n  font-family: ", ";\n\n  display: none;\n\n  & > div:nth-child(1) {\n    background: rgba(0, 0, 0, 0.6);\n    padding: 4px 6px;\n    border-radius: ", ";\n    max-width: 250px;\n  }\n\n  & > div:nth-child(2) {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n\n    & > div {\n      width: 0;\n      height: 0;\n      border-left: 8px solid transparent;\n      border-right: 8px solid transparent;\n\n      border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n      overflow: hidden;\n      pointer-events: none;\n    }\n  }\n"])), function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.borderRadius; });

package/dist/index.d.ts

@@ -35,4 +35,8 @@ import Zoom from './components/Zoom';
 import Snapshots from './components/Snapshots';
 import Wishlist from './components/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, };
+import icons from './icons';
+export * from './icons';
+import ProductLoader from './components/ProductLoader';
+import ProductLayout from './components/ProductLayout';
+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, icons, ProductLoader, ProductLayout, };

package/dist/index.js

@@ -1,9 +1,19 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.ProductLayout = exports.ProductLoader = exports.icons = 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;
@@ -87,3 +97,12 @@ var Wishlist_1 = __importDefault(require("./components/Wishlist"));
 exports.Wishlist = Wishlist_1.default;
 var Share_1 = __importDefault(require("./components/Share"));
 exports.Share = Share_1.default;
+//  Icons
+var icons_1 = __importDefault(require("./icons"));
+exports.icons = icons_1.default;
+__exportStar(require("./icons"), exports);
+//  Products - Multi-configurtors
+var ProductLoader_1 = __importDefault(require("./components/ProductLoader"));
+exports.ProductLoader = ProductLoader_1.default;
+var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
+exports.ProductLayout = ProductLayout_1.default;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.18",
+  "version": "0.0.22",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "tailwind-presets.js"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,6 +44,7 @@
     "@types/react-dom": ">=17.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.15",
+    "@types/webpack-env": "^1.16.3",
     "babel-loader": "^8.2.2",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",

package/tailwind-presets.js

@@ -0,0 +1,82 @@
+// eslint-disable-next-line
+const plugin = require('tailwindcss/plugin');
+
+// eslint-disable-next-line
+module.exports = {
+  purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  mode: 'jit',
+  variants: {},
+  theme: {
+    extend: {
+      colors: {
+        primary: '#1890ff',
+      },
+      height: { 50: '12rem' },
+      width: { 50: '12rem' },
+      minWidth: {
+        11: '2.75rem',
+      },
+      boxShadow: {
+        trbl: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+        wishlist: '0px 4px 16px rgba(0, 0, 0, 0.16)',
+      },
+    },
+  },
+  corePlugins: {
+    // preflight: false,
+  },
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      const tooltip = {
+        '.trbl-tooltip': {
+          paddingBottom: `${theme('spacing.2')}`,
+          width: 'max-content',
+          borderRadius: theme('borderRadius.sm'),
+          position: 'relative',
+          top: '-100%',
+          left: '50%',
+          transform: 'translate(-50%, -100%)',
+          color: 'white',
+        },
+        '.trbl-tooltip-triangle': {
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+
+          '& > div': {
+            width: `${theme('spacing.0')}`,
+            height: `${theme('spacing.0')}`,
+            borderLeft: '8px solid transparent',
+            borderRight: '8px solid transparent',
+            borderTop: '8px solid rgba(0, 0, 0, 0.6)',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+          },
+        },
+      };
+
+      addComponents(tooltip);
+    }),
+    plugin(function ({ addComponents, theme }) {
+      const widgetBtn = {
+        '.trbl-wgt-btn': {
+          borderRadius: `${theme('borderRadius.full')}`,
+          height: '40px',
+          width: '40px',
+          border: 'none',
+          color: '#000',
+          background: 'rgba(251,251,251,0.5)',
+          overflow: 'hidden',
+          cursor: 'pointer',
+          transition: 'all 0.16s ease-in-out',
+          '&:hover': {
+            background: 'rgba(240,240,240,0.75)',
+            boxShadow: '0px 0px 4px rgb(0 0 0 / 25%)',
+          },
+        },
+      };
+
+      addComponents(widgetBtn);
+    }),
+  ],
+};