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

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -0,0 +1,212 @@
+import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS } from '../components/ComponentBlock/componentBlocks/ContentsCarousel/types';
+import type { CB_STYLE_PROP_CONTENTSLIST_SPECS } from '../components/ComponentBlock/componentBlocks/ContentsList/types';
+import type { CB_STYLE_PROP_SLIDEBANNER_SPECS } from '../components/ComponentBlock/componentBlocks/SlideBanner/types';
+import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
+import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST, CB_CONTENT_PROP_VIDEO } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
+import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
+import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
+import type { CB_LAYOUT_PROP_ARRANGE_SPECS } from './layoutPropParsers/parseLayoutPropArrange';
+import type { CB_LAYOUT_PROP_PADDING_SPECS } from './layoutPropParsers/parseLayoutPropPadding';
+import type { NamedLayoutPropType } from './layoutPropParsers/types';
+import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './stylePropParsers/parseStylePropBgOverlay';
+import type { CB_STYLE_PROP_BORDER_SPECS } from './stylePropParsers/parseStylePropBorder';
+import type { CB_STYLE_PROP_DIVIDER_SPECS } from './stylePropParsers/parseStylePropDivider';
+import type { CB_STYLE_PROP_IMAGE_SPECS } from './stylePropParsers/parseStylePropImage';
+import type { CB_STYLE_PROP_TEXT_OPACITY_SPECS } from './stylePropParsers/parseStylePropOpacity';
+import type { CB_STYLE_PROP_SHADOW_SPECS } from './stylePropParsers/parseStylePropShadow';
+import type { NamedStylePropType } from './stylePropParsers/types';
+import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
+import type { CSSProperties } from 'react';
+export type STRING_PLAIN = string;
+export type ENUM_STRING = string;
+export type NUMBER_INTEGER = number;
+export type STRING_8DIGIT_HEX = string;
+export type CCB_VALUE_TYPE = 'VALUE' | 'DATA';
+export type CB_VALUE_TYPE = 'VALUE' | 'DELEGATEDDATA' | 'QUERYDATA';
+export type COMPOSITION_VALUE_TYPE = 'VALUE' | 'DELEGATEDDATA' | 'QUERYDATA';
+export type SECTION_VALUE_TYPE = 'VALUE' | 'QUERYDATA';
+export type CB_GENERAL_PROPERTIES_TYPE = {
+    CB_PLACEMENT_PROP_PLACEMENT: CB_PLACEMENT_PROP_SPECS;
+    CB_CONTENT_PROP_HOVER: {
+        CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
+    };
+};
+export type CB_PLACEMENT_PROP_SPECS = {
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
+};
+export type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_TEXT: CB_STYLE_PROP_TEXT_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_BTN_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_TEXT: CB_STYLE_PROP_TEXT_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_COLOR: CB_STYLE_PROP_COLOR_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_IMG_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_IMAGE: CB_CONTENT_PROP_IMAGE;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_IMAGE: CB_STYLE_PROP_IMAGE_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_TWITTER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TWITTER: CB_CONTENT_PROP_TWITTER;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_TWITTER: CB_TWITTER_STYLE_PROPS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_EMBED_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CODEBLOCK: CB_CONTENT_PROP_CODEBLOCK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_RICHTEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXTEDIT: {
+        CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR: string;
+    };
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_DIVIDER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_DIVIDER: CB_STYLE_PROP_DIVIDER_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_YOUTUBE_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_CONTENT_PROP_YOUTUBE: CB_CONTENT_PROP_YOUTUBE_TYPE;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_CONTENTSCAROUSEL_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CONTENTSCAROUSEL: CB_CONTENT_PROP_CONTENTSCAROUSEL;
+    CB_STYLE_PROP_CONTENTSCAROUSEL: CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BGOVERLAY: CB_STYLE_PROP_BGOVERLAY_SPECS;
+    CB_STYLE_PROP_BGMEDIA: CB_STYLE_PROP_BGMEDIA_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_EFFECT_PROP_CONTENTSCAROUSEL: CB_EFFECT_PROP_CONTENTSCAROUSEL;
+};
+export type CB_EFFECT_PROP_CONTENTSCAROUSEL = {
+    CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE: 'SLIDE' | 'CUBE' | 'FADE' | 'CARD' | 'COVERFLOW' | 'FLIP';
+};
+export type CB_SLIDEBANNER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_SLIDEBANNER: CB_CONTENT_PROP_SLIDEBANNER;
+    CB_STYLE_PROP_SLIDEBANNER: CB_STYLE_PROP_SLIDEBANNER_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BGOVERLAY: CB_STYLE_PROP_BGOVERLAY_SPECS;
+    CB_STYLE_PROP_BGMEDIA: CB_STYLE_PROP_BGMEDIA_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_LIST_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CONTENTSLIST: CB_CONTENT_PROP_CONTENTSLIST;
+    CB_STYLE_PROP_CONTENTSLIST: CB_STYLE_PROP_CONTENTSLIST_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BGOVERLAY: CB_STYLE_PROP_BGOVERLAY_SPECS;
+    CB_STYLE_PROP_BGMEDIA: CB_STYLE_PROP_BGMEDIA_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type CB_VIDEOPLAYER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_CONTENT_PROP_VIDEO: CB_CONTENT_PROP_VIDEO;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export type StyleType = {
+    style: CSSProperties;
+};
+export type StyleAndHoverStyle = StyleType & {
+    hoverStyle: CSSProperties;
+};
+export type OverlayStyle = {
+    overlayStyle: CSSProperties;
+};
+export type Device = 'DESKTOP' | 'MOBILE';
+export type DefaultBrightTheme = 'LIGHT' | 'DARK';
+export type ParserResult = {
+    overlayStyle: any;
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
+    layout: CSSProperties;
+    effect: CSSProperties;
+    content: Record<string, unknown>;
+};
+export type JsonPropertiesParserResult = Omit<ParserResult, 'hoverStyle'> & OverlayStyle;
+export type NamedPropAllTypes = NamedStylePropType | NamedLayoutPropType;
+export type IndexForIntersection = {
+    index: number;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ISection } 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<ISection & React.RefAttributes<unknown>>>;
+export default _default;

package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js

@@ -0,0 +1,213 @@
+"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 FlexGridItem_1 = __importDefault(require("./CustomSection/FlexGridItem"));
+var useResizableObserver_1 = require("./CustomSection/hooks/useResizableObserver");
+var util_1 = require("./CustomSection/util");
+var parseSectionPadding_1 = __importDefault(require("./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");
+var FlexGridCustomSection = (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;
+        }
+        // NOTE: Desktop
+        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)(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.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(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\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  padding: 10px 10px;\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_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(FlexGridCustomSection);
+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/sections/FullscreenIframeSection/templates/TemplateA/desktop/D_TemplateA.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("@sub/DynamicLayout");
+var DynamicLayout_1 = require("../../../../../../DynamicLayout");
 var Section_1 = require("../../../../../components/Section");
 function TemplateA() {
     var sectionActionHandler = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).sectionActionHandler;

package/dist/src/sub/DynamicLayout/sections/FullscreenIframeSection/templates/TemplateA/mobile/M_TemplateA.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var DynamicLayout_1 = require("@sub/DynamicLayout");
+var DynamicLayout_1 = require("../../../../../../DynamicLayout");
 var Section_1 = require("../../../../../components/Section");
 function TemplateA() {
     var sectionActionHandler = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).sectionActionHandler;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/MembershipSection.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import type { ISection } from '@sub/DynamicLayout/types';
+import type { ISection } from '../../../../DynamicLayout/types';
 declare function EditTypeMembershipSection({ ...props }: ISection): JSX.Element;
 export default EditTypeMembershipSection;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/MembershipSection.js

@@ -31,7 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var components_1 = require("@sub/DynamicLayout/components");
+var components_1 = require("../../../../DynamicLayout/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var templates_1 = require("./templates");
 function EditTypeMembershipSection(_a) {

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/TemplateA.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Section_1 = require("@sub/DynamicLayout/components/Section");
-var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var Section_1 = require("../../../../../../DynamicLayout/components/Section");
+var dynamicLayoutContext_1 = require("../../../../../../DynamicLayout/dynamicLayoutContext");
 var desktop_1 = require("./desktop");
 var mobile_1 = require("./mobile");
 function TemplateA(_a) {

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/D_TemplateA.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IMembershipDisplay } from '@sub/DynamicLayout/types';
+import type { IMembershipDisplay } from '../../../../../../../DynamicLayout/types';
 type Props = {
     membershipDisplay: IMembershipDisplay;
     isWideView: boolean;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/EmptyMembershipSheet.js

@@ -14,10 +14,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var panels_1 = require("@desktop/panels");
-var Section_1 = require("@sub/DynamicLayout/components/Section");
-var components_1 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 function EmptyMembershipSheet() {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var section = (0, react_1.useContext)(Section_1.sectionContext);

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipBenefitInfo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IMembershipBenefitInfo } from '@sub/DynamicLayout/types';
+import type { IMembershipBenefitInfo } from '../../../../../../../../DynamicLayout/types';
 type Props = {
     membershipBenefitInfo: IMembershipBenefitInfo;
     itemToneTextLabelColor: string;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipBenefitInfo.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("@sub/DynamicLayout/components");
-var components_2 = require("@sub/DynamicLayout/sections/MembershipSection/components");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 function MembershipBenefitInfo(_a) {
     var membershipBenefitInfo = _a.membershipBenefitInfo, itemToneTextLabelColor = _a.itemToneTextLabelColor;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }), membershipBenefitInfo.benefitAlpha && ((0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitAlpha, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" })), membershipBenefitInfo.benefitBravo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitBravo, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" })] })), membershipBenefitInfo.benefitCharlie && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitCharlie, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" })] })), membershipBenefitInfo.benefitDelta && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitDelta, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" })] })), membershipBenefitInfo.benefitEcho && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Description, { text: membershipBenefitInfo.benefitEcho, styleTheme: "subTitleRegular", color: itemToneTextLabelColor, textAlign: "left", wordBreak: "break_all", bulletPointMode: "use" })] }))] }));

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IConnectedSubscriptionProducts, ISectionStyles } from '@sub/DynamicLayout/types';
+import type { IConnectedSubscriptionProducts, ISectionStyles } from '../../../../../../../../DynamicLayout/types';
 type Props = {
     connectedSubscriptionProducts: IConnectedSubscriptionProducts;
     sectionStyles: ISectionStyles;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipPlanSheet.js

@@ -21,11 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
-var panels_1 = require("@desktop/panels");
-var components_1 = require("@hybrid/components");
-var components_2 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
-var formatCurrency_1 = __importDefault(require("@sub/DynamicLayout/utils/formatCurrency"));
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../../hybrid/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
+var formatCurrency_1 = __importDefault(require("../../../../../../../../DynamicLayout/utils/formatCurrency"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function MembershipPlanSheet(_a) {
     var connectedSubscriptionProducts = _a.connectedSubscriptionProducts, sectionStyles = _a.sectionStyles;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IConnectedMembership } from '@sub/DynamicLayout/types';
+import type { IConnectedMembership } from '../../../../../../../../DynamicLayout/types';
 type Props = {
     connectedMemberships: IConnectedMembership[];
     isWideView: boolean;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/MembershipSheet.js

@@ -43,10 +43,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var panels_1 = require("@desktop/panels");
-var Section_1 = require("@sub/DynamicLayout/components/Section");
-var components_1 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importStar(require("styled-components"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IConnectedMembership, TypeOfItemToneType } from '@sub/DynamicLayout/types';
+import type { IConnectedMembership, TypeOfItemToneType } from '../../../../../../../../DynamicLayout/types';
 type Props = {
     connectedMemberships: IConnectedMembership[];
     itemHighlightingColorInHex: string;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/NarrowMembershipListView.js

@@ -40,9 +40,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var panels_1 = require("@desktop/panels");
-var components_1 = require("@sub/DynamicLayout/sections/MembershipSection/components");
-var constants_1 = require("@sub/DynamicLayout/sections/MembershipSection/constants");
+var panels_1 = require("../../../../../../../../../desktop/panels");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importStar(require("styled-components"));
 function NarrowMembershipListView(_a) {
     var connectedMemberships = _a.connectedMemberships, itemHighlightingColorInHex = _a.itemHighlightingColorInHex, itemToneType = _a.itemToneType, currentIndex = _a.currentIndex, handleMembershipClick = _a.handleMembershipClick;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/SectionContents.js

@@ -20,8 +20,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Section_1 = require("@sub/DynamicLayout/components/Section");
-var components_1 = require("@sub/DynamicLayout/sections/MembershipSection/components");
+var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
+var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 function SectionContents() {
     var section = (0, react_1.useContext)(Section_1.sectionContext);

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateA/desktop/components/UnavailableMembershipPlanSheet.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ISectionStyles } from '@sub/DynamicLayout/types';
+import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types';
 type Props = {
     sectionStyles: ISectionStyles;
 };