pds-dev-kit-web-test 0.2.2 → 0.2.4

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

@@ -0,0 +1,52 @@
+"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 @typescript-eslint/no-unused-vars */
+var newUtils_1 = require("../../newUtils");
+var types_1 = require("../../types");
+require("../../util");
+var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
+var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
+var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
+var RichText_1 = require("./componentBlocks/RichText");
+var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
+var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
+var Youtube_1 = require("./componentBlocks/Youtube");
+function ComponentBlockMatcher(props) {
+    var device = 'MOBILE';
+    var id = props.id, type = props.type, availablePlugins = props.availablePlugins, queryableTapSrc = props.queryableTapSrc, queryableDefinitionPreset = props.queryableDefinitionPreset, dynamicLayoutSectionId = props.dynamicLayoutSectionId, componentBlockCode = props.componentBlockCode, properties = props.properties;
+    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(properties) : properties;
+    switch (componentBlockCode) {
+        case types_1.CB_ALL_CODES.CB_BTN:
+            return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_TEXT:
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_RICHTEXT:
+            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_DIVIDER:
+            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_IMG:
+            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_TWITTER:
+            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue), void 0);
+        case types_1.CB_ALL_CODES.CB_YOUTUBE:
+            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue), void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" }, void 0);
+    }
+}
+exports.default = ComponentBlockMatcher;

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

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

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

@@ -0,0 +1,79 @@
+"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("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var newUtils_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Button(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB;
+    var onClickBox = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
+    });
+    var handleOnClick = function () {
+        if (mode === 'EDIT') {
+            return;
+        }
+        onClickBox();
+    };
+    var _c = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _c.style, btnTextHoverStyle = _c.hoverStyle;
+    var _d = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _d.style, btnColorHoverStyle = _d.hoverStyle;
+    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), hoverStyle: __assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), onClick: handleOnClick, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+}
+function getBTNStyles(props, device) {
+    var availableSpecCodes = [
+        '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'
+    ];
+    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,68 @@
+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_TYPEFACE:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
+    'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | 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;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT:MOBILE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_GRADIENT | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE | undefined;
+    'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE:MOBILE:HOVER': CB_STYLE_PROP_BTNCOLOR_ENUM_TYPE | 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,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 __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("@sub/DynamicLayout");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+function Divider(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {}, ref: cbRef }, { 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));
+}
+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,117 @@
+"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("@sub/DynamicLayout");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var 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 onClickBox = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
+    });
+    var _c = (0, util_1.parseProperties)(props, device), style = _c.style, hoverStyle = _c.hoverStyle, layout = _c.layout, effect = _c.effect;
+    var _d = imageStyleDivideProvider(style), componentStyle = _d.componentStyle, wrapperStyle = _d.wrapperStyle;
+    var _e = imageStyleDivideProvider(hoverStyle), hoverComponentStyle = _e.componentStyle, hoverWrapperStyle = _e.wrapperStyle;
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var handleOnClick = function () {
+        if (mode === 'EDIT')
+            return;
+        onClickBox();
+    };
+    return ((0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, ref: cbRef, onClick: handleOnClick }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ normalStyle: componentStyle, hoverStyle: hoverComponentStyle }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: { objectFit: hoverComponentStyle.objectFit } }, void 0) }), void 0) }), void 0));
+}
+function imageStyleDivideProvider(style) {
+    return {
+        componentStyle: {
+            alignItems: style.alignItems,
+            display: style.display,
+            justifyContent: style.justifyContent,
+            objectFit: style.objectFit
+        },
+        wrapperStyle: {
+            borderBottomLeftRadius: style.borderBottomLeftRadius,
+            borderBottomRightRadius: style.borderBottomRightRadius,
+            borderColor: style.borderColor,
+            borderStyle: style.borderStyle,
+            borderTopLeftRadius: style.borderTopLeftRadius,
+            borderTopRightRadius: style.borderTopRightRadius,
+            borderWidth: style.borderWidth,
+            boxShadow: style.boxShadow,
+            opacity: style.opacity,
+            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 normalStyle = _a.normalStyle;
+    switch (normalStyle.objectFit) {
+        case 'cover':
+            return "height: 100%;\n        width: 100%;";
+        default:
+            return "height: auto;\n        width: auto";
+    }
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    switch (hoverStyle.objectFit) {
+        case 'cover':
+            return "height: 100%;\n        width: 100%;";
+        default:
+            return "height: auto;\n        width: auto";
+    }
+}, 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);
+});
+exports.default = Image;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+export declare type ImagePropsKeys = keyof CB_IMAGE_STYLE_PROPS;
+export declare type CB_IMAGE_STYLE_PROPS = {
+    CB_STYLE_PROP_IMAGE_SPEC_FIT: STRING_PLAIN;
+    CB_STYLE_PROP_IMAGE_SPEC_POSITION: ENUM_STRING;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:HOVER': STRING_PLAIN;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE': STRING_PLAIN | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_FIT:MOBILE:HOVER': STRING_PLAIN | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_IMAGE_SPEC_POSITION:MOBILE:HOVER': ENUM_STRING | 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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+declare type Props = CB_RICHTEXT_PROPERTIES_TYPE;
+declare function RichText(props: Props): JSX.Element;
+export default RichText;

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

@@ -0,0 +1,62 @@
+"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("@sub/DynamicLayout");
+var RichText_1 = require("@sub/DynamicLayout/components/ComponentBlocks/RichText");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+function RichText(props) {
+    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 _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: 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));
+}
+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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+export declare type CB_STYLE_PROP_BGOVERLAY_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
+export declare type CB_STYLE_PROP_BGOVERLAY_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
+export declare type CB_STYLE_PROP_BGOVERLAY_SPECS_BASE = {
+    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;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | 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,58 @@
+"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("@sub/DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var textUtil_1 = require("../../../../newUtils/textUtil");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Text(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB;
+    var onClickBox = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB
+    });
+    var _c = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _c.style, textHoverStyle = _c.hoverStyle;
+    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: onClickBox, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), 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'
+    ];
+    return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
+}
+exports.default = Text;