pds-dev-kit-web 2.2.109 → 2.2.111

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BringToFront = 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: "M18.0414,15.7822 L6.1164,15.7822 C5.0134,15.7822 4.1164,16.6792 4.1164,17.7822 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,17.7822 C20.0414,16.6792 19.1444,15.7822 18.0414,15.7822" })] })) })));
+    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: "M12.5269,19.1117 C12.2029,19.3127 11.7979,19.3127 11.4729,19.1117 L4.9309,15.0527 L5.5549,14.6667 L10.4189,17.6827 L10.4189,17.6827 C10.9069,17.9857 11.4539,18.1367 11.9999,18.1367 C12.5469,18.1367 13.0939,17.9857 13.5809,17.6827 L18.4449,14.6667 L19.0689,15.0537 L12.5269,19.1117 Z M4.9319,11.9247 L5.6969,11.4507 L10.4969,14.4277 C10.9609,14.7157 11.4809,14.8597 11.9999,14.8597 C12.5199,14.8597 13.0399,14.7167 13.5029,14.4287 L18.3029,11.4507 L19.0689,11.9257 L12.5269,15.9837 C12.2029,16.1837 11.7989,16.1857 11.4729,15.9837 L4.9319,11.9247 Z M20.2909,13.4897 C20.7749,13.1127 21.0689,12.5497 21.0689,11.9257 C21.0689,11.2507 20.7329,10.6387 20.1729,10.2667 C20.6379,9.9177 20.9209,9.3857 20.9199,8.7967 C20.9199,8.1517 20.5929,7.5637 20.0449,7.2247 L13.5029,3.1657 C12.5759,2.5917 11.4239,2.5917 10.4969,3.1657 L3.9559,7.2247 C3.4079,7.5637 3.0809,8.1517 3.0799,8.7967 C3.0799,9.3847 3.3619,9.9177 3.8269,10.2667 C3.2679,10.6387 2.9309,11.2507 2.9309,11.9257 C2.9309,12.5497 3.2259,13.1127 3.7099,13.4897 C3.2259,13.8667 2.9309,14.4297 2.9309,15.0527 C2.9309,15.7507 3.2849,16.3857 3.8769,16.7537 L10.4189,20.8107 C10.9069,21.1137 11.4539,21.2647 11.9999,21.2647 C12.5469,21.2647 13.0939,21.1137 13.5809,20.8107 L20.1239,16.7537 C20.7159,16.3847 21.0689,15.7507 21.0689,15.0527 C21.0689,14.4297 20.7749,13.8677 20.2909,13.4897 L20.2909,13.4897 Z" }) })));
 };
 exports.default = BringToFront;

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

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

package/dist/src/common/assets/icons/fill/Group.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 Group = 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: "M5.7287,2.5596 C6.0047,2.5596 6.2287,2.7836 6.2287,3.0596 L6.2287,3.3786 L17.7717,3.3786 L17.7717,3.0596 C17.7717,2.7836 17.9957,2.5596 18.2717,2.5596 L20.8857,2.5596 C21.1617,2.5596 21.3857,2.7836 21.3857,3.0596 L21.3857,5.6736 C21.3857,5.9496 21.1617,6.1736 20.8857,6.1736 L20.6217,6.1736 L20.6217,17.8266 L20.8857,17.8266 C21.1617,17.8266 21.3857,18.0506 21.3857,18.3266 L21.3857,20.9406 C21.3857,21.2166 21.1617,21.4406 20.8857,21.4406 L18.2717,21.4406 C17.9957,21.4406 17.7717,21.2166 17.7717,20.9406 L17.7717,20.6206 L6.2287,20.6206 L6.2287,20.9406 C6.2287,21.2166 6.0047,21.4406 5.7287,21.4406 L3.1147,21.4406 C2.8387,21.4406 2.6147,21.2166 2.6147,20.9406 L2.6147,18.3266 C2.6147,18.0506 2.8387,17.8266 3.1147,17.8266 L3.3787,17.8266 L3.3787,6.1736 L3.1147,6.1736 C2.8387,6.1736 2.6147,5.9496 2.6147,5.6736 L2.6147,3.0596 C2.6147,2.7836 2.8387,2.5596 3.1147,2.5596 Z M17.7717,5.3786 L6.2287,5.3786 L6.2287,5.6736 C6.2287,5.9496 6.0047,6.1736 5.7287,6.1736 L5.3787,6.1736 L5.3787,17.8266 L5.7287,17.8266 C6.0047,17.8266 6.2287,18.0506 6.2287,18.3266 L6.2287,18.6206 L17.7717,18.6206 L17.7717,18.3266 C17.7717,18.0506 17.9957,17.8266 18.2717,17.8266 L18.6217,17.8266 L18.6217,6.1736 L18.2717,6.1736 C17.9957,6.1736 17.7717,5.9496 17.7717,5.6736 L17.7717,5.3786 Z M12.5008,6.7602 C13.3278,6.7602 14.0008,7.4332 14.0008,8.2602 L14.0008,9.7272 L15.7908,9.7272 C16.5898,9.7272 17.2388,10.3772 17.2388,11.1762 L17.2388,15.7912 C17.2388,16.5902 16.5898,17.2392 15.7908,17.2392 L11.1758,17.2392 C10.3768,17.2392 9.7278,16.5902 9.7278,15.7912 L9.7278,14.0012 L8.2608,14.0012 C7.4338,14.0012 6.7608,13.3282 6.7608,12.5012 L6.7608,8.2602 C6.7608,7.4332 7.4338,6.7602 8.2608,6.7602 Z M15.2388,11.7272 L14.0008,11.7272 L14.0008,12.5012 C14.0008,13.3282 13.3278,14.0012 12.5008,14.0012 L11.7278,14.0012 L11.7278,15.2392 L15.2388,15.2392 L15.2388,11.7272 Z" }) })));
+};
+exports.default = Group;

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

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

package/dist/src/common/assets/icons/fill/MoveBackward.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 MoveBackward = 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: "M11.4731,4.8884 C11.6351,4.7874 11.8171,4.7374 12.0001,4.7374 C12.1821,4.7374 12.3651,4.7874 12.5271,4.8884 L19.0691,8.9474 L12.5271,13.0044 C12.2021,13.2064 11.7971,13.2054 11.4731,13.0044 L11.4731,13.0044 L4.9311,8.9464 L11.4731,4.8884 Z M20.0441,13.6294 L17.5501,12.2424 L20.1241,10.6464 C20.7161,10.2784 21.0691,9.6434 21.0691,8.9464 C21.0691,8.2494 20.7161,7.6154 20.1231,7.2464 L13.5811,3.1894 C12.6051,2.5824 11.3931,2.5834 10.4191,3.1894 L3.8761,7.2464 C3.2841,7.6154 2.9311,8.2494 2.9311,8.9464 C2.9311,9.6434 3.2841,10.2784 3.8771,10.6464 L6.4501,12.2424 L3.9561,13.6294 C3.4071,13.9694 3.0801,14.5574 3.0801,15.2024 C3.0801,15.8484 3.4071,16.4364 3.9551,16.7764 L10.4961,20.8324 C10.9601,21.1204 11.4801,21.2654 12.0001,21.2654 C12.5201,21.2654 13.0401,21.1204 13.5031,20.8334 L20.0441,16.7764 C20.5921,16.4364 20.9201,15.8484 20.9201,15.2024 C20.9201,14.5574 20.5931,13.9694 20.0441,13.6294 L20.0441,13.6294 Z" }) })));
+};
+exports.default = MoveBackward;

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

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

package/dist/src/common/assets/icons/fill/MoveForward.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 MoveForward = 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: "M12.5269,19.1118 C12.2029,19.3128 11.7989,19.3128 11.4729,19.1118 L4.9319,15.0528 L8.2189,13.0148 L10.4969,14.4268 C10.9609,14.7158 11.4809,14.8598 11.9999,14.8598 C12.5199,14.8598 13.0399,14.7158 13.5029,14.4278 L15.7819,13.0148 L19.0689,15.0528 L12.5269,19.1118 Z M20.1229,13.3538 L17.6789,11.8378 L20.0459,10.3698 C20.5939,10.0298 20.9209,9.4408 20.9199,8.7968 C20.9199,8.1518 20.5929,7.5638 20.0449,7.2238 L13.5029,3.1658 C12.5759,2.5908 11.4239,2.5908 10.4969,3.1658 L3.9559,7.2238 C3.4079,7.5638 3.0809,8.1518 3.0799,8.7968 C3.0799,9.4408 3.4069,10.0298 3.9549,10.3708 L6.3209,11.8378 L3.8779,13.3528 C3.2849,13.7198 2.9309,14.3558 2.9309,15.0528 C2.9309,15.7508 3.2849,16.3858 3.8769,16.7528 L10.4189,20.8108 L10.4189,20.8108 C10.9069,21.1138 11.4539,21.2648 11.9999,21.2648 C12.5469,21.2648 13.0939,21.1138 13.5819,20.8108 L20.1229,16.7528 C20.7149,16.3858 21.0689,15.7508 21.0689,15.0528 C21.0689,14.3558 20.7149,13.7198 20.1229,13.3538 L20.1229,13.3538 Z" }) })));
+};
+exports.default = MoveForward;

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var SendToBack = 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: "M17.8842,3.1598 L5.9582,3.1598 C4.8552,3.1598 3.9582,4.0568 3.9582,5.1598 L3.9582,6.2178 C3.9582,7.3198 4.8552,8.2178 5.9582,8.2178 L17.8842,8.2178 C18.9872,8.2178 19.8842,7.3198 19.8842,6.2178 L19.8842,5.1598 C19.8842,4.0568 18.9872,3.1598 17.8842,3.1598" })] })) })));
+    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.4644,4.9148 C11.7894,4.7178 12.2104,4.7188 12.5354,4.9138 L19.0774,8.8348 L12.5354,12.8038 C12.2104,12.9988 11.7894,12.9998 11.4644,12.8028 L4.9224,8.8828 L11.4644,4.9148 Z M19.0774,12.1698 L12.5354,16.1388 C12.2104,16.3358 11.7894,16.3338 11.4644,16.1388 L4.9224,12.2178 L5.7824,11.6958 L10.4274,14.5138 C10.9124,14.8078 11.4564,14.9538 12.0004,14.9538 C12.5444,14.9538 13.0884,14.8078 13.5724,14.5138 L18.2304,11.6878 L19.0774,12.1698 Z M21.0684021,12.1928 C21.0684021,11.5098 20.7204,10.8918 20.1394,10.5258 C20.7204,10.1608 21.0694,9.5408 21.0684021,8.8568 C21.0684021,8.1648 20.7124,7.5348 20.1144,7.1738 L13.5724,3.2048 C12.6034,2.6148 11.3984,2.6148 10.4274,3.2048 L3.8854,7.1728 C3.2884,7.5348 2.93139786,8.1648 2.93139786,8.8568 C2.9304,9.5408 3.2794,10.1608 3.8614,10.5268 C3.2794,10.8908 2.93139786,11.5098 2.93139786,12.1928 C2.93139786,12.8728 3.2764,13.4868 3.8524,13.8528 C3.3714,14.1918 3.0804,14.7218 3.0804,15.3088 C3.0804,15.9398 3.4074,16.5148 3.9554,16.8478 L10.4964,20.8148 C10.9604,21.0958 11.4804,21.2378 12.0004,21.2378 C12.5194,21.2378 13.0394,21.0958 13.5034,20.8158 L20.0444,16.8478 C20.5924,16.5148 20.9204,15.9398 20.9204,15.3088 C20.9204,14.7218 20.6284,14.1928 20.1484,13.8528 C20.7234,13.4868 21.0684021,12.8728 21.0684021,12.1928 L21.0684021,12.1928 Z" }) })));
 };
 exports.default = SendToBack;

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

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

package/dist/src/common/assets/icons/fill/Ungroup.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 Ungroup = 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.6499,17.9051 L18.3879,17.9051 C18.1119,17.9051 17.8879,18.1291 17.8879,18.4051 L17.8879,18.6411 L10.8719,18.6411 L10.8719,18.4051 C10.8719,18.1291 10.6489,17.9051 10.3719,17.9051 L10.1389,17.9051 L10.1389,15.8761 L13.1279,15.8761 L13.1279,16.0611 C13.1279,16.3371 13.3519,16.5611 13.6279,16.5611 L16.0779,16.5611 C16.3539,16.5611 16.5779,16.3371 16.5779,16.0611 L16.5779,13.6111 C16.5779,13.3351 16.3539,13.1111 16.0779,13.1111 L15.8849,13.1111 L15.8849,10.1291 L17.8879,10.1291 L17.8879,10.3891 C17.8879,10.6651 18.1119,10.8891 18.3879,10.8891 L18.6499,10.8891 L18.6499,17.9051 Z M20.8389,10.8891 C21.1149,10.8891 21.3389,10.6651 21.3389,10.3891 L21.3389,7.9381 C21.3389,7.6621 21.1149,7.4381 20.8389,7.4381 L18.3879,7.4381 C18.1119,7.4381 17.8879,7.6621 17.8879,7.9381 L17.8879,8.1291 L15.8849,8.1291 L15.8849,6.0951 L16.0779,6.0951 C16.3539,6.0951 16.5779,5.8711 16.5779,5.5951 L16.5779,3.1441 C16.5779,2.8681 16.3539,2.6441 16.0779,2.6441 L13.6279,2.6441 C13.3519,2.6441 13.1279,2.8681 13.1279,3.1441 L13.1279,3.3641 L6.1119,3.3641 L6.1119,3.1441 C6.1119,2.8681 5.8879,2.6441 5.6119,2.6441 L3.1609,2.6441 C2.8849,2.6441 2.6609,2.8681 2.6609,3.1441 L2.6609,5.5951 C2.6609,5.8711 2.8849,6.0951 3.1609,6.0951 L3.3739,6.0951 L3.3739,13.1111 L3.1609,13.1111 C2.8849,13.1111 2.6609,13.3351 2.6609,13.6111 L2.6609,16.0611 C2.6609,16.3371 2.8849,16.5611 3.1609,16.5611 L5.6119,16.5611 C5.8879,16.5611 6.1119,16.3371 6.1119,16.0611 L6.1119,15.8761 L8.1389,15.8761 L8.1389,17.9051 L7.9219,17.9051 C7.6459,17.9051 7.4219,18.1291 7.4219,18.4051 L7.4219,20.8561 C7.4219,21.1321 7.6459,21.3561 7.9219,21.3561 L10.3719,21.3561 C10.6489,21.3561 10.8719,21.1321 10.8719,20.8561 L10.8719,20.6411 L17.8879,20.6411 L17.8879,20.8561 C17.8879,21.1321 18.1119,21.3561 18.3879,21.3561 L20.8389,21.3561 C21.1149,21.3561 21.3389,21.1321 21.3389,20.8561 L21.3389,18.4051 C21.3389,18.1291 21.1149,17.9051 20.8389,17.9051 L20.6499,17.9051 L20.6499,10.8891 L20.8389,10.8891 Z" }) })));
+};
+exports.default = Ungroup;

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

@@ -151,5 +151,9 @@ declare const fillIcons: {
     readonly ic_bring_to_front: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_send_backward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_send_to_back: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_backward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_forward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_group: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_ungroup: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default fillIcons;

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

@@ -55,6 +55,7 @@ var Envelope_1 = __importDefault(require("./Envelope"));
 var Eye_1 = __importDefault(require("./Eye"));
 var EyeClose_1 = __importDefault(require("./EyeClose"));
 var Face_1 = __importDefault(require("./Face"));
+var Group_1 = __importDefault(require("./Group"));
 var Heart_1 = __importDefault(require("./Heart"));
 var HelpWindow_1 = __importDefault(require("./HelpWindow"));
 var Home_1 = __importDefault(require("./Home"));
@@ -83,6 +84,8 @@ var MicOn_1 = __importDefault(require("./MicOn"));
 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 MoveForward_1 = __importDefault(require("./MoveForward"));
 var PageSetting_1 = __importDefault(require("./PageSetting"));
 var Paint_1 = __importDefault(require("./Paint"));
 var Palette_1 = __importDefault(require("./Palette"));
@@ -136,6 +139,7 @@ var ToggleUp_1 = __importDefault(require("./ToggleUp"));
 var Trashcan_1 = __importDefault(require("./Trashcan"));
 var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
+var Ungroup_1 = __importDefault(require("./Ungroup"));
 var Upload_1 = __importDefault(require("./Upload"));
 var User_1 = __importDefault(require("./User"));
 var Verified_1 = __importDefault(require("./Verified"));
@@ -305,6 +309,10 @@ var fillIcons = {
     ic_bring_forward: BringForward_1.default,
     ic_bring_to_front: BringToFront_1.default,
     ic_send_backward: SendBackward_1.default,
-    ic_send_to_back: SendToBack_1.default
+    ic_send_to_back: SendToBack_1.default,
+    ic_move_backward: MoveBackward_1.default,
+    ic_move_forward: MoveForward_1.default,
+    ic_group: Group_1.default,
+    ic_ungroup: Ungroup_1.default
 };
 exports.default = fillIcons;

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var BringToFront = 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" }) })));
+    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: "M19.2008,14.9669 C19.3038,15.0299 19.3188,15.1269 19.3188,15.1779 C19.3188,15.2309 19.3038,15.3269 19.2008,15.3909 L12.6588,19.4489 C12.2518,19.7009 11.7478,19.7019 11.3418,19.4479 L4.7998,15.3919 C4.6968,15.3269 4.6808,15.2309 4.6808,15.1779 C4.6808,15.1259 4.6968,15.0299 4.7998,14.9659 L5.4948,14.5339 L10.5508,17.6699 C10.9978,17.9469 11.4988,18.0849 11.9998,18.0849 C12.5008,18.0849 13.0028,17.9459 13.4498,17.6699 L18.5038,14.5339 L19.2008,14.9669 Z M10.4968,14.5529 C10.9608,14.8409 11.4808,14.9849 11.9998,14.9849 C12.5198,14.9849 13.0398,14.8419 13.5028,14.5539 L18.4808,11.4659 L19.2008,11.9119 C19.3038,11.9759 19.3188,12.0719 19.3188,12.1239 C19.3188,12.1759 19.3038,12.2729 19.2008,12.3359 L12.6588,16.3949 C12.2518,16.6469 11.7468,16.6469 11.3418,16.3949 L4.7988,12.3359 C4.6968,12.2729 4.6808,12.1759 4.6808,12.1239 C4.6808,12.0719 4.6968,11.9759 4.7998,11.9119 L5.5188,11.4659 L10.4968,14.5529 Z M20.8188,12.1239 C20.8188,11.5139 20.5098,10.9579 19.9918,10.6369 L19.9038,10.5829 L20.0458,10.4949 C20.5928,10.1549 20.9208,9.5659 20.9198023,8.9219 C20.9198023,8.2769 20.5918,7.6889 20.0448,7.3499 L13.5028,3.2909 C12.5758,2.7169 11.4238,2.7169 10.4968,3.2909 L3.9558,7.3499 C3.4078,7.6889 3.0808,8.2769 3.0798,8.9219 C3.0798,9.5659 3.4068,10.1549 3.9548,10.4959 L4.0958,10.5829 L4.0088,10.6369 C3.4908,10.9579 3.1808,11.5139 3.1808,12.1239 C3.1808,12.7349 3.4908,13.2899 4.0088,13.6119 L4.0728,13.6519 L4.0088,13.6919 C3.4908,14.0129 3.1808,14.5689 3.1808,15.1779 C3.1808,15.7869 3.4898,16.3439 4.0088,16.6659 L10.5498,20.7229 C10.9968,21.0009 11.4988,21.1399 11.9998,21.1399 C12.5008,21.1399 13.0028,21.0009 13.4498,20.7239 L19.9918,16.6659 C20.5098,16.3439 20.8198,15.7869 20.8188,15.1779 C20.8188,14.5679 20.5088,14.0129 19.9918,13.6929 L19.9258,13.6519 L19.9908,13.6119 C20.5098,13.2899 20.8188,12.7349 20.8188,12.1239 L20.8188,12.1239 Z" }) })));
 };
 exports.default = BringToFront;

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

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

package/dist/src/common/assets/icons/line/Group.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 Group = 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: "M5.0342,2.5003 C5.3102,2.5003 5.5342,2.7243 5.5342,3.0003 L5.5342,3.2503 L18.4132,3.2503 L18.4132,3.0003 C18.4132,2.7243 18.6372,2.5003 18.9132,2.5003 L21.0552,2.5003 C21.3312,2.5003 21.5552,2.7243 21.5552,3.0003 L21.5552,5.1413 C21.5552,5.4183 21.3312,5.6413 21.0552,5.6413 L20.7502,5.6413 L20.7502,18.3733 L21.0552,18.3733 C21.3312,18.3733 21.5552,18.5973 21.5552,18.8733 L21.5552,21.0153 C21.5552,21.2913 21.3312,21.5153 21.0552,21.5153 L18.9132,21.5153 C18.6372,21.5153 18.4132,21.2913 18.4132,21.0153 L18.4132,20.7503 L5.5342,20.7503 L5.5342,21.0153 C5.5342,21.2913 5.3102,21.5153 5.0342,21.5153 L2.8932,21.5153 C2.6162,21.5153 2.3932,21.2913 2.3932,21.0153 L2.3932,18.8733 C2.3932,18.5973 2.6162,18.3733 2.8932,18.3733 L3.2502,18.3733 L3.2502,5.6413 L2.8932,5.6413 C2.6162,5.6413 2.3932,5.4183 2.3932,5.1413 L2.3932,3.0003 C2.3932,2.7243 2.6162,2.5003 2.8932,2.5003 Z M18.4132,4.7503 L5.5342,4.7503 L5.5342,5.1413 C5.5342,5.4183 5.3102,5.6413 5.0342,5.6413 L4.7502,5.6413 L4.7502,18.3733 L5.0342,18.3733 C5.3102,18.3733 5.5342,18.5973 5.5342,18.8733 L5.5342,19.2503 L18.4132,19.2503 L18.4132,18.8733 C18.4132,18.5973 18.6372,18.3733 18.9132,18.3733 L19.2502,18.3733 L19.2502,5.6413 L18.9132,5.6413 C18.6372,5.6413 18.4132,5.4183 18.4132,5.1413 L18.4132,4.7503 Z M12.9653,6.5563 C13.8203,6.5563 14.5153,7.2523 14.5153,8.1063 L14.5153,9.4843 L15.8933,9.4843 C16.7473,9.4843 17.4433,10.1793 17.4433,11.0343 L17.4433,15.8933 C17.4433,16.7483 16.7473,17.4433 15.8933,17.4433 L11.0343,17.4433 C10.1803,17.4433 9.4843,16.7483 9.4843,15.8933 L9.4843,14.5153 L8.1063,14.5153 C7.2523,14.5153 6.5573,13.8203 6.5573,12.9653 L6.5573,8.1063 C6.5573,7.2523 7.2523,6.5563 8.1063,6.5563 Z M14.5153,11.0013 L14.5153,12.9653 C14.5153,13.8203 13.8203,14.5153 12.9653,14.5153 L10.9843,14.5153 L10.9843,15.8933 L15.8933,15.9433 L15.9433,11.0343 L14.5153,11.0013 Z" }) })));
+};
+exports.default = Group;

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

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

package/dist/src/common/assets/icons/line/MoveBackward.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 MoveBackward = 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: "M4.6812,8.8221 C4.6812,8.7691 4.6962,8.6731 4.7992,8.6091 L11.3412,4.5511 C11.7482,4.2991 12.2532,4.2981 12.6592,4.5511 L19.2002,8.6091 C19.3042,8.6731 19.3192,8.7691 19.3192,8.8221 C19.3192,8.8731 19.3032,8.9691 19.2002,9.0331 L12.6592,13.0921 C12.2512,13.3431 11.7472,13.3431 11.3402,13.0921 L4.7992,9.0331 C4.6962,8.9691 4.6812,8.8741 4.6812,8.8221 M20.0442,13.5041 L17.4462,11.8871 L19.9912,10.3081 C20.5092,9.9871 20.8182,9.4321 20.8192,8.8221 C20.8192,8.2131 20.5102,7.6561 19.9912,7.3341 L13.4502,3.2771 C12.5552,2.7201 11.4452,2.7211 10.5502,3.2761 L4.0082,7.3351 C3.4902,7.6561 3.1812,8.2131 3.1812,8.8221 C3.1812,9.4311 3.4912,9.9871 4.0082,10.3081 L6.5552,11.8881 L3.9552,13.5041 C3.4072,13.8441 3.0802,14.4321 3.0802,15.0771 C3.0802,15.7231 3.4072,16.3111 3.9552,16.6511 L10.4962,20.7071 C10.9602,20.9951 11.4802,21.1401 12.0002,21.1401 C12.5192,21.1401 13.0392,20.9951 13.5032,20.7081 L20.0442,16.6511 C20.5922,16.3111 20.9202,15.7231 20.9202,15.0771 C20.9202,14.4321 20.5932,13.8441 20.0442,13.5041" }) })));
+};
+exports.default = MoveBackward;

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

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

package/dist/src/common/assets/icons/line/MoveForward.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 MoveForward = 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: "M19.2007,15.3907 L12.6587,19.4497 C12.2517,19.7017 11.7477,19.7017 11.3417,19.4497 C11.3417,19.4497 11.3417,19.4497 11.3417,19.4487 L4.7997,15.3917 C4.6967,15.3277 4.6807,15.2307 4.6807,15.1777 C4.6807,15.1257 4.6967,15.0307 4.7997,14.9667 L7.9817,12.9927 L10.4967,14.5527 C10.9607,14.8407 11.4807,14.9847 11.9997,14.9847 C12.5197,14.9847 13.0397,14.8417 13.5027,14.5537 L16.0187,12.9927 L19.2007,14.9667 C19.3037,15.0307 19.3187,15.1257 19.3187,15.1777 C19.3187,15.2307 19.3037,15.3277 19.2007,15.3907 M19.9917,13.6917 L17.4427,12.1097 L20.0457,10.4947 C20.5937,10.1547 20.9207,9.5667 20.9197023,8.9217 C20.9197023,8.2767 20.5927,7.6897 20.0447,7.3497 L13.5027,3.2907 C12.5757,2.7167 11.4237,2.7167 10.4967,3.2907 L3.9557,7.3497 C3.4077,7.6897 3.0807,8.2767 3.0797,8.9217 C3.0797,9.5667 3.4067,10.1547 3.9547,10.4957 L6.5577,12.1097 L4.0087,13.6917 C3.4907,14.0127 3.1807,14.5687 3.1807,15.1777 C3.1807,15.7867 3.4897,16.3437 4.0087,16.6657 L10.5507,20.7237 C10.9977,21.0007 11.4987,21.1397 11.9997,21.1397 C12.5017,21.1397 13.0027,21.0007 13.4497,20.7237 L19.9927,16.6647 C20.5107,16.3437 20.8197,15.7867 20.8187,15.1777 C20.8187,14.5687 20.5097,14.0127 19.9917,13.6917" }) })));
+};
+exports.default = MoveForward;

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

@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var SendToBack = 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" }) })));
+    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: "M10.5506,14.3671 C10.9976,14.6441 11.4986,14.7821 11.9996,14.7821 C12.5016,14.7821 13.0026,14.6431 13.4496,14.3671 L18.5036,11.2311 L19.2006,11.6641 C19.3036,11.7271 19.3186,11.8241 19.3186,11.8761 C19.3186,11.9281 19.3036,12.0241 19.2006,12.0881 L12.6586,16.1461 C12.2526,16.3981 11.7476,16.3981 11.3416,16.1461 L4.7986,12.0881 C4.6966,12.0241 4.6806,11.9281 4.6806,11.8761 C4.6806,11.8241 4.6966,11.7271 4.7996,11.6641 L5.4956,11.2321 L10.5506,14.3671 Z M4.7996,8.6091 L11.3416,4.5511 C11.5446,4.4251 11.7726,4.3611 11.9996,4.3611 C12.2276,4.3611 12.4546,4.4251 12.6576,4.5511 C12.6576,4.5511 12.6586,4.5511 12.6586,4.5521 L19.1996,8.6081 C19.3036,8.6731 19.3186,8.7691 19.3186,8.8221 C19.3186,8.8741 19.3036,8.9701 19.2006,9.0331 L12.6586,13.0921 C12.2526,13.3441 11.7476,13.3441 11.3416,13.0921 L4.7986,9.0331 C4.6966,8.9701 4.6806,8.8741 4.6806,8.8221 C4.6806,8.7691 4.6966,8.6731 4.7996,8.6091 L4.7996,8.6091 Z M20.0446,13.5041 L19.9046,13.4171 L19.9906,13.3631 C20.5096,13.0421 20.8186,12.4861 20.8186,11.8761 C20.8186,11.2651 20.5096,10.7101 19.9916,10.3881 L19.9266,10.3481 L19.9906,10.3081 C20.5086,9.9871 20.8186,9.4311 20.8186,8.8221 C20.8196,8.2131 20.5096,7.6561 19.9916,7.3341 L13.4496,3.2761 C12.5546,2.7211 11.4446,2.7211 10.5506,3.2761 L4.0076,7.3351 C3.4896,7.6561 3.1806,8.2131 3.1806,8.8221 C3.1806,9.4311 3.4906,9.9871 4.0086,10.3081 L4.0726,10.3481 L4.0086,10.3881 C3.4896,10.7101 3.1806,11.2651 3.1806,11.8761 C3.1806,12.4861 3.4896,13.0421 4.0086,13.3631 L4.0956,13.4171 L3.9556,13.5041 C3.4076,13.8441 3.0796,14.4321 3.0796,15.0771 C3.0796,15.7231 3.4076,16.3111 3.9546,16.6501 L10.4956,20.7071 C10.9596,20.9951 11.4796,21.1401 11.9996,21.1401 C12.5196,21.1401 13.0396,20.9951 13.5026,20.7081 L20.0436,16.6501 C20.5926,16.3111 20.9196,15.7231 20.9196,15.0771 C20.9196,14.4321 20.5926,13.8441 20.0446,13.5041 L20.0446,13.5041 Z" }) })));
 };
 exports.default = SendToBack;

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

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

package/dist/src/common/assets/icons/line/Ungroup.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 Ungroup = 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: "M19.2761,18.3572 L18.9401,18.3572 C18.6631,18.3572 18.4401,18.5812 18.4401,18.8572 L18.4401,19.2512 L10.5721,19.2512 L10.5721,18.8572 C10.5721,18.5812 10.3481,18.3572 10.0721,18.3572 L9.7671,18.3572 L9.7671,15.7612 L13.4281,15.7612 L13.4281,16.0472 C13.4281,16.3242 13.6521,16.5472 13.9281,16.5472 L16.0701,16.5472 C16.3461,16.5472 16.5701,16.3242 16.5701,16.0472 L16.5701,13.9062 C16.5701,13.6302 16.3461,13.4062 16.0701,13.4062 L15.7851,13.4062 L15.7851,9.7412 L18.4401,9.7412 L18.4401,10.0942 C18.4401,10.3702 18.6631,10.5942 18.9401,10.5942 L19.2761,10.5942 L19.2761,18.3572 Z M21.0811,10.5942 C21.3571,10.5942 21.5811,10.3702 21.5811,10.0942 L21.5811,7.9522 C21.5811,7.6762 21.3571,7.4522 21.0811,7.4522 L18.9401,7.4522 C18.6631,7.4522 18.4401,7.6762 18.4401,7.9522 L18.4401,8.2412 L15.7851,8.2412 L15.7851,5.6432 L16.0701,5.6432 C16.3461,5.6432 16.5701,5.4192 16.5701,5.1432 L16.5701,3.0012 C16.5701,2.7252 16.3461,2.5012 16.0701,2.5012 L13.9281,2.5012 C13.6521,2.5012 13.4281,2.7252 13.4281,3.0012 L13.4281,3.2512 L5.5601,3.2512 L5.5601,3.0012 C5.5601,2.7252 5.3361,2.5012 5.0601,2.5012 L2.9191,2.5012 C2.6431,2.5012 2.4191,2.7252 2.4191,3.0012 L2.4191,5.1432 C2.4191,5.4192 2.6431,5.6432 2.9191,5.6432 L3.2761,5.6432 L3.2761,13.4062 L2.9191,13.4062 C2.6431,13.4062 2.4191,13.6302 2.4191,13.9062 L2.4191,16.0472 C2.4191,16.3242 2.6431,16.5472 2.9191,16.5472 L5.0601,16.5472 C5.3361,16.5472 5.5601,16.3242 5.5601,16.0472 L5.5601,15.7612 L8.2671,15.7612 L8.2671,18.3572 L7.9301,18.3572 C7.6541,18.3572 7.4301,18.5812 7.4301,18.8572 L7.4301,20.9982 C7.4301,21.2742 7.6541,21.4982 7.9301,21.4982 L10.0721,21.4982 C10.3481,21.4982 10.5721,21.2742 10.5721,20.9982 L10.5721,20.7512 L18.4401,20.7512 L18.4401,20.9982 C18.4401,21.2742 18.6631,21.4982 18.9401,21.4982 L21.0811,21.4982 C21.3571,21.4982 21.5811,21.2742 21.5811,20.9982 L21.5811,18.8572 C21.5811,18.5812 21.3571,18.3572 21.0811,18.3572 L20.7761,18.3572 L20.7761,10.5942 L21.0811,10.5942 Z" }) })));
+};
+exports.default = Ungroup;

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

@@ -302,5 +302,9 @@ declare const lineIcons: {
     readonly ic_bring_to_front: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_send_backward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_send_to_back: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_backward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_move_forward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_group: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_ungroup: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
 };
 export default lineIcons;

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

@@ -96,6 +96,7 @@ var Face_1 = __importDefault(require("./Face"));
 var Filter_1 = __importDefault(require("./Filter"));
 var Folder_1 = __importDefault(require("./Folder"));
 var Ghost_1 = __importDefault(require("./Ghost"));
+var Group_1 = __importDefault(require("./Group"));
 var Heart_1 = __importDefault(require("./Heart"));
 var HeartCare_1 = __importDefault(require("./HeartCare"));
 var Home_1 = __importDefault(require("./Home"));
@@ -132,6 +133,8 @@ var Minus_1 = __importDefault(require("./Minus"));
 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 MoveForward_1 = __importDefault(require("./MoveForward"));
 var News_1 = __importDefault(require("./News"));
 var OpenPage_1 = __importDefault(require("./OpenPage"));
 var Order_1 = __importDefault(require("./Order"));
@@ -280,6 +283,7 @@ var TypefaceSlab20_1 = __importDefault(require("./TypefaceSlab20"));
 var TypefaceSymbol20_1 = __importDefault(require("./TypefaceSymbol20"));
 var TypefaceSystem_1 = __importDefault(require("./TypefaceSystem"));
 var Unavailable_1 = __importDefault(require("./Unavailable"));
+var Ungroup_1 = __importDefault(require("./Ungroup"));
 var Unlock_1 = __importDefault(require("./Unlock"));
 var Upload_1 = __importDefault(require("./Upload"));
 var UploadList_1 = __importDefault(require("./UploadList"));
@@ -607,6 +611,10 @@ var lineIcons = {
     ic_bring_forward: BringForward_1.default,
     ic_bring_to_front: BringToFront_1.default,
     ic_send_backward: SendBackward_1.default,
-    ic_send_to_back: SendToBack_1.default
+    ic_send_to_back: SendToBack_1.default,
+    ic_move_backward: MoveBackward_1.default,
+    ic_move_forward: MoveForward_1.default,
+    ic_group: Group_1.default,
+    ic_ungroup: Ungroup_1.default
 };
 exports.default = lineIcons;

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

@@ -359,5 +359,9 @@
     "sys_cpnt_sheet_base_15": "grey200",
     "sys_cpnt_sheet_base_16": "grey900/opacity50",
     "sys_cpnt_sheet_base_17": "grey500",
-    "sys_component_base_47": "darkyellow500"
+    "sys_component_base_47": "darkyellow500",
+    "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"
 }

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

@@ -359,5 +359,9 @@
     "sys_cpnt_sheet_base_15": "grey100",
     "sys_cpnt_sheet_base_16": "grey900/opacity50",
     "sys_cpnt_sheet_base_17": "grey500",
-    "sys_component_base_47": "yellow500"
+    "sys_component_base_47": "yellow500",
+    "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"
 }

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

@@ -866,5 +866,11 @@
     "ui_126": "sys_cpnt_sheet_base_16",
     "ui_127": "sys_cpnt_sheet_base_17",
     "ui_128": "sys_widget_white",
-    "ui_cpnt_sheet_base_27": "sys_component_base_47"
+    "ui_cpnt_sheet_base_27": "sys_component_base_47",
+    "ui_cpnt_editor_colorpicker_undefined": "sys_cpnt_editor_undefined",
+    "ui_cpnt_slider_track_active_undefined": "sys_cpnt_slider_track_active_undefined",
+    "ui_cpnt_slider_thumb_normal_undefined": "sys_cpnt_slider_thumb_normal_undefined",
+    "ui_cpnt_editor_buttongroup_undefined": "sys_cpnt_editor_buttongroup_undefined",
+    "ui_cpnt_editor_thumbpreview_undefined": "sys_cpnt_editor_undefined",
+    "ui_cpnt_dropdown_text_darktheme_hinttext": "sys_text_grey_darktheme_02"
 }

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

@@ -121,7 +121,7 @@ declare const colorSet: {
         yellow500: string;
         darkyellow500: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -483,8 +483,12 @@ declare const colorSet: {
         sys_cpnt_sheet_base_16: string;
         sys_cpnt_sheet_base_17: string;
         sys_component_base_47: string;
+        sys_cpnt_editor_undefined: string;
+        sys_cpnt_slider_track_active_undefined: string;
+        sys_cpnt_slider_thumb_normal_undefined: string;
+        sys_cpnt_editor_buttongroup_undefined: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -846,6 +850,10 @@ declare const colorSet: {
         sys_cpnt_sheet_base_16: string;
         sys_cpnt_sheet_base_17: string;
         sys_component_base_47: string;
+        sys_cpnt_editor_undefined: string;
+        sys_cpnt_slider_track_active_undefined: string;
+        sys_cpnt_slider_thumb_normal_undefined: string;
+        sys_cpnt_editor_buttongroup_undefined: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1716,6 +1724,12 @@ declare const colorSet: {
         ui_127: string;
         ui_128: string;
         ui_cpnt_sheet_base_27: string;
+        ui_cpnt_editor_colorpicker_undefined: string;
+        ui_cpnt_slider_track_active_undefined: string;
+        ui_cpnt_slider_thumb_normal_undefined: string;
+        ui_cpnt_editor_buttongroup_undefined: string;
+        ui_cpnt_editor_thumbpreview_undefined: string;
+        ui_cpnt_dropdown_text_darktheme_hinttext: string;
     };
 };
 export default colorSet;

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

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

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

@@ -867,4 +867,10 @@ export interface UITheme {
     ui_127: string;
     ui_128: string;
     ui_cpnt_sheet_base_27: string;
+    ui_cpnt_editor_colorpicker_undefined: string;
+    ui_cpnt_slider_track_active_undefined: string;
+    ui_cpnt_slider_thumb_normal_undefined: string;
+    ui_cpnt_editor_buttongroup_undefined: string;
+    ui_cpnt_editor_thumbpreview_undefined: string;
+    ui_cpnt_dropdown_text_darktheme_hinttext: string;
 }

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

@@ -1,6 +1,7 @@
 import type { PDSIconType } from './icon';
 import type { IconCaseTooltipPositionType } from './systemUI';
 import type { PDSTextType } from './text';
+import type { UiColors } from './uiColors';
 import type { ForwardedRef } from 'react';
 export type PDSValueOption = {
     text: PDSTextType;
@@ -38,6 +39,7 @@ export type BasicButtonGroupValueOption = {
     tooltipText?: PDSTextType;
     tooltipPosition?: IconCaseTooltipPositionType;
     iconColorTheme?: 'none' | 'red';
+    backgroundColorTheme?: UiColors;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
@@ -46,6 +48,7 @@ export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
     iconColorTheme?: 'none' | 'red';
+    backgroundColorTheme?: UiColors;
     tooltipText?: PDSTextType;
     tooltipPosition?: IconCaseTooltipPositionType;
 };

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

@@ -93,7 +93,7 @@ function BasicButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: tooltipPositionTargetRef }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e, _f = _a.backgroundColorTheme, backgroundColorTheme = _f === void 0 ? 'ui_cpnt_basicbuttongroup_base_default' : _f;
             var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
                 baseSize: constants_1.ICON_BUTTON_SIZE[size],
                 sizeOffset: tooltipSizeOffset,
@@ -103,7 +103,7 @@ function BasicButtonGroup(_a) {
                     : "center_".concat(tooltipPosition)
             });
             var isHoveredButton = index === hoveredButtonIndex;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled', backgroundColorTheme: backgroundColorTheme }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
                         isHoveredButton &&
                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.body)] }), iconName + index));
         }) })));
@@ -116,8 +116,10 @@ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
 var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_basicbuttongroup_base_default;
+    var theme = _a.theme, backgroundColorTheme = _a.backgroundColorTheme;
+    return backgroundColorTheme
+        ? theme[backgroundColorTheme]
+        : theme.ui_cpnt_basicbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -178,10 +178,14 @@ function Dropdown(_a) {
     };
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
-            if (isFocused) {
-                return 'sysTextPrimary';
-            }
             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';
+                }
                 return 'sysTextPrimary';
             }
             if (state === 'read_only') {
@@ -200,10 +204,14 @@ function Dropdown(_a) {
     };
     var getTextColorOverride = function () {
         if (colorTheme === 'dark') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_darktheme_enabled';
-            }
             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 'ui_cpnt_dropdown_text_darktheme_hinttext';
+                }
+                if (isFocused) {
+                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+                }
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
             if (state === 'read_only') {

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

@@ -112,7 +112,7 @@ function SegmentedButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectionType: selectionType, ref: tooltipPositionTargetRef }, { children: valueArray.map(function (_a, index) {
-            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e, _f = _a.backgroundColorTheme, backgroundColorTheme = _f === void 0 ? 'ui_cpnt_segmentedbuttongroup_base_default' : _f;
             var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
                 baseSize: constants_1.ICON_BUTTON_SIZE[size],
                 sizeOffset: tooltipSizeOffset,
@@ -122,7 +122,7 @@ function SegmentedButtonGroup(_a) {
                     : "center_".concat(tooltipPosition)
             });
             var isCurrentButton = index === currentButtonIndex;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }), tooltipText &&
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), backgroundColorTheme: backgroundColorTheme, onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }), tooltipText &&
                         isCurrentButton &&
                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.body)] }), String(currentButtonValue)));
         }) })));
@@ -180,10 +180,12 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return selectionType === 'single' && '10px';
 });
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected
-        ? theme.ui_cpnt_segmentedbuttongroup_base_selected
-        : theme.ui_cpnt_segmentedbuttongroup_base_default;
+    var isSelected = _a.isSelected, backgroundColorTheme = _a.backgroundColorTheme, theme = _a.theme;
+    if (isSelected)
+        return theme.ui_cpnt_segmentedbuttongroup_base_selected;
+    if (backgroundColorTheme)
+        return theme[backgroundColorTheme];
+    return theme.ui_cpnt_segmentedbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

package/dist/src/hybrid/components/Switch/Switch.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import type { UiColors } from '../../../common/types';
 type SwitchProps = {
     name: string;
     status?: 'off' | 'on';
     state?: 'normal' | 'disabled';
+    backgroundColorTheme?: UiColors;
     onClick?: (status: boolean) => void;
 };
-declare function Switch({ name, status, state, onClick }: SwitchProps): JSX.Element;
+declare function Switch({ name, status, state, backgroundColorTheme, onClick }: SwitchProps): JSX.Element;
 export default Switch;

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

@@ -21,16 +21,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Switch(_a) {
-    var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, onClick = _a.onClick;
+    var name = _a.name, _b = _a.status, status = _b === void 0 ? 'off' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, backgroundColorTheme = _a.backgroundColorTheme, onClick = _a.onClick;
     var handleChange = function (e) {
         onClick && onClick(e.target.checked);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Switch, __assign({ "x-pds-name": "Switch", "x-pds-element-type": "component", "x-pds-device-type": "hybrid" }, { children: [(0, jsx_runtime_1.jsx)(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange }), (0, jsx_runtime_1.jsx)(S_Label, { htmlFor: name, disabled: state === 'disabled' })] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Switch, __assign({ "x-pds-name": "Switch", "x-pds-element-type": "component", "x-pds-device-type": "hybrid" }, { children: [(0, jsx_runtime_1.jsx)(S_Input, { type: "checkbox", hidden: true, id: name, checked: status === 'on', disabled: state === 'disabled', onChange: handleChange, backgroundColorTheme: backgroundColorTheme }), (0, jsx_runtime_1.jsx)(S_Label, { htmlFor: name, disabled: state === 'disabled', backgroundColorTheme: backgroundColorTheme })] })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n  position: relative;\n  width: 56px;\n"], ["\n  height: 32px;\n  position: relative;\n  width: 56px;\n"])));
 var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 24px;\n  cursor: ", ";\n  height: 32px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 56px;\n\n  &::after {\n    background: ", ";\n    border-radius: 24px;\n    content: '';\n    display: block;\n    height: 24px;\n    margin: ", ";\n    width: 24px;\n  }\n"], ["\n  background: ", ";\n  border-radius: 24px;\n  cursor: ", ";\n  height: 32px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 56px;\n\n  &::after {\n    background: ", ";\n    border-radius: 24px;\n    content: '';\n    display: block;\n    height: 24px;\n    margin: ", ";\n    width: 24px;\n  }\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
-    return disabled ? theme.ui_cpnt_selcontrols_base_off_disabled : theme.ui_cpnt_selcontrols_base_off;
+    if (disabled)
+        return theme.ui_cpnt_selcontrols_base_off_disabled;
+    return theme.ui_cpnt_selcontrols_base_off;
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
@@ -42,8 +44,12 @@ var S_Label = styled_components_1.default.label(templateObject_2 || (templateObj
     return theme.spacing.spacingA;
 });
 var S_Input = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:checked + ", " {\n    background: ", ";\n\n    &::after {\n      margin-bottom: ", ";\n      margin-right: ", ";\n      margin-top: ", ";\n      position: absolute;\n      right: 0px;\n    }\n  }\n"], ["\n  &:checked + ", " {\n    background: ", ";\n\n    &::after {\n      margin-bottom: ", ";\n      margin-right: ", ";\n      margin-top: ", ";\n      position: absolute;\n      right: 0px;\n    }\n  }\n"])), S_Label, function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled ? theme.ui_cpnt_selcontrols_base_on_disabled : theme.ui_cpnt_selcontrols_base_on;
+    var theme = _a.theme, disabled = _a.disabled, backgroundColorTheme = _a.backgroundColorTheme;
+    if (disabled)
+        return theme.ui_cpnt_selcontrols_base_on_disabled;
+    if (backgroundColorTheme)
+        return theme[backgroundColorTheme];
+    return theme.ui_cpnt_selcontrols_base_on;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;

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

@@ -53,8 +53,8 @@ function BasicButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }) }), iconName + index));
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, _e = _a.backgroundColorTheme, backgroundColorTheme = _e === void 0 ? 'ui_cpnt_basicbuttongroup_base_default' : _e, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled', backgroundColorTheme: backgroundColorTheme }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }) }), iconName + index));
         }) })));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
@@ -65,8 +65,10 @@ var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 =
 var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_basicbuttongroup_base_default;
+    var theme = _a.theme, backgroundColorTheme = _a.backgroundColorTheme;
+    return backgroundColorTheme
+        ? theme[backgroundColorTheme]
+        : theme.ui_cpnt_basicbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -178,10 +178,14 @@ function Dropdown(_a) {
     };
     var getTextColorTheme = function () {
         if (colorTheme === 'none') {
-            if (isFocused) {
-                return 'sysTextPrimary';
-            }
             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';
+                }
                 return 'sysTextPrimary';
             }
             if (state === 'read_only') {
@@ -200,10 +204,14 @@ function Dropdown(_a) {
     };
     var getTextColorOverride = function () {
         if (colorTheme === 'dark') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_darktheme_enabled';
-            }
             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 'ui_cpnt_dropdown_text_darktheme_hinttext';
+                }
+                if (isFocused) {
+                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+                }
                 return 'ui_cpnt_dropdown_text_darktheme_hint';
             }
             if (state === 'read_only') {

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

@@ -72,8 +72,8 @@ function SegmentedButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectionType: selectionType }, { children: valueArray.map(function (_a) {
-            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }) }), String(currentButtonValue)));
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d, _e = _a.backgroundColorTheme, backgroundColorTheme = _e === void 0 ? 'ui_cpnt_segmentedbuttongroup_base_default' : _e;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), backgroundColorTheme: backgroundColorTheme }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }) }), String(currentButtonValue)));
         }) })));
 }
 var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
@@ -129,10 +129,12 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return selectionType === 'single' && '10px';
 });
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected
-        ? theme.ui_cpnt_segmentedbuttongroup_base_selected
-        : theme.ui_cpnt_segmentedbuttongroup_base_default;
+    var isSelected = _a.isSelected, backgroundColorTheme = _a.backgroundColorTheme, theme = _a.theme;
+    if (isSelected)
+        return theme.ui_cpnt_segmentedbuttongroup_base_selected;
+    if (backgroundColorTheme)
+        return theme[backgroundColorTheme];
+    return theme.ui_cpnt_segmentedbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

package/package.json

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

package/release-note.md

@@ -1,7 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.109]
+## [v2.2.111]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1255] 에디터 관련 아이콘 추가 건
+* [PDS-1258] 드롭다운 컴포넌트의 hintText 색상 변경
+* [PDS-1259] 에디터 그룹 관련 아이콘 추가 건
+* 컬러키 싱크