pds-dev-kit-web-test 0.2.3 → 0.2.5

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

@@ -20,11 +20,11 @@ var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 require("../../util");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
-var Divider_1 = __importDefault(require("./componentBlocks/Divider"));
-var Image_1 = __importDefault(require("./componentBlocks/Image"));
+var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
+var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
-var Text_1 = __importDefault(require("./componentBlocks/Text"));
-var Twitter_1 = __importDefault(require("./componentBlocks/Twitter"));
+var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
+var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
 function ComponentBlockMatcher(props) {
     var device = 'MOBILE';
@@ -32,37 +32,19 @@ function ComponentBlockMatcher(props) {
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(properties) : properties;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
-            if ('CB_STYLE_PROP_BTNTEXT' in propsWithValue) {
-                // @ts-ignore
-                return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue), void 0);
-            }
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: CB_BTN" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_TEXT:
-            if ('CB_STYLE_PROP_TEXT' in propsWithValue) {
-                // @ts-ignore
-                return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue), void 0);
-            }
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: CB_TEXT" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
-            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, properties), void 0);
+            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_DIVIDER:
-            if ('CB_STYLE_PROP_DIVIDER' in properties) {
-                // @ts-ignore
-                return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, properties), void 0);
-            }
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: CB_DIVIDER" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_IMG:
-            if ('CB_STYLE_PROP_IMAGE' in properties) {
-                return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, properties), void 0);
-            }
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: CB_IMAGE" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_TWITTER:
-            if ('CB_STYLE_PROP_TWITTER' in properties) {
-                return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, properties), void 0);
-            }
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "ERROR: CB_TWITTER" }, void 0);
+            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue), void 0);
         case types_1.CB_ALL_CODES.CB_YOUTUBE:
-            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, properties), void 0);
+            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue), void 0);
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" }, void 0);
     }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_BTN_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 declare type Props = CB_BTN_PROPERTIES_TYPE;
 declare function Button(props: Props): JSX.Element;
 export default Button;

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

@@ -17,34 +17,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var newUtils_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
-    var CB_CONTENT_PROP_CLINK = props.CB_CONTENT_PROP_CLINK;
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var 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;
     var onClickBox = (0, useCLINK_1.default)({
-        src: CB_CONTENT_PROP_CLINK.CB_CONTENT_PROP_CLINK_SPEC_SRC,
-        type: CB_CONTENT_PROP_CLINK.CB_CONTENT_PROP_CLINK_SPEC_TYPE,
-        openNewTab: CB_CONTENT_PROP_CLINK.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
     });
-    var _a = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, 'DESKTOP'), style = _a.style, hoverStyle = _a.hoverStyle;
-    var _b = getBTNColorStyles(props.CB_STYLE_PROP_BTNCOLOR, 'DESKTOP'), btnColorStyle = _b.style, btnColorHoverStyle = _b.hoverStyle;
-    var _c = (0, util_1.parseProperties)(props, 'DESKTOP'), propStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
-    var mode = 'EDIT';
-    var isEditModeAndHidden = propStyle.visibility === 'hidden' && mode === 'EDIT';
+    var handleOnClick = function () {
+        if (mode === 'EDIT') {
+            return;
+        }
+        onClickBox();
+    };
+    var _c = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _c.style, btnTextHoverStyle = _c.hoverStyle;
+    var _d = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _d.style, btnColorHoverStyle = _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';
     if (mode === 'EDIT') {
-        propStyle.visibility = 'visible';
+        propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), propStyle), layoutStyle), effectCssProperties), btnColorStyle), hoverStyle: __assign(__assign(__assign({}, hoverStyle), propsHoverStyle), btnColorHoverStyle), onClick: onClickBox, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), onClick: handleOnClick, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Divider.d.ts → Divider/Divider.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_DIVIDER_PROPERTIES_TYPE } from '../../../util/types';
+import type { CB_DIVIDER_PROPERTIES_TYPE } from '../../../../util/types';
 declare type Props = CB_DIVIDER_PROPERTIES_TYPE;
 declare function Divider(props: Props): JSX.Element;
 export default Divider;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Divider.js → Divider/Divider.js}

@@ -36,15 +36,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
-var hooks_1 = require("../../../hooks");
-var util_1 = require("../../../util");
-var S_CB_Box_1 = require("./components/S_CB_Box");
-var S_HiddenCover_1 = require("./components/S_HiddenCover");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function Divider(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
-    var _a = (0, util_1.parseProperties)(props, 'DESKTOP'), propsStyle = _a.style, propsHoverStyle = _a.hoverStyle, layoutStyle = _a.layout, effect = _a.effect;
-    var mode = 'EDIT';
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CB_IMG_PROPERTIES_TYPE } from '../../../../util/types';
+declare type Props = CB_IMG_PROPERTIES_TYPE;
+declare function Image(props: Props): JSX.Element;
+export default Image;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Image.js → Image/Image.js}

@@ -33,24 +33,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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");
 var react_1 = require("react");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
-var hooks_1 = require("../../../hooks");
-var util_1 = require("../../../util");
-var S_CB_Box_1 = require("./components/S_CB_Box");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
-    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE;
-    var _a = (0, util_1.parseProperties)(props, 'DESKTOP'), style = _a.style, hoverStyle = _a.hoverStyle, layout = _a.layout, effect = _a.effect;
-    var _b = imageStyleDivideProvider(style), componentStyle = _b.componentStyle, wrapperStyle = _b.wrapperStyle;
-    var _c = imageStyleDivideProvider(hoverStyle), hoverComponentStyle = _c.componentStyle, hoverWrapperStyle = _c.wrapperStyle;
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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;
+    var onClickBox = (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
+    });
+    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
+    var _d = imageStyleDivideProvider(style), componentStyle = _d.componentStyle, wrapperStyle = _d.wrapperStyle;
+    var _e = imageStyleDivideProvider(hoverStyle), hoverComponentStyle = _e.componentStyle, hoverWrapperStyle = _e.wrapperStyle;
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ normalStyle: componentStyle, hoverStyle: hoverComponentStyle }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: { objectFit: hoverComponentStyle.objectFit } }, void 0) }), void 0) }), void 0));
+    var handleOnClick = function () {
+        if (mode === 'EDIT')
+            return;
+        onClickBox();
+    };
+    return ((0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, ref: cbRef, onClick: handleOnClick }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ normalStyle: componentStyle, hoverStyle: hoverComponentStyle }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: { objectFit: hoverComponentStyle.objectFit } }, void 0) }), void 0) }), void 0));
 }
 function imageStyleDivideProvider(style) {
     return {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Image.d.ts → Image/types.d.ts}

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import type { CB_IMG_PROPERTIES_TYPE, ENUM_STRING, STRING_PLAIN } from '../../../util/types';
-declare type Props = CB_IMG_PROPERTIES_TYPE;
-declare function Image(props: Props): JSX.Element;
+import type { ENUM_STRING, STRING_PLAIN } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare type ImagePropsKeys = keyof CB_IMAGE_STYLE_PROPS;
 export declare type CB_IMAGE_STYLE_PROPS = {
     CB_STYLE_PROP_IMAGE_SPEC_FIT: STRING_PLAIN;
@@ -13,4 +10,3 @@ export declare type CB_IMAGE_STYLE_PROPS = {
     'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE': ENUM_STRING | undefined;
     'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE:HOVER': ENUM_STRING | undefined;
 };
-export default Image;

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_RICHTEXT_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_RICHTEXT_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 declare type Props = CB_RICHTEXT_PROPERTIES_TYPE;
 declare function RichText(props: Props): JSX.Element;
 export default RichText;

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

@@ -21,19 +21,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var RichText_1 = require("../../../../../../../DynamicLayout/components/ComponentBlocks/RichText");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var RichText_1 = require("@sub/DynamicLayout/components/ComponentBlocks/RichText");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function RichText(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR;
-    var _a = (0, util_1.parseProperties)(props, 'DESKTOP'), propsStyle = _a.style, propsHoverStyle = _a.hoverStyle, layoutStyle = _a.layout, effect = _a.effect;
-    var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, 'DESKTOP'), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
-    var mode = 'EDIT';
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
+    var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';

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

@@ -1,5 +1,5 @@
 import type { BGColorPropsKeys, CB_STYLE_PROP_BGCOLOR_SPECS } from '../Youtube/types';
-import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare type CB_STYLE_PROP_BGOVERLAY_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
 export declare type CB_STYLE_PROP_BGOVERLAY_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
 export declare type CB_STYLE_PROP_BGOVERLAY_SPECS_BASE = {

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CB_TEXT_PROPERTIES_TYPE } from '../../../../util/types';
+declare type Props = CB_TEXT_PROPERTIES_TYPE;
+declare function Text(props: Props): JSX.Element;
+export default Text;

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

@@ -17,32 +17,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var hooks_1 = require("../../../hooks");
-var textUtil_1 = require("../../../newUtils/textUtil");
-var util_1 = require("../../../util");
-var S_CB_Box_1 = require("./components/S_CB_Box");
-var S_HiddenCover_1 = require("./components/S_HiddenCover");
-var useCLINK_1 = __importDefault(require("./hooks/useCLINK"));
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var textUtil_1 = require("../../../../newUtils/textUtil");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Text(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
-    var _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB;
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _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;
     var onClickBox = (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
     });
-    var _b = getTextStyles(props.CB_STYLE_PROP_TEXT, 'DESKTOP'), style = _b.style, hoverStyle = _b.hoverStyle;
-    var _c = (0, util_1.parseProperties)(props, 'DESKTOP'), prosStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
-    var mode = 'EDIT';
-    var isEditModeAndHidden = prosStyle.visibility === 'hidden' && mode === 'EDIT';
+    var _c = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _c.style, textHoverStyle = _c.hoverStyle;
+    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
-        prosStyle.visibility = 'visible';
+        propsStyle.visibility = 'visible';
     }
     var cbRef = (0, react_1.useRef)(null);
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), prosStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, hoverStyle), propsHoverStyle), onClick: onClickBox, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: mode !== 'EDIT' ? onClickBox : undefined, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

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

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import type { CB_TEXT_PROPERTIES_TYPE, ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../util/types';
-declare type Props = CB_TEXT_PROPERTIES_TYPE;
-declare function Text(props: Props): JSX.Element;
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare type TextPropsKeys = keyof CB_TEXT_STYLE_PROPS;
 export declare type CB_TEXT_STYLE_PROPS = {
     CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: ENUM_STRING;
@@ -29,4 +26,3 @@ export declare type CB_TEXT_STYLE_PROPS = {
     'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
     'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
 };
-export default Text;

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/Twitter/Twitter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CB_TWITTER_PROPERTIES_TYPE } from '../../../../util/types';
+declare type Props = CB_TWITTER_PROPERTIES_TYPE;
+declare function Twitter(props: Props): JSX.Element;
+export default Twitter;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Twitter.js → Twitter/Twitter.js}

@@ -13,14 +13,16 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var ComponentBlocks_1 = require("../../../../../../DynamicLayout/components/ComponentBlocks");
-var hooks_1 = require("../../../hooks");
-var util_1 = require("../../../util");
-var S_CB_Box_1 = require("./components/S_CB_Box");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var ComponentBlocks_1 = require("@sub/DynamicLayout/components/ComponentBlocks");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
 function Twitter(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME;
-    var _a = (0, util_1.parseProperties)(props, 'DESKTOP'), style = _a.style, hoverStyle = _a.hoverStyle, layout = _a.layout, effect = _a.effect;
+    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
     var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
     var theme = CB_STYLE_PROP_TWITTER_SPEC_THEME.toLowerCase();
     if ('display' in layout) {
@@ -36,6 +38,7 @@ function Twitter(props) {
     var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), hoverStyle: hoverStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }, void 0));
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }, void 0));
 }
 exports.default = Twitter;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/{Twitter.d.ts → Twitter/types.d.ts}

@@ -1,10 +1,6 @@
-/// <reference types="react" />
-import type { CB_TWITTER_PROPERTIES_TYPE, DefaultBrightTheme } from '../../../util/types';
-declare type Props = CB_TWITTER_PROPERTIES_TYPE;
-declare function Twitter(props: Props): JSX.Element;
+import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
 export declare type CB_TWITTER_STYLE_PROPS = {
     CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;
     'CB_STYLE_PROP_TWITTER_SPEC_THEME:MOBILE': DefaultBrightTheme | undefined;
 };
-export default Twitter;

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_YOUTUBE_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 declare type Props = CB_YOUTUBE_PROPERTIES_TYPE;
 declare function Youtube(props: Props): JSX.Element;
 export default Youtube;

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

@@ -20,21 +20,21 @@ 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 hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
 function Youtube(props) {
-    // const { device, mode } = useContext(dynamicLayoutContext);
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR;
-    var _a = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _a.youtubeSrc, thumbnailSrc = _a.thumbnailSrc, id = _a.id;
-    var isEditMode = false;
-    var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, 'DESKTOP'), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
-    var _c = (0, util_1.parseProperties)(props, 'DESKTOP'), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
-    var mode = 'EDIT';
+    var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
+    var isEditMode = mode === 'EDIT';
+    var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
+    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';

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

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 export declare type CB_CONTENT_PROP_YOUTUBE_TYPE = {
     CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
     CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;

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

@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S_HiddenCover = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.S_HiddenCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n"], ["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n"])));
+exports.S_HiddenCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  z-index: 2;\n"])));
 var templateObject_1;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
 // NOTE: link기능은 탄력적일 필요가 없음.
 function useCLINK(props) {
     var src = props.src, openNewTab = props.openNewTab, type = props.type;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.d.ts

@@ -0,0 +1,5 @@
+declare const useRefDimensions: (ref: any) => {
+    width: number;
+    height: number;
+};
+export default useRefDimensions;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useRefDimensions.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useRefDimensions = function (ref) {
+    var _a = (0, react_1.useState)({ width: 0, height: 0 }), dimensions = _a[0], setDimensions = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (!ref.current)
+            return;
+        var resizeObserver = new ResizeObserver(function (callback) {
+            var object = callback[0];
+            var _a = object.contentRect, width = _a.width, height = _a.height;
+            setDimensions({ width: width, height: height });
+        });
+        resizeObserver.observe(ref.current);
+        return function () { return resizeObserver.disconnect(); }; // clean u
+    }, [ref]);
+    return dimensions;
+};
+exports.default = useRefDimensions;

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil.js

@@ -22,8 +22,8 @@ function parseStyleColorToCSSProp(_a) {
         var value = props[baseKey];
         var hoverValue = props[keyWithHover];
         return {
-            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[baseKey] = value, _a)),
-            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[baseKey] = hoverValue, _b))
+            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[currentKey] = value, _a)),
+            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[currentKey] = hoverValue, _b))
         };
     }, {
         normal: {},

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/replaceUndefinedValues.js

@@ -15,25 +15,20 @@ function replaceUndefinedValues(jsonData) {
     return Object.entries(jsonData).reduce(function (acc, cur) {
         var _a;
         var _b = cur, currentPropKey = _b[0], currentProps = _b[1];
-        if (currentPropKey.includes('CB_STYLE_PROP')) {
-            var specs = Object.entries(currentProps).reduce(function (accSpecs, curSpec) {
-                var _a;
-                var key = curSpec[0], value = curSpec[1];
-                var keyCopy = key;
-                var hasMobileKey = hasOwnProperty(accSpecs, keyCopy + ":MOBILE");
-                if (keyCopy.includes(':MOBILE') || hasMobileKey) {
-                    return accSpecs;
+        var propKey = ['CB_STYLE_PROP', 'CB_EFFECT_PROP', 'CB_LAYOUT_PROP'];
+        var isIncludedPropKey = propKey.some(function (key) { return currentPropKey.includes(key); });
+        if (isIncludedPropKey) {
+            var specs = Object.keys(currentProps).reduce(function (accSpecs, curSpec) {
+                if (currentProps[curSpec] === undefined || currentProps[curSpec] === null) {
+                    var undefinedMobileKey = curSpec.replace(':MOBILE', '');
+                    if (undefinedMobileKey in currentProps) {
+                        accSpecs[curSpec] = currentProps[undefinedMobileKey];
+                    }
+                    else {
+                        accSpecs[curSpec] = currentProps[curSpec];
+                    }
                 }
-                if (keyCopy.includes(':HOVER')) {
-                    keyCopy.replace(':HOVER', ':MOBILE:HOVER');
-                }
-                else {
-                    keyCopy += ':MOBILE';
-                }
-                if (hasOwnProperty(accSpecs, keyCopy)) {
-                    return accSpecs;
-                }
-                return __assign(__assign({}, accSpecs), (_a = {}, _a[keyCopy] = value, _a));
+                return __assign({}, accSpecs);
             }, currentProps);
             return __assign(__assign({}, acc), (_a = {}, _a[currentPropKey] = specs, _a));
         }
@@ -41,6 +36,7 @@ function replaceUndefinedValues(jsonData) {
     }, jsonData);
 }
 exports.default = replaceUndefinedValues;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function hasOwnProperty(obj, prop) {
     return Object.prototype.hasOwnProperty.call(obj, prop);
 }

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim.js

@@ -18,7 +18,7 @@ function parseEffectPropEntAnim(namedProps, device) {
         var _a;
         var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
         var value = specs[baseKey];
-        return __assign(__assign({}, acc), (_a = {}, _a[baseKey] = value, _a));
+        return __assign(__assign({}, acc), (_a = {}, _a[cur] = value, _a));
     }, {});
     return { style: { animation: valueGenerator(animationCssProperties) } };
 }