pds-dev-kit-web 0.6.1 → 0.6.4

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

@@ -124,5 +124,8 @@
     "sys_widget_green_01": "darkgreen500",
     "sys_component_base_black_opacity30": "black/opacity30",
     "sys_area_background": "darkgrey50/opacity65",
-    "sys_border_white_opacity30": "white/opacity30"
+    "sys_border_white_opacity30": "white/opacity30",
+    "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

@@ -124,5 +124,8 @@
     "sys_widget_green_01": "green500",
     "sys_component_base_black_opacity30": "black/opacity30",
     "sys_area_background": "darkgrey50/opacity65",
-    "sys_border_white_opacity30": "white/opacity30"
+    "sys_border_white_opacity30": "white/opacity30",
+    "sys_container_background_wt": "grey30",
+    "sys_channeldesc_grey_03": "darkgrey400",
+    "sys_channeldesc_border_grey_03": "darkgrey100"
 }

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

@@ -51,5 +51,6 @@
     "navy100": "#6E77A9",
     "darknavy100": "#7A82B2",
     "opacity80": "CC",
-    "opacity50": "80"
+    "opacity50": "80",
+    "grey30": "#f9fafb"
 }

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",
@@ -447,5 +447,14 @@
     "ui_36": "sys_component_base_black_opacity80",
     "ui_37": "sys_component_base_black_opacity30",
     "ui_39": "sys_area_background",
-    "ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30"
+    "ui_cpnt_divider_white_opacity30": "sys_border_white_opacity30",
+    "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

@@ -1,59 +1,4 @@
 declare const colorSet: {
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -181,6 +126,65 @@ declare const colorSet: {
         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;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -632,6 +636,15 @@ declare const colorSet: {
         ui_37: string;
         ui_39: string;
         ui_cpnt_divider_white_opacity30: 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;
@@ -760,6 +773,9 @@ declare const colorSet: {
         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

@@ -4,13 +4,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 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 = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
     UIColor: UIColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default
 };

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

@@ -448,4 +448,13 @@ export interface UITheme {
     ui_37: string;
     ui_39: string;
     ui_cpnt_divider_white_opacity30: 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/common/styles/index.d.ts

@@ -29,7 +29,6 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -57,7 +56,6 @@ export declare const theme: {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     uiColors: import("..").UITheme;
 };

package/dist/src/common/styles/theme.d.ts

@@ -29,7 +29,6 @@ export declare const desktopLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
-    btn: string;
 };
 export declare const mobileFontSize: {
     displayHeading: string;
@@ -57,7 +56,6 @@ export declare const mobileLineHeight: {
     form2: string;
     blog1: string;
     singleLine: string;
-    btn: string;
 };
 export declare const boxShadow: {
     elevation0: string;

package/dist/src/common/styles/theme.js

@@ -42,8 +42,7 @@ exports.desktopLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal',
-    btn: '1'
+    singleLine: '1'
 };
 exports.mobileFontSize = {
     displayHeading: '32px',
@@ -70,8 +69,7 @@ exports.mobileLineHeight = {
     form1: '1.6',
     form2: '1.6',
     blog1: '1.6',
-    singleLine: 'normal',
-    btn: '1'
+    singleLine: '1'
 };
 exports.boxShadow = {
     elevation0: '0 0 0 0 #0003',
@@ -97,5 +95,5 @@ exports.spacing = {
     spacingM: '288px',
     spacingN: '320px'
 };
-var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, ui_colors_1.uiColors);
+var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK'));
 exports.default = theme;

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,3 +1,8 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
+declare global {
+    interface Window {
+        PdsUtils: any;
+    }
+}
 export declare const customTheme: (tone: string) => any;

package/dist/src/common/styles/ui-colors.js

@@ -36,7 +36,11 @@ var phaseTwoJSON = colorSetting.tone === 'LIGHT' ? colorSet_1.default.PaletteCol
 // ui-color-build-phase
 var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+window.PdsUtils = {
+    tone: 'DARK'
+};
 var customTheme = function (tone) {
+    window.PdsUtils.tone = tone;
     var buildedColors = buildCascadedColors(buildCascadedColors(colorSet_1.default.SemanticColor, tone === 'LIGHT' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark, colorSetting.customPalette), colorSet_1.default.UIColor);
     return buildedColors;
 };

package/dist/src/common/types/styled-components.d.ts

@@ -30,7 +30,6 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     mobileFontSize: {
         displayHeading: string;
@@ -58,7 +57,6 @@ export interface PdsDevKitTheme {
         form2: string;
         blog1: string;
         singleLine: string;
-        btn: string;
     };
     boxShadow: {
         elevation0: 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/Chip/Chip.js

@@ -29,21 +29,21 @@ function Chip(_a) {
                 return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
                     chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
                         react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
                     chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
                 return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", btnMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", btnMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
             case 'removable':
                 return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: "sysTextSecondary" }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
                     react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
@@ -52,7 +52,7 @@ function Chip(_a) {
                         react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
                                 ? 'ui_cpnt_chip_fill_icon_active_01'
                                 : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", btnMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());

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

@@ -41,7 +41,7 @@ function DesktopTabBar(_a) {
     };
     var textLabel = function (value, isSubText) {
         if (isSubText) {
-            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', btnMode: "use" }));
+            return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
         }
         if (styleTheme === 'content') {
             return (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: pathname === value.path ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname === value.path ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
@@ -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;";