pds-dev-kit-web 0.5.13 → 0.5.17

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1,59 +1,4 @@
 declare const colorSet: {
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -181,6 +126,61 @@ declare const colorSet: {
         sys_component_base_black_opacity30: string;
         sys_area_background: string;
     };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;

package/dist/src/common/styles/colorSet/index.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };

package/dist/src/common/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './form';
+export * from './icon';
+export * from './styled-components';
+export * from './text';
+export * from './uiColors';

package/dist/src/common/types/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form"), exports);
+__exportStar(require("./icon"), exports);
+__exportStar(require("./styled-components"), exports);
+__exportStar(require("./text"), exports);
+__exportStar(require("./uiColors"), exports);

package/dist/src/common/types/styled-components.d.ts

@@ -1,3 +1,4 @@
+import { desktopFontSize, fontWeight } from '../styles/theme';
 export interface PdsDevKitTheme {
     fontWeight: {
         normal: string;
@@ -84,3 +85,5 @@ export interface PdsDevKitTheme {
         spacingN: string;
     };
 }
+export declare type DesktopFontSize = keyof typeof desktopFontSize;
+export declare type FontWeight = keyof typeof fontWeight;

package/dist/src/common/types/text.d.ts

@@ -0,0 +1,2 @@
+import { TFunctionResult } from 'i18next';
+export declare type PDSTextType = number | TFunctionResult;

package/dist/src/common/types/text.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/desktop/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/desktop/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"]);
@@ -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 &&
@@ -241,7 +242,7 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     var textPadding = _a.textPadding;
     return textPadding && "padding: " + textPadding;
 });
-var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 });
@@ -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/desktop/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/desktop/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/desktop/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/desktop/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/desktop/components/Chip/Chip.js

@@ -18,6 +18,11 @@ function Chip(_a) {
             onClickChip();
         }
     };
+    var handleClickXMarkIcon = function () {
+        if (onClickXMarkIcon) {
+            onClickXMarkIcon();
+        }
+    };
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
@@ -39,7 +44,7 @@ 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(S_XIconWrapper, { onClick: handleClickXMarkIcon },
                         react_1.default.createElement(Icon_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 },

package/dist/src/desktop/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/desktop/components/DesktopHeaderBar/DesktopHeaderBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 declare const defaultProps: {
     size: "large" | "xlarge";
     leftDisplayType: "text" | "icon" | "back";
@@ -8,9 +8,9 @@ declare const defaultProps: {
 };
 declare type DefaultProps = Readonly<typeof defaultProps>;
 declare type OptionalProps = {
-    text?: string;
+    text?: PDSTextType;
     iconName?: FillIconNameKeys | LineIconNameKeys;
-    mBtnText?: string;
+    mBtnText?: PDSTextType;
     onClickLeftBtn?: () => void;
     onClickRightBtn?: () => void;
 };
@@ -19,7 +19,7 @@ declare type Complete<T> = {
 };
 declare type TextType = {
     leftDisplayType: 'text';
-    text: string;
+    text: PDSTextType;
 };
 declare type IconType = {
     leftDisplayType: 'icon';
@@ -32,7 +32,7 @@ declare type CloseType = {
 } & Complete<Pick<OptionalProps, 'onClickRightBtn'>>;
 declare type MBtnType = {
     rightBtnMode: 'mbtn';
-    mBtnText: string;
+    mBtnText: PDSTextType;
 } & Complete<Pick<OptionalProps, 'onClickRightBtn'>>;
 declare type DesktopHeaderBarProps = OptionalProps & (TextType | IconType | BackType | CloseType | MBtnType) & Partial<DefaultProps>;
 declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, rightBtnMode, mBtnText, dividerType, onClickLeftBtn, onClickRightBtn }: DesktopHeaderBarProps): JSX.Element;

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

@@ -21,6 +21,16 @@ var defaultProps = {
 };
 function DesktopHeaderBar(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'xlarge' : _b, _c = _a.leftDisplayType, leftDisplayType = _c === void 0 ? 'text' : _c, iconName = _a.iconName, _d = _a.rightBtnMode, rightBtnMode = _d === void 0 ? 'none' : _d, mBtnText = _a.mBtnText, _e = _a.dividerType, dividerType = _e === void 0 ? 'none' : _e, onClickLeftBtn = _a.onClickLeftBtn, onClickRightBtn = _a.onClickRightBtn;
+    var handleClickLeftBtn = function () {
+        if (onClickLeftBtn) {
+            onClickLeftBtn();
+        }
+    };
+    var handleClickRightBtn = function () {
+        if (onClickRightBtn) {
+            onClickRightBtn();
+        }
+    };
     var leftDisplayMode = function () {
         switch (leftDisplayType) {
             case 'icon': {
@@ -29,7 +39,7 @@ function DesktopHeaderBar(_a) {
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" })));
             }
             case 'back': {
-                return (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", fillType: "fill", iconFillType: "line", iconName: "ic_arrow_left", onClick: onClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
+                return (react_1.default.createElement(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", fillType: "fill", iconFillType: "line", iconName: "ic_arrow_left", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
             }
             case 'text': {
                 return;
@@ -39,11 +49,11 @@ function DesktopHeaderBar(_a) {
     var rightButtonMode = function () {
         switch (rightBtnMode) {
             case 'close': {
-                return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconFillType: "line", onClick: onClickRightBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
+                return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: "ic_xmark", iconFillType: "line", onClick: handleClickRightBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
             }
             case 'mbtn': {
                 return (react_1.default.createElement(react_1.default.Fragment, null, size === 'xlarge' && (react_1.default.createElement(S_MainButtonWrapper, null,
-                    react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "small", fillType: "line", onClick: onClickRightBtn })))));
+                    react_1.default.createElement(MainButton_1.MainButton, { text: mBtnText, size: "small", fillType: "line", onClick: handleClickRightBtn })))));
             }
             case 'none': {
                 return;

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import { PDSTextType } from '../../../common';
 declare type TextObj = {
-    title: string;
+    title: PDSTextType;
     path: string;
     subArray?: {
-        title: string;
+        title: PDSTextType;
         path: string;
     }[];
 };

package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.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 DesktopTabBar(_a) {
     var textArray = _a.textArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b;
@@ -42,7 +41,7 @@ function DesktopTabBar(_a) {
     };
     var textLabel = function (value, isSubText) {
         if (isSubText) {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
+            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', btnMode: "use" }));
         }
         if (styleTheme === 'content') {
             return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
@@ -52,25 +51,15 @@ function DesktopTabBar(_a) {
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_TabBox, { styleTheme: styleTheme },
-            textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, styleTheme: styleTheme, isActive: pathname.includes(value.path), onClick: function () {
+        react_1.default.createElement(S_TabBox, null,
+            textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), onClick: function () {
                     handleClick(value);
                 } },
                 textLabel(value, false),
                 value.subArray && pathname.includes(value.path) && (react_1.default.createElement(S_SubTabBox, null, value.subArray.map(function (subValue) { return (react_1.default.createElement(S_SubWrapper, { key: subValue.path }, textLabel(subValue, true))); }))))); }),
-            textArray.map(function (value) { return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, null); })),
-        react_1.default.createElement(Divider_1.Divider, { direction: "horizontal" })));
+            textArray.map(function (value) { return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, null); }))));
 }
-var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), function (_a) {
-    var styleTheme = _a.styleTheme;
-    switch (styleTheme) {
-        case 'content':
-            return contentStyle;
-        default:
-            return mainStyle;
-    }
-});
-var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-end;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"], ["\n  align-items: flex-end;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"])), function (_a) {
+var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\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: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\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.spacingD;
 }, function (_a) {
@@ -79,42 +68,30 @@ var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
-}, 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 contentStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-end;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"], ["\n  align-items: flex-end;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    border-bottom: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
 }, 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;
+    var isActive = _a.isActive;
+    return !isActive && "display: none;";
 });
-var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n"])), function (_a) {
+var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), mediumStyle);
+var S_TabBox = 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  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\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;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_SubBackground = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
+var S_SubBackground = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
-var S_SubWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
+var S_SubTabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
+var S_SubWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -122,4 +99,4 @@ var S_SubWrapper = styled_components_1.default.div(templateObject_7 || (template
     return theme.spacing.spacingA;
 });
 exports.default = DesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1 +1 @@
-export { default as DesktopTapBar } from './DesktopTabBar';
+export { default as DesktopTabBar } from './DesktopTabBar';

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

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopTapBar = void 0;
+exports.DesktopTabBar = void 0;
 var DesktopTabBar_1 = require("./DesktopTabBar");
-Object.defineProperty(exports, "DesktopTapBar", { enumerable: true, get: function () { return __importDefault(DesktopTabBar_1).default; } });
+Object.defineProperty(exports, "DesktopTabBar", { enumerable: true, get: function () { return __importDefault(DesktopTabBar_1).default; } });

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

@@ -1,14 +1,10 @@
 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 { PDSTextType, IFormValues } from '../../../common';
 export declare type EditApplyTextFieldProps = {
     name: Path<IFormValues>;
-    hintText?: string | number | null;
-    defaultText?: string | number | null;
+    hintText?: PDSTextType;
+    defaultText?: PDSTextType;
     validation?: {
         [key: string]: any;
     };
@@ -25,8 +21,9 @@ export declare type EditApplyTextFieldProps = {
     min?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onClickSubmitBtn?: (...args: any) => any;
     onFocus?: () => void;
     onTarget?: () => void;
 };
-declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, onBlur, onChange, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
+declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
 export default EditApplyTextField;