pds-dev-kit-web-test 2.5.286 → 2.5.288

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

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

package/dist/src/common/assets/icons/fill/BringToFrontArrow.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 BringToFrontArrow = 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: "2", d: "M7.6299,11.1971 L11.9999,6.8271 L16.3699,11.1971 M12,7.7766 L12,16.0326 M5.9982,4.0021 L18.2392,4.0021" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M6.1164,16.0326 C5.0134,16.0326 4.1164,16.9296 4.1164,18.0326 L4.1164,18.8402 C4.1164,19.9422 5.0134,20.8402 6.1164,20.8402 L18.0414,20.8402 C19.1444,20.8402 20.0414,19.9422 20.0414,18.8402 L20.0414,18.0326 C20.0414,16.9296 19.1444,16.0326 18.0414,16.0326 L6.1164,16.0326 Z" })] })) })));
+};
+exports.default = BringToFrontArrow;

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

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

package/dist/src/common/assets/icons/fill/DesktopSync.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 DesktopSync = 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: "M17.4057,3.2659 C19.0567,3.2659 20.4907,4.3829 20.8917,5.9829 C21.0267,6.5189 20.7007,7.0629 20.1657,7.1959 C19.6307,7.3319 19.0867,7.0059 18.9527,6.4699 C18.7737,5.7609 18.1387,5.2659 17.4057,5.2659 L6.5947,5.2659 C5.7147,5.2659 4.9997,5.9809 4.9997,6.8599 L4.9997,13.4599 C4.9997,14.3389 5.7147,15.0549 6.5947,15.0549 L17.4057,15.0549 C18.1607,15.0549 18.8177,14.5199 18.9677,13.7809 C19.0777,13.2399 19.6027,12.8919 20.1467,13.0009 C20.6887,13.1099 21.0377,13.6389 20.9277,14.1799 C20.5887,15.8459 19.1077,17.0549 17.4057,17.0549 L14.5897,17.0549 L14.6037,19.4399 L16.0537,19.4399 C16.6057,19.4399 17.0537,19.8879 17.0537,20.4399 C17.0537,20.9929 16.6057,21.4399 16.0537,21.4399 L7.9457,21.4399 C7.3937,21.4399 6.9457,20.9929 6.9457,20.4399 C6.9457,19.8879 7.3937,19.4399 7.9457,19.4399 L9.4047,19.4399 L9.3917,17.0549 L6.5947,17.0549 C4.6127,17.0549 2.9997,15.4419 2.9997,13.4599 L2.9997,6.8599 C2.9997,4.8779 4.6127,3.2659 6.5947,3.2659 Z M14.5213,6.822 C14.8733,6.47 15.4433,6.47 15.7953,6.822 L18.4993,9.526 C18.8513,9.878 18.8513,10.448 18.4993,10.8 L15.7953,13.504 C15.6193,13.68 15.3893,13.768 15.1583,13.768 C14.9283,13.768 14.6973,13.68 14.5213,13.504 C14.1693,13.152 14.1693,12.582 14.5213,12.23 L15.6863,11.064 L10.0853,11.064 C9.5873,11.064 9.1833,10.661 9.1833,10.163 C9.1833,9.665 9.5873,9.262 10.0853,9.262 L15.6863,9.262 L14.5213,8.096 C14.1693,7.744 14.1693,7.174 14.5213,6.822 Z" }) })));
+};
+exports.default = DesktopSync;

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

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

package/dist/src/common/assets/icons/fill/MoveBackwardArrow.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 MoveBackwardArrow = 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: "M5.9582,3.1598 C4.8552,3.1598 3.9582,4.0568 3.9582,5.1598 L3.9582,6.01574707 C3.9582,7.11774707 4.8552,8.01574707 5.9582,8.01574707 L17.8842,8.01574707 C18.9872,8.01574707 19.8842,7.11774707 19.8842,6.01574707 L19.8842,5.1598 C19.8842,4.0568 18.9872,3.1598 17.8842,3.1598 L5.9582,3.1598 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12,18.8851 L12,7.8261 M15,16.1497 L12,19.1497 L9,16.1497" })] })) })));
+};
+exports.default = MoveBackwardArrow;

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

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

package/dist/src/common/assets/icons/fill/MoveForwardArrow.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 MoveForwardArrow = 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: "M6.1164,16.0326 C5.0134,16.0326 4.1164,16.9296 4.1164,18.0326 L4.1164,18.8402 C4.1164,19.9422 5.0134,20.8402 6.1164,20.8402 L18.0414,20.8402 C19.1444,20.8402 20.0414,19.9422 20.0414,18.8402 L20.0414,18.0326 C20.0414,16.9296 19.1444,16.0326 18.0414,16.0326 L6.1164,16.0326 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12,5.1149 L12,16.1739 M9,7.8503 L12,4.8503 L15,7.8503" })] })) })));
+};
+exports.default = MoveForwardArrow;

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

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

package/dist/src/common/assets/icons/fill/SendToBackArrow.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 SendToBackArrow = 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: "2", d: "M16.3701,12.8029 L12.0001,17.1729 L7.6301,12.8029 M12,16.2234 L12,7.9674 M18.0018,19.9979 L5.7608,19.9979" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M5.9582,3.1598 C4.8552,3.1598 3.9582,4.0568 3.9582,5.1598 L3.9582,6.01574707 C3.9582,7.11774707 4.8552,8.01574707 5.9582,8.01574707 L17.8842,8.01574707 C18.9872,8.01574707 19.8842,7.11774707 19.8842,6.01574707 L19.8842,5.1598 C19.8842,4.0568 18.9872,3.1598 17.8842,3.1598 L5.9582,3.1598 Z" })] })) })));
+};
+exports.default = SendToBackArrow;

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

@@ -157,5 +157,10 @@ declare const fillIcons: {
     readonly ic_group: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_ungroup: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_duplicate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bring_to_front_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_desktop_sync: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_backward_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_forward_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_send_to_back_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default fillIcons;

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

@@ -23,6 +23,7 @@ var BellStyle_1 = __importDefault(require("./BellStyle"));
 var Bookmark_1 = __importDefault(require("./Bookmark"));
 var BringForward_1 = __importDefault(require("./BringForward"));
 var BringToFront_1 = __importDefault(require("./BringToFront"));
+var BringToFrontArrow_1 = __importDefault(require("./BringToFrontArrow"));
 var Button_1 = __importDefault(require("./Button"));
 var Calendar_1 = __importDefault(require("./Calendar"));
 var Call_1 = __importDefault(require("./Call"));
@@ -40,6 +41,7 @@ var CloudDownload_1 = __importDefault(require("./CloudDownload"));
 var Copy_1 = __importDefault(require("./Copy"));
 var Cut_1 = __importDefault(require("./Cut"));
 var Delete_1 = __importDefault(require("./Delete"));
+var DesktopSync_1 = __importDefault(require("./DesktopSync"));
 var Developer_1 = __importDefault(require("./Developer"));
 var DeviceApp_1 = __importDefault(require("./DeviceApp"));
 var DeviceDesktop_1 = __importDefault(require("./DeviceDesktop"));
@@ -87,7 +89,9 @@ var MinusCircle_1 = __importDefault(require("./MinusCircle"));
 var Moon_1 = __importDefault(require("./Moon"));
 var More_1 = __importDefault(require("./More"));
 var MoveBackward_1 = __importDefault(require("./MoveBackward"));
+var MoveBackwardArrow_1 = __importDefault(require("./MoveBackwardArrow"));
 var MoveForward_1 = __importDefault(require("./MoveForward"));
+var MoveForwardArrow_1 = __importDefault(require("./MoveForwardArrow"));
 var PageSetting_1 = __importDefault(require("./PageSetting"));
 var Paint_1 = __importDefault(require("./Paint"));
 var Palette_1 = __importDefault(require("./Palette"));
@@ -114,6 +118,7 @@ var SellerIntro_1 = __importDefault(require("./SellerIntro"));
 var SellerPage_1 = __importDefault(require("./SellerPage"));
 var SendBackward_1 = __importDefault(require("./SendBackward"));
 var SendToBack_1 = __importDefault(require("./SendToBack"));
+var SendToBackArrow_1 = __importDefault(require("./SendToBackArrow"));
 var Setting_1 = __importDefault(require("./Setting"));
 var Shape_1 = __importDefault(require("./Shape"));
 var Shoppingbag_1 = __importDefault(require("./Shoppingbag"));
@@ -317,6 +322,11 @@ var fillIcons = {
     ic_move_forward: MoveForward_1.default,
     ic_group: Group_1.default,
     ic_ungroup: Ungroup_1.default,
-    ic_duplicate: Duplicate_1.default
+    ic_duplicate: Duplicate_1.default,
+    ic_bring_to_front_arrow: BringToFrontArrow_1.default,
+    ic_desktop_sync: DesktopSync_1.default,
+    ic_move_backward_arrow: MoveBackwardArrow_1.default,
+    ic_move_forward_arrow: MoveForwardArrow_1.default,
+    ic_send_to_back_arrow: SendToBackArrow_1.default
 };
 exports.default = fillIcons;

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

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

package/dist/src/common/assets/icons/line/BringToFrontArrow.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 BringToFrontArrow = 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: "M7.6299,11.1971 L11.9999,6.8271 L16.3699,11.1971 M12,7.7766 L12,16.0326 M18.0415,19.8403 L6.1155,19.8403 C5.5635,19.8403 5.1155,19.3923 5.1155,18.8403 L5.1155,17.7823 C5.1155,17.2303 5.5635,16.7823 6.1155,16.7823 L18.0415,16.7823 C18.5935,16.7823 19.0415,17.2303 19.0415,17.7823 L19.0415,18.8403 C19.0415,19.3923 18.5935,19.8403 18.0415,19.8403 Z M5.9982,4.0021 L18.2392,4.0021" }) })));
+};
+exports.default = BringToFrontArrow;

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

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

package/dist/src/common/assets/icons/line/DesktopSync.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 DesktopSync = 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: "M10.3912,16.9794 L10.4102,20.4124 M13.5894,16.9794 L13.6084,20.4124 M7.9462,20.4539 L16.0542,20.4539 M20,13.4733 C20,14.9063 18.838,16.0683 17.405,16.0683 L6.595,16.0683 C5.162,16.0683 4,14.9063 4,13.4733 L4,6.8733 C4,5.4403 5.162,4.2793 6.595,4.2793 L17.405,4.2793 C18.838,4.2793 20,5.4403 20,6.8733 M17.8119,10.1765 L9.4469,10.1765 M15.0765,7.1765 L18.0765,10.1765 L15.0765,13.1765" }) })));
+};
+exports.default = DesktopSync;

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

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

package/dist/src/common/assets/icons/line/MoveBackwardArrow.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 MoveBackwardArrow = 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: "M5.9585,4.1597 L17.8845,4.1597 C18.4365,4.1597 18.8845,4.6077 18.8845,5.1597 L18.8845,6.2177 C18.8845,6.7697 18.4365,7.2177 17.8845,7.2177 L5.9585,7.2177 C5.4065,7.2177 4.9585,6.7697 4.9585,6.2177 L4.9585,5.1597 C4.9585,4.6077 5.4065,4.1597 5.9585,4.1597 Z M12,18.8851 L12,7.8261 M15,16.1497 L12,19.1497 L9,16.1497" }) })));
+};
+exports.default = MoveBackwardArrow;

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

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

package/dist/src/common/assets/icons/line/MoveForwardArrow.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 MoveForwardArrow = 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: "M12,5.1149 L12,16.1739 M9,7.8503 L12,4.8503 L15,7.8503 M18.0415,19.8403 L6.1155,19.8403 C5.5635,19.8403 5.1155,19.3923 5.1155,18.8403 L5.1155,17.7823 C5.1155,17.2303 5.5635,16.7823 6.1155,16.7823 L18.0415,16.7823 C18.5935,16.7823 19.0415,17.2303 19.0415,17.7823 L19.0415,18.8403 C19.0415,19.3923 18.5935,19.8403 18.0415,19.8403 Z" }) })));
+};
+exports.default = MoveForwardArrow;

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

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

package/dist/src/common/assets/icons/line/SendToBackArrow.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 SendToBackArrow = 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: "M16.3701,12.8029 L12.0001,17.1729 L7.6301,12.8029 M12,16.2234 L12,7.9674 M5.9585,4.1597 L17.8845,4.1597 C18.4365,4.1597 18.8845,4.6077 18.8845,5.1597 L18.8845,6.2177 C18.8845,6.7697 18.4365,7.2177 17.8845,7.2177 L5.9585,7.2177 C5.4065,7.2177 4.9585,6.7697 4.9585,6.2177 L4.9585,5.1597 C4.9585,4.6077 5.4065,4.1597 5.9585,4.1597 Z M18.0018,19.9979 L5.7608,19.9979" }) })));
+};
+exports.default = SendToBackArrow;

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

@@ -308,5 +308,10 @@ declare const lineIcons: {
     readonly ic_group: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_ungroup: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_duplicate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bring_to_front_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_desktop_sync: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_backward_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_forward_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_send_to_back_arrow: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default lineIcons;

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

@@ -40,6 +40,7 @@ var Bookmark_1 = __importDefault(require("./Bookmark"));
 var Box_1 = __importDefault(require("./Box"));
 var BringForward_1 = __importDefault(require("./BringForward"));
 var BringToFront_1 = __importDefault(require("./BringToFront"));
+var BringToFrontArrow_1 = __importDefault(require("./BringToFrontArrow"));
 var Business_1 = __importDefault(require("./Business"));
 var Button_1 = __importDefault(require("./Button"));
 var Calendar_1 = __importDefault(require("./Calendar"));
@@ -73,6 +74,7 @@ var Cut_1 = __importDefault(require("./Cut"));
 var Dashboard_1 = __importDefault(require("./Dashboard"));
 var Delivery_1 = __importDefault(require("./Delivery"));
 var DesignPreference_1 = __importDefault(require("./DesignPreference"));
+var DesktopSync_1 = __importDefault(require("./DesktopSync"));
 var Developer_1 = __importDefault(require("./Developer"));
 var DeviceApp_1 = __importDefault(require("./DeviceApp"));
 var DeviceDesktop_1 = __importDefault(require("./DeviceDesktop"));
@@ -135,7 +137,9 @@ var MinusCircle_1 = __importDefault(require("./MinusCircle"));
 var MinusRound_1 = __importDefault(require("./MinusRound"));
 var Moon_1 = __importDefault(require("./Moon"));
 var MoveBackward_1 = __importDefault(require("./MoveBackward"));
+var MoveBackwardArrow_1 = __importDefault(require("./MoveBackwardArrow"));
 var MoveForward_1 = __importDefault(require("./MoveForward"));
+var MoveForwardArrow_1 = __importDefault(require("./MoveForwardArrow"));
 var News_1 = __importDefault(require("./News"));
 var OpenPage_1 = __importDefault(require("./OpenPage"));
 var Order_1 = __importDefault(require("./Order"));
@@ -236,6 +240,7 @@ var SellerIntro_1 = __importDefault(require("./SellerIntro"));
 var SellerPage_1 = __importDefault(require("./SellerPage"));
 var SendBackward_1 = __importDefault(require("./SendBackward"));
 var SendToBack_1 = __importDefault(require("./SendToBack"));
+var SendToBackArrow_1 = __importDefault(require("./SendToBackArrow"));
 var Series_1 = __importDefault(require("./Series"));
 var SeriesList_1 = __importDefault(require("./SeriesList"));
 var Setting_1 = __importDefault(require("./Setting"));
@@ -619,6 +624,11 @@ var lineIcons = {
     ic_move_forward: MoveForward_1.default,
     ic_group: Group_1.default,
     ic_ungroup: Ungroup_1.default,
-    ic_duplicate: Duplicate_1.default
+    ic_duplicate: Duplicate_1.default,
+    ic_bring_to_front_arrow: BringToFrontArrow_1.default,
+    ic_desktop_sync: DesktopSync_1.default,
+    ic_move_backward_arrow: MoveBackwardArrow_1.default,
+    ic_move_forward_arrow: MoveForwardArrow_1.default,
+    ic_send_to_back_arrow: SendToBackArrow_1.default
 };
 exports.default = lineIcons;

package/dist/src/common/hooks/useTooltip.js

@@ -66,7 +66,7 @@ function UseTooltip(_a) {
         systemUIPosition: tooltipPosition,
         distance: distance
     });
-    return tooltipText ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.getElementById('root')) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+    return tooltipText ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
 }
 var S_TooltipWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
     var tooltipPositionCss = _a.tooltipPositionCss;

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

@@ -363,5 +363,7 @@
     "sys_cpnt_editor_undefined": "darkgrey500",
     "sys_cpnt_slider_track_active_undefined": "darkgrey400",
     "sys_cpnt_slider_thumb_normal_undefined": "darkgrey400",
-    "sys_cpnt_editor_buttongroup_undefined": "darkgrey400"
+    "sys_cpnt_editor_buttongroup_undefined": "darkgrey400",
+    "sys_text_grey_02_hinttext": "darkgrey450",
+    "sys_component_base_48": "darkgrey70"
 }

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

@@ -363,5 +363,7 @@
     "sys_cpnt_editor_undefined": "grey400",
     "sys_cpnt_slider_track_active_undefined": "grey400",
     "sys_cpnt_slider_thumb_normal_undefined": "grey400",
-    "sys_cpnt_editor_buttongroup_undefined": "grey400"
+    "sys_cpnt_editor_buttongroup_undefined": "grey400",
+    "sys_text_grey_02_hinttext": "grey450",
+    "sys_component_base_48": "grey70"
 }

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

@@ -118,5 +118,7 @@
     "grey300": "#BDBDC2",
     "darkgrey300": "#555557",
     "yellow500": "#FED400",
-    "darkyellow500": "#FFD100"
+    "darkyellow500": "#FFD100",
+    "grey450": "#97979B",
+    "darkgrey450": "#828286"
 }

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

@@ -26,7 +26,7 @@
     "ui_cpnt_textfield_border_error": "sys_border_line_04",
     "ui_cpnt_textfield_base_normal": "sys_component_base_06",
     "ui_cpnt_textfield_base_disabled": "sys_component_base_07",
-    "ui_cpnt_textfield_text_hint": "sys_text_grey_02",
+    "ui_cpnt_textfield_text_hint": "sys_text_grey_02_hinttext",
     "ui_cpnt_textfield_text_typed": "sys_text_grey_01",
     "ui_cpnt_textfield_text_error": "sys_text_error_01",
     "ui_cpnt_textfield_text_disabled": "sys_text_grey_03",
@@ -876,5 +876,9 @@
     "ui_cpnt_select_dropdown_border_error": "sys_border_line_04",
     "ui_cpnt_select_dropdown_text_error": "sys_text_error_01",
     "ui_cpnt_select_dropdown_text_darktheme_error": "sys_text_error_darktheme_01",
-    "ui_cpnt_select_dropdown_border_darktheme_error": "sys_border_line_darktheme_03"
+    "ui_cpnt_select_dropdown_border_darktheme_error": "sys_border_line_darktheme_03",
+    "ui_cpnt_form_text_hint": "sys_text_grey_02_hinttext",
+    "ui_129": "sys_cpnt_sheet_base_13",
+    "ui_130": "sys_component_on_base_02",
+    "ui_cpnt_button_fill_base_on_sheet": "sys_component_base_48"
 }

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

@@ -120,6 +120,8 @@ declare const colorSet: {
         darkgrey300: string;
         yellow500: string;
         darkyellow500: string;
+        grey450: string;
+        darkgrey450: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -487,6 +489,8 @@ declare const colorSet: {
         sys_cpnt_slider_track_active_undefined: string;
         sys_cpnt_slider_thumb_normal_undefined: string;
         sys_cpnt_editor_buttongroup_undefined: string;
+        sys_text_grey_02_hinttext: string;
+        sys_component_base_48: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -854,6 +858,8 @@ declare const colorSet: {
         sys_cpnt_slider_track_active_undefined: string;
         sys_cpnt_slider_thumb_normal_undefined: string;
         sys_cpnt_editor_buttongroup_undefined: string;
+        sys_text_grey_02_hinttext: string;
+        sys_component_base_48: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1734,6 +1740,10 @@ declare const colorSet: {
         ui_cpnt_select_dropdown_text_error: string;
         ui_cpnt_select_dropdown_text_darktheme_error: string;
         ui_cpnt_select_dropdown_border_darktheme_error: string;
+        ui_cpnt_form_text_hint: string;
+        ui_129: string;
+        ui_130: string;
+        ui_cpnt_button_fill_base_on_sheet: string;
     };
 };
 export default colorSet;

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

@@ -877,4 +877,8 @@ export interface UITheme {
     ui_cpnt_select_dropdown_text_error: string;
     ui_cpnt_select_dropdown_text_darktheme_error: string;
     ui_cpnt_select_dropdown_border_darktheme_error: string;
+    ui_cpnt_form_text_hint: string;
+    ui_129: string;
+    ui_130: string;
+    ui_cpnt_button_fill_base_on_sheet: string;
 }

package/dist/src/common/utils/SystemUIPositionGenerator/hoverTypeSystemUICssGenerator.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function hoverTypeSystemUICssGenerator(_a) {
     var baseSize = _a.baseSize, sizeOffset = _a.sizeOffset, positionOffset = _a.positionOffset, systemUIPosition = _a.systemUIPosition, _b = _a.distance, distance = _b === void 0 ? 8 : _b;
     if (!sizeOffset || !positionOffset) {
-        return 'visibility: hidden;';
+        return '';
     }
     var end = positionOffset.left, bottom = positionOffset.bottom, top = positionOffset.top;
     var width = sizeOffset.width, height = sizeOffset.height;

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

@@ -179,10 +179,6 @@ function Dropdown(_a) {
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
             if (state === 'normal') {
-                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
-                if (isHintTextShow) {
-                    return 'sysTextSecondary';
-                }
                 if (isFocused) {
                     return 'sysTextPrimary';
                 }
@@ -203,6 +199,12 @@ function Dropdown(_a) {
         }
     };
     var getTextColorOverride = function () {
+        if (colorTheme === 'none') {
+            var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+            if (isHintTextShow) {
+                return 'ui_cpnt_form_text_hint';
+            }
+        }
         if (colorTheme === 'dark') {
             if (state === 'normal') {
                 var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;

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

@@ -11,7 +11,7 @@ export type MainButtonProps = {
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
     isLoading?: boolean;

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

@@ -352,14 +352,21 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:enabled {\n    background-color: ", ";\n  }\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
@@ -369,7 +376,11 @@ var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObje
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -381,11 +392,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_MainButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
@@ -408,6 +422,6 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
             regular: "font-weight: ".concat(theme.fontWeight.normal)
         }[fontWeight];
 });
-var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = MainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

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

@@ -11,7 +11,7 @@ type UploadMainButtonProps = {
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';

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

@@ -322,14 +322,21 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
@@ -339,7 +346,11 @@ var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObje
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -351,11 +362,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -378,7 +392,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_20 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
-var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  cursor: default;\n"], ["\n  cursor: default;\n"])));
 exports.default = UploadMainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;

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

@@ -11,7 +11,7 @@ export type MainButtonProps = {
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     type?: 'button' | 'submit';
     state?: 'normal' | 'disabled';
     isLoading?: boolean;

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

@@ -333,21 +333,32 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -356,11 +367,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var state = _a.state;
     return state === 'disabled' && secondaryDisabled;
 });
-var S_MainButton = styled_components_1.default.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+var S_MainButton = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
 }, function (_a) {
@@ -380,6 +394,6 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
             regular: "font-weight: ".concat(theme.fontWeight.normal)
         }[fontWeight];
 });
-var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = MainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

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

@@ -11,7 +11,7 @@ type UploadMainButtonProps = {
     iconMode?: 'none' | 'left' | 'right';
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
-    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';

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

@@ -310,21 +310,32 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 });
-var secondaryDisabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n"])), function (_a) {
+var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1Disabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2Disabled;
 });
-var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
+var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:not([disabled]) {\n    background-color: ", ";\n  }\n\n  &::before {\n    content: '';\n    display: none;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_default;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_secondary_variation_base_pressed;
 }, transitionStyle_1.ButtonTransition);
-var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
+var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_on_sheet;
+});
+var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_line_base_hover;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -333,11 +344,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     return colorTheme === 'secondary1' && secondary1;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme === 'secondary2' && secondary2;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled && secondaryDisabled;
 });
-var S_UploadMainButton = styled_components_1.default.label(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
+var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  & > div {\n    font-weight: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, fontWeight = _a.fontWeight;
     return fontWeight &&
         {
@@ -357,6 +371,6 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_20 ||
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = UploadMainButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ComponentBlock, GroupBlock } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
 import type { Layout } from 'publ-echo/dist/lib';
 import type { ResizeEventType } from 'publ-echo/dist/lib/GridItem/types';
+import type { ComponentBlock, GroupBlock } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 import type { LayoutItem, Layouts } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type TypeOfSectionAction = ActionMap<ActionHandlerPayload>[keyof ActionMap<ActionHandlerPayload>];
 export type PayloadCBType = {

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -51,9 +51,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var publ_echo_test_1 = require("publ-echo-test");
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var publ_echo_1 = require("publ-echo");
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
@@ -66,7 +66,7 @@ var clsx_1 = require("./newUtils/clsx");
 var group_2 = require("./newUtils/group");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
-var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
+var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
 var MOBILE_GRID_COLS = 8;
@@ -1025,7 +1025,6 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                             selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
                                 var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
                                 var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
-                                console.log(each.i, index);
                                 if (!matchedCB) {
                                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                                 }

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/group.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentBlock } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib';
-import type { LayoutItem } from 'publ-echo/dist/lib';
+import type { Layout, LayoutItem } from 'publ-echo/dist/lib';
 export interface LayoutItemWithGroupType extends LayoutItem {
     childrenIds: string[];
     keepInLastIndex?: boolean;
@@ -13,4 +12,4 @@ export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBl
     notInGroup: ComponentBlock[];
 };
 export declare function getGroupCB(layout: Layout): LayoutItemWithGroupType | null;
-export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => import("publ-echo-test/dist/lib").LayoutItem[];
+export declare const filterItemsById: (layout: Layout, idsToRemove: Array<string>) => LayoutItem[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBlock } from '../types';
-import type { ZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 export declare function parsePlacement(components: ComponentBlock[], zOrders: ZOrder): {
     sm: {
         i: string;

package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js

@@ -197,7 +197,6 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
                             fontSize: "".concat(baseFontSize, "px")
                         } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
                             var _a;
-                            console.log(cb.id, index);
                             return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
                         }) })) })) })) }) }));
 });

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

@@ -5,7 +5,7 @@ import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util
 import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
-import type { Block, ZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { Block, ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 import type { Ref } from 'react';
 export { TypeOfSectionAction };
 export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.286",
+  "version": "2.5.288",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,8 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.99",
-    "publ-echo-test": "^0.0.209",
+    "publ-echo": "^0.0.108",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,7 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.127]
+## [v2.2.134]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1272]  ic_duplicate 아이콘 추가
-* [PDS-1274] MainButton의 로딩 개선 건
+* [PDS-1279] 모바일 MainButton 계열 컴포넌트에 colorTheme 수정 건