@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/orders/components/OrderHistory/OrderHistoryList.js

@@ -1,20 +1,16 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n, CardList, Link } from '@shopgate/engage/components';
+import { I18n, Card, Link } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig, themeColors, themeName } from '@shopgate/pwa-common/helpers/config';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { getOrderDetailsRoute } from "../../helpers/orderDetails";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
 const useStyles = makeStyles()(theme => ({
   orderNumber: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   list: {
-    background: 'var(--color-background-accent)',
     marginBottom: theme.spacing(-1.5)
   },
   cardContent: {
@@ -35,10 +31,7 @@ const useStyles = makeStyles()(theme => ({
     ':last-of-type': {
       marginBottom: 0
     },
-    background: themeColors.light,
-    boxSizing: 'border-box',
-    boxShadow: themeConfig.shadows.productCard,
-    borderRadius: isIOS ? 10 : 2
+    boxSizing: 'border-box'
   }
 }));
 
@@ -51,9 +44,10 @@ export const Row = props => {
   const {
     classes
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList.Item, {
+  return /*#__PURE__*/_jsx(Card, {
     className: classes.card,
     onClick: props.openDetails,
+    component: "li",
     children: /*#__PURE__*/_jsxs(Link, {
       className: classes.cardContent,
       href: getOrderDetailsRoute(props.orderNumber),
@@ -103,10 +97,11 @@ export const List = ({
   children
 }) => {
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
-  return /*#__PURE__*/_jsx(CardList, {
-    className: classes.list,
+  return /*#__PURE__*/_jsx("ul", {
+    className: cx(classes.list, 'engage__orders__order-history-list'),
     children: children
   });
 };

package/orders/components/OrderHistory/OrderHistoryTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAmCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBAxGqB,YAAY"}
+{"version":3,"file":"OrderHistoryTable.d.ts","sourceRoot":"","sources":["../../../../orders/components/OrderHistory/OrderHistoryTable.jsx"],"names":[],"mappings":"AAsCO,gCAHI,MAAM,GACJ,GAAG,CAkCf;;;;;;;;;;;;AAiBM,oCAHI,MAAM,GACJ,GAAG,CAuBf;;;;;;;sBA3GqB,YAAY"}

package/orders/components/OrderHistory/OrderHistoryTable.js

@@ -6,10 +6,13 @@ import { i18n } from '@shopgate/engage/core/helpers';
 import { getTranslatedOrderStatus } from "../../helpers";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
+  card: {
+    margin: '5px 5px 10px'
+  },
   tableHeader: {
     '& > th': {
       padding: theme.spacing(2),
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       textOverflow: 'ellipsis',
       overflow: 'hidden'
     }
@@ -79,6 +82,7 @@ export const Table = ({
     classes
   } = useStyles();
   return /*#__PURE__*/_jsx(Card, {
+    className: classes.card,
     children: /*#__PURE__*/_jsxs("table", {
       children: [/*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsxs("tr", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.6",
+  "version": "7.32.0-beta.10",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,18 +18,18 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.31.6",
-    "@shopgate/pwa-common-commerce": "7.31.6",
-    "@shopgate/pwa-core": "7.31.6",
-    "@shopgate/pwa-ui-ios": "7.31.6",
-    "@shopgate/pwa-ui-material": "7.31.6",
-    "@shopgate/pwa-ui-shared": "7.31.6",
+    "@shopgate/pwa-common": "7.32.0-beta.10",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.10",
+    "@shopgate/pwa-core": "7.32.0-beta.10",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.10",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.10",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.10",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
     "color": "^4.2.3",
     "focus-trap-react": "^10.3.1",
-    "immer": "^11.1.3",
+    "immer": "^11.1.11",
     "intersection-observer": "^0.6.0",
     "leaflet": "^1.8.0",
     "leaflet-gesture-handling": "^1.2.2",
@@ -37,15 +37,16 @@
     "moment": "^2.30.1",
     "react-helmet": "^6.1.0",
     "react-leaflet": "^3.2.5",
-    "react-phone-number-input": "^3.4.14",
+    "react-phone-number-input": "^3.4.17",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
     "react-scroll-parallax": "^3.5.0",
     "react-transition-group": "^4.4.5",
-    "tss-react": "4.9.20",
+    "tss-react": "4.9.21",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
+    "@shopgate/pwa-unit-test": "7.31.3",
     "@types/color": "^4.2.0",
     "@types/lodash": "^4.17.24",
     "@types/react-dom": "^17.0.2",

package/page/components/NotFound.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ */
+declare const NotFound: () => import("react").JSX.Element;
+export default NotFound;
+//# sourceMappingURL=NotFound.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/page/components/NotFound.js

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { historyPop, historyResetTo } from '@shopgate/pwa-common/actions/router';
 import { i18n, INDEX_PATH } from "../../core";
@@ -15,11 +15,7 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     paddingTop: theme.spacing(8)
   },
-  text: {
-    fontSize: '1.5rem'
-  },
   button: {
-    width: '100%',
     maxWidth: 250
   },
   buttonContainer: {
@@ -35,7 +31,6 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The NotFoundPage component renders a "Page Not Found" view
  * with options to navigate back or to the home page.
- * @returns {JSX.Element}
  */
 const NotFound = () => {
   const {
@@ -50,22 +45,28 @@ const NotFound = () => {
   }, [dispatch]);
   return /*#__PURE__*/_jsxs("div", {
     className: classes.wrapper,
-    children: [/*#__PURE__*/_jsx(I18n.Text, {
-      className: classes.text,
-      string: "page.not_found"
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h2",
+      component: "div",
+      fontWeight: "regular",
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "page.not_found"
+      })
     }), /*#__PURE__*/_jsxs("div", {
       className: classes.buttonContainer,
-      children: [/*#__PURE__*/_jsx(RippleButton, {
+      children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleBack,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "common.back"
         })
-      }), /*#__PURE__*/_jsx(RippleButton, {
+      }), /*#__PURE__*/_jsx(Button, {
         onClick: handleHome,
+        color: "primary",
+        fullWidth: true,
         className: classes.button,
-        type: "secondary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "navigation.back",
           params: {

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

@@ -0,0 +1,52 @@
+export default Protector;
+export type OnImageRatioChange = (ratio: string) => any;
+export type CustomResponsiveImageProps = {
+    /**
+     * Whether to enable the parallax effect.
+     */
+    enableParallax?: boolean | undefined;
+    /**
+     * The border radius to apply to the image.
+     */
+    borderRadius?: string | number | undefined;
+    /**
+     * The breakpoint from which on a higher resolution image should
+     * be loaded.
+     */
+    breakpoint?: import("../../../styles/theme").Breakpoint | undefined;
+    /**
+     * Whether the image is used as a banner (full width and height of
+     * its container).
+     */
+    isBanner?: boolean | undefined;
+    /**
+     * Called when the aspect ratio of the image
+     * changes.
+     */
+    onImageRatioChange?: OnImageRatioChange | undefined;
+};
+export type Theme = import("@shopgate/engage/styles").Theme;
+export type Breakpoint = Theme["breakpoints"]["keys"][0];
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type ResponsiveImageProps = CustomResponsiveImageProps & ImgProps;
+/**
+ * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
+ *
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Protector({ src, ...rest }: ResponsiveImageProps): JSX.Element;
+declare namespace Protector {
+    namespace propTypes {
+        let src: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let src_1: null;
+        export { src_1 as src };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ResponsiveWidgetImage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveWidgetImage.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.jsx"],"names":[],"mappings":";yCASW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;oBAeH,OAAO,yBAAyB,EAAE,KAAK;yBACvC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;uBAC/B,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;mCACzC,0BAA0B,GAAG,QAAQ;AAgKnD;;;;;;;GAOG;AACH,6CAHW,oBAAoB,GAClB,GAAG,CAAC,OAAO,CASvB;;;;;;;;;;kBA1MmD,OAAO;sBACrC,YAAY"}

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/WidgetHeadline/WidgetHeadline.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { Typography } from '@shopgate/engage/components';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,6 +38,7 @@ const WidgetHeadline = ({
     cx,
     css
   } = useStyles();
+  const theme = useTheme();
   const {
     typography = 'h3',
     text,
@@ -48,7 +49,7 @@ const WidgetHeadline = ({
   } = headline || {};
   const styles = useMemo(() => ({
     ...(bold && {
-      fontWeight: 'bold'
+      fontWeight: theme.typography.fontWeightBold
     }),
     ...(italic && {
       fontStyle: 'italic'
@@ -56,7 +57,7 @@ const WidgetHeadline = ({
     ...(underline && {
       textDecoration: 'underline'
     })
-  }), [bold, italic, underline]);
+  }), [bold, italic, underline, theme]);
   if (!text) return null;
   return /*#__PURE__*/_jsx(Typography, {
     variant: typography,

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/WidgetRichText.js

@@ -52,7 +52,7 @@ const useStyles = makeStyles()(theme => ({
       margin: '0px 0px 1rem 0px'
     },
     a: {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   }
 }));

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"}