pds-dev-kit-web-test 2.5.260 → 2.5.262

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

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable no-console */
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -11,14 +10,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePlacement = void 0;
-var types_1 = require("../types");
-function parsePlacement(components, zOrders) {
-    if (!zOrders) {
-        console.error('Z-ORDER NOT FOUND');
-    }
+/* eslint-disable @typescript-eslint/no-unused-vars */
+require("../types");
+function parsePlacement(components) {
     return components.reduce(function (acc, cur) {
         var id = cur.id, jsonProperties = cur.jsonProperties, componentBlockCode = cur.componentBlockCode;
-        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id, componentBlockCode, zOrders), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
+        var _a = parsePropPlacement(jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, id, componentBlockCode), mobileLayout = _a.mobileLayout, desktopLayout = _a.desktopLayout;
         return {
             sm: __spreadArray(__spreadArray([], acc.sm, true), [mobileLayout], false),
             lg: __spreadArray(__spreadArray([], acc.lg, true), [desktopLayout], false)
@@ -26,15 +23,15 @@ function parsePlacement(components, zOrders) {
     }, { sm: [], lg: [] });
 }
 exports.parsePlacement = parsePlacement;
-function parsePropPlacement(props, id, cbCode, zOrders) {
+function parsePropPlacement(props, id, cbCode) {
     var desktopLayout = {
         i: id.toString(),
         x: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX,
         y: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY,
         w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
         h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
-        z: zOrders.desktop[id],
-        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
+        z: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX + 500
+        // autoResize: cbCode === CB_ALL_CODES.CB_TEXT
     };
     var mobileLayout = {
         i: id.toString(),
@@ -42,8 +39,8 @@ function parsePropPlacement(props, id, cbCode, zOrders) {
         y: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'],
         w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
         h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
-        z: zOrders.mobile[id],
-        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
+        z: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'] + 500
+        // autoResize: cbCode === CB_ALL_CODES.CB_TEXT
     };
     return {
         mobileLayout: mobileLayout,

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

@@ -1,4 +1,4 @@
-import type { CB_STYLE_PROP_TEXT_SPECS } from '../../components/ComponentBlock/componentBlocks/types';
+import type { CB_STYLE_PROP_TEXT_SPECS } from '../../components/ComponentBlock/componentBlocks/Text/types';
 import type { Device, StyleAndHoverStyle } from '../types';
 import type { CB_STYLE_PROP_KEYS } from './types';
 export type NAMED_CB_STYLE_TEXT_PROPS = {

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

@@ -14,7 +14,7 @@ export declare enum CB_STYLE_PROP_KEYS {
     CB_STYLE_PROP_SHADOW = "CB_STYLE_PROP_SHADOW",
     CB_STYLE_PROP_BORDER = "CB_STYLE_PROP_BORDER",
     CB_STYLE_PROP_IMAGE = "CB_STYLE_PROP_IMAGE",
-    CB_STYLE_PROP_COLOR = "CB_STYLE_PROP_COLOR",
+    CB_STYLE_PROP_BTNCOLOR = "CB_STYLE_PROP_BTNCOLOR",
     CB_STYLE_PROP_BGCOLOR = "CB_STYLE_PROP_BGCOLOR",
     CB_STYLE_PROP_BGMEDIA = "CB_STYLE_PROP_BGMEDIA",
     CB_STYLE_PROP_BGOVERLAY = "CB_STYLE_PROP_BGOVERLAY"

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

@@ -9,7 +9,7 @@ var CB_STYLE_PROP_KEYS;
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_SHADOW"] = "CB_STYLE_PROP_SHADOW";
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BORDER"] = "CB_STYLE_PROP_BORDER";
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_IMAGE"] = "CB_STYLE_PROP_IMAGE";
-    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_COLOR"] = "CB_STYLE_PROP_COLOR";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BTNCOLOR"] = "CB_STYLE_PROP_BTNCOLOR";
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGCOLOR"] = "CB_STYLE_PROP_BGCOLOR";
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGMEDIA"] = "CB_STYLE_PROP_BGMEDIA";
     CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGOVERLAY"] = "CB_STYLE_PROP_BGOVERLAY";

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

@@ -1,5 +1,7 @@
+import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { CB_STYLE_PROP_TEXT_SPECS } from '../components/ComponentBlock/componentBlocks/Text/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { 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 } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } 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';
@@ -51,11 +53,11 @@ 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_BTNTEXT: CB_BTNTEXT_STYLE_PROPS;
     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_STYLE_PROP_BTNCOLOR: CB_STYLE_PROP_BTNCOLOR_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;

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

@@ -1,11 +1,11 @@
 import type { TypeOfSectionAction } from './sectionActionTypes';
+import type { CustomSectionImperativeHandleRef } from './sections/CustomSection/CustomSection';
 import type { ComponentBlock } from './sections/CustomSection/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './sections/CustomSection/util/contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim';
 import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
-import type { Block, ZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
 import type { Ref } from 'react';
 export { TypeOfSectionAction };
 export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
@@ -60,7 +60,6 @@ export interface ISection {
     componentBlocks?: ComponentBlock[];
     jsonProperties?: ISectionJsonProperties;
 }
-export type SectionPedigree = Block;
 export interface SubscriptionProductInList {
     id: number;
     type: SubscriptionProductType;
@@ -213,11 +212,6 @@ export interface IItemDescription extends IDescription {
     color?: string;
 }
 export type CustomSectionShortcutKeysType = 'BULK_SELECT' | 'COLLISION_SELECT' | 'SELECT_ALL' | 'MANUAL_COLLISION_SELECT' | 'MANUAL_BULK_BREAK' | null;
-export type CustomSectionImperativeHandleRef = {
-    selectCB: (cbId: string) => void;
-    selectCBInBulk: (cbIds: string[]) => void;
-    selectGroup: (groupBlockId: string) => void;
-};
 export type DynamicLayoutProps = {
     device: 'DESKTOP' | 'MOBILE';
     /** @default 'NORMAL */
@@ -306,8 +300,6 @@ export type IMembershipDisplay = {
     connectedMemberships: IConnectedMembership[];
 };
 export type ISectionJsonProperties = {
-    zOrders?: ZOrder;
-    pedigree?: SectionPedigree;
     data: {
         CB_CONTENT_PROP_SECTION: {
             CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE: boolean;
@@ -324,8 +316,6 @@ export type ISectionJsonProperties = {
             'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | null | undefined;
             CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
             'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | null | undefined;
-            CB_PLACEMENT_PROP_SECTION_SPEC_COLS?: number;
-            'CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE': number | null | undefined;
         };
         CB_STYLE_PROP_BGCOLOR?: CB_STYLE_PROP_BGCOLOR_SPECS;
         CB_STYLE_PROP_BGMEDIA?: CB_STYLE_PROP_BGMEDIA_SPECS;
@@ -374,37 +364,3 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | null | undefined;
 };
-export interface IComposition {
-    id: number;
-    administrativeTitle?: string;
-    display: boolean;
-    order: number;
-    manifest: {
-        schema: TypeOfSectionManifestSchema;
-        availableProperties: Array<KeyOfSectionProperties>;
-        availableStyles: Array<KeyOfSectionStyles>;
-        availableTemplates: Array<TypeofSectionTemplate>;
-    } | Record<string, never>;
-    template: TypeofSectionTemplate;
-    properties: ISectionProperties;
-    styles: ISectionStyles;
-    dynamicLayoutSectionItems: Array<IItem> | null;
-    insertedAt: string;
-    updatedAt: string;
-    type: TypeOfSectionType;
-    program?: 'MEMBERSHIP_DISPLAY';
-    programData?: {
-        mdid: string;
-        preview: {
-            availableResources: ['REAL.MEMBERSHIP_DISPLAY'];
-            resources: {
-                mock: Record<string, never>;
-                real: {
-                    membershipDisplay: IMembershipDisplay;
-                };
-            };
-        };
-    };
-    componentBlocks?: ComponentBlock[];
-    jsonProperties?: ISectionJsonProperties;
-}

package/dist/src/sub/SandollFontKit/utils/appendSandollTagToHead.d.ts

@@ -1 +1 @@
-export default function appendSandollTagToHead(tagString: string): void;
+export default function appendSandollTagsToHead(tagString: string): void;

package/dist/src/sub/SandollFontKit/utils/appendSandollTagToHead.js

@@ -1,31 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable no-console */
-function appendSandollTagToHead(tagString) {
+function appendSandollTagsToHead(tagString) {
     try {
         var tempDiv = document.createElement('div');
         tempDiv.innerHTML = tagString.trim();
-        var sandollFontCssTag = tempDiv.firstChild;
-        if (!sandollFontCssTag) {
-            console.error('SandollFont CSS Tag Not Found');
-            return;
-        }
-        sandollFontCssTag.setAttribute('id', 'sandoll-font-link');
-        var tagName = sandollFontCssTag.tagName.toLowerCase();
-        var href = sandollFontCssTag.getAttribute('href');
-        if (href) {
-            var prevSandollLinkTag = document.head.querySelector("".concat(tagName, "#sandoll-font-link"));
-            if (prevSandollLinkTag) {
-                if (prevSandollLinkTag.getAttribute('href') === href) {
+        Array.from(tempDiv.children).forEach(function (element, index) {
+            element.setAttribute('id', "sandoll-font-link-".concat(index));
+            var tagName = element.tagName.toLowerCase();
+            var href = element.getAttribute('href');
+            if (href) {
+                var existingElement = document.head.querySelector("".concat(tagName, "[href=\"").concat(href, "\"]"));
+                if (existingElement) {
                     return;
                 }
-                prevSandollLinkTag.remove();
             }
-            document.head.appendChild(sandollFontCssTag);
-        }
+            document.head.appendChild(element);
+        });
     }
     catch (e) {
         console.error(e);
     }
 }
-exports.default = appendSandollTagToHead;
+exports.default = appendSandollTagsToHead;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.260",
+  "version": "2.5.262",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,8 +22,8 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.99",
-    "publ-echo-test": "^0.0.199",
+    "publ-echo": "^0.0.104",
+    "publ-echo-test": "^0.0.200",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,7 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.127]
+## [v2.2.134]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1272]  ic_duplicate 아이콘 추가
-* [PDS-1274] MainButton의 로딩 개선 건
+* [PDS-1279] 모바일 MainButton 계열 컴포넌트에 colorTheme 수정 건

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,56 +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_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

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

@@ -1,217 +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("../../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

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

@@ -1,27 +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");
-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

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