pds-dev-kit-web-test 0.2.12 → 0.2.14

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

@@ -25,8 +25,7 @@ var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContex
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
-var isNullOrUndefined_1 = __importDefault(require("./util/isNullOrUndefined"));
-var parsePlacement_1 = require("./util/parsePlacement");
+var util_1 = require("./util");
 var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
 function CustomSection(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, sectionActionHandler = _a.sectionActionHandler, editingSectionId = _a.editingSectionId;
@@ -36,14 +35,14 @@ function CustomSection(props) {
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var _c = (0, react_1.useState)(function () {
-        var _a = (0, parsePlacement_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
+        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         return {
             lg: lg,
             sm: sm
         };
     }), layouts = _c[0], setLayouts = _c[1];
     (0, react_1.useEffect)(function () {
-        var _a = (0, parsePlacement_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
+        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         setLayouts({ lg: lg, sm: sm });
     }, [componentBlocks]);
     (0, react_1.useEffect)(function () {
@@ -51,29 +50,10 @@ function CustomSection(props) {
             setSelectedCB(null);
         }
     }, [editingSectionId]);
-    var customSectionProps = (0, react_1.useMemo)(function () {
-        return CB_PLACEMENT_PROP_SECTION
-            ? {
-                minHeight: isMobile &&
-                    !(0, isNullOrUndefined_1.default)(CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE'])
-                    ? CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE']
-                    : CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT,
-                width: isMobile &&
-                    !(0, isNullOrUndefined_1.default)(CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE'])
-                    ? CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE']
-                    : CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH,
-                rows: isMobile &&
-                    !(0, isNullOrUndefined_1.default)(CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'])
-                    ? CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']
-                    : CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS,
-                isFullWidth: isMobile &&
-                    !(0, isNullOrUndefined_1.default)(CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE'])
-                    ? CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE']
-                    : CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH
-            }
-            : {};
-    }, [CB_PLACEMENT_PROP_SECTION, isMobile]);
-    var rows = customSectionProps.rows, width = customSectionProps.width, minHeight = customSectionProps.minHeight, isFullWidth = customSectionProps.isFullWidth;
+    var _d = (0, util_1.parseCustomSectionPlacement)({
+        isMobile: isMobile,
+        customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }), rows = _d.rows, width = _d.width, minHeight = _d.minHeight, isFullWidth = _d.isFullWidth;
     // eslint-disable-next-line react/destructuring-assignment
     var customSectionStyles = {
         minHeight: minHeight + "px",
@@ -141,7 +121,7 @@ function CustomSection(props) {
                 }
             });
     };
-    return ((0, jsx_runtime_1.jsx)(S_gleStyles, __assign({ customHeight: customMinHeight }, { 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.Section, __assign({}, props, { overrideStyles: customSectionStyles, isMobile: isMobile }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: { lg: 800, sm: 480 }, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: 50, margin: [10, 10], style: {
+    return ((0, jsx_runtime_1.jsx)(S_gleStyles, __assign({ customHeight: customMinHeight }, { 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, { overrideStyles: customSectionStyles, isMobile: isMobile }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: { lg: 800, sm: 480 }, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: 50, margin: [10, 10], style: {
                         width: customSectionStyles.width,
                         minHeight: customMinHeight
                     }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop }, { children: componentBlocks ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {

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

@@ -22,12 +22,12 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 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 S_CB_Box_1 = require("../components/S_CB_Box");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 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 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 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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     var onClickBox = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
@@ -50,7 +50,7 @@ function Button(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.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));
+    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_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, 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/Image/Image.js

@@ -43,11 +43,11 @@ var DynamicLayout_1 = require("../../../../../../../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_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Image(props) {
     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 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, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     var onClickBox = (0, useCLINK_1.default)({
         src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
@@ -65,7 +65,7 @@ function Image(props) {
             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));
+    return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, 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 {
@@ -84,16 +84,13 @@ function imageStyleDivideProvider(style) {
             borderTopRightRadius: style.borderTopRightRadius,
             borderWidth: style.borderWidth,
             boxShadow: style.boxShadow,
-            opacity: style.opacity,
+            opacity: Number(style.opacity) / 100,
             visibility: style.visibility
         }
     };
 }
-var S_Image = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"], ["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n"])), function (_a) {
-    var normalStyle = _a.normalStyle;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      object-fit: ", ";\n    "], ["\n      object-fit: ", ";\n    "])), normalStyle.objectFit);
-});
-var S_ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+var S_Image = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
     switch (normalStyle.objectFit) {
         case 'cover':
@@ -109,6 +106,9 @@ var S_ImageWrapper = styled_components_1.default.div(templateObject_4 || (templa
         default:
             return "height: auto;\n        width: auto";
     }
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), normalStyle.objectFit);
 }, function (_a) {
     var hoverStyle = _a.hoverStyle;
     return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), hoverStyle.objectFit);

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

@@ -27,11 +27,11 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
-var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function RichText(props) {
     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 CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     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';
@@ -42,7 +42,7 @@ function RichText(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.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({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }, void 0) }, void 0) }), 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_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }, void 0) }, void 0) }), void 0)] }, void 0));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

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

@@ -17,11 +17,11 @@ var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 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 S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 function Twitter(props) {
     // 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 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, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     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();
@@ -39,6 +39,6 @@ function Twitter(props) {
     var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     var effectCssProperties = isVisible ? effect : {};
     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));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, 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/Youtube/Youtube.js

@@ -25,12 +25,12 @@ var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
-var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
 function Youtube(props) {
     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 CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
     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;
@@ -43,7 +43,7 @@ function Youtube(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.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({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), ref: cbRef }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), 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_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), void 0)] }, void 0));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [
@@ -59,7 +59,7 @@ function getBGColorStyles(props, device) {
     return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
 }
 var S_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n"])));
-var S_Thumbnail = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_Thumbnail = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"], ["\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n"])));
 var S_Iframe = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  height: 100%;\n  width: 100%;\n"])));
 var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 48px;\n  margin: auto;\n  position: absolute;\n  width: 68px;\n"], ["\n  height: 48px;\n  margin: auto;\n  position: absolute;\n  width: 68px;\n"])));
 function YoutubeButton() {

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

@@ -36,41 +36,11 @@ 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  overflow: hidden;\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    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      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  overflow: hidden;\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    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      position: absolute;\n      top: 0;\n      width: 100%;\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  overflow: hidden;\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  overflow: hidden;\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) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.borderBottomLeftRadius;
-}, function (_a) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.borderBottomRightRadius;
-}, function (_a) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.borderTopLeftRadius;
-}, function (_a) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.borderTopRightRadius;
-}, function (_a) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.boxShadow;
 }, function (_a) {
     var hoverStyle = _a.hoverStyle;
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { boxShadow: '' }));
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return hoverStyle.borderBottomLeftRadius;
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return hoverStyle.borderBottomRightRadius;
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return hoverStyle.borderTopLeftRadius;
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return hoverStyle.borderTopRightRadius;
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return hoverStyle.boxShadow;
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,11 @@
+import type { StylesProps } from '../types';
+import type { Device, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+export declare const S_CB_BoxWithShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StylesProps & {
+    cbStylePropsShadowSpecs: {
+        CB_STYLE_PROP_SHADOW_SPEC_OPACITY: NUMBER_INTEGER;
+        'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': NUMBER_INTEGER;
+        'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': NUMBER_INTEGER | null | undefined;
+        'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    };
+    device: Device;
+}, never>;

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

@@ -0,0 +1,101 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 });
+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  overflow: hidden;\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  overflow: hidden;\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) {
+    var normalStyle = _a.normalStyle;
+    return normalStyle.borderBottomLeftRadius;
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return normalStyle.borderBottomRightRadius;
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return normalStyle.borderTopLeftRadius;
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return normalStyle.borderTopRightRadius;
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return normalStyle.boxShadow;
+}, function (_a) {
+    var cbStylePropsShadowSpecs = _a.cbStylePropsShadowSpecs, device = _a.device;
+    switch (device) {
+        case 'DESKTOP':
+            return cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY / 100;
+        case 'MOBILE':
+            return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE'])
+                ? cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY / 100
+                : Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE']) / 100;
+    }
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { boxShadow: '' }));
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle.borderBottomLeftRadius;
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle.borderBottomRightRadius;
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle.borderTopLeftRadius;
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle.borderTopRightRadius;
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return hoverStyle.boxShadow;
+}, function (_a) {
+    var cbStylePropsShadowSpecs = _a.cbStylePropsShadowSpecs, device = _a.device;
+    switch (device) {
+        case 'DESKTOP':
+            return cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER'] / 100;
+        case 'MOBILE':
+            return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER'])
+                ? cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER'] / 100
+                : Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER']) /
+                    100;
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -35,8 +35,10 @@ function parseStyleColorToCSSProp(_a) {
 }
 exports.parseStyleColorToCSSProp = parseStyleColorToCSSProp;
 function getBtnColorStyles(value, cbName) {
-    if ("" + value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'NONE' ||
-        value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'SOLID') {
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'NONE') {
+        return { backgroundColor: 'none' };
+    }
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'SOLID') {
         var style = {
             backgroundColor: value["CB_STYLE_PROP_" + cbName + "_SPEC_COLOR"]
         };

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

@@ -15,7 +15,7 @@ exports.getTextCSSPropKey = exports.parseStyleTextToCSSProp = void 0;
 function parseStyleTextToCSSProp(_a) {
     var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device;
     return availableSpecCodes.reduce(function (acc, currentKey) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var stringifiedKey = currentKey.toString();
         var keyWithDevice = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
         var keyWithHover = keyWithDevice.toString() + ":HOVER";
@@ -30,9 +30,29 @@ function parseStyleTextToCSSProp(_a) {
                 hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = numHoverValue, _b))
             };
         }
+        if (cssPropertyKey === 'fontFamily') {
+            return {
+                style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = getFontName(String(value)), _c)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[cssPropertyKey] = getFontName(String(hoverValue)), _d))
+            };
+        }
+        if (cssPropertyKey === 'letterSpacing') {
+            var numValue = (Math.abs(+value) - 100) * (+value > 0 ? 0.01 : -0.01) + "em";
+            var numHoverValue = (Math.abs(+hoverValue) - 100) * (+hoverValue > 0 ? 0.01 : -0.01) + "em";
+            return {
+                style: __assign(__assign({}, acc.style), (_e = {}, _e[cssPropertyKey] = numValue, _e)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[cssPropertyKey] = numHoverValue, _f))
+            };
+        }
+        if (cssPropertyKey === 'fontSize') {
+            return {
+                style: __assign(__assign({}, acc.style), (_g = {}, _g[cssPropertyKey] = value + "px", _g)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_h = {}, _h[cssPropertyKey] = hoverValue + "px", _h))
+            };
+        }
         return {
-            style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = value, _c)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[cssPropertyKey] = hoverValue, _d))
+            style: __assign(__assign({}, acc.style), (_j = {}, _j[cssPropertyKey] = value, _j)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_k = {}, _k[cssPropertyKey] = hoverValue, _k))
         };
     }, {
         style: {},
@@ -77,3 +97,15 @@ function getTextCSSPropKey(key, cbName) {
     }
 }
 exports.getTextCSSPropKey = getTextCSSPropKey;
+function getFontName(value) {
+    switch (value) {
+        case 'SYSSANS':
+            return 'sans-serif';
+        case 'SYSSERIF':
+            return 'serif';
+        case 'PRETENDARD':
+            return 'Pretendard-Regular';
+        default:
+            return '';
+    }
+}

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

@@ -1,3 +1,5 @@
+export { parseCustomSectionPlacement } from './parseCustomSectionPlacement';
+export { parsePlacement } from './parsePlacement';
 export { default as parseProperties } from './parseProperties';
 export { default as parseJsonProperties } from './parseJsonProperties';
 export { parseContentProperties } from './contentPropParsers';

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

@@ -3,7 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseStyleProperties = exports.parseLayoutProperties = exports.parseEffectProperties = exports.parseContentProperties = exports.parseJsonProperties = exports.parseProperties = void 0;
+exports.parseStyleProperties = exports.parseLayoutProperties = exports.parseEffectProperties = exports.parseContentProperties = exports.parseJsonProperties = exports.parseProperties = exports.parsePlacement = exports.parseCustomSectionPlacement = void 0;
+var parseCustomSectionPlacement_1 = require("./parseCustomSectionPlacement");
+Object.defineProperty(exports, "parseCustomSectionPlacement", { enumerable: true, get: function () { return parseCustomSectionPlacement_1.parseCustomSectionPlacement; } });
+var parsePlacement_1 = require("./parsePlacement");
+Object.defineProperty(exports, "parsePlacement", { enumerable: true, get: function () { return parsePlacement_1.parsePlacement; } });
 var parseProperties_1 = require("./parseProperties");
 Object.defineProperty(exports, "parseProperties", { enumerable: true, get: function () { return __importDefault(parseProperties_1).default; } });
 var parseJsonProperties_1 = require("./parseJsonProperties");

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

@@ -0,0 +1,20 @@
+declare type Props = {
+    isMobile: boolean;
+    customSectionProps?: {
+        CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | undefined;
+    };
+};
+export declare function parseCustomSectionPlacement({ isMobile, customSectionProps }: Props): {
+    minHeight: number | undefined;
+    width: number | undefined;
+    rows: number | undefined;
+    isFullWidth: boolean | undefined;
+};
+export default parseCustomSectionPlacement;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCustomSectionPlacement = void 0;
+var isNullOrUndefined_1 = __importDefault(require("./isNullOrUndefined"));
+function parseCustomSectionPlacement(_a) {
+    var isMobile = _a.isMobile, customSectionProps = _a.customSectionProps;
+    return customSectionProps
+        ? {
+            minHeight: isMobile &&
+                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE'])
+                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE']
+                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT,
+            width: isMobile &&
+                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE'])
+                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE']
+                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH,
+            rows: isMobile &&
+                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'])
+                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']
+                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS,
+            isFullWidth: isMobile &&
+                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE'])
+                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE']
+                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH
+        }
+        : {
+            minHeight: 0,
+            width: 0,
+            rows: 0,
+            isFullWidth: true
+        };
+}
+exports.parseCustomSectionPlacement = parseCustomSectionPlacement;
+exports.default = parseCustomSectionPlacement;

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

@@ -62,7 +62,7 @@ function valueGenerator(valueSet, device) {
             case 'SOLID':
                 return "" + valueSet.CB_STYLE_PROP_BGCOLOR_SPEC_COLOR;
             case 'NONE':
-                return 'transparent';
+                return 'NONE';
             default:
                 return '';
         }
@@ -84,7 +84,7 @@ function valueGenerator(valueSet, device) {
             case 'SOLID':
                 return "" + valueSet['CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE'];
             case 'NONE':
-                return 'transparent';
+                return 'NONE';
             default:
                 return '';
         }

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

@@ -20,8 +20,8 @@ function parseStylePropOpacity(namedProps, device) {
         var value = specs[baseKey];
         var hoverValue = specs[baseKey + ":HOVER"];
         return {
-            style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value, _a)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = hoverValue, _b))
+            style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = (value || 0) / 100, _a)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = (hoverValue || 0) / 100, _b))
         };
     }, {
         style: {},

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

@@ -44,9 +44,9 @@ exports.default = parseStylePropShadow;
 function valueGenerator(valueSet) {
     switch (valueSet.CB_STYLE_PROP_SHADOW_SPEC_TYPE) {
         case 'INSET':
-            return "inset " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_Y + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_X + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_BLUR + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_SPREAD + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_COLOR;
+            return "inset " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_X + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_Y + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_BLUR + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_SPREAD + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_COLOR;
         case 'OUTSET':
-            return valueSet.CB_STYLE_PROP_SHADOW_SPEC_Y + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_X + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_BLUR + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_SPREAD + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_COLOR;
+            return valueSet.CB_STYLE_PROP_SHADOW_SPEC_X + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_Y + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_BLUR + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_SPREAD + "px " + valueSet.CB_STYLE_PROP_SHADOW_SPEC_COLOR;
         case 'NONE':
             return '';
         default: