pds-dev-kit-web 2.2.136 → 2.2.138

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -366,6 +366,6 @@
     "sys_cpnt_editor_buttongroup_undefined": "darkgrey400",
     "sys_text_grey_02_hinttext": "darkgrey450",
     "sys_component_base_48": "darkgrey70",
-    "usr_usr_brand_primary_opacity10": "darkblue500/opacity10",
+    "usr_brand_primary_opacity10": "darkblue500/opacity10",
     "sys_component_base_49": "darkgrey70"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -366,6 +366,6 @@
     "sys_cpnt_editor_buttongroup_undefined": "grey400",
     "sys_text_grey_02_hinttext": "grey450",
     "sys_component_base_48": "grey70",
-    "usr_usr_brand_primary_opacity10": "blue500/opacity10",
+    "usr_brand_primary_opacity10": "blue500/opacity10",
     "sys_component_base_49": "white"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -880,7 +880,7 @@
     "ui_cpnt_form_text_hint": "sys_text_grey_02_hinttext",
     "ui_129": "sys_cpnt_sheet_base_13",
     "ui_130": "sys_component_on_base_02",
-    "ui_cpnt_button_fill_base_on_sheet": "sys_component_base_48",
+    "ui_cpnt_button_fill_base_on_sheet": "sys_component_base_49",
     "ui_cpnt_sheet_base_28": "sys_component_base_04",
     "ui_131": "usr_brand_primary_opacity10"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -123,7 +123,7 @@ declare const colorSet: {
         grey450: string;
         darkgrey450: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -491,10 +491,10 @@ declare const colorSet: {
         sys_cpnt_editor_buttongroup_undefined: string;
         sys_text_grey_02_hinttext: string;
         sys_component_base_48: string;
-        usr_usr_brand_primary_opacity10: string;
+        usr_brand_primary_opacity10: string;
         sys_component_base_49: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -862,7 +862,7 @@ declare const colorSet: {
         sys_cpnt_editor_buttongroup_undefined: string;
         sys_text_grey_02_hinttext: string;
         sys_component_base_48: string;
-        usr_usr_brand_primary_opacity10: string;
+        usr_brand_primary_opacity10: string;
         sys_component_base_49: string;
     };
     readonly UIColor: {

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_light: PaletteColor_light_json_1.default,
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    PaletteColor_light: PaletteColor_light_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js

@@ -133,7 +133,7 @@ var S_BasicButton = styled_components_1.default.button(templateObject_5 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_basicbuttongroup_base_disabled;
 });
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", ";\n"], ["\n  ", "\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
     var tooltipPositionCss = _a.tooltipPositionCss;
     return tooltipPositionCss;
 });

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

@@ -0,0 +1,11 @@
+/// <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

@@ -0,0 +1,56 @@
+"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_CONTENTS_CAROUSEL: {
+            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
+        }
+        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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ISection } from '../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
+export type LayoutsType = {
+    sm: Layout;
+    lg: Layout;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
+export default _default;

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

@@ -0,0 +1,217 @@
+"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("../../DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../components");
+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 FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+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");
+var Composition = (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;
+    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 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 _f = (0, util_1.parseCustomSectionPlacement)({
+        isMobile: isMobile,
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.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;
+        }
+        if (responsiveFontMode) {
+            return size.width * 0.0133;
+        }
+        if (size.width < 1200) {
+            return Math.max(getDefensiveFontSize(device, size.width), 14);
+        }
+        return 16;
+    })();
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
+                    width: '100%',
+                    height: '100%'
+                } }, { 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,
+                        width: '100%',
+                        height: '100%'
+                    } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
+                            width: customSectionStyles.width,
+                            maxWidth: customSectionStyles.maxWidth,
+                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                            fontSize: "".concat(baseFontSize, "px")
+                        } }, { children: (_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 }) }, 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  grid-template-rows: repeat(", ", minmax(", ", 1fr));\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(", ", minmax(", ", 1fr));\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(0, "px"); });
+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(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/CompositionRenderer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IComposition } from '../../DynamicLayout/types';
+declare function CompositionRenderer({ compositions }: {
+    compositions: IComposition[];
+}): JSX.Element;
+export default CompositionRenderer;

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

@@ -0,0 +1,27 @@
+"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");
+require("react");
+var Composition_1 = __importDefault(require("./Composition"));
+function CompositionRenderer(_a) {
+    var compositions = _a.compositions;
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+            width: '100%',
+            height: '100%'
+        } }, { children: compositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); }) })));
+}
+exports.default = CompositionRenderer;

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

@@ -0,0 +1,12 @@
+/// <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;
+};
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex }: Props): JSX.Element;
+export default FlexGridItem;

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

@@ -0,0 +1,75 @@
+"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 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;
+    // 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);
+    // const zIndex =
+    //   device === 'DESKTOP'
+    //     ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
+    //     : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT[
+    //         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'
+    //       ];
+    return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: {
+            zIndex: zIndex,
+            gridArea: gridArea
+            // maxHeight: cb.componentBlockCode !== CB_ALL_CODES.CB_TEXT ? defaultHeight : undefined
+        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
+}
+var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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;

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

@@ -43,6 +43,9 @@ function EditModeSectionMatcher(_a) {
             },
             selectCBInBulk: function (cbIds) {
                 selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectCBInBulk(cbIds);
+            },
+            selectGroup: function (groupId) {
+                selectedSectionRef === null || selectedSectionRef === void 0 ? void 0 : selectedSectionRef.selectGroup(groupId);
             }
         };
     }, [selectedSectionRef]);

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

@@ -18,6 +18,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 };
 };
@@ -50,7 +61,7 @@ var ErrorBoundary = /** @class */ (function (_super) {
     ErrorBoundary.prototype.render = function () {
         var hasError = this.state.hasError;
         if (hasError) {
-            return (0, jsx_runtime_1.jsx)(ErrorWrapper, { children: "Error" });
+            return (0, jsx_runtime_1.jsx)(ErrorWrapper, __assign({ className: "error-boundary" }, { children: "Error" }));
         }
         var children = this.props.children;
         return children;

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

@@ -21,15 +21,17 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
-// import FlexGridCustomSection from '../../../DynamicLayout/sections/CustomSection/FlexGridCustomSection';
+var FlexGridCustomSection_1 = __importDefault(require("../../../DynamicLayout/sections/FlexGridCustomSection"));
 var sections_1 = require("../../sections");
 function SectionMatcher(_a) {
     var props = __rest(_a, []);
     if (props.type === 'CUSTOM') {
-        // return <FlexGridCustomSection {...props} />;
-        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props));
+        return (0, jsx_runtime_1.jsx)(FlexGridCustomSection_1.default, __assign({}, props));
     }
     var schema = props.manifest.schema;
     switch (schema) {

package/dist/src/sub/DynamicLayout/gleStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const S_gleStyles: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isBulkMode?: boolean | undefined;
+}, never>;