pds-dev-kit-web 2.1.13 → 2.1.15

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/index.d.ts

@@ -0,0 +1,2 @@
+import TwitterTimeline from './TwitterTimeline';
+export { TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/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.TwitterTimeline = void 0;
+var TwitterTimeline_1 = __importDefault(require("./TwitterTimeline"));
+exports.TwitterTimeline = TwitterTimeline_1.default;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/Wrapper.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare type ComponentBlockWrapperPropTypes = {
+    children?: React.ReactNode;
+    boxSizing?: 'border-box' | 'content-box';
+    width?: number;
+    height?: number;
+    alignVertical?: 'top' | 'center' | 'bottom';
+    alignHorizontal?: 'left' | 'center' | 'right';
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    zIndex?: number;
+    borderType?: 'none' | 'solid' | 'dashed' | 'dotted';
+    borderSize?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    backgroundType?: 'solid' | 'gradient';
+    backgroundColor?: string;
+    backgroundGradientType?: 'linear' | 'circular';
+    backgroundGradientStartColor?: string;
+    backgroundGradientStartPosition?: number;
+    backgroundGradientEndColor?: string;
+    backgroundGradientEndPosition?: number;
+    backgroundGradientDegree?: number;
+    shadowType?: 'outside' | 'inside';
+    shadowColor?: string;
+    shadowHorizontalDistance?: number;
+    shadowVerticalDistance?: number;
+    shadowBlur?: number;
+    shadowSpread?: number;
+    opacity?: number;
+};
+declare const Wrapper: import("react").ForwardRefExoticComponent<ComponentBlockWrapperPropTypes & import("react").RefAttributes<HTMLDivElement>>;
+export default Wrapper;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/Wrapper.js

@@ -0,0 +1,141 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var Wrapper = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, args = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ ref: ref }, args, { children: children }), void 0));
+});
+var ShadowStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), function (_a) {
+    var shadowType = _a.shadowType, shadowColor = _a.shadowColor, shadowHorizontalDistance = _a.shadowHorizontalDistance, shadowVerticalDistance = _a.shadowVerticalDistance, shadowBlur = _a.shadowBlur, shadowSpread = _a.shadowSpread;
+    var isInset = shadowType === 'inside';
+    return (isInset ? 'inset' : '') + " " + shadowHorizontalDistance + "px " + shadowVerticalDistance + "px " + shadowBlur + "px " + shadowSpread + "px " + shadowColor;
+});
+var S_Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", "px;\n  box-sizing: ", ";\n  display: flex;\n  height: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  border: ", ";\n  border-radius: ", "px;\n  box-sizing: ", ";\n  display: flex;\n  height: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var _b = _a.borderSize, borderSize = _b === void 0 ? 0 : _b, _c = _a.borderType, borderType = _c === void 0 ? 'none' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '' : _d;
+    return borderSize + "px " + borderType + " " + borderColor;
+}, function (_a) {
+    var _b = _a.borderRadius, borderRadius = _b === void 0 ? 0 : _b;
+    return borderRadius;
+}, function (_a) {
+    var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'content-box' : _b;
+    return boxSizing;
+}, function (_a) {
+    var _b = _a.height, height = _b === void 0 ? '100%' : _b;
+    return height;
+}, function (_a) {
+    var _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
+    return opacity;
+}, function (_a) {
+    var _b = _a.paddingBottom, paddingBottom = _b === void 0 ? 0 : _b;
+    return paddingBottom;
+}, function (_a) {
+    var _b = _a.paddingLeft, paddingLeft = _b === void 0 ? 0 : _b;
+    return paddingLeft;
+}, function (_a) {
+    var _b = _a.paddingRight, paddingRight = _b === void 0 ? 0 : _b;
+    return paddingRight;
+}, function (_a) {
+    var _b = _a.paddingTop, paddingTop = _b === void 0 ? 0 : _b;
+    return paddingTop;
+}, function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '100%' : _b;
+    return width;
+}, function (_a) {
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 0 : _b;
+    return zIndex;
+}, function (_a) {
+    var _b = _a.alignVertical, alignVertical = _b === void 0 ? 'top' : _b;
+    switch (alignVertical) {
+        case 'top':
+            return 'align-Items: flex-start';
+        case 'center':
+            return 'align-Items: center';
+        case 'bottom':
+            return 'align-Items: flex-end';
+        default:
+            return 'align-Items: flex-start';
+    }
+}, function (_a) {
+    var _b = _a.alignHorizontal, alignHorizontal = _b === void 0 ? 'left' : _b;
+    switch (alignHorizontal) {
+        case 'left':
+            return 'justify-content: flex-start';
+        case 'center':
+            return 'justify-content: center';
+        case 'right':
+            return 'justify-content: flex-end';
+        default:
+            return 'justify-content: flex-start';
+    }
+}, function (_a) {
+    var _b = _a.backgroundType, backgroundType = _b === void 0 ? 'solid' : _b;
+    switch (backgroundType) {
+        case 'solid':
+            return BackgroundSolidType;
+        case 'gradient':
+            return BackgroundGradientType;
+        default:
+            return BackgroundSolidType;
+    }
+}, ShadowStyle);
+var BackgroundSolidType = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return (backgroundColor ? backgroundColor : 'none');
+});
+var BackgroundGradientType = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var _b = _a.backgroundGradientType, backgroundGradientType = _b === void 0 ? 'linear' : _b, _c = _a.backgroundGradientStartColor, backgroundGradientStartColor = _c === void 0 ? 'white' : _c, _d = _a.backgroundGradientStartPosition, backgroundGradientStartPosition = _d === void 0 ? 0 : _d, _e = _a.backgroundGradientEndColor, backgroundGradientEndColor = _e === void 0 ? 'black' : _e, _f = _a.backgroundGradientEndPosition, backgroundGradientEndPosition = _f === void 0 ? 100 : _f, _g = _a.backgroundGradientDegree, backgroundGradientDegree = _g === void 0 ? 90 : _g;
+    var isRadial = backgroundGradientType === 'circular';
+    var gradientType = isRadial ? 'radial' : backgroundGradientType;
+    var degree = isRadial ? '' : backgroundGradientDegree + "deg,";
+    return gradientType + "-gradient(" + degree + " " + backgroundGradientStartColor + " " + backgroundGradientStartPosition + "%, " + backgroundGradientEndColor + " " + backgroundGradientEndPosition + "%)";
+});
+exports.default = Wrapper;
+Wrapper.displayName = 'Wrapper';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/constants.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentBlockWrapperPropTypes } from './Wrapper';
+export declare const WrapperDefaultOptions: ComponentBlockWrapperPropTypes;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/constants.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapperDefaultOptions = void 0;
+exports.WrapperDefaultOptions = {
+    width: 600,
+    height: 400,
+    alignHorizontal: 'center',
+    alignVertical: 'center',
+    paddingBottom: 20,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 20,
+    zIndex: 0,
+    borderType: 'dotted',
+    borderSize: 5,
+    borderColor: 'dodgerblue',
+    borderRadius: 30,
+    backgroundType: 'gradient',
+    backgroundColor: 'gray',
+    backgroundGradientType: 'circular',
+    backgroundGradientStartColor: 'blue',
+    backgroundGradientStartPosition: 0,
+    backgroundGradientEndColor: 'lightblue',
+    backgroundGradientEndPosition: 100,
+    backgroundGradientDegree: 90,
+    shadowType: 'outside',
+    shadowColor: 'gray',
+    shadowHorizontalDistance: 15,
+    shadowVerticalDistance: 10,
+    shadowBlur: 3,
+    shadowSpread: 3,
+    opacity: 0.85
+};

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/index.d.ts

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

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

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.d.ts

@@ -0,0 +1,4 @@
+import { RichText, RichTextPropTypes } from './RichText';
+import { Text, TextPropTypes } from './Text';
+import { TwitterTimeline } from './TwitterTimeline';
+export { RichText, RichTextPropTypes, Text, TextPropTypes, TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwitterTimeline = exports.Text = exports.RichText = void 0;
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var TwitterTimeline_1 = require("./TwitterTimeline");
+Object.defineProperty(exports, "TwitterTimeline", { enumerable: true, get: function () { return TwitterTimeline_1.TwitterTimeline; } });

package/dist/src/sub/DynamicLayout/components/EditModeSectionMatcher/EditModeSectionMatcher.js

@@ -36,6 +36,9 @@ function EditModeSectionMatcher(_a) {
 exports.default = EditModeSectionMatcher;
 function Matcher(_a) {
     var props = __rest(_a, []);
+    if (props.type === 'CUSTOM') {
+        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props), void 0);
+    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':

package/dist/src/sub/DynamicLayout/components/Section/CustomSection.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import type { ISection } from '../../types';
+declare type SectionPropTypes = ISection & {
+    children?: React.ReactNode;
+} & {
+    overrideStyles?: CSSProperties;
+    isMobile?: boolean;
+};
+declare function CustomSection({ children, overrideStyles, isMobile, ...props }: SectionPropTypes): JSX.Element;
+export default CustomSection;

package/dist/src/sub/DynamicLayout/components/Section/CustomSection.js

@@ -0,0 +1,46 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 styled_components_1 = __importDefault(require("styled-components"));
+var CustomSectionBackground_1 = __importDefault(require("./components/CustomSectionBackground"));
+var sectionContext_1 = require("./sectionContext");
+function CustomSection(_a) {
+    var _b;
+    var children = _a.children, overrideStyles = _a.overrideStyles, _c = _a.isMobile, isMobile = _c === void 0 ? false : _c, props = __rest(_a, ["children", "overrideStyles", "isMobile"]);
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(CustomSectionBackground_1.default, { isMobile: isMobile }, void 0), children] }), void 0) }), void 0));
+}
+var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
+    var isIframeSection = _a.isIframeSection;
+    return (isIframeSection ? '100%' : 'auto');
+});
+exports.default = CustomSection;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/Section/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+};
+declare type State = {
+    hasError: boolean;
+};
+declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    static getDerivedStateFromError(): State;
+    reset(): void;
+    render(): React.ReactNode;
+}
+export default ErrorBoundary;

package/dist/src/sub/DynamicLayout/components/Section/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,62 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 */
+/* eslint-disable no-console */
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hasError: false
+        };
+        return _this;
+    }
+    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    };
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true };
+    };
+    ErrorBoundary.prototype.reset = function () {
+        this.setState({
+            hasError: false
+        });
+    };
+    ErrorBoundary.prototype.render = function () {
+        var hasError = this.state.hasError;
+        if (hasError) {
+            return (0, jsx_runtime_1.jsx)(ErrorWrapper, { children: "Error" }, void 0);
+        }
+        var children = this.props.children;
+        return children;
+    };
+    return ErrorBoundary;
+}(react_1.Component));
+var ErrorWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+exports.default = ErrorBoundary;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/components/Section/ErrorBoundary/index.d.ts

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

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

package/dist/src/sub/DynamicLayout/components/Section/Section.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import type { ISection } from '../../types';
-declare function Section({ children, ...props }: ISection & {
+declare type SectionPropTypes = ISection & {
     children?: React.ReactNode;
-}): JSX.Element;
+} & {
+    overrideStyles?: CSSProperties;
+};
+declare function Section({ children, overrideStyles, ...props }: SectionPropTypes): JSX.Element;
 export default Section;

package/dist/src/sub/DynamicLayout/components/Section/Section.js

@@ -36,8 +36,10 @@ var pdsOriginal_1 = require("../pdsOriginal");
 var YouTubeIframe_1 = require("../YouTubeIframe");
 var sectionContext_1 = require("./sectionContext");
 function Section(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: props }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ isIframeSection: props.manifest.schema === 'EXP_IFRAME' }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
+    var _b;
+    var children = _a.children, overrideStyles = _a.overrideStyles, props = __rest(_a, ["children", "overrideStyles"]);
+    var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
+    return ((0, jsx_runtime_1.jsx)(sectionContext_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: ((_b = props.manifest) === null || _b === void 0 ? void 0 : _b.schema) === 'EXP_IFRAME', onMouseEnter: function () { return setIsHover(true); }, onMouseMove: function () { return !isHover && setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } }, { children: [(0, jsx_runtime_1.jsx)(Background, {}, void 0), children] }), void 0) }), void 0));
 }
 var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  box-sizing: border-box;\n  height: ", ";\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
     var isIframeSection = _a.isIframeSection;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare function CustomSectionBackground({ isMobile }: {
+    isMobile?: boolean;
+}): JSX.Element;
+export default CustomSectionBackground;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js

@@ -0,0 +1,72 @@
+"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");
+var react_1 = require("react");
+var util_1 = require("../../../../DynamicLayout/sections/CustomSection/util");
+var isNullOrUndefined_1 = __importDefault(require("../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var sectionContext_1 = require("../sectionContext");
+var CustomSectionBackgroundMedia_1 = require("./CustomSectionBackgroundMedia");
+function CustomSectionBackground(_a) {
+    var _b = _a.isMobile, isMobile = _b === void 0 ? false : _b;
+    var context = (0, react_1.useContext)(sectionContext_1.sectionContext);
+    var id = context.id, jsonProperties = context.jsonProperties;
+    var backgroundRef = (0, react_1.useRef)(null);
+    var _c = jsonProperties || {}, CB_STYLE_PROP_BGOVERLAY = _c.CB_STYLE_PROP_BGOVERLAY, CB_STYLE_PROP_BGMEDIA = _c.CB_STYLE_PROP_BGMEDIA;
+    var _d = (0, util_1.parseJsonProperties)(jsonProperties, isMobile ? 'MOBILE' : 'DESKTOP'), style = _d.style, overlayStyle = _d.overlayStyle, effect = _d.effect;
+    var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
+    var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
+    var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOverlay && CB_STYLE_PROP_BGOVERLAY && ((0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", style: __assign({}, overlayStyle) }, void 0)), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: id, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef }, void 0)) }), void 0)] }, void 0));
+}
+function getIsOverlay(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE !== 'NONE';
+}
+function getIsBgMedia(isMobile, specs) {
+    if (!specs) {
+        return false;
+    }
+    if (isMobile) {
+        return specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'] !== 'NONE';
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE !== 'NONE';
+}
+function getMediaType(isMobile, specs) {
+    if (!specs) {
+        return 'NONE';
+    }
+    if (isMobile) {
+        return (0, isNullOrUndefined_1.default)(specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'])
+            ? specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE
+            : specs['CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE'];
+    }
+    return specs.CB_STYLE_PROP_BGMEDIA_SPEC_TYPE;
+}
+var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));
+var S_CustomBackgroundOverlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -1;\n"])));
+exports.default = CustomSectionBackground;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.d.ts

@@ -0,0 +1,14 @@
+import { MutableRefObject } from 'react';
+import { CSSProperties } from 'styled-components';
+import type { Device } from '../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_STYLE_PROP_BGMEDIA_SPECS } from '../../../../DynamicLayout/types';
+declare type Props = {
+    specs: CB_STYLE_PROP_BGMEDIA_SPECS;
+    playerId: number;
+    mediaType: string;
+    componentStyle: CSSProperties;
+    device: Device;
+    backgroundRef: MutableRefObject<HTMLDivElement | null>;
+};
+export declare function CustomSectionBackgroundMedia({ specs, playerId, mediaType, componentStyle, device, backgroundRef }: Props): JSX.Element;
+export {};