pds-dev-kit-web-test 0.1.3 → 0.1.5

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -14,12 +14,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var SectionMatcher_1 = require("../SectionMatcher");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
     var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
-    return (react_1.default.createElement(react_1.default.Fragment, null, filteredSortedSection.map(function (section) { return (react_1.default.createElement(SectionBox_1.default, { isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, key: section.id, onClick: function () { return onClickEditSection(section); } },
-        react_1.default.createElement(SectionMatcher_1.SectionMatcher, __assign({ key: section.id }, section)))); })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id) }), section.id)); }) }, void 0));
 }
 exports.default = EditModeSectionMatcher;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/OverlayBorders.js

@@ -7,39 +7,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function OverlayBorders(_a) {
     var zIndex = _a.zIndex;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Absolute_Border_Top, { zIndex: zIndex }),
-        react_1.default.createElement(Absolute_Border_Left, { zIndex: zIndex }),
-        react_1.default.createElement(Absolute_Border_Right, { zIndex: zIndex }),
-        react_1.default.createElement(Absolute_Border_Bottom, { zIndex: zIndex })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Absolute_Border_Top, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Left, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Right, { zIndex: zIndex }, void 0), (0, jsx_runtime_1.jsx)(Absolute_Border_Bottom, { zIndex: zIndex }, void 0)] }, void 0));
 }
 exports.default = OverlayBorders;
-var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  top: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+var Absolute_Border_Top = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 4px;\n  position: absolute;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 4px;\n  position: absolute;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 }, function (_a) {
     var zIndex = _a.zIndex;
     return zIndex;
 });
-var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  left: 0;\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+var Absolute_Border_Left = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  left: 0;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  left: 0;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 }, function (_a) {
     var zIndex = _a.zIndex;
     return zIndex;
 });
-var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n  transition: background-color 0.2s ease-out;\n"], ["\n  right: 0;\n  position: absolute;\n  height: 100%;\n  width: 4px;\n  background-color: ", ";\n  z-index: ", ";\n  transition: background-color 0.2s ease-out;\n"])), function (_a) {
+var Absolute_Border_Right = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100%;\n  position: absolute;\n  right: 0;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  height: 100%;\n  position: absolute;\n  right: 0;\n  transition: background-color 0.2s ease-out;\n  width: 4px;\n  z-index: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 }, function (_a) {
     var zIndex = _a.zIndex;
     return zIndex;
 });
-var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"], ["\n  bottom: 0;\n  position: absolute;\n  height: 4px;\n  width: 100%;\n  background-color: ", ";\n  transition: background-color 0.2s ease-out;\n  z-index: ", ";\n"])), function (_a) {
+var Absolute_Border_Bottom = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  height: 4px;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  height: 4px;\n  position: absolute;\n  transition: background-color 0.2s ease-out;\n  width: 100%;\n  z-index: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export default function SectionBox({ scrollIntoThisSection, isEditing, children, onClick }: {
     scrollIntoThisSection: boolean;
     isEditing: boolean;

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/SectionBox.js

@@ -3,30 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importDefault(require("styled-components"));
 var desktop_1 = require("../../../../desktop");
@@ -79,19 +72,10 @@ function SectionBox(_a) {
         setIsHover(false);
         onClickDelayedAsync();
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_SectionBox, { ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing },
-            isEditing && !hasNoChild && (react_1.default.createElement(S_Editing, null,
-                react_1.default.createElement(OverlayBorders_1.default, { zIndex: 1 }),
-                react_1.default.createElement(TopRightAbsoluteBox, null,
-                    react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
-            !isEditing && (react_1.default.createElement(DimmedEditOverlay, { isHover: isHover, fadeOut: fadeOut },
-                react_1.default.createElement(S_EditButton, null,
-                    react_1.default.createElement(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" })))),
-            children)));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_SectionBox, __assign({ ref: sectionRef, onClick: onClickSectionBox, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeaveAsync, isEditing: isEditing }, { children: [isEditing && !hasNoChild && ((0, jsx_runtime_1.jsxs)(S_Editing, { children: [(0, jsx_runtime_1.jsx)(OverlayBorders_1.default, { zIndex: 1 }, void 0), (0, jsx_runtime_1.jsx)(TopRightAbsoluteBox, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: t('str_4657'), styleTheme: "caption1Bold", colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" }, void 0) }, void 0)] }, void 0)), !isEditing && ((0, jsx_runtime_1.jsx)(DimmedEditOverlay, __assign({ isHover: isHover, fadeOut: fadeOut }, { children: (0, jsx_runtime_1.jsx)(S_EditButton, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_TextLabel, { text: t('str_4653'), colorOverride: "ui_cpnt_textlabel_sys_black", singleLineMode: "use", customFontWeight: "bold", textAlign: "center" }, void 0) }, void 0) }), void 0)), children] }), void 0) }, void 0));
 }
 exports.default = SectionBox;
-var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n  transition: background-color 0.2s ease-out;\n"], ["\n  top: 0;\n  right: 0;\n  position: absolute;\n  z-index: 4;\n  background-color: ", ";\n  padding: 8px 10px;\n  transition: background-color 0.2s ease-out;\n"])), function (_a) {
+var TopRightAbsoluteBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 8px 10px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  z-index: 4;\n"], ["\n  background-color: ", ";\n  padding: 8px 10px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  transition: background-color 0.2s ease-out;\n  z-index: 4;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_editor_preview_editing;
 });
@@ -112,7 +96,7 @@ var DimmedEditOverlay = styled_components_1.default.div(templateObject_3 || (tem
     }
     return 0;
 });
-var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  font-weight: bold;\n  height: 56px;\n  display: flex;\n  border-radius: 14px;\n  justify-content: center;\n  align-items: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var S_EditButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 14px;\n  display: flex;\n  font-weight: bold;\n  height: 56px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 14px;\n  display: flex;\n  font-weight: bold;\n  height: 56px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_71;
 }, function (_a) {

package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ISection } from '../../types';
+/// <reference types="react" />
+import type { ISection } from '../../types';
 declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;
 }): JSX.Element;

package/dist/src/sub/DynamicLayout/components/Section/Section.js

@@ -14,25 +14,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -48,19 +29,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var pdsOriginal_1 = require("../pdsOriginal");
 var YouTubeIframe_1 = require("../YouTubeIframe");
 var sectionContext_1 = require("./sectionContext");
 function Section(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(sectionContext_1.sectionContext.Provider, { value: props },
-        react_1.default.createElement(S_Section, null,
-            react_1.default.createElement(Background, null),
-            children)));
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: props }, { children: (0, jsx_runtime_1.jsxs)(S_Section, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }, void 0) }), void 0));
 }
-var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  width: 100%;\n  position: relative;\n  z-index: 0;\n"])));
+var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])));
 function Background() {
     var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
     var id = context.id;
@@ -101,26 +80,23 @@ function Background() {
     var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
-                return (react_1.default.createElement(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
+                return ((0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }, void 0));
             // case 'VIDEO':
             //   // NOTE VIDEO타입 배경은 최초 scope에서 제외
             //   return <></>;
             case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
-                    react_1.default.createElement(YouTubeIframe_1.YouTubeIframe, { id: id, src: backgroundMediaSrc })));
+                return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: id, src: backgroundMediaSrc }, void 0) }), void 0));
             default:
-                return react_1.default.createElement(react_1.default.Fragment, null);
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
         }
     }, [youtubeSize, id, backgroundMediaType, backgroundMediaSrc]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
-        react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(S_BackgroundWrapper, __assign({ ref: backgroundRef, color: backgroundColorInHex }, { children: backgroundMediaSrc && backgroundMedia }), void 0), (0, jsx_runtime_1.jsx)(S_BackgroundOverlay, { color: backgroundOverlayColorInHex }, void 0)] }, void 0));
 }
-var S_BackgroundWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {
+var S_BackgroundWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var S_BackgroundOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -1;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n"], ["\n  z-index: -1;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n"])), function (_a) {
+var S_BackgroundOverlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });

package/dist/src/sub/DynamicLayout/components/Section/sectionContext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ISection } from '../../types';
+import type { ISection } from '../../types';
 export declare const sectionContext: import("react").Context<ISection | null>;

package/dist/src/sub/DynamicLayout/components/SectionMatcher/SectionMatcher.js

@@ -21,28 +21,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var sections_1 = require("../../sections");
 function SectionMatcher(_a) {
     var props = __rest(_a, []);
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':
-            return react_1.default.createElement(sections_1.IntroSection, __assign({}, props));
+            return (0, jsx_runtime_1.jsx)(sections_1.IntroSection, __assign({}, props), void 0);
         case 'BASE_CONTENTS':
-            return react_1.default.createElement(sections_1.ContentsSection, __assign({}, props));
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsSection, __assign({}, props), void 0);
         case 'BASE_CONTENTS_CAROUSEL':
-            return react_1.default.createElement(sections_1.ContentsCarouselSection, __assign({}, props));
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsCarouselSection, __assign({}, props), void 0);
         case 'BASE_FOOTER':
-            return react_1.default.createElement(sections_1.FooterSection, __assign({}, props));
+            return (0, jsx_runtime_1.jsx)(sections_1.FooterSection, __assign({}, props), void 0);
         case 'BASE_INFO_BOX':
-            return react_1.default.createElement(sections_1.InfoBoxSection, __assign({}, props));
+            return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
         default:
-            return react_1.default.createElement(react_1.default.Fragment, null);
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
 }
 exports.default = SectionMatcher;

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js

@@ -3,30 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../../hooks");
 var TouTubeLinkParser_1 = __importDefault(require("../../utils/TouTubeLinkParser"));
@@ -205,15 +187,12 @@ function YouTubeIframe(_a) {
             youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
         };
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        isYoutubeLoading && react_1.default.createElement(BlackScreen, null),
-        react_1.default.createElement(S_IframeWrapper, null,
-            react_1.default.createElement("div", { id: PLAYER_ID }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, void 0) }, void 0)] }, void 0));
 }
 var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_62;
 });
-var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: 300%;\n    margin-left: -100%;\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  width: inherit;\n  overflow: hidden;\n  pointer-events: none;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    width: 300%;\n    margin-left: -100%;\n  }\n"])));
+var S_IframeWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: inherit;\n  margin: auto;\n  overflow: hidden;\n  pointer-events: none;\n  width: inherit;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    margin-left: -100%;\n    width: 300%;\n  }\n"], ["\n  height: inherit;\n  margin: auto;\n  overflow: hidden;\n  pointer-events: none;\n  width: inherit;\n\n  iframe {\n    border: 0;\n    height: inherit;\n    margin-left: -100%;\n    width: 300%;\n  }\n"])));
 exports.default = YouTubeIframe;
 var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.stories.d.ts

@@ -0,0 +1,5 @@
+import YouTubeIframe from './YouTubeIframe';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof YouTubeIframe>;
+export default _default;
+export declare const Default: ComponentStory<typeof YouTubeIframe>;

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var YouTubeIframe_1 = __importDefault(require("./YouTubeIframe"));
+exports.default = {
+    title: 'test/DynamicLayout/YouTubeIframe',
+    component: YouTubeIframe_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'YouTubeIframe'
+            }
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(YouTubeIframe_1.default, __assign({}, args), void 0); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    id: 0,
+    src: 'https://youtu.be/HYP32ho0MX4'
+};

package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { IItemTitle, IItemDescription, IItemButton, IItem } from '../../../types';
-import { TextLabelProps } from '../../pdsOriginal/desktop/TextLabel/TextLabel';
-import { ImageViewProps } from '../../pdsOriginal/hybrid/ImageView/ImageView';
+/// <reference types="react" />
+import type { IItemTitle, IItemDescription, IItemButton, IItem } from '../../../types';
+import type { TextLabelProps } from '../../pdsOriginal/desktop/TextLabel/TextLabel';
+import type { ImageViewProps } from '../../pdsOriginal/hybrid/ImageView/ImageView';
 declare function Item({ children, ...props }: IItem & {
     children: React.ReactNode;
 }): JSX.Element;