@threekit-tools/treble 0.0.55 → 0.0.56

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

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

package/dist/components/Upload/index.js

@@ -71,13 +71,15 @@ var upload_styles_1 = require("./upload.styles");
 var Upload = function (props) {
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
     var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
-    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
-    var inputRef = (0, react_1.createRef)();
+    var inputRef = (0, react_1.useRef)(null);
+    var imgRef = (0, react_1.useRef)(null);
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
     var handleClick = function () {
         var _a;
         if (isUploading)
             return;
+        if (value === null || value === void 0 ? void 0 : value.length)
+            return;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
@@ -90,14 +92,14 @@ var Upload = function (props) {
                 case 1:
                     _a.sent();
                     setIsUploading(false);
-                    setFilename(file.name);
+                    if (!file)
+                        return [2 /*return*/];
                     reader = new FileReader();
                     reader.onload = function () {
-                        var imgEl = document.getElementById('trbl-upload-img');
-                        if (!imgEl)
+                        if (!imgRef.current)
                             return;
                         // @ts-ignore
-                        imgEl.src = reader.result;
+                        imgRef.current.src = reader.result;
                     };
                     reader.readAsDataURL(file);
                     return [2 /*return*/];
@@ -107,7 +109,7 @@ var Upload = function (props) {
     return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
         react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
         react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
-        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls },
+        react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && (value === null || value === void 0 ? void 0 : value.length)) },
             react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
                     var _a;
                     return __generator(this, function (_b) {
@@ -117,19 +119,21 @@ var Upload = function (props) {
                         return [2 /*return*/];
                     });
                 }); } }),
-            react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
-                react_1.default.createElement("div", null,
+            react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(upload_styles_1.IconWrapper, null,
                     react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
-                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("img", { src: "#", id: "trbl-upload-img" })),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", null, filename),
-                    react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(icons_1.ImageIcon, null)),
-                react_1.default.createElement("div", null, "Click to upload"),
-                react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
+                    react_1.default.createElement("img", { ref: imgRef, src: "#" })),
+                react_1.default.createElement(upload_styles_1.ImageActionArea, null,
+                    react_1.default.createElement("div", { onClick: function (e) {
+                            handleUpload(undefined);
+                            e.stopPropagation();
+                        } },
+                        react_1.default.createElement(icons_1.DeleteIcon, null))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(upload_styles_1.IconWrapper, null,
+                    react_1.default.createElement(icons_1.AddIcon, null)),
+                react_1.default.createElement("div", null, "Upload")))))));
 };
 exports.Upload = Upload;
 exports.Upload.componentName = 'upload';

package/dist/components/Upload/upload.styles.d.ts

@@ -1,7 +1,9 @@
 interface IUploadWrapper {
     fullWidth?: boolean;
-    iconOnly?: boolean;
+    uploaded: boolean;
 }
 export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
-export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ImageActionArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/components/Upload/upload.styles.js

@@ -7,10 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadingWrapper = exports.UploadWrapper = void 0;
+exports.IconWrapper = exports.ImageActionArea = exports.ImageWrapper = exports.UploadWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), function (props) {
-    return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
-}, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
-exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"])));
-var templateObject_1, templateObject_2;
+var SIZE = '110px';
+var PADDING = '6px';
+exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    height: ", ";\n    width: ", ";\n    /* padding: 6px; */\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: ", ";\n    border-radius: ", ";\n    border: 1px\n      ", ";\n    transition: all 0.16s ease-in-out;\n\n    img {\n      height: 100%;\n      width: 100%;\n    }\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border-color: ", ";\n    color: ", ";\n\n    .tk-icon {\n      ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    height: ", ";\n    width: ", ";\n    /* padding: 6px; */\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: ", ";\n    border-radius: ", ";\n    border: 1px\n      ", ";\n    transition: all 0.16s ease-in-out;\n\n    img {\n      height: 100%;\n      width: 100%;\n    }\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border-color: ", ";\n    color: ", ";\n\n    .tk-icon {\n      ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), SIZE, function (props) { return (props.fullWidth ? '100%' : SIZE); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return (props.uploaded ? 'default' : 'pointer'); }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) {
+    return "".concat(props.uploaded ? 'solid' : 'dashed', " ").concat(props.theme.borderColorBase);
+}, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return (props.uploaded ? '' : "stroke: ".concat(props.theme.primaryColor)); });
+exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  & > div {\n    height: calc(", " - (2 * (", " + 1px)));\n    width: calc(", " - (2 * (", " + 1px)));\n  }\n"], ["\n  position: relative;\n\n  & > div {\n    height: calc(", " - (2 * (", " + 1px)));\n    width: calc(", " - (2 * (", " + 1px)));\n  }\n"])), SIZE, PADDING, SIZE, PADDING);
+exports.ImageActionArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: calc(", " - (2 * (", " + 1px)));\n  width: calc(", " - (2 * (", " + 1px)));\n\n  transition: all 0.3s;\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.6);\n\n    & > div {\n      opacity: 1;\n    }\n  }\n\n  & > div {\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  & > div:hover {\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  .tk-icon {\n    stroke: white;\n  }\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: calc(", " - (2 * (", " + 1px)));\n  width: calc(", " - (2 * (", " + 1px)));\n\n  transition: all 0.3s;\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.6);\n\n    & > div {\n      opacity: 1;\n    }\n  }\n\n  & > div {\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  & > div:hover {\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  .tk-icon {\n    stroke: white;\n  }\n\n  & > div {\n    height: max-content;\n    width: max-content;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), SIZE, PADDING, SIZE, PADDING, function (props) { return props.theme.primaryColor; });
+exports.IconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 12px;\n"], ["\n  margin-bottom: 12px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/components/UploadArea/index.js

@@ -0,0 +1,137 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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 utils_1 = require("../../utils");
+var icons_1 = require("../../icons");
+var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var uploadArea_styles_1 = require("./uploadArea.styles");
+var UploadArea = function (props) {
+    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
+    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
+    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var imgRef = (0, react_1.useRef)(null);
+    var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
+    var handleClick = function () {
+        var _a;
+        if (isUploading)
+            return;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+        var reader;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsUploading(true);
+                    return [4 /*yield*/, onChange(file)];
+                case 1:
+                    _a.sent();
+                    setIsUploading(false);
+                    setFilename(file.name);
+                    reader = new FileReader();
+                    reader.onload = function () {
+                        if (!imgRef.current)
+                            return;
+                        // @ts-ignore
+                        imgRef.current.src = reader.result;
+                    };
+                    reader.readAsDataURL(file);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
+        react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
+        react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
+        react_1.default.createElement(uploadArea_styles_1.UploadWrapper, { className: cls },
+            react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
+                    var _a;
+                    return __generator(this, function (_b) {
+                        if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || !onChange)
+                            return [2 /*return*/];
+                        handleUpload(e.target.files[0]);
+                        return [2 /*return*/];
+                    });
+                }); } }),
+            react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("img", { ref: imgRef, src: "#" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null, filename),
+                    react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.ImageIcon, null)),
+                react_1.default.createElement("div", null, "Click to upload"),
+                react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
+};
+exports.UploadArea = UploadArea;
+exports.UploadArea.componentName = 'upload-area';
+exports.UploadArea.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
+exports.default = (0, formInputContainer_1.default)(exports.UploadArea);

package/dist/components/UploadArea/uploadArea.styles.d.ts

@@ -0,0 +1,7 @@
+interface IUploadWrapper {
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+}
+export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
+export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/UploadArea/uploadArea.styles.js

@@ -0,0 +1,16 @@
+"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.UploadingWrapper = exports.UploadWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), function (props) {
+    return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
+}, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
+exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/formComponents.js

@@ -29,6 +29,7 @@ var Swatch_1 = __importStar(require("./Swatch"));
 var Tiles_1 = __importStar(require("./Tiles"));
 var TilesGroup_1 = __importStar(require("./TilesGroup"));
 var Upload_1 = __importStar(require("./Upload"));
+// import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
 exports.formComponents = (_a = {},
     _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
         //  First option is default

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

@@ -1,5 +1,5 @@
 import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
-export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File;
+export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
 declare type UseAttributeError = [undefined, undefined];
 declare type UseAttributeSuccess = [
     IThreekitDisplayAttribute,

package/dist/hooks/useAttribute/index.js

@@ -61,17 +61,21 @@ var useAttribute = function (attributeName) {
             switch (_b.label) {
                 case 0:
                     if (!(attribute.type === 'Asset' &&
-                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 2];
-                    return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
-                case 1:
+                        attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
+                    if (!!value) return [3 /*break*/, 1];
+                    preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
+                case 2:
                     assetId = _b.sent();
                     if (assetId)
                         preppedValue = (0, utils_1.selectionToConfiguration)(assetId, attribute.type);
-                    return [3 /*break*/, 3];
-                case 2:
-                    preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
                     _b.label = 3;
-                case 3:
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
+                    _b.label = 5;
+                case 5:
                     dispatch((0, attributes_1.setConfiguration)((_a = {},
                         _a[attributeName] = preppedValue,
                         _a)));

package/dist/icons/Spinner.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface ISpinnerProps {
     size?: string;
+    thickness?: string;
 }
 declare function Spinner(props: ISpinnerProps): JSX.Element;
 declare namespace Spinner {

package/dist/icons/Spinner.js

@@ -29,10 +29,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 function Spinner(props) {
-    return react_1.default.createElement(Wrapper, { size: props.size });
+    return react_1.default.createElement(Wrapper, { size: props.size, thickness: props.thickness });
 }
 var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n    transform: rotate(360deg);\n}\n"], ["\nto {\n    transform: rotate(360deg);\n}\n"])));
-var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"], ["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, spin);
+var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: ", " solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"], ["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: ", " solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, function (props) { return props.thickness || '5px'; }, spin);
 Spinner.iconName = 'spinner';
 exports.default = Spinner;
 var templateObject_1, templateObject_2;

package/dist/utils.d.ts

@@ -56,7 +56,7 @@ export declare const createThreekitScriptEl: (threekitDomain: string) => Promise
 export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
 export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
     assetId: RawAttributeValue;
-};
+} | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
 export declare const isUuid: (str?: string | undefined) => boolean;
 export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;

package/package.json

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