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

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

@@ -0,0 +1,89 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function FloatingActionButton(_a) {
+    var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var iconColor = function () {
+        if (state === 'disable') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        return 'ui_cpnt_button_icon_on_primary';
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown },
+            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
+        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown },
+            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })),
+            displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })))))));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n  border-radius: 24px;\n"], ["\n  height: 48px;\n  width: 48px;\n  border-radius: 24px;\n"])));
+var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 64px;\n  width: 64px;\n  border-radius: 32px;\n"], ["\n  height: 64px;\n  width: 64px;\n  border-radius: 32px;\n"])));
+var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation3;
+}, 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  );";
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disable' && disabled;
+});
+var S_ButtonIconOnly = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: none;\n  ", ";\n  ", ";\n"], ["\n  padding: none;\n  ", ";\n  ", ";\n"])), floatingActionButtonStyle, function (_a) {
+    var size = _a.size;
+    return size && { large: large, xlarge: xlarge }[size];
+});
+var S_Button = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding: ", ";\n  border-radius: 14px;\n  ", ";\n"], ["\n  height: 48px;\n  padding: ", ";\n  border-radius: 14px;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return "0 " + theme.spacing.spacingE;
+}, floatingActionButtonStyle);
+exports.default = FloatingActionButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/mobile/components/FloatingActionButton/index.d.ts

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

package/dist/src/mobile/components/FloatingActionButton/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.FloatingActionButton = void 0;
+var FloatingActionButton_1 = require("./FloatingActionButton");
+Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return __importDefault(FloatingActionButton_1).default; } });

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

@@ -0,0 +1,20 @@
+import React, { AnimationEventHandler } from 'react';
+import { PDSTextType, UiColors } from '../../../common';
+import { LottieIconNameKeys } from '../../../common/assets/lotties';
+export declare type LottieReactionButtonProps = {
+    text?: PDSTextType;
+    actionText?: PDSTextType;
+    iconName?: LottieIconNameKeys;
+    displayType?: 'icon_only' | 'icon_text';
+    backgroundColorTheme?: 'base1' | 'base2' | 'base3' | 'base4' | 'base5';
+    overrideBackgroundColorKey?: UiColors;
+    state?: 'normal' | 'view_only' | 'disabled';
+    type?: 'button' | 'submit';
+    onTouchStart?: (e: React.TouchEvent<HTMLButtonElement>) => void;
+    onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onComplete?: AnimationEventHandler | null;
+};
+declare function LottieReactionButton({ text, actionText, iconName, displayType, backgroundColorTheme, overrideBackgroundColorKey, type, state, onTouchStart, onTouchEnd, onMouseDown, onClick, onComplete }: LottieReactionButtonProps): JSX.Element;
+export default LottieReactionButton;

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

@@ -0,0 +1,157 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var numberHelper_1 = require("../../../common/utils/numberHelper");
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function LottieReactionButton(_a) {
+    var text = _a.text, actionText = _a.actionText, _b = _a.iconName, iconName = _b === void 0 ? 'ic_lottie_heart' : _b, _c = _a.displayType, displayType = _c === void 0 ? 'icon_text' : _c, _d = _a.backgroundColorTheme, backgroundColorTheme = _d === void 0 ? 'base1' : _d, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, onMouseDown = _a.onMouseDown, onClick = _a.onClick, onComplete = _a.onComplete;
+    var lottieRef = (0, react_1.useRef)(null);
+    var convertFormatHelper = function (value) {
+        if (typeof value !== 'number')
+            return value;
+        return (0, numberHelper_1.formatCompactNumber)(value);
+    };
+    var convertFormatText = convertFormatHelper(text);
+    var _g = (0, react_1.useState)(false), isAnimation = _g[0], setIsAnimation = _g[1];
+    var _h = (0, react_1.useState)(convertFormatText), textWord = _h[0], setTextWord = _h[1];
+    var handleTouchStart = function (e) {
+        setIsAnimation(false);
+        if (onTouchStart) {
+            onTouchStart(e);
+        }
+    };
+    var handleTouchEnd = function (e) {
+        var _a, _b;
+        setIsAnimation(true);
+        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
+        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
+        if (onTouchEnd) {
+            onTouchEnd(e);
+        }
+        e.preventDefault();
+    };
+    var handleMouseDown = function (e) {
+        setIsAnimation(false);
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var handleClick = function (e) {
+        var _a, _b;
+        setIsAnimation(true);
+        (_a = lottieRef.current) === null || _a === void 0 ? void 0 : _a.playSegments([[0, 30]], true);
+        setTextWord((_b = actionText !== null && actionText !== void 0 ? actionText : convertFormatText) !== null && _b !== void 0 ? _b : '');
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleLottieIconComplete = function (e) {
+        setTextWord(convertFormatText);
+        if (onComplete) {
+            onComplete(e);
+        }
+    };
+    return (react_1.default.createElement(S_Button, { displayType: displayType, backgroundColorTheme: backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, state: state, disabled: state === 'disabled' || state === 'view_only', type: type, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onClick: handleClick, isAnimation: isAnimation },
+        react_1.default.createElement(hybrid_1.LottieIcon, { iconName: iconName, lottieRef: lottieRef, autoplayMode: "none", loopMode: "none", onComplete: handleLottieIconComplete }),
+        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: textWord, singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })))));
+}
+var disabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: default;\n"], ["\n  background-color: ", ";\n  cursor: default;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var normal = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n"], ["\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\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 view_only = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var buttonAnimation = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"], ["\n  @keyframes gelatine {\n    from,\n    to {\n      transform: scale(1, 1);\n    }\n    25% {\n      transform: scale(0.95, 1.1);\n    }\n    50% {\n      transform: scale(1.05, 0.9);\n    }\n    75% {\n      transform: scale(0.97, 1.05);\n    }\n  }\n\n  animation: gelatine 1s 1;\n"])));
+var icon_only = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  width: 32px;\n  min-height: 32px;\n  min-width: 32px;\n  border-radius: 16px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var icon_text = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-height: 32px;\n  min-width: 64px;\n  border-radius: 16px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var base1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_01;
+});
+var base2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_02;
+});
+var base3 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_03;
+});
+var base4 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_04;
+});
+var base5 = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_lottiereactionbutton_base_05;
+});
+var overrideStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+});
+var S_Button = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var backgroundColorTheme = _a.backgroundColorTheme;
+    return backgroundColorTheme &&
+        {
+            base1: base1,
+            base2: base2,
+            base3: base3,
+            base4: base4,
+            base5: base5
+        }[backgroundColorTheme];
+}, function (_a) {
+    var isAnimation = _a.isAnimation;
+    return isAnimation && buttonAnimation;
+}, function (_a) {
+    var displayType = _a.displayType;
+    return displayType &&
+        {
+            icon_only: icon_only,
+            icon_text: icon_text
+        }[displayType];
+}, function (_a) {
+    var overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && overrideStyle;
+}, function (_a) {
+    var state = _a.state;
+    return state &&
+        {
+            normal: normal,
+            disabled: disabled,
+            view_only: view_only
+        }[state];
+});
+exports.default = LottieReactionButton;
+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;

package/dist/src/mobile/components/LottieReactionButton/index.d.ts

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

package/dist/src/mobile/components/LottieReactionButton/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.LottieReactionButton = void 0;
+var LottieReactionButton_1 = require("./LottieReactionButton");
+Object.defineProperty(exports, "LottieReactionButton", { enumerable: true, get: function () { return __importDefault(LottieReactionButton_1).default; } });

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type MainButtonProps = {
     text?: PDSTextType;
@@ -14,8 +14,10 @@ export declare type MainButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2' | 'line3';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    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,17 +38,35 @@ 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 handleClick = function () {
+    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();
+            onClick(e);
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            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/MobileAlertDialog/MobileAlertDialog.d.ts

@@ -15,9 +15,9 @@ declare type MobileAlertDialogProps = {
     tBtn1Type?: 'button' | 'submit';
     tBtn2Type?: 'button' | 'submit';
     tBtn3Type?: 'button' | 'submit';
-    onClickTBtn1?: () => any;
-    onClickTBtn2?: () => any;
-    onClickTBtn3?: () => any;
+    onClickTBtn1?: () => void;
+    onClickTBtn2?: () => void;
+    onClickTBtn3?: () => void;
 };
 declare function MobileAlertDialog({ iconMode, titleText, contentText, btnStack, btnMode, tBtn1Text, tBtn2Text, tBtn3Text, tBtn1State, tBtn2State, tBtn3State, tBtn1Type, tBtn2Type, tBtn3Type, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: MobileAlertDialogProps): React.ReactPortal;
 export default MobileAlertDialog;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 declare type Props = {
     titleType?: 'text' | 'profile' | 'image';
@@ -18,9 +18,9 @@ declare type Props = {
     iBtn1Type?: 'submit' | 'reset' | 'button';
     iBtn2State?: 'normal' | 'disabled';
     iBtn2Type?: 'submit' | 'reset' | 'button';
-    onClickLeftBtn?: () => void;
-    onClickIBtn1?: () => void;
-    onClickIBtn2?: () => void;
+    onClickLeftBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClickIBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClickIBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;

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

@@ -14,19 +14,19 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function MobileHeaderBar(_a) {
     var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
-    var handleClickLeftBtn = function () {
+    var handleClickLeftBtn = function (e) {
         if (onClickLeftBtn) {
-            onClickLeftBtn();
+            onClickLeftBtn(e);
         }
     };
-    var handleClickIBtn1 = function () {
+    var handleClickIBtn1 = function (e) {
         if (onClickIBtn1) {
-            onClickIBtn1();
+            onClickIBtn1(e);
         }
     };
-    var handleClickIBtn2 = function () {
+    var handleClickIBtn2 = function (e) {
         if (onClickIBtn2) {
-            onClickIBtn2();
+            onClickIBtn2(e);
         }
     };
     var getLeftIconName = function () {

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type ReactionButtonProps = {
-    text: PDSTextType;
+    text?: PDSTextType;
     iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';
     status?: 'default' | 'select';
     colorTheme?: 'none' | 'dark';
-    onClick?: (e?: Event, ...args: any) => void;
-    onMouseDown?: (e?: Event, ...args: any) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function ReactionButton({ text, iconName, status, colorTheme, onClick, onMouseDown }: ReactionButtonProps): JSX.Element;
 export default ReactionButton;

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

@@ -28,18 +28,19 @@ 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 numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function ReactionButton(_a) {
     var text = _a.text, _b = _a.iconName, iconName = _b === void 0 ? 'ic_thumb_up' : _b, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-    var handleClick = function () {
+    var handleClick = function (e) {
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            onMouseDown(e);
         }
     };
     var IconColorByStatus = function () {
@@ -79,28 +80,17 @@ function ReactionButton(_a) {
         }
         return;
     };
-    // TODO : 추 후 유틸로 편성 예정
-    var convertFormatHelper = function (value) {
+    var convertTextFormatHelper = function (value) {
         if (typeof value !== 'number')
             return value;
-        switch (true) {
-            case value >= 1000 && value < 1000000:
-                return Math.floor(value / 1000)
-                    .toString()
-                    .replace(/\.0$/, '') + "K";
-            case value >= 1000000:
-                return Math.floor(value / 1000000)
-                    .toString()
-                    .replace(/\.0$/, '') + "M";
-            default:
-                return value;
-        }
+        return (0, numberHelper_1.formatCompactNumber)(value);
     };
     return (react_1.default.createElement(S_ReactionButton, { onClick: handleClick, onMouseDown: handleMouseDown },
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
         react_1.default.createElement(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: convertFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }),
+        text && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
 }
 var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"])));

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { PDSTextType } from '../../../common';
 export declare type TextButtonProps = {
     text?: PDSTextType;
@@ -8,7 +8,7 @@ export declare type TextButtonProps = {
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
     colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
-    onClick?: (...args: any) => any;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

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

@@ -66,9 +66,9 @@ var textColor = {
 };
 function TextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
-    var handleClick = function () {
+    var handleClick = function (e) {
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
     return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),

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

@@ -23,7 +23,7 @@ export declare type TextFieldProps = {
     iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
-    colorTheme?: 'none' | 'dark';
+    colorTheme?: 'none' | 'dark' | 'transparent';
     max?: number;
     maxLength?: number;
     min?: number;