pds-dev-kit-web 1.5.11 → 1.6.0

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTP.js

@@ -9,11 +9,11 @@ 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 WTP = function (_a) {
-    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
-        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
+    var content1 = _a.content1, layoutType = _a.layoutType, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
+        react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 664px;\n  width: calc(50% + 184px);\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTQ.d.ts

@@ -5,6 +5,8 @@ export declare type WTQProps = {
     layoutType?: 'WTQ_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
-declare const WTQ: ({ content1, content2, layoutType, containerColor, areaColor }: WTQProps) => JSX.Element;
+declare const WTQ: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTQProps) => JSX.Element;
 export default WTQ;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTQ.js

@@ -9,15 +9,14 @@ 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 WTQ = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTQ_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, _b = _a.layoutType, layoutType = _b === void 0 ? 'WTQ_1' : _b, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-                react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor },
-            react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-                react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
+        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: calc(50% + 220px);\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTS.d.ts

@@ -5,7 +5,8 @@ export declare type WTSProps = {
     layoutType: 'WTS_1' | 'WTS_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTS: ({ content1, content2, containerColor, areaColor, layoutType, container1Ref }: WTSProps) => JSX.Element;
+declare const WTS: ({ content1, content2, containerColor, areaColor, layoutType, isLoadingContainer1, container1Ref }: WTSProps) => JSX.Element;
 export default WTS;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTS.js

@@ -28,15 +28,16 @@ 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 hybrid_1 = require("../../../../../../hybrid");
 var WTS = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, isLoadingContainer1 = _a.isLoadingContainer1, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1)),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
         react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, null, content2))));
+            react_1.default.createElement(S_Content2, null, content2))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTT.d.ts

@@ -5,7 +5,8 @@ export declare type WTTProps = {
     layoutType: 'WTT_1' | 'WTT_2';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const WTT: ({ content1, content2, containerColor, areaColor, layoutType, container1Ref }: WTTProps) => JSX.Element;
+declare const WTT: ({ content1, content2, containerColor, areaColor, layoutType, isLoadingContainer1, container1Ref }: WTTProps) => JSX.Element;
 export default WTT;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTT.js

@@ -28,15 +28,16 @@ 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 hybrid_1 = require("../../../../../../hybrid");
 var WTT = function (_a) {
-    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, container1Ref = _a.container1Ref;
-    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref },
+    var content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType, isLoadingContainer1 = _a.isLoadingContainer1, container1Ref = _a.container1Ref;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor, ref: container1Ref }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1)),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
         react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor },
-            react_1.default.createElement(S_Content2, null, content2))));
+            react_1.default.createElement(S_Content2, null, content2))))));
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.d.ts

@@ -5,9 +5,11 @@ export declare type WTUProps = {
     layoutType?: 'WTU_1';
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
 };
 export declare type StyleProps = {
     $contentsArea2Width?: number;
 };
-declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor }: WTUProps) => JSX.Element;
+declare const WTU: ({ content1, content2, layoutType, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2 }: WTUProps) => JSX.Element;
 export default WTU;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTU.js

@@ -28,9 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
 var WTU = function (_a) {
     var _b, _c;
-    var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTU_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    var content1 = _a.content1, content2 = _a.content2, _d = _a.layoutType, layoutType = _d === void 0 ? 'WTU_1' : _d, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2;
     var contentsArea2Ref = (0, react_1.useRef)(null);
     var _e = (0, react_1.useState)((_c = (_b = contentsArea2Ref.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 720), contentsArea2Width = _e[0], setContentsArea2Width = _e[1];
     var handleResize = function () {
@@ -51,12 +52,10 @@ var WTU = function (_a) {
         };
     }, []);
     return (react_1.default.createElement(S_Box, null,
-        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width },
-            react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
-                react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))),
-        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width },
-            react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref },
-                react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2)))));
+        react_1.default.createElement(S_ContentsContainer1, { layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width }, isLoadingContainer1 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea1, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1)))),
+        react_1.default.createElement(S_ContentsContainer2, { layoutType: layoutType, containerColor: containerColor, "$contentsArea2Width": contentsArea2Width }, isLoadingContainer2 ? (react_1.default.createElement(components_1.ThreeBarProgress, null)) : (react_1.default.createElement(S_ContentsArea2, { layoutType: layoutType, areaColor: areaColor, ref: contentsArea2Ref },
+            react_1.default.createElement(S_Content2, { layoutType: layoutType }, content2))))));
 };
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n"], ["\n  display: flex;\n  height: 100%;\n"])));
 var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0;\n  display: flex;\n  justify-content: flex-end;\n  overflow-x: hidden;\n  overflow-y: auto;\n  width: ", ";\n  ", ";\n"])), function (_a) {

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.d.ts

@@ -9,7 +9,9 @@ export declare type ContainersBoxProps = {
     children?: React.ReactNode;
     containerColor?: string;
     areaColor?: string;
+    isLoadingContainer1?: boolean;
+    isLoadingContainer2?: boolean;
     container1Ref?: MutableRefObject<HTMLDivElement | null>;
 };
-declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, containerColor, areaColor, container1Ref }: ContainersBoxProps) => JSX.Element;
+declare const ContainersBox: ({ layoutType, pageMenuContent, tabMenuContent, subMenuContent, content1, content2, containerColor, areaColor, isLoadingContainer1, isLoadingContainer2, container1Ref }: ContainersBoxProps) => JSX.Element;
 export default ContainersBox;

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
-    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, container1Ref = _a.container1Ref;
+    var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, tabMenuContent = _a.tabMenuContent, subMenuContent = _a.subMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, container1Ref = _a.container1Ref;
     return (react_1.default.createElement(S_ContainersBox, null,
         {
             WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -210,7 +210,7 @@ var ContainersBox = function (_a) {
                     WTT_2: '',
                     WTU_1: ''
                 }[layoutType],
-                react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
+                react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, container1Ref: container1Ref })))));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  height: 100%;\n"])));
 var S_RightBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 100%;\n"])));

package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts

@@ -18,6 +18,9 @@ export declare type ContentSheetProps = {
     paddingLeft?: PaddingSpacingType;
     overrideCSS?: CSSProperties;
     children: React.ReactNode;
+    loadingWidth?: string;
+    loadingHeight?: string;
+    isLoading?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export declare type StyleProps = {
@@ -53,5 +56,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: ContentSheetProps): JSX.Element;
+declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, onClick }: ContentSheetProps): JSX.Element;
 export default ContentSheet;

package/dist/src/desktop/panels/ContentSheet/ContentSheet.js

@@ -28,6 +28,7 @@ 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 styles_1 = require("../../../common/styles");
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
     white: 'ui_cpnt_sheet_base_white',
@@ -58,13 +59,19 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function ContentSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return (react_1.default.createElement(S_ContentSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+    var ContentSheetVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
+        }
+        return (react_1.default.createElement(S_ContentSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+    };
+    return ContentSheetVariation();
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -130,5 +137,6 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
 }, overrideStyle);
+var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ContentSheet;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/hybrid/components/ImageView/ImageView.d.ts

@@ -11,6 +11,7 @@ export declare type ImageViewProps = {
     scaleType?: 'fill' | 'contain' | 'cover' | 'none';
     borderMode?: 'use' | 'none';
     backgroundFillMode?: 'use' | 'none';
+    isLoading?: boolean;
 };
-declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode }: ImageViewProps) => JSX.Element;
+declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: ImageViewProps) => JSX.Element;
 export default ImageView;

package/dist/src/hybrid/components/ImageView/ImageView.js

@@ -28,10 +28,39 @@ 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 styles_1 = require("../../../common/styles");
 var ImageView = function (_a) {
-    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
-        react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
+    var LoadingAutoImageView = function () {
+        if (width && !height && !noImageHeight) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height && height !== 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height === 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
+        }
+        return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
+    };
+    var LoadingRatioImageView = (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+        react_1.default.createElement(S_LoadingRatioImageView, { ratio: ratio })));
+    var LoadingImageView = function () {
+        if (ratio === 'auto') {
+            return LoadingAutoImageView();
+        }
+        return LoadingRatioImageView;
+    };
+    var ImageViewVariation = function () {
+        if (isLoading) {
+            return LoadingImageView();
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
+            react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+    };
+    return ImageViewVariation();
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
@@ -157,5 +186,8 @@ var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (temp
     var $width = _a.$width, $height = _a.$height;
     return $width && $height && bothStyle;
 });
+var S_LoadingAutoImageViewWrapper = (0, styled_components_1.default)(S_AutoImageViewWrapper)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageViewWrapper = (0, styled_components_1.default)(S_RatioImageViewWrapper)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageView = (0, styled_components_1.default)(S_RatioImageView)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ImageView;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+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;

package/dist/src/hybrid/components/LinearProgress/LinearProgress.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type LinearProgressProps = {
+    value?: number;
+};
+declare function LinearProgress({ value }: LinearProgressProps): JSX.Element;
+export default LinearProgress;

package/dist/src/hybrid/components/LinearProgress/LinearProgress.js

@@ -0,0 +1,29 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function LinearProgress(_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b;
+    return (react_1.default.createElement(S_LinearProgressWrapper, { value: value },
+        react_1.default.createElement(S_LinearProgressBar, { value: value })));
+}
+var S_LinearProgressWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n  height: 4px;\n"], ["\n  background-color: ", ";\n  position: relative;\n  overflow: hidden;\n  height: 4px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_linear_base;
+});
+var S_LinearProgressBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  position: absolute;\n  width: ", "%;\n  height: 100%;\n  transition: width 0.2s ease 0s;\n"], ["\n  background-color: ", ";\n  position: absolute;\n  width: ", "%;\n  height: 100%;\n  transition: width 0.2s ease 0s;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_loading_linear_bar;
+}, function (_a) {
+    var value = _a.value;
+    return value;
+});
+exports.default = LinearProgress;
+var templateObject_1, templateObject_2;

package/dist/src/hybrid/components/LinearProgress/index.d.ts

@@ -0,0 +1 @@
+export { default as LinearProgress } from './LinearProgress';

package/dist/src/hybrid/components/LinearProgress/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearProgress = void 0;
+var LinearProgress_1 = require("./LinearProgress");
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return __importDefault(LinearProgress_1).default; } });

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

@@ -1,6 +1,7 @@
 import { Divider } from './Divider';
 import { Icon } from './Icon';
 import { ImageView } from './ImageView';
+import { LinearProgress } from './LinearProgress';
 import { Spacing } from './Spacing';
 import { Switch } from './Switch';
-export { Divider, Icon, ImageView, Spacing, Switch };
+export { Divider, Icon, ImageView, LinearProgress, Spacing, Switch };

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.Switch = exports.Spacing = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var Icon_1 = require("./Icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
 var ImageView_1 = require("./ImageView");
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
+var LinearProgress_1 = require("./LinearProgress");
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return LinearProgress_1.LinearProgress; } });
 var Spacing_1 = require("./Spacing");
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });
 var Switch_1 = require("./Switch");

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

@@ -1,2 +1,2 @@
-import { Divider, Icon, ImageView, Spacing, Switch } from './components';
-export { Divider, Icon, ImageView, Spacing, Switch };
+import { Divider, Icon, ImageView, LinearProgress, Spacing, Switch } from './components';
+export { Divider, Icon, ImageView, LinearProgress, Spacing, Switch };

package/dist/src/hybrid/index.js

@@ -2,11 +2,12 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.Switch = exports.Spacing = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 // component
 var components_1 = require("./components");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return components_1.ImageView; } });
+Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: function () { return components_1.LinearProgress; } });
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });

package/dist/src/mobile/components/MainButton/MainButton.d.ts

@@ -14,8 +14,10 @@ export declare type MainButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2' | 'line3';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
+    isLoading?: boolean;
+    isSubmitting?: boolean;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function MainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
+declare function MainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, isLoading, isSubmitting, onClick, onMouseDown }: MainButtonProps): JSX.Element;
 export default MainButton;

package/dist/src/mobile/components/MainButton/MainButton.js

@@ -28,6 +28,8 @@ 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");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -36,7 +38,7 @@ var TextLabel_1 = require("../TextLabel");
 // borderColorKey?: string;
 // shadow?: 'hidden' | 'visible';
 function MainButton(_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, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    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, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -47,6 +49,24 @@ function MainButton(_a) {
             onMouseDown(e);
         }
     };
+    var submittingProgressColor = function () {
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return textThemeColorLineObj[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 textStyle = {
         rlarge: 'body1Bold',
         large: 'body1Bold',
@@ -113,14 +133,24 @@ function MainButton(_a) {
             return iconStyleThemeColorObj[styleTheme];
         }
     };
-    return (react_1.default.createElement(S_Button, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
-        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: textStyle[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 MainButtonVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
+        }
+        if (isSubmitting) {
+            return (react_1.default.createElement(S_MainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
+                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+        }
+        return (react_1.default.createElement(S_MainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+            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: textStyle[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 MainButtonVariation();
 }
 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;
@@ -241,7 +271,7 @@ var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObjec
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_Button = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
 }, function (_a) {
@@ -261,5 +291,6 @@ var S_Button = styled_components_1.default.button(templateObject_17 || (template
             regular: "font-weight: " + theme.fontWeight.normal
         }[fontWeight];
 });
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = MainButton;
-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;

package/dist/src/mobile/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;