pds-dev-kit-web-test 0.0.22 → 0.0.24

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 (61) hide show
  1. package/dist/src/common/assets/icons/fill/Chat.js +1 -1
  2. package/dist/src/common/assets/icons/fill/ChatOff.d.ts +4 -0
  3. package/dist/src/common/assets/icons/fill/ChatOff.js +34 -0
  4. package/dist/src/common/assets/icons/fill/MicOff.d.ts +4 -0
  5. package/dist/src/common/assets/icons/fill/MicOff.js +34 -0
  6. package/dist/src/common/assets/icons/fill/index.d.ts +2 -0
  7. package/dist/src/common/assets/icons/fill/index.js +4 -0
  8. package/dist/src/common/assets/icons/line/ChatOff.d.ts +4 -0
  9. package/dist/src/common/assets/icons/line/ChatOff.js +34 -0
  10. package/dist/src/common/assets/icons/line/Pages.js +2 -3
  11. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  12. package/dist/src/common/assets/icons/line/index.js +2 -0
  13. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +6 -1
  14. package/dist/src/common/styles/colorSet/PaletteColor_light.json +6 -1
  15. package/dist/src/common/styles/colorSet/UIColor.json +5 -3
  16. package/dist/src/common/styles/colorSet/index.d.ts +14 -2
  17. package/dist/src/common/styles/colorSet/index.js +2 -2
  18. package/dist/src/common/styles/colorSet/ui-type.d.ts +2 -0
  19. package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts +1 -1
  20. package/dist/src/sub/DynamicLayout/DynamicLayout.js +66 -3
  21. package/dist/src/sub/DynamicLayout/components/Section/Section.js +12 -12
  22. package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.d.ts +0 -0
  23. package/dist/src/sub/DynamicLayout/components/{desktop/common → YouTubeIframe}/YouTubeIframe.js +96 -51
  24. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.d.ts +1 -0
  25. package/dist/src/sub/DynamicLayout/components/YouTubeIframe/index.js +8 -0
  26. package/dist/src/sub/DynamicLayout/components/desktop/common/index.d.ts +0 -1
  27. package/dist/src/sub/DynamicLayout/components/desktop/common/index.js +1 -3
  28. package/dist/src/sub/DynamicLayout/components/mobile/common/index.d.ts +0 -1
  29. package/dist/src/sub/DynamicLayout/components/mobile/common/index.js +1 -3
  30. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  31. package/dist/src/sub/DynamicLayout/sections/ContentsCarouselSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  32. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  33. package/dist/src/sub/DynamicLayout/sections/ContentsSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  34. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  35. package/dist/src/sub/DynamicLayout/sections/FooterSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  36. package/dist/src/sub/DynamicLayout/sections/InfoBoxSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  37. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateA/desktop/D_TemplateA.js +1 -1
  38. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateB/desktop/D_TemplateB.js +1 -1
  39. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateC/desktop/D_TemplateC.js +1 -1
  40. package/dist/src/sub/DynamicLayout/sections/IntroSection/templates/TemplateD/desktop/D_TemplateD.js +1 -1
  41. package/dist/src/sub/DynamicLayout/types.d.ts +3 -1
  42. package/dist/storybook-static/{0.bd0d6a01.iframe.bundle.d.ts → 0.1e64cc00.iframe.bundle.d.ts} +0 -0
  43. package/dist/storybook-static/{0.bd0d6a01.iframe.bundle.js → 0.1e64cc00.iframe.bundle.js} +7 -7
  44. package/dist/storybook-static/{4.7657c50b.iframe.bundle.d.ts → 4.08a6743e.iframe.bundle.d.ts} +0 -0
  45. package/dist/storybook-static/{4.7657c50b.iframe.bundle.js → 4.08a6743e.iframe.bundle.js} +71 -71
  46. package/dist/storybook-static/{5.e4508546.iframe.bundle.d.ts → 5.fd119510.iframe.bundle.d.ts} +0 -0
  47. package/dist/storybook-static/{5.e4508546.iframe.bundle.js → 5.fd119510.iframe.bundle.js} +13 -13
  48. package/dist/storybook-static/{6.1ef60cd5.iframe.bundle.d.ts → 6.ed855029.iframe.bundle.d.ts} +0 -0
  49. package/dist/storybook-static/{6.1ef60cd5.iframe.bundle.js → 6.ed855029.iframe.bundle.js} +6 -6
  50. package/dist/storybook-static/{7.a68f8114.iframe.bundle.d.ts → 7.acdfc1e4.iframe.bundle.d.ts} +0 -0
  51. package/dist/storybook-static/{7.a68f8114.iframe.bundle.js → 7.acdfc1e4.iframe.bundle.js} +2 -2
  52. package/dist/storybook-static/{main.2acdfcf3.iframe.bundle.d.ts → main.3a848f92.iframe.bundle.d.ts} +200 -299
  53. package/dist/storybook-static/{main.2acdfcf3.iframe.bundle.js → main.3a848f92.iframe.bundle.js} +6301 -857
  54. package/dist/storybook-static/{runtime~main.13ad5ca1.iframe.bundle.d.ts → runtime~main.c94cafde.iframe.bundle.d.ts} +0 -0
  55. package/dist/storybook-static/{runtime~main.13ad5ca1.iframe.bundle.js → runtime~main.c94cafde.iframe.bundle.js} +1 -1
  56. package/dist/storybook-static/{vendors~main.ae66b3ac.iframe.bundle.d.ts → vendors~main.6ff7334c.iframe.bundle.d.ts} +0 -0
  57. package/dist/storybook-static/{vendors~main.ae66b3ac.iframe.bundle.js → vendors~main.6ff7334c.iframe.bundle.js} +2567 -665
  58. package/package.json +1 -1
  59. package/release-note.md +4 -9
  60. package/dist/src/sub/DynamicLayout/components/mobile/common/YouTubeIframe.d.ts +0 -7
  61. package/dist/src/sub/DynamicLayout/components/mobile/common/YouTubeIframe.js +0 -120
@@ -29,6 +29,6 @@ var react_1 = __importDefault(require("react"));
29
29
  var Chat = function (_a) {
30
30
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
31
  return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
- react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M16.28515,11.3922 C15.63115,11.3922 15.10065,10.8622 15.10065,10.2082 C15.10065,9.5542 15.63115,9.0237 16.28515,9.0237 C16.93915,9.0237 17.46915,9.5542 17.46915,10.2082 C17.46915,10.8622 16.93915,11.3922 16.28515,11.3922 M12.00015,11.3922 C11.34615,11.3922 10.81615,10.8622 10.81615,10.2082 C10.81615,9.5542 11.34615,9.0237 12.00015,9.0237 C12.65415,9.0237 13.18415,9.5542 13.18415,10.2082 C13.18415,10.8622 12.65415,11.3922 12.00015,11.3922 M7.71515,11.3922 C7.06115,11.3922 6.53065,10.8622 6.53065,10.2082 C6.53065,9.5542 7.06115,9.0237 7.71515,9.0237 C8.36915,9.0237 8.89915,9.5542 8.89915,10.2082 C8.89915,10.8622 8.36915,11.3922 7.71515,11.3922 M18.16615,2.5632 L5.83415,2.5632 C3.90065,2.5632 2.33415,4.1302 2.33415,6.0632 L2.33415,14.2227 C2.33415,16.1557 3.90065,17.7227 5.83415,17.7227 L10.97715,17.7227 L14.23465,20.6837 C15.19865,21.5597 16.74365,20.8762 16.74365,19.5737 L16.74365,17.7227 L18.16615,17.7227 C20.09915,17.7227 21.66615,16.1557 21.66615,14.2227 L21.66615,6.0632 C21.66615,4.1302 20.09915,2.5632 18.16615,2.5632" })));
32
+ react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M16.2851,11.1978 C15.6311,11.1978 15.1011,10.6678 15.1011,10.0138 C15.1011,9.3598 15.6311,8.8298 16.2851,8.8298 C16.9391,8.8298 17.4691,9.3598 17.4691,10.0138 C17.4691,10.6678 16.9391,11.1978 16.2851,11.1978 M12.0001,11.1978 C11.3461,11.1978 10.8161,10.6678 10.8161,10.0138 C10.8161,9.3598 11.3461,8.8298 12.0001,8.8298 C12.6541,8.8298 13.1841,9.3598 13.1841,10.0138 C13.1841,10.6678 12.6541,11.1978 12.0001,11.1978 M7.7151,11.1978 C7.0611,11.1978 6.5311,10.6678 6.5311,10.0138 C6.5311,9.3598 7.0611,8.8298 7.7151,8.8298 C8.3691,8.8298 8.8991,9.3598 8.8991,10.0138 C8.8991,10.6678 8.3691,11.1978 7.7151,11.1978 M18.7361,2.0178 L5.2641,2.0178 C3.3311,2.0178 1.7641,3.5848 1.7641,5.5178 L1.7641,14.5708 C1.7641,16.5038 3.3311,18.0708 5.2641,18.0708 L10.9171,18.0708 L14.3671,21.2068 C15.3871,22.1338 17.0241,21.4098 17.0241,20.0308 L17.0241,18.0708 L18.7361,18.0708 C20.6691,18.0708 22.2361,16.5038 22.2361,14.5708 L22.2361,5.5178 C22.2361,3.5848 20.6691,2.0178 18.7361,2.0178" })));
33
33
  };
34
34
  exports.default = Chat;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const ChatOff: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default ChatOff;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var ChatOff = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M2.038,4.1588 L6.984,9.1048 C6.714,9.3218 6.531,9.6408 6.531,10.0138 C6.531,10.6678 7.061,11.1978 7.715,11.1978 C8.088,11.1978 8.407,11.0148 8.624,10.7448 L17.024,19.1448 L17.024,20.0308 C17.024,21.4098 15.387,22.1338 14.367,21.2068 L10.917,18.0708 L5.264,18.0708 C3.331,18.0708 1.764,16.5038 1.764,14.5708 L1.764,5.5178 C1.764,5.0358 1.862,4.5768 2.038,4.1588 Z M2.6416,1.5809 L20.4186,19.3589 C20.7116,19.6519 20.7116,20.1259 20.4186,20.4189 C20.2726,20.5659 20.0806,20.6389 19.8886,20.6389 C19.6966,20.6389 19.5046,20.5659 19.3586,20.4189 L1.5806,2.6419 C1.2876,2.3489 1.2876,1.8739 1.5806,1.5809 C1.8736,1.2879 2.3486,1.2879 2.6416,1.5809 Z M18.7361,2.0178 C20.6691,2.0178 22.2361,3.5848 22.2361,5.5178 L22.2361,14.5708 C22.2361,16.0718 21.2861,17.3408 19.9591,17.8388 L12.8911,10.7708 C13.0671,10.5638 13.1841,10.3058 13.1841,10.0138 C13.1841,9.3598 12.6541,8.8298 12.0001,8.8298 C11.7081,8.8298 11.4501,8.9468 11.2431,9.1218 L4.2921,2.1708 C4.6021,2.0808 4.9241,2.0178 5.2641,2.0178 Z M16.2851,8.8298 C15.6311,8.8298 15.1011,9.3598 15.1011,10.0138 C15.1011,10.6678 15.6311,11.1978 16.2851,11.1978 C16.9391,11.1978 17.4691,10.6678 17.4691,10.0138 C17.4691,9.3598 16.9391,8.8298 16.2851,8.8298 Z" })));
33
+ };
34
+ exports.default = ChatOff;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const MicOff: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default MicOff;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var MicOff = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M5.4514,8.6793 C5.8654,8.6793 6.2014,9.0153 6.2014,9.4293 L6.2014,12.4583 C6.2014,15.6553 8.8034,18.2573 12.0004,18.2573 C13.1744,18.2573 14.2664,17.9033 15.1804,17.3013 L16.2554,18.3763 C15.2474,19.1033 14.0504,19.5853 12.7504,19.7183 L12.7504,22.1143 L17.4284,22.1143 C17.8424,22.1143 18.1784,22.4503 18.1784,22.8643 C18.1784,23.2783 17.8424,23.6143 17.4284,23.6143 L6.5714,23.6143 C6.1574,23.6143 5.8214,23.2783 5.8214,22.8643 C5.8214,22.4503 6.1574,22.1143 6.5714,22.1143 L11.2504,22.1143 L11.2504,19.7183 C7.5764,19.3413 4.7014,16.2293 4.7014,12.4583 L4.7014,9.4293 C4.7014,9.0153 5.0374,8.6793 5.4514,8.6793 Z M3.6421,2.5814 L21.4191,20.3584 C21.7121,20.6514 21.7121,21.1264 21.4191,21.4194 C21.2731,21.5654 21.0811,21.6384 20.8891,21.6384 C20.6971,21.6384 20.5051,21.5654 20.3581,21.4194 L2.5811,3.6414 C2.2881,3.3484 2.2881,2.8744 2.5811,2.5814 C2.8741,2.2884 3.3491,2.2884 3.6421,2.5814 Z M7.6042,9.725 L14.1082,16.229 C13.4792,16.575 12.7682,16.79 12.0002,16.79 C9.5722,16.79 7.6042,14.822 7.6042,12.394 L7.6042,9.725 Z M18.5485,8.679 C18.9625,8.679 19.2985,9.015 19.2985,9.429 L19.2985,12.458 C19.2985,13.81 18.9245,15.073 18.2815,16.16 L17.1765,15.056 C17.5705,14.273 17.7985,13.392 17.7985,12.458 L17.7985,9.429 C17.7985,9.015 18.1345,8.679 18.5485,8.679 Z M11.9997,1.1355 C14.4277,1.1355 16.3957,3.1035 16.3957,5.5315 L16.3957,12.3945 C16.3957,12.9515 16.2807,13.4805 16.0917,13.9705 L7.6087,5.4875 C7.6327,3.0805 9.5877,1.1355 11.9997,1.1355 Z" })));
33
+ };
34
+ exports.default = MicOff;
@@ -8,6 +8,7 @@ declare const fillIcons: {
8
8
  readonly ic_chat: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
9
9
  readonly ic_chat_counseling: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
10
10
  readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
11
+ readonly ic_chat_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
11
12
  readonly ic_checkbox_indeterminate: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
12
13
  readonly ic_checkbox_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
13
14
  readonly ic_cloud_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -21,6 +22,7 @@ declare const fillIcons: {
21
22
  readonly ic_help_window: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
22
23
  readonly ic_live: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
23
24
  readonly ic_login: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
25
+ readonly ic_mic_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
24
26
  readonly ic_mic_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
25
27
  readonly ic_more: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
26
28
  readonly ic_paper_plane: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -11,6 +11,7 @@ var Camera_1 = __importDefault(require("./Camera"));
11
11
  var Chat_1 = __importDefault(require("./Chat"));
12
12
  var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
13
13
  var ChatCrm_1 = __importDefault(require("./ChatCrm"));
14
+ var ChatOff_1 = __importDefault(require("./ChatOff"));
14
15
  var CheckboxIndeterminate_1 = __importDefault(require("./CheckboxIndeterminate"));
15
16
  var CheckboxOn_1 = __importDefault(require("./CheckboxOn"));
16
17
  var CloudDownload_1 = __importDefault(require("./CloudDownload"));
@@ -24,6 +25,7 @@ var Heart_1 = __importDefault(require("./Heart"));
24
25
  var HelpWindow_1 = __importDefault(require("./HelpWindow"));
25
26
  var Live_1 = __importDefault(require("./Live"));
26
27
  var Login_1 = __importDefault(require("./Login"));
28
+ var MicOff_1 = __importDefault(require("./MicOff"));
27
29
  var MicOn_1 = __importDefault(require("./MicOn"));
28
30
  var More_1 = __importDefault(require("./More"));
29
31
  var PaperPlane_1 = __importDefault(require("./PaperPlane"));
@@ -64,6 +66,7 @@ var fillIcons = {
64
66
  ic_chat: Chat_1.default,
65
67
  ic_chat_counseling: ChatCounseling_1.default,
66
68
  ic_chat_crm: ChatCrm_1.default,
69
+ ic_chat_off: ChatOff_1.default,
67
70
  ic_checkbox_indeterminate: CheckboxIndeterminate_1.default,
68
71
  ic_checkbox_on: CheckboxOn_1.default,
69
72
  ic_cloud_download: CloudDownload_1.default,
@@ -77,6 +80,7 @@ var fillIcons = {
77
80
  ic_help_window: HelpWindow_1.default,
78
81
  ic_live: Live_1.default,
79
82
  ic_login: Login_1.default,
83
+ ic_mic_off: MicOff_1.default,
80
84
  ic_mic_on: MicOn_1.default,
81
85
  ic_more: More_1.default,
82
86
  ic_paper_plane: PaperPlane_1.default,
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const ChatOff: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default ChatOff;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var ChatOff = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M2.0375,4.1596 L3.2765,5.3976 C3.2735,5.4376 3.2635,5.4766 3.2635,5.5176 L3.2635,14.5706 C3.2635,15.6736 4.1615,16.5706 5.2635,16.5706 L11.4965,16.5706 L11.9255,16.9606 L15.3755,20.0966 C15.4045,20.1226 15.4165,20.1226 15.4255,20.1226 C15.4355,20.1226 15.5235,20.1196 15.5235,20.0306 L15.5235,17.6446 L17.0235,19.1446 L17.0235,20.0306 C17.0235,20.9826 16.2435,21.6226 15.4255,21.6226 C15.0575,21.6226 14.6825,21.4936 14.3665,21.2066 L10.9165,18.0706 L5.2635,18.0706 C3.3315,18.0706 1.7635,16.5036 1.7635,14.5706 L1.7635,5.5176 C1.7635,5.0356 1.8615,4.5766 2.0375,4.1596 Z M1.5804,1.5813 C1.8734,1.2883 2.3484,1.2883 2.6414,1.5813 L20.4184,19.3583 C20.7114,19.6513 20.7114,20.1263 20.4184,20.4193 C20.2724,20.5653 20.0804,20.6393 19.8884,20.6393 C19.6964,20.6393 19.5044,20.5653 19.3584,20.4193 L1.5804,2.6423 C1.2874,2.3493 1.2874,1.8743 1.5804,1.5813 Z M18.7359,2.0173 C20.6689,2.0173 22.2359,3.5843 22.2359,5.5173 L22.2359,14.5703 C22.2359,16.0713 21.2869,17.3413 19.9589,17.8383 L18.6909,16.5703 L18.7359,16.5703 C19.8389,16.5703 20.7359,15.6733 20.7359,14.5703 L20.7359,5.5173 C20.7359,4.4143 19.8389,3.5173 18.7359,3.5173 L5.6379,3.5173 L4.2919,2.1713 C4.6029,2.0813 4.9239,2.0173 5.2639,2.0173 Z M6.9839,9.1052 L8.6239,10.7452 C8.4069,11.0142 8.0879,11.1982 7.7149,11.1982 C7.0609,11.1982 6.5309,10.6672 6.5309,10.0132 C6.5309,9.6402 6.7139,9.3222 6.9839,9.1052 Z M16.2851,8.8297 C16.9391,8.8297 17.4691,9.3597 17.4691,10.0137 C17.4691,10.6677 16.9391,11.1977 16.2851,11.1977 C15.6311,11.1977 15.1011,10.6677 15.1011,10.0137 C15.1011,9.3597 15.6311,8.8297 16.2851,8.8297 Z M12.0001,8.8295 C12.6541,8.8295 13.1841,9.3595 13.1841,10.0135 C13.1841,10.3055 13.0671,10.5645 12.8911,10.7705 L11.2431,9.1225 C11.4491,8.9465 11.7081,8.8295 12.0001,8.8295 Z" })));
33
+ };
34
+ exports.default = ChatOff;
@@ -30,8 +30,7 @@ var Pages = function (_a) {
30
30
  var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
31
  return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
32
  react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
33
- react_1.default.createElement("path", { fill: color, d: "M16.0157,10.3251 C16.5677,10.3251 17.0157,10.7731 17.0157,11.3251 L17.0157,15.3241 C17.0157,15.8761 16.5677,16.3241 16.0157,16.3241 L7.9847,16.3241 C7.4327,16.3241 6.9847,15.8761 6.9847,15.3241 L6.9847,11.3251 C6.9847,10.7731 7.4327,10.3251 7.9847,10.3251 Z" }),
34
- react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M17.106,21.309 L6.894,21.309 C5.237,21.309 3.894,19.966 3.894,18.309 L3.894,5.691 C3.894,4.034 5.237,2.691 6.894,2.691 L14.071,2.691 C14.339,2.691 14.595,2.798 14.783,2.989 L19.818,8.093 C20.003,8.281 20.106,8.533 20.106,8.796 L20.106,18.309 C20.106,19.966 18.763,21.309 17.106,21.309 Z M7.6223,18.3237 L16.3773,18.3237" }),
35
- react_1.default.createElement("polyline", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", points: "19.729 8.408 14.013 8.408 14.013 2.692" }))));
33
+ react_1.default.createElement("path", { fill: color, d: "M16.0157,10.3251 L7.9847,10.3251 C7.4327,10.3251 6.9847,10.7731 6.9847,11.3251 L6.9847,15.3241 C6.9847,15.8761 7.4327,16.3241 7.9847,16.3241 L16.0157,16.3241 C16.5677,16.3241 17.0157,15.8761 17.0157,15.3241 L17.0157,11.3251 C17.0157,10.7731 16.5677,10.3251 16.0157,10.3251 L16.0157,10.3251 Z" }),
34
+ react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M14.071,2.691 C14.339,2.691 14.595,2.798 14.783,2.989 L19.818,8.093 C20.003,8.281 20.106,8.533 20.106,8.796 L20.106,18.309 C20.106,19.966 18.763,21.309 17.106,21.309 L6.894,21.309 C5.237,21.309 3.894,19.966 3.894,18.309 L3.894,5.691 C3.894,4.034 5.237,2.691 6.894,2.691 L14.071,2.691 Z M14.0133,2.6915 L14.0133,8.4075 L19.7293,8.4075 L14.0133,2.6915 Z M7.6223,18.3237 L16.3773,18.3237" }))));
36
35
  };
37
36
  exports.default = Pages;
@@ -30,6 +30,7 @@ declare const lineIcons: {
30
30
  readonly ic_chat: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
31
31
  readonly ic_chat_counseling: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
32
32
  readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
33
+ readonly ic_chat_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
33
34
  readonly ic_check: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
34
35
  readonly ic_checkbox_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
35
36
  readonly ic_clip: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -33,6 +33,7 @@ var ChannelSetting_1 = __importDefault(require("./ChannelSetting"));
33
33
  var Chat_1 = __importDefault(require("./Chat"));
34
34
  var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
35
35
  var ChatCrm_1 = __importDefault(require("./ChatCrm"));
36
+ var ChatOff_1 = __importDefault(require("./ChatOff"));
36
37
  var Check_1 = __importDefault(require("./Check"));
37
38
  var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
38
39
  var Clip_1 = __importDefault(require("./Clip"));
@@ -212,6 +213,7 @@ var lineIcons = {
212
213
  ic_chat: Chat_1.default,
213
214
  ic_chat_counseling: ChatCounseling_1.default,
214
215
  ic_chat_crm: ChatCrm_1.default,
216
+ ic_chat_off: ChatOff_1.default,
215
217
  ic_check: Check_1.default,
216
218
  ic_checkbox_off: CheckboxOff_1.default,
217
219
  ic_clip: Clip_1.default,
@@ -228,5 +228,10 @@
228
228
  "sys_component_base_19": "white/opacity65",
229
229
  "sys_cpnt_pagination_dot_01": "white",
230
230
  "sys_cpnt_pagination_dot_02": "white/opacity50",
231
- "sys_component_base_white_opacity50": "white/opacity50"
231
+ "sys_component_base_white_opacity50": "white/opacity50",
232
+ "sys_component_base_20": "white/opacity08",
233
+ "sys_component_base_22": "grey950",
234
+ "sys_component_base_21": "darkred500/opacity40",
235
+ "sys_component_border_white_opacity20": "white/opacity20",
236
+ "sys_component_base_23": "darkgrey100/opacity65"
232
237
  }
@@ -228,5 +228,10 @@
228
228
  "sys_component_base_19": "white/opacity65",
229
229
  "sys_cpnt_pagination_dot_01": "grey400",
230
230
  "sys_cpnt_pagination_dot_02": "white/opacity50",
231
- "sys_component_base_white_opacity50": "white/opacity50"
231
+ "sys_component_base_white_opacity50": "white/opacity50",
232
+ "sys_component_base_20": "white/opacity08",
233
+ "sys_component_base_22": "grey950",
234
+ "sys_component_base_21": "red500/opacity40",
235
+ "sys_component_border_white_opacity20": "white/opacity20",
236
+ "sys_component_base_23": "darkgrey100/opacity65"
232
237
  }
@@ -645,8 +645,10 @@
645
645
  "ui_cpnt_refund_text_status_issued": "sys_widget_orange_01",
646
646
  "ui_cpnt_refund_text_status_refunded": "sys_widget_success_01",
647
647
  "ui_cpnt_divider_white_01": "sys_component_base_19",
648
- "ui_cpnt_timer_base_01": "sys_background_dimmed",
649
- "ui_cpnt_timer_base_timeup": "sys_component_base_17",
648
+ "ui_cpnt_timer_base_01": "sys_component_base_23",
649
+ "ui_cpnt_timer_base_timeup": "sys_component_base_21",
650
650
  "ui_66": "sys_component_base_black_opacity50",
651
- "ui_67": "sys_component_base_white_opacity50"
651
+ "ui_67": "sys_component_base_white_opacity50",
652
+ "ui_cpnt_videoplayer_gradient_3": "sys_component_base_black_opacity50",
653
+ "ui_68": "sys_component_base_22"
652
654
  }
@@ -79,7 +79,7 @@ declare const colorSet: {
79
79
  opacity90: string;
80
80
  facebookblue: string;
81
81
  };
82
- readonly PaletteColor_Dark: {
82
+ readonly PaletteColor_light: {
83
83
  sys_container_background_01: string;
84
84
  sys_container_background_02: string;
85
85
  sys_container_background_03: string;
@@ -310,8 +310,13 @@ declare const colorSet: {
310
310
  sys_cpnt_pagination_dot_01: string;
311
311
  sys_cpnt_pagination_dot_02: string;
312
312
  sys_component_base_white_opacity50: string;
313
+ sys_component_base_20: string;
314
+ sys_component_base_22: string;
315
+ sys_component_base_21: string;
316
+ sys_component_border_white_opacity20: string;
317
+ sys_component_base_23: string;
313
318
  };
314
- readonly PaletteColor_light: {
319
+ readonly PaletteColor_Dark: {
315
320
  sys_container_background_01: string;
316
321
  sys_container_background_02: string;
317
322
  sys_container_background_03: string;
@@ -542,6 +547,11 @@ declare const colorSet: {
542
547
  sys_cpnt_pagination_dot_01: string;
543
548
  sys_cpnt_pagination_dot_02: string;
544
549
  sys_component_base_white_opacity50: string;
550
+ sys_component_base_20: string;
551
+ sys_component_base_22: string;
552
+ sys_component_base_21: string;
553
+ sys_component_border_white_opacity20: string;
554
+ sys_component_base_23: string;
545
555
  };
546
556
  readonly UIColor: {
547
557
  ui_cpnt_button_fill_base_primary: string;
@@ -1194,6 +1204,8 @@ declare const colorSet: {
1194
1204
  ui_cpnt_timer_base_timeup: string;
1195
1205
  ui_66: string;
1196
1206
  ui_67: string;
1207
+ ui_cpnt_videoplayer_gradient_3: string;
1208
+ ui_68: string;
1197
1209
  };
1198
1210
  };
1199
1211
  export default colorSet;
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
8
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
13
  PaletteColor_light: PaletteColor_light_json_1.default,
14
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
@@ -649,4 +649,6 @@ export interface UITheme {
649
649
  ui_cpnt_timer_base_timeup: string;
650
650
  ui_66: string;
651
651
  ui_67: string;
652
+ ui_cpnt_videoplayer_gradient_3: string;
653
+ ui_68: string;
652
654
  }
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DynamicLayoutProps } from './types';
3
- declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler }: DynamicLayoutProps): JSX.Element;
3
+ declare function DynamicLayout({ device, mode, isPreview, sections, navigationHandler, scrollDownTargetSectionId, onClickEditSection }: DynamicLayoutProps): JSX.Element;
4
4
  export default DynamicLayout;
@@ -1,4 +1,8 @@
1
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
+ };
2
6
  var __assign = (this && this.__assign) || function () {
3
7
  __assign = Object.assign || function(t) {
4
8
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
10
14
  };
11
15
  return __assign.apply(this, arguments);
12
16
  };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
13
36
  var __rest = (this && this.__rest) || function (s, e) {
14
37
  var t = {};
15
38
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,14 +57,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
34
57
  return (mod && mod.__esModule) ? mod : { "default": mod };
35
58
  };
36
59
  Object.defineProperty(exports, "__esModule", { value: true });
37
- var react_1 = __importDefault(require("react"));
60
+ var react_1 = __importStar(require("react"));
61
+ var styled_components_1 = __importDefault(require("styled-components"));
38
62
  var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
39
63
  var sections_1 = require("./sections");
40
64
  function DynamicLayout(_a) {
41
- var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler;
65
+ var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, navigationHandler = _a.navigationHandler, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
42
66
  var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
43
67
  .sort(function (a, b) { return a.order - b.order; });
44
- return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } }, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section))); })));
68
+ return (react_1.default.createElement(dynamicLayoutContext_1.dynamicLayoutContext.Provider, { value: { device: device, mode: mode, isPreview: isPreview, navigationHandler: navigationHandler } },
69
+ mode === 'EDIT' && onClickEditSection && (react_1.default.createElement(EditModeSections, { scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })),
70
+ mode !== 'EDIT' &&
71
+ filteredSortedSection.map(function (section) { return react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)); })));
45
72
  }
46
73
  function SectionMatcher(_a) {
47
74
  var props = __rest(_a, []);
@@ -62,3 +89,39 @@ function SectionMatcher(_a) {
62
89
  }
63
90
  }
64
91
  exports.default = DynamicLayout;
92
+ function EditModeSections(_a) {
93
+ var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, onClickEditSection = _a.onClickEditSection;
94
+ return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox, { scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
95
+ react_1.default.createElement(SectionMatcher, __assign({ key: section.id }, section)))); })));
96
+ }
97
+ function SectionBox(_a) {
98
+ var scrollIntoThisSection = _a.scrollIntoThisSection, children = _a.children, onClick = _a.onClick;
99
+ var _b = (0, react_1.useState)(false), isHover = _b[0], setHover = _b[1];
100
+ var sectionRef = (0, react_1.useRef)(null);
101
+ (0, react_1.useEffect)(function () {
102
+ var _a;
103
+ if (!sectionRef) {
104
+ return;
105
+ }
106
+ if (scrollIntoThisSection) {
107
+ (_a = sectionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
108
+ }
109
+ }, [scrollIntoThisSection]);
110
+ var onMouseEnter = function () {
111
+ setHover(true);
112
+ };
113
+ var onMouseLeave = function () {
114
+ setHover(false);
115
+ };
116
+ return (react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
117
+ isHover && (react_1.default.createElement(DimmedEditOverlay, null,
118
+ react_1.default.createElement(S_EditButton, null, "\uC774 Section \uC218\uC815\uD558\uAE30"))),
119
+ children));
120
+ }
121
+ var S_EditButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"], ["\n background-color: #ddf68c;\n font-weight: bold;\n padding: ", ";\n"])), function (_a) {
122
+ var theme = _a.theme;
123
+ return theme.spacing.spacingE;
124
+ });
125
+ var S_SectionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
126
+ var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n background-color: #f7f7f7c4;\n z-index: 10;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
127
+ var templateObject_1, templateObject_2, templateObject_3;
@@ -50,8 +50,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  Object.defineProperty(exports, "__esModule", { value: true });
51
51
  var react_1 = __importStar(require("react"));
52
52
  var styled_components_1 = __importDefault(require("styled-components"));
53
- var desktop_1 = require("../desktop");
54
53
  var pdsOriginal_1 = require("../pdsOriginal");
54
+ var YouTubeIframe_1 = require("../YouTubeIframe");
55
55
  var sectionContext_1 = require("./sectionContext");
56
56
  function Section(_a) {
57
57
  var children = _a.children, props = __rest(_a, ["children"]);
@@ -69,18 +69,13 @@ function Background() {
69
69
  var _a = context.styles, backgroundMediaSrc = _a.backgroundMediaSrc, backgroundColorInHex = _a.backgroundColorInHex, backgroundOverlayColorInHex = _a.backgroundOverlayColorInHex, backgroundMediaType = _a.backgroundMediaType;
70
70
  var backgroundRef = (0, react_1.useRef)(null);
71
71
  var _b = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _b[0], setYoutubeSize = _b[1];
72
- (0, react_1.useEffect)(function () {
73
- if (backgroundMediaType !== 'YOUTUBE')
74
- return;
75
- setYoutubeSize(getResponsiveYoutubeSize());
76
- }, []);
77
- var getResponsiveYoutubeSize = function () {
72
+ var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
78
73
  var backgroundWrapper = backgroundRef.current;
79
74
  if (!backgroundWrapper)
80
75
  return { width: 0, height: 0 };
81
76
  var backgroundSize = {
82
- width: backgroundWrapper.offsetWidth,
83
- height: backgroundWrapper.offsetHeight
77
+ width: backgroundWrapper.getBoundingClientRect().width,
78
+ height: backgroundWrapper.getBoundingClientRect().height
84
79
  };
85
80
  var isHorizontal = backgroundSize.width / backgroundSize.height > 1;
86
81
  var isOverRatio = backgroundSize.width / backgroundSize.height > 16 / 9;
@@ -88,7 +83,12 @@ function Background() {
88
83
  ? { width: backgroundSize.width, height: backgroundSize.width * (9 / 16) }
89
84
  : { width: backgroundSize.height * (16 / 9), height: backgroundSize.height };
90
85
  return youtubeSize;
91
- };
86
+ }, [backgroundRef.current]);
87
+ (0, react_1.useEffect)(function () {
88
+ if (backgroundMediaType !== 'YOUTUBE')
89
+ return;
90
+ setYoutubeSize(getResponsiveYoutubeSize());
91
+ }, [getResponsiveYoutubeSize]);
92
92
  (0, react_1.useEffect)(function () {
93
93
  if (backgroundMediaType !== 'YOUTUBE')
94
94
  return;
@@ -109,11 +109,11 @@ function Background() {
109
109
  // return <></>;
110
110
  case 'YOUTUBE':
111
111
  return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
112
- react_1.default.createElement(desktop_1.YouTubeIframe, { id: id, src: backgroundMediaSrc })));
112
+ react_1.default.createElement(YouTubeIframe_1.YouTubeIframe, { id: id, src: backgroundMediaSrc })));
113
113
  default:
114
114
  return react_1.default.createElement(react_1.default.Fragment, null);
115
115
  }
116
- }, [youtubeSize]);
116
+ }, [youtubeSize, id, backgroundMediaSrc]);
117
117
  return (react_1.default.createElement(react_1.default.Fragment, null,
118
118
  react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
119
119
  react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));