@shopgate/engage 7.32.0-beta.2 → 7.32.0-beta.20

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, useResponsiveValue } from '@shopgate/engage/styles';
 import { useParallax } from 'react-scroll-parallax';
-import { IS_PAGE_PREVIEW_ACTIVE } from "../../constants";
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { parseImageUrl } from "../../helpers";
 
 /**
@@ -13,7 +13,7 @@ import { parseImageUrl } from "../../helpers";
 /**
  * @typedef {Object} CustomResponsiveImageProps
  * @property {boolean} [enableParallax] Whether to enable the parallax effect.
- * @property {number} [borderRadius] The border radius to apply to the image.
+ * @property {number|string} [borderRadius] The border radius to apply to the image.
  * @property {Breakpoint} [breakpoint] The breakpoint from which on a higher resolution image should
  * be loaded.
  * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
@@ -129,7 +129,7 @@ const ResponsiveWidgetImage = ({
       [classes.container]: !isBanner
     }),
     style: {
-      borderRadius: `${borderRadius}px`,
+      borderRadius,
       ...(!isBanner && enableParallax ? {
         aspectRatio: containerRatio
       } : {})
@@ -143,7 +143,7 @@ const ResponsiveWidgetImage = ({
       // height 0 until a resize forces the browser to re-evaluate. Load eagerly there; keep lazy
       // loading for the live app.
       ,
-      loading: IS_PAGE_PREVIEW_ACTIVE ? 'eager' : 'lazy',
+      loading: isAdminPreviewActive() ? 'eager' : 'lazy',
       className: cx(classes.preventSave, classes.image, {
         [classes.banner]: isBanner
       }, className),

package/page/components/ResponsiveWidgetImage/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ResponsiveWidgetImage";
+//# sourceMappingURL=index.d.ts.map

package/page/components/ResponsiveWidgetImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/index.js"],"names":[],"mappings":""}

package/page/components/WidgetRichText/WidgetRichText.d.ts

@@ -0,0 +1,25 @@
+export default WidgetRichText;
+/**
+ * @param {Object} props The component props.
+ * @param {string} props.content The rich text content.
+ * @param {string} [props.className] An optional class name.
+ * @returns {JSX.Element}
+ */
+declare function WidgetRichText({ content, className, }: {
+    content: string;
+    className?: string | undefined;
+}): JSX.Element;
+declare namespace WidgetRichText {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let content: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let content_1: string;
+        export { content_1 as content };
+        let className_1: null;
+        export { className_1 as className };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=WidgetRichText.d.ts.map

package/page/components/WidgetRichText/WidgetRichText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRichText.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/WidgetRichText.jsx"],"names":[],"mappings":";AA2DA;;;;;GAKG;AACH,yDAJG;IAAsB,OAAO,EAArB,MAAM;IACS,SAAS;CAChC,GAAU,GAAG,CAAC,OAAO,CAmBvB;;;;;;;;;;;;;sBAjFqB,YAAY"}

package/page/components/WidgetRichText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./WidgetRichText";
+//# sourceMappingURL=index.d.ts.map

package/page/components/WidgetRichText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/index.js"],"names":[],"mappings":""}

package/page/components/WidgetVideo/WidgetVideo.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+export interface WidgetVideoProps {
+    /**
+     * Whether the video is used in a banner.
+     */
+    isBanner?: boolean;
+    /**
+     * The video URL.
+     */
+    url?: string | null;
+    /**
+     * Whether the video is muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video is looping.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video controls are shown.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius value.
+     */
+    borderRadius?: number | string;
+    /**
+     * The link URL.
+     */
+    link?: string | null;
+}
+/**
+ * The WidgetVideo component is used to display a video in a widget.
+ */
+declare const WidgetVideo: ({ isBanner, url, muted, loop, controls, autoplay, borderRadius, link, }: WidgetVideoProps) => import("react").JSX.Element | null;
+export default WidgetVideo;
+//# sourceMappingURL=WidgetVideo.d.ts.map

package/page/components/WidgetVideo/WidgetVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/page/components/WidgetVideo/WidgetVideo.js

@@ -1,11 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { usePrevious, useAppEventOnReturnFromBackground } from '@shopgate/engage/core/hooks';
-import { ConditionalWrapper, Link } from '@shopgate/engage/components';
-import PropTypes from 'prop-types';
+import { ConditionalWrapper, Link as EngageLink } from '@shopgate/engage/components';
 import { isHttpsUrl } from "../../helpers";
+
+// `Link` is a redux-connected component whose react-redux connect() typing resolves its own props
+// (href/children) to `never`; alias it to its actual usable prop shape.
 import { jsx as _jsx } from "react/jsx-runtime";
+const Link = EngageLink;
+
+/**
+ * Style parameters for the widget video.
+ */
+
 const useStyles = makeStyles()((_theme, {
   borderRadius
 }) => ({
@@ -36,28 +44,22 @@ const useStyles = makeStyles()((_theme, {
   }
 }));
 
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+
 /**
  * The WidgetVideo component is used to display a video in a widget.
- * @param {Object} props The component props.
- * @param {boolean} props.isBanner Whether the video is used in a banner.
- * @param {string} props.url The video URL.
- * @param {boolean} props.muted Whether the video is muted.
- * @param {boolean} props.loop Whether the video is looping.
- * @param {boolean} props.controls Whether the video controls are shown.
- * @param {boolean} props.autoplay Whether the video should autoplay.
- * @param {number} props.borderRadius The border radius value.
- * @param {string} props.link The link URL.
- * @returns {JSX.Element}
  */
 const WidgetVideo = ({
-  isBanner,
-  url,
-  muted,
-  loop,
-  controls,
-  autoplay,
-  borderRadius,
-  link
+  isBanner = false,
+  url = null,
+  muted = false,
+  loop = false,
+  controls = false,
+  autoplay = false,
+  borderRadius = 0,
+  link = null
 }) => {
   const reduceMotion = useReduceMotion();
   const autoplayValue = reduceMotion ? false : isBanner || autoplay;
@@ -68,7 +70,7 @@ const WidgetVideo = ({
     borderRadius
   });
   const [hasError, setHasError] = useState(false);
-  const videoRef = React.useRef(null);
+  const videoRef = useRef(null);
   const prevUrl = usePrevious(url);
   const isValidUrl = useMemo(() => url ? isHttpsUrl(url) : false, [url]);
   const showControls = useMemo(() => {
@@ -81,25 +83,27 @@ const WidgetVideo = ({
 
   // Resume video playback when app returned from background
   useAppEventOnReturnFromBackground(() => {
-    if (!videoRef.current || reduceMotion || !autoplayValue) {
+    const video = videoRef.current;
+    if (!video || reduceMotion || !autoplayValue) {
       return;
     }
-    videoRef.current.play();
+    video.play();
   });
   useEffect(() => {
-    if (!videoRef.current) {
+    const video = videoRef.current;
+    if (!video) {
       return;
     }
     if (reduceMotion) {
       // Pause playback when reduced motion settings changed after video was rendered
-      videoRef.current.pause();
+      video.pause();
       return;
     }
     if (autoplayValue) {
-      videoRef.current.play();
+      video.play();
     } else {
-      videoRef.current.pause();
-      videoRef.current.currentTime = 0;
+      video.pause();
+      video.currentTime = 0;
     }
   }, [autoplayValue, reduceMotion]);
   useEffect(() => {
@@ -146,14 +150,4 @@ const WidgetVideo = ({
     })
   });
 };
-WidgetVideo.defaultProps = {
-  isBanner: false,
-  link: null,
-  url: null,
-  muted: false,
-  loop: false,
-  controls: false,
-  autoplay: false,
-  borderRadius: 0
-};
 export default WidgetVideo;

package/page/components/WidgetVideo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './WidgetVideo';
+//# sourceMappingURL=index.d.ts.map

package/page/components/WidgetVideo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/page/components/Widgets/Overlay.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+/**
+ * Props of the {@link Overlay} component.
+ */
+export interface OverlayProps {
+    /**
+     * The reference to the container element that holds the widgets.
+     */
+    containerRef: RefObject<HTMLDivElement>;
+}
+/**
+ * The Overlay component is used to highlight the active widget when preview mode is active.
+ * It also visualizes the margins of the widget and the borders to its sibling widgets.
+ */
+declare const Overlay: ({ containerRef, }: OverlayProps) => import("react").JSX.Element | null;
+export default Overlay;
+//# sourceMappingURL=Overlay.d.ts.map

package/page/components/Widgets/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EACqC,KAAK,SAAS,EACzD,MAAM,OAAO,CAAC;AA+Ff;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACzC;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,GAAI,mBAEd,YAAY,uCAmNd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/page/components/Widgets/Overlay.js

@@ -1,5 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { makeStyles, keyframes, colorToRgba } from '@shopgate/engage/styles';
 import { useRoute } from '@shopgate/engage/core/hooks';
 import { getScrollContainer } from "./helpers";
@@ -7,19 +6,15 @@ import { useWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
 
 /**
- * @typedef {Object} OverlayStyle
- * @property {number} top Style for the top position of the overlay.
- * @property {number} left Style for the left position of the overlay.
- * @property {number} width Style for the width of the overlay.
- * @property {number} height Style for the height of the overlay.
+ * Position and dimensions of a single overlay rectangle.
  */
 
 /**
- * @typedef {Object} MarginOverlayStyles
- * @property {OverlayStyle} top Style for the top margin overlay.
- * @property {OverlayStyle} left Style for the left margin overlay.
- * @property {OverlayStyle} bottom Style for the bottom margin overlay.
- * @property {OverlayStyle} right Style for the right margin overlay.
+ * Styles for the four margin overlays surrounding the active widget.
+ */
+
+/**
+ * Style parameters for the overlay.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles({
@@ -62,13 +57,13 @@ const useStyles = makeStyles({
   }
 }));
 
+/**
+ * Props of the {@link Overlay} component.
+ */
+
 /**
  * The Overlay component is used to highlight the active widget when preview mode is active.
  * It also visualizes the margins of the widget and the borders to its sibling widgets.
- * @param {Object} props The component props.
- * @param {React.Ref<HTMLDivElement>} props.containerRef The reference to the container element that
- * holds the widgets.
- * @returns {JSX.Element|null}
  */
 const Overlay = ({
   containerRef
@@ -84,17 +79,10 @@ const Overlay = ({
     activeWidget
   } = useWidgetsPreview();
 
-  /**
-   * State to hold the style for the main overlay that highlights the active widget.
-   * @type {[OverlayStyle|null, React.Dispatch<React.SetStateAction<OverlayStyle|null>>]}
-   */
+  // State to hold the style for the main overlay that highlights the active widget.
   const [mainOverlayStyle, setMainOverlayStyle] = useState(null);
 
-  /**
-   * State to hold the styles for the margin overlays that visualize the widget margins.
-   * @type {[MarginOverlayStyles|null,
-   * React.Dispatch<React.SetStateAction<MarginOverlayStyles|null>>]}
-   */
+  // State to hold the styles for the margin overlays that visualize the widget margins.
   const [marginOverlays, setMarginOverlays] = useState(null);
   const [isFlashing, setIsFlashing] = useState(false);
   const {
@@ -105,14 +93,7 @@ const Overlay = ({
     marginOverlayColor,
     isFlashing
   });
-
-  /**
-   * @type {import('react').MutableRefObject<ResizeObserver|null>}
-   */
   const resizeRef = useRef(null);
-  /**
-   * @type {import('react').MutableRefObject<MutationObserver|null>}
-   */
   const mutationRef = useRef(null);
 
   /**
@@ -128,6 +109,9 @@ const Overlay = ({
       return;
     }
     const scrollContainer = getScrollContainer();
+    if (!scrollContainer) {
+      return;
+    }
 
     // Get the computed styles of the active widget to calculate margins
     const styles = window.getComputedStyle(target);
@@ -191,33 +175,34 @@ const Overlay = ({
     if (!containerEl) return undefined;
 
     // Create a ResizeObserver to watch for size changes of children
-    resizeRef.current = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // Whenever any observed child resizes, update overlay
       updateOverlay();
     });
+    resizeRef.current = resizeObserver;
 
     // Observe all existing children
     Array.from(containerEl.children).forEach(child => {
       if (child.nodeType === Node.ELEMENT_NODE) {
-        resizeRef.current.observe(child);
+        resizeObserver.observe(child);
       }
     });
 
     // Create one MutationObserver on the container to watch for changes in the DOM
-    mutationRef.current = new MutationObserver(mutations => {
+    const mutationObserver = new MutationObserver(mutations => {
       for (const mutation of mutations) {
         if (mutation.type === 'childList') {
           // Handle newly added nodes - observe them for size changes
           mutation.addedNodes.forEach(node => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              resizeRef.current.observe(node);
+              resizeObserver.observe(node);
             }
           });
 
           // Handle removed nodes - remove them from observation
           mutation.removedNodes.forEach(node => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              resizeRef.current.unobserve(node);
+              resizeObserver.unobserve(node);
             }
           });
 
@@ -231,11 +216,12 @@ const Overlay = ({
         }
       }
     });
+    mutationRef.current = mutationObserver;
 
     // Start observing:
     // - childList:true → to catch added/removed children
     // - subtree:true + attributes:true → to catch any class/style changes in descendants
-    mutationRef.current.observe(containerEl, {
+    mutationObserver.observe(containerEl, {
       childList: true,
       subtree: true,
       attributes: true,

package/page/components/Widgets/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+/**
+ * Props of the {@link Tooltip} component.
+ */
+export interface TooltipProps {
+    /**
+     * The child elements to wrap.
+     */
+    children: ReactNode;
+    /**
+     * The tooltip text to display.
+     */
+    text?: string | null;
+}
+/**
+ * AI generated Tooltip component to display additional information on hover.
+ */
+declare function Tooltip({ children, text }: TooltipProps): import("react").JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/page/components/Widgets/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACwB,KAAK,SAAS,EAC5C,MAAM,OAAO,CAAC;AAwDf;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,YAAY,+BA0IhD;AAED,eAAe,OAAO,CAAC"}

package/page/components/Widgets/Tooltip.js

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,12 +55,12 @@ const useStyles = makeStyles()(theme => ({
   }
 }));
 
+/**
+ * Props of the {@link Tooltip} component.
+ */
+
 /**
  * AI generated Tooltip component to display additional information on hover.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child elements to wrap.
- * @param {string} props.text The tooltip text to display.
- * @returns {JSX.Element}
  */
 function Tooltip({
   children,
@@ -80,7 +79,7 @@ function Tooltip({
     top: 0
   });
   const [arrowLeft, setArrowLeft] = useState(null);
-  const [positionState, setPositionState] = useState('top'); // 'top' or 'bottom'
+  const [positionState, setPositionState] = useState('top');
   const tooltipId = useRef(Math.random().toString(36).slice(2, 11));
 
   // Handle mounting/unmounting and trigger fade animation
@@ -196,7 +195,4 @@ function Tooltip({
     }), document.body)]
   });
 }
-Tooltip.defaultProps = {
-  text: null
-};
 export default Tooltip;

package/page/components/Widgets/Widget.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType } from 'react';
+import { type WidgetDefinition } from './types';
+/**
+ * Props of the {@link Widget} component.
+ */
+export interface WidgetProps {
+    /**
+     * The widget component to render.
+     */
+    component: ComponentType<{
+        settings?: WidgetDefinition['widgetConfig'];
+    }>;
+    /**
+     * The widget definition data.
+     */
+    definition: WidgetDefinition;
+    /**
+     * Whether the widget is in preview mode.
+     */
+    isPreview: boolean;
+    /**
+     * Whether the widget is a legacy custom widget provided by an extension that's configured
+     * via an HTML comment inside a HTML widget.
+     */
+    isCustomLegacyWidget?: boolean;
+}
+/**
+ * The Widget component.
+ */
+declare const Widget: ({ component: Component, definition, isPreview, isCustomLegacyWidget, }: WidgetProps) => import("react").JSX.Element | null;
+export default Widget;
+//# sourceMappingURL=Widget.d.ts.map

package/page/components/Widgets/Widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC2B,KAAK,aAAa,EACnD,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,SAAS,CAAC;AAuCnE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/page/components/Widgets/Widget.js

@@ -1,11 +1,13 @@
-import React, { Suspense, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { Suspense, useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { makeStyles } from '@shopgate/engage/styles';
 import { VisibilityOffIcon, TimeIcon, Loading } from '@shopgate/engage/components';
 import { usePressHandler } from '@shopgate/engage/core/hooks';
+import { getWidgetMediaMargins } from '@shopgate/engage/settings/selectors/appSettings';
 import WidgetProvider from "./WidgetProvider";
 import { dispatchWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
+import { getAppliedMediaMargins, resolveWidgetLayout } from "./helpers";
 import Tooltip from "./Tooltip";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
@@ -46,38 +48,24 @@ const useStyles = makeStyles()((theme, {
 }));
 
 /**
- * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */
-
-/**
- * @typedef {import('./types').ScheduledStatus} ScheduledStatus
+ * Props of the {@link Widget} component.
  */
 
 /**
  * The Widget component.
- * @param {Object} props The component props.
- * @param {React.ComponentType} props.component The widget component to render.
- * @param {WidgetDefinition} props.definition The widget definition data.
- * @param {boolean} props.isPreview Whether the widget is in preview mode.
- * @param {boolean} props.isCustomLegacyWidget Whether the widget is a legacy custom widget provided
- * by an extension that's configured via an HTML comment inside a HTML widget.
- * @returns {JSX.Element}
  */
 const Widget = ({
   component: Component,
   definition,
   isPreview,
-  isCustomLegacyWidget
+  isCustomLegacyWidget = false
 }) => {
+  const mediaMargins = useSelector(getWidgetMediaMargins);
+  const layout = useMemo(() => resolveWidgetLayout(definition?.layout, getAppliedMediaMargins(definition?.widgetConfigDefinitionCode), mediaMargins), [definition, mediaMargins]);
   const {
     classes,
     cx
-  } = useStyles({
-    marginTop: definition?.layout?.marginTop ?? 0,
-    marginBottom: definition?.layout?.marginBottom ?? 0,
-    marginLeft: definition?.layout?.marginLeft ?? 0,
-    marginRight: definition?.layout?.marginRight ?? 0
-  });
+  } = useStyles(layout);
   const {
     setActiveWidget,
     activeWidget
@@ -100,10 +88,10 @@ const Widget = ({
       [classes.preview]: isPreview
     }),
     style: {
-      marginTop: definition?.layout?.marginTop,
-      marginBottom: definition?.layout?.marginBottom,
-      marginLeft: definition?.layout?.marginLeft,
-      marginRight: definition?.layout?.marginRight
+      marginTop: layout.marginTop || undefined,
+      marginBottom: layout.marginBottom || undefined,
+      marginLeft: layout.marginLeft || undefined,
+      marginRight: layout.marginRight || undefined
     },
     "data-widget-name": definition.widgetConfigDefinitionCode,
     ...(isPreview && {
@@ -127,6 +115,7 @@ const Widget = ({
     }), /*#__PURE__*/_jsx(WidgetProvider, {
       definition: definition,
       isPreview: isPreview,
+      layout: layout,
       children: /*#__PURE__*/_jsx(Suspense, {
         fallback: /*#__PURE__*/_jsx(Loading, {}),
         children: /*#__PURE__*/_jsx(Component, {
@@ -138,7 +127,4 @@ const Widget = ({
     })]
   });
 };
-Widget.defaultProps = {
-  isCustomLegacyWidget: false
-};
 export default Widget;