pds-dev-kit-web-test 0.2.11 → 0.2.13

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

@@ -21,12 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var publ_echo_1 = require("publ-echo");
 var react_1 = require("react");
-var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
 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.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { CB_BTN_PROPERTIES_TYPE } from '../../../../../../../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,17 +17,17 @@ 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 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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+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 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/Divider/Divider.js

@@ -36,7 +36,7 @@ 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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");

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

@@ -39,15 +39,15 @@ 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 DynamicLayout_1 = require("@sub/DynamicLayout");
+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/Image/types.d.ts

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, STRING_PLAIN } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, STRING_PLAIN } from '../../../../../../../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;

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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { CB_RICHTEXT_PROPERTIES_TYPE } from '../../../../../../../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,17 +21,17 @@ 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 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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+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 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/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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../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.js

@@ -17,7 +17,7 @@ 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 DynamicLayout_1 = require("@sub/DynamicLayout");
+var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../hooks");
 var textUtil_1 = require("../../../../newUtils/textUtil");
 var util_1 = require("../../../../util");

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

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../../../../../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;

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

@@ -13,15 +13,15 @@ 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 DynamicLayout_1 = require("@sub/DynamicLayout");
-var ComponentBlocks_1 = require("@sub/DynamicLayout/components/ComponentBlocks");
+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/Twitter/types.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { DefaultBrightTheme } from '../../../../../../../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;

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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../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,17 +20,17 @@ 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 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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+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 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/Youtube/types.d.ts

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../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_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/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("@sub/DynamicLayout/dynamicLayoutContext");
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
 // NOTE: link기능은 탄력적일 필요가 없음.
 function useCLINK(props) {
     var src = props.src, openNewTab = props.openNewTab, type = props.type;

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;
         var stringifiedKey = currentKey.toString();
         var keyWithDevice = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
         var keyWithHover = keyWithDevice.toString() + ":HOVER";
@@ -30,9 +30,15 @@ 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))
+            };
+        }
         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), (_e = {}, _e[cssPropertyKey] = value, _e)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[cssPropertyKey] = hoverValue, _f))
         };
     }, {
         style: {},
@@ -77,3 +83,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 '';
+    }
+}