pds-dev-kit-web 1.3.5 → 1.3.8

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
-export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors };
+import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
+export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
 export { theme };
 export { Form };

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

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

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

@@ -0,0 +1,38 @@
+"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 DesignPreference = 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("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
+            react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+                react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.0742,15.9112 C12.1572,16.6692 10.8122,18.4402 10.8122,20.5052 C10.8122,20.9592 10.8782,21.3992 11.0002,21.8172 C5.8122,21.4682 1.7242,17.5842 1.7242,12.8452 C1.7242,7.8752 6.2192,3.8462 11.7632,3.8462 C13.6432,3.8462 15.4022,4.3092 16.9062,5.1152 M20.6709,8.6912 C21.3939,9.9342 21.8029,11.3462 21.8029,12.8452 C21.8029,14.5302 21.2849,16.1062 20.3859,17.4542 C19.6069,16.5162 18.4769,15.8432 17.1799,15.6092" }),
+                react_1.default.createElement("path", { fill: color, d: "M8.9422,10.4341 C8.9422,9.3141 8.0342,8.4061 6.9142,8.4061 C5.7952,8.4061 4.8872,9.3141 4.8872,10.4341 C4.8872,11.5541 5.7952,12.4621 6.9142,12.4621 C8.0342,12.4621 8.9422,11.5541 8.9422,10.4341 M13.5869,7.8135 C13.5869,6.8415 12.7989,6.0535 11.8269,6.0535 C10.8559,6.0535 10.0679,6.8415 10.0679,7.8135 C10.0679,8.7855 10.8559,9.5735 11.8269,9.5735 C12.7989,9.5735 13.5869,8.7855 13.5869,7.8135 M9.2917,16.0693 C9.2917,15.0973 8.5037,14.3093 7.5317,14.3093 C6.5607,14.3093 5.7727,15.0973 5.7727,16.0693 C5.7727,17.0413 6.5607,17.8293 7.5317,17.8293 C8.5037,17.8293 9.2917,17.0413 9.2917,16.0693" }),
+                react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.7283,9.5905 C18.2343,9.7555 18.5663,10.0895 18.5163,10.5975 C18.5083,10.6775 18.4923,10.7575 18.4663,10.8375 L15.2993,20.2945 C15.1073,20.8805 14.4773,21.1985 13.8923,21.0075 C13.3073,20.8155 12.9883,20.1855 13.1803,19.6005 L16.3473,10.1425 C16.5393,9.5575 17.1433,9.3985 17.7283,9.5905 Z M18.6588,1.8879 C18.6588,1.8879 23.8258,3.4439 21.8078,7.3999 C21.8078,7.3999 21.4918,8.0149 20.8398,8.5739 C20.7368,8.6629 20.6258,8.7499 20.5058,8.8329 C19.2708,9.6879 17.7148,9.9479 16.6108,8.9289 C16.1568,8.5099 15.9078,7.6109 15.9508,7.1689 C16.0678,5.9859 16.7088,5.5819 17.6238,4.8589 C18.5388,4.1349 18.7498,2.9029 18.6588,1.8879 Z" })))));
+};
+exports.default = DesignPreference;

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

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

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

@@ -0,0 +1,34 @@
+"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 Question = 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("path", { fill: color, fillRule: "evenodd", d: "M12.0001,2 C17.5231,2 22.0001,6.477 22.0001,12 C22.0001,17.523 17.5231,22 12.0001,22 C6.4771,22 2.0001,17.523 2.0001,12 C2.0001,6.477 6.4771,2 12.0001,2 Z M12.0001,3.5 C7.3131,3.5 3.5001,7.313 3.5001,12 C3.5001,16.687 7.3131,20.5 12.0001,20.5 C16.6871,20.5 20.5001,16.687 20.5001,12 C20.5001,7.313 16.6871,3.5 12.0001,3.5 Z M11.7876652,14.8317533 C12.1414506,14.8317533 12.4377914,14.9408168 12.6748641,15.158944 C12.9119368,15.3779367 13.0304731,15.6575203 13.0304731,15.9976948 C13.0304731,16.3378693 12.9119368,16.6174529 12.6748641,16.8355801 C12.4377914,17.0545728 12.1414506,17.1636364 11.7876652,17.1636364 C11.432968,17.1636364 11.1366272,17.0545728 10.8986427,16.8355801 C10.66157,16.6174529 10.5439455,16.3378693 10.5439455,15.9976948 C10.5439455,15.6575203 10.66157,15.3779367 10.8986427,15.158944 C11.1366272,14.9408168 11.432968,14.8317533 11.7876652,14.8317533 Z M11.8870534,6.8 C12.8754641,6.8 13.6413912,7.1341154 14.1848347,7.6075898 C14.7282782,8.08106421 15,8.75535409 15,9.62872827 C15,10.0113164 14.9270546,10.3584155 14.7802519,10.6708913 C14.6334492,10.9833671 14.3991119,11.3036332 14.0754166,11.6299583 L13.3104013,12.3683014 C13.0933886,12.5846974 12.9593513,12.8244641 12.8581395,13.3550671 C12.7514568,13.9090408 12.4131723,14.2388283 11.8706406,14.2379644 C11.2907244,14.2379644 10.9032017,13.8389285 10.8913481,13.2892827 C10.8858772,13.0339354 10.8995545,12.7699323 11.0655053,12.3414683 C11.1986308,11.9952347 11.4183789,11.6905492 11.7475452,11.2993053 C12.0247379,10.9686522 12.324726,10.7522562 12.495236,10.5159518 C12.6666577,10.2787818 12.7514568,10.0173755 12.7514568,9.73259835 C12.7514568,9.03840004 12.4861178,8.76747227 11.9754997,8.69649439 C11.7119843,8.66100544 11.4338798,8.74237033 11.2806944,8.95097606 C11.1548635,9.12236168 11.1402744,9.21238241 11.087389,9.34914467 C10.9360272,9.74211977 10.5676527,9.97669301 10.1199501,9.97669301 L10.0533874,9.97669301 C9.26284117,9.97669301 8.84066944,9.23661876 9.05585848,8.51385618 C9.15342301,8.18666545 9.27195935,7.96161363 9.57285929,7.66558393 C10.1071846,7.1393089 10.8940836,6.8 11.8870534,6.8 Z" })));
+};
+exports.default = Question;

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

@@ -32,6 +32,7 @@ declare const lineIcons: {
     readonly ic_copy: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cs: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_dashboard: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_design_preference: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_developer: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_edit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_editor: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -82,6 +83,7 @@ declare const lineIcons: {
     readonly ic_post_welcome: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_profit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_qr: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_question: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_radio_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_radio_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_report: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -35,6 +35,7 @@ var ContWatching_1 = __importDefault(require("./ContWatching"));
 var Copy_1 = __importDefault(require("./Copy"));
 var Cs_1 = __importDefault(require("./Cs"));
 var Dashboard_1 = __importDefault(require("./Dashboard"));
+var DesignPreference_1 = __importDefault(require("./DesignPreference"));
 var Developer_1 = __importDefault(require("./Developer"));
 var Edit_1 = __importDefault(require("./Edit"));
 var Editor_1 = __importDefault(require("./Editor"));
@@ -85,6 +86,7 @@ var PostVote_1 = __importDefault(require("./PostVote"));
 var PostWelcome_1 = __importDefault(require("./PostWelcome"));
 var Profit_1 = __importDefault(require("./Profit"));
 var Qr_1 = __importDefault(require("./Qr"));
+var Question_1 = __importDefault(require("./Question"));
 var RadioOff_1 = __importDefault(require("./RadioOff"));
 var RadioOn_1 = __importDefault(require("./RadioOn"));
 var Report_1 = __importDefault(require("./Report"));
@@ -163,6 +165,7 @@ var lineIcons = {
     ic_copy: Copy_1.default,
     ic_cs: Cs_1.default,
     ic_dashboard: Dashboard_1.default,
+    ic_design_preference: DesignPreference_1.default,
     ic_developer: Developer_1.default,
     ic_edit: Edit_1.default,
     ic_editor: Editor_1.default,
@@ -213,6 +216,7 @@ var lineIcons = {
     ic_post_welcome: PostWelcome_1.default,
     ic_profit: Profit_1.default,
     ic_qr: Qr_1.default,
+    ic_question: Question_1.default,
     ic_radio_off: RadioOff_1.default,
     ic_radio_on: RadioOn_1.default,
     ic_report: Report_1.default,

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

@@ -1,6 +1,6 @@
 import { UITheme } from './styles/colorSet/ui-type';
-import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors, PDSValueOption } from './types';
-export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, UiColors, PDSValueOption };
+import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors } from './types';
+export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
 import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
 import { uiColors, customTheme } from './styles/ui-colors';
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };

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

@@ -73,7 +73,7 @@
     "sys_temp_secondary_01": "darkgreen700",
     "sys_temp_red": "darkred500",
     "sys_temp_white_opacity_00": "white/opacity00",
-    "sys_temp_dimmed": "black/opacity65",
+    "sys_temp_dimmed": "black/opacity20",
     "sys_temp_black": "black",
     "sys_temp_primary_02": "darkblue700",
     "sys_temp_primary_03": "darkblue300",
@@ -140,5 +140,14 @@
     "sys_gradient_base_01_opacity40": "grey950/opacity40",
     "sys_widget_black": "black",
     "usr_temp_primary_01": "darkblue500",
-    "sys_cpnt_sheet_base_02_opacity50": "darkgrey50/opacity50"
+    "sys_cpnt_sheet_base_02_opacity50": "darkgrey50/opacity50",
+    "usr_menu_primarymenu_main": "darkgrey900",
+    "usr_menu_primarymenu_sub": "darkgrey500",
+    "usr_menu_secondarymenu_main": "darkgrey900",
+    "usr_menu_secondarymenu_sub": "darkgrey500",
+    "usr_menu_hover": "darkblue500",
+    "usr_menu_active": "darkblue500",
+    "usr_menu_background": "grey950",
+    "sys_cpnt_base_white_opacity50": "white/opacity50",
+    "sys_widget_dark_01": "grey950"
 }

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

@@ -73,7 +73,7 @@
     "sys_temp_secondary_01": "green700",
     "sys_temp_red": "red500",
     "sys_temp_white_opacity_00": "white/opacity00",
-    "sys_temp_dimmed": "black/opacity65",
+    "sys_temp_dimmed": "black/opacity20",
     "sys_temp_black": "black",
     "sys_temp_primary_02": "blue700",
     "sys_temp_primary_03": "blue300",
@@ -140,5 +140,14 @@
     "sys_gradient_base_01_opacity40": "white/opacity40",
     "sys_widget_black": "black",
     "usr_temp_primary_01": "blue500",
-    "sys_cpnt_sheet_base_02_opacity50": "grey50/opacity50"
+    "sys_cpnt_sheet_base_02_opacity50": "grey50/opacity50",
+    "usr_menu_primarymenu_main": "grey900",
+    "usr_menu_primarymenu_sub": "grey500",
+    "usr_menu_secondarymenu_main": "grey900",
+    "usr_menu_secondarymenu_sub": "grey500",
+    "usr_menu_hover": "blue500",
+    "usr_menu_active": "blue500",
+    "usr_menu_background": "white",
+    "sys_cpnt_base_white_opacity50": "white/opacity50",
+    "sys_widget_dark_01": "grey900"
 }

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

@@ -469,6 +469,15 @@
     "ui_cpnt_pg_gradient_04": "sys_gradient_base_01_opacity75",
     "ui_cpnt_pg_gradient_05": "sys_gradient_base_01_opacity40",
     "ui_cpnt_mask_base": "sys_component_base_02",
-    "ui_temp_usr_primary_01": "usr_temp_primary_01",
-    "ui_cpnt_sheet_base_02_opacity50": "sys_cpnt_sheet_base_02_opacity50"
+    "ui_temp_usr_primary_01": "usr_brand_primary",
+    "ui_cpnt_sheet_base_02_opacity50": "sys_cpnt_sheet_base_02_opacity50",
+    "ui_menu_primarymenu_main": "usr_menu_primarymenu_main",
+    "ui_menu_primarymenu_sub": "usr_menu_primarymenu_sub",
+    "ui_menu_secondarymenu_main": "usr_menu_secondarymenu_main",
+    "ui_menu_secondarymenu_sub": "usr_menu_secondarymenu_sub",
+    "ui_menu_hover": "usr_menu_hover",
+    "ui_menu_active": "usr_menu_active",
+    "ui_menu_background": "usr_menu_background",
+    "ui_cpnt_video_progress_base": "sys_cpnt_base_white_opacity50",
+    "ui_cpnt_icon_sys_dark": "sys_widget_dark_01"
 }

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

@@ -1,4 +1,61 @@
 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;
+        grey30: string;
+        opacity95: string;
+    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -142,6 +199,15 @@ declare const colorSet: {
         sys_widget_black: string;
         usr_temp_primary_01: string;
         sys_cpnt_sheet_base_02_opacity50: string;
+        usr_menu_primarymenu_main: string;
+        usr_menu_primarymenu_sub: string;
+        usr_menu_secondarymenu_main: string;
+        usr_menu_secondarymenu_sub: string;
+        usr_menu_hover: string;
+        usr_menu_active: string;
+        usr_menu_background: string;
+        sys_cpnt_base_white_opacity50: string;
+        sys_widget_dark_01: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -286,6 +352,15 @@ declare const colorSet: {
         sys_widget_black: string;
         usr_temp_primary_01: string;
         sys_cpnt_sheet_base_02_opacity50: string;
+        usr_menu_primarymenu_main: string;
+        usr_menu_primarymenu_sub: string;
+        usr_menu_secondarymenu_main: string;
+        usr_menu_secondarymenu_sub: string;
+        usr_menu_hover: string;
+        usr_menu_active: string;
+        usr_menu_background: string;
+        sys_cpnt_base_white_opacity50: string;
+        sys_widget_dark_01: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -760,63 +835,15 @@ declare const colorSet: {
         ui_cpnt_mask_base: string;
         ui_temp_usr_primary_01: string;
         ui_cpnt_sheet_base_02_opacity50: 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;
-        grey30: string;
-        opacity95: string;
+        ui_menu_primarymenu_main: string;
+        ui_menu_primarymenu_sub: string;
+        ui_menu_secondarymenu_main: string;
+        ui_menu_secondarymenu_sub: string;
+        ui_menu_hover: string;
+        ui_menu_active: string;
+        ui_menu_background: string;
+        ui_cpnt_video_progress_base: string;
+        ui_cpnt_icon_sys_dark: string;
     };
 };
 export default colorSet;

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

@@ -4,14 +4,14 @@ 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 UIColor_json_1 = __importDefault(require("./UIColor.json"));
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var colorSet = {
+    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default,
-    SemanticColor: SemanticColor_json_1.default
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -471,4 +471,13 @@ export interface UITheme {
     ui_cpnt_mask_base: string;
     ui_temp_usr_primary_01: string;
     ui_cpnt_sheet_base_02_opacity50: string;
+    ui_menu_primarymenu_main: string;
+    ui_menu_primarymenu_sub: string;
+    ui_menu_secondarymenu_main: string;
+    ui_menu_secondarymenu_sub: string;
+    ui_menu_hover: string;
+    ui_menu_active: string;
+    ui_menu_background: string;
+    ui_cpnt_video_progress_base: string;
+    ui_cpnt_icon_sys_dark: string;
 }

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

@@ -4,7 +4,6 @@ import { PDSValueOption } from '../../../common';
 declare type Props = {
     headerBarSize?: 'regular' | 'small';
     headerBarTitleText?: TFunctionResult;
-    itemCountUnit?: number;
     currentPage?: number;
     totalPage?: number;
     contentText?: TFunctionResult;
@@ -13,6 +12,8 @@ declare type Props = {
     onChangeCount?: (option: PDSValueOption) => void;
     onClickNextButton?: () => void;
     onClickPrevButton?: () => void;
+    /** @deprecated v1.5 totalPage를 받아오기 때문에 deprecated 될 예정입니다. */
+    itemCountUnit?: number;
 };
 declare function AdminListHeader({ headerBarSize, headerBarTitleText, itemCountUnit, currentPage, totalPage, contentText, filterBar, dropdownTextArray, onChangeCount, onClickNextButton, onClickPrevButton }: Props): JSX.Element;
 export default AdminListHeader;

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

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var HeaderBar_1 = __importDefault(require("./HeaderBar"));
-var defaultPaginaionTextArray = [
+var defaultPaginationTextArray = [
     {
         text: '15',
         value: 15
@@ -31,10 +31,10 @@ var defaultPaginaionTextArray = [
     }
 ];
 function AdminListHeader(_a) {
-    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginaionTextArray : _f, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
+    var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginationTextArray : _f, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
     return (react_1.default.createElement(S_AdminListHeader, null,
-        react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, count: itemCountUnit, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
-        headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
+        react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
+        headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
         contentText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(S_ContentTextWrapper, null,

package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts

@@ -4,7 +4,6 @@ import { PDSValueOption } from '../../../common';
 declare type Props = {
     titleText?: TFunctionResult;
     size?: 'regular' | 'small';
-    count?: number;
     currentPage?: number;
     totalPage?: number;
     dropdownTextArray: PDSValueOption[];
@@ -12,5 +11,5 @@ declare type Props = {
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };
-declare function HeaderBar({ titleText, size, count, currentPage, totalPage, dropdownTextArray, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default HeaderBar;

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -34,7 +34,7 @@ var Dropdown_1 = require("../Dropdown");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function HeaderBar(_a) {
-    var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.count, count = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, dropdownTextArray = _a.dropdownTextArray, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
+    var titleText = _a.titleText, _b = _a.size, size = _b === void 0 ? 'regular' : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.totalPage, totalPage = _d === void 0 ? 1 : _d, dropdownTextArray = _a.dropdownTextArray, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var handleDropdown = function (option) {
         if (onChangeDropdown) {
@@ -52,7 +52,7 @@ function HeaderBar(_a) {
             react_1.default.createElement(S_Page, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: Math.ceil(totalPage / count), styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: totalPage, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
             react_1.default.createElement(S_IconButtonBox, null,
                 react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: onClickIBtn2 }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }),

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

@@ -1,39 +1,22 @@
 /// <reference types="react" />
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
-declare const defaultProps: {
-    size: "large" | "xlarge";
-    leftDisplayType: "text" | "icon" | "back";
-    rightBtnMode: "none" | "close" | "mbtn";
-    dividerType: "none" | "solid";
-};
-declare type DefaultProps = Readonly<typeof defaultProps>;
-declare type OptionalProps = {
+declare type DesktopHeaderBarProps = {
     text?: PDSTextType;
+    size?: 'xlarge' | 'large';
+    leftDisplayType?: 'text' | 'icon' | 'back';
     iconName?: FillIconNameKeys | LineIconNameKeys;
+    rightBtnMode?: 'none' | 'close' | 'mbtn' | 'mbtn_fill' | 'help_window';
+    rightBtn2Mode?: 'none' | 'mbtn' | 'mbtn_fill' | 'help_window';
+    rightBtn3Mode?: 'none' | 'help_window';
     mBtnText?: PDSTextType;
+    mBtn2Text?: PDSTextType;
+    mBtnState?: 'normal' | 'disabled';
+    mBtn2State?: 'normal' | 'disabled';
+    dividerType?: 'none' | 'solid';
     onClickLeftBtn?: () => void;
     onClickRightBtn?: () => void;
+    onClickRightBtn2?: () => void;
+    onClickRightBtn3?: () => void;
 };
-declare type Complete<T> = {
-    [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
-};
-declare type TextType = {
-    leftDisplayType: 'text';
-    text: PDSTextType;
-};
-declare type IconType = {
-    leftDisplayType: 'icon';
-} & Complete<Pick<OptionalProps, 'iconName'>>;
-declare type BackType = {
-    leftDisplayType: 'back';
-} & Complete<Pick<OptionalProps, 'onClickLeftBtn'>>;
-declare type CloseType = {
-    rightBtnMode: 'close';
-} & Complete<Pick<OptionalProps, 'onClickRightBtn'>>;
-declare type MBtnType = {
-    rightBtnMode: 'mbtn';
-    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;
+declare function DesktopHeaderBar({ text, size, leftDisplayType, iconName, rightBtnMode, rightBtn2Mode, rightBtn3Mode, mBtnText, mBtn2Text, mBtnState, mBtn2State, dividerType, onClickLeftBtn, onClickRightBtn, onClickRightBtn2, onClickRightBtn3 }: DesktopHeaderBarProps): JSX.Element;
 export default DesktopHeaderBar;

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

@@ -13,14 +13,12 @@ var hybrid_1 = require("../../../hybrid");
 var IconButton_1 = require("../IconButton");
 var MainButton_1 = require("../MainButton");
 var TextLabel_1 = require("../TextLabel");
-var defaultProps = {
-    size: 'xlarge',
-    leftDisplayType: 'text',
-    rightBtnMode: 'none',
-    dividerType: 'none'
-};
 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 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, _e = _a.rightBtn2Mode, rightBtn2Mode = _e === void 0 ? 'none' : _e, _f = _a.rightBtn3Mode, rightBtn3Mode = _f === void 0 ? 'none' : _f, mBtnText = _a.mBtnText, mBtn2Text = _a.mBtn2Text, _g = _a.mBtnState, mBtnState = _g === void 0 ? 'normal' : _g, _h = _a.mBtn2State, mBtn2State = _h === void 0 ? 'normal' : _h, _j = _a.dividerType, dividerType = _j === void 0 ? 'none' : _j, onClickLeftBtn = _a.onClickLeftBtn, onClickRightBtn = _a.onClickRightBtn, onClickRightBtn2 = _a.onClickRightBtn2, onClickRightBtn3 = _a.onClickRightBtn3;
+    var isLastButtonIcon = rightBtnMode === 'close' ||
+        rightBtnMode === 'help_window' ||
+        (rightBtnMode === 'none' && rightBtn2Mode === 'help_window') ||
+        (rightBtnMode === 'none' && rightBtn2Mode === 'none' && rightBtn3Mode === 'help_window');
     var handleClickLeftBtn = function () {
         if (onClickLeftBtn) {
             onClickLeftBtn();
@@ -31,6 +29,23 @@ function DesktopHeaderBar(_a) {
             onClickRightBtn();
         }
     };
+    var handleClickRightBtn2 = function () {
+        if (onClickRightBtn2) {
+            onClickRightBtn2();
+        }
+    };
+    var handleClickRightBtn3 = function () {
+        if (onClickRightBtn3) {
+            onClickRightBtn3();
+        }
+    };
+    var mBtnElement = function (text, state, handleClick) {
+        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", fillType: "line", onClick: handleClick, state: state }));
+    };
+    var mBtnFillElement = function (text, state, handleClick) {
+        return size === 'xlarge' && (react_1.default.createElement(MainButton_1.MainButton, { text: text, size: "small", onClick: handleClick, state: state }));
+    };
+    var iconButtonElement = function (iconName, handleClick) { return (react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "large", iconSize: 24, shapeType: "rectangle", iconName: iconName, iconFillType: "line", onClick: handleClick, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" })); };
     var leftDisplayMode = function () {
         switch (leftDisplayType) {
             case 'icon': {
@@ -39,21 +54,52 @@ 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: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
+                return iconButtonElement('ic_arrow_left', handleClickLeftBtn);
             }
             case 'text': {
                 return;
             }
         }
     };
+    var rightButton3Mode = function () {
+        switch (rightBtn3Mode) {
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn3);
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
+    var rightButton2Mode = function () {
+        switch (rightBtn2Mode) {
+            case 'mbtn': {
+                return mBtnElement(mBtn2Text, mBtn2State, handleClickRightBtn2);
+            }
+            case 'mbtn_fill': {
+                return mBtnFillElement(mBtn2Text, mBtn2State, handleClickRightBtn2);
+            }
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn2);
+            }
+            case 'none': {
+                return;
+            }
+        }
+    };
     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: handleClickRightBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }));
+                return iconButtonElement('ic_xmark', handleClickRightBtn);
             }
             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: handleClickRightBtn })))));
+                return mBtnElement(mBtnText, mBtnState, handleClickRightBtn);
+            }
+            case 'mbtn_fill': {
+                return mBtnFillElement(mBtnText, mBtnState, handleClickRightBtn);
+            }
+            case 'help_window': {
+                return iconButtonElement('ic_help_window', handleClickRightBtn);
             }
             case 'none': {
                 return;
@@ -64,9 +110,12 @@ function DesktopHeaderBar(_a) {
         react_1.default.createElement(S_LeftDisplayBox, null,
             leftDisplayMode(),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "body1Bold", singleLineMode: "use", colorTheme: "sysTextPrimary" })),
-        rightButtonMode()));
+        react_1.default.createElement(S_ButtonBox, { isLastButtonIcon: isLastButtonIcon },
+            rightButton3Mode(),
+            rightButton2Mode(),
+            rightButtonMode())));
 }
-var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-bottom: ", ";\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: space-between;\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_headerbar_base_area;
 }, function (_a) {
@@ -78,14 +127,17 @@ var S_DesktopHeaderBar = styled_components_1.default.div(templateObject_1 || (te
 }, function (_a) {
     var hasBackIcon = _a.hasBackIcon, theme = _a.theme;
     return hasBackIcon ? theme.spacing.spacingC : theme.spacing.spacingE;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
 });
-var S_LeftDisplayBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-var S_MainButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 ", ";\n"], ["\n  margin: 0 ", ";\n"])), function (_a) {
+var S_LeftDisplayBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
+var S_ButtonBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  margin-right: ", ";\n\n  & > :not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var isLastButtonIcon = _a.isLastButtonIcon, theme = _a.theme;
+    return isLastButtonIcon ? theme.spacing.spacingB : theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
 exports.default = DesktopHeaderBar;
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -50,24 +50,21 @@ function DesktopTabBar(_a) {
             return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
         }
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        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), styleTheme: styleTheme, onClick: function () {
+    return (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), styleTheme: styleTheme },
+            react_1.default.createElement(S_TitleWrapper, { 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); }))));
+                } }, 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, { onClick: function () {
+                    handleClick(subValue);
+                }, key: subValue.path }, textLabel(subValue, true))); }))))); }),
+        textArray.map(function (value) {
+            return value.subArray && pathname.includes(value.path) && react_1.default.createElement(S_SubBackground, { key: value.path });
+        })));
 }
-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 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  display: flex;\n  margin-right: ", ";\n  position: relative;\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  display: flex;\n  margin-right: ", ";\n  position: relative;\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) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
 }, function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'content'
@@ -78,7 +75,14 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
     return !isActive && "display: none;";
 });
 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 S_TitleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  min-width: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n"], ["\n  cursor: pointer;\n  min-width: 100%;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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) {
@@ -88,12 +92,12 @@ var S_TabBox = styled_components_1.default.div(templateObject_3 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-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 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 theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-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 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 theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
@@ -101,4 +105,4 @@ var S_SubWrapper = styled_components_1.default.div(templateObject_6 || (template
     return theme.spacing.spacingA;
 });
 exports.default = DesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -37,14 +37,17 @@ function EditApplyTextField(_a) {
     var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, errors = _l.formState.errors;
     var _m = (0, react_1.useState)(false), isFocused = _m[0], setIsFocused = _m[1];
     var _o = (0, react_1.useState)(false), isOpen = _o[0], setIsOpen = _o[1];
-    var _p = (0, react_1.useState)(), prevValue = _p[0], setPrevValue = _p[1];
+    var _p = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _p[0], setPrevValue = _p[1];
     var currentValue = watch(name);
     var validateOnChange = register(name, validation).onChange;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
     (0, react_1.useEffect)(function () {
-        if (defaultText) {
+        if (defaultText !== undefined && defaultText !== null) {
             setPrevValue(defaultText);
+            setValue(name, defaultText);
+            return;
         }
+        setValue(name, '');
     }, [defaultText]);
     function handleFocus(e) {
         if (state !== 'read_only') {

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

@@ -37,8 +37,8 @@ var S_ChipBox = styled_components_1.default.div(templateObject_2 || (templateObj
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n"], ["\n  padding: ", ";\n"])), function (_a) {
+var S_ChipWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n\n  &:last-child {\n    padding-right: 0;\n  }\n"], ["\n  padding-right: ", ";\n\n  &:last-child {\n    padding-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA;
+    return theme.spacing.spacingB;
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -2,6 +2,8 @@
 import { PDSTextType, UiColors } from '../../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
     textAlign?: 'left' | 'center' | 'right';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
@@ -15,6 +17,7 @@ export declare type TextLabelProps = {
 };
 export declare type TextStyleProps = {
     textAlign?: 'left' | 'center' | 'right';
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'right_top' | 'right_bottom';
     styleTheme?: 'displayBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
     colorOverride?: UiColors;
     colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
@@ -25,5 +28,5 @@ export declare type TextStyleProps = {
     customFontSize?: string;
     customFontWeight?: 'bold' | 'regular';
 };
-declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
+declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
 export default TextLabel;

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

@@ -22,16 +22,23 @@ 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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../common");
+var hybrid_1 = require("../../../hybrid");
 function TextLabel(_a) {
-    var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
-    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight }, text));
+    var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
+    var _j = (0, react_1.useState)(false), isTooltipOpen = _j[0], setIsTooltipOpen = _j[1];
+    var handleTooltipToggle = function (value) {
+        setIsTooltipOpen(value);
+    };
+    return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight },
+        text,
+        tooltipText && (react_1.default.createElement(S_TooltipBox, { styleTheme: styleTheme },
+            react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
+                react_1.default.createElement(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "line" })),
+            react_1.default.createElement(S_TooltipWrapper, { className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, "" + tooltipText)))));
 }
 var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"], ["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -259,7 +266,11 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"], ["\n  -ms-user-select: none;\n  -moz-user-select: -moz-none;\n  -khtml-user-select: none;\n  -webkit-user-select: none;\n  user-select: none;\n"])));
-var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  right: 0;\n  bottom: 20px;\n"], ["\n  right: 0;\n  bottom: 20px;\n"])));
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  right: 0;\n  top: 20px;\n"], ["\n  right: 0;\n  top: 20px;\n"])));
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  left: 0;\n  bottom: 20px;\n"], ["\n  left: 0;\n  bottom: 20px;\n"])));
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  left: 0;\n  top: 20px;\n"], ["\n  left: 0;\n  top: 20px;\n"])));
+var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: border-box;\n  text-align: ", ";\n  white-space: pre-wrap;\n  word-break: keep-all;\n  overflow-wrap: break-word;\n  hyphens: auto;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
@@ -317,5 +328,59 @@ var S_TextLabel = styled_components_1.default.div(templateObject_32 || (template
     var userSelectMode = _a.userSelectMode;
     return userSelectMode === 'none' && userSelectModeStyle;
 });
+var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  margin-left: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var styleTheme = _a.styleTheme;
+    switch (styleTheme) {
+        case 'headingBold':
+            return;
+        case 'leadParaBold':
+            return;
+        case 'leadParaRegular':
+            return;
+        default:
+            return 'vertical-align: middle';
+    }
+});
+var S_IconWrapper = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n"])));
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  hyphens: auto;\n  line-height: ", ";\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_contextmenu_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_contextmenu_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_secondary;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var isTooltipOpen = _a.isTooltipOpen;
+    return !isTooltipOpen && 'display: none';
+}, function (_a) {
+    var tooltipPosition = _a.tooltipPosition;
+    return tooltipPosition &&
+        {
+            left_top: tooltipLeftTop,
+            left_bottom: tooltipLeftBottom,
+            right_top: tooltipRightTop,
+            right_bottom: tooltipRightBottom
+        }[tooltipPosition];
+});
 exports.default = TextLabel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39;

package/dist/src/desktop/layout/LayoutWF/LayoutWF.js

@@ -13,6 +13,6 @@ var LayoutWF = function (_a) {
     var children = _a.children;
     return react_1.default.createElement(S_LayoutWF, null, children);
 };
-var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n"], ["\n  height: 100vh;\n  width: 100vw;\n"])));
+var S_LayoutWF = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 exports.default = LayoutWF;
 var templateObject_1;

package/dist/src/desktop/layout/LayoutWS/LayoutWS.js

@@ -15,7 +15,7 @@ var LayoutWS = function (_a) {
         react_1.default.createElement(S_LeftWrapper, null, globalMenuContainer),
         react_1.default.createElement(S_RightWrapper, null, children)));
 };
-var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n"], ["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n"])));
+var S_LayoutWS = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  display: flex;\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 var S_LeftWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
 var S_RightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* width: calc(100% - 240px); */\n  width: 100%;\n"], ["\n  /* width: calc(100% - 240px); */\n  width: 100%;\n"])));
 exports.default = LayoutWS;

package/dist/src/desktop/layout/LayoutWT/LayoutWT.js

@@ -16,7 +16,7 @@ var LayoutWT = function (_a) {
             react_1.default.createElement(S_TopWrapper, null, globalMenuContainer),
             react_1.default.createElement(S_BottomWrapper, null, children))));
 };
-var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n"], ["\n  height: 100vh;\n  width: 100vw;\n"])));
+var S_LayoutWT = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"], ["\n  height: 100vh;\n  width: 100vw;\n  min-width: 1200px;\n"])));
 var S_Box = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
 var S_TopWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
 var S_BottomWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"], ["\n  flex: 1;\n  height: 100%;\n  overflow: hidden;\n"])));

package/package.json

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

package/release-note.md

@@ -1,50 +1,13 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.3.5]
+## [v1.3.8]
 
 ### Component
-* PDSValueOption타입 추가 (텍스트와 id와 같은 고유값이 있는 형태의 컴포넌트는 모두 PDSValueOption 타입을 사용해 통일감있게 PDS 컴포넌트를 생성할 예정)(해당 타입은 ‘pds-dev-kit-web’에서 임포트 해서 사용할 수 있습니다.)
-* AdminList
-  * BulkActionBar의 MainButton과 Dropdown에 colotTheme 적용
-  * HeaderRowHideMode 프롭 명칭을 HeaderRowMode로 변경 (default는 ‘use')
-  * selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
-  * BulkActionBar의 MainButton과 Dropdown 액션 이후에 AdminList의 상태를 초기화 하는 로직을 삭제 (-> 각 개발자가 각 상황에 알맞게 사용하는게 더 낫다고 판단)
-  * selectedIds, onSelect 프롭을 받지 않을 시 useEffect에서 발생하던 에러 픽스
-* AdminListHeader
-  * TitleText, DescText, FilterBar, BulkActionBar 사이의 여백 조정
-* AdminListItem
-  * column5Text 부터 TextStyle이 반영되지 않던 이슈 수정
-  * quickActionBtnMode가 ‘none’일 때 버튼 영역이 보이지 않도록 수정
-  * selectState가 ‘maintain’일 때 체크박스가 선택되어진 상태에서 유지되도록 변경
-  * selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
-* Chip
-  * prop추가
-    * option
-  * prop deprecated표시 (1.5에서 삭제 예정)
-    * activeChipId
-    * chipId
-* ContextMenuItem
-  * prop추가
-    * value
-    * id
-  * prop deprecated표시 (1.5에서 삭제 예정)
-    * text
-    * value
-  * prop type 변경
-    * onClick이 value로 PDSValueOption도 받을 수 있음
-* Dropdown
-  * prop type 변경
-    * defaultValue
-    * valueArray
-    * onChange
-* FilterBar
-  * prop추가
-    * value
-  * prop deprecated표시 (1.5에서 삭제 예정)
-    * activeChipId
-  * prop type 변경
-    * textArray
-    * name
-    * onClickChip
-* UserDesktopNavBar
-  * prop type 변경
-    * textArray
+* Icon
+  * line 아이콘 추가 (ic_question)
+* D_TextLabel
+  * prop 추가
+    * tooltipText
+    * tooltipPosition
+
+### Color
+* 컬러 키 값 22.04.24 20시 21분 기준 싱크