pds-dev-kit-web-test 2.7.0 → 2.7.1

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditor.js

@@ -0,0 +1,279 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-unused-vars */
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var react_1 = __importStar(require("react"));
+var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../components");
+var FlexGridItem_1 = __importDefault(require("../CompositionRenderer/FlexGridItem"));
+var gleStyles_1 = require("../gleStyles");
+var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
+var util_1 = require("../sections/CustomSection/util");
+var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
+var GRID_CELL_MIN = 24;
+var DESKTOP_GRID_COLS = 24;
+var MOBILE_GRID_COLS = 8;
+var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
+var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
+// type Props = ISection & ContextProps;
+// type ContextProps = {
+//   device: Device;
+//   queryData: QueryData;
+// };
+var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, ref) {
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler, queryData = _b.queryData;
+    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
+    var containerRef = (0, react_1.useRef)(null);
+    var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
+    var gleRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)([]), selectedRows = _f[0], setSelectedRows = _f[1]; // 빈 배열로 초기화
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
+    (0, react_1.useEffect)(function () {
+        if (editingSectionId !== props.id) {
+            setSelectedCB(null);
+            // breakGroupCB();
+        }
+    }, [editingSectionId]);
+    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
+    (0, react_1.useLayoutEffect)(function () {
+        if (props.id !== editingSectionId) {
+            return;
+        }
+        if (!shortcutKeyMode) {
+            return;
+        }
+        if (shortcutKeyMode === 'SELECT_ALL') {
+            if ((componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) === 1) {
+                setSelectedCB(componentBlocks[0].id);
+                return;
+            }
+            // makeAllInOneGroup();
+            return;
+        }
+        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
+            // breakGroupCB();
+            setSelectedCB(null);
+            return;
+        }
+    }, [shortcutKeyMode, setSelectedCB]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (props.id !== editingSectionId) {
+            return;
+        }
+        if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
+            if (!selectedCB || selectedCB === 'BULK') {
+                return;
+            }
+            // makeCollisionGroup(selectedCB);
+            // sectionActionHandler &&
+            //   sectionActionHandler({
+            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
+            //     payload: {
+            //      block:
+            //     }
+            //   });
+            setSelectedCB('BULK');
+        }
+    }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
+    var _g = (0, util_1.parseCustomSectionPlacement)({
+        isMobile: isMobile,
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
+    var customSectionStyles = {
+        minHeight: "".concat(minHeight, "vh"),
+        width: '100%',
+        maxWidth: isFullWidth ? '' : "".concat(width, "px")
+    };
+    var onClickSection = function () {
+        if (!isEditMode) {
+            return;
+        }
+        setSelectedCB(null);
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/SECTION_CLICKED',
+                payload: {
+                    sectionId: props.id
+                }
+            });
+    };
+    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
+    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
+        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
+        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
+    var rowHeight = (function () {
+        if (!size.width) {
+            return 50;
+        }
+        if (device === 'MOBILE') {
+            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
+            return cellWidth_1 * 0.56;
+        }
+        var cellWidth = size.width / DESKTOP_GRID_COLS;
+        return cellWidth * 0.56;
+    })();
+    var baseFontSize = (function () {
+        var _a, _b;
+        if (!size.width) {
+            return 16;
+        }
+        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
+        if (device === 'MOBILE') {
+            if (responsiveFontMode) {
+                return size.width * 0.0421;
+            }
+            if (size.width < 327) {
+                return Math.max(getDefensiveFontSize(device, size.width), 14);
+            }
+            return 16;
+        }
+        // NOTE: Desktop
+        if (responsiveFontMode) {
+            return size.width * 0.0133;
+        }
+        if (size.width < 1200) {
+            return Math.max(getDefensiveFontSize(device, size.width), 16);
+        }
+        return 16;
+    })();
+    var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+    var editableCBIds = (0, group_1.findDirectChildrenCbIds)(pedigree, 'ROOT');
+    console.log('pedigree', pedigree);
+    console.log(editableCBIds);
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                device: device,
+                mode: mode,
+                // isPreview,
+                // navigationHandler,
+                // sectionActionHandler,
+                // editingSectionId,
+                // programmedSectionComponents,
+                // shortcutKeyMode,
+                // zoomScale,
+                queryData: queryData
+            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                            minHeight: customSectionStyles.minHeight,
+                            paddingTop: padding.top,
+                            paddingBottom: padding.bottom,
+                            paddingRight: padding.right,
+                            paddingLeft: padding.left
+                        } }, { children: (0, jsx_runtime_1.jsxs)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, selectedRows: selectedRows, style: {
+                                width: customSectionStyles.width,
+                                maxWidth: customSectionStyles.maxWidth,
+                                minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                                fontSize: "".concat(baseFontSize, "px")
+                            } }, { children: [Array.from({ length: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0 }).map(function (_, rIdx) {
+                                    // selectedRows 배열에 현재 행의 인덱스가 포함되어 있는지 확인합니다.
+                                    var isSelected = selectedRows.includes(rIdx);
+                                    var handleRowClick = function () {
+                                        setSelectedRows(function (prevSelectedRows) {
+                                            // 이미 선택된 상태라면, 배열에서 해당 인덱스를 제거합니다 (선택 해제).
+                                            if (isSelected) {
+                                                return prevSelectedRows.filter(function (rowIdx) { return rowIdx !== rIdx; });
+                                            }
+                                            // 선택되지 않은 상태라면, 배열에 현재 인덱스를 추가합니다 (선택).
+                                            return __spreadArray(__spreadArray([], prevSelectedRows, true), [rIdx], false);
+                                        });
+                                    };
+                                    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "bg-grid-row ".concat(isSelected ? 'selected' : ''), style: {
+                                            gridRow: "".concat(rIdx + 1),
+                                            gridColumn: "1 / -1",
+                                            display: 'contents',
+                                            cursor: 'pointer'
+                                        }, onClick: handleRowClick }, { children: Array.from({ length: isMobile ? MOBILE_GRID_COLS : DESKTOP_GRID_COLS }).map(function (_, cIdx) { return ((0, jsx_runtime_1.jsx)("div", { className: "bg-grid-item", style: {
+                                                gridArea: "".concat(rIdx + 1, " / ").concat(cIdx + 1),
+                                                position: 'relative',
+                                                backgroundColor: '#e8e1e189',
+                                                border: '1px solid #6b666688'
+                                            }, "data-row": rIdx + 1, "data-col": cIdx + 1 }, "bg-grid-item-".concat(rIdx + 1, "-").concat(cIdx + 1))); }) }), "bg-grid-row-".concat(rIdx + 1)));
+                                }), (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0, style: { pointerEvents: 'none', boxShadow: '0 0 0 3px #e602ff' }, showPinned: true }) }, cb.id));
+                                })] })) })) })) }) })) }));
+});
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
+    // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
+    return Array.from({ length: props.sectionRow })
+        .map(function (_, index) {
+        // props로 받은 selectedRows 배열에 현재 행(index)이 포함되어 있는지 확인합니다.
+        return props.selectedRows.includes(index)
+            ? "minmax(".concat(props.rowHeight, "px, auto)") // 포함되어 있다면 minmax 사용
+            : "".concat(props.rowHeight, "px");
+    } // 포함되어 있지 않다면 고정 높이 사용
+    )
+        .join(' ');
+});
+var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.default = react_1.default.memo(GridAutoRowEditor);
+function getDefensiveFontSize(device, width) {
+    if (device === 'MOBILE') {
+        return width * (0.0000868 * width + 0.0202);
+    }
+    return width * (0.0000246 * width - 0.01618);
+}
+var templateObject_1, templateObject_2;

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

@@ -44,6 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomSectionBackgroundMedia = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var compositionQueryContext_1 = require("../../../../DynamicLayout/compositionQueryContext");
 var utils_1 = require("../../../../DynamicLayout/utils");
 var styled_components_1 = __importStar(require("styled-components"));
 var YouTubeIframe_1 = require("../../YouTubeIframe");
@@ -51,7 +52,8 @@ var util_1 = require("../util");
 var VideoBGMedia_1 = __importDefault(require("./VideoBGMedia"));
 function CustomSectionBackgroundMedia(_a) {
     var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
-    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR, CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE = _b.CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE, CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA = _b.CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA;
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
     var youTubeIframeKey = (0, react_1.useMemo)(function () {
         return "".concat(utils_1.YouTubeLinkParser.getId(String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC)), "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, "-").concat(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME);
@@ -100,12 +102,32 @@ function CustomSectionBackgroundMedia(_a) {
             observer.disconnect();
         };
     }, [device, specs, playerId, mediaType]);
+    var imgSrc = function () {
+        var isDataConnected = CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE === 'DATA' ||
+            CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (!isDataConnected) {
+            return CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR
+                ? String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR)
+                : '';
+        }
+        if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+            // eslint-disable-next-line
+            console.warn('ERROR: No query data found');
+            return 'ERROR';
+        }
+        if (!queryContext.queryData[String(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA)]) {
+            // eslint-disable-next-line
+            console.warn("ERROR: ".concat(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA, " NOT found in query data"));
+            return 'ERROR';
+        }
+        return queryContext.queryData[String(CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA)];
+    };
     if ('background' in componentStyle) {
         delete componentStyle.background;
     }
     switch (mediaType) {
         case 'IMAGE':
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: imgSrc() && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: imgSrc(), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: imgSrc(), style: { visibility: 'hidden', width: '100%', height: '100%' } }) }))) }));
         case 'YOUTUBE':
             return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), id: playerId, loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, youTubeIframeKey)) })));
         case 'VIDEO':

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

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

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

@@ -26,7 +26,9 @@ var AVAILABLE_SPECS = [
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR',
     'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME',
-    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR'
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE',
+    'CB_STYLE_PROP_BGMEDIA_SPEC_CONNECTDATA'
     // 'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY'
 ];
 function UseCustomSectionBackgroundMediaData(specs, device) {

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/downIcons.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type IconType from '../../IconType';
+export declare const ArrowDownDesign01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign02: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign03: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign04: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign05: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign06: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign07: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign08: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign09: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowDownDesign10: ({ color, size, ...rest }: IconType) => JSX.Element;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/downIcons.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowDownDesign10 = exports.ArrowDownDesign09 = exports.ArrowDownDesign08 = exports.ArrowDownDesign07 = exports.ArrowDownDesign06 = exports.ArrowDownDesign05 = exports.ArrowDownDesign04 = exports.ArrowDownDesign03 = exports.ArrowDownDesign02 = exports.ArrowDownDesign01 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ArrowDownDesign01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: ".5", d: "M15.577375,18.497375 L8.666375,11.586375 C8.341375,11.261375 8.341375,10.733375 8.666375,10.408375 L15.577375,3.497375", transform: "rotate(-90 12 10.997)" }) })));
+};
+exports.ArrowDownDesign01 = ArrowDownDesign01;
+var ArrowDownDesign02 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", d: "M15.5773125,18.5003005 L8.6668125,11.5898005 C8.3413125,11.2643005 8.3413125,10.7363005 8.6668125,10.4108005 L15.5773125,3.5003005", transform: "rotate(-90 12 11)" }) })));
+};
+exports.ArrowDownDesign02 = ArrowDownDesign02;
+var ArrowDownDesign03 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M15.5774,18.5 L8.6664,11.589 C8.3414,11.264 8.3414,10.736 8.6664,10.411 L15.5774,3.5", transform: "rotate(-90 12 11)" }) })));
+};
+exports.ArrowDownDesign03 = ArrowDownDesign03;
+var ArrowDownDesign04 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", points: "8.001 3.499 16.001 11.499 8.001 19.501", transform: "rotate(90 12 11.5)" }) })));
+};
+exports.ArrowDownDesign04 = ArrowDownDesign04;
+var ArrowDownDesign05 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4.55225015,11.9999287 L21,11.9999287 M10.4989308,19.4992872 L3,12.0003564 L10.4989308,4.5", transform: "rotate(-90 12 12)" }) })));
+};
+exports.ArrowDownDesign05 = ArrowDownDesign05;
+var ArrowDownDesign06 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", d: "M4.55225015,11.9999287 L21,11.9999287 M10.4989308,19.4992872 L3,12.0003564 L10.4989308,4.5", transform: "rotate(-90 12 12)" }) })));
+};
+exports.ArrowDownDesign06 = ArrowDownDesign06;
+var ArrowDownDesign07 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "32", viewBox: "0 0 24 32" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M-1.44774985,16.0002851 L27,16.0002851 M4.49893076,23.4996436 L-3,16.0007128 L4.49893076,8.50035641", transform: "rotate(-90 12 16)" }) })));
+};
+exports.ArrowDownDesign07 = ArrowDownDesign07;
+var ArrowDownDesign08 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "32", viewBox: "0 0 24 32" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", d: "M-0.448106259,15.8002851 L25.9996436,15.8002851 M5.49857435,23.2996436 L-2.00035641,15.8007128 L5.49857435,8.30035641", transform: "matrix(0 -1 -1 0 27.8 27.8)" }) })));
+};
+exports.ArrowDownDesign08 = ArrowDownDesign08;
+var ArrowDownDesign09 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "24", height: "32", viewBox: "0 0 24 32" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M11.805,12.066 C11.805,12.066 4,19.871 4,19.871 L28.537,19.871", transform: "scale(1 -1) rotate(90 32.237 0)" }) })));
+};
+exports.ArrowDownDesign09 = ArrowDownDesign09;
+var ArrowDownDesign10 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polygon", { fill: color, fillRule: "evenodd", points: "12 6 21 21 3 21", transform: "rotate(180 12 13.5)" }) })));
+};
+exports.ArrowDownDesign10 = ArrowDownDesign10;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/index.d.ts

@@ -0,0 +1,4 @@
+export { ArrowDownDesign01 as ic_arrow_down_design_01, ArrowDownDesign02 as ic_arrow_down_design_02, ArrowDownDesign03 as ic_arrow_down_design_03, ArrowDownDesign04 as ic_arrow_down_design_04, ArrowDownDesign05 as ic_arrow_down_design_05, ArrowDownDesign06 as ic_arrow_down_design_06, ArrowDownDesign07 as ic_arrow_down_design_07, ArrowDownDesign08 as ic_arrow_down_design_08, ArrowDownDesign09 as ic_arrow_down_design_09, ArrowDownDesign10 as ic_arrow_down_design_10 } from './downIcons';
+export { ArrowLeftDesign01 as ic_arrow_left_design_01, ArrowLeftDesign02 as ic_arrow_left_design_02, ArrowLeftDesign03 as ic_arrow_left_design_03, ArrowLeftDesign04 as ic_arrow_left_design_04, ArrowLeftDesign05 as ic_arrow_left_design_05, ArrowLeftDesign06 as ic_arrow_left_design_06, ArrowLeftDesign07 as ic_arrow_left_design_07, ArrowLeftDesign08 as ic_arrow_left_design_08, ArrowLeftDesign09 as ic_arrow_left_design_09, ArrowLeftDesign10 as ic_arrow_left_design_10 } from './leftIcons';
+export { ArrowRightDesign01 as ic_arrow_right_design_01, ArrowRightDesign02 as ic_arrow_right_design_02, ArrowRightDesign03 as ic_arrow_right_design_03, ArrowRightDesign04 as ic_arrow_right_design_04, ArrowRightDesign05 as ic_arrow_right_design_05, ArrowRightDesign06 as ic_arrow_right_design_06, ArrowRightDesign07 as ic_arrow_right_design_07, ArrowRightDesign08 as ic_arrow_right_design_08, ArrowRightDesign09 as ic_arrow_right_design_09, ArrowRightDesign10 as ic_arrow_right_design_10 } from './rightIcons';
+export { ArrowUpDesign01 as ic_arrow_up_design_01, ArrowUpDesign02 as ic_arrow_up_design_02, ArrowUpDesign03 as ic_arrow_up_design_03, ArrowUpDesign04 as ic_arrow_up_design_04, ArrowUpDesign05 as ic_arrow_up_design_05, ArrowUpDesign06 as ic_arrow_up_design_06, ArrowUpDesign07 as ic_arrow_up_design_07, ArrowUpDesign08 as ic_arrow_up_design_08, ArrowUpDesign09 as ic_arrow_up_design_09, ArrowUpDesign10 as ic_arrow_up_design_10 } from './upIcons';

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ic_arrow_up_design_10 = exports.ic_arrow_up_design_09 = exports.ic_arrow_up_design_08 = exports.ic_arrow_up_design_07 = exports.ic_arrow_up_design_06 = exports.ic_arrow_up_design_05 = exports.ic_arrow_up_design_04 = exports.ic_arrow_up_design_03 = exports.ic_arrow_up_design_02 = exports.ic_arrow_up_design_01 = exports.ic_arrow_right_design_10 = exports.ic_arrow_right_design_09 = exports.ic_arrow_right_design_08 = exports.ic_arrow_right_design_07 = exports.ic_arrow_right_design_06 = exports.ic_arrow_right_design_05 = exports.ic_arrow_right_design_04 = exports.ic_arrow_right_design_03 = exports.ic_arrow_right_design_02 = exports.ic_arrow_right_design_01 = exports.ic_arrow_left_design_10 = exports.ic_arrow_left_design_09 = exports.ic_arrow_left_design_08 = exports.ic_arrow_left_design_07 = exports.ic_arrow_left_design_06 = exports.ic_arrow_left_design_05 = exports.ic_arrow_left_design_04 = exports.ic_arrow_left_design_03 = exports.ic_arrow_left_design_02 = exports.ic_arrow_left_design_01 = exports.ic_arrow_down_design_10 = exports.ic_arrow_down_design_09 = exports.ic_arrow_down_design_08 = exports.ic_arrow_down_design_07 = exports.ic_arrow_down_design_06 = exports.ic_arrow_down_design_05 = exports.ic_arrow_down_design_04 = exports.ic_arrow_down_design_03 = exports.ic_arrow_down_design_02 = exports.ic_arrow_down_design_01 = void 0;
+var downIcons_1 = require("./downIcons");
+Object.defineProperty(exports, "ic_arrow_down_design_01", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign01; } });
+Object.defineProperty(exports, "ic_arrow_down_design_02", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign02; } });
+Object.defineProperty(exports, "ic_arrow_down_design_03", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign03; } });
+Object.defineProperty(exports, "ic_arrow_down_design_04", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign04; } });
+Object.defineProperty(exports, "ic_arrow_down_design_05", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign05; } });
+Object.defineProperty(exports, "ic_arrow_down_design_06", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign06; } });
+Object.defineProperty(exports, "ic_arrow_down_design_07", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign07; } });
+Object.defineProperty(exports, "ic_arrow_down_design_08", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign08; } });
+Object.defineProperty(exports, "ic_arrow_down_design_09", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign09; } });
+Object.defineProperty(exports, "ic_arrow_down_design_10", { enumerable: true, get: function () { return downIcons_1.ArrowDownDesign10; } });
+var leftIcons_1 = require("./leftIcons");
+Object.defineProperty(exports, "ic_arrow_left_design_01", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign01; } });
+Object.defineProperty(exports, "ic_arrow_left_design_02", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign02; } });
+Object.defineProperty(exports, "ic_arrow_left_design_03", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign03; } });
+Object.defineProperty(exports, "ic_arrow_left_design_04", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign04; } });
+Object.defineProperty(exports, "ic_arrow_left_design_05", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign05; } });
+Object.defineProperty(exports, "ic_arrow_left_design_06", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign06; } });
+Object.defineProperty(exports, "ic_arrow_left_design_07", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign07; } });
+Object.defineProperty(exports, "ic_arrow_left_design_08", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign08; } });
+Object.defineProperty(exports, "ic_arrow_left_design_09", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign09; } });
+Object.defineProperty(exports, "ic_arrow_left_design_10", { enumerable: true, get: function () { return leftIcons_1.ArrowLeftDesign10; } });
+var rightIcons_1 = require("./rightIcons");
+Object.defineProperty(exports, "ic_arrow_right_design_01", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign01; } });
+Object.defineProperty(exports, "ic_arrow_right_design_02", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign02; } });
+Object.defineProperty(exports, "ic_arrow_right_design_03", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign03; } });
+Object.defineProperty(exports, "ic_arrow_right_design_04", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign04; } });
+Object.defineProperty(exports, "ic_arrow_right_design_05", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign05; } });
+Object.defineProperty(exports, "ic_arrow_right_design_06", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign06; } });
+Object.defineProperty(exports, "ic_arrow_right_design_07", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign07; } });
+Object.defineProperty(exports, "ic_arrow_right_design_08", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign08; } });
+Object.defineProperty(exports, "ic_arrow_right_design_09", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign09; } });
+Object.defineProperty(exports, "ic_arrow_right_design_10", { enumerable: true, get: function () { return rightIcons_1.ArrowRightDesign10; } });
+var upIcons_1 = require("./upIcons");
+Object.defineProperty(exports, "ic_arrow_up_design_01", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign01; } });
+Object.defineProperty(exports, "ic_arrow_up_design_02", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign02; } });
+Object.defineProperty(exports, "ic_arrow_up_design_03", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign03; } });
+Object.defineProperty(exports, "ic_arrow_up_design_04", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign04; } });
+Object.defineProperty(exports, "ic_arrow_up_design_05", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign05; } });
+Object.defineProperty(exports, "ic_arrow_up_design_06", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign06; } });
+Object.defineProperty(exports, "ic_arrow_up_design_07", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign07; } });
+Object.defineProperty(exports, "ic_arrow_up_design_08", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign08; } });
+Object.defineProperty(exports, "ic_arrow_up_design_09", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign09; } });
+Object.defineProperty(exports, "ic_arrow_up_design_10", { enumerable: true, get: function () { return upIcons_1.ArrowUpDesign10; } });

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/leftIcons.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type IconType from '../../IconType';
+export declare const ArrowLeftDesign01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign02: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign03: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign04: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign05: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign06: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign07: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign08: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign09: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowLeftDesign10: ({ color, size, ...rest }: IconType) => JSX.Element;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/leftIcons.js

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowLeftDesign10 = exports.ArrowLeftDesign09 = exports.ArrowLeftDesign08 = exports.ArrowLeftDesign07 = exports.ArrowLeftDesign06 = exports.ArrowLeftDesign05 = exports.ArrowLeftDesign04 = exports.ArrowLeftDesign03 = exports.ArrowLeftDesign02 = exports.ArrowLeftDesign01 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ArrowLeftDesign01 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: ".5", d: "M14.5773,19.5001 L7.6663,12.5891 C7.3413,12.2641 7.3413,11.7361 7.6663,11.4111 L14.5773,4.5001" }) })));
+};
+exports.ArrowLeftDesign01 = ArrowLeftDesign01;
+var ArrowLeftDesign02 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", d: "M14.5776,19.5003 L7.6671,12.5898 C7.3416,12.2643 7.3416,11.7363 7.6671,11.4108 L14.5776,4.5003" }) })));
+};
+exports.ArrowLeftDesign02 = ArrowLeftDesign02;
+var ArrowLeftDesign03 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M14.5774,19.5 L7.6664,12.589 C7.3414,12.264 7.3414,11.736 7.6664,11.411 L14.5774,4.5" }) })));
+};
+exports.ArrowLeftDesign03 = ArrowLeftDesign03;
+var ArrowLeftDesign04 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polyline", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", points: "7.5 4 15.5 12 7.5 20.002", transform: "rotate(180 11.5 12)" }) })));
+};
+exports.ArrowLeftDesign04 = ArrowLeftDesign04;
+var ArrowLeftDesign05 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M4.55225015,11.9999287 L21,11.9999287 M10.4989308,19.4992872 L3,12.0003564 L10.4989308,4.5" }) })));
+};
+exports.ArrowLeftDesign05 = ArrowLeftDesign05;
+var ArrowLeftDesign06 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", d: "M4.55225015,11.9999287 L21,11.9999287 M10.4989308,19.4992872 L3,12.0003564 L10.4989308,4.5" }) })));
+};
+exports.ArrowLeftDesign06 = ArrowLeftDesign06;
+var ArrowLeftDesign07 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "32", height: "24", viewBox: "0 0 32 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M2.55225015,11.9999287 L31,11.9999287 M8.49893076,19.4992872 L1,12.0003564 L8.49893076,4.5" }) })));
+};
+exports.ArrowLeftDesign07 = ArrowLeftDesign07;
+var ArrowLeftDesign08 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "32", height: "24", viewBox: "0 0 32 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "square", strokeWidth: "3", d: "M3.75225015,11.9999287 L30.2,11.9999287 M9.69893076,19.4992872 L2.2,12.0003564 L9.69893076,4.5" }) })));
+};
+exports.ArrowLeftDesign08 = ArrowLeftDesign08;
+var ArrowLeftDesign09 = function (_a) {
+    var color = _a.color, rest = __rest(_a, ["color"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "32", height: "24", viewBox: "0 0 32 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M11.505,4.5 C11.505,4.5 3.7,12.305 3.7,12.305 L28.237,12.305" }) })));
+};
+exports.ArrowLeftDesign09 = ArrowLeftDesign09;
+var ArrowLeftDesign10 = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("polygon", { fill: color, fillRule: "evenodd", points: "10.5 4.5 19.5 19.5 1.5 19.5", transform: "rotate(-90 10.5 12)" }) })));
+};
+exports.ArrowLeftDesign10 = ArrowLeftDesign10;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/common/assets/icons/line/editorNavigationIcons/rightIcons.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type IconType from '../../IconType';
+export declare const ArrowRightDesign01: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign02: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign03: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign04: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign05: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign06: ({ color, size, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign07: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign08: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign09: ({ color, ...rest }: IconType) => JSX.Element;
+export declare const ArrowRightDesign10: ({ color, size, ...rest }: IconType) => JSX.Element;