pds-dev-kit-web 0.5.13 → 0.5.14

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

@@ -33,6 +33,11 @@ var hybrid_1 = require("../../../hybrid");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
     var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
     var IconColorSelect = function () {
         if (state === 'disabled') {
             return 'ui_cpnt_button_icon_disabled';
@@ -46,7 +51,7 @@ function UploadIconButton(_a) {
         return types_1.iconStateColors[fillType];
     };
     return (react_1.default.createElement(S_UploadIconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: onClick }),
+        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 declare type UploadMainButtonProps = {
-    text?: string;
+    text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
     fontWeight?: 'bold' | 'regular';

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

@@ -33,6 +33,11 @@ var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadMainButton(_a) {
     var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, _f = _a.iconName, iconName = _f === void 0 ? 'ic_upload' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, _j = _a.accept, accept = _j === void 0 ? '*' : _j, _k = _a.multipleMode, multipleMode = _k === void 0 ? 'none' : _k, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
     var selectTextThemeColor = function () {
         if (colorTheme === 'line3' && state === 'disabled') {
             return 'ui_cpnt_button_text_darktheme_disabled';
@@ -55,7 +60,7 @@ function UploadMainButton(_a) {
         return types_1.iconFillTypeColors[fillType];
     };
     return (react_1.default.createElement(S_UploadMainButton, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, disabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: onClick }),
+        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { PDSTextType } from '../../../common';
 declare type UploadTextButtonProps = {
-    text?: string;
+    text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';

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

@@ -38,8 +38,13 @@ var textStyle = {
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, fontWeight = _a.fontWeight, _c = _a.state, state = _c === void 0 ? 'normal' : _c, _d = _a.accept, accept = _d === void 0 ? '*' : _d, _e = _a.multipleMode, multipleMode = _e === void 0 ? 'none' : _e, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
     return (react_1.default.createElement(S_UploadTextButton, { size: size, fontWeight: fontWeight, disabled: state === 'disabled' },
-        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: onClick }),
+        react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : 'usrTextBrandPrimary', btnMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {

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

@@ -1,17 +1,18 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 declare type TextObj = {
     path: string;
-    title: string;
+    title: PDSTextType;
     code: string;
 };
 declare type Props = {
     logoImageSrc?: string;
-    titleText?: string;
+    titleText?: PDSTextType;
     menuMode: 'center_text' | 'none';
     textArray?: TextObj[];
     userImageSrc?: string;
     loginInfoMode?: 'none' | 'profile' | 'button';
-    mBtnText?: string;
+    mBtnText?: PDSTextType;
     dividerType?: 'none' | 'solid';
     onClickLogo?: () => void;
     onClickLoginInfo?: () => void;

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

@@ -29,12 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Divider_1 = require("../../../hybrid/components/Divider");
-var ImageView_1 = require("../../../hybrid/components/ImageView");
-var ContextMenu_1 = __importDefault(require("../ContextMenu/ContextMenu"));
+var hybrid_1 = require("../../../hybrid");
+var ContextMenu_1 = require("../ContextMenu");
 var ContextMenuItem_1 = require("../ContextMenuItem");
-var IconButton_1 = __importDefault(require("../IconButton/IconButton"));
-var MainButton_1 = __importDefault(require("../MainButton/MainButton"));
+var IconButton_1 = require("../IconButton");
+var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
 function UserDesktopNavBar(_a) {
     var logoImageSrc = _a.logoImageSrc, titleText = _a.titleText, _b = _a.menuMode, menuMode = _b === void 0 ? 'center_text' : _b, textArray = _a.textArray, userImageSrc = _a.userImageSrc, _c = _a.loginInfoMode, loginInfoMode = _c === void 0 ? 'profile' : _c, mBtnText = _a.mBtnText, _d = _a.dividerType, dividerType = _d === void 0 ? 'none' : _d, onClickLogo = _a.onClickLogo, onClickLoginInfo = _a.onClickLoginInfo;
@@ -58,24 +57,34 @@ function UserDesktopNavBar(_a) {
         var hiddenTexts = array.slice(MAX_VISIBLE_TEXTS_NUM);
         return hiddenTexts;
     }
-    var handleOnclick = function (path) {
+    var handleClick = function (path) {
         history.push(path);
     };
+    var handleClickLogo = function () {
+        if (onClickLogo) {
+            onClickLogo();
+        }
+    };
+    var handleClickLoginInfo = function () {
+        if (onClickLoginInfo) {
+            onClickLoginInfo();
+        }
+    };
     return (react_1.default.createElement(S_UserDesktopNavBar, null,
         react_1.default.createElement(S_NavBar, null,
-            logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: onClickLogo })) : (react_1.default.createElement(S_TextWrapper, { onClick: onClickLogo },
+            logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),
             menuMode === 'center_text' && (react_1.default.createElement(S_pApps, null,
-                visibleTexts.map(function (value) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: value.path, onClick: function () { return handleOnclick(value.path); } }, currentPathName.includes(value.path) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
+                visibleTexts.map(function (value) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: value.path, onClick: function () { return handleClick(value.path); } }, currentPathName.includes(value.path) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
                 hiddenTexts.length > 0 && (react_1.default.createElement(S_MorePApps, null,
                     react_1.default.createElement(S_IconButtonWrapper, { onClick: function () { return setIsContextMenuOpen(!isContextMenuOpen); } },
-                        react_1.default.createElement(IconButton_1.default, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" })),
-                    react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.default, null, hiddenTexts.map(function (pApp) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: pApp.path, size: "medium", value: pApp.path, text: pApp.title, onClick: handleOnclick })); })))))))),
+                        react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" })),
+                    react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.ContextMenu, null, hiddenTexts.map(function (pApp) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: pApp.path, size: "medium", value: pApp.path, text: pApp.title, onClick: handleClick })); })))))))),
             react_1.default.createElement(S_ProfileWrapper, null,
-                loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: onClickLoginInfo },
-                    react_1.default.createElement(ImageView_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),
-                loginInfoMode === 'button' && (react_1.default.createElement(MainButton_1.default, { size: "small", fillType: "line", text: mBtnText, onClick: onClickLoginInfo })))),
-        dividerType === 'solid' && react_1.default.createElement(Divider_1.Divider, null)));
+                loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo },
+                    react_1.default.createElement(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),
+                loginInfoMode === 'button' && (react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtnText, onClick: handleClickLoginInfo })))),
+        dividerType === 'solid' && react_1.default.createElement(hybrid_1.Divider, null)));
 }
 var S_UserDesktopNavBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 64px;\n  background-color: ", ";\n  min-width: 1200px;\n"], ["\n  height: 64px;\n  background-color: ", ";\n  min-width: 1200px;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 declare type TextObj = {
     path: string;
-    title: string;
+    title: PDSTextType;
 };
 export declare type UserDesktopTabBarProps = {
     textArray: TextObj[];

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importStar(require("styled-components"));
-var Divider_1 = require("../../../hybrid/components/Divider");
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function UserDesktopTabBar(_a) {
     var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
@@ -45,7 +45,7 @@ function UserDesktopTabBar(_a) {
                 handleClick(value);
             } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })),
-        react_1.default.createElement(Divider_1.Divider, { direction: "horizontal" })));
+        react_1.default.createElement(hybrid_1.Divider, { direction: "horizontal" })));
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var styleTheme = _a.styleTheme;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -1,16 +1,10 @@
-import { TFunctionResult } from 'i18next';
 import React from 'react';
 import { Path } from 'react-hook-form';
-import { desktopFontSize, fontWeight } from '../../../../common/styles/theme';
-import { uiColors } from '../../../../common/styles/ui-colors';
-import { IFormValues } from '../../../../common/types/form';
-export declare type DesktopFontSize = keyof typeof desktopFontSize;
-export declare type FontWeight = keyof typeof fontWeight;
-export declare type UiColors = keyof typeof uiColors;
+import { DesktopFontSize, FontWeight, IFormValues, PDSTextType, UiColors } from '../../../../common';
 export declare type TextFieldBaseProps = {
     name: Path<IFormValues>;
-    hintText?: string | number | null | TFunctionResult;
-    defaultText?: string | number | null | TFunctionResult;
+    hintText?: PDSTextType;
+    defaultText?: PDSTextType;
     validation?: {
         [key: string]: any;
     };

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -45,10 +45,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react/jsx-no-bind */
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
-var theme_1 = require("../../../../common/styles/theme");
+var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
 function TextFieldBase(_a) {
     var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _b = _a.preventBlankMode, preventBlankMode = _b === void 0 ? 'none' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'single' : _c, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _d = _a.inputType, inputType = _d === void 0 ? 'text' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, min = _a.min, max = _a.max, _g = _a.maxLength, maxLength = _g === void 0 ? Infinity : _g, _h = _a.textSize, textSize = _h === void 0 ? 'form2' : _h, _j = _a.textWeight, textWeight = _j === void 0 ? 'normal' : _j, textPadding = _a.textPadding, _k = _a.fieldHeight, fieldHeight = _k === void 0 ? 48 : _k, _l = _a.deleteIconMode, deleteIconMode = _l === void 0 ? 'use' : _l, _m = _a.deleteIconSize, deleteIconSize = _m === void 0 ? 20 : _m, _o = _a.deleteIconColor, deleteIconColor = _o === void 0 ? 'ui_cpnt_button_icon_disabled' : _o, isFocused = _a.isFocused, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, rest = __rest(_a, ["name", "hintText", "defaultText", "validation", "preventBlankMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget"]);
@@ -175,7 +176,7 @@ function TextFieldBase(_a) {
         if (textLineType === 'single') {
             return (react_1.default.createElement(S_InputWrapper, null,
                 react_1.default.createElement(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref })),
-                deleteIconMode === 'use' && isFocused && (react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', onTouchStart: deleteValue }))));
+                deleteIconMode === 'use' && isFocused && (react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', onMouseDown: deleteValue }))));
         }
         if (textLineType === 'multi') {
             return (react_1.default.createElement(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: ref })));
@@ -215,13 +216,13 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
         }[colorTheme];
 }, function (_a) {
     var textSize = _a.textSize;
-    return theme_1.desktopFontSize[textSize];
+    return common_1.desktopFontSize[textSize];
 }, function (_a) {
     var textWeight = _a.textWeight;
-    return theme_1.fontWeight[textWeight];
+    return common_1.fontWeight[textWeight];
 }, function (_a) {
     var textSize = _a.textSize;
-    return theme_1.desktopLineHeight[textSize];
+    return common_1.desktopLineHeight[textSize];
 }, function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
@@ -249,15 +250,15 @@ var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateO
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
-        "max-height: " + Number(theme_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(theme_1.desktopLineHeight[textSize]) *
+        "max-height: " + Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
             autoMaxRows + "px;";
 }, function (_a) {
     var autoMinRows = _a.autoMinRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMinRows &&
         fieldHeight &&
-        "min-height: " + Number(theme_1.desktopFontSize[textSize].substring(0, 2)) *
-            Number(theme_1.desktopLineHeight[textSize]) *
+        "min-height: " + Number(common_1.desktopFontSize[textSize].substring(0, 2)) *
+            Number(common_1.desktopLineHeight[textSize]) *
             autoMinRows + "px;";
 });
 var S_Multi = styled_components_1.default.textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);

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

@@ -1,14 +1,9 @@
-import { TFunctionResult } from 'i18next';
 import React from 'react';
 import { Path } from 'react-hook-form';
-import fillIcons from '../../../common/assets/icons/fill';
-import lineIcons from '../../../common/assets/icons/line';
-import { IFormValues } from '../../../common/types/form';
-export declare type FillIconNameKeys = keyof typeof fillIcons;
-export declare type LineIconNameKeys = keyof typeof lineIcons;
+import { IFormValues, PDSTextType } from '../../../common';
 export declare type BlogTextFieldProps = {
-    hintText?: string | number | null | TFunctionResult;
-    defaultText?: string | number | null | TFunctionResult;
+    hintText?: PDSTextType;
+    defaultText?: PDSTextType;
     size?: 'rlarge';
     textLineType?: 'multi' | 'auto';
     multiRows?: number;

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

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 export declare type CardProps = {
-    titleText?: string;
-    descText?: string;
+    titleText?: PDSTextType;
+    descText?: PDSTextType;
     imageIconMode?: 'none' | 'image' | 'icon';
     imageSrc?: string;
     selectState?: 'unselected' | 'selected';

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

@@ -9,13 +9,7 @@ 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"));
-// TODO 추후 기획에 수정이 생길 시 icon 반영
-// import { uiColors } from '../../../common';
-// import fillIcons from '../../../common/assets/icons/fill';
-// import lineIcons from '../../../common/assets/icons/line';
-// import { Icon } from '../../../hybrid/components/Icon';
 var hybrid_1 = require("../../../hybrid");
-var ImageView_1 = require("../../../hybrid/components/ImageView");
 var TextLabel_1 = require("../TextLabel");
 function Card(_a) {
     var titleText = _a.titleText, descText = _a.descText, _b = _a.imageIconMode, imageIconMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.selectState, selectState = _c === void 0 ? 'unselected' : _c, onClick = _a.onClick;
@@ -25,7 +19,7 @@ function Card(_a) {
         }
     };
     return (react_1.default.createElement(S_CardGroups, { selectState: selectState, onClick: handleClick },
-        imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(ImageView_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
+        imageIconMode !== 'none' && (react_1.default.createElement(S_ImageIconModeBox, null, imageIconMode === 'image' && imageSrc && (react_1.default.createElement(hybrid_1.ImageView, { shapeType: "rectangle", width: "responsive", ratio: "16_9", scaleType: "cover", src: imageSrc })))),
         react_1.default.createElement(S_Content, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body2Bold", colorTheme: "sysTextPrimary" }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c" }),

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import { IFormValues } from '../../../common/types/form';
+import { IFormValues, PDSTextType } from '../../../common';
 declare type CheckboxProps = {
-    text?: string;
+    text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     name: Path<IFormValues>;

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

@@ -1,12 +1,9 @@
 /// <reference types="react" />
-import fillIcons from '../../../common/assets/icons/fill';
-import lineIcons from '../../../common/assets/icons/line';
-export declare type FillIconNameKeys = keyof typeof fillIcons;
-export declare type LineIconNameKeys = keyof typeof lineIcons;
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
     displayType?: DisplayType;
-    text?: string | number;
+    text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
     iconName?: FillIconNameKeys | LineIconNameKeys;

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

@@ -9,7 +9,7 @@ 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 Icon_1 = require("../../../hybrid/components/Icon");
+var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
     var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, _e = _a.activeChipId, activeChipId = _e === void 0 ? 0 : _e, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
@@ -18,15 +18,20 @@ function Chip(_a) {
             onClickChip();
         }
     };
+    var handleClickXMarkIcon = function () {
+        if (onClickXMarkIcon) {
+            onClickXMarkIcon();
+        }
+    };
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
                     chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
-                        react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
+                        react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
                     chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
-                        react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
+                        react_1.default.createElement(hybrid_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
                 return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", btnMode: "use", colorTheme: "sysTextPrimary" })));
@@ -39,12 +44,12 @@ function Chip(_a) {
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: "sysTextSecondary" }),
-                    react_1.default.createElement(S_XIconWrapper, { onClick: onClickXMarkIcon },
-                        react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
+                    react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
+                        react_1.default.createElement(hybrid_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
                 return (react_1.default.createElement(S_FilterSingleChip, { isActive: chipId === activeChipId, onClick: handleClick },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
-                        react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
+                        react_1.default.createElement(hybrid_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
                                 ? 'ui_cpnt_chip_fill_icon_active_01'
                                 : 'ui_cpnt_chip_line_icon_02' }))),
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 export declare type ContextMenuItemProps = {
-    text: string;
+    text: PDSTextType;
     size?: 'large' | 'medium' | 'small';
     value: string | number | boolean;
     isSelected?: boolean;

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

@@ -15,7 +15,7 @@ export declare type IconButtonProps = {
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
     onClick?: (...args: any) => any;
-    onTouchStart?: (...args: any) => any;
+    onMouseDown?: (...args: any) => any;
 };
-declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onTouchStart }: IconButtonProps): JSX.Element;
+declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -31,7 +31,17 @@ var styled_components_1 = __importStar(require("styled-components"));
 var ui_colors_1 = require("../../../common/styles/ui-colors");
 var hybrid_1 = require("../../../hybrid");
 function IconButton(_a) {
-    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _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, onTouchStart = _a.onTouchStart;
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _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 () {
+        if (onClick) {
+            onClick();
+        }
+    };
+    var handleMouseDown = function () {
+        if (onMouseDown) {
+            onMouseDown();
+        }
+    };
     var iconStateColorObj = {
         fill: 'ui_cpnt_button_icon_on_primary',
         line: 'ui_cpnt_button_icon_enabled'
@@ -52,7 +62,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return (react_1.default.createElement(S_IconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: onClick, onTouchStart: onTouchStart },
+    return (react_1.default.createElement(S_IconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
         react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {

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

@@ -1,10 +1,7 @@
 /// <reference types="react" />
-import fillIcons from '../../../common/assets/icons/fill';
-import lineIcons from '../../../common/assets/icons/line';
-export declare type FillIconNameKeys = keyof typeof fillIcons;
-export declare type LineIconNameKeys = keyof typeof lineIcons;
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type MainButtonProps = {
-    text?: string;
+    text?: PDSTextType;
     fillType?: 'fill' | 'line';
     size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
     fontWeight?: 'bold' | 'regular';
@@ -15,7 +12,7 @@ export declare type MainButtonProps = {
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
     onClick?: (...args: any) => any;
-    onTouchStart?: (...args: any) => any;
+    onMouseDown?: (...args: any) => any;
 };
-declare function MainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onTouchStart }: MainButtonProps): JSX.Element;
+declare function MainButton({ text, fillType, size, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, onClick, onMouseDown }: MainButtonProps): JSX.Element;
 export default MainButton;

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

@@ -37,7 +37,17 @@ var TextLabel_1 = require("../TextLabel");
 // borderColorKey?: string;
 // shadow?: 'hidden' | 'visible';
 function MainButton(_a) {
-    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.type, type = _g === void 0 ? 'button' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, onClick = _a.onClick, onTouchStart = _a.onTouchStart;
+    var text = _a.text, _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, fontWeight = _a.fontWeight, _d = _a.iconMode, iconMode = _d === void 0 ? 'none' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.type, type = _g === void 0 ? 'button' : _g, _h = _a.state, state = _h === void 0 ? 'normal' : _h, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function () {
+        if (onClick) {
+            onClick();
+        }
+    };
+    var handleMouseDown = function () {
+        if (onMouseDown) {
+            onMouseDown();
+        }
+    };
     var textStyle = {
         rlarge: 'body1Bold',
         large: 'body1Bold',
@@ -84,7 +94,7 @@ function MainButton(_a) {
         }
         return iconFillTypeColorObj[fillType];
     };
-    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: onClick, onTouchStart: onTouchStart },
+    return (react_1.default.createElement(S_Button, { fillType: fillType, size: size, 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" }))),

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 declare type Props = {
     titleType?: 'text' | 'profile' | 'image';
-    titleText?: string;
+    titleText?: PDSTextType;
     leftBtnMode?: 'none' | 'back' | 'menu' | 'close';
     displayType?: 'none' | 'ibtn_amount1' | 'ibtn_amount2';
     iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;

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

@@ -14,6 +14,21 @@ 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, _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.dividerType, dividerType = _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 () {
+        if (onClickLeftBtn) {
+            onClickLeftBtn();
+        }
+    };
+    var handleClickIBtn1 = function () {
+        if (onClickIBtn1) {
+            onClickIBtn1();
+        }
+    };
+    var handleClickIBtn2 = function () {
+        if (onClickIBtn2) {
+            onClickIBtn2();
+        }
+    };
     var getLeftIconName = function () {
         switch (leftBtnMode) {
             case 'back':
@@ -32,7 +47,7 @@ function MobileHeaderBar(_a) {
             return react_1.default.createElement("div", null);
         }
         return (react_1.default.createElement(S_LeftButtonBox, null,
-            react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: onClickLeftBtn, baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
+            react_1.default.createElement(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, baseColorKey: "ui_cpnt_button_fill_base_transparent" })));
     };
     var title = function () {
         switch (titleType) {
@@ -57,8 +72,8 @@ function MobileHeaderBar(_a) {
             return react_1.default.createElement("div", null);
         }
         return (react_1.default.createElement(S_IBtnBox, null,
-            displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: onClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })),
-            (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: onClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))));
+            displayType === 'ibtn_amount2' && iBtn2IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })),
+            (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))));
     };
     return (react_1.default.createElement(S_MobileHeaderBar, { hasBorder: dividerType === 'solid', expand: titleType === 'profile' },
         react_1.default.createElement(S_ButtonWrapper, null,

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 declare type TextObj = {
     path: string;
-    title: string;
+    title: PDSTextType;
 };
 export declare type MobileTabBarProps = {
     textArray: TextObj[];