pds-dev-kit-web-test 0.0.11 → 0.0.12

package/dist/src/desktop/components/TextField/TextField.js

@@ -32,16 +32,21 @@ var IconButton_1 = require("../IconButton");
 function TextField(_a) {
     var _b;
     var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.validationPoint, validationPoint = _c === void 0 ? 'onBlur' : _c, _d = _a.preventBlankMode, preventBlankMode = _d === void 0 ? 'none' : _d, _e = _a.enterSubmitMode, enterSubmitMode = _e === void 0 ? 'none' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.responsiveMode, responsiveMode = _g === void 0 ? 'none' : _g, _h = _a.textLineType, textLineType = _h === void 0 ? 'single' : _h, _j = _a.multiRows, multiRows = _j === void 0 ? 8 : _j, _k = _a.autoMinRows, autoMinRows = _k === void 0 ? 8 : _k, autoMaxRows = _a.autoMaxRows, _l = _a.inputType, inputType = _l === void 0 ? 'text' : _l, _m = _a.state, state = _m === void 0 ? 'normal' : _m, iBtn1IconName = _a.iBtn1IconName, _o = _a.iBtn1IconFillType, iBtn1IconFillType = _o === void 0 ? 'line' : _o, iBtn2IconName = _a.iBtn2IconName, _p = _a.iBtn2IconFillType, iBtn2IconFillType = _p === void 0 ? 'line' : _p, _q = _a.colorTheme, colorTheme = _q === void 0 ? 'none' : _q, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget;
-    var iconThemeColorNoneObj = {
+    var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
         disabled: 'ui_cpnt_button_icon_disabled'
     };
-    var iconThemeColorDarkObj = {
+    var darkThemeIconColors = {
         normal: 'ui_cpnt_textfield_icon_darktheme_default',
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
+    var transparentThemeIconColors = {
+        normal: 'ui_cpnt_textfield_icon_colortheme_transparent_default',
+        read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
+        disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
+    };
     var _s = (0, react_1.useState)(false), isFocused = _s[0], setIsFocused = _s[1];
     var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, trigger = _t.trigger, errors = _t.formState.errors;
     var _u = register(name, validation), validateOnChange = _u.onChange, validateOnBlur = _u.onBlur;
@@ -100,24 +105,37 @@ function TextField(_a) {
             return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: "normal", autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }));
         }
         if (textLineType === 'single') {
+            var deleteIconColor = 'ui_cpnt_button_icon_disabled';
+            switch (colorTheme) {
+                case 'dark': {
+                    deleteIconColor = 'ui_cpnt_textfield_icon_darktheme_disabled';
+                    break;
+                }
+                case 'transparent': {
+                    deleteIconColor = 'ui_cpnt_textfield_icon_colortheme_transparent_disabled';
+                    break;
+                }
+            }
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
+                react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: "normal", deleteIconMode: "use", deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp }),
                 react_1.default.createElement(S_IconBox, null,
                     iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {
-                                none: iconThemeColorNoneObj[state],
-                                dark: iconThemeColorDarkObj[state]
+                                none: basicThemeIconColors[state],
+                                dark: darkThemeIconColors[state],
+                                transparent: transparentThemeIconColors[state]
                             }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })),
                     iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
                             {
-                                none: iconThemeColorNoneObj[state],
-                                dark: iconThemeColorDarkObj[state]
+                                none: basicThemeIconColors[state],
+                                dark: darkThemeIconColors[state],
+                                transparent: transparentThemeIconColors[state]
                             }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 })))));
         }
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (react_1.default.createElement(S_Error, { colorTheme: colorTheme }, errors[name].message))));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -227,7 +245,32 @@ var dark_disabled = (0, styled_components_1.css)(templateObject_12 || (templateO
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_border_darktheme_normal;
 });
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+var transparent_normal = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_normal;
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError, isFocused = _a.isFocused;
+    if (isError)
+        return theme.ui_cpnt_textfield_border_colortheme_transparent_error;
+    if (isFocused)
+        return theme.ui_cpnt_textfield_border_colortheme_transparent_focus;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_normal;
+});
+var transparent_read_only = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_readonly;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_readonly;
+});
+var transparent_disabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_base_colortheme_transparent_disabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_border_colortheme_transparent_disabled;
+});
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {
@@ -241,22 +284,23 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (t
         }[size];
 }, function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme;
-    return colorTheme === 'none' &&
-        state &&
-        {
-            normal: normal,
-            read_only: read_only,
-            disabled: disabled
-        }[state];
-}, function (_a) {
-    var state = _a.state, colorTheme = _a.colorTheme;
-    return colorTheme === 'dark' &&
-        state &&
-        {
-            normal: dark_normal,
-            read_only: dark_read_only,
-            disabled: dark_disabled
-        }[state];
+    if (state) {
+        switch (colorTheme) {
+            case 'none': {
+                return { normal: normal, read_only: read_only, disabled: disabled }[state];
+            }
+            case 'dark': {
+                return { normal: dark_normal, read_only: dark_read_only, disabled: dark_disabled }[state];
+            }
+            case 'transparent': {
+                return {
+                    normal: transparent_normal,
+                    read_only: transparent_read_only,
+                    disabled: transparent_disabled
+                }[state];
+            }
+        }
+    }
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
@@ -264,12 +308,18 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_13 || (t
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
 });
-var S_IconBox = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_Error = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
+var S_IconBox = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
-    return colorTheme === 'none'
-        ? theme.ui_cpnt_textfield_text_error
-        : theme.ui_cpnt_textfield_text_darktheme_error;
+    switch (colorTheme) {
+        case 'none': {
+            return theme.ui_cpnt_textfield_text_error;
+        }
+        case 'dark':
+        case 'transparent': {
+            return theme.ui_cpnt_textfield_text_colortheme_transparent_error;
+        }
+    }
 }, function (_a) {
     var theme = _a.theme;
     return theme.desktopFontSize.caption2;
@@ -284,4 +334,4 @@ var S_Error = styled_components_1.default.div(templateObject_15 || (templateObje
     return theme.spacing.spacingA;
 });
 exports.default = TextField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/src/desktop/components/UploadIconButton/UploadIconButton.js

@@ -36,6 +36,7 @@ function UploadIconButton(_a) {
         if (onClick) {
             onClick(e);
         }
+        e.target.value = '';
     };
     var IconColorSelect = function () {
         if (state === 'disabled') {

package/dist/src/desktop/components/UploadMainButton/UploadMainButton.d.ts

@@ -15,7 +15,9 @@ declare type UploadMainButtonProps = {
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';
+    isLoading?: boolean;
+    isSubmitting?: boolean;
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadMainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, onClick }: UploadMainButtonProps): JSX.Element;
+declare function UploadMainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, state, accept, multipleMode, isLoading, isSubmitting, onClick }: UploadMainButtonProps): JSX.Element;
 export default UploadMainButton;

package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js

@@ -28,15 +28,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../common/components");
+var styles_1 = require("../../../common/styles");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadMainButton(_a) {
-    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'ic_upload' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
+    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'ic_upload' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
+        e.target.value = '';
+    };
+    var submittingProgressColor = function () {
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return types_1.textThemeColorLines[colorTheme];
+        }
+        if (fillType === 'fill') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (fillType === 'line') {
+            return 'ui_cpnt_textlabel_sys_primary';
+        }
+        if (styleTheme === 'primary') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'ui_cpnt_textlabel_usr_brandprimary';
+        }
+        return 'ui_cpnt_textlabel_usr_brandonprimary';
     };
     var selectTextThemeColor = function () {
         if (colorTheme === 'line3' && state === 'disabled') {
@@ -79,15 +100,27 @@ function UploadMainButton(_a) {
         }
         return 'usrTextBrandOnPrimary';
     };
-    return (react_1.default.createElement(S_UploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
-        size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
-        size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
-            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    var UploadMainButtonVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingUploadMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, colorTheme: "none", disabled: true },
+                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' })));
+        }
+        if (isSubmitting) {
+            return (react_1.default.createElement(S_SubmittingUploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, disabled: false, isSubmitting: true },
+                react_1.default.createElement("input", { type: "file", hidden: true, disabled: true, accept: accept, multiple: multipleMode === 'use' }),
+                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+        }
+        return (react_1.default.createElement(S_UploadMainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
+            react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
+            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: types_1.textStyles[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    };
+    return UploadMainButtonVariation();
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -128,11 +161,13 @@ var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme;
-    return "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n    )";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_hover + ",\n      " + theme.ui_cpnt_button_fill_on_base_hover + "\n    )";
 }, function (_a) {
-    var theme = _a.theme;
-    return "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "linear-gradient(\n      to top,\n      " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n      " + theme.ui_cpnt_button_fill_on_base_pressed + "\n    )";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && fillDisabled;
@@ -156,11 +191,11 @@ var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_darktheme_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_hover;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_darktheme_pressed;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_darktheme_pressed;
 });
 var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
@@ -177,11 +212,11 @@ var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting && theme.ui_cpnt_button_line_base_pressed;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
@@ -197,11 +232,13 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && primaryDisabled;
@@ -214,11 +251,13 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+    var theme = _a.theme, isSubmitting = _a.isSubmitting;
+    return !isSubmitting &&
+        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
@@ -246,5 +285,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_17 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = UploadMainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js

@@ -48,6 +48,7 @@ function UploadTextButton(_a) {
         if (onClick) {
             onClick(e);
         }
+        e.target.value = '';
     };
     return (react_1.default.createElement(S_UploadTextButton, { size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
         react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),

package/dist/src/desktop/components/index.d.ts

@@ -27,6 +27,7 @@ import { Hero } from './Hero';
 import { HorizontalFormGroup } from './HorizontalFormGroup';
 import { IconButton } from './IconButton';
 import { ImageSlide } from './ImageSlide';
+import { LottieReactionButton } from './LottieReactionButton';
 import { MainButton } from './MainButton';
 import { PageTitleTextGroup } from './PageTitleTextGroup';
 import { Radio } from './Radio';
@@ -42,4 +43,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

package/dist/src/desktop/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -60,6 +60,8 @@ var IconButton_1 = require("./IconButton");
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var ImageSlide_1 = require("./ImageSlide");
 Object.defineProperty(exports, "ImageSlide", { enumerable: true, get: function () { return ImageSlide_1.ImageSlide; } });
+var LottieReactionButton_1 = require("./LottieReactionButton");
+Object.defineProperty(exports, "LottieReactionButton", { enumerable: true, get: function () { return LottieReactionButton_1.LottieReactionButton; } });
 var MainButton_1 = require("./MainButton");
 Object.defineProperty(exports, "MainButton", { enumerable: true, get: function () { return MainButton_1.MainButton; } });
 var PageTitleTextGroup_1 = require("./PageTitleTextGroup");

package/dist/src/desktop/index.d.ts

@@ -9,7 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
-import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
-export { D_DesktopBasicModal, D_DesktopHeadlessModal };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+import { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, SectionSheet as D_SectionSheet } from './panels';
+export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };

package/dist/src/desktop/index.js

@@ -2,8 +2,8 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = void 0;
+exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -55,6 +55,7 @@ Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
 Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "D_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
+Object.defineProperty(exports, "D_LottieReactionButton", { enumerable: true, get: function () { return components_1.LottieReactionButton; } });
 Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return components_1.MainButton; } });
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
@@ -72,5 +73,8 @@ Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: f
 Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
 // panels
 var panels_1 = require("./panels");
+Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });
+Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return panels_1.ContentSheet; } });
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return panels_1.SectionSheet; } });

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -6,6 +6,8 @@ export declare type ContentsContainerProps = {
     layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const ContentsContainer: ({ stepContent, content1, content2, layoutType, containerColor, areaColor }: ContentsContainerProps) => JSX.Element;
+declare const ContentsContainer: ({ stepContent, content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: ContentsContainerProps) => JSX.Element;
 export default ContentsContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js

@@ -6,31 +6,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var variation_1 = require("./variation");
 var ContentsContainer = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var stepContent = _a.stepContent, content1 = _a.content1, content2 = _a.content2, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(react_1.default.Fragment, null, {
-        WFA_1: (react_1.default.createElement(variation_1.WFA, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFB_1: (react_1.default.createElement(variation_1.WFB, { stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFH_1: react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
-        WFJ_1: react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
-        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor }))
+        WFA_1: (react_1.default.createElement(variation_1.WFA, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFB_1: (react_1.default.createElement(variation_1.WFB, { stepContent: stepContent, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFC_1: (react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFF_1: (react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_3: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_4: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_5: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFG_6: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFH_1: (react_1.default.createElement(variation_1.WFH, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFI_1: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_2: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_3: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_3", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_4: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_5: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFI_6: (react_1.default.createElement(variation_1.WFI, { layoutType: "WFI_6", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 })),
+        WFJ_1: (react_1.default.createElement(variation_1.WFJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1 })),
+        WFK_1: (react_1.default.createElement(variation_1.WFK, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2 }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.d.ts

@@ -4,6 +4,7 @@ export declare type WFAProps = {
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
 };
-declare const WFA: ({ stepContent, content1, containerColor, areaColor }: WFAProps) => JSX.Element;
+declare const WFA: ({ stepContent, content1, containerColor, areaColor, isLoadingContainer1 }: WFAProps) => JSX.Element;
 export default WFA;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFA.js

@@ -9,13 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WFA = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, null, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(S_SideArea, { areaColor: areaColor },
+                react_1.default.createElement(S_StepContent, null, stepContent)),
+            react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+                react_1.default.createElement(S_Content1, null, content1)))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;