pds-dev-kit-web-test 0.3.55 → 0.3.57

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Sales = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M18.5965,7.2006 L14.5325,11.2666 C14.3075,11.4926 13.9635,11.5496 13.6765,11.4116 L10.1645,9.7176 L6.4675,13.2006 C6.3225,13.3366 6.1385,13.4046 5.9535,13.4046 C5.7535,13.4046 5.5545,13.3256 5.4075,13.1686 C5.1235,12.8676 5.1375,12.3926 5.4385,12.1086 L9.5125,8.2716 C9.7385,8.0586 10.0725,8.0066 10.3525,8.1426 L13.8485,9.8286 L17.5355,6.1396 C17.8285,5.8466 18.3035,5.8466 18.5965,6.1396 C18.8895,6.4326 18.8895,6.9076 18.5965,7.2006 L18.5965,7.2006 Z M18.4295,17.4886 C18.4295,17.9026 18.0945,18.2386 17.6795,18.2386 C17.2655,18.2386 16.9295,17.9026 16.9295,17.4886 L16.9295,11.0276 C16.9295,10.6136 17.2655,10.2776 17.6795,10.2776 C18.0945,10.2776 18.4295,10.6136 18.4295,11.0276 L18.4295,17.4886 Z M14.6435,17.4886 C14.6435,17.9026 14.3075,18.2386 13.8935,18.2386 C13.4785,18.2386 13.1435,17.9026 13.1435,17.4886 L13.1435,14.2586 C13.1435,13.8446 13.4785,13.5086 13.8935,13.5086 C14.3075,13.5086 14.6435,13.8446 14.6435,14.2586 L14.6435,17.4886 Z M10.8565,17.4886 C10.8565,17.9026 10.5205,18.2386 10.1065,18.2386 C9.6925,18.2386 9.3565,17.9026 9.3565,17.4886 L9.3565,13.2276 C9.3565,12.8136 9.6925,12.4776 10.1065,12.4776 C10.5205,12.4776 10.8565,12.8136 10.8565,13.2276 L10.8565,17.4886 Z M7.0705,17.4886 C7.0705,17.9026 6.7345,18.2386 6.3205,18.2386 C5.9065,18.2386 5.5705,17.9026 5.5705,17.4886 L5.5705,15.8166 C5.5705,15.4026 5.9065,15.0666 6.3205,15.0666 C6.7345,15.0666 7.0705,15.4026 7.0705,15.8166 L7.0705,17.4886 Z M18.6335,2.7496 L5.3665,2.7496 C3.5075,2.7496 1.9995,4.2566 1.9995,6.1166 L1.9995,17.8836 C1.9995,19.7426 3.5075,21.2496 5.3665,21.2496 L18.6335,21.2496 C20.4925,21.2496 21.9995,19.7426 21.9995,17.8836 L21.9995,6.1166 C21.9995,4.2566 20.4925,2.7496 18.6335,2.7496 L18.6335,2.7496 Z" }) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M18.6797,17.7361 C18.6797,18.2881 18.2317,18.7361 17.6797,18.7361 C17.1277,18.7361 16.6797,18.2881 16.6797,17.7361 L16.6797,11.7651 C16.6797,11.2131 17.1277,10.7651 17.6797,10.7651 C18.2317,10.7651 18.6797,11.2131 18.6797,11.7651 L18.6797,17.7361 Z M14.8927,17.7361 C14.8927,18.2881 14.4457,18.7361 13.8927,18.7361 C13.3407,18.7361 12.8927,18.2881 12.8927,17.7361 L12.8927,14.9951 C12.8927,14.4431 13.3407,13.9951 13.8927,13.9951 C14.4457,13.9951 14.8927,14.4431 14.8927,14.9951 L14.8927,17.7361 Z M11.1067,17.7361 C11.1067,18.2881 10.6587,18.7361 10.1067,18.7361 C9.5547,18.7361 9.1067,18.2881 9.1067,17.7361 L9.1067,13.9651 C9.1067,13.4131 9.5547,12.9651 10.1067,12.9651 C10.6587,12.9651 11.1067,13.4131 11.1067,13.9651 L11.1067,17.7361 Z M7.3207,17.7361 C7.3207,18.2881 6.8727,18.7361 6.3207,18.7361 C5.7677,18.7361 5.3207,18.2881 5.3207,17.7361 L5.3207,16.0751 C5.3207,15.5231 5.7677,15.0751 6.3207,15.0751 C6.8727,15.0751 7.3207,15.5231 7.3207,16.0751 L7.3207,17.7361 Z M5.6337,11.5651 L9.4537,7.7281 C9.7517,7.4291 10.2087,7.3591 10.5827,7.5501 L13.6617,9.1341 L16.9727,5.6021 C17.3397,5.2111 17.9517,5.1921 18.3417,5.5571 C18.7317,5.9231 18.7517,6.5361 18.3867,6.9261 L14.5757,10.9911 C14.2787,11.3071 13.8097,11.3881 13.4257,11.1911 L10.3267,9.5961 L7.0067,12.9311 C6.8177,13.1211 6.5687,13.2161 6.3207,13.2161 C6.0737,13.2161 5.8257,13.1221 5.6367,12.9341 C5.2577,12.5571 5.2567,11.9441 5.6337,11.5651 L5.6337,11.5651 Z M18.6337,2.7501 L5.3667,2.7501 C3.5067,2.7501 1.9997,4.2571 1.9997,6.1161 L1.9997,17.8841 C1.9997,19.7431 3.5067,21.2501 5.3667,21.2501 L18.6337,21.2501 C20.4927,21.2501 21.9997,19.7431 21.9997,17.8841 L21.9997,6.1161 C21.9997,4.2571 20.4927,2.7501 18.6337,2.7501 L18.6337,2.7501 Z" }) })));
 };
 exports.default = Sales;

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Shoppingbag = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M21.3123,8.559 C20.9013,8.037 20.2853,7.737 19.6213,7.737 L4.3793,7.737 C3.7143,7.737 3.0983,8.037 2.6873,8.559 C2.2773,9.081 2.1313,9.751 2.2893,10.397 L4.6623,20.158 C4.8973,21.125 5.7563,21.801 6.7523,21.801 L17.2473,21.801 C18.2433,21.801 19.1033,21.125 19.3373,20.158 L21.7113,10.397 C21.8683,9.751 21.7233,9.081 21.3123,8.559" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M7.3994,11.4104 L7.3994,7.0244 C7.3994,4.4474 9.4884,2.3594 12.0644,2.3594 L12.0644,2.3594 C14.6414,2.3594 16.7304,4.4474 16.7304,7.0244 L16.7304,11.4104" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M8.1495,7.0244 C8.1495,4.8654 9.9055,3.1084 12.0645,3.1084 C14.2235,3.1084 15.9805,4.8654 15.9805,7.0244 L15.9805,7.7374 L8.1495,7.7374 L8.1495,7.0244 Z M21.3125,8.5594 C20.9015,8.0374 20.2845,7.7374 19.6205,7.7374 L17.4805,7.7374 L17.4805,7.0244 C17.4805,4.0384 15.0505,1.6084 12.0645,1.6084 C9.0785,1.6084 6.6495,4.0384 6.6495,7.0244 L6.6495,7.7374 L4.3795,7.7374 C3.7145,7.7374 3.0985,8.0374 2.6875,8.5594 C2.2775,9.0814 2.1315,9.7514 2.2885,10.3974 L4.6615,20.1584 C4.8975,21.1254 5.7565,21.8014 6.7525,21.8014 L17.2475,21.8014 C18.2435,21.8014 19.1025,21.1254 19.3375,20.1584 L21.7115,10.3974 C21.8685,9.7514 21.7225,9.0814 21.3125,8.5594 L21.3125,8.5594 Z" }) })));
 };
 exports.default = Shoppingbag;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var StarShaped = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M16.3459,21.1607 C16.0679,21.1607 15.7869,21.1137 15.5169,21.0177 L12.1589,19.8237 C12.0559,19.7857 11.9449,19.7867 11.8419,19.8227 L8.4829,21.0177 C7.7159,21.2897 6.8609,21.1677 6.1999,20.6877 C5.5399,20.2077 5.1589,19.4347 5.1819,18.6187 L5.2799,15.0557 C5.2829,14.9477 5.2479,14.8397 5.1819,14.7537 L3.0079,11.9287 C2.5109,11.2827 2.3639,10.4327 2.6159,9.6567 C2.8679,8.8797 3.4859,8.2787 4.2689,8.0487 L7.6879,7.0407 C7.7919,7.0097 7.8839,6.9427 7.9449,6.8537 L9.9599,3.9127 C10.4209,3.2407 11.1829,2.8387 11.9999,2.8377 L11.9999,2.8377 C12.8159,2.8377 13.5789,3.2397 14.0399,3.9127 L16.0549,6.8537 C16.1169,6.9437 16.2079,7.0097 16.3129,7.0407 L19.7309,8.0487 C20.5139,8.2787 21.1319,8.8797 21.3839,9.6557 C21.6369,10.4317 21.4899,11.2817 20.9919,11.9287 L18.8189,14.7537 C18.7519,14.8397 18.7179,14.9467 18.7209,15.0557 L18.8179,18.6187 C18.8409,19.4337 18.4599,20.2077 17.8009,20.6877 C17.3719,20.9987 16.8619,21.1607 16.3459,21.1607" }) })));
+};
+exports.default = StarShaped;

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Target = function (_a) {
     var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M12.4655,4.4594 C12.0315,4.3904 11.5915,4.3444 11.1385,4.3444 C6.5045,4.3444 2.7475,8.1014 2.7475,12.7354 C2.7475,17.3694 6.5045,21.1264 11.1385,21.1264 C15.7725,21.1264 19.5295,17.3694 19.5295,12.7354 C19.5295,12.2824 19.4835,11.8414 19.4145,11.4084 M11.1384,12.7353 L18.5744,5.2993" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M11.1383,7.0402 C14.2843,7.0402 16.8333,9.5902 16.8333,12.7352 C16.8333,15.8802 14.2843,18.4302 11.1383,18.4302 C7.9923,18.4302 5.4433,15.8802 5.4433,12.7352 C5.4433,9.5902 7.9923,7.0402 11.1383,7.0402 Z M11.1383,10.5342 C9.9233,10.5342 8.9373,11.5192 8.9373,12.7352 C8.9373,13.9512 9.9233,14.9362 11.1383,14.9362 C12.3543,14.9362 13.3393,13.9512 13.3393,12.7352 C13.3393,11.5192 12.3543,10.5342 11.1383,10.5342 Z M18.5801,1.5501 C18.8951,1.2341 19.4351,1.4481 19.4491,1.8941 L19.5291,4.3441 L21.9801,4.4241 C22.4261,4.4391 22.6391,4.9791 22.3241,5.2941 L19.4801,8.1381 L15.8531,8.0201 L15.7351,4.3941 Z" })] })) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M11.1384,3.8672 C11.5734,3.8672 12.0324,3.9072 12.5394,3.9872 C13.1884,4.0902 13.6304,4.7002 13.5274,5.3482 C13.4244,5.9972 12.8164,6.4432 12.1664,6.3372 C11.7834,6.2762 11.4474,6.2462 11.1384,6.2462 C7.5604,6.2462 4.6504,9.1582 4.6504,12.7352 C4.6504,16.3132 7.5604,19.2242 11.1384,19.2242 C14.7164,19.2242 17.6274,16.3132 17.6274,12.7352 C17.6274,12.4242 17.5974,12.0882 17.5364,11.7092 C17.4324,11.0602 17.8744,10.4502 18.5234,10.3462 C19.1704,10.2392 19.7824,10.6842 19.8864,11.3332 C19.9674,11.8382 20.0064,12.2972 20.0064,12.7352 C20.0064,17.6252 16.0284,21.6032 11.1384,21.6032 C6.2484,21.6032 2.2704,17.6252 2.2704,12.7352 C2.2704,7.8462 6.2484,3.8672 11.1384,3.8672 Z M18.58,1.5503 C18.895,1.2343 19.435,1.4473 19.449,1.8933 L19.529,4.3443 L21.98,4.4243 C22.426,4.4383 22.639,4.9783 22.324,5.2943 L19.48,8.1383 L17.223,8.0653 L15.421,9.8663 C15.972,10.6873 16.294,11.6733 16.294,12.7353 C16.294,15.5823 13.986,17.8913 11.138,17.8913 C8.291,17.8913 5.983,15.5823 5.983,12.7353 C5.983,9.8883 8.291,7.5793 11.138,7.5793 C12.2,7.5793 13.187,7.9023 14.007,8.4523 L15.809,6.6513 L15.735,4.3943 Z M11.138,10.7433 C10.038,10.7433 9.146,11.6353 9.146,12.7353 C9.146,13.8353 10.038,14.7273 11.138,14.7273 C12.239,14.7273 13.131,13.8353 13.131,12.7353 C13.131,12.5593 13.101,12.3923 13.058,12.2293 L12.195,13.0923 C12,13.2873 11.744,13.3853 11.488,13.3853 C11.233,13.3853 10.976,13.2873 10.781,13.0923 C10.391,12.7013 10.391,12.0693 10.781,11.6783 L11.644,10.8153 C11.482,10.7723 11.314,10.7433 11.138,10.7433 Z" }) })));
 };
 exports.default = Target;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Xmark = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M5.5,5.5 L18.5,18.5 M18.5,5.5 L5.5,18.5" }) })));
+};
+exports.default = Xmark;

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

@@ -104,6 +104,7 @@ declare const fillIcons: {
     readonly ic_speaker_wave_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_split_screen: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_star: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_star_shaped: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_subscribers: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_target: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_text: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -135,5 +136,6 @@ declare const fillIcons: {
     readonly ic_video_subtitle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_video_type: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_vodplus: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_xmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default fillIcons;

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

@@ -107,6 +107,7 @@ var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
 var SpeakerWave2_1 = __importDefault(require("./SpeakerWave2"));
 var SplitScreen_1 = __importDefault(require("./SplitScreen"));
 var Star_1 = __importDefault(require("./Star"));
+var StarShaped_1 = __importDefault(require("./StarShaped"));
 var Subscribers_1 = __importDefault(require("./Subscribers"));
 var Target_1 = __importDefault(require("./Target"));
 var Text_1 = __importDefault(require("./Text"));
@@ -138,6 +139,7 @@ var VideoResolution_1 = __importDefault(require("./VideoResolution"));
 var VideoSubtitle_1 = __importDefault(require("./VideoSubtitle"));
 var VideoType_1 = __importDefault(require("./VideoType"));
 var Vodplus_1 = __importDefault(require("./Vodplus"));
+var Xmark_1 = __importDefault(require("./Xmark"));
 var fillIcons = {
     ic_accordion: Accordion_1.default,
     ic_align_bottom: AlignBottom_1.default,
@@ -243,6 +245,7 @@ var fillIcons = {
     ic_speaker_wave_2: SpeakerWave2_1.default,
     ic_split_screen: SplitScreen_1.default,
     ic_star: Star_1.default,
+    ic_star_shaped: StarShaped_1.default,
     ic_subscribers: Subscribers_1.default,
     ic_target: Target_1.default,
     ic_text: Text_1.default,
@@ -273,6 +276,7 @@ var fillIcons = {
     ic_video_resolution: VideoResolution_1.default,
     ic_video_subtitle: VideoSubtitle_1.default,
     ic_video_type: VideoType_1.default,
-    ic_vodplus: Vodplus_1.default
+    ic_vodplus: Vodplus_1.default,
+    ic_xmark: Xmark_1.default
 };
 exports.default = fillIcons;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var StarShaped = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M13.2153,4.4787 L15.2303,7.4187 C15.4223,7.6987 15.7043,7.9037 16.0293,7.9997 L19.4483,9.0077 C20.4413,9.2997 20.8313,10.4987 20.1993,11.3187 L18.0263,14.1447 C17.8193,14.4127 17.7113,14.7447 17.7203,15.0837 L17.8183,18.6467 C17.8473,19.6817 16.8273,20.4217 15.8523,20.0757 L12.4933,18.8807 C12.1743,18.7677 11.8253,18.7677 11.5063,18.8807 L8.1473,20.0757 C7.1723,20.4217 6.1523,19.6817 6.1813,18.6467 L6.2793,15.0837 C6.2883,14.7447 6.1813,14.4127 5.9743,14.1447 L3.8003,11.3187 C3.1693,10.4987 3.5583,9.2997 4.5513,9.0077 L7.9703,7.9997 C8.2963,7.9037 8.5783,7.6987 8.7693,7.4187 L10.7843,4.4787 C11.3703,3.6247 12.6303,3.6247 13.2153,4.4787 Z" }) })));
+};
+exports.default = StarShaped;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Ticket = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M2.5,17.4929 C2.5,18.5979 3.395,19.4929 4.5,19.4929 L19.5,19.4929 C20.605,19.4929 21.5,18.5979 21.5,17.4929 L21.5,14.8589 C19.921,14.8589 18.641,13.5789 18.641,11.9999 C18.641,10.4209 19.921,9.1409 21.5,9.1409 L21.5,6.5069 C21.5,5.4029 20.605,4.5069 19.5,4.5069 L4.5,4.5069 C3.395,4.5069 2.5,5.4029 2.5,6.5069 L2.5,17.4929 Z M15.7509,6.9942 L15.7509,8.5032 M15.7509,11.2453 L15.7509,12.7543 M15.7509,15.4963 L15.7509,17.0053" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M9.6975,8.6638 L10.5855,9.9598 C10.6695,10.0828 10.7945,10.1728 10.9375,10.2148 L12.4445,10.6598 C12.8815,10.7878 13.0535,11.3168 12.7755,11.6778 L11.8175,12.9228 C11.7265,13.0408 11.6785,13.1868 11.6825,13.3368 L11.7255,14.9068 C11.7385,15.3628 11.2895,15.6888 10.8595,15.5358 L9.3795,15.0098 C9.2385,14.9598 9.0855,14.9598 8.9445,15.0098 L7.4645,15.5358 C7.0345,15.6888 6.5855,15.3628 6.5985,14.9068 L6.6415,13.3368 C6.6455,13.1868 6.5975,13.0408 6.5065,12.9228 L5.5485,11.6778 C5.2705,11.3168 5.4425,10.7878 5.8795,10.6598 L7.3865,10.2148 C7.5295,10.1728 7.6545,10.0828 7.7385,9.9598 L8.6265,8.6638 C8.8845,8.2878 9.4395,8.2878 9.6975,8.6638" })] })) })));
+};
+exports.default = Ticket;

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

@@ -222,6 +222,7 @@ declare const lineIcons: {
     readonly ic_speaker_wave_1: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_speaker_wave_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_standard_banner: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_star_shaped: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_subscribers: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_success: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_target: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -236,6 +237,7 @@ declare const lineIcons: {
     readonly ic_text_align_middle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_text_align_right: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_text_align_top: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_ticket: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_time: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_toggle_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -225,6 +225,7 @@ var SpeakerOff_1 = __importDefault(require("./SpeakerOff"));
 var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
 var SpeakerWave2_1 = __importDefault(require("./SpeakerWave2"));
 var StandardBanner_1 = __importDefault(require("./StandardBanner"));
+var StarShaped_1 = __importDefault(require("./StarShaped"));
 var Subscribers_1 = __importDefault(require("./Subscribers"));
 var Success_1 = __importDefault(require("./Success"));
 var Target_1 = __importDefault(require("./Target"));
@@ -239,6 +240,7 @@ var TextAlignLeft_1 = __importDefault(require("./TextAlignLeft"));
 var TextAlignMiddle_1 = __importDefault(require("./TextAlignMiddle"));
 var TextAlignRight_1 = __importDefault(require("./TextAlignRight"));
 var TextAlignTop_1 = __importDefault(require("./TextAlignTop"));
+var Ticket_1 = __importDefault(require("./Ticket"));
 var Time_1 = __importDefault(require("./Time"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
@@ -496,6 +498,7 @@ var lineIcons = {
     ic_speaker_wave_1: SpeakerWave1_1.default,
     ic_speaker_wave_2: SpeakerWave2_1.default,
     ic_standard_banner: StandardBanner_1.default,
+    ic_star_shaped: StarShaped_1.default,
     ic_subscribers: Subscribers_1.default,
     ic_success: Success_1.default,
     ic_target: Target_1.default,
@@ -510,6 +513,7 @@ var lineIcons = {
     ic_text_align_middle: TextAlignMiddle_1.default,
     ic_text_align_right: TextAlignRight_1.default,
     ic_text_align_top: TextAlignTop_1.default,
+    ic_ticket: Ticket_1.default,
     ic_time: Time_1.default,
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,

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

@@ -850,5 +850,6 @@
     "ui_sw_sidebar_divider_vertical": "sys_sw_sidebar_divider_vertical",
     "ui_113": "sys_cpnt_sheet_base_13",
     "ui_114": "sys_component_base_26",
-    "ui_115": "sys_cpnt_sheet_base_14"
+    "ui_115": "sys_cpnt_sheet_base_14",
+    "ui_116": "sys_kakao"
 }

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

@@ -1684,6 +1684,7 @@ declare const colorSet: {
         ui_113: string;
         ui_114: string;
         ui_115: string;
+        ui_116: string;
     };
 };
 export default colorSet;

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

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

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

@@ -17,6 +17,7 @@ export type ContextMenuItemValueOption = {
     iconName?: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
     fontWeight?: 'bold' | 'regular';
+    descText?: PDSTextType;
 };
 export type DropdownValueOption = ContextMenuItemValueOption & {
     state?: 'normal' | 'disabled';

package/dist/src/desktop/components/BasicListItem/RightBox/MainButton.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../hybrid/components");
 var MainButton_1 = require("../../MainButton");
 var MainButton = function (_a) {
     var text = _a.text, state = _a.state, fill = _a.fill, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }));
 };
 exports.default = MainButton;

package/dist/src/desktop/components/BasicListItem/RightBox/Switch.js

@@ -12,7 +12,7 @@ var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Switch = function (_a) {
     var name = _a.name, state = _a.state, status = _a.status, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(S_SwitchWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }) }));
 };
 var S_SwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 exports.default = Switch;

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

@@ -65,15 +65,25 @@ function ContextMenuItem(_a) {
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';
     }
+    var descTextColorTheme;
+    if (isSelected) {
+        descTextColorTheme = 'sysTextTertiary';
+    }
+    if (!isSelected && state === 'normal') {
+        descTextColorTheme = 'sysTextTertiary';
+    }
+    if (state === 'disabled') {
+        descTextColorTheme = 'sysTextTertiary';
+    }
     var getIconColorKey = function () {
         if (state === 'disabled') {
             return 'ui_cpnt_dropdown_display_icon_disabled';
         }
         return 'ui_cpnt_dropdown_display_icon_normal';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
-                option &&
-                'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftSide, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
+                        option &&
+                        'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] }), (0, jsx_runtime_1.jsx)(S_RightSide, { children: (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.descText) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.descText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: descTextColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all", textAlign: "right" })) })] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -87,7 +97,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -107,5 +117,7 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
         cursor: 'not-allowed'
     };
 });
+var S_LeftSide = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_RightSide = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 exports.default = ContextMenuItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -81,7 +81,7 @@ function DesktopHeaderBar(_a) {
     var leftButton2Mode = function () {
         switch (leftBtn2Mode) {
             case 'mbtn': {
-                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_light_bulb", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn })] })) }));
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: styleTheme === 'type_a' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { styleTheme: "secondary", size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "round", baseSize: "xsmall", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconFillType: "fill", iconSize: 16, iconName: "ic_question", iconColorKey: "ui_cpnt_button_icon_primary", fillType: "fill", onClick: handleClickLeft2Btn })] })) }));
             }
             case 'tbtn': {
                 return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { size: "xsmall", text: leftBtn2Text, onClick: handleClickLeft2Btn })] }));

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/SecondaryMenu.js

@@ -19,12 +19,77 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var smoothscroll_polyfill_1 = __importDefault(require("smoothscroll-polyfill"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../..");
+var hooks_1 = require("../../../../common/hooks");
 var MenuItemNav_1 = require("../components/MenuItemNav");
+// NOTE: safari-scroll-behavior-smooth polyfill
+smoothscroll_polyfill_1.default.polyfill();
+var DESKTOP_SCROLL_LEFT = 320;
 function SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })));
+    var _b = (0, react_1.useState)({ node: null }), primaryRef = _b[0], setPrimaryRef = _b[1];
+    var primaryCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setPrimaryRef({ node: node });
+    }, [menus]);
+    (0, react_1.useEffect)(function () {
+        if (!primaryRef.node) {
+            return;
+        }
+        primaryRef.node.addEventListener('wheel', handleScroll);
+        function handleScroll(e) {
+            if (primaryRef.node) {
+                primaryRef.node.scrollTo({ left: primaryRef.node.scrollLeft + e.deltaY });
+            }
+        }
+        return function () {
+            if (!primaryRef.node) {
+                return;
+            }
+            primaryRef.node.removeEventListener('scroll', handleScroll);
+        };
+    }, [primaryRef]);
+    var _c = (0, hooks_1.useDetectOverflow)(primaryRef, true), trigger = _c.trigger, isOverflow = _c.isOverflow, isScrollBoxStart = _c.isScrollBoxStart, isScrollBoxEnd = _c.isScrollBoxEnd;
+    var onClickLeftButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft - DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    var onClickRightButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft + DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_SecondaryMenu, __assign({ style: style }, { children: [isOverflow && !isScrollBoxStart && ((0, jsx_runtime_1.jsx)(S_LeftButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickLeftButton }) }) })), (0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style, onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })), isOverflow && !isScrollBoxEnd && ((0, jsx_runtime_1.jsx)(S_RightButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickRightButton }) }) }))] })));
 }
-var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"])));
+var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
+var S_SecondaryMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"])));
+var S_RightButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to left, ".concat(theme.ui_menu_background, " 10%, ").concat(theme.ui_cpnt_pg_gradient_02, " 90%)");
+});
+var S_LeftButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to right, ".concat(theme.ui_menu_background, " 20%, ").concat(theme.ui_cpnt_pg_gradient_02, " 80%)");
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_button_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_grey_02;
+});
 exports.default = SecondaryMenu;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/DynamicDesktopNavBarTemplates.d.ts

@@ -237,7 +237,6 @@ declare class DynamicDesktopNavBarTemplates {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts

@@ -243,7 +243,6 @@ export declare const TEMPLATES_DATA: {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.js

@@ -74,7 +74,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -188,7 +188,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -235,18 +235,17 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 3,
+            maxLength: 99,
             style: {
                 justifyContent: 'right'
             }
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 2,
+            maxLength: 99,
             style: {
                 width: '100%',
-                justifyContent: 'left',
-                paddingLeft: '32px'
+                justifyContent: 'left'
             }
         },
         userProfileOptions: {

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.d.ts

@@ -12,7 +12,8 @@ export type DesktopTutorialModalInfoType = {
 type DesktopTutorialModalProps = {
     modalTitleText: PDSTextType;
     infoArray: DesktopTutorialModalInfoType[];
+    sequenceMode?: 'use' | 'none';
     onClose: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function DesktopTutorialModal({ modalTitleText, infoArray, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
+declare function DesktopTutorialModal({ modalTitleText, infoArray, sequenceMode, onClose }: DesktopTutorialModalProps): import("react").ReactPortal;
 export default DesktopTutorialModal;