pds-dev-kit-web 0.5.12 → 0.5.16

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

@@ -29,7 +29,6 @@ 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 TextLabel_1 = require("../TextLabel");
 function UserDesktopTabBar(_a) {
     var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
@@ -44,8 +43,7 @@ function UserDesktopTabBar(_a) {
         react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, styleTheme: styleTheme, isActive: pathname === value.path, onClick: function () {
                 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(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); }))));
 }
 var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
@@ -56,19 +54,25 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
             return mainStyle;
     }
 });
-var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"])), function (_a) {
+var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  background-color: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var isActive = _a.isActive, theme = _a.theme;
     return isActive && theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
-    var isActive = _a.isActive, theme = _a.theme;
-    return isActive && "2px solid " + theme.ui_cpnt_tabbar_border_active_indicator_primary;
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
 });
 exports.default = UserDesktopTabBar;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -5,7 +5,7 @@ import { Chip } from './Chip';
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuItem } from './ContextMenuItem';
 import { DesktopHeaderBar } from './DesktopHeaderBar';
-import { DesktopTapBar } from './DesktopTabBar';
+import { DesktopTabBar } from './DesktopTabBar';
 import { EditApplyTextField } from './EditApplyTextField';
 import { FilterBar } from './FilterBar';
 import { FloatingActionButton } from './FloatingActionButton';
@@ -25,4 +25,4 @@ import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopHeaderBar, DesktopTapBar, EditApplyTextField, FilterBar, FloatingActionButton, Hero, IconButton, ImageSlide, MainButton, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar };
+export { Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopHeaderBar, DesktopTabBar, EditApplyTextField, FilterBar, FloatingActionButton, Hero, IconButton, ImageSlide, MainButton, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DesktopTapBar = exports.DesktopHeaderBar = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = void 0;
+exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = void 0;
 var Card_1 = require("./Card");
 Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
 var CardList_1 = require("./CardList");
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: funct
 var DesktopHeaderBar_1 = require("./DesktopHeaderBar");
 Object.defineProperty(exports, "DesktopHeaderBar", { enumerable: true, get: function () { return DesktopHeaderBar_1.DesktopHeaderBar; } });
 var DesktopTabBar_1 = require("./DesktopTabBar");
-Object.defineProperty(exports, "DesktopTapBar", { enumerable: true, get: function () { return DesktopTabBar_1.DesktopTapBar; } });
+Object.defineProperty(exports, "DesktopTabBar", { enumerable: true, get: function () { return DesktopTabBar_1.DesktopTabBar; } });
 var EditApplyTextField_1 = require("./EditApplyTextField");
 Object.defineProperty(exports, "EditApplyTextField", { enumerable: true, get: function () { return EditApplyTextField_1.EditApplyTextField; } });
 var FilterBar_1 = require("./FilterBar");

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

@@ -9,5 +9,5 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTapBar as D_DesktopTapBar, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar } from './components';
-export { D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopHeaderBar, D_DesktopTapBar, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_IconButton, D_ImageSlide, D_MainButton, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar };
+import { Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar } from './components';
+export { D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopHeaderBar, D_DesktopTabBar, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_IconButton, D_ImageSlide, D_MainButton, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar };

package/dist/src/desktop/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DesktopTapBar = exports.D_DesktopHeaderBar = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -31,7 +31,7 @@ Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
 Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return components_1.DesktopHeaderBar; } });
-Object.defineProperty(exports, "D_DesktopTapBar", { enumerable: true, get: function () { return components_1.DesktopTapBar; } });
+Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return components_1.DesktopTabBar; } });
 Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return components_1.EditApplyTextField; } });
 Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return components_1.FilterBar; } });
 Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });

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

@@ -47,7 +47,7 @@ function Switch(_a) {
         react_1.default.createElement(S_Input, { type: "checkbox", hidden: true, id: name, checked: checked, disabled: state === 'disabled', onChange: handleChange }),
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }
-var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"], ["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return disabled ? theme.ui_cpnt_selcontrols_base_off_disabled : theme.ui_cpnt_selcontrols_base_off;

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[];

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

@@ -10,7 +10,6 @@ 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 = __importDefault(require("styled-components"));
-var Divider_1 = require("../../../hybrid/components/Divider");
 var TextLabel_1 = require("../TextLabel");
 function MobileTabBar(_a) {
     var textArray = _a.textArray;
@@ -22,25 +21,30 @@ function MobileTabBar(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.title, isActive: pathname === value.path, onClick: function () {
+        react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () {
                 handleClick(value);
             } },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })),
-        react_1.default.createElement(Divider_1.Divider, { direction: "horizontal" })));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); }))));
 }
-var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 48px;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"])), function (_a) {
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  background-color: ", ";\n  padding: 0 ", ";\n  flex: 1;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive, theme = _a.theme;
     return isActive && theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
-    var isActive = _a.isActive, theme = _a.theme;
-    return isActive && "2px solid " + theme.ui_cpnt_tabbar_border_active_indicator_primary;
+    var theme = _a.theme;
+    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
+}, function (_a) {
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
 });
-var S_TabBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
 });
 exports.default = MobileTabBar;
 var templateObject_1, templateObject_2;

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { PDSTextType } from '../../../common';
 declare type RadioProps = {
-    text?: string;
+    text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
     checked?: boolean;