pds-dev-kit-web 2.2.108 → 2.2.110

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

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

package/dist/src/common/assets/icons/fill/BringForward.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 BringForward = 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,8.5354 L11.9999,4.1654 L16.3699,8.5354 M12,5.1149 L12,16.1739" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M18.0413,15.7823 L6.1163,15.7823 C5.0133,15.7823 4.1163,16.6793 4.1163,17.7823 L4.1163,18.8403 C4.1163,19.9423 5.0133,20.8403 6.1163,20.8403 L18.0413,20.8403 C19.1443,20.8403 20.0413,19.9423 20.0413,18.8403 L20.0413,17.7823 C20.0413,16.6793 19.1443,15.7823 18.0413,15.7823" })] })) })));
+};
+exports.default = BringForward;

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

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

package/dist/src/common/assets/icons/fill/BringToFront.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 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: 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/Cut.d.ts

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

package/dist/src/common/assets/icons/fill/Cut.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 Cut = 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: "2", d: "M16.8158,10.1555 L2.7998,16.8575 M18.2573,10.137 C16.4953,10.279 14.9523,8.966 14.8103,7.205 C14.6683,5.443 15.9813,3.9 17.7423,3.758 C19.5043,3.616 21.0473,4.928 21.1893,6.69 C21.3313,8.452 20.0193,9.995 18.2573,10.137 Z M16.8158,13.8445 L2.7998,7.1425 M18.2573,13.863 C16.4953,13.721 14.9523,15.034 14.8103,16.795 C14.6683,18.557 15.9813,20.1 17.7423,20.242 C19.5043,20.384 21.0473,19.072 21.1893,17.31 C21.3313,15.548 20.0193,14.005 18.2573,13.863 Z" }) })));
+};
+exports.default = Cut;

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/Paste.d.ts

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

package/dist/src/common/assets/icons/fill/Paste.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 Paste = 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", strokeWidth: "2", d: "M8.4063,17.584 L5.8643,17.584 C4.9813,17.584 4.2643,16.868 4.2643,15.984 L4.2643,8.313 M9.2097,3.4608 L15.0517,3.4608 C15.9347,3.4608 16.6517,4.1768 16.6517,5.0608 L16.6517,9.2668 M10.7299,9.5414 L17.7309,9.5414 C18.8359,9.5414 19.7309,10.4364 19.7309,11.5414 L19.7309,18.5454 C19.7309,19.6504 18.8359,20.5454 17.7309,20.5454 L10.7299,20.5454 C9.6249,20.5454 8.7299,19.6504 8.7299,18.5454 L8.7299,11.5414 C8.7299,10.4364 9.6249,9.5414 10.7299,9.5414 Z M11.5468,15.0434 L16.9148,15.0434 M14.2306,12.3596 L14.2306,17.7276" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M3.5096,7.6685 L8.5286,2.7215 C8.8096,2.4445 9.2846,2.6435 9.2846,3.0385 L9.2856,7.2025 C9.2856,7.8435 8.7666,8.3635017 8.1246,8.3635017 L3.7946,8.3635017 C3.4316,8.3645 3.2506,7.9235 3.5096,7.6685" })] })) })));
+};
+exports.default = Paste;

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

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

package/dist/src/common/assets/icons/fill/SendBackward.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 SendBackward = 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,15.4646 L12.0001,19.8346 L7.6301,15.4646 M11.5,18.8851 L11.5,7.8261" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M17.8839,3.16 L5.9589,3.16 C4.8559,3.16 3.9589,4.057 3.9589,5.16 L3.9589,6.218 C3.9589,7.32 4.8559,8.218 5.9589,8.218 L17.8839,8.218 C18.9869,8.218 19.8839,7.32 19.8839,6.218 L19.8839,5.16 C19.8839,4.057 18.9869,3.16 17.8839,3.16" })] })) })));
+};
+exports.default = SendBackward;

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

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

package/dist/src/common/assets/icons/fill/SendToBack.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 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: 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/index.d.ts

@@ -145,5 +145,13 @@ declare const fillIcons: {
     readonly ic_xmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_post: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_series: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_cut: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_paste: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bring_forward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    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;
 };
 export default fillIcons;

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

@@ -21,6 +21,8 @@ var BellNotification_1 = __importDefault(require("./BellNotification"));
 var BellOff_1 = __importDefault(require("./BellOff"));
 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 Button_1 = __importDefault(require("./Button"));
 var Calendar_1 = __importDefault(require("./Calendar"));
 var Call_1 = __importDefault(require("./Call"));
@@ -36,6 +38,7 @@ var CheckboxIndeterminate_1 = __importDefault(require("./CheckboxIndeterminate")
 var CheckboxOn_1 = __importDefault(require("./CheckboxOn"));
 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 DeviceApp_1 = __importDefault(require("./DeviceApp"));
 var DeviceDesktop_1 = __importDefault(require("./DeviceDesktop"));
@@ -80,11 +83,14 @@ 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"));
 var PaperPlane_1 = __importDefault(require("./PaperPlane"));
 var PappType_1 = __importDefault(require("./PappType"));
+var Paste_1 = __importDefault(require("./Paste"));
 var Photo_1 = __importDefault(require("./Photo"));
 var Pin_1 = __importDefault(require("./Pin"));
 var Plan_1 = __importDefault(require("./Plan"));
@@ -103,6 +109,8 @@ var Sales_1 = __importDefault(require("./Sales"));
 var ScrollingText_1 = __importDefault(require("./ScrollingText"));
 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 Setting_1 = __importDefault(require("./Setting"));
 var Shape_1 = __importDefault(require("./Shape"));
 var Shoppingbag_1 = __importDefault(require("./Shoppingbag"));
@@ -293,6 +301,14 @@ var fillIcons = {
     ic_vodplus: Vodplus_1.default,
     ic_xmark: Xmark_1.default,
     ic_post_post: PostPost_1.default,
-    ic_post_series: PostSeries_1.default
+    ic_post_series: PostSeries_1.default,
+    ic_cut: Cut_1.default,
+    ic_paste: Paste_1.default,
+    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_move_backward: MoveBackward_1.default,
+    ic_move_forward: MoveForward_1.default
 };
 exports.default = fillIcons;

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

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

package/dist/src/common/assets/icons/line/BringForward.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 BringForward = 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,8.5354 L11.9999,4.1654 L16.3699,8.5354 M12,5.1149 L12,16.1739 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 = BringForward;

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

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

package/dist/src/common/assets/icons/line/BringToFront.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 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: 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/Cut.d.ts

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

package/dist/src/common/assets/icons/line/Cut.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 Cut = 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.8158,10.1555 L2.7998,16.8575 M18.2573,10.137 C16.4953,10.279 14.9523,8.966 14.8103,7.205 C14.6683,5.443 15.9813,3.9 17.7423,3.758 C19.5043,3.616 21.0473,4.928 21.1893,6.69 C21.3313,8.452 20.0193,9.995 18.2573,10.137 Z M16.8158,13.8445 L2.7998,7.1425 M18.2573,13.863 C16.4953,13.721 14.9523,15.034 14.8103,16.795 C14.6683,18.557 15.9813,20.1 17.7423,20.242 C19.5043,20.384 21.0473,19.072 21.1893,17.31 C21.3313,15.548 20.0193,14.005 18.2573,13.863 Z" }) })));
+};
+exports.default = Cut;

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/Paste.d.ts

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

package/dist/src/common/assets/icons/line/Paste.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 Paste = 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", strokeWidth: "1.5", d: "M8.4063,17.584 L5.8643,17.584 C4.9813,17.584 4.2643,16.868 4.2643,15.984 L4.2643,8.313 M9.2097,3.4608 L15.0517,3.4608 C15.9347,3.4608 16.6517,4.1768 16.6517,5.0608 L16.6517,9.2668 M10.7299,9.5414 L17.7309,9.5414 C18.8359,9.5414 19.7309,10.4364 19.7309,11.5414 L19.7309,18.5454 C19.7309,19.6504 18.8359,20.5454 17.7309,20.5454 L10.7299,20.5454 C9.6249,20.5454 8.7299,19.6504 8.7299,18.5454 L8.7299,11.5414 C8.7299,10.4364 9.6249,9.5414 10.7299,9.5414 Z M11.5468,15.0434 L16.9148,15.0434 M14.2306,12.3596 L14.2306,17.7276" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M3.6652,7.8458 L8.6842,2.8988 C8.9652,2.6218 9.4402,2.8208 9.4402,3.2158 L9.4412,7.3788 C9.4412,8.0208 8.9222,8.5408017 8.2802,8.5408017 L3.9502,8.5408017 C3.5872,8.5418 3.4062,8.1008 3.6652,7.8458" })] })) })));
+};
+exports.default = Paste;

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

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

package/dist/src/common/assets/icons/line/SendBackward.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 SendBackward = 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,15.4646 L12.0001,19.8346 L7.6301,15.4646 M12,18.8851 L12,7.8261 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" }) })));
+};
+exports.default = SendBackward;

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

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

package/dist/src/common/assets/icons/line/SendToBack.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 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: 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/index.d.ts

@@ -296,5 +296,13 @@ declare const lineIcons: {
     readonly ic_post_post: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_series: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_heart: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_cut: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_paste: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_bring_forward: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    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;
 };
 export default lineIcons;

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

@@ -38,6 +38,8 @@ var BookingPapp_1 = __importDefault(require("./BookingPapp"));
 var BookingTicket_1 = __importDefault(require("./BookingTicket"));
 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 Business_1 = __importDefault(require("./Business"));
 var Button_1 = __importDefault(require("./Button"));
 var Calendar_1 = __importDefault(require("./Calendar"));
@@ -67,6 +69,7 @@ var Copy_1 = __importDefault(require("./Copy"));
 var Cs_1 = __importDefault(require("./Cs"));
 var CsBold_1 = __importDefault(require("./CsBold"));
 var CsFace_1 = __importDefault(require("./CsFace"));
+var Cut_1 = __importDefault(require("./Cut"));
 var Dashboard_1 = __importDefault(require("./Dashboard"));
 var Delivery_1 = __importDefault(require("./Delivery"));
 var DesignPreference_1 = __importDefault(require("./DesignPreference"));
@@ -129,6 +132,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"));
@@ -140,6 +145,7 @@ var Paint_1 = __importDefault(require("./Paint"));
 var Palette_1 = __importDefault(require("./Palette"));
 var Papp_1 = __importDefault(require("./Papp"));
 var PappType_1 = __importDefault(require("./PappType"));
+var Paste_1 = __importDefault(require("./Paste"));
 var Payment_1 = __importDefault(require("./Payment"));
 var PaymentFreeTrial_1 = __importDefault(require("./PaymentFreeTrial"));
 var PaymentGift_1 = __importDefault(require("./PaymentGift"));
@@ -225,6 +231,8 @@ var SectionTab40_1 = __importDefault(require("./SectionTab40"));
 var SellerInfo_1 = __importDefault(require("./SellerInfo"));
 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 Series_1 = __importDefault(require("./Series"));
 var SeriesList_1 = __importDefault(require("./SeriesList"));
 var Setting_1 = __importDefault(require("./Setting"));
@@ -595,6 +603,14 @@ var lineIcons = {
     ic_section_contents_operator_40: SectionContentsOperator40_1.default,
     ic_post_post: PostPost_1.default,
     ic_post_series: PostSeries_1.default,
-    ic_heart: Heart_1.default
+    ic_heart: Heart_1.default,
+    ic_cut: Cut_1.default,
+    ic_paste: Paste_1.default,
+    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_move_backward: MoveBackward_1.default,
+    ic_move_forward: MoveForward_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,10 @@
     "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"
 }

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,11 @@ 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;
     };
 };
 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,9 @@ 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;
 }

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/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/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.108",
+  "version": "2.2.110",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.108]
+## [v2.2.110]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* 컬러키 최신화
+* [PDS-1256] zOrder 관련 아이콘 추가 건
+* [PDS-1257] 정의되지 않은 값 처리 대응 위한 컴포넌트 prop/value 추가 건
+* 컬러키 싱크