pds-dev-kit-web 1.4.13 → 1.4.16

package/dist/src/common/assets/icons/line/Clip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Clip: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Clip;

package/dist/src/common/assets/icons/line/Clip.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Clip = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("g", { fill: "none", fillRule: "evenodd", strokeLinecap: "round" },
+            react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M2.8315,19.8563 C1.4605,18.3773 1.7185,16.2083 3.6035,14.4263 L13.6075,4.4233 C15.5355,2.4953 18.6605,2.4953 20.5885,4.4233 L20.5885,4.4233 C22.5155,6.3513 22.5155,9.4763 20.5885,11.4043 L12.4975,19.4943" }),
+            react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M7.3606,14.7929 L12.6506,9.5029 C13.4406,8.7129 14.7196,8.7129 15.5086,9.5029 L15.5086,9.5029 C16.2986,10.2919 16.2986,11.5709 15.5086,12.3599 L8.3606,19.5079 C5.9176,21.9519 3.8866,20.9579 2.8316,19.8559" }))));
+};
+exports.default = Clip;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -30,6 +30,7 @@ declare const lineIcons: {
     readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_check: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_checkbox_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_clip: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cont_watching: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_copy: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cs: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -33,6 +33,7 @@ var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
 var ChatCrm_1 = __importDefault(require("./ChatCrm"));
 var Check_1 = __importDefault(require("./Check"));
 var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
+var Clip_1 = __importDefault(require("./Clip"));
 var ContWatching_1 = __importDefault(require("./ContWatching"));
 var Copy_1 = __importDefault(require("./Copy"));
 var Cs_1 = __importDefault(require("./Cs"));
@@ -172,6 +173,7 @@ var lineIcons = {
     ic_chat_crm: ChatCrm_1.default,
     ic_check: Check_1.default,
     ic_checkbox_off: CheckboxOff_1.default,
+    ic_clip: Clip_1.default,
     ic_cont_watching: ContWatching_1.default,
     ic_copy: Copy_1.default,
     ic_cs: Cs_1.default,

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -168,5 +168,10 @@
     "sys_border_line_darktheme_05": "darkgrey30",
     "sys_component_base_darktheme_06": "darkgrey70",
     "sys_border_line_darktheme_06": "darkgrey70",
-    "sys_border_line_darktheme_07": "darkgrey50"
+    "sys_border_line_darktheme_07": "darkgrey50",
+    "sys_border_line_11": "darkgreen500",
+    "sys_base_dimmed_01": "black/opacity30",
+    "sys_kakao": "kakaoyellow",
+    "sys_border_line_12": "grey100",
+    "sys_component_base_08": "white"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -168,5 +168,10 @@
     "sys_border_line_darktheme_05": "darkgrey30",
     "sys_component_base_darktheme_06": "darkgrey70",
     "sys_border_line_darktheme_06": "darkgrey70",
-    "sys_border_line_darktheme_07": "darkgrey50"
+    "sys_border_line_darktheme_07": "darkgrey50",
+    "sys_border_line_11": "green500",
+    "sys_base_dimmed_01": "white/opacity30",
+    "sys_kakao": "kakaoyellow",
+    "sys_border_line_12": "grey100",
+    "sys_component_base_08": "black"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -55,5 +55,6 @@
     "grey30": "#f5f5f8",
     "opacity95": "F2",
     "darkgrey30": "#1d1d1e",
-    "opacity40": "66"
+    "opacity40": "66",
+    "kakaoyellow": "#fee500"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -513,5 +513,15 @@
     "ui_hero_description_text": "sys_text_white",
     "ui_cpnt_divider_area": "sys_border_area_01",
     "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
-    "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03"
+    "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03",
+    "ui_cpnt_list_base_area_hover": "sys_container_background_02",
+    "ui_cpnt_sheet_border_01": "sys_border_line_01",
+    "ui_cpnt_sheet_border_02": "sys_border_line_03",
+    "ui_cpnt_sheet_border_03": "sys_border_line_11",
+    "ui_43": "sys_border_line_12",
+    "ui_44": "sys_component_base_white",
+    "ui_45": "sys_component_base_08",
+    "ui_46": "sys_base_dimmed_01",
+    "ui_47": "sys_kakao",
+    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
 }

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

@@ -57,8 +57,9 @@ declare const colorSet: {
         opacity95: string;
         darkgrey30: string;
         opacity40: string;
+        kakaoyellow: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -229,8 +230,13 @@ declare const colorSet: {
         sys_component_base_darktheme_06: string;
         sys_border_line_darktheme_06: string;
         sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -401,6 +407,11 @@ declare const colorSet: {
         sys_component_base_darktheme_06: string;
         sys_border_line_darktheme_06: string;
         sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -918,6 +929,16 @@ declare const colorSet: {
         ui_cpnt_divider_area: string;
         ui_cpnt_button_white_base_hover: string;
         ui_cpnt_button_white_base_pressed: string;
+        ui_cpnt_list_base_area_hover: string;
+        ui_cpnt_sheet_border_01: string;
+        ui_cpnt_sheet_border_02: string;
+        ui_cpnt_sheet_border_03: string;
+        ui_43: string;
+        ui_44: string;
+        ui_45: string;
+        ui_46: string;
+        ui_47: string;
+        ui_cpnt_sheet_base_03: string;
     };
 };
 export default colorSet;

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

@@ -5,13 +5,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_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.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_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -514,4 +514,14 @@ export interface UITheme {
     ui_cpnt_divider_area: string;
     ui_cpnt_button_white_base_hover: string;
     ui_cpnt_button_white_base_pressed: string;
+    ui_cpnt_list_base_area_hover: string;
+    ui_cpnt_sheet_border_01: string;
+    ui_cpnt_sheet_border_02: string;
+    ui_cpnt_sheet_border_03: string;
+    ui_43: string;
+    ui_44: string;
+    ui_45: string;
+    ui_46: string;
+    ui_47: string;
+    ui_cpnt_sheet_base_03: string;
 }

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

@@ -96,16 +96,16 @@ function AdminListItem(_a) {
                 quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))),
+                            : undefined, textAlign: "center" }))),
                 (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
                     quickActionBtn2Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))),
+                            : undefined, textAlign: "center" }))),
                 react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))));
+                            : undefined, textAlign: "center" }))));
         }
     };
     var getColumnColorTheme = function (style) {

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

@@ -60,29 +60,29 @@ function Chip(_a) {
                     !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         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.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
                     isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_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: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
                     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: isActive, onClick: handleClickChip },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
@@ -156,5 +156,5 @@ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
+var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -39,13 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
+var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.d.ts

@@ -3,6 +3,7 @@ import { PDSIconType } from '../../../../common';
 declare type Props = {
     to: string;
     iconName: PDSIconType;
+    openNewTab: boolean;
 };
-declare function IconNav({ to, iconName }: Props): JSX.Element;
+declare function IconNav({ to, iconName, openNewTab }: Props): JSX.Element;
 export default IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.js

@@ -7,8 +7,8 @@ var react_1 = __importDefault(require("react"));
 var __1 = require("../../..");
 var Navigations_1 = require("../../../../common/components/Navigations");
 function IconNav(_a) {
-    var to = _a.to, iconName = _a.iconName;
-    return (react_1.default.createElement(Navigations_1.NavLink, { to: to },
+    var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab;
+    return (react_1.default.createElement(Navigations_1.NavLink, { to: to, openNewTab: openNewTab },
         react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 })));
 }
 exports.default = IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js

@@ -41,6 +41,8 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../../../hybrid");
 var ContextMenuNavs_1 = require("../ContextMenuNavs");
+var DisplayOnlyMenuItemNav_1 = __importDefault(require("./components/DisplayOnlyMenuItemNav"));
+var InternalLinkMenuItemNav_1 = __importDefault(require("./components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
 // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
@@ -55,12 +57,17 @@ function MenuItemNav(_a) {
         setIsContextOpen(false);
     }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType },
             menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
-            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })),
             isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
         showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
 }
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"])), function (_a) {
+    var type = _a.type;
+    return (type === 'DISPLAY_ONLY' ? 'default' : 'pointer');
+});
 exports.default = MenuItemNav;
 var templateObject_1;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function DisplayOnlyMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default DisplayOnlyMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.js

@@ -0,0 +1,32 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function DisplayOnlyMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: false }),
+                ";"));
+        }
+        if (menu.iconName) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: false })));
+        }
+    }
+    return (react_1.default.createElement(DeactivateLinkBox, null, isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name }))));
+}
+var DeactivateLinkBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n"], ["\n  pointer-events: none;\n  width: max-content;\n"])));
+exports.default = DisplayOnlyMenuItemNav;
+var templateObject_1;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -0,0 +1,55 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function WebMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
+    var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
+    var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/:activeKey");
+    var internalPath = getInternalLink(basePath, menu.conversionLinkSrc);
+    var isActive = (0, react_1.useMemo)(function () {
+        return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.pAppCode;
+    }, [menu, match, activeMatch]);
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return react_1.default.createElement(ImageIconNav_1.default, { to: internalPath, iconSrc: menu.iconSrc, openNewTab: false });
+        }
+        if (menu.iconName) {
+            return react_1.default.createElement(IconNav_1.default, { to: internalPath, iconName: menu.iconName, openNewTab: false });
+        }
+    }
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+}
+function getInternalLink(basePath, url) {
+    var pathname = new URL(url).pathname;
+    var splitPath = pathname.split(basePath);
+    return basePath + splitPath.pop();
+}
+exports.default = WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -41,7 +41,7 @@ function PAppMenuItemNav(_a) {
             return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName });
+            return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName, openNewTab: false }));
         }
     }
     return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
     isContextMenu?: boolean;
+    openNewTab: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu, openNewTab }: Props): JSX.Element;
 export default WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.js

@@ -8,15 +8,15 @@ var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, openNewTab = _a.openNewTab;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: openNewTab }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
+            return (react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: openNewTab }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts

@@ -1,7 +1,7 @@
 import { PDSIconType } from '../../../common';
 export type { DynamicDesktopTemplateType, TemplateNamesType, TemplatesDataType } from './templates/types';
 export declare type ParsedNode = {
-    menuItemType: 'NAV_P_APP' | 'WEB_LINK';
+    menuItemType: menuItemTypes;
     type: 'GENERAL_NODE';
     name: string;
     iconSrc?: string;
@@ -11,3 +11,4 @@ export declare type ParsedNode = {
     conversionLinkSrc?: string;
     parsedNodes: Array<ParsedNode>;
 };
+export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY';

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

@@ -26,7 +26,6 @@ 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 react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../common/components");
@@ -34,7 +33,6 @@ var IconButton_1 = require("../IconButton");
 function EditApplyTextField(_a) {
     var _b;
     var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, reset = _l.reset, _m = _l.formState, errors = _m.errors, isSubmitSuccessful = _m.isSubmitSuccessful;
     var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
     var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
@@ -157,7 +155,7 @@ function EditApplyTextField(_a) {
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })))),
-            ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (react_1.default.createElement(S_Error, { isFocused: isFocused }, t(errors[name].message))))));
+            ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, { isFocused: isFocused }, errors[name].message))));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;

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

@@ -22,19 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
+var HINT = 'HINT_VALUE';
 function Select(_a) {
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var handleClick = function () {
-        state === 'normal' && setIsFocused(true);
-    };
-    var handleBlur = function () { return setIsFocused(false); };
+    var _b;
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
     var handleChange = function (e) {
-        setIsFocused(false);
         if (onChange) {
             onChange(e);
         }
@@ -55,11 +54,11 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
-        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
-            react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
+        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT },
+            hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
             valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
@@ -106,7 +105,7 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
+var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });

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

@@ -26,7 +26,6 @@ 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 react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
@@ -43,7 +42,6 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
     var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
     var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
@@ -119,7 +117,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { UiColors } from '../../../common';
+export declare type Props = {
+    width: string;
+    height: string;
+    backgroundColor: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    backgroundColorKey: UiColors;
+    borderMode: 'none' | 'use';
+    borderWidth: 1 | 2;
+    borderColor: 'grey' | 'blue' | 'green';
+    borderColorKey: UiColors;
+    shapeType: 'rectangle' | 'round';
+    radius: 8 | 16 | 24;
+    overrideCSS: CSSProperties;
+};
+declare function ContentSheet({ width, height, backgroundColor, backgroundColorKey, borderMode, borderColor, borderColorKey, shapeType, radius }: Props): JSX.Element;
+export default ContentSheet;

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function ContentSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'base3' : _b, backgroundColorKey = _a.backgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'grey' : _d, borderColorKey = _a.borderColorKey, _e = _a.shapeType, shapeType = _e === void 0 ? 'rectangle' : _e, _f = _a.radius, radius = _f === void 0 ? 24 : _f;
+    return react_1.default.createElement("div", null, "ContentSheet");
+}
+exports.default = ContentSheet;

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

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

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

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

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

@@ -60,29 +60,29 @@ function Chip(_a) {
                     !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         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.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
                     isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_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: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
                     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: isActive, onClick: handleClickChip },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
@@ -153,5 +153,5 @@ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
+var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -22,19 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
+var HINT = 'HINT_VALUE';
 function Select(_a) {
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var handleClick = function () {
-        state === 'normal' && setIsFocused(true);
-    };
-    var handleBlur = function () { return setIsFocused(false); };
+    var _b;
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
     var handleChange = function (e) {
-        setIsFocused(false);
         if (onChange) {
             onChange(e);
         }
@@ -51,11 +50,11 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
-        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
-            react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
+        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT },
+            hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
             valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));

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

@@ -26,7 +26,6 @@ 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 react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
@@ -43,7 +42,6 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
     var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
     var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
@@ -119,7 +117,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.4.13",
+  "version": "1.4.16",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,8 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.13]
+## [v1.4.16]
 
 ### Component
-* Icon
-  * ic_internal line추가
-* Switch
-  * disabled 상태일 때의 커서를 기본 상태로 변경
+* DynamicDesktopNavbar
+  * 'INTERNAL_LINK'유형 개선