@threekit-tools/treble 0.0.15 → 0.0.19

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 interface FlatFormProps {
     title?: string;

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/components/containers/formInputContainer.d.ts

@@ -45,7 +45,7 @@ interface IPrepAttributeConfig {
     sort?: string;
 }
 export declare const prepAttributeForComponent: (attribute: IThreekitDisplayAttribute, config: IPrepAttributeConfig) => {
-    selected: string | number | import("../../threekit").IConfigurationAsset | import("../../threekit").IConfigurationColor;
+    selected: string | number | import("../../threekit").IConfigurationColor | import("../../threekit").IConfigurationAsset;
     options: IDisplayAttributeAssetValue[] | {
         name: string;
         label: string;

package/dist/store/index.d.ts

@@ -1,13 +1,13 @@
 import { TypedUseSelectorHook } from 'react-redux';
 declare const store: import("@reduxjs/toolkit").EnhancedStore<{
     threekit: import("./threekit").ThreekitState;
-}, import("redux").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<import("redux-thunk").ThunkMiddleware<{
+}, import("redux").AnyAction, import("@reduxjs/toolkit").MiddlewareArray<import("redux").Middleware<{}, any, import("redux").Dispatch<import("redux").AnyAction>> | import("redux-thunk").ThunkMiddleware<{
     threekit: import("./threekit").ThreekitState;
 }, import("redux").AnyAction, null> | import("redux-thunk").ThunkMiddleware<{
     threekit: import("./threekit").ThreekitState;
 }, import("redux").AnyAction, undefined> | import("redux").Middleware<{}, {
     threekit: import("./threekit").ThreekitState;
-}, import("redux").Dispatch<import("redux").AnyAction>> | import("redux").Middleware<{}, any, import("redux").Dispatch<import("redux").AnyAction>>>>;
+}, import("redux").Dispatch<import("redux").AnyAction>>>>;
 export declare type RootState = ReturnType<typeof store.getState>;
 export declare type ThreekitDispatch = typeof store.dispatch;
 export declare const useThreekitDispatch: () => import("@reduxjs/toolkit").ThunkDispatch<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.15",
+  "version": "0.0.19",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [