pds-dev-kit-web 1.3.13 → 1.3.16

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

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

package/dist/src/common/assets/icons/line/Order.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 Order = 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" },
+            react_1.default.createElement("path", { fill: color, d: "M18.6337,2.75 L5.3657,2.75 C3.5067,2.75 1.9997,4.257 1.9997,6.116 L1.9997,17.884 C1.9997,19.743 3.5067,21.25 5.3657,21.25 L18.6337,21.25 C20.4927,21.25 21.9997,19.743 21.9997,17.884 L21.9997,6.116 C21.9997,4.257 20.4927,2.75 18.6337,2.75 L18.6337,2.75 Z M18.6337,4.164 C19.7097,4.164 20.5857,5.04 20.5857,6.116 L20.5857,17.884 C20.5857,18.96 19.7097,19.836 18.6337,19.836 L5.3657,19.836 C4.2897,19.836 3.4147,18.96 3.4147,17.884 L3.4147,6.116 C3.4147,5.04 4.2897,4.164 5.3657,4.164 L18.6337,4.164 Z" }),
+            react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M8.396,10.4279 L11.353,13.3849 L15.854,7.2739 M8.6684,16.726 L15.3314,16.726" }))));
+};
+exports.default = Order;

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

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

package/dist/src/common/assets/icons/line/Sales.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 Sales = 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" },
+            react_1.default.createElement("path", { fill: color, d: "M18.6338,2.75 L5.3658,2.75 C3.5068,2.75 1.9998,4.257 1.9998,6.116 L1.9998,17.884 C1.9998,19.743 3.5068,21.25 5.3658,21.25 L18.6338,21.25 C20.4928,21.25 21.9998,19.743 21.9998,17.884 L21.9998,6.116 C21.9998,4.257 20.4928,2.75 18.6338,2.75 L18.6338,2.75 Z M18.6338,4.164 C19.7098,4.164 20.5858,5.04 20.5858,6.116 L20.5858,17.884 C20.5858,18.96 19.7098,19.836 18.6338,19.836 L5.3658,19.836 C4.2898,19.836 3.4148,18.96 3.4148,17.884 L3.4148,6.116 C3.4148,5.04 4.2898,4.164 5.3658,4.164 L18.6338,4.164 Z" }),
+            react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M5.9533,12.6542 L10.0263,8.8182 L14.0023,10.7362 L18.0663,6.6702 M6.3203,15.8164 L6.3203,17.4884 M10.1068,13.2275 L10.1068,17.4885 M13.8932,14.2581 L13.8932,17.4881 M17.6797,11.0279 L17.6797,17.4879" }))));
+};
+exports.default = Sales;

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

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

package/dist/src/common/assets/icons/line/Settlement.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 Settlement = 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" },
+            react_1.default.createElement("path", { fill: color, d: "M18.6337,2.75 L5.3657,2.75 C3.5067,2.75 1.9997,4.257 1.9997,6.116 L1.9997,17.884 C1.9997,19.743 3.5067,21.25 5.3657,21.25 L18.6337,21.25 C20.4927,21.25 21.9997,19.743 21.9997,17.884 L21.9997,6.116 C21.9997,4.257 20.4927,2.75 18.6337,2.75 L18.6337,2.75 Z M18.6337,4.164 C19.7097,4.164 20.5857,5.04 20.5857,6.116 L20.5857,17.884 C20.5857,18.96 19.7097,19.836 18.6337,19.836 L5.3657,19.836 C4.2897,19.836 3.4147,18.96 3.4147,17.884 L3.4147,6.116 C3.4147,5.04 4.2897,4.164 5.3657,4.164 L18.6337,4.164 Z" }),
+            react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M5.5698,8.625 L10.4328,8.625 M8.0011,6.1936 L8.0011,11.0566 M13.9383,8.625 L18.3003,8.625 M6.2819,13.9691 L9.7199,17.4071 M9.7204,13.9691 L6.2824,17.4071 M13.9383,16.9041 L18.3003,16.9041 M13.9383,14.4725 L18.3003,14.4725" }))));
+};
+exports.default = Settlement;

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

@@ -60,6 +60,7 @@ declare const lineIcons: {
     readonly ic_mic_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_minus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_open_page: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_order: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_page_size_expand: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_page_size_reduce: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_papp: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -92,6 +93,7 @@ declare const lineIcons: {
     readonly ic_radio_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_report: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_requirement: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_sales: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_search: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_info: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_seller_intro: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -99,6 +101,7 @@ declare const lineIcons: {
     readonly ic_series: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_series_list: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_setting: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_settlement: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_share: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_slideBanner: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_sort: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -63,6 +63,7 @@ var MicOff_1 = __importDefault(require("./MicOff"));
 var MicOn_1 = __importDefault(require("./MicOn"));
 var MinusCircle_1 = __importDefault(require("./MinusCircle"));
 var OpenPage_1 = __importDefault(require("./OpenPage"));
+var Order_1 = __importDefault(require("./Order"));
 var PageSizeExpand_1 = __importDefault(require("./PageSizeExpand"));
 var PageSizeReduce_1 = __importDefault(require("./PageSizeReduce"));
 var Papp_1 = __importDefault(require("./Papp"));
@@ -95,6 +96,7 @@ var RadioOff_1 = __importDefault(require("./RadioOff"));
 var RadioOn_1 = __importDefault(require("./RadioOn"));
 var Report_1 = __importDefault(require("./Report"));
 var Requirement_1 = __importDefault(require("./Requirement"));
+var Sales_1 = __importDefault(require("./Sales"));
 var Search_1 = __importDefault(require("./Search"));
 var SellerInfo_1 = __importDefault(require("./SellerInfo"));
 var SellerIntro_1 = __importDefault(require("./SellerIntro"));
@@ -102,6 +104,7 @@ var SellerPage_1 = __importDefault(require("./SellerPage"));
 var Series_1 = __importDefault(require("./Series"));
 var SeriesList_1 = __importDefault(require("./SeriesList"));
 var Setting_1 = __importDefault(require("./Setting"));
+var Settlement_1 = __importDefault(require("./Settlement"));
 var Share_1 = __importDefault(require("./Share"));
 var SlideBanner_1 = __importDefault(require("./SlideBanner"));
 var Sort_1 = __importDefault(require("./Sort"));
@@ -198,6 +201,7 @@ var lineIcons = {
     ic_mic_on: MicOn_1.default,
     ic_minus_circle: MinusCircle_1.default,
     ic_open_page: OpenPage_1.default,
+    ic_order: Order_1.default,
     ic_page_size_expand: PageSizeExpand_1.default,
     ic_page_size_reduce: PageSizeReduce_1.default,
     ic_papp: Papp_1.default,
@@ -230,6 +234,7 @@ var lineIcons = {
     ic_radio_on: RadioOn_1.default,
     ic_report: Report_1.default,
     ic_requirement: Requirement_1.default,
+    ic_sales: Sales_1.default,
     ic_search: Search_1.default,
     ic_seller_info: SellerInfo_1.default,
     ic_seller_intro: SellerIntro_1.default,
@@ -237,6 +242,7 @@ var lineIcons = {
     ic_series: Series_1.default,
     ic_series_list: SeriesList_1.default,
     ic_setting: Setting_1.default,
+    ic_settlement: Settlement_1.default,
     ic_share: Share_1.default,
     ic_slideBanner: SlideBanner_1.default,
     ic_sort: Sort_1.default,

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

@@ -152,5 +152,6 @@
     "sys_widget_dark_01": "grey950",
     "usr_menu_background_gradient_opacity00": "grey950/opacity00",
     "sys_border_line_white": "white",
-    "sys_component_base_white_opacity10": "white/opacity10"
+    "sys_component_base_white_opacity10": "white/opacity10",
+    "sys_cpnt_sheet_base_01": "darkgrey50"
 }

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

@@ -152,5 +152,6 @@
     "sys_widget_dark_01": "grey900",
     "usr_menu_background_gradient_opacity00": "white/opacity00",
     "sys_border_line_white": "white",
-    "sys_component_base_white_opacity10": "white/opacity10"
+    "sys_component_base_white_opacity10": "white/opacity10",
+    "sys_cpnt_sheet_base_01": "grey30"
 }

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

@@ -29,7 +29,7 @@
     "opacity30": "4D",
     "opacity65": "A6",
     "darkgreen500": "#0ce1a8",
-    "grey70": "#F2F2F2",
+    "grey70": "#eff0f3",
     "navy500": "#313349",
     "lightgreen500": "#32d64c",
     "pink500": "#FB3A63",
@@ -52,6 +52,7 @@
     "darknavy100": "#7A82B2",
     "opacity80": "CC",
     "opacity50": "80",
-    "grey30": "#f9fafb",
-    "opacity95": "F2"
+    "grey30": "#f8f9fa",
+    "opacity95": "F2",
+    "darkgrey30": "#1d1d1e"
 }

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

@@ -426,7 +426,7 @@
     "ui_cpnt_dropdown_border_darktheme_normal": "sys_border_line_darktheme_01",
     "ui_cpnt_dropdown_border_darktheme_focus": "sys_border_line_darktheme_04",
     "ui_cpnt_dropdown_base_darktheme_disabled": "sys_component_base_darktheme_01",
-    "ui_cpnt_sheet_base": "sys_component_base_01",
+    "ui_cpnt_sheet_base": "sys_cpnt_sheet_base_01",
     "ui_cpnt_button_icon_darktheme_default": "sys_widget_grey_darktheme_02",
     "ui_cpnt_button_icon_darktheme_primary": "usr_widget_brand_primary_darktheme_01",
     "ui_cpnt_button_text_darktheme_default": "sys_text_grey_darktheme_02",

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

@@ -1,5 +1,5 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -154,8 +154,67 @@ declare const colorSet: {
         usr_menu_background_gradient_opacity00: string;
         sys_border_line_white: string;
         sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
     };
-    readonly PaletteColor_light: {
+    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;
+        darkgrey30: string;
+    };
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -310,6 +369,7 @@ declare const colorSet: {
         usr_menu_background_gradient_opacity00: string;
         sys_border_line_white: string;
         sys_component_base_white_opacity10: string;
+        sys_cpnt_sheet_base_01: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -801,62 +861,5 @@ declare const colorSet: {
         ui_cpnt_dropdown_border_white_focus: string;
         ui_cpnt_dropdown_base_white_normal: 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;
-    };
 };
 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 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 PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default,
-    SemanticColor: SemanticColor_json_1.default
+    SemanticColor: SemanticColor_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -9,11 +9,12 @@ declare type Props = {
     contentText?: TFunctionResult;
     filterBar?: React.ReactNode;
     dropdownTextArray?: PDSValueOption[];
+    dropdownDefaultValue?: PDSValueOption;
     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;
+declare function AdminListHeader({ headerBarSize, headerBarTitleText, itemCountUnit, currentPage, totalPage, contentText, filterBar, dropdownTextArray, dropdownDefaultValue, onChangeCount, onClickNextButton, onClickPrevButton }: Props): JSX.Element;
 export default AdminListHeader;

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

@@ -31,9 +31,9 @@ var defaultPaginationTextArray = [
     }
 ];
 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 ? defaultPaginationTextArray : _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, dropdownDefaultValue = _a.dropdownDefaultValue, 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, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
+        react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, dropdownDefaultValue: dropdownDefaultValue, 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,

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

@@ -7,9 +7,10 @@ declare type Props = {
     currentPage?: number;
     totalPage?: number;
     dropdownTextArray: PDSValueOption[];
+    dropdownDefaultValue?: PDSValueOption;
     onChangeDropdown?: (option: PDSValueOption) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };
-declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, onChangeDropdown, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+declare function HeaderBar({ titleText, size, currentPage, totalPage, dropdownTextArray, dropdownDefaultValue, 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.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 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, dropdownDefaultValue = _a.dropdownDefaultValue, onChangeDropdown = _a.onChangeDropdown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var handleDropdown = function (option) {
         if (onChangeDropdown) {
@@ -48,7 +48,7 @@ function HeaderBar(_a) {
             react_1.default.createElement(S_ListCount, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: t('str_rows_per_page', '목록 개수'), styleTheme: "caption1Regular" }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownTextArray[0] })),
+                react_1.default.createElement(Dropdown_1.Dropdown, { size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })),
             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" }),

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -2,6 +2,7 @@ import React from 'react';
 declare type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
+    maxHeight?: number;
 };
-declare function ContextMenu({ children, autoWidthMode }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b;
-    return react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use' }, children);
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
+    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -28,6 +28,9 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
 }, function (_a) {
     var autoWidth = _a.autoWidth;
     return (autoWidth ? 'inherit' : 'auto');
+}, function (_a) {
+    var maxHeight = _a.maxHeight;
+    return maxHeight && { maxHeight: maxHeight + "px" };
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -4,11 +4,12 @@ export declare type ContextMenuItemProps = {
     option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
+    state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -30,8 +30,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
         if (onClick && option) {
             onClick(option);
         }
@@ -39,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
+    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 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;
@@ -54,7 +67,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -65,6 +78,11 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_menu_base_hover;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && {
+        cursor: 'not-allowed'
+    };
 });
 exports.default = ContextMenuItem;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,15 +1,20 @@
 /// <reference types="react" />
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
+declare type DropDownValues = PDSValueOption & {
+    state?: 'normal' | 'disabled';
+};
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: PDSValueOption[];
+    hintText?: TFunctionResult;
+    maxHeightItemNumber?: number;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
+    var _j = (0, react_1.useState)(defaultValue), selectedOption = _j[0], setSelectedOption = _j[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -97,14 +97,23 @@ function Dropdown(_a) {
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
     };
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    var maxHeight = (0, react_1.useMemo)(function () {
+        if (size === 'small') {
+            var SMALL_HEIGHT = 32;
+            return SMALL_HEIGHT * maxHeightItemNumber;
+        }
+        // NOTE: 사이즈가 large인 경우입니다.
+        var LARGE_HEIGHT = 48;
+        return LARGE_HEIGHT * maxHeightItemNumber;
+    }, [size, maxHeightItemNumber]);
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             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(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
         isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
-            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption })); }))))));
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption, state: el.state })); }))))));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -113,9 +122,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -123,7 +138,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

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

@@ -24,7 +24,7 @@ function FilterBar(_a) {
     };
     var renderingTextField = function () {
         if (displayType === 'filterchips_searchfield' || displayType === 'searchfield') {
-            return name && react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText });
+            return (name && (react_1.default.createElement(TextField_1.TextField, { name: name, size: "small", hintText: hintText, enterSubmitMode: "use", validationPoint: "onChange" })));
         }
     };
     return (react_1.default.createElement(S_FilterBarBox, null,

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

@@ -34,9 +34,6 @@ var TextLabel_1 = require("../TextLabel");
 // textColorKey?: string;
 // baseColorKey?: string;
 // borderColorKey?: string;
-// NOTE : PDS 문서 1.2 버전에서 업데이트 예정인 props
-// displayType?: 'icon_only' | 'text_only' | 'icon_text';
-// state?: 'normal' | 'disabled';
 function FloatingActionButton(_a) {
     var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var handleClick = function () {
@@ -71,9 +68,12 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_disabled;
 });
-var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  bottom: 24px;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  /* NOTE : \uB808\uC774\uC5B4 \uB3C4\uC785 \uD6C4 \uC81C\uAC70\uB420 \uAC00\uB2A5\uC131 \uB18D\uD6C4 */\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation3;
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    onClick?: () => any;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 };
 declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -37,9 +37,9 @@ function IconButton(_a) {
             onClick();
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            onMouseDown(e);
         }
     };
     var iconStateColorObj = {

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

@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
 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  ", ";\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\n  ", ";\n"])), function (_a) {
+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\n  ", ";\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\n  ", ";\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) {
@@ -352,7 +352,7 @@ var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templat
     }
 });
 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 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  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  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) {

package/dist/src/desktop/layout/LayoutWT/Containers/PageMenuContainer/variation/TopPageMenu.js

@@ -65,6 +65,6 @@ var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (tem
     var areaLine = _a.areaLine;
     return areaLine && areaLineStyle;
 });
-var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 64px;\n"], ["\n  min-height: 64px;\n"])));
+var S_TopPageMenuContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 48px;\n"], ["\n  min-height: 48px;\n"])));
 exports.default = TopPageMenu;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -30,7 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ImageView = function (_a) {
     var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, radius: radius, backgroundFillMode: backgroundFillMode },
+    return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
         react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
 };
 var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
@@ -40,10 +40,10 @@ var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObj
     var borderMode = _a.borderMode, theme = _a.theme;
     return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
 }, function (_a) {
-    var shapeType = _a.shapeType, radius = _a.radius;
+    var shapeType = _a.shapeType, $radius = _a.$radius;
     return shapeType &&
         {
-            round: "border-radius: " + radius + "px",
+            round: "border-radius: " + $radius + "px",
             circular: 'border-radius: 50%',
             rectangle: ''
         }[shapeType];

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

@@ -28,10 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importDefault(require("react"));
+var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 function BlogTextField(_a) {
     var hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.textLineType, textLineType = _c === void 0 ? 'auto' : _c, _d = _a.multiRows, multiRows = _d === void 0 ? 8 : _d, _e = _a.autoMinRows, autoMinRows = _e === void 0 ? 8 : _e, autoMaxRows = _a.autoMaxRows, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.spacingMode, spacingMode = _g === void 0 ? 'use' : _g, maxLength = _a.maxLength, name = _a.name, validation = _a.validation, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onTarget = _a.onTarget;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var validateOnChange = register(name, validation).onChange;
     function handleFocus(e) {
         if (onFocus) {
             onFocus(e);
@@ -48,16 +51,17 @@ function BlogTextField(_a) {
         }
     }
     function handleChange(e) {
+        validateOnChange(e);
         if (onChange) {
             onChange(e);
         }
     }
     var S_BlogTextField = function () {
         if (textLineType === 'multi') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
         if (textLineType === 'auto') {
-            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur }));
+            return (react_1.default.createElement(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, maxLength: maxLength, textSize: "form1", textWeight: "normal", onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, validationPoint: "onChange" }));
         }
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -4,11 +4,12 @@ export declare type ContextMenuItemProps = {
     option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
+    state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -30,8 +30,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
+        if (state === 'disabled') {
+            return;
+        }
         if (onClick && option) {
             onClick(option);
         }
@@ -39,8 +42,18 @@ function ContextMenuItem(_a) {
             onClick(value);
         }
     };
-    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
+    var textColorTheme;
+    if (isSelected) {
+        textColorTheme = 'sysTextPrimary';
+    }
+    if (!isSelected && state === 'normal') {
+        textColorTheme = 'sysTextSecondary';
+    }
+    if (state === 'disabled') {
+        textColorTheme = 'sysTextTertiary';
+    }
+    return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
 }
 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/mobile/components/Dropdown/Dropdown.d.ts

@@ -2,14 +2,15 @@
 import { TFunctionResult } from 'i18next';
 import { PDSValueOption } from '../../../common';
 declare type Props = {
-    size?: 'large' | 'small';
-    hintText?: TFunctionResult;
+    colorTheme?: 'none' | 'dark';
     defaultValue?: PDSValueOption;
-    valueArray: PDSValueOption[];
+    hintText?: TFunctionResult;
+    responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
+    size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    colorTheme?: 'none' | 'dark';
+    valueArray: PDSValueOption[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ size, hintText, defaultValue, valueArray, selectionMode, state, colorTheme, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, defaultValue, hintText, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,9 +31,9 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.selectionMode, selectionMode = _d === void 0 ? 'single' : _d, _e = _a.size, size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = (0, react_1.useState)(defaultValue), selectedOption = _h[0], setSelectedOption = _h[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
             setSelectedOption(defaultValue);
@@ -97,8 +97,8 @@ function Dropdown(_a) {
             return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
     };
-    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur },
-        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme },
+    return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
+        react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getDarkTextColor() })),
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
@@ -113,9 +113,15 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n"], ["\n  height: 48px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '432px');
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: ", ";\n"], ["\n  height: 32px;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return (responsiveMode === 'use' ? '100%' : '188px');
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
@@ -123,7 +129,7 @@ var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateOb
             small: small
         }[size];
 });
-var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var state = _a.state, colorTheme = _a.colorTheme, theme = _a.theme;
     switch (state) {
         case 'disabled':

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
 export declare type IconButtonProps = {
     fillType?: 'fill' | 'line';
@@ -14,8 +14,8 @@ export declare type IconButtonProps = {
     colorTheme?: 'none' | 'line1' | 'line2';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    onClick?: (...args: any) => any;
-    onMouseDown?: (...args: any) => any;
+    onClick?: () => any;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => any;
 };
 declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onMouseDown }: IconButtonProps): JSX.Element;
 export default IconButton;

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

@@ -37,9 +37,9 @@ function IconButton(_a) {
             onClick();
         }
     };
-    var handleMouseDown = function () {
+    var handleMouseDown = function (e) {
         if (onMouseDown) {
-            onMouseDown();
+            onMouseDown(e);
         }
     };
     var iconStateColorObj = {

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

@@ -259,7 +259,7 @@ 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  ", ";\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\n  ", ";\n"])), function (_a) {
+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\n  ", ";\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\n  ", ";\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) {

package/package.json

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

package/release-note.md

@@ -1,12 +1,22 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.3.13]
+## [v1.3.16]
 
-### Layout
-* WS
-  * LayoutWS의 우측부분이 너비를 제대로 잡을 수 있도록 수정 (width: 100%; -> flex: 1; overflow: hidden;)
 ### Component
-* D_AdminListItem
-  * 각 컬럼에 overflow: auto; 추가 (내용의 길이가 길어지면 타 칼럼을 침범하는 경우가 있음)
-  * rowSize가 high일때 깨지는 부분 해결
-* D_ TextLabel
-  * tooltipText 사용시 뜨는 아이콘의 fillType과 color 수정
+* BlogTextField
+  * validation관련 내부 로직 변경
+    * useFormContext의 onChange와 커스텀 onChange를 엮음
+* ContextMenuItem
+  * 내부 텍스트 컬러 변경
+    * 기본 : sysTextSecondary
+    * 선택 됨 : sysTextPrimary
+    * 비활성화 됨 : sysTextTertiary
+* Dropdown
+  * responsiveMode prop 추가
+* ImageView
+  * 스타일 관련 내부 로직 변경
+    * radius -> $radius
+* TextLabel
+  * 기본 스펙에서 hyphen제거
+
+### Color
+* 컬러 키 값 22.05.19 12시 10분 기준 싱크