pds-dev-kit-web-test 2.2.96 → 2.2.98

package/dist/src/common/assets/icons/fill/BellStyle.d.ts

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

package/dist/src/common/assets/icons/fill/BellStyle.js

@@ -0,0 +1,30 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BellStyle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M9.8662,17.2515 C9.3182,17.7985 8.9792,18.5545 8.9792,19.3895 C8.9792,21.0575 10.3322,22.4105 12.0002,22.4105 C13.6682,22.4105 15.0202,21.0575 15.0202,19.3895 C15.0202,18.5895 14.7092,17.8615 14.2012,17.3215 M10.3407,3.8907 L10.3407,3.2487 C10.3407,2.3327 11.0837,1.5897 11.9997,1.5897 L11.9997,1.5897 C12.9167,1.5897 13.6597,2.3327 13.6597,3.2487 L13.6597,3.8907 M8.5891,14.1709 L15.4111,14.1709" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M12,3.1058 C8.992,3.1058 6.369,5.1518 5.637,8.0688 L4.191,13.8278 C3.23,13.9958 2.5,14.8328 2.5,15.8408 C2.5,16.9718 3.416,17.8878 4.547,17.8878 L19.453,17.8878 C20.584,17.8878 21.5,16.9718 21.5,15.8408 C21.5,14.8328 20.77,13.9958 19.809,13.8278 L18.363,8.0688 C17.631,5.1518 15.008,3.1058 12,3.1058 M12,4.6058 C14.324,4.6058 16.342,6.1798 16.908,8.4338 L18.354,14.1928 C18.498,14.7668 18.967,15.2028 19.55,15.3048 C19.811,15.3508 20,15.5758 20,15.8408 C20,16.1428 19.755,16.3878 19.453,16.3878 L4.547,16.3878 C4.245,16.3878 4,16.1428 4,15.8408 C4,15.5758 4.189,15.3508 4.45,15.3048 C5.033,15.2028 5.501,14.7668 5.646,14.1928 L7.092,8.4338 C7.657,6.1798 9.676,4.6058 12,4.6058" })] })) })));
+};
+exports.default = BellStyle;

package/dist/src/common/assets/icons/fill/Envelope.d.ts

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

package/dist/src/common/assets/icons/fill/Envelope.js

@@ -0,0 +1,30 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Envelope = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M19.7512,5.0298 L4.2492,5.0298 C3.1442,5.0298 2.2492,5.9248 2.2492,7.0298 L2.2492,16.9698 C2.2492,18.0748 3.1442,18.9698 4.2492,18.9698 L19.7512,18.9698 C20.8562,18.9698 21.7512,18.0748 21.7512,16.9698 L21.7512,7.0298 C21.7512,5.9248 20.8562,5.0298 19.7512,5.0298 Z M2.9538,5.6602 L10.5718,13.4302 C11.3558,14.2302 12.6438,14.2302 13.4278,13.4302 L21.0468,5.6602 M2.9542,18.3394 L9.1702,12.0004 M14.8305,12 L21.0475,18.339" }) })));
+};
+exports.default = Envelope;

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

@@ -16,6 +16,7 @@ declare const fillIcons: {
     readonly ic_bell: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell_notification: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bell_style: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bookmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_button: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_calendar: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -44,6 +45,7 @@ declare const fillIcons: {
     readonly ic_editor_left_side: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_editor_right_side: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_embed: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_envelope: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_eye: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_eye_close: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_face: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -19,6 +19,7 @@ var Audio_1 = __importDefault(require("./Audio"));
 var Bell_1 = __importDefault(require("./Bell"));
 var BellNotification_1 = __importDefault(require("./BellNotification"));
 var BellOff_1 = __importDefault(require("./BellOff"));
+var BellStyle_1 = __importDefault(require("./BellStyle"));
 var Bookmark_1 = __importDefault(require("./Bookmark"));
 var Button_1 = __importDefault(require("./Button"));
 var Calendar_1 = __importDefault(require("./Calendar"));
@@ -47,6 +48,7 @@ var Edit_1 = __importDefault(require("./Edit"));
 var EditorLeftSide_1 = __importDefault(require("./EditorLeftSide"));
 var EditorRightSide_1 = __importDefault(require("./EditorRightSide"));
 var Embed_1 = __importDefault(require("./Embed"));
+var Envelope_1 = __importDefault(require("./Envelope"));
 var Eye_1 = __importDefault(require("./Eye"));
 var EyeClose_1 = __importDefault(require("./EyeClose"));
 var Face_1 = __importDefault(require("./Face"));
@@ -157,6 +159,7 @@ var fillIcons = {
     ic_bell: Bell_1.default,
     ic_bell_notification: BellNotification_1.default,
     ic_bell_off: BellOff_1.default,
+    ic_bell_style: BellStyle_1.default,
     ic_bookmark: Bookmark_1.default,
     ic_button: Button_1.default,
     ic_calendar: Calendar_1.default,
@@ -185,6 +188,7 @@ var fillIcons = {
     ic_editor_left_side: EditorLeftSide_1.default,
     ic_editor_right_side: EditorRightSide_1.default,
     ic_embed: Embed_1.default,
+    ic_envelope: Envelope_1.default,
     ic_eye: Eye_1.default,
     ic_eye_close: EyeClose_1.default,
     ic_face: Face_1.default,

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

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

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

@@ -0,0 +1,30 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var BellStyle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M9.8662,17.2515 C9.3182,17.7985 8.9792,18.5545 8.9792,19.3895 C8.9792,21.0575 10.3322,22.4105 12.0002,22.4105 C13.6682,22.4105 15.0202,21.0575 15.0202,19.3895 C15.0202,18.5895 14.7092,17.8615 14.2012,17.3215 M10.3407,3.8907 L10.3407,3.2487 C10.3407,2.3327 11.0837,1.5897 11.9997,1.5897 L11.9997,1.5897 C12.9167,1.5897 13.6597,2.3327 13.6597,3.2487 L13.6597,3.8907 M8.5891,14.1709 L15.4111,14.1709" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M12,3.1058 C8.992,3.1058 6.369,5.1518 5.637,8.0688 L4.191,13.8278 C3.23,13.9958 2.5,14.8328 2.5,15.8408 C2.5,16.9718 3.416,17.8878 4.547,17.8878 L19.453,17.8878 C20.584,17.8878 21.5,16.9718 21.5,15.8408 C21.5,14.8328 20.77,13.9958 19.809,13.8278 L18.363,8.0688 C17.631,5.1518 15.008,3.1058 12,3.1058 M12,4.6058 C14.324,4.6058 16.342,6.1798 16.908,8.4338 L18.354,14.1928 C18.498,14.7668 18.967,15.2028 19.55,15.3048 C19.811,15.3508 20,15.5758 20,15.8408 C20,16.1428 19.755,16.3878 19.453,16.3878 L4.547,16.3878 C4.245,16.3878 4,16.1428 4,15.8408 C4,15.5758 4.189,15.3508 4.45,15.3048 C5.033,15.2028 5.501,14.7668 5.646,14.1928 L7.092,8.4338 C7.657,6.1798 9.676,4.6058 12,4.6058" })] })) })));
+};
+exports.default = BellStyle;

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

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

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

@@ -0,0 +1,30 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Envelope = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M19.7512,5.0298 L4.2492,5.0298 C3.1442,5.0298 2.2492,5.9248 2.2492,7.0298 L2.2492,16.9698 C2.2492,18.0748 3.1442,18.9698 4.2492,18.9698 L19.7512,18.9698 C20.8562,18.9698 21.7512,18.0748 21.7512,16.9698 L21.7512,7.0298 C21.7512,5.9248 20.8562,5.0298 19.7512,5.0298 Z M2.9538,5.6602 L10.5718,13.4302 C11.3558,14.2302 12.6438,14.2302 13.4278,13.4302 L21.0468,5.6602 M2.9542,18.3394 L9.1702,12.0004 M14.8305,12 L21.0475,18.339" }) })));
+};
+exports.default = Envelope;

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

@@ -25,6 +25,7 @@ declare const lineIcons: {
     readonly ic_bell: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell_notification: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bell_style: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_block_user: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_booking_completed: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -80,6 +81,7 @@ declare const lineIcons: {
     readonly ic_editor_left_side: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_editor_right_side: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_embed: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_envelope: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_end: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_error: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_eye: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -28,6 +28,7 @@ var Audio_1 = __importDefault(require("./Audio"));
 var Bell_1 = __importDefault(require("./Bell"));
 var BellNotification_1 = __importDefault(require("./BellNotification"));
 var BellOff_1 = __importDefault(require("./BellOff"));
+var BellStyle_1 = __importDefault(require("./BellStyle"));
 var BlockUser_1 = __importDefault(require("./BlockUser"));
 var Booking_1 = __importDefault(require("./Booking"));
 var BookingCompleted_1 = __importDefault(require("./BookingCompleted"));
@@ -84,6 +85,7 @@ var EditorLeftSide_1 = __importDefault(require("./EditorLeftSide"));
 var EditorRightSide_1 = __importDefault(require("./EditorRightSide"));
 var Embed_1 = __importDefault(require("./Embed"));
 var End_1 = __importDefault(require("./End"));
+var Envelope_1 = __importDefault(require("./Envelope"));
 var Error_1 = __importDefault(require("./Error"));
 var Eye_1 = __importDefault(require("./Eye"));
 var EyeClose_1 = __importDefault(require("./EyeClose"));
@@ -301,6 +303,7 @@ var lineIcons = {
     ic_bell: Bell_1.default,
     ic_bell_notification: BellNotification_1.default,
     ic_bell_off: BellOff_1.default,
+    ic_bell_style: BellStyle_1.default,
     ic_block_user: BlockUser_1.default,
     ic_booking: Booking_1.default,
     ic_booking_completed: BookingCompleted_1.default,
@@ -356,6 +359,7 @@ var lineIcons = {
     ic_editor_left_side: EditorLeftSide_1.default,
     ic_editor_right_side: EditorRightSide_1.default,
     ic_embed: Embed_1.default,
+    ic_envelope: Envelope_1.default,
     ic_end: End_1.default,
     ic_error: Error_1.default,
     ic_eye: Eye_1.default,

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

@@ -851,5 +851,6 @@
     "ui_113": "sys_cpnt_sheet_base_13",
     "ui_114": "sys_component_base_26",
     "ui_115": "sys_cpnt_sheet_base_14",
-    "ui_116": "sys_kakao"
+    "ui_116": "sys_kakao",
+    "ui_117": "sys_text_black_02"
 }

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

@@ -119,7 +119,7 @@ declare const colorSet: {
         grey300: string;
         darkgrey300: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -475,7 +475,7 @@ declare const colorSet: {
         sys_cpnt_sheet_base_13: string;
         sys_cpnt_sheet_base_14: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1685,6 +1685,7 @@ declare const colorSet: {
         ui_114: string;
         ui_115: string;
         ui_116: string;
+        ui_117: string;
     };
 };
 export default colorSet;

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

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

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

@@ -852,4 +852,5 @@ export interface UITheme {
     ui_114: string;
     ui_115: string;
     ui_116: string;
+    ui_117: string;
 }

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -3,7 +3,7 @@ import type { UiColors } from '../../../../../common';
 export type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1';
+    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSJ_1';
     containerColor?: string;
     areaColor?: string;
     isLoadingContainer1?: boolean;

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

@@ -24,7 +24,8 @@ var ContentsContainer = function (_a) {
             WSG_4: ((0, jsx_runtime_1.jsx)(variation_1.WSG, { layoutType: "WSG_4", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
             WSG_5: ((0, jsx_runtime_1.jsx)(variation_1.WSG, { layoutType: "WSG_5", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
             WSH_1: ((0, jsx_runtime_1.jsx)(variation_1.WSH, { layoutType: "WSH_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
-            WSI_1: ((0, jsx_runtime_1.jsx)(variation_1.WSI, { layoutType: "WSI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }))
+            WSI_1: ((0, jsx_runtime_1.jsx)(variation_1.WSI, { layoutType: "WSI_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey })),
+            WSJ_1: ((0, jsx_runtime_1.jsx)(variation_1.WSJ, { content1: content1, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, overrideContainer1ColorKey: overrideContainer1ColorKey }))
         }[layoutType] }));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSJ.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { UiColors } from '../../../../../../common';
+export type WSJProps = {
+    content1?: JSX.Element;
+    containerColor?: string;
+    areaColor?: string;
+    isLoadingContainer1?: boolean;
+    overrideContainer1ColorKey?: UiColors;
+};
+declare const WSJ: ({ content1, containerColor, areaColor, isLoadingContainer1, overrideContainer1ColorKey }: WSJProps) => JSX.Element;
+export default WSJ;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/WSJ.js

@@ -0,0 +1,66 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+var components_1 = require("../../../../../../common/components");
+var scrollbarStyle_1 = require("../../../../../../common/styles/scroll/scrollbarStyle");
+var WSJ = function (_a) {
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return ((0, jsx_runtime_1.jsx)(S_ContentsContainer, __assign({ "x-pds-name": "ContentsContainer", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSJ", containerColor: containerColor, overrideContainer1ColorKey: overrideContainer1ColorKey }, { children: isLoadingContainer1 ? ((0, jsx_runtime_1.jsx)(components_1.ThreeBarProgress, {})) : ((0, jsx_runtime_1.jsx)(S_ContentsArea, __assign({ "x-pds-name": "ContentsArea", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSJ", areaColor: areaColor }, { children: (0, jsx_runtime_1.jsx)(S_Content1, __assign({ "x-pds-name": "Content1", "x-pds-element-type": "layout", "x-pds-device-type": "desktop", "x-pds-layout-type": "WSJ" }, { children: content1 })) }))) })));
+};
+var overrideStyleContainer1 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideContainer1ColorKey = _a.overrideContainer1ColorKey;
+    return overrideContainer1ColorKey && theme[overrideContainer1ColorKey];
+});
+var S_ContentsContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 960px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var containerColor = _a.containerColor;
+    return "background-color: ".concat(containerColor);
+}, scrollbarStyle_1.scrollbarStyle, overrideStyleContainer1);
+var S_ContentsArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 912px;\n  padding-bottom: 88px;\n  ", ";\n"])), function (_a) {
+    var areaColor = _a.areaColor;
+    return "background-color: ".concat(areaColor);
+});
+var S_Content1 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.default = WSJ;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/index.d.ts

@@ -7,3 +7,4 @@ export { default as WSF } from './WSF';
 export { default as WSG } from './WSG';
 export { default as WSH } from './WSH';
 export { default as WSI } from './WSI';
+export { default as WSJ } from './WSJ';

package/dist/src/desktop/layout/LayoutWS/Containers/ContentsContainer/variation/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WSI = exports.WSH = exports.WSG = exports.WSF = exports.WSE = exports.WSD = exports.WSC = exports.WSB = exports.WSA = void 0;
+exports.WSJ = exports.WSI = exports.WSH = exports.WSG = exports.WSF = exports.WSE = exports.WSD = exports.WSC = exports.WSB = exports.WSA = void 0;
 var WSA_1 = require("./WSA");
 Object.defineProperty(exports, "WSA", { enumerable: true, get: function () { return __importDefault(WSA_1).default; } });
 var WSB_1 = require("./WSB");
@@ -22,3 +22,5 @@ var WSH_1 = require("./WSH");
 Object.defineProperty(exports, "WSH", { enumerable: true, get: function () { return __importDefault(WSH_1).default; } });
 var WSI_1 = require("./WSI");
 Object.defineProperty(exports, "WSI", { enumerable: true, get: function () { return __importDefault(WSI_1).default; } });
+var WSJ_1 = require("./WSJ");
+Object.defineProperty(exports, "WSJ", { enumerable: true, get: function () { return __importDefault(WSJ_1).default; } });

package/dist/src/desktop/layout/LayoutWS/ContainersBox/ContainersBox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { UiColors } from '../../../../common';
 export type ContainersBoxProps = {
-    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1';
+    layoutType: 'WSA_1' | 'WSB_1' | 'WSB_2' | 'WSC_1' | 'WSD_1' | 'WSE_1' | 'WSF_1' | 'WSF_2' | 'WSF_3' | 'WSF_4' | 'WSF_5' | 'WSF_6' | 'WSF_7' | 'WSG_1' | 'WSG_2' | 'WSG_3' | 'WSG_4' | 'WSG_5' | 'WSH_1' | 'WSI_1' | 'WSJ_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Containers_1 = require("../Containers");
 var ContainersBox = function (_a) {
     var layoutType = _a.layoutType, pageMenuContent = _a.pageMenuContent, content1 = _a.content1, content2 = _a.content2, containerColor = _a.containerColor, areaColor = _a.areaColor, isLoadingContainer1 = _a.isLoadingContainer1, isLoadingContainer2 = _a.isLoadingContainer2, overrideContainer1ColorKey = _a.overrideContainer1ColorKey, overrideContainer2ColorKey = _a.overrideContainer2ColorKey;
-    return ((0, jsx_runtime_1.jsxs)(S_ContainersBox, { children: [(0, jsx_runtime_1.jsx)(S_TopWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }) }), (0, jsx_runtime_1.jsx)(S_BottomWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(S_ContainersBox, { children: [pageMenuContent && ((0, jsx_runtime_1.jsx)(S_TopWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.PageMenuContainer, { pageMenuContent: pageMenuContent }) })), (0, jsx_runtime_1.jsx)(S_BottomWrapper, { children: (0, jsx_runtime_1.jsx)(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, isLoadingContainer1: isLoadingContainer1, isLoadingContainer2: isLoadingContainer2, overrideContainer1ColorKey: overrideContainer1ColorKey, overrideContainer2ColorKey: overrideContainer2ColorKey }) })] }));
 };
 var S_ContainersBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));

package/dist/src/sub/AdminList/ToolBar/SearchField.d.ts

@@ -7,9 +7,10 @@ type Props = {
     responsiveMode?: 'none' | 'use';
     size?: 'small' | 'medium' | 'large';
     customWidth?: string;
+    arrowBtnMode?: 'use' | 'none';
     onTarget?: () => void;
     onClickArrowIBtn?: () => void;
     onClickSearchIBtn?: (value: string) => void;
 };
-declare function SearchField({ name, hintText, defaultText, responsiveMode, size, customWidth, onTarget, onClickArrowIBtn, onClickSearchIBtn }: Props): JSX.Element;
+declare function SearchField({ name, hintText, defaultText, responsiveMode, size, customWidth, arrowBtnMode, onTarget, onClickArrowIBtn, onClickSearchIBtn }: Props): JSX.Element;
 export default SearchField;

package/dist/src/sub/AdminList/ToolBar/SearchField.js

@@ -47,10 +47,10 @@ var components_2 = require("../../../desktop/components");
 var components_3 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 function SearchField(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.responsiveMode, responsiveMode = _b === void 0 ? 'none' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, customWidth = _a.customWidth, onTarget = _a.onTarget, onClickArrowIBtn = _a.onClickArrowIBtn, onClickSearchIBtn = _a.onClickSearchIBtn;
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.responsiveMode, responsiveMode = _b === void 0 ? 'none' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, customWidth = _a.customWidth, _d = _a.arrowBtnMode, arrowBtnMode = _d === void 0 ? 'use' : _d, onTarget = _a.onTarget, onClickArrowIBtn = _a.onClickArrowIBtn, onClickSearchIBtn = _a.onClickSearchIBtn;
+    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
     var textFieldBaseRef = (0, react_1.useRef)(null);
-    var _e = (0, react_hook_form_1.useFormContext)(), register = _e.register, getValues = _e.getValues, trigger = _e.trigger;
+    var _f = (0, react_hook_form_1.useFormContext)(), register = _f.register, getValues = _f.getValues, trigger = _f.trigger;
     var validateOnBlur = register(name).onBlur;
     var handleFocus = function () {
         setIsFocused(true);
@@ -76,7 +76,7 @@ function SearchField(_a) {
             onTarget();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", fieldPaddingLeft: 8, deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick })] })) })));
+    return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [arrowBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", fieldPaddingLeft: 8, deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick })] })) })));
 }
 var S_SearchFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;

package/dist/src/sub/AdminList/ToolBar/ToolBar.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common/types';
+import type { DropdownValueOption, FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common/types';
 type Props = {
     searchFieldHintText?: PDSTextType;
     searchFieldDefaultText?: PDSTextType;
     chipTextArray?: PDSValueOption[];
     chipValue?: PDSValueOption;
     searchMode?: 'none' | 'use';
+    searchStyleTheme?: 'searchField' | 'dropdown_searchField';
+    dropdownArray?: DropdownValueOption[];
+    dropdownDefaultText?: DropdownValueOption;
+    dropdownHintText?: PDSTextType;
+    dropdownValue?: DropdownValueOption | null;
+    dropdownWidth?: string;
     chipMode?: 'none' | 'use';
     iBtnMode?: 'none' | 'iBtn_amount1' | 'iBtn_amount2' | 'iBtn_amount3';
     iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
@@ -14,6 +20,7 @@ type Props = {
     iBtn2IconFillType?: 'fill' | 'line';
     iBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn3IconFillType?: 'fill' | 'line';
+    onChangeDropdown?: (option: DropdownValueOption) => void;
     onClickChip?: (option: PDSValueOption) => void;
     onClickSearchFieldResetIBtn?: () => void;
     onClickSearchIBtn?: (value: string) => void;
@@ -22,5 +29,5 @@ type Props = {
     onClickIBtn2?: () => void;
     onClickIBtn3?: () => void;
 };
-declare function ToolBar({ searchFieldHintText, searchFieldDefaultText, chipTextArray, chipValue, searchMode, chipMode, iBtnMode, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, iBtn3IconName, iBtn3IconFillType, onClickChip, onClickSearchFieldResetIBtn, onClickSearchIBtn, onEnterKeyDown, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: Props): JSX.Element;
+declare function ToolBar({ searchFieldHintText, searchFieldDefaultText, chipTextArray, chipValue, searchMode, searchStyleTheme, dropdownArray, dropdownDefaultText, dropdownHintText, dropdownWidth, dropdownValue, onChangeDropdown, chipMode, iBtnMode, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, iBtn3IconName, iBtn3IconFillType, onClickChip, onClickSearchFieldResetIBtn, onClickSearchIBtn, onEnterKeyDown, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: Props): JSX.Element;
 export default ToolBar;

package/dist/src/sub/AdminList/ToolBar/ToolBar.js

@@ -28,8 +28,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ChipList_1 = __importDefault(require("./ChipList"));
 var SearchField_1 = __importDefault(require("./SearchField"));
 function ToolBar(_a) {
-    var searchFieldHintText = _a.searchFieldHintText, searchFieldDefaultText = _a.searchFieldDefaultText, chipTextArray = _a.chipTextArray, chipValue = _a.chipValue, _b = _a.searchMode, searchMode = _b === void 0 ? 'none' : _b, _c = _a.chipMode, chipMode = _c === void 0 ? 'none' : _c, _d = _a.iBtnMode, iBtnMode = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, iBtn3IconName = _a.iBtn3IconName, _g = _a.iBtn3IconFillType, iBtn3IconFillType = _g === void 0 ? 'line' : _g, onClickChip = _a.onClickChip, onClickSearchFieldResetIBtn = _a.onClickSearchFieldResetIBtn, onClickSearchIBtn = _a.onClickSearchIBtn, onEnterKeyDown = _a.onEnterKeyDown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
-    var _h = (0, react_1.useState)(!!searchFieldDefaultText), isShowSearchField = _h[0], setIsShowSearchField = _h[1];
+    var searchFieldHintText = _a.searchFieldHintText, searchFieldDefaultText = _a.searchFieldDefaultText, chipTextArray = _a.chipTextArray, chipValue = _a.chipValue, _b = _a.searchMode, searchMode = _b === void 0 ? 'none' : _b, _c = _a.searchStyleTheme, searchStyleTheme = _c === void 0 ? 'searchField' : _c, dropdownArray = _a.dropdownArray, dropdownDefaultText = _a.dropdownDefaultText, dropdownHintText = _a.dropdownHintText, _d = _a.dropdownWidth, dropdownWidth = _d === void 0 ? '240px' : _d, dropdownValue = _a.dropdownValue, onChangeDropdown = _a.onChangeDropdown, _e = _a.chipMode, chipMode = _e === void 0 ? 'none' : _e, _f = _a.iBtnMode, iBtnMode = _f === void 0 ? 'none' : _f, iBtn1IconName = _a.iBtn1IconName, _g = _a.iBtn1IconFillType, iBtn1IconFillType = _g === void 0 ? 'line' : _g, iBtn2IconName = _a.iBtn2IconName, _h = _a.iBtn2IconFillType, iBtn2IconFillType = _h === void 0 ? 'line' : _h, iBtn3IconName = _a.iBtn3IconName, _j = _a.iBtn3IconFillType, iBtn3IconFillType = _j === void 0 ? 'line' : _j, onClickChip = _a.onClickChip, onClickSearchFieldResetIBtn = _a.onClickSearchFieldResetIBtn, onClickSearchIBtn = _a.onClickSearchIBtn, onEnterKeyDown = _a.onEnterKeyDown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
+    var _k = (0, react_1.useState)(!!searchFieldDefaultText), isShowSearchField = _k[0], setIsShowSearchField = _k[1];
     var methods = (0, react_hook_form_1.useForm)();
     var reset = methods.reset, handleSubmit = methods.handleSubmit;
     var onSubmit = function (_a) {
@@ -73,14 +73,15 @@ function ToolBar(_a) {
             onClickIBtn3();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" }) })) }))] })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }) })] })), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: searchMode === 'use' ? 'spacing_d' : 'spacing_e', spacingType: "width" }), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick })] }))] })) }), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click })), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" })] }))] })) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsxs)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: [searchStyleTheme === 'searchField' && ((0, jsx_runtime_1.jsxs)(S_Flex, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }), (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" })] })), searchStyleTheme === 'dropdown_searchField' && ((0, jsx_runtime_1.jsxs)(S_Flex, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }), (0, jsx_runtime_1.jsx)(components_2.Dropdown, { valueArray: dropdownArray || [], defaultValue: dropdownDefaultText, hintText: dropdownHintText, value: dropdownValue, onChange: onChangeDropdown, size: "medium", customWidth: dropdownWidth }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", arrowBtnMode: "none", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" })] }))] })) })) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }) })] })), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: searchMode === 'use' ? 'spacing_d' : 'spacing_e', spacingType: "width" }), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick })] }))] })) }), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click })), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" })] }))] })) })] }) }));
 }
 var S_ToolBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n  min-height: 40px;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  justify-content: space-between;\n  min-height: 40px;\n"])));
 var S_FilterBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var S_SearchIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n"])));
-var S_IconButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  height: 40px;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"], ["\n  display: flex;\n  height: 40px;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"])), function (_a) {
+var S_Flex = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_SearchIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 40px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 40px;\n"])));
+var S_IconButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  height: 40px;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"], ["\n  display: flex;\n  height: 40px;\n\n  & > :not(:first-child) {\n    margin-left: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
 exports.default = ToolBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/dynamicLayoutContext.d.ts

@@ -1,5 +1,3 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-type DL_CONTEXT_TYPE = Omit<DynamicLayoutProps, 'sections'>;
-export declare const dynamicLayoutContext: import("react").Context<DL_CONTEXT_TYPE>;
-export {};
+export declare const dynamicLayoutContext: import("react").Context<Omit<DynamicLayoutProps, "sections">>;