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

package/dist/src/sub/DynamicLayout/sections/{FlexGridCustomSection.d.ts → CustomSection/FlexGridCustomSection.d.ts}

@@ -1,9 +1,13 @@
 import React from 'react';
-import type { ISection } from '../types';
+import type { ISection } from '../../types';
 import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
+export type CustomSectionImperativeHandleRef = {
+    selectCB: (cbId: number | 'group') => void;
+    selectCBInBulk: (cbIds: string[]) => void;
+};
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
 export default _default;

package/dist/src/sub/DynamicLayout/sections/{FlexGridCustomSection.js → CustomSection/FlexGridCustomSection.js}

@@ -42,45 +42,89 @@ var __importDefault = (this && this.__importDefault) || function (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 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 components_1 = require("../../components");
+var CustomSection_1 = require("./CustomSection");
+var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var useGroupDrag_1 = require("./hooks/useGroupDrag");
+var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
+var utils_1 = require("./hooks/useGroupDrag/utils");
+var useResizableObserver_1 = require("./hooks/useResizableObserver");
+var util_1 = require("./util");
+var parseSectionPadding_1 = __importDefault(require("./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 CustomSection = (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 _c = jsonProperties.data, CB_PLACEMENT_PROP_SECTION = _c.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _c.CB_LAYOUT_PROP_PADDING;
     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 _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[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
-    //   };
-    // });
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    var _e = (0, react_1.useState)(function () {
+        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
+        return {
+            lg: lg,
+            sm: sm
+        };
+    }), layouts = _e[0], setLayouts = _e[1];
+    var _f = (0, useGroupDrag_1.useGroupDrag)({
+        setLayouts: setLayouts,
+        device: device,
+        sectionActionHandler: sectionActionHandler
+    }), breakGroupCB = _f.breakGroupCB, makeAllInOneGroup = _f.makeAllInOneGroup, makeCollisionGroup = _f.makeCollisionGroup;
+    (0, react_1.useImperativeHandle)(ref, function () {
+        return {
+            selectCB: function (cbId) {
+                setSelectedCB(cbId);
+            },
+            selectCBInBulk: function (cbIds) {
+                var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
+                setLayouts(function (prev) {
+                    var _a;
+                    var filteredLayout = (0, useGroupDrag_2.filterItemsById)(parsedLayouts[layoutByDevice], cbIds);
+                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(parsedLayouts[layoutByDevice].filter(function (each) { return cbIds.includes(each.i); }));
+                    filteredLayout.push(newGroupLayout);
+                    return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+                });
+            }
+        };
+    }, [componentBlocks]);
+    (0, react_1.useLayoutEffect)(function () {
+        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []);
+        setLayouts(function (prev) {
+            var _a;
+            var _b;
+            var group = (0, useGroupDrag_2.getGroupCB)(prev[layoutByDevice]);
+            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
+            var filteredLayout = (0, useGroupDrag_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
+            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
+                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
+                    return groupedCBIds.includes(each.i);
+                });
+                if (groupCbs.length > 0) {
+                    var newGroupLayout = (0, utils_1.getGroupForMultiple)(groupCbs);
+                    filteredLayout.push(newGroupLayout);
+                }
+            }
+            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+        });
+    }, [componentBlocks, useGroupDrag_2.getGroupCB, layoutByDevice]);
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
-            // breakGroupCB();
+            breakGroupCB();
         }
     }, [editingSectionId]);
     // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
@@ -96,38 +140,38 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
                 setSelectedCB(componentBlocks[0].id);
                 return;
             }
-            // makeAllInOneGroup();
+            makeAllInOneGroup();
             return;
         }
         if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            // breakGroupCB();
+            breakGroupCB();
             setSelectedCB(null);
             return;
         }
-    }, [shortcutKeyMode, setSelectedCB]);
+    }, [shortcutKeyMode, setSelectedCB, breakGroupCB]);
     (0, react_1.useLayoutEffect)(function () {
         if (props.id !== editingSectionId) {
             return;
         }
         if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedCB || selectedCB === 'BULK') {
+            if (!selectedCB || selectedCB === 'group') {
                 return;
             }
-            // makeCollisionGroup(selectedCB);
-            // sectionActionHandler &&
-            //   sectionActionHandler({
-            //     type: '@CUSTOMSECTION/BLOCK_CLICKED',
-            //     payload: {
-            //      block:
-            //     }
-            //   });
-            setSelectedCB('BULK');
-        }
-    }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+            makeCollisionGroup(selectedCB);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/CB_CLICKED',
+                    payload: {
+                        id: 'group'
+                    }
+                });
+            setSelectedCB('group');
+        }
+    }, [selectedCB, shortcutKeyMode, makeCollisionGroup, sectionActionHandler, setSelectedCB]);
+    var _g = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+    }), width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -137,6 +181,9 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
         if (!isEditMode) {
             return;
         }
+        if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
+            breakGroupCB();
+        }
         setSelectedCB(null);
         sectionActionHandler &&
             sectionActionHandler({
@@ -184,7 +231,7 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
         }
         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: {
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(CustomSection_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,
@@ -195,14 +242,11 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
                             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));
-                        }) })) })) })) }) }));
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) { 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 }) }, 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);
+exports.default = react_1.default.memo(CustomSection);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {
         return width * (0.0000868 * width + 0.0202);

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.d.ts

@@ -6,7 +6,6 @@ type Props = {
     index: number;
     device: Device;
     rowHeight: number;
-    zIndex: number;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex }: Props): JSX.Element;
+declare function FlexGridItem({ cb, index, device, rowHeight }: Props): JSX.Element;
 export default FlexGridItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js

@@ -23,21 +23,18 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var gap = 10;
 function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex;
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
     var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    // const zIndex =
-    //   device === 'DESKTOP'
-    //     ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
-    //     : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT[
-    //         'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'
-    //       ];
+    var zIndex = device === 'DESKTOP'
+        ? cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX
+        : cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE'];
     return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ style: {
             zIndex: zIndex,
             gridArea: gridArea
             // maxHeight: cb.componentBlockCode !== CB_ALL_CODES.CB_TEXT ? defaultHeight : undefined
-        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
+        } }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cb, device: device, index: index }) })));
 }
 var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
 function getMaxHeight(props, device, rowHeight) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.d.ts

@@ -5,7 +5,6 @@ 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/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher.js

@@ -19,7 +19,6 @@ require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
-var ContentsCarousel_1 = __importDefault(require("./componentBlocks/ContentsCarousel/ContentsCarousel"));
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
@@ -48,10 +47,6 @@ function ComponentBlockMatcher(_a) {
             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: {
-            var compositions = cbProps.compositions;
-            return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.default, __assign({}, propsWithValue, { compositions: compositions, index: index })));
-        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js

@@ -40,18 +40,18 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var index = props.index, CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var _c = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
-    var _d = getBTNStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
-    var _e = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
+    var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
+    var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
     var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -72,34 +72,32 @@ function Button(props) {
                     paddingRight: paddingRight,
                     paddingBottom: paddingBottom,
                     paddingTop: paddingTop
-                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
-                        e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
+                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [
-        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
-        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT',
-        'CB_STYLE_PROP_TEXT_SPEC_SIZE',
-        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
-        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
-        'CB_STYLE_PROP_TEXT_SPEC_COLOR',
-        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
-        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
+        'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL'
     ];
-    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
+    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'BTNTEXT' });
 }
 function getBTNColorStyles(props, device) {
     var availableSpecCodes = [
-        'CB_STYLE_PROP_COLOR_SPEC_ANGLE',
-        'CB_STYLE_PROP_COLOR_SPEC_COLOR',
-        'CB_STYLE_PROP_COLOR_SPEC_ENDCOLOR',
-        'CB_STYLE_PROP_COLOR_SPEC_ENDLOC',
-        'CB_STYLE_PROP_COLOR_SPEC_GRADIENT',
-        'CB_STYLE_PROP_COLOR_SPEC_STARTCOLOR',
-        'CB_STYLE_PROP_COLOR_SPEC_STARTLOC',
-        'CB_STYLE_PROP_COLOR_SPEC_TYPE'
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE'
     ];
-    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'COLOR', device: device });
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BTNCOLOR', device: device });
 }
 exports.default = Button;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/btnTypes.d.ts

@@ -0,0 +1,76 @@
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../../util/types';
+export type BtnPropsKeys = keyof CB_BTNTEXT_STYLE_PROPS;
+export type CB_BTNTEXT_STYLE_PROPS = {
+    CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: ENUM_STRING;
+    CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNTEXT_SPEC_SIZE: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNTEXT_SPEC_COLOR: STRING_8DIGIT_HEX;
+    CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL: ENUM_STRING;
+    CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL: ENUM_STRING;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL:MOBILE:HOVER': ENUM_STRING | null | undefined;
+};
+export type CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
+export type CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
+export type CB_STYLE_PROP_BTNCOLOR_SPECS_BASE = {
+    CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR: ENUM_STRING;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT: CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE: CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE;
+};
+export type CB_STYLE_PROP_BTNCOLOR_SPECS = CB_STYLE_PROP_BTNCOLOR_SPECS_BASE & {
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE | null | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE | null | undefined;
+};
+export type BtnColorPropsKeys = keyof CB_STYLE_PROP_BTNCOLOR_SPECS;
+export type BTNColorValueSetType = Partial<Record<keyof CB_STYLE_PROP_BTNCOLOR_SPECS, CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | NUMBER_INTEGER | ENUM_STRING | undefined>>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/btnTypes.js

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -39,7 +39,7 @@ function Text(props) {
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
     var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextSpecCode)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -55,25 +55,11 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var textValue = function () {
-        if (device === 'MOBILE') {
-            var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
-            if (value === null || value === undefined) {
-                return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
-            }
-            return value;
-        }
-        return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
-    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ style: {
                     height: '100%',
                     display: 'flex',
                     alignItems: textStyle.alignItems
-                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
-                        e.currentTarget.classList.add('hovered');
-                    }, onMouseLeave: function (e) {
-                        e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() })) }))] }));
+                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), textStyle), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/types.d.ts

@@ -0,0 +1,38 @@
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+export type TextPropsKeys = keyof CB_STYLE_PROP_TEXT_SPECS;
+export type CB_STYLE_PROP_TEXT_SPECS_BASE = {
+    CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: ENUM_STRING;
+    CB_STYLE_PROP_TEXT_SPEC_WEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_SIZE: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_COLOR: STRING_8DIGIT_HEX;
+    CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: ENUM_STRING;
+    CB_STYLE_PROP_TEXT_SPEC_VERTICAL: ENUM_STRING;
+};
+export type CB_STYLE_PROP_TEXT_SPECS = CB_STYLE_PROP_TEXT_SPECS_BASE & {
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': ENUM_STRING | null | undefined;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/types.js

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_Box.js

@@ -40,7 +40,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_Box = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover,\n  &.hovered {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover,\n  &.hovered {\n    ", ";\n  }\n"])), function (_a) {
+exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
 }, function (_a) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/components/S_CB_BoxWithShadow.js

@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_CB_BoxWithShadow = void 0;
 var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importStar(require("styled-components"));
-exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover,\n  &.hovered {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover,\n  &.hovered {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"])), function (_a) {
+exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { boxShadow: '' }));
 }, function (_a) {