pds-dev-kit-web-test 2.7.229 → 2.7.231

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

@@ -406,9 +406,9 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "px"),
         maxHeight: "".concat(maxHeight, "px"),
-        width: "".concat(canvasWidth, "px"),
+        // width: `${canvasWidth}px`,
         maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
-        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
+        minWidth: "".concat(minWidth, "px")
     };
     var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
     var onClickCB = function (id) {
@@ -1055,7 +1055,8 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
     }
     var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
-                device: device
+                device: device,
+                mode: mode
                 // mode,
                 // isPreview,
                 // navigationHandler,
@@ -1078,7 +1079,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
                                 } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ sectionId: props.compositionData.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
                                         'selected-grid-layout': editingSectionId === props.compositionData.id
                                     }), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [10, 10], style: {
-                                        width: customSectionStyles.width,
+                                        minWidth: customSectionStyles.minWidth,
                                         maxWidth: customSectionStyles.maxWidth,
                                         // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                                         // fontSize: `${baseFontSize}px`
@@ -1115,7 +1116,7 @@ var CompositionEditor = (0, react_1.forwardRef)(function CompositionEditorCanvas
                                                     e.stopPropagation();
                                                     e.preventDefault();
                                                     onContextMenuCB(matchedCB.id, e);
-                                                } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) })) }), each.i));
+                                                } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) }) })) }), each.i));
                                     }) })) })) })) }) })) })) })) }));
 });
 function isLayoutPlacementSame(current, prev) {

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

@@ -50,30 +50,33 @@ var styled_components_1 = __importDefault(require("styled-components"));
 require("../components");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-require("../sections/CustomSection/util");
+var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
 var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
 require("../sections/CustomSection/util/stylePropParsers/parseStylePropBorder");
 require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow");
 require("../sections/CustomSection/util/stylePropParsers/types");
+var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
 var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
-var FlexGridItemForCCB_1 = __importDefault(require("./FlexGridItemForCCB"));
+require("./FlexGridItemForCCB");
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d, _e;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
+    var _a, _b, _c, _d;
+    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler, queryData = _e.queryData;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
+    var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+    var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _g.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _g.CB_STYLE_PROP_BORDER, zOrders = _f.zOrders;
+    var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _h.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _h.CB_STYLE_PROP_BORDER, zOrders = _g.zOrders;
     var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
     var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
     var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
-    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
+    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : rowsDesktop;
     var rows = isMobile ? rowsMobile : rowsDesktop;
     var cols = isMobile ? colsMobile : colsDesktop;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
+    var _h = (0, react_1.useState)(null), selectedCB = _h[0], setSelectedCB = _h[1];
     var gleRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
@@ -122,10 +125,10 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _k = (0, parseCompositionPlacement_1.default)({
+    var _j = (0, parseCompositionPlacement_1.default)({
         isMobile: isMobile,
         compositionProps: CB_PLACEMENT_PROP_COMPOSITION
-    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
+    }), minHeight = _j.minHeight, maxHeight = _j.maxHeight, maxWidth = _j.maxWidth, minWidth = _j.minWidth;
     var canvasWidth = 50 * cols;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "px"),
@@ -223,10 +226,10 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 maxWidth: customSectionStyles.maxWidth
                                 // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                                 // fontSize: `${baseFontSize}px`
-                            } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
-                            }) })) })) })) })) })) }));
+                            } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: [], 
+                                // pinnedGBs={pinnedGBs}
+                                // onToggleGBPinned={onToggleGBPinned}
+                                isEditMode: false }, child.blockId)); }) })) })) })) })) })) }));
 });
 var MOCK_BORDER = {
     CB_STYLE_PROP_BORDER_SPEC_COLOR: '#000000FF',
@@ -285,7 +288,7 @@ var MOCK_SHADOW = {
     'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
     'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
 };
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
 function getDefensiveFontSize(device, width) {

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

@@ -1,14 +1,17 @@
 /// <reference types="react" />
 import type { ComponentBlock } from '../sections/CustomSection/types';
 import type { Device } from '../sections/CustomSection/util/types';
+import type { Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
 type Props = {
     cb: ComponentBlock;
     index: number;
     device: Device;
     rowHeight: number;
     zIndex: number;
-    showPinned?: boolean;
+    maxCols: number;
+    block: Block;
+    isParentGroupPinned: boolean;
     style?: React.CSSProperties;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, style, maxCols, block, isParentGroupPinned }: Props): JSX.Element;
 export default FlexGridItem;

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

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

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditorForComposition.d.ts

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

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

@@ -0,0 +1,250 @@
+"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 */
+require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
+require("publ-echo/dist/lib/GridItem/OutsideClickHandler");
+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"));
+require("../components");
+var CompositionBackground_1 = __importDefault(require("../CompositionRenderer/CompositionBackground"));
+require("../CompositionRenderer/FlexGridItem");
+var gleStyles_1 = require("../gleStyles");
+var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
+var util_1 = require("../sections/CustomSection/util");
+var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
+var parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
+var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
+// const GRID_CELL_MIN = 24;
+// const DESKTOP_GRID_COLS = 24;
+// const MOBILE_GRID_COLS = 8;
+// const GLE_MIN_WIDTH_DESKTOP_PX = `${GRID_CELL_MIN * DESKTOP_GRID_COLS}px`;
+// const GLE_MIN_WIDTH_MOBILE_PX = `${GRID_CELL_MIN * MOBILE_GRID_COLS}px`;
+// type Props = ISection & ContextProps;
+// type ContextProps = {
+//   device: Device;
+//   queryData: QueryData;
+// };
+var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, ref) {
+    var _a, _b, _c, _d;
+    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, sectionActionHandler = _e.sectionActionHandler, queryData = _e.queryData;
+    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
+    var _f = jsonProperties, _g = _f.data, CB_PLACEMENT_PROP_COMPOSITION = _g.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _g.CB_LAYOUT_PROP_PADDING, zOrders = _f.zOrders;
+    var isMobile = device === 'MOBILE';
+    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
+    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
+    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
+    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : rowsDesktop;
+    var rows = isMobile ? rowsMobile : rowsDesktop;
+    var cols = isMobile ? colsMobile : colsDesktop;
+    var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
+    var containerRef = (0, react_1.useRef)(null);
+    var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
+    var _h = (0, react_1.useState)(null), selectedCB = _h[0], setSelectedCB = _h[1];
+    var gleRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)([]), selectedRows = _j[0], setSelectedRows = _j[1]; // 빈 배열로 초기화
+    var isEditMode = mode === 'EDIT';
+    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    // const [layouts] = useState<LayoutsType>(() => {
+    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
+    //   return {
+    //     lg,
+    //     sm
+    //   };
+    // });
+    // useEffect(() => {
+    //   if (editingSectionId !== props.id) {
+    //     setSelectedCB(null);
+    //     // breakGroupCB();
+    //   }
+    // }, [editingSectionId]);
+    var _k = (0, parseCompositionPlacement_1.default)({
+        isMobile: isMobile,
+        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
+    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
+    var canvasWidth = 50 * cols;
+    var customSectionStyles = {
+        minHeight: "".concat(minHeight, "px"),
+        maxHeight: "".concat(maxHeight, "px"),
+        width: "100%",
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
+        // minWidth: `${Math.max(canvasWidth, minWidth ?? 0)}px`
+        minWidth: "".concat(minWidth, "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);
+    // const sectionRow =
+    //   CB_PLACEMENT_PROP_COMPOSITION[
+    //     device === 'DESKTOP'
+    //       ? 'CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS'
+    //       : 'CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE'
+    //   ];
+    var rowHeight = (function () {
+        if (!size.width) {
+            return 50;
+        }
+        if (device === 'MOBILE') {
+            var cellWidth_1 = size.width / cols;
+            return cellWidth_1 * 0.56;
+        }
+        var cellWidth = size.width / cols;
+        return cellWidth * 0.56;
+    })();
+    var baseFontSize = (function () {
+        if (!size.width) {
+            return 16;
+        }
+        // NOTE: 확인 필요
+        var responsiveFontMode = true;
+        if (device === 'MOBILE') {
+            if (responsiveFontMode) {
+                return size.width * 0.0421;
+            }
+            if (size.width < 327) {
+                return Math.max(getDefensiveFontSize(device, size.width), 14);
+            }
+            return 16;
+        }
+        // NOTE: Desktop
+        if (responsiveFontMode) {
+            return size.width * 0.0133;
+        }
+        if (size.width < 1200) {
+            return Math.max(getDefensiveFontSize(device, size.width), 16);
+        }
+        return 16;
+    })();
+    var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+    // const [editingGroupBlock, setEditingGroupBlock] = useState<string>('ROOT');
+    // const editableCBIds = findDirectChildrenCbIds(pedigree, 'ROOT');
+    // const groupblocks = findGroupBlocks(pedigree, editingGroupBlock) ?? [];
+    // const handleGroupBlockDoubleClick = (blockId: string) => {
+    //   setEditingGroupBlock(blockId);
+    // };
+    // const [pinnedGBs, setPinnedGBs] = useState<string[]>([]);
+    // const pinnedChildrens = pinnedGBs.map((gbId) => findAllChildrenCbIds(pedigree, gbId)).flat();
+    // const currentDepthCbs = props.componentBlocks?.filter((cb) => {
+    //   return editableCBIds.includes(cb.id);
+    // });
+    // const onToggleGBPinned = (gbId: string) => {
+    //   setPinnedGBs((prev) => {
+    //     if (prev.includes(gbId)) {
+    //       return prev.filter((id) => id !== gbId);
+    //     }
+    //     return [...prev, gbId];
+    //   });
+    // };
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                device: device,
+                mode: mode,
+                queryData: queryData
+            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                            minHeight: customSectionStyles.minHeight,
+                            paddingTop: padding.top,
+                            paddingBottom: padding.bottom,
+                            paddingRight: padding.right,
+                            paddingLeft: padding.left
+                        } }, { children: (0, jsx_runtime_1.jsxs)(GridContainer, __assign({ ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, selectedRows: selectedRows, style: {
+                                width: customSectionStyles.width,
+                                maxWidth: customSectionStyles.maxWidth,
+                                minWidth: customSectionStyles.minWidth
+                            } }, { children: [Array.from({ length: rows }).map(function (_, rIdx) {
+                                    // selectedRows 배열에 현재 행의 인덱스가 포함되어 있는지 확인합니다.
+                                    return ((0, jsx_runtime_1.jsx)("div", __assign({ 
+                                        // className={`bg-grid-row ${isSelected ? 'selected' : ''}`}
+                                        style: {
+                                            gridRow: "".concat(rIdx + 1),
+                                            gridColumn: "1 / -1",
+                                            display: 'contents'
+                                        } }, { children: Array.from({ length: cols }).map(function (_, cIdx) { return ((0, jsx_runtime_1.jsx)("div", { className: "bg-grid-item", style: {
+                                                gridArea: "".concat(rIdx + 1, " / ").concat(cIdx + 1),
+                                                position: 'relative',
+                                                backgroundColor: '#0000001a',
+                                                border: '1px solid #ffffff33'
+                                            }, "data-row": rIdx + 1, "data-col": cIdx + 1 }, "bg-grid-item-".concat(rIdx + 1, "-").concat(cIdx + 1))); }) }), "bg-grid-row-".concat(rIdx + 1)));
+                                }), pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: selectedRows, 
+                                    // pinnedGBs={device === 'DESKTOP' ? child?.isPinnedDesktop : child.isPinnedMobile}
+                                    // onToggleGBPinned={onToggleGBPinned}
+                                    isEditMode: true }, child.blockId)); })] })) })) })) }) })) }));
+});
+var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
+function getGridAreaFromGroup(position) {
+    var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
+    var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
+    var rowStart = clamp(y + 1, 1, Infinity);
+    var rowEnd = clamp(rows + rowStart, rowStart + 1, Infinity);
+    var colEnd = clamp(colStart + cols, colStart + 1, 25);
+    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
+}
+function clamp(num, min, max) {
+    return Math.max(Math.min(num, max), min);
+}
+var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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: ", ";\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
+    return Array.from({ length: props.sectionRow })
+        .map(function (_) { return "minmax(".concat(props.rowHeight, "px, auto)"); })
+        .join(' ');
+});
+var S_SectionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.default = react_1.default.memo(GridAutoRowEditor);
+function getDefensiveFontSize(device, width) {
+    if (device === 'MOBILE') {
+        return width * (0.0000868 * width + 0.0202);
+    }
+    return width * (0.0000246 * width - 0.01618);
+}
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/{GridAutoRowEditor.js → GridAutoRowEditorForDL.js}

@@ -326,13 +326,9 @@ function getGridAreaFromGroup(position) {
 function clamp(num, min, max) {
     return Math.max(Math.min(num, max), min);
 }
-var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
-    // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
+var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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: ", ";\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
     return Array.from({ length: props.sectionRow })
-        .map(function (_) {
-        // props로 받은 selectedRows 배열에 현재 행(index)이 포함되어 있는지 확인합니다.
-        return "minmax(".concat(props.rowHeight, "px, auto)");
-    })
+        .map(function (_) { return "minmax(".concat(props.rowHeight, "px, auto)"); })
         .join(' ');
 });
 var S_SectionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.d.ts

@@ -3,12 +3,12 @@ import type { PDSIconType, UiColors } from '../../common';
 export type IconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
-    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall' | number;
     baseColorKey?: UiColors;
     overrideBaseColorHex?: string;
     overrideBaseColorHexHover?: string;
     borderColorKey?: UiColors;
-    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconSize?: 12 | 16 | 20 | 24 | 40 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: PDSIconType;
     iconColorKey?: UiColors;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/desktop/IconButton/IconButton.js

@@ -171,14 +171,17 @@ var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templat
         }[fillType];
 }, function (_a) {
     var baseSize = _a.baseSize;
-    return baseSize &&
-        {
-            xxlarge: xxlarge,
-            large: large,
-            medium: medium,
-            small: small,
-            xsmall: xsmall
-        }[baseSize];
+    return typeof baseSize === 'number'
+        ? "height: ".concat(baseSize, "px; width: ").concat(baseSize, "px;")
+        : typeof baseSize === 'string'
+            ? {
+                xxlarge: xxlarge,
+                large: large,
+                medium: medium,
+                small: small,
+                xsmall: xsmall
+            }[baseSize]
+            : null;
 });
 var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 exports.default = IconButton;

package/dist/src/sub/DynamicLayout/components/pdsOriginal/hybrid/Icon/Icon.d.ts

@@ -2,7 +2,7 @@
 import type { PDSIconType, UiColors } from '../../common';
 export type IconProps = {
     iconName?: PDSIconType;
-    size?: 12 | 16 | 20 | 24 | 32 | 48 | 56 | 64 | 72;
+    size?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
     colorKey?: UiColors;
     overrideColorHex?: string;
     fillType?: 'line' | 'fill';

package/dist/src/sub/DynamicLayout/mock.json

@@ -6033,13 +6033,15 @@
                     },
                     "CB_CONTENT_PROP_TEXT": {
                         "CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA": "NONE",
-                        "CB_CONTENT_PROP_TEXT_SPEC_FORMAT": "NONE",
-                        "CB_CONTENT_PROP_TEXT_SPEC_PREFIX": null,
-                        "CB_CONTENT_PROP_TEXT_SPEC_SUFFIX": null,
                         "CB_CONTENT_PROP_TEXT_SPEC_TEXT": "New Text",
                         "CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE": null,
                         "CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE": "VALUE"
                     },
+                    "CB_CONTENT_PROP_TEXTOPTION": {
+                        "CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT": "NONE",
+                        "CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX": null,
+                        "CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX": null
+                    },
                     "CB_CONTENT_PROP_VISIBILITY": {
                         "CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP": true,
                         "CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB": true