pds-dev-kit-web 2.1.13 → 2.1.15

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

@@ -0,0 +1,18 @@
+// import React from 'react';
+// import type { CB_CONTENT_PROP_CLINK } from '../types';
+// import type { Link } from 'react-router-dom';
+// function CLINKhandler({
+//   src,
+//   openNewTab,
+//   type
+// }: {
+//   src: string;
+//   openNewTab: boolean;
+//   type: CB_CONTENT_PROP_CLINK['CB_CONTENT_PROP_CLINK_SPEC_TYPE'];
+// }) {
+//   function onClickCLINK() {
+//     <Link />
+//   }
+//   return;
+// }
+// export default CLINKhandler;

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/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.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return __importDefault(ComponentBlock_1).default; } });

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

@@ -0,0 +1 @@
+export { ComponentBlock } from './ComponentBlock';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlock; } });

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

@@ -0,0 +1 @@
+export { useIntersectionObserver } from './useIntersectionObserver';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = void 0;
+var useIntersectionObserver_1 = require("./useIntersectionObserver");
+Object.defineProperty(exports, "useIntersectionObserver", { enumerable: true, get: function () { return useIntersectionObserver_1.useIntersectionObserver; } });

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

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+interface Args extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+}
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args): IntersectionObserverEntry | undefined;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = void 0;
+var react_1 = require("react");
+function useIntersectionObserver(elementRef, _a) {
+    var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
+    var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
+    var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
+    var updateEntry = function (_a) {
+        var entry = _a[0];
+        setEntry(entry);
+    };
+    (0, react_1.useEffect)(function () {
+        var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
+        var hasIOSupport = !!window.IntersectionObserver;
+        if (!hasIOSupport || frozen || !node)
+            return;
+        var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
+        var observer = new IntersectionObserver(updateEntry, observerParams);
+        observer.observe(node);
+        return function () { return observer.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen]);
+    return entry;
+}
+exports.useIntersectionObserver = useIntersectionObserver;

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

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

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

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

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/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.CustomSection = void 0;
+var CustomSection_1 = require("./CustomSection");
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return __importDefault(CustomSection_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil.d.ts

@@ -0,0 +1,31 @@
+import type { BTNColorValueSetType } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { BGOverlayValueSetType } from '../components/ComponentBlock/componentBlocks/RichText/types';
+import type { BGColorValueSetType } from '../components/ComponentBlock/componentBlocks/Youtube/types';
+import type { Device } from '../util/types';
+import type { CSSProperties } from 'react';
+declare type CBName = 'BTNCOLOR' | 'BGCOLOR' | 'BGOVERLAY';
+declare type ExtractPropKey<T extends CBName> = Extract<T, CBName>;
+declare type ValueSetType = BTNColorValueSetType & BGColorValueSetType & BGOverlayValueSetType;
+export declare type ParseStyleColorProps<T> = {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BTNCOLOR'>;
+    device: Device;
+} | {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BGCOLOR'>;
+    device: Device;
+} | {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BGOVERLAY'>;
+    device: Device;
+};
+export declare function parseStyleColorToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleColorProps<T>): {
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
+};
+export declare function getBtnColorStyles(value: ValueSetType, cbName: CBName): CSSProperties;
+export declare function getLinearGradientStyles(value: ValueSetType, cbName: CBName): CSSProperties;
+export {};

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

@@ -0,0 +1,71 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLinearGradientStyles = exports.getBtnColorStyles = exports.parseStyleColorToCSSProp = void 0;
+function parseStyleColorToCSSProp(_a) {
+    var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device;
+    var valueSet = availableSpecCodes.reduce(function (acc, currentKey) {
+        var _a, _b, _c;
+        var stringifiedKey = currentKey.toString();
+        var baseKey = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
+        var keyWithHover = baseKey.toString() + ":HOVER";
+        var value = props[baseKey];
+        var hoverValue = props[keyWithHover];
+        if (hoverValue === null || hoverValue === undefined) {
+            return { normal: __assign(__assign({}, acc.normal), (_a = {}, _a[currentKey] = value, _a)), hover: __assign({}, acc.hover) };
+        }
+        return {
+            normal: __assign(__assign({}, acc.normal), (_b = {}, _b[currentKey] = value, _b)),
+            hover: __assign(__assign({}, acc.hover), (_c = {}, _c[currentKey] = hoverValue, _c))
+        };
+    }, {
+        normal: {},
+        hover: {}
+    });
+    var style = getBtnColorStyles(valueSet.normal, propKey);
+    var hoverStyle = getBtnColorStyles(valueSet.hover, propKey);
+    return { style: style, hoverStyle: hoverStyle };
+}
+exports.parseStyleColorToCSSProp = parseStyleColorToCSSProp;
+function getBtnColorStyles(value, cbName) {
+    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"]
+        };
+        return style;
+    }
+    return getLinearGradientStyles(value, cbName);
+}
+exports.getBtnColorStyles = getBtnColorStyles;
+function getLinearGradientStyles(value, cbName) {
+    var angle = value["CB_STYLE_PROP_" + cbName + "_SPEC_ANGLE"];
+    var startColor = value["CB_STYLE_PROP_" + cbName + "_SPEC_STARTCOLOR"];
+    var startLoc = value["CB_STYLE_PROP_" + cbName + "_SPEC_STARTLOC"];
+    var endColor = value["CB_STYLE_PROP_" + cbName + "_SPEC_ENDCOLOR"];
+    var endLoc = value["CB_STYLE_PROP_" + cbName + "_SPEC_ENDLOC"];
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_GRADIENT"] === 'LINEAR') {
+        var gradient = angle + "deg, " + startColor + " " + startLoc + "%, " + endColor + " " + endLoc + "%";
+        var style = { background: "linear-gradient(" + gradient + ")" };
+        return style;
+    }
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_GRADIENT"] === 'RADIAL') {
+        var gradient = startColor + " " + startLoc + "%, " + endColor + " " + endLoc + "%";
+        var style = { background: "radial-gradient(" + gradient + ")" };
+        return style;
+    }
+    return {};
+}
+exports.getLinearGradientStyles = getLinearGradientStyles;

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

@@ -0,0 +1,2 @@
+export { parseStyleTextToCSSProp } from './textUtil';
+export { default as replaceUndefinedValues } from './replaceUndefinedValues';

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/replaceUndefinedValues.d.ts

@@ -0,0 +1,2 @@
+import type { AllCBProperties } from '../types';
+export default function replaceUndefinedValues(jsonData: AllCBProperties): AllCBProperties;

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

@@ -0,0 +1,40 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+function replaceUndefinedValues(jsonData) {
+    return Object.entries(jsonData).reduce(function (acc, cur) {
+        var _a;
+        var _b = cur, currentPropKey = _b[0], currentProps = _b[1];
+        var propKey = ['CB_STYLE_PROP', 'CB_EFFECT_PROP', 'CB_LAYOUT_PROP'];
+        var isIncludedPropKey = propKey.some(function (key) { return currentPropKey.includes(key); });
+        if (isIncludedPropKey) {
+            var specs = Object.keys(currentProps).reduce(function (accSpecs, curSpec) {
+                var isTargetNeedOverride = curSpec.endsWith(':MOBILE') &&
+                    (currentProps[curSpec] === undefined || currentProps[curSpec] === null);
+                if (isTargetNeedOverride) {
+                    var undefinedMobileKey = curSpec.replace(':MOBILE', '');
+                    if (undefinedMobileKey in currentProps) {
+                        accSpecs[curSpec] = currentProps[undefinedMobileKey];
+                    }
+                    else {
+                        accSpecs[curSpec] = currentProps[curSpec];
+                    }
+                }
+                return __assign({}, accSpecs);
+            }, currentProps);
+            return __assign(__assign({}, acc), (_a = {}, _a[currentPropKey] = specs, _a));
+        }
+        return acc;
+    }, jsonData);
+}
+exports.default = replaceUndefinedValues;

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.d.ts

@@ -0,0 +1,18 @@
+import type { Device } from '../util/types';
+export declare function parseStyleTextToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleTextProps<T>): {
+    style: {};
+    hoverStyle: {};
+};
+declare type ParseStyleTextProps<T> = {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: 'TEXT';
+    device: Device;
+} | {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: 'BTNTEXT';
+    device: Device;
+};
+export declare function getTextCSSPropKey(key: string, cbName: 'TEXT' | 'BTNTEXT'): "" | "color" | "letterSpacing" | "fontWeight" | "fontFamily" | "lineHeight" | "fontSize" | "HORIZONTAL" | "alignItems";
+export {};

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

@@ -0,0 +1,200 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var stringifiedKey = currentKey.toString();
+        var keyWithDevice = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
+        var keyWithHover = keyWithDevice.toString() + ":HOVER";
+        var cssPropertyKey = getTextCSSPropKey(stringifiedKey, propKey);
+        var value = props[keyWithDevice];
+        var hoverValue = props[keyWithHover];
+        if (cssPropertyKey === 'lineHeight') {
+            var numValue = typeof value === 'number' ? value / 100 : value;
+            var numHoverValue = typeof hoverValue === 'number' ? hoverValue / 100 : hoverValue;
+            if (numHoverValue === null || numHoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = numValue, _a)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = numValue, _b)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[cssPropertyKey] = numHoverValue, _c))
+            };
+        }
+        if (cssPropertyKey === 'fontFamily') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_d = {}, _d[cssPropertyKey] = getFontName(String(value)), _d)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_e = {}, _e[cssPropertyKey] = getFontName(String(value)), _e)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[cssPropertyKey] = getFontName(String(hoverValue)), _f))
+            };
+        }
+        if (cssPropertyKey === 'letterSpacing') {
+            var numValue = typeof value === 'number' ? Math.abs(+value) * (+value > 0 ? 0.01 : -0.01) + "em" : value;
+            var numHoverValue = typeof hoverValue === 'number'
+                ? Math.abs(+hoverValue) * (+hoverValue > 0 ? 0.01 : -0.01) + "em"
+                : hoverValue;
+            if (numHoverValue === null || numHoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_g = {}, _g[cssPropertyKey] = numValue, _g)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_h = {}, _h[cssPropertyKey] = numValue, _h)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_j = {}, _j[cssPropertyKey] = numHoverValue, _j))
+            };
+        }
+        if (cssPropertyKey === 'fontSize') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = value + "px", _k)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = value + "px", _l)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = hoverValue + "px", _m))
+            };
+        }
+        if (cssPropertyKey === 'HORIZONTAL') {
+            var horizontalObj = getHorizontalPositionValue(String(value));
+            var hoverHorizontalObj = getHorizontalPositionValue(String(hoverValue));
+            if (hoverValue === null || hoverValue === undefined) {
+                return { style: __assign(__assign({}, acc.style), horizontalObj), hoverStyle: __assign({}, acc.hoverStyle) };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), horizontalObj),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), hoverHorizontalObj)
+            };
+        }
+        if (cssPropertyKey === 'alignItems') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_o = {}, _o[cssPropertyKey] = getVerticalPositionValue(String(value)), _o.display = 'flex', _o)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_p = {}, _p[cssPropertyKey] = getVerticalPositionValue(String(value)), _p.display = 'flex', _p)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_q = {}, _q[cssPropertyKey] = getVerticalPositionValue(String(hoverValue)), _q))
+            };
+        }
+        if (hoverValue === null || hoverValue === undefined) {
+            return {
+                style: __assign(__assign({}, acc.style), (_r = {}, _r[cssPropertyKey] = value, _r)),
+                hoverStyle: __assign({}, acc.hoverStyle)
+            };
+        }
+        return {
+            style: __assign(__assign({}, acc.style), (_s = {}, _s[cssPropertyKey] = value, _s)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_t = {}, _t[cssPropertyKey] = hoverValue, _t))
+        };
+    }, {
+        style: {},
+        hoverStyle: {}
+    });
+}
+exports.parseStyleTextToCSSProp = parseStyleTextToCSSProp;
+function getTextCSSPropKey(key, cbName) {
+    switch (key) {
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_COLOR":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_COLOR:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_COLOR:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_COLOR:MOBILE:HOVER":
+            return 'color';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_TYPEFACE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_TYPEFACE:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_TYPEFACE:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_TYPEFACE:MOBILE:HOVER":
+            return 'fontFamily';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LETTERSPACING":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LETTERSPACING:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LETTERSPACING:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LETTERSPACING:MOBILE:HOVER":
+            return 'letterSpacing';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LINEHEIGHT":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LINEHEIGHT:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LINEHEIGHT:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_LINEHEIGHT:MOBILE:HOVER":
+            return 'lineHeight';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_SIZE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_SIZE:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_SIZE:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_SIZE:MOBILE:HOVER":
+            return 'fontSize';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT:MOBILE:HOVER":
+            return 'fontWeight';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:MOBILE:HOVER":
+            return 'HORIZONTAL';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:MOBILE:HOVER":
+            return 'alignItems';
+        default:
+            return '';
+    }
+}
+exports.getTextCSSPropKey = getTextCSSPropKey;
+function getFontName(value) {
+    switch (value) {
+        case 'SYSSANS':
+            return 'sans-serif';
+        case 'SYSSERIF':
+            return 'serif';
+        case 'PRETENDARD':
+            return 'Pretendard-Regular, sans-serif';
+        default:
+            return '';
+    }
+}
+function getHorizontalPositionValue(value) {
+    switch (value) {
+        case 'LEFT':
+            return { display: 'flex', justifyContent: 'flex-start', textAlign: 'left' };
+        case 'RIGHT':
+            return { display: 'flex', justifyContent: 'flex-end', textAlign: 'right' };
+        case 'CENTER':
+            return { display: 'flex', justifyContent: 'center', textAlign: 'center' };
+        default:
+            return {};
+    }
+}
+function getVerticalPositionValue(value) {
+    switch (value) {
+        case 'TOP':
+            return 'flex-start';
+        case 'BOTTOM':
+            return 'flex-end';
+        case 'MIDDLE':
+            return 'center';
+        default:
+            return '';
+    }
+}

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -0,0 +1,50 @@
+import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
+export declare type CB_TYPES = 'GENERAL';
+export declare type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER;
+declare type GeneralCustomSectionType = {
+    id: number;
+    type: 'GENERAL';
+    availablePlugins: Array<string>;
+    queryableTapSrc: string;
+    queryableDefinitionPreset: string;
+    dynamicLayoutSectionId: number;
+};
+export declare type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
+export declare type CB_TEXT_TYPE = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_TEXT;
+    properties: CB_TEXT_PROPERTIES_TYPE;
+};
+export declare type CB_BTN_TYPE = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_BTN;
+    properties: CB_BTN_PROPERTIES_TYPE;
+};
+export declare type CB_RICHTEXT = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_RICHTEXT;
+    properties: CB_RICHTEXT_PROPERTIES_TYPE;
+};
+export declare type CB_DIVIDER = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_DIVIDER;
+    properties: CB_DIVIDER_PROPERTIES_TYPE;
+};
+export declare type CB_IMG = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_IMG;
+    properties: CB_IMG_PROPERTIES_TYPE;
+};
+export declare type CB_YOUTUBE = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_YOUTUBE;
+    properties: CB_YOUTUBE_PROPERTIES_TYPE;
+};
+export declare type CB_TWITTER = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_TWITTER;
+    properties: CB_TWITTER_PROPERTIES_TYPE;
+};
+export declare enum CB_ALL_CODES {
+    CB_TEXT = "CB_TEXT",
+    CB_BTN = "CB_BTN",
+    CB_RICHTEXT = "CB_RICHTEXT",
+    CB_DIVIDER = "CB_DIVIDER",
+    CB_IMG = "CB_IMG",
+    CB_YOUTUBE = "CB_YOUTUBE",
+    CB_TWITTER = "CB_TWITTER"
+}
+export {};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CB_ALL_CODES = void 0;
+var CB_ALL_CODES;
+(function (CB_ALL_CODES) {
+    CB_ALL_CODES["CB_TEXT"] = "CB_TEXT";
+    CB_ALL_CODES["CB_BTN"] = "CB_BTN";
+    CB_ALL_CODES["CB_RICHTEXT"] = "CB_RICHTEXT";
+    CB_ALL_CODES["CB_DIVIDER"] = "CB_DIVIDER";
+    CB_ALL_CODES["CB_IMG"] = "CB_IMG";
+    CB_ALL_CODES["CB_YOUTUBE"] = "CB_YOUTUBE";
+    CB_ALL_CODES["CB_TWITTER"] = "CB_TWITTER";
+})(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));

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

@@ -0,0 +1,3 @@
+import { NamedContentPropType } from './types';
+import type { Device, StyleType } from '../types';
+export declare function parseContentProperties(namedProps: NamedContentPropType, device: Device): StyleType;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseContentProperties = void 0;
+var parseContentVisibility_1 = __importDefault(require("./parseContentVisibility"));
+var types_1 = require("./types");
+function parseContentProperties(namedProps, device) {
+    var name = namedProps.name;
+    switch (name) {
+        case types_1.CB_CONTENT_PROP_KEYS.CB_CONTENT_PROP_VISIBILITY:
+            return (0, parseContentVisibility_1.default)(namedProps, device);
+    }
+}
+exports.parseContentProperties = parseContentProperties;

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

@@ -0,0 +1,12 @@
+import type { Device, StyleType } from '../types';
+import type { CB_CONTENT_PROP_KEYS } from './types';
+export declare type CB_CONTENT_PROP_VISIBILITY_SPECS = {
+    CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
+    CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
+};
+export declare type NAMED_CB_CONTENT_VISIBILITY_PROPS = {
+    name: CB_CONTENT_PROP_KEYS.CB_CONTENT_PROP_VISIBILITY;
+    specs: CB_CONTENT_PROP_VISIBILITY_SPECS;
+};
+declare function parseContentVisibility(namedProps: NAMED_CB_CONTENT_VISIBILITY_PROPS, device: Device): StyleType;
+export default parseContentVisibility;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/contentPropParsers/parseContentVisibility.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function parseContentVisibility(namedProps, device) {
+    var specs = namedProps.specs;
+    if (device === 'DESKTOP') {
+        return {
+            style: {
+                visibility: specs.CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP ? 'visible' : 'hidden'
+            }
+        };
+    }
+    return {
+        style: {
+            visibility: specs.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB ? 'visible' : 'hidden'
+        }
+    };
+}
+exports.default = parseContentVisibility;

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

@@ -0,0 +1,5 @@
+import type { NAMED_CB_CONTENT_VISIBILITY_PROPS } from './parseContentVisibility';
+export declare enum CB_CONTENT_PROP_KEYS {
+    CB_CONTENT_PROP_VISIBILITY = "CB_CONTENT_PROP_VISIBILITY"
+}
+export declare type NamedContentPropType = NAMED_CB_CONTENT_VISIBILITY_PROPS;