pds-dev-kit-web 2.1.14 → 2.1.15

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

@@ -0,0 +1,80 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/destructuring-assignment */
+var react_1 = require("react");
+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_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+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, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
+    var _c = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
+        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+    }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
+    var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
+    var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
+    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, layoutStyle = _f.layout, effect = _f.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
+        props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 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_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
+}
+function getBTNStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL'
+    ];
+    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'BTNTEXT' });
+}
+function getBTNColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BTNCOLOR', device: device });
+}
+exports.default = Button;

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

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

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

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

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

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

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

@@ -0,0 +1,71 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+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_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+function Divider(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
+        CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 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_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }, void 0) }), void 0) }), void 0)] }, void 0));
+}
+var S_DIVIDER = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\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({}, normalStyle));
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign({}, hoverStyle));
+});
+exports.default = Divider;
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -0,0 +1,107 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+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_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Image(props) {
+    var device = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext).device;
+    var CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _a = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _a.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _a.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _a.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _a.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var _b = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
+        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+    }), onClickCLINK = _b.onClickCLINK, CLINKCursor = _b.CLINKCursor;
+    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var hasEffect = CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
+        CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), effectCssProperties), style), { cursor: CLINKCursor }), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: {
+                    borderBottomRightRadius: style.borderBottomRightRadius,
+                    borderBottomLeftRadius: style.borderBottomRightRadius,
+                    borderColor: style.borderColor,
+                    borderStyle: style.borderStyle,
+                    borderTopLeftRadius: style.borderTopLeftRadius,
+                    borderTopRightRadius: style.borderTopRightRadius,
+                    backgroundPosition: style.backgroundPosition,
+                    backgroundSize: style.backgroundSize
+                }, hoverStyle: {
+                    borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
+                    borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
+                    borderColor: hoverStyle.borderColor,
+                    borderStyle: hoverStyle.borderStyle,
+                    borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
+                    borderTopRightRadius: hoverStyle.borderTopRightRadius,
+                    backgroundPosition: hoverStyle.backgroundPosition,
+                    backgroundSize: hoverStyle.backgroundSize
+                } }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0) }), void 0) }), void 0));
+}
+var S_Image = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+    var src = _a.src;
+    return "url(" + src + ")";
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
+}, function (_a) {
+    var normalStyle = _a.normalStyle;
+    var isContain = normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
+    var isContain = hoverStyle.backgroundSize
+        ? hoverStyle.backgroundSize === 'contain'
+        : normalStyle.backgroundSize === 'contain';
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+});
+exports.default = Image;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,12 @@
+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;
+    CB_STYLE_PROP_IMAGE_SPEC_POSITION: ENUM_STRING;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:HOVER': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE:HOVER': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE:HOVER': ENUM_STRING | null | undefined;
+};

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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

@@ -0,0 +1,66 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/destructuring-assignment */
+var react_1 = require("react");
+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_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+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, 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';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
+        props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 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_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (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 }, { 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)] }, void 0));
+}
+function getBGColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
+}
+var S_RichTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-y: auto;\n  position: relative;\n\n  iframe {\n    max-width: 100%;\n  }\n"], ["\n  overflow-y: auto;\n  position: relative;\n\n  iframe {\n    max-width: 100%;\n  }\n"])));
+exports.default = RichText;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { default as RichText } from './RichText';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = void 0;
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return __importDefault(RichText_1).default; } });

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

@@ -0,0 +1,44 @@
+import type { BGColorPropsKeys, CB_STYLE_PROP_BGCOLOR_SPECS } from '../Youtube/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 = {
+    CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT: ENUM_STRING;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE: ENUM_STRING;
+};
+export declare type CB_STYLE_PROP_BGOVERLAY_SPECS = CB_STYLE_PROP_BGOVERLAY_SPECS_BASE & {
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | null | undefined;
+};
+export declare type BGOverlayPropsKeys = keyof CB_STYLE_PROP_BGOVERLAY_SPECS;
+export declare type BGOverlayValueSetType = Partial<Record<keyof CB_STYLE_PROP_BGOVERLAY_SPECS, NUMBER_INTEGER | ENUM_STRING | undefined>>;
+export declare type RichTextBGColorPropsKeys = BGColorPropsKeys;
+export declare type CB_STYLE_PROP_BGCOLOR_PROPS = CB_STYLE_PROP_BGCOLOR_SPECS;

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

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

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

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

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

@@ -0,0 +1,65 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/destructuring-assignment */
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var textUtil_1 = require("../../../../newUtils/textUtil");
+var util_1 = require("../../../../util");
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Text(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC;
+    var _c = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
+        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+    }), CLINKCursor = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
+    var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
+    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var hasEffect = props.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE !== 'NONE' &&
+        props.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] !== 'NONE';
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 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_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0) }), void 0)] }, void 0));
+}
+function getTextStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
+        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT',
+        'CB_STYLE_PROP_TEXT_SPEC_SIZE',
+        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
+        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
+        'CB_STYLE_PROP_TEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
+    ];
+    return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
+}
+exports.default = Text;