pds-dev-kit-web-test 0.2.55 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/src/common/assets/icons/fill/VideocallPro.js +1 -1
  2. package/dist/src/common/assets/icons/fill/Vodplus.js +1 -1
  3. package/dist/src/common/assets/icons/line/DesignPreference.js +1 -1
  4. package/dist/src/common/assets/icons/line/PappType.js +1 -1
  5. package/dist/src/common/assets/icons/line/PaymentRegularly.js +1 -1
  6. package/dist/src/common/assets/icons/line/PostVote.js +1 -1
  7. package/dist/src/common/assets/icons/line/Target.js +1 -1
  8. package/dist/src/common/assets/icons/line/TypefaceSansSerif20.js +1 -1
  9. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +2 -4
  10. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +14 -5
  11. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -3
  12. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +41 -45
  13. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +2 -4
  14. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +14 -5
  15. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +3 -3
  16. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +41 -45
  17. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/fill/VideocallPro.js +1 -1
  18. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/fill/Vodplus.js +1 -1
  19. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/DesignPreference.js +1 -1
  20. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PappType.js +1 -1
  21. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PaymentRegularly.js +1 -1
  22. package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PostVote.js +1 -1
  23. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +2 -0
  24. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.d.ts +3 -0
  25. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.js +8 -0
  26. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +4 -2
  27. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js +7 -2
  28. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +4 -2
  29. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js +4 -2
  30. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +4 -2
  31. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js +7 -2
  32. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +4 -2
  33. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.d.ts +8 -0
  34. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.js +34 -0
  35. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js +4 -1
  36. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +0 -1
  37. package/package.json +1 -1
  38. package/release-note.md +3 -4
  39. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts +0 -6
  40. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js +0 -27
package/dist/src/common/assets/icons/fill/VideocallPro.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var VideocallPro = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M18.736,2.0173 C20.669,2.0173 22.236,3.5843 22.236,5.5173 L22.236,5.5173 L22.236,14.5703 C22.236,16.5033 20.669,18.0703 18.736,18.0703 L18.736,18.0703 L17.024,18.0703 L17.024,20.0313 C17.024,20.9823 16.244,21.6223 15.425,21.6223 C15.058,21.6223 14.683,21.4933 14.367,21.2063 L14.367,21.2063 L10.917,18.0703 L5.264,18.0703 C3.331,18.0703 1.764,16.5033 1.764,14.5703 L1.764,14.5703 L1.764,5.5173 C1.764,3.5843 3.331,2.0173 5.264,2.0173 L5.264,2.0173 Z M18.736,3.5173 L5.264,3.5173 C4.161,3.5173 3.264,4.4143 3.264,5.5173 L3.264,5.5173 L3.264,14.5703 C3.264,15.6733 4.161,16.5703 5.264,16.5703 L5.264,16.5703 L11.497,16.5703 L11.926,16.9603 L15.376,20.0963 C15.404,20.1223 15.416,20.1223 15.425,20.1223 C15.435,20.1223 15.524,20.1203 15.524,20.0313 L15.524,20.0313 L15.524,16.5703 L18.736,16.5703 C19.839,16.5703 20.736,15.6733 20.736,14.5703 L20.736,14.5703 L20.736,5.5173 C20.736,4.4143 19.839,3.5173 18.736,3.5173 L18.736,3.5173 Z M13.5702,6.2758 C14.4892,6.2758 15.2342,7.0208 15.2342,7.9408 L15.2342,7.9408 L15.2342,8.6758 L16.5392,7.6698 C17.0392,7.2858 17.7612,7.6448 17.7572165,8.2748 L17.7572165,8.2748 L17.7312,11.9348 C17.7262,12.5648 16.9992,12.9138 16.5052,12.5228 L16.5052,12.5228 L15.2342,11.5178 L15.2342,12.1658 C15.2342,13.0848 14.4892,13.8308 13.5702,13.8308 L13.5702,13.8308 L8.5112,13.8308 C7.5922,13.8308 6.8462,13.0848 6.8462,12.1658 L6.8462,12.1658 L6.8462,7.9408 C6.8462,7.0208 7.5922,6.2758 8.5112,6.2758 L8.5112,6.2758 Z M11.0412,7.9948 C10.7642,7.9948 10.5412,8.2188 10.5412,8.4948 L10.5412,8.4948 L10.5412,9.5998 L9.4362,9.5998 C9.1592,9.5998 8.9362,9.8238 8.9362,10.0998 C8.9362,10.3758 9.1592,10.5998 9.4362,10.5998 L9.4362,10.5998 L10.5412,10.5998 L10.5412,11.7038 C10.5412,11.9808 10.7642,12.2038 11.0412,12.2038 C11.3172,12.2038 11.5412,11.9808 11.5412,11.7038 L11.5412,11.7038 L11.5412,10.5998 L12.6452,10.5998 C12.9212,10.5998 13.1452,10.3758 13.1452,10.0998 C13.1452,9.8238 12.9212,9.5998 12.6452,9.5998 L12.6452,9.5998 L11.5412,9.5998 L11.5412,8.4948 C11.5412,8.2188 11.3172,7.9948 11.0412,7.9948 Z", fill: color, fillRule: "evenodd" }) })) })));
28
+ 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", { d: "M18.736,2.0173 C20.669,2.0173 22.236,3.5843 22.236,5.5173 L22.236,5.5173 L22.236,14.5703 C22.236,16.5033 20.669,18.0703 18.736,18.0703 L18.736,18.0703 L17.024,18.0703 L17.024,20.0313 C17.024,20.9823 16.244,21.6223 15.425,21.6223 C15.058,21.6223 14.683,21.4933 14.367,21.2063 L14.367,21.2063 L10.917,18.0703 L5.264,18.0703 C3.331,18.0703 1.764,16.5033 1.764,14.5703 L1.764,14.5703 L1.764,5.5173 C1.764,3.5843 3.331,2.0173 5.264,2.0173 L5.264,2.0173 Z M18.736,3.5173 L5.264,3.5173 C4.161,3.5173 3.264,4.4143 3.264,5.5173 L3.264,5.5173 L3.264,14.5703 C3.264,15.6733 4.161,16.5703 5.264,16.5703 L5.264,16.5703 L11.497,16.5703 L11.926,16.9603 L15.376,20.0963 C15.404,20.1223 15.416,20.1223 15.425,20.1223 C15.435,20.1223 15.524,20.1203 15.524,20.0313 L15.524,20.0313 L15.524,16.5703 L18.736,16.5703 C19.839,16.5703 20.736,15.6733 20.736,14.5703 L20.736,14.5703 L20.736,5.5173 C20.736,4.4143 19.839,3.5173 18.736,3.5173 L18.736,3.5173 Z M13.5702,6.2758 C14.4892,6.2758 15.2342,7.0208 15.2342,7.9408 L15.2342,7.9408 L15.2342,8.6758 L16.5392,7.6698 C17.0392,7.2858 17.7612,7.6448 17.7572165,8.2748 L17.7572165,8.2748 L17.7312,11.9348 C17.7262,12.5648 16.9992,12.9138 16.5052,12.5228 L16.5052,12.5228 L15.2342,11.5178 L15.2342,12.1658 C15.2342,13.0848 14.4892,13.8308 13.5702,13.8308 L13.5702,13.8308 L8.5112,13.8308 C7.5922,13.8308 6.8462,13.0848 6.8462,12.1658 L6.8462,12.1658 L6.8462,7.9408 C6.8462,7.0208 7.5922,6.2758 8.5112,6.2758 L8.5112,6.2758 Z M11.0412,7.9948 C10.7642,7.9948 10.5412,8.2188 10.5412,8.4948 L10.5412,8.4948 L10.5412,9.5998 L9.4362,9.5998 C9.1592,9.5998 8.9362,9.8238 8.9362,10.0998 C8.9362,10.3758 9.1592,10.5998 9.4362,10.5998 L9.4362,10.5998 L10.5412,10.5998 L10.5412,11.7038 C10.5412,11.9808 10.7642,12.2038 11.0412,12.2038 C11.3172,12.2038 11.5412,11.9808 11.5412,11.7038 L11.5412,11.7038 L11.5412,10.5998 L12.6452,10.5998 C12.9212,10.5998 13.1452,10.3758 13.1452,10.0998 C13.1452,9.8238 12.9212,9.5998 12.6452,9.5998 L12.6452,9.5998 L11.5412,9.5998 L11.5412,8.4948 C11.5412,8.2188 11.3172,7.9948 11.0412,7.9948 Z", fill: color, fillRule: "evenodd" }) })));
29
29
  };
30
30
  exports.default = VideocallPro;
package/dist/src/common/assets/icons/fill/Vodplus.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var Vodplus = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.145,19 L4.583,19 C2.604,19 1,17.426 1,15.483 L1,6.517 C1,4.574 2.604,3 4.583,3 L17.418,3 C19.396,3 21,4.574 21,6.517 L21,12.351", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.2459,13.5106 L20.6609,14.9056 L23.0769,16.2996 C23.7929,16.7136 23.7929,17.7476 23.0769,18.1616 L20.6609,19.5556 L18.2459,20.9506 C17.5299,21.3636 16.6339,20.8466 16.6339,20.0196 L16.6339,14.4416 C16.6339,13.6146 17.5299,13.0976 18.2459,13.5106 Z M12.9826,14.4158 C13.5346,14.4158 13.9826,14.8638 13.9826,15.4158 C13.9826,15.9678 13.5346,16.4158 12.9826,16.4158 C12.4306,16.4158 11.9826,15.9678 11.9826,15.4158 C11.9826,14.8638 12.4306,14.4158 12.9826,14.4158 Z M9.0176,14.4158 C9.5696,14.4158 10.0176,14.8638 10.0176,15.4158 C10.0176,15.9678 9.5696,16.4158 9.0176,16.4158 C8.4656,16.4158 8.0176,15.9678 8.0176,15.4158 C8.0176,14.8638 8.4656,14.4158 9.0176,14.4158 Z M5.0526,14.4158 C5.6046,14.4158 6.0526,14.8638 6.0526,15.4158 C6.0526,15.9678 5.6046,16.4158 5.0526,16.4158 C4.5006,16.4158 4.0526,15.9678 4.0526,15.4158 C4.0526,14.8638 4.5006,14.4158 5.0526,14.4158 Z M16.9476,5.9636 C17.4996,5.9636 17.9476,6.4116 17.9476,6.9636 C17.9476,7.5156 17.4996,7.9636 16.9476,7.9636 C16.3956,7.9636 15.9476,7.5156 15.9476,6.9636 C15.9476,6.4116 16.3956,5.9636 16.9476,5.9636 Z M12.9826,5.9636 C13.5346,5.9636 13.9826,6.4116 13.9826,6.9636 C13.9826,7.5156 13.5346,7.9636 12.9826,7.9636 C12.4306,7.9636 11.9826,7.5156 11.9826,6.9636 C11.9826,6.4116 12.4306,5.9636 12.9826,5.9636 Z M9.0176,5.9636 C9.5696,5.9636 10.0176,6.4116 10.0176,6.9636 C10.0176,7.5156 9.5696,7.9636 9.0176,7.9636 C8.4656,7.9636 8.0176,7.5156 8.0176,6.9636 C8.0176,6.4116 8.4656,5.9636 9.0176,5.9636 Z M5.0526,5.9636 C5.6046,5.9636 6.0526,6.4116 6.0526,6.9636 C6.0526,7.5156 5.6046,7.9636 5.0526,7.9636 C4.5006,7.9636 4.0526,7.5156 4.0526,6.9636 C4.0526,6.4116 4.5006,5.9636 5.0526,5.9636 Z", fill: color })] })) })) })));
28
+ 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", { d: "M14.145,19 L4.583,19 C2.604,19 1,17.426 1,15.483 L1,6.517 C1,4.574 2.604,3 4.583,3 L17.418,3 C19.396,3 21,4.574 21,6.517 L21,12.351", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.2459,13.5106 L20.6609,14.9056 L23.0769,16.2996 C23.7929,16.7136 23.7929,17.7476 23.0769,18.1616 L20.6609,19.5556 L18.2459,20.9506 C17.5299,21.3636 16.6339,20.8466 16.6339,20.0196 L16.6339,14.4416 C16.6339,13.6146 17.5299,13.0976 18.2459,13.5106 Z M12.9826,14.4158 C13.5346,14.4158 13.9826,14.8638 13.9826,15.4158 C13.9826,15.9678 13.5346,16.4158 12.9826,16.4158 C12.4306,16.4158 11.9826,15.9678 11.9826,15.4158 C11.9826,14.8638 12.4306,14.4158 12.9826,14.4158 Z M9.0176,14.4158 C9.5696,14.4158 10.0176,14.8638 10.0176,15.4158 C10.0176,15.9678 9.5696,16.4158 9.0176,16.4158 C8.4656,16.4158 8.0176,15.9678 8.0176,15.4158 C8.0176,14.8638 8.4656,14.4158 9.0176,14.4158 Z M5.0526,14.4158 C5.6046,14.4158 6.0526,14.8638 6.0526,15.4158 C6.0526,15.9678 5.6046,16.4158 5.0526,16.4158 C4.5006,16.4158 4.0526,15.9678 4.0526,15.4158 C4.0526,14.8638 4.5006,14.4158 5.0526,14.4158 Z M16.9476,5.9636 C17.4996,5.9636 17.9476,6.4116 17.9476,6.9636 C17.9476,7.5156 17.4996,7.9636 16.9476,7.9636 C16.3956,7.9636 15.9476,7.5156 15.9476,6.9636 C15.9476,6.4116 16.3956,5.9636 16.9476,5.9636 Z M12.9826,5.9636 C13.5346,5.9636 13.9826,6.4116 13.9826,6.9636 C13.9826,7.5156 13.5346,7.9636 12.9826,7.9636 C12.4306,7.9636 11.9826,7.5156 11.9826,6.9636 C11.9826,6.4116 12.4306,5.9636 12.9826,5.9636 Z M9.0176,5.9636 C9.5696,5.9636 10.0176,6.4116 10.0176,6.9636 C10.0176,7.5156 9.5696,7.9636 9.0176,7.9636 C8.4656,7.9636 8.0176,7.5156 8.0176,6.9636 C8.0176,6.4116 8.4656,5.9636 9.0176,5.9636 Z M5.0526,5.9636 C5.6046,5.9636 6.0526,6.4116 6.0526,6.9636 C6.0526,7.5156 5.6046,7.9636 5.0526,7.9636 C4.5006,7.9636 4.0526,7.5156 4.0526,6.9636 C4.0526,6.4116 4.5006,5.9636 5.0526,5.9636 Z", fill: color })] })) })));
29
29
  };
30
30
  exports.default = Vodplus;
package/dist/src/common/assets/icons/line/DesignPreference.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var DesignPreference = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.0742,15.9112 C12.1572,16.6692 10.8122,18.4402 10.8122,20.5052 C10.8122,20.9592 10.8782,21.3992 11.0002,21.8172 C5.8122,21.4682 1.7242,17.5842 1.7242,12.8452 C1.7242,7.8752 6.2192,3.8462 11.7632,3.8462 C13.6432,3.8462 15.4022,4.3092 16.9062,5.1152 M20.6709,8.6912 C21.3939,9.9342 21.8029,11.3462 21.8029,12.8452 C21.8029,14.5302 21.2849,16.1062 20.3859,17.4542 C19.6069,16.5162 18.4769,15.8432 17.1799,15.6092" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M8.9422,10.4341 C8.9422,9.3141 8.0342,8.4061 6.9142,8.4061 C5.7952,8.4061 4.8872,9.3141 4.8872,10.4341 C4.8872,11.5541 5.7952,12.4621 6.9142,12.4621 C8.0342,12.4621 8.9422,11.5541 8.9422,10.4341 M13.5869,7.8135 C13.5869,6.8415 12.7989,6.0535 11.8269,6.0535 C10.8559,6.0535 10.0679,6.8415 10.0679,7.8135 C10.0679,8.7855 10.8559,9.5735 11.8269,9.5735 C12.7989,9.5735 13.5869,8.7855 13.5869,7.8135 M9.2917,16.0693 C9.2917,15.0973 8.5037,14.3093 7.5317,14.3093 C6.5607,14.3093 5.7727,15.0973 5.7727,16.0693 C5.7727,17.0413 6.5607,17.8293 7.5317,17.8293 C8.5037,17.8293 9.2917,17.0413 9.2917,16.0693" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.7283,9.5905 C18.2343,9.7555 18.5663,10.0895 18.5163,10.5975 C18.5083,10.6775 18.4923,10.7575 18.4663,10.8375 L15.2993,20.2945 C15.1073,20.8805 14.4773,21.1985 13.8923,21.0075 C13.3073,20.8155 12.9883,20.1855 13.1803,19.6005 L16.3473,10.1425 C16.5393,9.5575 17.1433,9.3985 17.7283,9.5905 Z M18.6588,1.8879 C18.6588,1.8879 23.8258,3.4439 21.8078,7.3999 C21.8078,7.3999 21.4918,8.0149 20.8398,8.5739 C20.7368,8.6629 20.6258,8.7499 20.5058,8.8329 C19.2708,9.6879 17.7148,9.9479 16.6108,8.9289 C16.1568,8.5099 15.9078,7.6109 15.9508,7.1689 C16.0678,5.9859 16.7088,5.5819 17.6238,4.8589 C18.5388,4.1349 18.7498,2.9029 18.6588,1.8879 Z" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.0742,15.9112 C12.1572,16.6692 10.8122,18.4402 10.8122,20.5052 C10.8122,20.9592 10.8782,21.3992 11.0002,21.8172 C5.8122,21.4682 1.7242,17.5842 1.7242,12.8452 C1.7242,7.8752 6.2192,3.8462 11.7632,3.8462 C13.6432,3.8462 15.4022,4.3092 16.9062,5.1152 M20.6709,8.6912 C21.3939,9.9342 21.8029,11.3462 21.8029,12.8452 C21.8029,14.5302 21.2849,16.1062 20.3859,17.4542 C19.6069,16.5162 18.4769,15.8432 17.1799,15.6092" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M8.9422,10.4341 C8.9422,9.3141 8.0342,8.4061 6.9142,8.4061 C5.7952,8.4061 4.8872,9.3141 4.8872,10.4341 C4.8872,11.5541 5.7952,12.4621 6.9142,12.4621 C8.0342,12.4621 8.9422,11.5541 8.9422,10.4341 M13.5869,7.8135 C13.5869,6.8415 12.7989,6.0535 11.8269,6.0535 C10.8559,6.0535 10.0679,6.8415 10.0679,7.8135 C10.0679,8.7855 10.8559,9.5735 11.8269,9.5735 C12.7989,9.5735 13.5869,8.7855 13.5869,7.8135 M9.2917,16.0693 C9.2917,15.0973 8.5037,14.3093 7.5317,14.3093 C6.5607,14.3093 5.7727,15.0973 5.7727,16.0693 C5.7727,17.0413 6.5607,17.8293 7.5317,17.8293 C8.5037,17.8293 9.2917,17.0413 9.2917,16.0693" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.7283,9.5905 C18.2343,9.7555 18.5663,10.0895 18.5163,10.5975 C18.5083,10.6775 18.4923,10.7575 18.4663,10.8375 L15.2993,20.2945 C15.1073,20.8805 14.4773,21.1985 13.8923,21.0075 C13.3073,20.8155 12.9883,20.1855 13.1803,19.6005 L16.3473,10.1425 C16.5393,9.5575 17.1433,9.3985 17.7283,9.5905 Z M18.6588,1.8879 C18.6588,1.8879 23.8258,3.4439 21.8078,7.3999 C21.8078,7.3999 21.4918,8.0149 20.8398,8.5739 C20.7368,8.6629 20.6258,8.7499 20.5058,8.8329 C19.2708,9.6879 17.7148,9.9479 16.6108,8.9289 C16.1568,8.5099 15.9078,7.6109 15.9508,7.1689 C16.0678,5.9859 16.7088,5.5819 17.6238,4.8589 C18.5388,4.1349 18.7498,2.9029 18.6588,1.8879 Z" })] })) })));
29
29
  };
30
30
  exports.default = DesignPreference;
package/dist/src/common/assets/icons/line/PappType.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PappType = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.2878,7.0015 L4.7118,7.0015 C3.3318,7.0015 2.2118,8.1205 2.2118,9.5015 L2.2118,17.3035 C2.2118,18.6835 3.3318,19.8035 4.7118,19.8035 L19.2878,19.8035 C20.6688,19.8035 21.7878,18.6835 21.7878,17.3035 L21.7878,9.5015 C21.7878,8.1205 20.6688,7.0015 19.2878,7.0015 L19.2878,7.0015 Z M19.2878,8.5015 C19.8398,8.5015 20.2878,8.9505 20.2878,9.5015 L20.2878,17.3035 C20.2878,17.8545 19.8398,18.3035 19.2878,18.3035 L4.7118,18.3035 C4.1608,18.3035 3.7118,17.8545 3.7118,17.3035 L3.7118,9.5015 C3.7118,8.9505 4.1608,8.5015 4.7118,8.5015 L19.2878,8.5015 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeWidth: "1.5", d: "M6.1046,8.0121 L6.1046,5.5901 C6.1046,5.0321 6.5566,4.5801 7.1146,4.5801 L9.4596,4.5801 C10.0176,4.5801 10.4696,5.0321 10.4696,5.5901 L10.4696,8.0121 M13.4324,8.0121 L13.4324,5.5901 C13.4324,5.0321 13.8844,4.5801 14.4424,4.5801 L16.7874,4.5801 C17.3454,4.5801 17.7974,5.0321 17.7974,5.5901 L17.7974,8.0121" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.2878,7.0015 L4.7118,7.0015 C3.3318,7.0015 2.2118,8.1205 2.2118,9.5015 L2.2118,17.3035 C2.2118,18.6835 3.3318,19.8035 4.7118,19.8035 L19.2878,19.8035 C20.6688,19.8035 21.7878,18.6835 21.7878,17.3035 L21.7878,9.5015 C21.7878,8.1205 20.6688,7.0015 19.2878,7.0015 L19.2878,7.0015 Z M19.2878,8.5015 C19.8398,8.5015 20.2878,8.9505 20.2878,9.5015 L20.2878,17.3035 C20.2878,17.8545 19.8398,18.3035 19.2878,18.3035 L4.7118,18.3035 C4.1608,18.3035 3.7118,17.8545 3.7118,17.3035 L3.7118,9.5015 C3.7118,8.9505 4.1608,8.5015 4.7118,8.5015 L19.2878,8.5015 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeWidth: "1.5", d: "M6.1046,8.0121 L6.1046,5.5901 C6.1046,5.0321 6.5566,4.5801 7.1146,4.5801 L9.4596,4.5801 C10.0176,4.5801 10.4696,5.0321 10.4696,5.5901 L10.4696,8.0121 M13.4324,8.0121 L13.4324,5.5901 C13.4324,5.0321 13.8844,4.5801 14.4424,4.5801 L16.7874,4.5801 C17.3454,4.5801 17.7974,5.0321 17.7974,5.5901 L17.7974,8.0121" })] })) })));
29
29
  };
30
30
  exports.default = PappType;
package/dist/src/common/assets/icons/line/PaymentRegularly.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PaymentRegularly = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M21.0349,14.6301 C21.7669,14.6301 22.3629,15.2261 22.3629,15.9581 L22.3629,15.9581 L22.3629,18.4601 C22.3629,18.8741 22.0269,19.2101 21.6129,19.2101 C21.1989,19.2101 20.8629,18.8741 20.8629,18.4601 L20.8629,18.4601 L20.8629,17.2531 C19.0229,20.3521 15.6939,22.2831 12.0009,22.2831 C7.7639,22.2831 4.0059,19.7431 2.4259,15.8131 C2.2719,15.4291 2.4579,14.9921 2.8429,14.8371 C3.2269,14.6871 3.6639,14.8691 3.8179,15.2541 C5.1679,18.6121 8.3799,20.7831 12.0009,20.7831 C15.2909,20.7831 18.2279,18.9791 19.7529,16.1301 L19.7529,16.1301 L18.5329,16.1301 C18.1179,16.1301 17.7829,15.7941 17.7829,15.3801 C17.7829,14.9661 18.1179,14.6301 18.5329,14.6301 L18.5329,14.6301 Z M15.1526,7.6641 C16.47836,7.6641 17.5626608,8.6953704 17.6472836,9.99969245 L17.6526,10.1641 L17.6526,13.8361 C17.6526,15.16186 16.6213296,16.2461608 15.3170076,16.3307836 L15.1526,16.3361 L8.8476,16.3361 C7.52184,16.3361 6.4375392,15.3048296 6.35291635,14.0005076 L6.3476,13.8361 L6.3476,10.1641 C6.3476,8.83834 7.3788704,7.7540392 8.68319245,7.66941635 L8.8476,7.6641 L15.1526,7.6641 Z M16.3526,11.6411 L7.6476,11.6411 L7.6476,13.8361 C7.6476,14.456725 8.12045156,14.9683656 8.7250292,15.0298964 L8.8476,15.0361 L15.1526,15.0361 C15.773225,15.0361 16.2848656,14.5632484 16.3463964,13.9586708 L16.3526,13.8361 L16.3526,11.6411 Z M9.5869,12.3871 C10.0709,12.3871 10.4629,12.7791 10.4629,13.2631 C10.4629,13.7471 10.0709,14.1401 9.5869,14.1401 C9.1029,14.1401 8.7109,13.7471 8.7109,13.2631 C8.7109,12.7791 9.1029,12.3871 9.5869,12.3871 Z M15.1526,8.9641 L8.8476,8.9641 C8.32144615,8.9641 7.8924284,9.3108929 7.7335827,9.78425112 L7.6996,9.9051 L16.3006,9.9051 C16.1786,9.3711 15.7226,8.9641 15.1526,8.9641 Z M11.9985,1.7163 C16.2355,1.7163 19.9945,4.2563 21.5735,8.1873 C21.7275,8.5713 21.5415,9.0083 21.1575,9.1633 C21.0655,9.1993 20.9705,9.2173 20.8775,9.2173 C20.5805,9.2173 20.2995,9.0393 20.1815,8.7463 C18.8315,5.3873 15.6195,3.2163 11.9985,3.2163 C8.80819697,3.2163 5.94982415,4.91356354 4.3889967,7.61419721 L4.2465,7.8703 L5.4675,7.8703 C5.8815,7.8703 6.2175,8.2063 6.2175,8.6203 C6.2175,8.9998 5.93516667,9.31375833 5.56922569,9.36344931 L5.4675,9.3703 L2.9655,9.3703 C2.2783125,9.3703 1.71241406,8.84647188 1.64436108,8.17784395 L1.6375,8.0423 L1.6375,5.5393 C1.6375,5.1253 1.9725,4.7893 2.3875,4.7893 C2.767,4.7893 3.08095833,5.07163333 3.13064931,5.43757431 L3.1375,5.5393 L3.1375,6.7463 C4.9775,3.6473 8.3065,1.7163 11.9985,1.7163 Z" }) })) })));
28
+ 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: "M21.0349,14.6301 C21.7669,14.6301 22.3629,15.2261 22.3629,15.9581 L22.3629,15.9581 L22.3629,18.4601 C22.3629,18.8741 22.0269,19.2101 21.6129,19.2101 C21.1989,19.2101 20.8629,18.8741 20.8629,18.4601 L20.8629,18.4601 L20.8629,17.2531 C19.0229,20.3521 15.6939,22.2831 12.0009,22.2831 C7.7639,22.2831 4.0059,19.7431 2.4259,15.8131 C2.2719,15.4291 2.4579,14.9921 2.8429,14.8371 C3.2269,14.6871 3.6639,14.8691 3.8179,15.2541 C5.1679,18.6121 8.3799,20.7831 12.0009,20.7831 C15.2909,20.7831 18.2279,18.9791 19.7529,16.1301 L19.7529,16.1301 L18.5329,16.1301 C18.1179,16.1301 17.7829,15.7941 17.7829,15.3801 C17.7829,14.9661 18.1179,14.6301 18.5329,14.6301 L18.5329,14.6301 Z M15.1526,7.6641 C16.47836,7.6641 17.5626608,8.6953704 17.6472836,9.99969245 L17.6526,10.1641 L17.6526,13.8361 C17.6526,15.16186 16.6213296,16.2461608 15.3170076,16.3307836 L15.1526,16.3361 L8.8476,16.3361 C7.52184,16.3361 6.4375392,15.3048296 6.35291635,14.0005076 L6.3476,13.8361 L6.3476,10.1641 C6.3476,8.83834 7.3788704,7.7540392 8.68319245,7.66941635 L8.8476,7.6641 L15.1526,7.6641 Z M16.3526,11.6411 L7.6476,11.6411 L7.6476,13.8361 C7.6476,14.456725 8.12045156,14.9683656 8.7250292,15.0298964 L8.8476,15.0361 L15.1526,15.0361 C15.773225,15.0361 16.2848656,14.5632484 16.3463964,13.9586708 L16.3526,13.8361 L16.3526,11.6411 Z M9.5869,12.3871 C10.0709,12.3871 10.4629,12.7791 10.4629,13.2631 C10.4629,13.7471 10.0709,14.1401 9.5869,14.1401 C9.1029,14.1401 8.7109,13.7471 8.7109,13.2631 C8.7109,12.7791 9.1029,12.3871 9.5869,12.3871 Z M15.1526,8.9641 L8.8476,8.9641 C8.32144615,8.9641 7.8924284,9.3108929 7.7335827,9.78425112 L7.6996,9.9051 L16.3006,9.9051 C16.1786,9.3711 15.7226,8.9641 15.1526,8.9641 Z M11.9985,1.7163 C16.2355,1.7163 19.9945,4.2563 21.5735,8.1873 C21.7275,8.5713 21.5415,9.0083 21.1575,9.1633 C21.0655,9.1993 20.9705,9.2173 20.8775,9.2173 C20.5805,9.2173 20.2995,9.0393 20.1815,8.7463 C18.8315,5.3873 15.6195,3.2163 11.9985,3.2163 C8.80819697,3.2163 5.94982415,4.91356354 4.3889967,7.61419721 L4.2465,7.8703 L5.4675,7.8703 C5.8815,7.8703 6.2175,8.2063 6.2175,8.6203 C6.2175,8.9998 5.93516667,9.31375833 5.56922569,9.36344931 L5.4675,9.3703 L2.9655,9.3703 C2.2783125,9.3703 1.71241406,8.84647188 1.64436108,8.17784395 L1.6375,8.0423 L1.6375,5.5393 C1.6375,5.1253 1.9725,4.7893 2.3875,4.7893 C2.767,4.7893 3.08095833,5.07163333 3.13064931,5.43757431 L3.1375,5.5393 L3.1375,6.7463 C4.9775,3.6473 8.3065,1.7163 11.9985,1.7163 Z" }) })));
29
29
  };
30
30
  exports.default = PaymentRegularly;
package/dist/src/common/assets/icons/line/PostVote.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PostVote = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M20.9009,14.3097 L2.8079,14.3097 C2.3619,14.3097 1.9999,14.6717 1.9999,15.1177 L1.9999,20.0557 C1.9999,21.4367 3.1199,22.5557 4.4999,22.5557 L19.2089,22.5557 C20.5899,22.5557 21.7089,21.4367 21.7089,20.0557 L21.7089,15.1177 C21.7089,14.6717 21.3479,14.3097 20.9009,14.3097 L20.9009,14.3097 Z M20.2089,15.8097 L20.2089,20.0557 C20.2089,20.6067 19.7609,21.0557 19.2089,21.0557 L4.4999,21.0557 C3.9489,21.0557 3.4999,20.6067 3.4999,20.0557 L3.4999,15.8097 L20.2089,15.8097 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.8862,10.5243 L17.8352,10.5243 C18.4132,10.5243 18.9402,10.8563 19.1892,11.3783 L20.9232,15.0113 M2.8081,15.0116 L4.8051,11.3116 C5.0671,10.8266 5.5741,10.5246 6.1251,10.5246 L6.9291,10.5246" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.7806,12.768 L6.9286,12.768 L6.9286,4 C6.9286,3.171 7.6006,2.5 8.4286,2.5 L15.2806,2.5 C16.1086,2.5 16.7806,3.171 16.7806,4 L16.7806,12.768 Z M9.4939,7.325 L11.2569,9.35 L14.0359,6.278" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M20.9009,14.3097 L2.8079,14.3097 C2.3619,14.3097 1.9999,14.6717 1.9999,15.1177 L1.9999,20.0557 C1.9999,21.4367 3.1199,22.5557 4.4999,22.5557 L19.2089,22.5557 C20.5899,22.5557 21.7089,21.4367 21.7089,20.0557 L21.7089,15.1177 C21.7089,14.6717 21.3479,14.3097 20.9009,14.3097 L20.9009,14.3097 Z M20.2089,15.8097 L20.2089,20.0557 C20.2089,20.6067 19.7609,21.0557 19.2089,21.0557 L4.4999,21.0557 C3.9489,21.0557 3.4999,20.6067 3.4999,20.0557 L3.4999,15.8097 L20.2089,15.8097 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.8862,10.5243 L17.8352,10.5243 C18.4132,10.5243 18.9402,10.8563 19.1892,11.3783 L20.9232,15.0113 M2.8081,15.0116 L4.8051,11.3116 C5.0671,10.8266 5.5741,10.5246 6.1251,10.5246 L6.9291,10.5246" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.7806,12.768 L6.9286,12.768 L6.9286,4 C6.9286,3.171 7.6006,2.5 8.4286,2.5 L15.2806,2.5 C16.1086,2.5 16.7806,3.171 16.7806,4 L16.7806,12.768 Z M9.4939,7.325 L11.2569,9.35 L14.0359,6.278" })] })) })));
29
29
  };
30
30
  exports.default = PostVote;
package/dist/src/common/assets/icons/line/Target.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var Target = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M13.7087,12.7353 C13.7087,11.3153 12.5577,10.1653 11.1387,10.1653 C9.7187,10.1653 8.5677,11.3153 8.5677,12.7353 C8.5677,14.1553 9.7187,15.3053 11.1387,15.3053 C12.5577,15.3053 13.7087,14.1553 13.7087,12.7353" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M12.4655,4.4594 C12.0315,4.3904 11.5915,4.3444 11.1385,4.3444 C6.5045,4.3444 2.7475,8.1014 2.7475,12.7354 C2.7475,17.3694 6.5045,21.1264 11.1385,21.1264 C15.7725,21.1264 19.5295,17.3694 19.5295,12.7354 C19.5295,12.2824 19.4835,11.8414 19.4145,11.4084 M21.98,4.4241 L19.529,4.3441 L15.853,8.0201 L19.48,8.1381 L22.324,5.2941 C22.639,4.9781 22.426,4.4381 21.98,4.4241 Z M19.4495,1.8937 L19.5295,4.3447 L15.8535,8.0207 L15.7355,4.3937 L18.5795,1.5497 C18.8955,1.2347 19.4355,1.4477 19.4495,1.8937 Z M11.1384,12.7353 L19.5294,4.3443 M11.9796,7.4884 C11.7036,7.4444 11.4266,7.4034 11.1386,7.4034 C8.1936,7.4034 5.8066,9.7904 5.8066,12.7354 C5.8066,15.6794 8.1936,18.0674 11.1386,18.0674 C14.0826,18.0674 16.4696,15.6794 16.4696,12.7354 C16.4696,12.4474 16.4296,12.1694 16.3856,11.8944" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M13.7087,12.7353 C13.7087,11.3153 12.5577,10.1653 11.1387,10.1653 C9.7187,10.1653 8.5677,11.3153 8.5677,12.7353 C8.5677,14.1553 9.7187,15.3053 11.1387,15.3053 C12.5577,15.3053 13.7087,14.1553 13.7087,12.7353" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M12.4655,4.4594 C12.0315,4.3904 11.5915,4.3444 11.1385,4.3444 C6.5045,4.3444 2.7475,8.1014 2.7475,12.7354 C2.7475,17.3694 6.5045,21.1264 11.1385,21.1264 C15.7725,21.1264 19.5295,17.3694 19.5295,12.7354 C19.5295,12.2824 19.4835,11.8414 19.4145,11.4084 M21.98,4.4241 L19.529,4.3441 L15.853,8.0201 L19.48,8.1381 L22.324,5.2941 C22.639,4.9781 22.426,4.4381 21.98,4.4241 Z M19.4495,1.8937 L19.5295,4.3447 L15.8535,8.0207 L15.7355,4.3937 L18.5795,1.5497 C18.8955,1.2347 19.4355,1.4477 19.4495,1.8937 Z M11.1384,12.7353 L19.5294,4.3443 M11.9796,7.4884 C11.7036,7.4444 11.4266,7.4034 11.1386,7.4034 C8.1936,7.4034 5.8066,9.7904 5.8066,12.7354 C5.8066,15.6794 8.1936,18.0674 11.1386,18.0674 C14.0826,18.0674 16.4696,15.6794 16.4696,12.7354 C16.4696,12.4474 16.4296,12.1694 16.3856,11.8944" })] })) })));
29
29
  };
30
30
  exports.default = Target;
package/dist/src/common/assets/icons/line/TypefaceSansSerif20.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var TypefaceSansSerif20 = function (_a) {
27
27
  var color = _a.color, rest = __rest(_a, ["color"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "74", height: "20", viewBox: "0 0 74 20" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "74", height: "20", viewBox: "0 0 74 20" }, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M5.1401,5.6187 C3.6461,5.6187 2.6731,6.3967 2.6651,7.4707 C2.6731,8.6537 3.9881,9.0977 4.8441,9.3077 L5.9651,9.6187 C7.1711,9.9297 9.1561,10.6227 9.1561,12.7317 C9.1561,14.5677 7.6771,15.9927 5.0621,15.9997 C2.6341,15.9927 1.1321,14.7397 1.0001,12.8717 L2.4321,12.8717 C2.5491,14.1327 3.7241,14.7317 5.0621,14.7237 C6.6191,14.7317 7.7861,13.9297 7.7861,12.7007 C7.7861,11.6027 6.7431,11.1827 5.5601,10.8487 L4.1751,10.4747 C2.4081,9.9607 1.3031,9.0587 1.3111,7.5327 C1.3031,5.6267 3.0001,4.3737 5.1871,4.3737 C7.3731,4.3737 8.9451,5.6497 9.0001,7.3617 L7.6301,7.3617 C7.5141,6.2567 6.4861,5.6187 5.1401,5.6187 M13.6997,14.8016 C15.2097,14.8096 16.0497,13.7976 16.0497,12.7316 L16.0497,11.8836 C15.6527,11.9066 14.3227,12.0076 13.9177,12.0316 C12.7037,12.1086 11.9327,12.5366 11.9257,13.4626 C11.9327,14.3576 12.6727,14.8096 13.6997,14.8016 M13.7617,10.9106 C14.3067,10.8716 15.6687,10.7936 16.0497,10.7856 L16.0497,10.1016 C16.0497,9.0276 15.4117,8.4046 14.1357,8.4046 C13.0697,8.4046 12.4237,8.8946 12.2367,9.5406 L10.8357,9.5406 C11.0067,8.1786 12.3297,7.2376 14.1977,7.2376 C15.3027,7.2376 17.3807,7.5646 17.372723,10.2256 L17.372723,15.7976 L16.0497,15.7976 L16.0497,14.6456 L15.9877,14.6456 C15.7077,15.2136 14.9367,15.9926 13.4667,15.9996 C11.8627,15.9926 10.5867,15.0506 10.5867,13.4006 C10.5867,11.4626 12.2987,11.0196 13.7617,10.9106 M20.8593,15.7977 L19.5203,15.7977 L19.5203,7.3467 L20.8123,7.3467 L20.8123,8.6697 L20.9213,8.6697 C21.3183,7.8057 22.1123,7.2377 23.3963,7.2377 C25.1083,7.2377 26.2523,8.2797 26.2443417,10.4277 L26.2443417,15.7977 L24.9063,15.7977 L24.9063,10.5217 C24.9063,9.2137 24.1903,8.4357 22.9913,8.4357 C21.7623,8.4357 20.8593,9.2607 20.8593,10.7237 L20.8593,15.7977 Z M31.3807,8.3735 C30.3377,8.3815 29.5987,8.9415 29.5907,9.6495 C29.5987,10.2105 30.0497,10.5915 31.0387,10.8325 L32.2987,11.1435 C33.8087,11.5015 34.5477,12.2565 34.5557,13.4315 C34.5477,14.8945 33.3577,15.9765 31.2407,15.9685561 C29.3417,15.9765 28.2137,15.1285 27.9877,13.5875 L29.3887,13.5875 C29.5437,14.4125 30.1437,14.8095 31.2097,14.8015 C32.4157,14.8095 33.1707,14.3035 33.1707,13.5095 C33.1707,12.9105 32.7427,12.5215 31.7857,12.2955 L30.5087,11.9995 C29.0387,11.6575 28.2527,10.8555 28.2527,9.7275 C28.2527,8.2805 29.5207,7.2375 31.3807,7.2375 C33.1317,7.2375 34.2287,8.1715 34.3997,9.5405 L33.0927,9.5405 C32.9057,8.8405 32.3687,8.3815 31.3807,8.3735 M36.205,11.595 L41.139,11.595 L41.139,10.365 L36.205,10.365 L36.205,11.595 Z M46.1822,8.3735 C45.1392,8.3815 44.4002,8.9415 44.3922,9.6495 C44.4002,10.2105 44.8512,10.5915 45.8402,10.8325 L47.1002,11.1435 C48.6102,11.5015 49.3492,12.2565 49.3572,13.4315 C49.3492,14.8945 48.1592,15.9765 46.0422,15.9685561 C44.1432,15.9765 43.0152,15.1285 42.7892,13.5875 L44.1902,13.5875 C44.3452,14.4125 44.9452,14.8095 46.0112,14.8015 C47.2172,14.8095 47.9722,14.3035 47.9722,13.5095 C47.9722,12.9105 47.5442,12.5215 46.5872,12.2955 L45.3102,11.9995 C43.8402,11.6575 43.0542,10.8555 43.0542,9.7275 C43.0542,8.2805 44.3222,7.2375 46.1822,7.2375 C47.9332,7.2375 49.0302,8.1715 49.2012,9.5405 L47.8942,9.5405 C47.7072,8.8405 47.1702,8.3815 46.1822,8.3735 M56.8126,10.8794 C56.8046,9.4704 55.9176,8.4204 54.5246,8.4204 C53.0616,8.4204 52.1356,9.5724 52.0426,10.8794 L56.8126,10.8794 Z M50.6956,11.6424 C50.6956,9.0424 52.2286,7.2374 54.5246,7.2374 C56.2986,7.2374 58.1746,8.3264 58.1666255,11.4554 L58.1666255,12.0154 L52.0346,12.0154 C52.1046,13.8054 53.1476,14.7864 54.6496,14.7864 C55.6606,14.7864 56.2986,14.3424 56.6106,13.8214 L58.0426,13.8214 C57.6456,15.1054 56.3926,15.9764 54.6496,15.9684547 C52.2056,15.9764 50.6956,14.2334 50.6956,11.6424 L50.6956,11.6424 Z M59.9099,7.3463 L61.2019,7.3463 L61.2019,8.6383 L61.2949,8.6383 C61.5989,7.7823 62.4779,7.2143 63.4739,7.2063 C63.6769,7.2143 64.0189,7.2213 64.1749,7.2373 L64.1749,8.5913 C64.0729,8.5683 63.7149,8.4983 63.3649,8.4983 C62.1509,8.4983 61.2489,9.3383 61.2489,10.4743 L61.2489,15.7973 L59.9099,15.7973 L59.9099,7.3463 Z M65.482,15.797 L66.821,15.797 L66.821,7.346 L65.482,7.346 L65.482,15.797 Z M66.151,4.171 C66.665,4.163 67.093,4.56 67.101,5.058 C67.093,5.549 66.665,5.946 66.151,5.946 C65.637,5.946 65.209,5.549 65.217,5.058 C65.209,4.56 65.637,4.163 66.151,4.171 L66.151,4.171 Z M72.7348,8.4669 L70.8668,8.4669 L70.8668,15.7979 L69.5128,15.7979 L69.5128,8.4669 L68.1588,8.4669 L68.1588,7.3459 L69.5128,7.3459 L69.5128,6.1949 C69.5208,4.8249 70.4318,3.9999 71.9258,3.9999 C72.2528,3.9999 72.6418,4.0389 72.9218,4.0929 L72.9218,5.2919 C72.6338,5.2449 72.3928,5.2299 72.2208,5.2299 C71.2798,5.2299 70.8598,5.6189 70.8668,6.4899 L70.8668,7.3459 L72.7348,7.3459 L72.7348,8.4669 Z" }) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "74", height: "20", viewBox: "0 0 74 20" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M5.1401,5.6187 C3.6461,5.6187 2.6731,6.3967 2.6651,7.4707 C2.6731,8.6537 3.9881,9.0977 4.8441,9.3077 L5.9651,9.6187 C7.1711,9.9297 9.1561,10.6227 9.1561,12.7317 C9.1561,14.5677 7.6771,15.9927 5.0621,15.9997 C2.6341,15.9927 1.1321,14.7397 1.0001,12.8717 L2.4321,12.8717 C2.5491,14.1327 3.7241,14.7317 5.0621,14.7237 C6.6191,14.7317 7.7861,13.9297 7.7861,12.7007 C7.7861,11.6027 6.7431,11.1827 5.5601,10.8487 L4.1751,10.4747 C2.4081,9.9607 1.3031,9.0587 1.3111,7.5327 C1.3031,5.6267 3.0001,4.3737 5.1871,4.3737 C7.3731,4.3737 8.9451,5.6497 9.0001,7.3617 L7.6301,7.3617 C7.5141,6.2567 6.4861,5.6187 5.1401,5.6187 M13.6997,14.8016 C15.2097,14.8096 16.0497,13.7976 16.0497,12.7316 L16.0497,11.8836 C15.6527,11.9066 14.3227,12.0076 13.9177,12.0316 C12.7037,12.1086 11.9327,12.5366 11.9257,13.4626 C11.9327,14.3576 12.6727,14.8096 13.6997,14.8016 M13.7617,10.9106 C14.3067,10.8716 15.6687,10.7936 16.0497,10.7856 L16.0497,10.1016 C16.0497,9.0276 15.4117,8.4046 14.1357,8.4046 C13.0697,8.4046 12.4237,8.8946 12.2367,9.5406 L10.8357,9.5406 C11.0067,8.1786 12.3297,7.2376 14.1977,7.2376 C15.3027,7.2376 17.3807,7.5646 17.372723,10.2256 L17.372723,15.7976 L16.0497,15.7976 L16.0497,14.6456 L15.9877,14.6456 C15.7077,15.2136 14.9367,15.9926 13.4667,15.9996 C11.8627,15.9926 10.5867,15.0506 10.5867,13.4006 C10.5867,11.4626 12.2987,11.0196 13.7617,10.9106 M20.8593,15.7977 L19.5203,15.7977 L19.5203,7.3467 L20.8123,7.3467 L20.8123,8.6697 L20.9213,8.6697 C21.3183,7.8057 22.1123,7.2377 23.3963,7.2377 C25.1083,7.2377 26.2523,8.2797 26.2443417,10.4277 L26.2443417,15.7977 L24.9063,15.7977 L24.9063,10.5217 C24.9063,9.2137 24.1903,8.4357 22.9913,8.4357 C21.7623,8.4357 20.8593,9.2607 20.8593,10.7237 L20.8593,15.7977 Z M31.3807,8.3735 C30.3377,8.3815 29.5987,8.9415 29.5907,9.6495 C29.5987,10.2105 30.0497,10.5915 31.0387,10.8325 L32.2987,11.1435 C33.8087,11.5015 34.5477,12.2565 34.5557,13.4315 C34.5477,14.8945 33.3577,15.9765 31.2407,15.9685561 C29.3417,15.9765 28.2137,15.1285 27.9877,13.5875 L29.3887,13.5875 C29.5437,14.4125 30.1437,14.8095 31.2097,14.8015 C32.4157,14.8095 33.1707,14.3035 33.1707,13.5095 C33.1707,12.9105 32.7427,12.5215 31.7857,12.2955 L30.5087,11.9995 C29.0387,11.6575 28.2527,10.8555 28.2527,9.7275 C28.2527,8.2805 29.5207,7.2375 31.3807,7.2375 C33.1317,7.2375 34.2287,8.1715 34.3997,9.5405 L33.0927,9.5405 C32.9057,8.8405 32.3687,8.3815 31.3807,8.3735 M36.205,11.595 L41.139,11.595 L41.139,10.365 L36.205,10.365 L36.205,11.595 Z M46.1822,8.3735 C45.1392,8.3815 44.4002,8.9415 44.3922,9.6495 C44.4002,10.2105 44.8512,10.5915 45.8402,10.8325 L47.1002,11.1435 C48.6102,11.5015 49.3492,12.2565 49.3572,13.4315 C49.3492,14.8945 48.1592,15.9765 46.0422,15.9685561 C44.1432,15.9765 43.0152,15.1285 42.7892,13.5875 L44.1902,13.5875 C44.3452,14.4125 44.9452,14.8095 46.0112,14.8015 C47.2172,14.8095 47.9722,14.3035 47.9722,13.5095 C47.9722,12.9105 47.5442,12.5215 46.5872,12.2955 L45.3102,11.9995 C43.8402,11.6575 43.0542,10.8555 43.0542,9.7275 C43.0542,8.2805 44.3222,7.2375 46.1822,7.2375 C47.9332,7.2375 49.0302,8.1715 49.2012,9.5405 L47.8942,9.5405 C47.7072,8.8405 47.1702,8.3815 46.1822,8.3735 M56.8126,10.8794 C56.8046,9.4704 55.9176,8.4204 54.5246,8.4204 C53.0616,8.4204 52.1356,9.5724 52.0426,10.8794 L56.8126,10.8794 Z M50.6956,11.6424 C50.6956,9.0424 52.2286,7.2374 54.5246,7.2374 C56.2986,7.2374 58.1746,8.3264 58.1666255,11.4554 L58.1666255,12.0154 L52.0346,12.0154 C52.1046,13.8054 53.1476,14.7864 54.6496,14.7864 C55.6606,14.7864 56.2986,14.3424 56.6106,13.8214 L58.0426,13.8214 C57.6456,15.1054 56.3926,15.9764 54.6496,15.9684547 C52.2056,15.9764 50.6956,14.2334 50.6956,11.6424 L50.6956,11.6424 Z M59.9099,7.3463 L61.2019,7.3463 L61.2019,8.6383 L61.2949,8.6383 C61.5989,7.7823 62.4779,7.2143 63.4739,7.2063 C63.6769,7.2143 64.0189,7.2213 64.1749,7.2373 L64.1749,8.5913 C64.0729,8.5683 63.7149,8.4983 63.3649,8.4983 C62.1509,8.4983 61.2489,9.3383 61.2489,10.4743 L61.2489,15.7973 L59.9099,15.7973 L59.9099,7.3463 Z M65.482,15.797 L66.821,15.797 L66.821,7.346 L65.482,7.346 L65.482,15.797 Z M66.151,4.171 C66.665,4.163 67.093,4.56 67.101,5.058 C67.093,5.549 66.665,5.946 66.151,5.946 C65.637,5.946 65.209,5.549 65.217,5.058 C65.209,4.56 65.637,4.163 66.151,4.171 L66.151,4.171 Z M72.7348,8.4669 L70.8668,8.4669 L70.8668,15.7979 L69.5128,15.7979 L69.5128,8.4669 L68.1588,8.4669 L68.1588,7.3459 L69.5128,7.3459 L69.5128,6.1949 C69.5208,4.8249 70.4318,3.9999 71.9258,3.9999 C72.2528,3.9999 72.6418,4.0389 72.9218,4.0929 L72.9218,5.2919 C72.6338,5.2449 72.3928,5.2299 72.2208,5.2299 C71.2798,5.2299 70.8598,5.6189 70.8668,6.4899 L70.8668,7.3459 L72.7348,7.3459 L72.7348,8.4669 Z" }) })));
29
29
  };
30
30
  exports.default = TypefaceSansSerif20;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type Props = {
5
4
  titleText?: PDSTextType;
@@ -9,9 +8,8 @@ type Props = {
9
8
  hoverMode?: 'none' | 'use';
10
9
  contextMenuOptionArray?: PDSValueOption[];
11
10
  contextMenuState?: 'normal' | 'disabled';
12
- colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
13
- contextMenuPosition?: PlacementTypes;
11
+ colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
14
12
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
13
  };
16
- declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
14
+ declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
17
15
  export default BasicChatListItem;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -33,7 +33,11 @@ var titleTextColors = {
33
33
  subscriber: 'sysTextSecondary',
34
34
  subscriber_transparent: 'sysTextWhite',
35
35
  secondary_transparent_grey: 'sysTextSecondary',
36
- white_transparent_grey: 'sysTextWhite'
36
+ white_transparent_grey: 'sysTextWhite',
37
+ brand_primary_solid: 'usrTextBrandPrimary',
38
+ brand_primary_translucent: 'usrTextBrandPrimary',
39
+ secondary_transparent: 'sysTextSecondary',
40
+ white_transparent: 'sysTextWhite'
37
41
  };
38
42
  var backgroundColorTheme = {
39
43
  seller: 'ui_cpnt_list_base_area_seller',
@@ -41,11 +45,15 @@ var backgroundColorTheme = {
41
45
  subscriber: 'ui_cpnt_list_base_area',
42
46
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
43
47
  secondary_transparent_grey: 'ui_cpnt_list_base_area',
44
- white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
48
+ white_transparent_grey: 'ui_cpnt_list_base_area_transparent',
49
+ brand_primary_solid: 'ui_cpnt_list_base_area_seller',
50
+ brand_primary_translucent: 'ui_cpnt_list_base_area_transparent_seller',
51
+ secondary_transparent: 'ui_cpnt_list_base_area',
52
+ white_transparent: 'ui_cpnt_list_base_area_transparent'
45
53
  };
46
54
  function BasicChatListItem(_a) {
47
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'v-auto' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
48
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
56
+ var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
49
57
  var contextMenuRef = (0, react_1.useRef)(null);
50
58
  var chatBody = document.querySelector('#chatMessageBox');
51
59
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -79,6 +87,7 @@ function BasicChatListItem(_a) {
79
87
  var contentTextColorOverride;
80
88
  var iconColorKey;
81
89
  switch (colorTheme) {
90
+ case 'white_transparent':
82
91
  case 'subscriber_transparent': {
83
92
  contentTextColorTheme = 'sysTextWhite';
84
93
  iconColorKey = 'ui_cpnt_button_icon_white';
@@ -98,7 +107,7 @@ function BasicChatListItem(_a) {
98
107
  iconColorKey = 'ui_cpnt_button_icon_enabled';
99
108
  }
100
109
  }
101
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })) })] })) }));
110
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })) })] })) }));
102
111
  }
103
112
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
104
113
  var colorTheme = _a.colorTheme, theme = _a.theme;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
5
4
  export type ChatBubbleListItemProps = {
@@ -10,11 +9,12 @@ export type ChatBubbleListItemProps = {
10
9
  colorTheme?: ColorThemeType;
11
10
  timeMode?: 'none' | 'use';
12
11
  timeText?: PDSTextType;
12
+ countMode?: 'none' | 'use';
13
+ countText?: PDSTextType;
13
14
  contextMenuOptionArray?: PDSValueOption[];
14
15
  contextMenuState?: 'normal' | 'disabled';
15
- contextMenuPosition?: PlacementTypes;
16
16
  children?: React.ReactNode;
17
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
18
18
  };
19
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, contextMenuPosition, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
19
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
20
20
  export default ChatBubbleListItem;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,12 +67,40 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
- var isMe = styleTheme.includes('me');
70
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
72
71
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
72
  var contextMenuRef = (0, react_1.useRef)(null);
74
73
  var chatBody = document.querySelector('#chatMessageBox');
75
74
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
75
+ var isMe = styleTheme.includes('me');
76
+ var isProfileImageShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar';
77
+ var isTitleTextShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar' || styleTheme === 'other';
78
+ var hasLeftSpacing = styleTheme === 'other_avatar_impact' ||
79
+ styleTheme === 'other_avatar' ||
80
+ styleTheme === 'other_avatar_sub';
81
+ var titleTextColorTheme = 'sysTextPrimary';
82
+ var countTextColorTheme = 'sysTextBrandPrimary';
83
+ switch (colorTheme) {
84
+ case 'grey': {
85
+ titleTextColorTheme = 'sysTextPrimary';
86
+ countTextColorTheme = 'sysTextBrandPrimary';
87
+ break;
88
+ }
89
+ case 'brand_primary': {
90
+ titleTextColorTheme = 'usrTextBrandPrimary';
91
+ countTextColorTheme = 'sysTextBrandPrimary';
92
+ break;
93
+ }
94
+ case 'translucent_white': {
95
+ titleTextColorTheme = 'sysTextBlack';
96
+ countTextColorTheme = 'sysTextTertiary';
97
+ break;
98
+ }
99
+ case 'translucent_black': {
100
+ titleTextColorTheme = 'sysTextWhite';
101
+ countTextColorTheme = 'sysTextTertiary';
102
+ }
103
+ }
76
104
  /**
77
105
  * @when contextMenu가 열려 있을 때
78
106
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -111,48 +139,7 @@ function ChatBubbleListItem(_a) {
111
139
  }
112
140
  setIsContextMenuOpen(false);
113
141
  };
114
- var isShowProfileImage = function () {
115
- if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
116
- return true;
117
- }
118
- return false;
119
- };
120
- var isShowTitleText = function () {
121
- if (styleTheme === 'other_avatar_impact' ||
122
- styleTheme === 'other_avatar' ||
123
- styleTheme === 'other') {
124
- return true;
125
- }
126
- return false;
127
- };
128
- var checkTextColorTheme = function () {
129
- switch (colorTheme) {
130
- case 'grey': {
131
- return 'sysTextPrimary';
132
- }
133
- case 'brand_primary': {
134
- return 'usrTextBrandPrimary';
135
- }
136
- case 'translucent_white': {
137
- return 'sysTextBlack';
138
- }
139
- case 'translucent_black': {
140
- return 'sysTextWhite';
141
- }
142
- default: {
143
- return 'sysTextPrimary';
144
- }
145
- }
146
- };
147
- var isLeftSpacingChecker = function () {
148
- if (styleTheme === 'other_avatar_impact' ||
149
- styleTheme === 'other_avatar' ||
150
- styleTheme === 'other_avatar_sub') {
151
- return true;
152
- }
153
- return false;
154
- };
155
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
142
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
156
143
  }
157
144
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
158
145
  var theme = _a.theme;
@@ -184,7 +171,16 @@ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (t
184
171
  var isMe = _a.isMe;
185
172
  return isMe && MyChatBubble;
186
173
  });
187
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
174
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
175
+ var isMe = _a.isMe;
176
+ return isMe && 'flex-end';
177
+ }, function (_a) {
178
+ var isMe = _a.isMe, theme = _a.theme;
179
+ return !isMe && theme.spacing.spacingA;
180
+ }, function (_a) {
181
+ var isMe = _a.isMe, theme = _a.theme;
182
+ return isMe && theme.spacing.spacingA;
183
+ });
188
184
  var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
189
185
  var theme = _a.theme;
190
186
  return theme.spacing.spacingB;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type Props = {
5
4
  titleText?: PDSTextType;
@@ -9,9 +8,8 @@ type Props = {
9
8
  hoverMode?: 'none' | 'use';
10
9
  contextMenuOptionArray?: PDSValueOption[];
11
10
  contextMenuState?: 'normal' | 'disabled';
12
- colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
13
- contextMenuPosition?: PlacementTypes;
11
+ colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
14
12
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
13
  };
16
- declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
14
+ declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
17
15
  export default BasicChatListItem;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -33,7 +33,11 @@ var titleTextColors = {
33
33
  subscriber: 'sysTextSecondary',
34
34
  subscriber_transparent: 'sysTextWhite',
35
35
  secondary_transparent_grey: 'sysTextSecondary',
36
- white_transparent_grey: 'sysTextWhite'
36
+ white_transparent_grey: 'sysTextWhite',
37
+ brand_primary_solid: 'usrTextBrandPrimary',
38
+ brand_primary_translucent: 'usrTextBrandPrimary',
39
+ secondary_transparent: 'sysTextSecondary',
40
+ white_transparent: 'sysTextWhite'
37
41
  };
38
42
  var backgroundColorTheme = {
39
43
  seller: 'ui_cpnt_list_base_area_seller',
@@ -41,11 +45,15 @@ var backgroundColorTheme = {
41
45
  subscriber: 'ui_cpnt_list_base_area',
42
46
  subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
43
47
  secondary_transparent_grey: 'ui_cpnt_list_base_area',
44
- white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
48
+ white_transparent_grey: 'ui_cpnt_list_base_area_transparent',
49
+ brand_primary_solid: 'ui_cpnt_list_base_area_seller',
50
+ brand_primary_translucent: 'ui_cpnt_list_base_area_transparent_seller',
51
+ secondary_transparent: 'ui_cpnt_list_base_area',
52
+ white_transparent: 'ui_cpnt_list_base_area_transparent'
45
53
  };
46
54
  function BasicChatListItem(_a) {
47
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'v-auto' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
48
- var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
56
+ var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
49
57
  var contextMenuRef = (0, react_1.useRef)(null);
50
58
  var chatBody = document.querySelector('#chatMessageBox');
51
59
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -96,6 +104,7 @@ function BasicChatListItem(_a) {
96
104
  var contentTextColorOverride;
97
105
  var iconColorKey;
98
106
  switch (colorTheme) {
107
+ case 'white_transparent':
99
108
  case 'subscriber_transparent': {
100
109
  contentTextColorTheme = 'sysTextWhite';
101
110
  iconColorKey = 'ui_cpnt_button_icon_white';
@@ -115,7 +124,7 @@ function BasicChatListItem(_a) {
115
124
  iconColorKey = 'ui_cpnt_button_icon_enabled';
116
125
  }
117
126
  }
118
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MoreButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) })) })), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: handleContextMenuOutsideClick }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
127
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MoreButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) })) })), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: handleContextMenuOutsideClick }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
119
128
  }
120
129
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
121
130
  var colorTheme = _a.colorTheme, theme = _a.theme;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
5
4
  export type ChatBubbleListItemProps = {
@@ -10,11 +9,12 @@ export type ChatBubbleListItemProps = {
10
9
  colorTheme?: ColorThemeType;
11
10
  timeMode?: 'none' | 'use';
12
11
  timeText?: PDSTextType;
12
+ countMode?: 'none' | 'use';
13
+ countText?: PDSTextType;
13
14
  contextMenuOptionArray?: PDSValueOption[];
14
15
  contextMenuState?: 'normal' | 'disabled';
15
- contextMenuPosition?: PlacementTypes;
16
16
  children?: React.ReactNode;
17
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
18
18
  };
19
- declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, contextMenuPosition, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
19
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
20
20
  export default ChatBubbleListItem;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,12 +67,40 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
- var isMe = styleTheme.includes('me');
70
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
72
71
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
72
  var contextMenuRef = (0, react_1.useRef)(null);
74
73
  var chatBody = document.querySelector('#chatMessageBox');
75
74
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
75
+ var isMe = styleTheme.includes('me');
76
+ var isProfileImageShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar';
77
+ var isTitleTextShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar' || styleTheme === 'other';
78
+ var hasLeftSpacing = styleTheme === 'other_avatar_impact' ||
79
+ styleTheme === 'other_avatar' ||
80
+ styleTheme === 'other_avatar_sub';
81
+ var titleTextColorTheme = 'sysTextPrimary';
82
+ var countTextColorTheme = 'sysTextBrandPrimary';
83
+ switch (colorTheme) {
84
+ case 'grey': {
85
+ titleTextColorTheme = 'sysTextPrimary';
86
+ countTextColorTheme = 'sysTextBrandPrimary';
87
+ break;
88
+ }
89
+ case 'brand_primary': {
90
+ titleTextColorTheme = 'usrTextBrandPrimary';
91
+ countTextColorTheme = 'sysTextBrandPrimary';
92
+ break;
93
+ }
94
+ case 'translucent_white': {
95
+ titleTextColorTheme = 'sysTextBlack';
96
+ countTextColorTheme = 'sysTextTertiary';
97
+ break;
98
+ }
99
+ case 'translucent_black': {
100
+ titleTextColorTheme = 'sysTextWhite';
101
+ countTextColorTheme = 'sysTextTertiary';
102
+ }
103
+ }
76
104
  /**
77
105
  * @when contextMenu가 열려 있을 때
78
106
  * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -113,48 +141,7 @@ function ChatBubbleListItem(_a) {
113
141
  }
114
142
  setIsContextMenuOpen(false);
115
143
  };
116
- var isShowProfileImage = function () {
117
- if (styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar') {
118
- return true;
119
- }
120
- return false;
121
- };
122
- var isShowTitleText = function () {
123
- if (styleTheme === 'other_avatar_impact' ||
124
- styleTheme === 'other_avatar' ||
125
- styleTheme === 'other') {
126
- return true;
127
- }
128
- return false;
129
- };
130
- var checkTextColorTheme = function () {
131
- switch (colorTheme) {
132
- case 'grey': {
133
- return 'sysTextPrimary';
134
- }
135
- case 'brand_primary': {
136
- return 'usrTextBrandPrimary';
137
- }
138
- case 'translucent_white': {
139
- return 'sysTextBlack';
140
- }
141
- case 'translucent_black': {
142
- return 'sysTextWhite';
143
- }
144
- default: {
145
- return 'sysTextPrimary';
146
- }
147
- }
148
- };
149
- var isLeftSpacingChecker = function () {
150
- if (styleTheme === 'other_avatar_impact' ||
151
- styleTheme === 'other_avatar' ||
152
- styleTheme === 'other_avatar_sub') {
153
- return true;
154
- }
155
- return false;
156
- };
157
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
144
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] }))), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
158
145
  }
159
146
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
160
147
  var theme = _a.theme;
@@ -186,7 +173,16 @@ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_9 || (t
186
173
  var isMe = _a.isMe;
187
174
  return isMe && MyChatBubble;
188
175
  });
189
- var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
176
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n align-items: ", ";\n align-self: flex-end;\n display: flex;\n flex-direction: column;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
177
+ var isMe = _a.isMe;
178
+ return isMe && 'flex-end';
179
+ }, function (_a) {
180
+ var isMe = _a.isMe, theme = _a.theme;
181
+ return !isMe && theme.spacing.spacingA;
182
+ }, function (_a) {
183
+ var isMe = _a.isMe, theme = _a.theme;
184
+ return isMe && theme.spacing.spacingA;
185
+ });
190
186
  var S_SeeMoreButton = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n height: 24px;\n justify-content: right;\n margin-top: ", ";\n min-width: 48px;\n opacity: ", ";\n padding-right: ", ";\n position: relative;\n width: 48px;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
191
187
  var theme = _a.theme;
192
188
  return theme.spacing.spacingB;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/fill/VideocallPro.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var VideocallPro = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M18.736,2.0173 C20.669,2.0173 22.236,3.5843 22.236,5.5173 L22.236,5.5173 L22.236,14.5703 C22.236,16.5033 20.669,18.0703 18.736,18.0703 L18.736,18.0703 L17.024,18.0703 L17.024,20.0313 C17.024,20.9823 16.244,21.6223 15.425,21.6223 C15.058,21.6223 14.683,21.4933 14.367,21.2063 L14.367,21.2063 L10.917,18.0703 L5.264,18.0703 C3.331,18.0703 1.764,16.5033 1.764,14.5703 L1.764,14.5703 L1.764,5.5173 C1.764,3.5843 3.331,2.0173 5.264,2.0173 L5.264,2.0173 Z M18.736,3.5173 L5.264,3.5173 C4.161,3.5173 3.264,4.4143 3.264,5.5173 L3.264,5.5173 L3.264,14.5703 C3.264,15.6733 4.161,16.5703 5.264,16.5703 L5.264,16.5703 L11.497,16.5703 L11.926,16.9603 L15.376,20.0963 C15.404,20.1223 15.416,20.1223 15.425,20.1223 C15.435,20.1223 15.524,20.1203 15.524,20.0313 L15.524,20.0313 L15.524,16.5703 L18.736,16.5703 C19.839,16.5703 20.736,15.6733 20.736,14.5703 L20.736,14.5703 L20.736,5.5173 C20.736,4.4143 19.839,3.5173 18.736,3.5173 L18.736,3.5173 Z M13.5702,6.2758 C14.4892,6.2758 15.2342,7.0208 15.2342,7.9408 L15.2342,7.9408 L15.2342,8.6758 L16.5392,7.6698 C17.0392,7.2858 17.7612,7.6448 17.7572165,8.2748 L17.7572165,8.2748 L17.7312,11.9348 C17.7262,12.5648 16.9992,12.9138 16.5052,12.5228 L16.5052,12.5228 L15.2342,11.5178 L15.2342,12.1658 C15.2342,13.0848 14.4892,13.8308 13.5702,13.8308 L13.5702,13.8308 L8.5112,13.8308 C7.5922,13.8308 6.8462,13.0848 6.8462,12.1658 L6.8462,12.1658 L6.8462,7.9408 C6.8462,7.0208 7.5922,6.2758 8.5112,6.2758 L8.5112,6.2758 Z M11.0412,7.9948 C10.7642,7.9948 10.5412,8.2188 10.5412,8.4948 L10.5412,8.4948 L10.5412,9.5998 L9.4362,9.5998 C9.1592,9.5998 8.9362,9.8238 8.9362,10.0998 C8.9362,10.3758 9.1592,10.5998 9.4362,10.5998 L9.4362,10.5998 L10.5412,10.5998 L10.5412,11.7038 C10.5412,11.9808 10.7642,12.2038 11.0412,12.2038 C11.3172,12.2038 11.5412,11.9808 11.5412,11.7038 L11.5412,11.7038 L11.5412,10.5998 L12.6452,10.5998 C12.9212,10.5998 13.1452,10.3758 13.1452,10.0998 C13.1452,9.8238 12.9212,9.5998 12.6452,9.5998 L12.6452,9.5998 L11.5412,9.5998 L11.5412,8.4948 C11.5412,8.2188 11.3172,7.9948 11.0412,7.9948 Z", fill: color, fillRule: "evenodd" }) })) })));
28
+ 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", { d: "M18.736,2.0173 C20.669,2.0173 22.236,3.5843 22.236,5.5173 L22.236,5.5173 L22.236,14.5703 C22.236,16.5033 20.669,18.0703 18.736,18.0703 L18.736,18.0703 L17.024,18.0703 L17.024,20.0313 C17.024,20.9823 16.244,21.6223 15.425,21.6223 C15.058,21.6223 14.683,21.4933 14.367,21.2063 L14.367,21.2063 L10.917,18.0703 L5.264,18.0703 C3.331,18.0703 1.764,16.5033 1.764,14.5703 L1.764,14.5703 L1.764,5.5173 C1.764,3.5843 3.331,2.0173 5.264,2.0173 L5.264,2.0173 Z M18.736,3.5173 L5.264,3.5173 C4.161,3.5173 3.264,4.4143 3.264,5.5173 L3.264,5.5173 L3.264,14.5703 C3.264,15.6733 4.161,16.5703 5.264,16.5703 L5.264,16.5703 L11.497,16.5703 L11.926,16.9603 L15.376,20.0963 C15.404,20.1223 15.416,20.1223 15.425,20.1223 C15.435,20.1223 15.524,20.1203 15.524,20.0313 L15.524,20.0313 L15.524,16.5703 L18.736,16.5703 C19.839,16.5703 20.736,15.6733 20.736,14.5703 L20.736,14.5703 L20.736,5.5173 C20.736,4.4143 19.839,3.5173 18.736,3.5173 L18.736,3.5173 Z M13.5702,6.2758 C14.4892,6.2758 15.2342,7.0208 15.2342,7.9408 L15.2342,7.9408 L15.2342,8.6758 L16.5392,7.6698 C17.0392,7.2858 17.7612,7.6448 17.7572165,8.2748 L17.7572165,8.2748 L17.7312,11.9348 C17.7262,12.5648 16.9992,12.9138 16.5052,12.5228 L16.5052,12.5228 L15.2342,11.5178 L15.2342,12.1658 C15.2342,13.0848 14.4892,13.8308 13.5702,13.8308 L13.5702,13.8308 L8.5112,13.8308 C7.5922,13.8308 6.8462,13.0848 6.8462,12.1658 L6.8462,12.1658 L6.8462,7.9408 C6.8462,7.0208 7.5922,6.2758 8.5112,6.2758 L8.5112,6.2758 Z M11.0412,7.9948 C10.7642,7.9948 10.5412,8.2188 10.5412,8.4948 L10.5412,8.4948 L10.5412,9.5998 L9.4362,9.5998 C9.1592,9.5998 8.9362,9.8238 8.9362,10.0998 C8.9362,10.3758 9.1592,10.5998 9.4362,10.5998 L9.4362,10.5998 L10.5412,10.5998 L10.5412,11.7038 C10.5412,11.9808 10.7642,12.2038 11.0412,12.2038 C11.3172,12.2038 11.5412,11.9808 11.5412,11.7038 L11.5412,11.7038 L11.5412,10.5998 L12.6452,10.5998 C12.9212,10.5998 13.1452,10.3758 13.1452,10.0998 C13.1452,9.8238 12.9212,9.5998 12.6452,9.5998 L12.6452,9.5998 L11.5412,9.5998 L11.5412,8.4948 C11.5412,8.2188 11.3172,7.9948 11.0412,7.9948 Z", fill: color, fillRule: "evenodd" }) })));
29
29
  };
30
30
  exports.default = VideocallPro;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/fill/Vodplus.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var Vodplus = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.145,19 L4.583,19 C2.604,19 1,17.426 1,15.483 L1,6.517 C1,4.574 2.604,3 4.583,3 L17.418,3 C19.396,3 21,4.574 21,6.517 L21,12.351", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.2459,13.5106 L20.6609,14.9056 L23.0769,16.2996 C23.7929,16.7136 23.7929,17.7476 23.0769,18.1616 L20.6609,19.5556 L18.2459,20.9506 C17.5299,21.3636 16.6339,20.8466 16.6339,20.0196 L16.6339,14.4416 C16.6339,13.6146 17.5299,13.0976 18.2459,13.5106 Z M12.9826,14.4158 C13.5346,14.4158 13.9826,14.8638 13.9826,15.4158 C13.9826,15.9678 13.5346,16.4158 12.9826,16.4158 C12.4306,16.4158 11.9826,15.9678 11.9826,15.4158 C11.9826,14.8638 12.4306,14.4158 12.9826,14.4158 Z M9.0176,14.4158 C9.5696,14.4158 10.0176,14.8638 10.0176,15.4158 C10.0176,15.9678 9.5696,16.4158 9.0176,16.4158 C8.4656,16.4158 8.0176,15.9678 8.0176,15.4158 C8.0176,14.8638 8.4656,14.4158 9.0176,14.4158 Z M5.0526,14.4158 C5.6046,14.4158 6.0526,14.8638 6.0526,15.4158 C6.0526,15.9678 5.6046,16.4158 5.0526,16.4158 C4.5006,16.4158 4.0526,15.9678 4.0526,15.4158 C4.0526,14.8638 4.5006,14.4158 5.0526,14.4158 Z M16.9476,5.9636 C17.4996,5.9636 17.9476,6.4116 17.9476,6.9636 C17.9476,7.5156 17.4996,7.9636 16.9476,7.9636 C16.3956,7.9636 15.9476,7.5156 15.9476,6.9636 C15.9476,6.4116 16.3956,5.9636 16.9476,5.9636 Z M12.9826,5.9636 C13.5346,5.9636 13.9826,6.4116 13.9826,6.9636 C13.9826,7.5156 13.5346,7.9636 12.9826,7.9636 C12.4306,7.9636 11.9826,7.5156 11.9826,6.9636 C11.9826,6.4116 12.4306,5.9636 12.9826,5.9636 Z M9.0176,5.9636 C9.5696,5.9636 10.0176,6.4116 10.0176,6.9636 C10.0176,7.5156 9.5696,7.9636 9.0176,7.9636 C8.4656,7.9636 8.0176,7.5156 8.0176,6.9636 C8.0176,6.4116 8.4656,5.9636 9.0176,5.9636 Z M5.0526,5.9636 C5.6046,5.9636 6.0526,6.4116 6.0526,6.9636 C6.0526,7.5156 5.6046,7.9636 5.0526,7.9636 C4.5006,7.9636 4.0526,7.5156 4.0526,6.9636 C4.0526,6.4116 4.5006,5.9636 5.0526,5.9636 Z", fill: color })] })) })) })));
28
+ 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", { d: "M14.145,19 L4.583,19 C2.604,19 1,17.426 1,15.483 L1,6.517 C1,4.574 2.604,3 4.583,3 L17.418,3 C19.396,3 21,4.574 21,6.517 L21,12.351", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.2459,13.5106 L20.6609,14.9056 L23.0769,16.2996 C23.7929,16.7136 23.7929,17.7476 23.0769,18.1616 L20.6609,19.5556 L18.2459,20.9506 C17.5299,21.3636 16.6339,20.8466 16.6339,20.0196 L16.6339,14.4416 C16.6339,13.6146 17.5299,13.0976 18.2459,13.5106 Z M12.9826,14.4158 C13.5346,14.4158 13.9826,14.8638 13.9826,15.4158 C13.9826,15.9678 13.5346,16.4158 12.9826,16.4158 C12.4306,16.4158 11.9826,15.9678 11.9826,15.4158 C11.9826,14.8638 12.4306,14.4158 12.9826,14.4158 Z M9.0176,14.4158 C9.5696,14.4158 10.0176,14.8638 10.0176,15.4158 C10.0176,15.9678 9.5696,16.4158 9.0176,16.4158 C8.4656,16.4158 8.0176,15.9678 8.0176,15.4158 C8.0176,14.8638 8.4656,14.4158 9.0176,14.4158 Z M5.0526,14.4158 C5.6046,14.4158 6.0526,14.8638 6.0526,15.4158 C6.0526,15.9678 5.6046,16.4158 5.0526,16.4158 C4.5006,16.4158 4.0526,15.9678 4.0526,15.4158 C4.0526,14.8638 4.5006,14.4158 5.0526,14.4158 Z M16.9476,5.9636 C17.4996,5.9636 17.9476,6.4116 17.9476,6.9636 C17.9476,7.5156 17.4996,7.9636 16.9476,7.9636 C16.3956,7.9636 15.9476,7.5156 15.9476,6.9636 C15.9476,6.4116 16.3956,5.9636 16.9476,5.9636 Z M12.9826,5.9636 C13.5346,5.9636 13.9826,6.4116 13.9826,6.9636 C13.9826,7.5156 13.5346,7.9636 12.9826,7.9636 C12.4306,7.9636 11.9826,7.5156 11.9826,6.9636 C11.9826,6.4116 12.4306,5.9636 12.9826,5.9636 Z M9.0176,5.9636 C9.5696,5.9636 10.0176,6.4116 10.0176,6.9636 C10.0176,7.5156 9.5696,7.9636 9.0176,7.9636 C8.4656,7.9636 8.0176,7.5156 8.0176,6.9636 C8.0176,6.4116 8.4656,5.9636 9.0176,5.9636 Z M5.0526,5.9636 C5.6046,5.9636 6.0526,6.4116 6.0526,6.9636 C6.0526,7.5156 5.6046,7.9636 5.0526,7.9636 C4.5006,7.9636 4.0526,7.5156 4.0526,6.9636 C4.0526,6.4116 4.5006,5.9636 5.0526,5.9636 Z", fill: color })] })) })));
29
29
  };
30
30
  exports.default = Vodplus;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/DesignPreference.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var DesignPreference = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.0742,15.9112 C12.1572,16.6692 10.8122,18.4402 10.8122,20.5052 C10.8122,20.9592 10.8782,21.3992 11.0002,21.8172 C5.8122,21.4682 1.7242,17.5842 1.7242,12.8452 C1.7242,7.8752 6.2192,3.8462 11.7632,3.8462 C13.6432,3.8462 15.4022,4.3092 16.9062,5.1152 M20.6709,8.6912 C21.3939,9.9342 21.8029,11.3462 21.8029,12.8452 C21.8029,14.5302 21.2849,16.1062 20.3859,17.4542 C19.6069,16.5162 18.4769,15.8432 17.1799,15.6092" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M8.9422,10.4341 C8.9422,9.3141 8.0342,8.4061 6.9142,8.4061 C5.7952,8.4061 4.8872,9.3141 4.8872,10.4341 C4.8872,11.5541 5.7952,12.4621 6.9142,12.4621 C8.0342,12.4621 8.9422,11.5541 8.9422,10.4341 M13.5869,7.8135 C13.5869,6.8415 12.7989,6.0535 11.8269,6.0535 C10.8559,6.0535 10.0679,6.8415 10.0679,7.8135 C10.0679,8.7855 10.8559,9.5735 11.8269,9.5735 C12.7989,9.5735 13.5869,8.7855 13.5869,7.8135 M9.2917,16.0693 C9.2917,15.0973 8.5037,14.3093 7.5317,14.3093 C6.5607,14.3093 5.7727,15.0973 5.7727,16.0693 C5.7727,17.0413 6.5607,17.8293 7.5317,17.8293 C8.5037,17.8293 9.2917,17.0413 9.2917,16.0693" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.7283,9.5905 C18.2343,9.7555 18.5663,10.0895 18.5163,10.5975 C18.5083,10.6775 18.4923,10.7575 18.4663,10.8375 L15.2993,20.2945 C15.1073,20.8805 14.4773,21.1985 13.8923,21.0075 C13.3073,20.8155 12.9883,20.1855 13.1803,19.6005 L16.3473,10.1425 C16.5393,9.5575 17.1433,9.3985 17.7283,9.5905 Z M18.6588,1.8879 C18.6588,1.8879 23.8258,3.4439 21.8078,7.3999 C21.8078,7.3999 21.4918,8.0149 20.8398,8.5739 C20.7368,8.6629 20.6258,8.7499 20.5058,8.8329 C19.2708,9.6879 17.7148,9.9479 16.6108,8.9289 C16.1568,8.5099 15.9078,7.6109 15.9508,7.1689 C16.0678,5.9859 16.7088,5.5819 17.6238,4.8589 C18.5388,4.1349 18.7498,2.9029 18.6588,1.8879 Z" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.0742,15.9112 C12.1572,16.6692 10.8122,18.4402 10.8122,20.5052 C10.8122,20.9592 10.8782,21.3992 11.0002,21.8172 C5.8122,21.4682 1.7242,17.5842 1.7242,12.8452 C1.7242,7.8752 6.2192,3.8462 11.7632,3.8462 C13.6432,3.8462 15.4022,4.3092 16.9062,5.1152 M20.6709,8.6912 C21.3939,9.9342 21.8029,11.3462 21.8029,12.8452 C21.8029,14.5302 21.2849,16.1062 20.3859,17.4542 C19.6069,16.5162 18.4769,15.8432 17.1799,15.6092" }), (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M8.9422,10.4341 C8.9422,9.3141 8.0342,8.4061 6.9142,8.4061 C5.7952,8.4061 4.8872,9.3141 4.8872,10.4341 C4.8872,11.5541 5.7952,12.4621 6.9142,12.4621 C8.0342,12.4621 8.9422,11.5541 8.9422,10.4341 M13.5869,7.8135 C13.5869,6.8415 12.7989,6.0535 11.8269,6.0535 C10.8559,6.0535 10.0679,6.8415 10.0679,7.8135 C10.0679,8.7855 10.8559,9.5735 11.8269,9.5735 C12.7989,9.5735 13.5869,8.7855 13.5869,7.8135 M9.2917,16.0693 C9.2917,15.0973 8.5037,14.3093 7.5317,14.3093 C6.5607,14.3093 5.7727,15.0973 5.7727,16.0693 C5.7727,17.0413 6.5607,17.8293 7.5317,17.8293 C8.5037,17.8293 9.2917,17.0413 9.2917,16.0693" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.7283,9.5905 C18.2343,9.7555 18.5663,10.0895 18.5163,10.5975 C18.5083,10.6775 18.4923,10.7575 18.4663,10.8375 L15.2993,20.2945 C15.1073,20.8805 14.4773,21.1985 13.8923,21.0075 C13.3073,20.8155 12.9883,20.1855 13.1803,19.6005 L16.3473,10.1425 C16.5393,9.5575 17.1433,9.3985 17.7283,9.5905 Z M18.6588,1.8879 C18.6588,1.8879 23.8258,3.4439 21.8078,7.3999 C21.8078,7.3999 21.4918,8.0149 20.8398,8.5739 C20.7368,8.6629 20.6258,8.7499 20.5058,8.8329 C19.2708,9.6879 17.7148,9.9479 16.6108,8.9289 C16.1568,8.5099 15.9078,7.6109 15.9508,7.1689 C16.0678,5.9859 16.7088,5.5819 17.6238,4.8589 C18.5388,4.1349 18.7498,2.9029 18.6588,1.8879 Z" })] })) })));
29
29
  };
30
30
  exports.default = DesignPreference;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PappType.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PappType = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.2878,7.0015 L4.7118,7.0015 C3.3318,7.0015 2.2118,8.1205 2.2118,9.5015 L2.2118,17.3035 C2.2118,18.6835 3.3318,19.8035 4.7118,19.8035 L19.2878,19.8035 C20.6688,19.8035 21.7878,18.6835 21.7878,17.3035 L21.7878,9.5015 C21.7878,8.1205 20.6688,7.0015 19.2878,7.0015 L19.2878,7.0015 Z M19.2878,8.5015 C19.8398,8.5015 20.2878,8.9505 20.2878,9.5015 L20.2878,17.3035 C20.2878,17.8545 19.8398,18.3035 19.2878,18.3035 L4.7118,18.3035 C4.1608,18.3035 3.7118,17.8545 3.7118,17.3035 L3.7118,9.5015 C3.7118,8.9505 4.1608,8.5015 4.7118,8.5015 L19.2878,8.5015 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeWidth: "1.5", d: "M6.1046,8.0121 L6.1046,5.5901 C6.1046,5.0321 6.5566,4.5801 7.1146,4.5801 L9.4596,4.5801 C10.0176,4.5801 10.4696,5.0321 10.4696,5.5901 L10.4696,8.0121 M13.4324,8.0121 L13.4324,5.5901 C13.4324,5.0321 13.8844,4.5801 14.4424,4.5801 L16.7874,4.5801 C17.3454,4.5801 17.7974,5.0321 17.7974,5.5901 L17.7974,8.0121" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M19.2878,7.0015 L4.7118,7.0015 C3.3318,7.0015 2.2118,8.1205 2.2118,9.5015 L2.2118,17.3035 C2.2118,18.6835 3.3318,19.8035 4.7118,19.8035 L19.2878,19.8035 C20.6688,19.8035 21.7878,18.6835 21.7878,17.3035 L21.7878,9.5015 C21.7878,8.1205 20.6688,7.0015 19.2878,7.0015 L19.2878,7.0015 Z M19.2878,8.5015 C19.8398,8.5015 20.2878,8.9505 20.2878,9.5015 L20.2878,17.3035 C20.2878,17.8545 19.8398,18.3035 19.2878,18.3035 L4.7118,18.3035 C4.1608,18.3035 3.7118,17.8545 3.7118,17.3035 L3.7118,9.5015 C3.7118,8.9505 4.1608,8.5015 4.7118,8.5015 L19.2878,8.5015 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeWidth: "1.5", d: "M6.1046,8.0121 L6.1046,5.5901 C6.1046,5.0321 6.5566,4.5801 7.1146,4.5801 L9.4596,4.5801 C10.0176,4.5801 10.4696,5.0321 10.4696,5.5901 L10.4696,8.0121 M13.4324,8.0121 L13.4324,5.5901 C13.4324,5.0321 13.8844,4.5801 14.4424,4.5801 L16.7874,4.5801 C17.3454,4.5801 17.7974,5.0321 17.7974,5.5901 L17.7974,8.0121" })] })) })));
29
29
  };
30
30
  exports.default = PappType;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PaymentRegularly.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PaymentRegularly = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M21.0349,14.6301 C21.7669,14.6301 22.3629,15.2261 22.3629,15.9581 L22.3629,15.9581 L22.3629,18.4601 C22.3629,18.8741 22.0269,19.2101 21.6129,19.2101 C21.1989,19.2101 20.8629,18.8741 20.8629,18.4601 L20.8629,18.4601 L20.8629,17.2531 C19.0229,20.3521 15.6939,22.2831 12.0009,22.2831 C7.7639,22.2831 4.0059,19.7431 2.4259,15.8131 C2.2719,15.4291 2.4579,14.9921 2.8429,14.8371 C3.2269,14.6871 3.6639,14.8691 3.8179,15.2541 C5.1679,18.6121 8.3799,20.7831 12.0009,20.7831 C15.2909,20.7831 18.2279,18.9791 19.7529,16.1301 L19.7529,16.1301 L18.5329,16.1301 C18.1179,16.1301 17.7829,15.7941 17.7829,15.3801 C17.7829,14.9661 18.1179,14.6301 18.5329,14.6301 L18.5329,14.6301 Z M15.1526,7.6641 C16.47836,7.6641 17.5626608,8.6953704 17.6472836,9.99969245 L17.6526,10.1641 L17.6526,13.8361 C17.6526,15.16186 16.6213296,16.2461608 15.3170076,16.3307836 L15.1526,16.3361 L8.8476,16.3361 C7.52184,16.3361 6.4375392,15.3048296 6.35291635,14.0005076 L6.3476,13.8361 L6.3476,10.1641 C6.3476,8.83834 7.3788704,7.7540392 8.68319245,7.66941635 L8.8476,7.6641 L15.1526,7.6641 Z M16.3526,11.6411 L7.6476,11.6411 L7.6476,13.8361 C7.6476,14.456725 8.12045156,14.9683656 8.7250292,15.0298964 L8.8476,15.0361 L15.1526,15.0361 C15.773225,15.0361 16.2848656,14.5632484 16.3463964,13.9586708 L16.3526,13.8361 L16.3526,11.6411 Z M9.5869,12.3871 C10.0709,12.3871 10.4629,12.7791 10.4629,13.2631 C10.4629,13.7471 10.0709,14.1401 9.5869,14.1401 C9.1029,14.1401 8.7109,13.7471 8.7109,13.2631 C8.7109,12.7791 9.1029,12.3871 9.5869,12.3871 Z M15.1526,8.9641 L8.8476,8.9641 C8.32144615,8.9641 7.8924284,9.3108929 7.7335827,9.78425112 L7.6996,9.9051 L16.3006,9.9051 C16.1786,9.3711 15.7226,8.9641 15.1526,8.9641 Z M11.9985,1.7163 C16.2355,1.7163 19.9945,4.2563 21.5735,8.1873 C21.7275,8.5713 21.5415,9.0083 21.1575,9.1633 C21.0655,9.1993 20.9705,9.2173 20.8775,9.2173 C20.5805,9.2173 20.2995,9.0393 20.1815,8.7463 C18.8315,5.3873 15.6195,3.2163 11.9985,3.2163 C8.80819697,3.2163 5.94982415,4.91356354 4.3889967,7.61419721 L4.2465,7.8703 L5.4675,7.8703 C5.8815,7.8703 6.2175,8.2063 6.2175,8.6203 C6.2175,8.9998 5.93516667,9.31375833 5.56922569,9.36344931 L5.4675,9.3703 L2.9655,9.3703 C2.2783125,9.3703 1.71241406,8.84647188 1.64436108,8.17784395 L1.6375,8.0423 L1.6375,5.5393 C1.6375,5.1253 1.9725,4.7893 2.3875,4.7893 C2.767,4.7893 3.08095833,5.07163333 3.13064931,5.43757431 L3.1375,5.5393 L3.1375,6.7463 C4.9775,3.6473 8.3065,1.7163 11.9985,1.7163 Z" }) })) })));
28
+ 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: "M21.0349,14.6301 C21.7669,14.6301 22.3629,15.2261 22.3629,15.9581 L22.3629,15.9581 L22.3629,18.4601 C22.3629,18.8741 22.0269,19.2101 21.6129,19.2101 C21.1989,19.2101 20.8629,18.8741 20.8629,18.4601 L20.8629,18.4601 L20.8629,17.2531 C19.0229,20.3521 15.6939,22.2831 12.0009,22.2831 C7.7639,22.2831 4.0059,19.7431 2.4259,15.8131 C2.2719,15.4291 2.4579,14.9921 2.8429,14.8371 C3.2269,14.6871 3.6639,14.8691 3.8179,15.2541 C5.1679,18.6121 8.3799,20.7831 12.0009,20.7831 C15.2909,20.7831 18.2279,18.9791 19.7529,16.1301 L19.7529,16.1301 L18.5329,16.1301 C18.1179,16.1301 17.7829,15.7941 17.7829,15.3801 C17.7829,14.9661 18.1179,14.6301 18.5329,14.6301 L18.5329,14.6301 Z M15.1526,7.6641 C16.47836,7.6641 17.5626608,8.6953704 17.6472836,9.99969245 L17.6526,10.1641 L17.6526,13.8361 C17.6526,15.16186 16.6213296,16.2461608 15.3170076,16.3307836 L15.1526,16.3361 L8.8476,16.3361 C7.52184,16.3361 6.4375392,15.3048296 6.35291635,14.0005076 L6.3476,13.8361 L6.3476,10.1641 C6.3476,8.83834 7.3788704,7.7540392 8.68319245,7.66941635 L8.8476,7.6641 L15.1526,7.6641 Z M16.3526,11.6411 L7.6476,11.6411 L7.6476,13.8361 C7.6476,14.456725 8.12045156,14.9683656 8.7250292,15.0298964 L8.8476,15.0361 L15.1526,15.0361 C15.773225,15.0361 16.2848656,14.5632484 16.3463964,13.9586708 L16.3526,13.8361 L16.3526,11.6411 Z M9.5869,12.3871 C10.0709,12.3871 10.4629,12.7791 10.4629,13.2631 C10.4629,13.7471 10.0709,14.1401 9.5869,14.1401 C9.1029,14.1401 8.7109,13.7471 8.7109,13.2631 C8.7109,12.7791 9.1029,12.3871 9.5869,12.3871 Z M15.1526,8.9641 L8.8476,8.9641 C8.32144615,8.9641 7.8924284,9.3108929 7.7335827,9.78425112 L7.6996,9.9051 L16.3006,9.9051 C16.1786,9.3711 15.7226,8.9641 15.1526,8.9641 Z M11.9985,1.7163 C16.2355,1.7163 19.9945,4.2563 21.5735,8.1873 C21.7275,8.5713 21.5415,9.0083 21.1575,9.1633 C21.0655,9.1993 20.9705,9.2173 20.8775,9.2173 C20.5805,9.2173 20.2995,9.0393 20.1815,8.7463 C18.8315,5.3873 15.6195,3.2163 11.9985,3.2163 C8.80819697,3.2163 5.94982415,4.91356354 4.3889967,7.61419721 L4.2465,7.8703 L5.4675,7.8703 C5.8815,7.8703 6.2175,8.2063 6.2175,8.6203 C6.2175,8.9998 5.93516667,9.31375833 5.56922569,9.36344931 L5.4675,9.3703 L2.9655,9.3703 C2.2783125,9.3703 1.71241406,8.84647188 1.64436108,8.17784395 L1.6375,8.0423 L1.6375,5.5393 C1.6375,5.1253 1.9725,4.7893 2.3875,4.7893 C2.767,4.7893 3.08095833,5.07163333 3.13064931,5.43757431 L3.1375,5.5393 L3.1375,6.7463 C4.9775,3.6473 8.3065,1.7163 11.9985,1.7163 Z" }) })));
29
29
  };
30
30
  exports.default = PaymentRegularly;
package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/PostVote.js CHANGED
@@ -25,6 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var jsx_runtime_1 = require("react/jsx-runtime");
26
26
  var PostVote = function (_a) {
27
27
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
28
- return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M20.9009,14.3097 L2.8079,14.3097 C2.3619,14.3097 1.9999,14.6717 1.9999,15.1177 L1.9999,20.0557 C1.9999,21.4367 3.1199,22.5557 4.4999,22.5557 L19.2089,22.5557 C20.5899,22.5557 21.7089,21.4367 21.7089,20.0557 L21.7089,15.1177 C21.7089,14.6717 21.3479,14.3097 20.9009,14.3097 L20.9009,14.3097 Z M20.2089,15.8097 L20.2089,20.0557 C20.2089,20.6067 19.7609,21.0557 19.2089,21.0557 L4.4999,21.0557 C3.9489,21.0557 3.4999,20.6067 3.4999,20.0557 L3.4999,15.8097 L20.2089,15.8097 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.8862,10.5243 L17.8352,10.5243 C18.4132,10.5243 18.9402,10.8563 19.1892,11.3783 L20.9232,15.0113 M2.8081,15.0116 L4.8051,11.3116 C5.0671,10.8266 5.5741,10.5246 6.1251,10.5246 L6.9291,10.5246" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.7806,12.768 L6.9286,12.768 L6.9286,4 C6.9286,3.171 7.6006,2.5 8.4286,2.5 L15.2806,2.5 C16.1086,2.5 16.7806,3.171 16.7806,4 L16.7806,12.768 Z M9.4939,7.325 L11.2569,9.35 L14.0359,6.278" })] })) })) })));
28
+ return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none", fillRule: "evenodd" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, d: "M20.9009,14.3097 L2.8079,14.3097 C2.3619,14.3097 1.9999,14.6717 1.9999,15.1177 L1.9999,20.0557 C1.9999,21.4367 3.1199,22.5557 4.4999,22.5557 L19.2089,22.5557 C20.5899,22.5557 21.7089,21.4367 21.7089,20.0557 L21.7089,15.1177 C21.7089,14.6717 21.3479,14.3097 20.9009,14.3097 L20.9009,14.3097 Z M20.2089,15.8097 L20.2089,20.0557 C20.2089,20.6067 19.7609,21.0557 19.2089,21.0557 L4.4999,21.0557 C3.9489,21.0557 3.4999,20.6067 3.4999,20.0557 L3.4999,15.8097 L20.2089,15.8097 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.8862,10.5243 L17.8352,10.5243 C18.4132,10.5243 18.9402,10.8563 19.1892,11.3783 L20.9232,15.0113 M2.8081,15.0116 L4.8051,11.3116 C5.0671,10.8266 5.5741,10.5246 6.1251,10.5246 L6.9291,10.5246" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M16.7806,12.768 L6.9286,12.768 L6.9286,4 C6.9286,3.171 7.6006,2.5 8.4286,2.5 L15.2806,2.5 C16.1086,2.5 16.7806,3.171 16.7806,4 L16.7806,12.768 Z M9.4939,7.325 L11.2569,9.35 L14.0359,6.278" })] })) })));
29
29
  };
30
30
  exports.default = PostVote;
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -42,6 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
45
46
  /* eslint-disable react/destructuring-assignment */
46
47
  var publ_echo_1 = require("publ-echo");
47
48
  var react_1 = __importStar(require("react"));
@@ -75,6 +76,7 @@ function CustomSection(props) {
75
76
  sm: sm
76
77
  };
77
78
  }), layouts = _f[0], setLayouts = _f[1];
79
+ console.log(layouts);
78
80
  (0, react_1.useEffect)(function () {
79
81
  var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
80
82
  setLayouts({ lg: lg, sm: sm });
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare function ComponentBlockCommonWrapper(): JSX.Element;
3
+ export default ComponentBlockCommonWrapper;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockCommonWrapper.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var jsx_runtime_1 = require("react/jsx-runtime");
4
+ require("react");
5
+ function ComponentBlockCommonWrapper() {
6
+ return (0, jsx_runtime_1.jsx)("div", { children: "ComponentBlockCommonWrapper" });
7
+ }
8
+ exports.default = ComponentBlockCommonWrapper;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js CHANGED
@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  };
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var jsx_runtime_1 = require("react/jsx-runtime");
29
+ /* eslint-disable no-console */
29
30
  /* eslint-disable react/destructuring-assignment */
30
31
  var react_1 = require("react");
31
32
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -34,7 +35,7 @@ var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/Cust
34
35
  var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
35
36
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
36
37
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
37
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
38
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
38
39
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
39
40
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
40
41
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -65,7 +66,8 @@ function Button(props) {
65
66
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
66
67
  var hasEffect = !isNoneEffectType;
67
68
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
68
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
69
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
70
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
69
71
  paddingLeft: paddingLeft,
70
72
  paddingRight: paddingRight,
71
73
  paddingBottom: paddingBottom,
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider.js CHANGED
@@ -37,14 +37,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
37
37
  __setModuleDefault(result, mod);
38
38
  return result;
39
39
  };
40
+ var __importDefault = (this && this.__importDefault) || function (mod) {
41
+ return (mod && mod.__esModule) ? mod : { "default": mod };
42
+ };
40
43
  Object.defineProperty(exports, "__esModule", { value: true });
41
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
42
46
  var react_1 = require("react");
43
47
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
44
48
  var styled_components_1 = __importStar(require("styled-components"));
45
49
  var hooks_1 = require("../../../../hooks");
46
50
  var util_1 = require("../../../../util");
47
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
51
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
48
52
  var S_CB_Box_1 = require("../components/S_CB_Box");
49
53
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
50
54
  function Divider(props) {
@@ -64,7 +68,8 @@ function Divider(props) {
64
68
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
65
69
  var hasEffect = !isNoneEffectType;
66
70
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
67
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }) })) }))] }));
71
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
72
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }) })) }))] }));
68
73
  }
69
74
  var S_DIVIDER = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"], ["\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n"])), function (_a) {
70
75
  var normalStyle = _a.normalStyle;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js CHANGED
@@ -42,12 +42,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
44
  var jsx_runtime_1 = require("react/jsx-runtime");
45
+ /* eslint-disable no-console */
45
46
  var react_1 = require("react");
46
47
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
47
48
  var styled_components_1 = __importStar(require("styled-components"));
48
49
  var hooks_1 = require("../../../../hooks");
49
50
  var util_1 = require("../../../../util");
50
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
51
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
51
52
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
52
53
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
53
54
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -72,7 +73,8 @@ function Image(props) {
72
73
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
73
74
  var hasEffect = !isNoneEffectType;
74
75
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
75
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }) })) })) })) }))] }));
76
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
77
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }) })) })) })) }))] }));
76
78
  }
77
79
  function parseImageCBStyle(style, hoverStyle, mode) {
78
80
  var boxStyle = {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/RichText/RichText.js CHANGED
@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ /* eslint-disable no-console */
22
23
  /* eslint-disable react/destructuring-assignment */
23
24
  var react_1 = require("react");
24
25
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -27,7 +28,7 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
27
28
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
28
29
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
29
30
  var styled_components_1 = __importDefault(require("styled-components"));
30
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
31
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
31
32
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
32
33
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
33
34
  function RichText(props) {
@@ -48,7 +49,8 @@ function RichText(props) {
48
49
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
49
50
  var hasEffect = !isNoneEffectType;
50
51
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
51
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }) }) })) }))] }));
52
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
53
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }) }) })) }))] }));
52
54
  }
53
55
  function getBGColorStyles(props, device) {
54
56
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js CHANGED
@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ /* eslint-disable no-console */
18
19
  /* eslint-disable react/destructuring-assignment */
19
20
  var react_1 = require("react");
20
21
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
@@ -23,7 +24,7 @@ var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts"
23
24
  var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
24
25
  var textUtil_1 = require("../../../../newUtils/textUtil");
25
26
  var util_1 = require("../../../../util");
26
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
27
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
27
28
  var S_CB_Box_1 = require("../components/S_CB_Box");
28
29
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
29
30
  var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
@@ -53,7 +54,8 @@ function Text(props) {
53
54
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
54
55
  var hasEffect = !isNoneEffectType;
55
56
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
56
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
57
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
58
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
57
59
  }
58
60
  function getTextStyles(props, device) {
59
61
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter.js CHANGED
@@ -10,14 +10,18 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
13
16
  Object.defineProperty(exports, "__esModule", { value: true });
14
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ /* eslint-disable no-console */
15
19
  var react_1 = require("react");
16
20
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
17
21
  var ComponentBlocks_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks");
18
22
  var hooks_1 = require("../../../../hooks");
19
23
  var util_1 = require("../../../../util");
20
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
24
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
21
25
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
22
26
  function Twitter(props) {
23
27
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,6 +51,7 @@ function Twitter(props) {
47
51
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
48
52
  var hasEffect = !isNoneEffectType;
49
53
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
50
- return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) })) })));
54
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
55
+ return ((0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) })) })));
51
56
  }
52
57
  exports.default = Twitter;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js CHANGED
@@ -19,13 +19,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  var jsx_runtime_1 = require("react/jsx-runtime");
22
+ /* eslint-disable no-console */
22
23
  var react_1 = require("react");
23
24
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
24
25
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
25
26
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
26
27
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
27
28
  var styled_components_1 = __importDefault(require("styled-components"));
28
- var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
29
+ var AnimationObserverBox_1 = __importDefault(require("../components/AnimationObserverBox"));
29
30
  var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
30
31
  var S_HiddenCover_1 = require("../components/S_HiddenCover");
31
32
  var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
@@ -49,7 +50,8 @@ function Youtube(props) {
49
50
  : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
50
51
  var hasEffect = !isNoneEffectType;
51
52
  var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
52
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
+ console.log('hasEffect: ', hasEffect, cbRef, isVisible);
54
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(AnimationObserverBox_1.default, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
53
55
  }
54
56
  function getBGColorStyles(props, device) {
55
57
  var availableSpecCodes = [
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type React from 'react';
2
+ type Props = {
3
+ children: any;
4
+ effectVisibleStyle: React.CSSProperties;
5
+ style?: React.CSSProperties;
6
+ };
7
+ declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
8
+ export default _default;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/AnimationObserverBox.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var react_1 = require("react");
23
+ var styled_components_1 = __importDefault(require("styled-components"));
24
+ function AnimationObserverBox(_a, ref) {
25
+ var children = _a.children, effectVisibleStyle = _a.effectVisibleStyle, style = _a.style;
26
+ return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ ref: ref, className: "animation-obserber-box" }, { children: (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox, __assign({ style: style, effectVisibleStyle: effectVisibleStyle }, { children: children })) })));
27
+ }
28
+ var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n width: 100%;\n"])));
29
+ exports.default = (0, react_1.forwardRef)(AnimationObserverBox);
30
+ var S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n\n ", ";\n"], ["\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_a) {
31
+ var effectVisibleStyle = _a.effectVisibleStyle;
32
+ return effectVisibleStyle && __assign({}, effectVisibleStyle);
33
+ });
34
+ var templateObject_1, templateObject_2;
package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useIntersectionObserver = void 0;
4
+ /* eslint-disable no-console */
4
5
  var react_1 = require("react");
5
6
  function useIntersectionObserver(elementRef, _a) {
6
7
  var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
@@ -13,8 +14,10 @@ function useIntersectionObserver(elementRef, _a) {
13
14
  (0, react_1.useEffect)(function () {
14
15
  var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
15
16
  var hasIOSupport = !!window.IntersectionObserver;
16
- if (!hasIOSupport || frozen || !node)
17
+ if (!hasIOSupport || frozen || !node) {
18
+ console.log('no node or support', elementRef === null || elementRef === void 0 ? void 0 : elementRef.current);
17
19
  return;
20
+ }
18
21
  var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
19
22
  var observer = new IntersectionObserver(updateEntry, observerParams);
20
23
  observer.observe(node);
package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js CHANGED
@@ -176,7 +176,6 @@ function getFontName(value) {
176
176
  default: {
177
177
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
178
178
  var _a = value.split(':'), _1 = _a[0], font = _a[1];
179
- // return font.toString();
180
179
  return "\"".concat(font, "\"");
181
180
  }
182
181
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.55",
3
+ "version": "0.3.1",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.2.55]
3
- ## 기준 pds-dev-kit-web 버전 @2.2.19
2
+ ## [v0.3.1]
3
+ ## 기준 pds-dev-kit-web 버전 @2.2.22
4
4
  ### sub
5
5
  * DynamicLayout
6
- * Google Font에 Quatation 추가
7
- * customsection z-index 500 더하기
6
+ * 애니메이션이 적용된 CB가 항상 잘 보이도록 수정
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- type Props = {
3
- effectVisibleStyle: React.CSSProperties;
4
- };
5
- export declare const S_CB_AnimationObserverBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
6
- export {};
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_AnimationObserverBox.js DELETED
@@ -1,27 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.S_CB_AnimationObserverBox = void 0;
22
- var styled_components_1 = __importDefault(require("styled-components"));
23
- exports.S_CB_AnimationObserverBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n\n ", ";\n"], ["\n height: 100%;\n width: 100%;\n\n ", ";\n"])), function (_a) {
24
- var effectVisibleStyle = _a.effectVisibleStyle;
25
- return effectVisibleStyle && __assign({}, effectVisibleStyle);
26
- });
27
- var templateObject_1;