pds-dev-kit-web-test 2.7.95 → 2.7.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.95",
+  "version": "2.7.96",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { ComponentBlock } from '../sections/CustomSection/types';
-import type { Device } from '../sections/CustomSection/util/types';
-type Props = {
-    cbProps: ComponentBlock;
-    device: Device;
-    index: number;
-    rowHeight: number;
-};
-export default function ComponentBlockMatcher({ cbProps, device, index }: Props): JSX.Element;
-export {};

package/dist/src/sub/DynamicLayout/CompositionRenderer/ComponentBlockMatcher.js

@@ -1,59 +0,0 @@
-"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 });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Button_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button"));
-var Divider_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Divider/Divider"));
-var Embed_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/Embed"));
-var Image_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image"));
-var RichText_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/RichText");
-var Text_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text"));
-var Twitter_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Twitter/Twitter"));
-var Youtube_1 = require("../sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube");
-var newUtils_1 = require("../sections/CustomSection/newUtils");
-var types_1 = require("../sections/CustomSection/types");
-function ComponentBlockMatcher(_a) {
-    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
-    var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
-    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
-    switch (componentBlockCode) {
-        case types_1.CB_ALL_CODES.CB_BTN:
-            return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_RICHTEXT:
-            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_DIVIDER:
-            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_IMG:
-            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_TWITTER:
-            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_YOUTUBE:
-            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_EMBED:
-            return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
-        }
-        case types_1.CB_ALL_CODES.CB_LIST: {
-            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
-        }
-        default:
-            return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
-    }
-}
-exports.default = ComponentBlockMatcher;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { IComposition } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
-export type LayoutsType = {
-    sm: Layout;
-    lg: Layout;
-};
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
-    device?: "DESKTOP" | "MOBILE" | undefined;
-} & React.RefAttributes<unknown>>>;
-export default _default;

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -1,285 +0,0 @@
-"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 __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 react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("@sub/DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
-var styled_components_1 = __importDefault(require("styled-components"));
-require("../components");
-var gleStyles_1 = require("../gleStyles");
-var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-require("../sections/CustomSection/util");
-var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
-var parseStylePropBorder_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropBorder"));
-var parseStylePropShadow_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow"));
-var types_1 = require("../sections/CustomSection/util/stylePropParsers/types");
-var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
-var FlexGridItemForCCB_1 = __importDefault(require("./FlexGridItemForCCB"));
-var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d, _e;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
-    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _h.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _h.CB_STYLE_PROP_BORDER, zOrders = _g.zOrders;
-    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
-    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
-    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
-    var rows = isMobile ? rowsMobile : rowsDesktop;
-    var cols = isMobile ? colsMobile : colsDesktop;
-    var containerRef = (0, react_1.useRef)(null);
-    var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
-    var gleRef = (0, react_1.useRef)(null);
-    (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 _k = (0, parseCompositionPlacement_1.default)({
-        isMobile: isMobile,
-        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
-    var canvasWidth = 50 * cols;
-    var customSectionStyles = {
-        minHeight: "".concat(minHeight, "px"),
-        maxHeight: "".concat(maxHeight, "px"),
-        width: "100%",
-        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "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 shadowStyles = (0, parseStylePropShadow_1.default)({
-        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW,
-        specs: MOCK_SHADOW
-    }, device);
-    var borderStyles = (0, parseStylePropBorder_1.default)({
-        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_BORDER,
-        specs: MOCK_BORDER
-    }, device);
-    var rowHeight = (function () {
-        if (!size.width) {
-            return 50;
-        }
-        if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / cols;
-            return cellWidth_1 * 0.56;
-        }
-        var cellWidth = size.width / cols;
-        return cellWidth * 0.56;
-    })();
-    // TODO: 폰트사이즈 작업 필요.
-    var baseFontSize = (function () {
-        if (!size.width) {
-            return 16;
-        }
-        // const responsiveFontMode =
-        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
-        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
-        var responsiveFontMode = true;
-        if (device === 'MOBILE') {
-            if (responsiveFontMode) {
-                return size.width * 0.0421;
-            }
-            if (size.width < 327) {
-                return Math.max(getDefensiveFontSize(device, size.width), 14);
-            }
-            return 16;
-        }
-        if (responsiveFontMode) {
-            return size.width * 0.0133;
-        }
-        if (size.width < 1200) {
-            return Math.max(getDefensiveFontSize(device, size.width), 16);
-        }
-        return 16;
-    })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
-            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: __assign(__assign(__assign({ width: '100%', height: '100%' }, shadowStyles.style), borderStyles.style), { overflow: 'hidden' }) }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
-                        width: '100%',
-                        height: '100%'
-                    } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                            // minHeight: customSectionStyles.minHeight,
-                            paddingTop: padding.top,
-                            paddingBottom: padding.bottom,
-                            paddingRight: padding.right,
-                            paddingLeft: padding.left,
-                            width: '100%',
-                            height: '100%'
-                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth
-                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                // fontSize: `${baseFontSize}px`
-                            } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_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 }) }, cb.id));
-                            }) })) })) })) })) })) }));
-});
-var MOCK_BORDER = {
-    CB_STYLE_PROP_BORDER_SPEC_COLOR: '#000000FF',
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
-        bl: 18,
-        br: 18,
-        tl: 18,
-        tr: 18
-    },
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_STYLE: 'SOLID',
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null,
-    CB_STYLE_PROP_BORDER_SPEC_WIDTH: 3,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': null,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null,
-    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null
-};
-var MOCK_SHADOW = {
-    CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#000000FF',
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'OUTSET',
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_X: 0,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
-    CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
-    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
-};
-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  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\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  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
-var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.default = react_1.default.memo(Composition);
-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/CompositionRenderer/CompositionBackground.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { CSSProperties } from 'styled-components';
-import type { IComposition } from '../types';
-type SectionPropTypes = IComposition & {
-    children?: React.ReactNode;
-} & {
-    overrideStyles?: CSSProperties;
-    isMobile?: boolean;
-};
-declare function CompositionBackground({ children, overrideStyles, isMobile, ...props }: SectionPropTypes): JSX.Element;
-export default CompositionBackground;

package/dist/src/sub/DynamicLayout/CompositionRenderer/CompositionBackground.js

@@ -1,45 +0,0 @@
-"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 __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;
-};
-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");
-var styled_components_1 = __importDefault(require("styled-components"));
-var Section_1 = require("../components/Section");
-var CustomSectionBackground_1 = __importDefault(require("../components/Section/components/CustomSectionBackground"));
-function CompositionBackground(_a) {
-    var children = _a.children, overrideStyles = _a.overrideStyles, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b, props = __rest(_a, ["children", "overrideStyles", "isMobile"]);
-    return ((0, jsx_runtime_1.jsx)(Section_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: false }, { children: [(0, jsx_runtime_1.jsx)(CustomSectionBackground_1.default, { isMobile: isMobile }), children] })) })));
-}
-var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
-    var isIframeSection = _a.isIframeSection;
-    return (isIframeSection ? '100%' : 'auto');
-});
-exports.default = CompositionBackground;
-var templateObject_1;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { ComponentBlock } from '../sections/CustomSection/types';
-import type { Device } from '../sections/CustomSection/util/types';
-type Props = {
-    cb: ComponentBlock;
-    index: number;
-    device: Device;
-    rowHeight: number;
-    zIndex: number;
-    showPinned?: boolean;
-    style?: React.CSSProperties;
-};
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
-export default FlexGridItem;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.js

@@ -1,68 +0,0 @@
-"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 __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");
-var react_1 = require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
-var ComponentBlockMatcher_1 = __importDefault(require("./ComponentBlockMatcher"));
-var gap = 10;
-function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
-    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var _b = (0, react_1.useState)(false), isPinned = _b[0], setIsPinned = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
-}
-var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
-var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
-function getMaxHeight(props, device, rowHeight) {
-    if (device === 'DESKTOP') {
-        var CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
-        var height_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS * rowHeight +
-            (CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS - 1) * gap;
-        return height_1;
-    }
-    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    var height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
-    return height;
-}
-function getGridAreaFromCB(props, device) {
-    var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
-    if (device === 'DESKTOP') {
-        var colStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1;
-        var rowStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY + 1;
-        var rowEnd_1 = rows + rowStart_1;
-        var colEnd_1 = cols + colStart_1;
-        // <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
-        return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
-    }
-    var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
-    var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
-    var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
-    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    var colStart = startXMobile + 1;
-    var rowStart = startYMobile + 1;
-    var rowEnd = rowsMobile + rowStart;
-    var colEnd = colsMobile + colStart;
-    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
-}
-exports.default = FlexGridItem;
-var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { CB_VALUE_TYPE, CCB_VALUE_TYPE } from '../sections/CustomSection/util/types';
-import type { IComposition, QueryData } from '@sub/DynamicLayout/types';
-export declare function createCompositions({ valueType, queryPath, queryData, compositions, limit }: {
-    valueType: CCB_VALUE_TYPE | CB_VALUE_TYPE;
-    queryPath: string;
-    queryData: QueryData | undefined;
-    compositions: IComposition[];
-    limit: number;
-}): JSX.Element[];

package/dist/src/sub/DynamicLayout/CompositionRenderer/createCompositions.js

@@ -1,79 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCompositions = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
-var compositionQueryContext_1 = require("../compositionQueryContext");
-var Composition_1 = __importDefault(require("./Composition"));
-function createCompositions(_a) {
-    var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions, limit = _a.limit;
-    var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
-    // 직접 입력 유형인 경우
-    if (!isQueryDataConnected) {
-        var valueTypeCompositions = compositions.filter(function (composition) { return !composition.isDefault; });
-        // MANUAL ITEM이 없는 경우
-        if (!valueTypeCompositions.length) {
-            return [
-                (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC774\uD15C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC544\uC774\uD15C\uC744 \uCD94\uAC00\uD574\uC8FC\uC138\uC694." }, "empty-manual-item")
-            ];
-        }
-        return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); });
-    }
-    if (!compositions.length) {
-        return [(0, jsx_runtime_1.jsx)("div", { children: "EMPTY TEXT" }, "empty")];
-    }
-    // 데이터 연결 유형이나, 쿼리 데이터나 키가 없는 경우
-    if (queryPath === 'NONE' || !queryPath || !queryData) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
-    }
-    var parsedQueryPath = removeFirstSegment(queryPath);
-    var queryDataValue = queryData[parsedQueryPath];
-    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
-    if (!queryDataValue) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }, "not-found")];
-    }
-    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
-    if (!queryDataValue.length) {
-        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uBCF4\uC5EC\uC904 \uCF58\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "empty-item")];
-    }
-    return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition)) }), index)); });
-}
-exports.createCompositions = createCompositions;
-function removeFirstSegment(path) {
-    var segments = path.split('/');
-    return segments.slice(1).join('/');
-}
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.6);\n  bottom: 0;\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  left: 0;\n  line-height: ", ";\n  padding: ", ";\n  position: absolute;\n  right: 0;\n  text-align: center;\n  top: 0;\n  word-break: keep-all;\n"], ["\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.6);\n  bottom: 0;\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  left: 0;\n  line-height: ", ";\n  padding: ", ";\n  position: absolute;\n  right: 0;\n  text-align: center;\n  top: 0;\n  word-break: keep-all;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var templateObject_1;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/RichText/RichText.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export type RichTextPropTypes = {
-    text: string;
-};
-declare function RichText({ text }: RichTextPropTypes): JSX.Element;
-export default RichText;