pds-dev-kit-web 0.6.3 → 0.6.6

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ArrowRoundLeft = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { d: "M11.713386,2 C8.94538602,2 6.34438602,3.143 4.45738602,5.139 L4.45738602,3.46 C4.45738602,3.046 4.12138602,2.71 3.70738602,2.71 C3.29338602,2.71 2.95738602,3.046 2.95738602,3.46 L2.95738602,6.743 C2.95738602,7.311 3.41938602,7.772 3.98638602,7.772 L7.26938602,7.772 C7.68338602,7.772 8.01938602,7.437 8.01938602,7.022 C8.01938602,6.608 7.68338602,6.272 7.26938602,6.272 L5.44938602,6.272 C7.05938602,4.512 9.31338602,3.5 11.713386,3.5 C16.401386,3.5 20.215386,7.313 20.215386,12.002 C20.215386,16.69 16.401386,20.504 11.713386,20.504 C7.82638602,20.504 4.43938602,17.878 3.47638602,14.117 C3.37338602,13.716 2.96638602,13.478 2.56438602,13.577 C2.16238602,13.68 1.92138602,14.089 2.02338602,14.49 C3.15638602,18.914 7.14138602,22.004 11.713386,22.004 C17.228386,22.004 21.715386,17.517 21.715386,12.002 C21.715386,6.487 17.228386,2 11.713386,2", fill: color, fillRule: "evenodd" })));
+};
+exports.default = ArrowRoundLeft;

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var PostVote = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
+            react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+                react_1.default.createElement("path", { fill: color, d: "M20.9009,14.3097 L2.8079,14.3097 C2.3619,14.3097 1.9999,14.6717 1.9999,15.1177 L1.9999,20.0557 C1.9999,21.4367 3.1199,22.5557 4.4999,22.5557 L19.2089,22.5557 C20.5899,22.5557 21.7089,21.4367 21.7089,20.0557 L21.7089,15.1177 C21.7089,14.6717 21.3479,14.3097 20.9009,14.3097 L20.9009,14.3097 Z M20.2089,15.8097 L20.2089,20.0557 C20.2089,20.6067 19.7609,21.0557 19.2089,21.0557 L4.4999,21.0557 C3.9489,21.0557 3.4999,20.6067 3.4999,20.0557 L3.4999,15.8097 L20.2089,15.8097 Z" }),
+                react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.8862,10.5243 L17.8352,10.5243 C18.4132,10.5243 18.9402,10.8563 19.1892,11.3783 L20.9232,15.0113 M2.8081,15.0116 L4.8051,11.3116 C5.0671,10.8266 5.5741,10.5246 6.1251,10.5246 L6.9291,10.5246" }),
+                react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.7806,12.768 L6.9286,12.768 L6.9286,4 C6.9286,3.171 7.6006,2.5 8.4286,2.5 L15.2806,2.5 C16.1086,2.5 16.7806,3.171 16.7806,4 L16.7806,12.768 Z M9.4939,7.325 L11.2569,9.35 L14.0359,6.278" })))));
+};
+exports.default = PostVote;

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

@@ -29,6 +29,6 @@ var react_1 = __importDefault(require("react"));
 var TenSecBackArrow = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
     return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
-        react_1.default.createElement("path", { d: "M11.7259917,3.4677 L12.9139917,2.2797 C13.2069917,1.9867 13.2069917,1.5127 12.9139917,1.2197 C12.6209917,0.9267 12.1469917,0.9267 11.8539917,1.2197 L9.53299167,3.5397 C9.13099167,3.9407 9.13099167,4.5957 9.53299167,4.9967 L11.8539917,7.3167 C12,7.4637 12.1919917,7.5367 12.3839917,7.5367 C12.5759917,7.5367 12.7679917,7.4637 12.9139917,7.3167 C13.2069917,7.0237 13.2069917,6.5497 12.9139917,6.2567 L11.6289917,4.9707 C14.0139917,4.8687 16.3209917,5.7417 18.0169917,7.4387 C19.6229917,9.0437 20.5069917,11.1797 20.5069917,13.4497 C20.5069917,15.7217 19.6229917,17.8567 18.0169917,19.4617 C14.7019917,22.7757 9.30899167,22.7757 5.99399167,19.4617 C3.24499167,16.7137 2.70699167,12.4617 4.68499167,9.1217 C4.89599167,8.7657 4.77799167,8.3057 4.42099167,8.0947 C4.06599167,7.8827 3.60499167,8.0017 3.39399167,8.3577 C1.06799167,12.2877 1.70099167,17.2897 4.93299167,20.5227 C6.88299167,22.4727 9.44399167,23.4467 12.0059917,23.4467 C14.5659917,23.4467 17.1279917,22.4727 19.0779917,20.5227 C20.9669917,18.6337 22.0069917,16.1217 22.0069917,13.4497 C22.0069917,10.7787 20.9669917,8.2677 19.0779917,6.3777 C17.1209917,4.4207 14.4699917,3.3967 11.7259917,3.4677 Z", fill: color, fillRule: "evenodd" })));
+        react_1.default.createElement("path", { d: "M18.6549432,19.1 C16.8049432,20.94 14.3649432,21.96 11.7549432,21.96 C9.1549432,21.96 6.7049432,20.94 4.8649432,19.1 C1.7049432,15.95 1.0949432,11.07 3.3549432,7.24 C3.5049432,7 3.8049432,6.92 4.0449432,7.06 C4.2849432,7.2 4.3649432,7.51 4.2249432,7.75 C2.1849432,11.19 2.7349432,15.56 5.5649432,18.39 C7.2249432,20.05 9.4149432,20.96 11.7549432,20.96 C14.0949432,20.96 16.2949432,20.05 17.9449432,18.39 C21.3549432,14.98 21.3549432,9.43 17.9449432,6.01 C16.0949432,4.16 13.5249432,3.24 10.9149432,3.49 C10.8649432,3.49 10.8249432,3.48 10.7749432,3.47 L12.4849432,5.19 C12.6849432,5.38 12.6849432,5.7 12.4849432,5.89 C12.3949432,5.99 12.2649432,6.04 12.1349432,6.04 C12.0049432,6.04 11.8749432,5.99 11.7849432,5.89 L9.4549432,3.57 C9.1549432,3.27 9.1549432,2.77 9.4549432,2.47 L11.7849432,0.15 C11.9749432,-0.05 12.2949432,-0.05 12.4849432,0.15 C12.6849432,0.34 12.6849432,0.66 12.4849432,0.86 L10.8449432,2.49 C13.7549432,2.23 16.5949432,3.25 18.6549432,5.31 C22.4549432,9.11 22.4549432,15.3 18.6549432,19.1", fill: color, fillRule: "evenodd" })));
 };
 exports.default = TenSecBackArrow;

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

@@ -29,6 +29,6 @@ var react_1 = __importDefault(require("react"));
 var TenSecForwardArrow = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
     return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
-        react_1.default.createElement("path", { d: "M20.613,8.35875 C20.402,8.00175 19.942,7.88375 19.585,8.09475 C19.229,8.30575 19.111,8.76575 19.322,9.12275 C21.3,12.46275 20.761,16.71375 18.013,19.46275 C16.407,21.06775 14.273,21.95275 12.002,21.95275 C9.731,21.95275 7.596,21.06775 5.99,19.46275 C4.384,17.85675 3.5,15.72175 3.5,13.45075 C3.5,11.17975 4.384,9.04475 5.99,7.43875 C7.686,5.74175 9.992,4.86575 12.379,4.97075 L11.093,6.25675 C10.8,6.54975 10.8,7.02475 11.093,7.31775 C11.239,7.46375 11.431,7.53775 11.623,7.53775 C11.815,7.53775 12.007,7.46375 12.154,7.31775 L14.476,4.99675 C14.875,4.59475 14.875,3.94275 14.475,3.54075 L12.154,1.21975 C11.861,0.92675 11.386,0.92675 11.093,1.21975 C10.8,1.51275 10.8,1.98775 11.093,2.28075 L12.28,3.46775 C9.534,3.39275 6.886,4.42175 4.929,6.37875 C3.04,8.26675 2,10.77975 2,13.45075 C2,16.12275 3.04,18.63375 4.929,20.52275 C6.818,22.41275 9.33,23.45275 12.002,23.45275 C14.674,23.45275 17.185,22.41275 19.074,20.52275 C22.307,17.29075 22.94,12.28875 20.613,8.35875", fill: color, fillRule: "evenodd" })));
+        react_1.default.createElement("path", { d: "M18.64,19.1 C16.8,20.94 14.35,21.96 11.75,21.96 C9.14,21.96 6.69,20.94 4.85,19.1 C1.05,15.3 1.05,9.11 4.85,5.31 C6.91,3.25 9.76,2.23 12.65,2.49 L11.01,0.86 C10.82,0.66 10.82,0.34 11.01,0.15 C11.21,-0.05 11.53,-0.05 11.72,0.15 L14.04,2.47 C14.35,2.77 14.35,3.27 14.04,3.57 L11.72,5.89 C11.62,5.99 11.5,6.04 11.37,6.04 C11.24,6.04 11.11,5.99 11.01,5.89 C10.82,5.7 10.82,5.38 11.01,5.19 L12.73,3.47 C12.68,3.48 12.63,3.49 12.58,3.49 C9.97,3.23 7.41,4.16 5.56,6.01 C2.15,9.43 2.15,14.98 5.56,18.39 C7.21,20.05 9.41,20.96 11.75,20.96 C14.08,20.96 16.28,20.05 17.93,18.39 C20.76,15.56 21.32,11.19 19.28,7.75 C19.14,7.51 19.22,7.2 19.46,7.06 C19.7,6.92 20,7 20.14,7.24 C22.41,11.07 21.79,15.95 18.64,19.1", fill: color, fillRule: "evenodd" })));
 };
 exports.default = TenSecForwardArrow;

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

@@ -8,6 +8,7 @@ declare const lineIcons: {
     readonly ic_arrow_right: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_right_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_right_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_arrow_round_left: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_arrow_up_bold: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -75,6 +76,7 @@ declare const lineIcons: {
     readonly ic_post_promotion: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_promotion_p: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_social: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_post_vote: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_welcome: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_profit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_qr: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -11,6 +11,7 @@ var ArrowLeftBold_1 = __importDefault(require("./ArrowLeftBold"));
 var ArrowRight_1 = __importDefault(require("./ArrowRight"));
 var ArrowRight2_1 = __importDefault(require("./ArrowRight2"));
 var ArrowRightBold_1 = __importDefault(require("./ArrowRightBold"));
+var ArrowRoundLeft_1 = __importDefault(require("./ArrowRoundLeft"));
 var ArrowUp_1 = __importDefault(require("./ArrowUp"));
 var ArrowUpBold_1 = __importDefault(require("./ArrowUpBold"));
 var Bell_1 = __importDefault(require("./Bell"));
@@ -78,6 +79,7 @@ var PostPhotobook_1 = __importDefault(require("./PostPhotobook"));
 var PostPromotion_1 = __importDefault(require("./PostPromotion"));
 var PostPromotionP_1 = __importDefault(require("./PostPromotionP"));
 var PostSocial_1 = __importDefault(require("./PostSocial"));
+var PostVote_1 = __importDefault(require("./PostVote"));
 var PostWelcome_1 = __importDefault(require("./PostWelcome"));
 var Profit_1 = __importDefault(require("./Profit"));
 var Qr_1 = __importDefault(require("./Qr"));
@@ -135,6 +137,7 @@ var lineIcons = {
     ic_arrow_right: ArrowRight_1.default,
     ic_arrow_right_2: ArrowRight2_1.default,
     ic_arrow_right_bold: ArrowRightBold_1.default,
+    ic_arrow_round_left: ArrowRoundLeft_1.default,
     ic_arrow_up: ArrowUp_1.default,
     ic_arrow_up_bold: ArrowUpBold_1.default,
     ic_bell: Bell_1.default,
@@ -202,6 +205,7 @@ var lineIcons = {
     ic_post_promotion: PostPromotion_1.default,
     ic_post_promotion_p: PostPromotionP_1.default,
     ic_post_social: PostSocial_1.default,
+    ic_post_vote: PostVote_1.default,
     ic_post_welcome: PostWelcome_1.default,
     ic_profit: Profit_1.default,
     ic_qr: Qr_1.default,

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

@@ -125,5 +125,7 @@
     "sys_component_base_black_opacity30": "black/opacity30",
     "sys_area_background": "darkgrey50/opacity65",
     "sys_border_white_opacity30": "white/opacity30",
-    "sys_container_background_wt": "grey950"
+    "sys_container_background_wt": "grey950",
+    "sys_channeldesc_grey_03": "darkgrey400",
+    "sys_channeldesc_border_grey_03": "darkgrey100"
 }

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

@@ -125,5 +125,7 @@
     "sys_component_base_black_opacity30": "black/opacity30",
     "sys_area_background": "darkgrey50/opacity65",
     "sys_border_white_opacity30": "white/opacity30",
-    "sys_container_background_wt": "grey30"
+    "sys_container_background_wt": "grey30",
+    "sys_channeldesc_grey_03": "darkgrey400",
+    "sys_channeldesc_border_grey_03": "darkgrey100"
 }

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

@@ -47,7 +47,7 @@
     "ui_cpnt_tabbar_base_area_sub": "sys_component_base_01",
     "ui_cpnt_tabbar_border_active_indicator_primary": "usr_brand_primary",
     "ui_cpnt_tabbar_text_active_primary": "usr_brand_primary",
-    "ui_cpnt_tabbar_border_active_indicator": "sys_border_line_01",
+    "ui_cpnt_tabbar_border_active_indicator": "sys_border_line_05",
     "ui_cpnt_tabbar_text_active": "sys_text_grey_01",
     "ui_cpnt_tabbar_text_inactive_01": "sys_text_grey_02",
     "ui_2": "sys_text_grey_01",
@@ -280,8 +280,8 @@
     "ui_cpnt_card_icon_basic": "sys_widget_primary_01",
     "ui_cpnt_card_icon_custom": "sys_widget_grey_01",
     "ui_cpnt_card_icon_create": "sys_widget_grey_01",
-    "ui_cpnt_modal_dimmed": "sys_background_dimmed_65",
-    "ui_cpnt_alertdialog_dimmed": "sys_background_dimmed_65",
+    "ui_cpnt_modal_dimmed": "sys_background_dimmed_20",
+    "ui_cpnt_alertdialog_dimmed": "sys_background_dimmed_20",
     "ui_cpnt_bottomsheet_base": "sys_component_base_02",
     "ui_cpnt_bottomsheet_icon_03": "sys_widget_grey_03",
     "ui_cpnt_button_icon_white": "sys_widget_white",
@@ -448,9 +448,13 @@
     "ui_37": "sys_component_base_black_opacity30",
     "ui_39": "sys_area_background",
     "ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30",
-    "ui_pagemenucontainer_background_wt": "sys_container_background_wt",
-    "ui_contentscontainer_background_wt": "sys_container_background_wt",
-    "ui_pagemenuarea_background_wt": "sys_container_background_01",
-    "ui_contentsarea_background_wt": "sys_container_background_01",
-    "ui_cpnt_standardbanner_base_default": "sys_component_base_02"
+    "ui_toppagemenucontainer_background_wt_m": "sys_container_background_wt",
+    "ui_contentscontainer_background_wt_m": "sys_container_background_wt",
+    "ui_toppagemenuarea_background_wt_m": "sys_container_background_01",
+    "ui_contentsarea_background_wt_m": "sys_container_background_01",
+    "ui_cpnt_standardbanner_base_default": "sys_component_base_02",
+    "ui_channeldesc_white": "sys_text_white",
+    "ui_channeldesc_grey_03": "sys_channeldesc_grey_03",
+    "ui_channeldesc_border_grey_03": "sys_channeldesc_border_grey_03",
+    "ui_cpnt_bottomsheet_border": "sys_border_line_01"
 }

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

@@ -127,135 +127,8 @@ declare const colorSet: {
         sys_area_background: string;
         sys_border_white_opacity30: string;
         sys_container_background_wt: string;
-    };
-    readonly PaletteColor_light: {
-        sys_container_background_01: string;
-        sys_container_background_02: string;
-        sys_container_background_03: string;
-        sys_background_dimmed: string;
-        sys_text_grey_01: string;
-        sys_text_grey_02: string;
-        sys_text_grey_03: string;
-        sys_text_white: string;
-        sys_text_brand_primary: string;
-        sys_text_error_01: string;
-        sys_widget_grey_01: string;
-        sys_widget_grey_02: string;
-        sys_widget_grey_03: string;
-        sys_widget_primary_01: string;
-        sys_widget_error_01: string;
-        sys_widget_warning_01: string;
-        sys_widget_success_01: string;
-        sys_widget_white: string;
-        sys_border_area_01: string;
-        sys_border_line_01: string;
-        sys_border_line_02: string;
-        sys_border_line_03: string;
-        sys_border_line_04: string;
-        sys_border_line_05: string;
-        sys_component_base_01: string;
-        sys_component_base_02: string;
-        sys_component_base_03: string;
-        sys_component_base_red: string;
-        sys_component_base_white: string;
-        sys_component_base_white_opacity00: string;
-        sys_on_base_white_opacity00: string;
-        sys_on_base_white_opacity30: string;
-        sys_on_base_black_opacity20: string;
-        usr_brand_primary: string;
-        usr_brand_secondary: string;
-        usr_brand_secondary_variant: string;
-        usr_background: string;
-        usr_surface: string;
-        usr_border: string;
-        usr_on_brand_primary: string;
-        usr_on_brand_secondary: string;
-        usr_on_background: string;
-        usr_on_surface: string;
-        sys_widget_status_active_01: string;
-        sys_text_success_01: string;
-        sys_widget_grey_04: string;
-        sys_text_active: string;
-        sys_component_base_blue: string;
-        sys_on_base_black_opacity65: string;
-        sys_component_base_04: string;
-        sys_component_base_black: string;
-        sys_component_base_black_opacity00: string;
-        usr_text_brand_secondary_variant: string;
-        usr_text_brand_primary: string;
-        usr_text_brand_on_primary: string;
-        sys_text_brand_secondary_variant: string;
-        sys_component_base_navy: string;
-        sys_widget_lightgreen: string;
-        sys_border_line_06: string;
-        sys_background_dimmed_20: string;
-        sys_widget_pink: string;
-        sys_widget_primary_opacity20: string;
-        sys_widget_secondary_variant_01: string;
-        usr_component_base_brand_primary_opacity10: string;
-        sys_temp_grey_01: string;
-        sys_temp_grey_02: string;
-        sys_temp_grey_03: string;
-        sys_temp_grey_04: string;
-        sys_temp_grey_05: string;
-        sys_temp_white: string;
-        sys_temp_primary_01: string;
-        sys_temp_secondary_01: string;
-        sys_temp_red: string;
-        sys_temp_white_opacity_00: string;
-        sys_temp_dimmed: string;
-        sys_temp_black: string;
-        sys_temp_primary_02: string;
-        sys_temp_primary_03: string;
-        sys_temp_secondary_02: string;
-        sys_temp_lightgreen_01: string;
-        sys_text_grey_04: string;
-        sys_papp_post_social_background: string;
-        sys_papp_post_notice_background: string;
-        sys_papp_post_free_background: string;
-        sys_papp_vod_background: string;
-        sys_papp_vodplus_background: string;
-        sys_papp_live_background: string;
-        sys_selcontrols_base_off_disabled: string;
-        sys_selcontrols_base_on_disabled: string;
-        sys_component_base_blue_opacity10: string;
-        sys_component_base_05: string;
-        sys_background_dimmed_65: string;
-        sys_temp_grey_06: string;
-        sys_on_base_white_opacity10: string;
-        sys_on_base_black_opacity10: string;
-        sys_component_base_05_opacity00: string;
-        sys_papp_post_notice_link: string;
-        sys_component_base_navy_light: string;
-        sys_component_base_orange: string;
-        sys_component_base_grey: string;
-        sys_component_base_black_opacity80: string;
-        sys_text_darkgrey_02: string;
-        sys_border_line_darktheme_01: string;
-        sys_border_line_darktheme_02: string;
-        sys_component_base_darktheme_01: string;
-        sys_component_base_darktheme_02: string;
-        sys_component_base_darktheme_03: string;
-        sys_text_grey_darktheme_01: string;
-        sys_text_grey_darktheme_02: string;
-        sys_text_grey_darktheme_03: string;
-        sys_widget_grey_darktheme_01: string;
-        sys_widget_grey_darktheme_02: string;
-        sys_widget_grey_darktheme_03: string;
-        sys_component_base_green: string;
-        sys_text_error_darktheme_01: string;
-        sys_border_line_darktheme_03: string;
-        sys_border_line_darktheme_04: string;
-        usr_widget_brand_primary_darktheme_01: string;
-        usr_text_brand_primary_darktheme_01: string;
-        sys_component_base_black_opacity50: string;
-        sys_component_base_card: string;
-        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
-        sys_widget_green_01: string;
-        sys_component_base_black_opacity30: string;
-        sys_area_background: string;
-        sys_border_white_opacity30: string;
-        sys_container_background_wt: string;
+        sys_channeldesc_grey_03: string;
+        sys_channeldesc_border_grey_03: string;
     };
     readonly SemanticColor: {
         blue500: string;
@@ -763,11 +636,146 @@ declare const colorSet: {
         ui_37: string;
         ui_39: string;
         ui_cpnt_divider_white_opacity30: string;
-        ui_pagemenucontainer_background_wt: string;
-        ui_contentscontainer_background_wt: string;
-        ui_pagemenuarea_background_wt: string;
-        ui_contentsarea_background_wt: string;
+        ui_toppagemenucontainer_background_wt_m: string;
+        ui_contentscontainer_background_wt_m: string;
+        ui_toppagemenuarea_background_wt_m: string;
+        ui_contentsarea_background_wt_m: string;
         ui_cpnt_standardbanner_base_default: string;
+        ui_channeldesc_white: string;
+        ui_channeldesc_grey_03: string;
+        ui_channeldesc_border_grey_03: string;
+        ui_cpnt_bottomsheet_border: string;
+    };
+    readonly PaletteColor_light: {
+        sys_container_background_01: string;
+        sys_container_background_02: string;
+        sys_container_background_03: string;
+        sys_background_dimmed: string;
+        sys_text_grey_01: string;
+        sys_text_grey_02: string;
+        sys_text_grey_03: string;
+        sys_text_white: string;
+        sys_text_brand_primary: string;
+        sys_text_error_01: string;
+        sys_widget_grey_01: string;
+        sys_widget_grey_02: string;
+        sys_widget_grey_03: string;
+        sys_widget_primary_01: string;
+        sys_widget_error_01: string;
+        sys_widget_warning_01: string;
+        sys_widget_success_01: string;
+        sys_widget_white: string;
+        sys_border_area_01: string;
+        sys_border_line_01: string;
+        sys_border_line_02: string;
+        sys_border_line_03: string;
+        sys_border_line_04: string;
+        sys_border_line_05: string;
+        sys_component_base_01: string;
+        sys_component_base_02: string;
+        sys_component_base_03: string;
+        sys_component_base_red: string;
+        sys_component_base_white: string;
+        sys_component_base_white_opacity00: string;
+        sys_on_base_white_opacity00: string;
+        sys_on_base_white_opacity30: string;
+        sys_on_base_black_opacity20: string;
+        usr_brand_primary: string;
+        usr_brand_secondary: string;
+        usr_brand_secondary_variant: string;
+        usr_background: string;
+        usr_surface: string;
+        usr_border: string;
+        usr_on_brand_primary: string;
+        usr_on_brand_secondary: string;
+        usr_on_background: string;
+        usr_on_surface: string;
+        sys_widget_status_active_01: string;
+        sys_text_success_01: string;
+        sys_widget_grey_04: string;
+        sys_text_active: string;
+        sys_component_base_blue: string;
+        sys_on_base_black_opacity65: string;
+        sys_component_base_04: string;
+        sys_component_base_black: string;
+        sys_component_base_black_opacity00: string;
+        usr_text_brand_secondary_variant: string;
+        usr_text_brand_primary: string;
+        usr_text_brand_on_primary: string;
+        sys_text_brand_secondary_variant: string;
+        sys_component_base_navy: string;
+        sys_widget_lightgreen: string;
+        sys_border_line_06: string;
+        sys_background_dimmed_20: string;
+        sys_widget_pink: string;
+        sys_widget_primary_opacity20: string;
+        sys_widget_secondary_variant_01: string;
+        usr_component_base_brand_primary_opacity10: string;
+        sys_temp_grey_01: string;
+        sys_temp_grey_02: string;
+        sys_temp_grey_03: string;
+        sys_temp_grey_04: string;
+        sys_temp_grey_05: string;
+        sys_temp_white: string;
+        sys_temp_primary_01: string;
+        sys_temp_secondary_01: string;
+        sys_temp_red: string;
+        sys_temp_white_opacity_00: string;
+        sys_temp_dimmed: string;
+        sys_temp_black: string;
+        sys_temp_primary_02: string;
+        sys_temp_primary_03: string;
+        sys_temp_secondary_02: string;
+        sys_temp_lightgreen_01: string;
+        sys_text_grey_04: string;
+        sys_papp_post_social_background: string;
+        sys_papp_post_notice_background: string;
+        sys_papp_post_free_background: string;
+        sys_papp_vod_background: string;
+        sys_papp_vodplus_background: string;
+        sys_papp_live_background: string;
+        sys_selcontrols_base_off_disabled: string;
+        sys_selcontrols_base_on_disabled: string;
+        sys_component_base_blue_opacity10: string;
+        sys_component_base_05: string;
+        sys_background_dimmed_65: string;
+        sys_temp_grey_06: string;
+        sys_on_base_white_opacity10: string;
+        sys_on_base_black_opacity10: string;
+        sys_component_base_05_opacity00: string;
+        sys_papp_post_notice_link: string;
+        sys_component_base_navy_light: string;
+        sys_component_base_orange: string;
+        sys_component_base_grey: string;
+        sys_component_base_black_opacity80: string;
+        sys_text_darkgrey_02: string;
+        sys_border_line_darktheme_01: string;
+        sys_border_line_darktheme_02: string;
+        sys_component_base_darktheme_01: string;
+        sys_component_base_darktheme_02: string;
+        sys_component_base_darktheme_03: string;
+        sys_text_grey_darktheme_01: string;
+        sys_text_grey_darktheme_02: string;
+        sys_text_grey_darktheme_03: string;
+        sys_widget_grey_darktheme_01: string;
+        sys_widget_grey_darktheme_02: string;
+        sys_widget_grey_darktheme_03: string;
+        sys_component_base_green: string;
+        sys_text_error_darktheme_01: string;
+        sys_border_line_darktheme_03: string;
+        sys_border_line_darktheme_04: string;
+        usr_widget_brand_primary_darktheme_01: string;
+        usr_text_brand_primary_darktheme_01: string;
+        sys_component_base_black_opacity50: string;
+        sys_component_base_card: string;
+        sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
+        sys_widget_green_01: string;
+        sys_component_base_black_opacity30: string;
+        sys_area_background: string;
+        sys_border_white_opacity30: string;
+        sys_container_background_wt: string;
+        sys_channeldesc_grey_03: string;
+        sys_channeldesc_border_grey_03: string;
     };
 };
 export default colorSet;

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

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

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

@@ -448,9 +448,13 @@ export interface UITheme {
     ui_37: string;
     ui_39: string;
     ui_cpnt_divider_white_opacity30: string;
-    ui_pagemenucontainer_background_wt: string;
-    ui_contentscontainer_background_wt: string;
-    ui_pagemenuarea_background_wt: string;
-    ui_contentsarea_background_wt: string;
+    ui_toppagemenucontainer_background_wt_m: string;
+    ui_contentscontainer_background_wt_m: string;
+    ui_toppagemenuarea_background_wt_m: string;
+    ui_contentsarea_background_wt_m: string;
     ui_cpnt_standardbanner_base_default: string;
+    ui_channeldesc_white: string;
+    ui_channeldesc_grey_03: string;
+    ui_channeldesc_border_grey_03: string;
+    ui_cpnt_bottomsheet_border: string;
 }

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -202,7 +202,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             dark: theme.ui_cpnt_textfield_text_darktheme_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -225,6 +225,15 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
             none: theme.ui_cpnt_textfield_text_hint,
             dark: theme.ui_cpnt_textfield_text_darktheme_hint
         }[colorTheme];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
+}, function (_a) {
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopLineHeight[textSize];
 }, function (_a) {
     var state = _a.state;
     return state &&

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

@@ -27,7 +27,7 @@ function Checkbox(_a) {
     var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
-    var isChecked = (0, react_hook_form_1.useWatch)({ name: name, defaultValue: false });
+    var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
     var icon = function () {
         switch (state) {
             case 'normal': {
@@ -48,7 +48,7 @@ function Checkbox(_a) {
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
                         ? 'ui_cpnt_selcontrols_text_default'
                         : 'ui_cpnt_selcontrols_text_disabled' }))),
-            react_1.default.createElement("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, value: name, disabled: state === 'disabled' })))));
+            react_1.default.createElement("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled' })))));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: inline-flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: inline-flex;\n"])), function (_a) {

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

@@ -52,7 +52,7 @@ function DesktopTabBar(_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(S_TabBox, null,
-            textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), onClick: function () {
+            textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname.includes(value.path), styleTheme: styleTheme, onClick: function () {
                     handleClick(value);
                 } },
                 textLabel(value, false),
@@ -69,8 +69,10 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_border_active_indicator_primary;
+    var theme = _a.theme, styleTheme = _a.styleTheme;
+    return styleTheme === 'content'
+        ? theme.ui_cpnt_tabbar_border_active_indicator
+        : theme.ui_cpnt_tabbar_border_active_indicator_primary;
 }, function (_a) {
     var isActive = _a.isActive;
     return !isActive && "display: none;";

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

@@ -151,14 +151,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingB;
 });
 var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingB;
 });
 var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFB.js

@@ -34,7 +34,7 @@ var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templa
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n  margin: 0;\n"], ["\n  flex-grow: 1;\n  margin: 0;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"], ["\n  flex-grow: 1;\n  margin: 0;\n  max-width: 720px;\n  min-width: 512px;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-left: 24px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  width: 360px;\n"])));
 exports.default = WFB;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -23,11 +23,11 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  min-width: 912px;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  padding-bottom: 88px;\n  padding-top: 24px;\n  ", ";\n"])), function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n  max-width: 720px;\n  min-width: 512px;\n"], ["\n  flex-grow: 1;\n  max-width: 720px;\n  min-width: 512px;\n"])));
 var S_Content2 = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 24px;\n  min-width: 360px;\n  width: 360px;\n"], ["\n  margin-left: 24px;\n  min-width: 360px;\n  width: 360px;\n"])));
 exports.default = WSE;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -2,7 +2,7 @@
 export declare type ContentsContainerProps = {
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1' | 'WTN_2';
     containerColor?: string;
     areaColor?: string;
 };

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

@@ -29,7 +29,8 @@ var ContentsContainer = function (_a) {
         WTG_1: react_1.default.createElement(variation_1.WTG, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WTH_1: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTH_2: (react_1.default.createElement(variation_1.WTH, { layoutType: "WTH_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTI_1: react_1.default.createElement(variation_1.WTI, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
+        WTI_1: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTI_2: (react_1.default.createElement(variation_1.WTI, { layoutType: "WTI_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTJ_1: (react_1.default.createElement(variation_1.WTJ, { content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WTK_1: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTK_2: (react_1.default.createElement(variation_1.WTK, { layoutType: "WTK_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
@@ -37,7 +38,8 @@ var ContentsContainer = function (_a) {
         WTL_1: react_1.default.createElement(variation_1.WTL, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WTM_1: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WTM_2: (react_1.default.createElement(variation_1.WTM, { layoutType: "WTM_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WTN_1: react_1.default.createElement(variation_1.WTN, { content1: content1, containerColor: containerColor, areaColor: areaColor })
+        WTN_1: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WTN_2: (react_1.default.createElement(variation_1.WTN, { layoutType: "WTN_2", content1: content1, containerColor: containerColor, areaColor: areaColor }))
     }[layoutType]));
 };
 exports.default = ContentsContainer;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTA.js

@@ -17,7 +17,7 @@ var WTA = function (_a) {
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_contentscontainer01_background;
+    return theme.ui_contentscontainer_background_wt_m;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
         WTA_3: 'min-width: 768px;'
     }[layoutType]);
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentsarea_background_wt_m;
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_area_divider;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare type WTIProps = {
     content1?: JSX.Element;
+    layoutType: 'WTI_1' | 'WTI_2';
     containerColor?: string;
     areaColor?: string;
 };
-declare const WTI: ({ content1, containerColor, areaColor }: WTIProps) => JSX.Element;
+declare const WTI: ({ content1, containerColor, areaColor, layoutType }: WTIProps) => JSX.Element;
 export default WTI;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTI.js

@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTI = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTI_1: 'min-width: 1200px;',
+        WTI_2: 'min-width: 960px;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTI_1: 'width: 1200px;',
+        WTI_2: 'width: 960px;'
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTK.js

@@ -17,7 +17,7 @@ var WTK = function (_a) {
 };
 var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n\n  /* NOTE: Container \uB0B4\uC5D0\uC11C area\uAC00 \uC911\uC559\uC815\uB82C\uC77C \uACBD\uC6B0 Container\uC758 min-width\uB97C area\uC640 \uB9DE\uCDB0\uC8FC\uC5B4\uC57C \uD655\uB300\uD558\uAC70\uB098 \uD588\uC744\uB54C \uB0B4\uC6A9\uC774 \uC9E4\uB9AC\uC9C0 \uC54A\uB294\uB2E4. */\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_contentscontainer01_background;
+    return theme.ui_contentscontainer_background_wt_m;
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
@@ -29,7 +29,10 @@ var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (t
         WTK_3: 'min-width: 768px;'
     }[layoutType]);
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  box-sizing: border-box;\n  border-left: 1px solid ", ";\n  border-right: 1px solid ", ";\n  height: 100%;\n  overflow: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_contentsarea_background_wt_m;
+}, function (_a) {
     var theme = _a.theme;
     return theme.ui_area_divider;
 }, function (_a) {

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export declare type WTNProps = {
     content1?: JSX.Element;
+    layoutType: 'WTN_1' | 'WTN_2';
     containerColor?: string;
     areaColor?: string;
 };
-declare const WTN: ({ content1, containerColor, areaColor }: WTNProps) => JSX.Element;
+declare const WTN: ({ content1, containerColor, areaColor, layoutType }: WTNProps) => JSX.Element;
 export default WTN;

package/dist/src/desktop/layout/LayoutWT/Containers/ContentsContainer/variation/WTN.js

@@ -10,19 +10,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WTN = function (_a) {
-    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
+    var content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor, layoutType = _a.layoutType;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
             react_1.default.createElement(S_Content1, null, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 1200px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTN_1: 'min-width: 1200px;',
+        WTN_2: 'min-width: 960px;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  padding-bottom: 88px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WTN_1: 'min-width: 1200px;',
+        WTN_2: 'min-width: 960px;'
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });

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

@@ -43,7 +43,7 @@ var areaLineStyle = (0, styled_components_1.css)(templateObject_1 || (templateOb
 });
 var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_pagemenucontainer_background;
+    return theme.ui_toppagemenucontainer_background_wt_m;
 }, function (_a) {
     var mobileWidth = _a.mobileWidth;
     return mobileWidth &&
@@ -52,7 +52,10 @@ var S_TopPageMenuContainer = styled_components_1.default.div(templateObject_2 ||
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+var S_TopPageMenuArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  margin: 0;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_toppagemenuarea_background_wt_m;
+}, function (_a) {
     var mobileWidth = _a.mobileWidth;
     return mobileWidth && "width: " + mobileWidth + "px;";
 }, function (_a) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_1';
+    layoutType: 'WTA_1' | 'WTA_2' | 'WTA_3' | 'WTB_1' | 'WTC_1' | 'WTD_1' | 'WTD_2' | 'WTD_3' | 'WTD_4' | 'WTD_5' | 'WTD_6' | 'WTE_1' | 'WTF_1' | 'WTF_2' | 'WTF_3' | 'WTF_4' | 'WTF_5' | 'WTF_6' | 'WTG_1' | 'WTH_1' | 'WTH_2' | 'WTI_1' | 'WTI_2' | 'WTJ_1' | 'WTK_1' | 'WTK_2' | 'WTK_3' | 'WTL_1' | 'WTM_1' | 'WTM_2' | 'WTN_2' | 'WTN_1';
     pageMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;
     content1?: JSX.Element;

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

@@ -36,6 +36,7 @@ var ContainersBox = function (_a) {
             WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
             WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -43,7 +44,8 @@ var ContainersBox = function (_a) {
             WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-            WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+            WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -69,6 +71,7 @@ var ContainersBox = function (_a) {
                 WTH_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTH_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTI_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTI_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
                 WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -76,7 +79,8 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -101,6 +105,7 @@ var ContainersBox = function (_a) {
                 WTH_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTH_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTI_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTI_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WTJ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTK_2: react_1.default.createElement(react_1.default.Fragment, null),
@@ -108,7 +113,8 @@ var ContainersBox = function (_a) {
                 WTL_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTM_2: react_1.default.createElement(react_1.default.Fragment, null),
-                WTN_1: react_1.default.createElement(react_1.default.Fragment, null)
+                WTN_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTN_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })))));

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

@@ -12,6 +12,6 @@ var Icon = function (_a) {
     var SelectedIcon = fillType === 'line'
         ? line_1.default[iconName] || fill_1.default[iconName]
         : fill_1.default[iconName] || line_1.default[iconName];
-    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size }));
+    return (react_1.default.createElement(SelectedIcon, { color: (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK')[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
 };
 exports.default = Icon;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -202,7 +202,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             dark: theme.ui_cpnt_textfield_text_darktheme_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  width: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -225,6 +225,15 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
             none: theme.ui_cpnt_textfield_text_hint,
             dark: theme.ui_cpnt_textfield_text_darktheme_hint
         }[colorTheme];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopFontSize[textSize];
+}, function (_a) {
+    var textWeight = _a.textWeight;
+    return common_1.fontWeight[textWeight];
+}, function (_a) {
+    var textSize = _a.textSize;
+    return common_1.desktopLineHeight[textSize];
 }, function (_a) {
     var state = _a.state;
     return state &&

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

@@ -27,7 +27,7 @@ function Checkbox(_a) {
     var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
-    var isChecked = (0, react_hook_form_1.useWatch)({ name: name, defaultValue: false });
+    var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
     var icon = function () {
         switch (state) {
             case 'normal': {

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

@@ -151,14 +151,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingB;
 });
 var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingC;
+    return theme.spacing.spacingB;
 });
 var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;

package/package.json

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