@micromag/element-background 0.4.49 → 0.4.50

package/es/index.js

@@ -2,11 +2,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
-import React, { useRef, useMemo } from 'react';
+import { useRef, useMemo } from 'react';
 import { getStyleFromColor, getOptimalImageUrl, getLayersFromBackground } from '@micromag/core/utils';
 import { getSizeWithinBounds } from '@folklore/size';
 import { useSetting } from '@micromag/core/contexts';
 import Video from '@micromag/element-video';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-element-background-container","videoContainer":"micromag-element-background-videoContainer","video":"micromag-element-background-video","layers":"micromag-element-background-layers","layer":"micromag-element-background-layer","right":"micromag-element-background-right","background":"micromag-element-background-background","bottom":"micromag-element-background-bottom"};
 
@@ -120,30 +121,33 @@ function Background(_ref) {
       videoContainerStyle.objectFit = 'cover';
     }
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className]),
-    style: containerStyle
-  }, isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/React.createElement("div", {
-    className: styles.videoContainer,
-    style: videoContainerStyle
-  }, /*#__PURE__*/React.createElement(Video, {
-    className: styles.video,
-    media: media,
-    mediaRef: !forceMuted ? mediaRef : null,
-    paused: !playing,
-    muted: muted || forceMuted,
-    shouldLoad: shouldLoad,
-    onPlayError: onPlayError,
-    disablePictureInPicture: true,
-    autoPlay: true,
-    loop: true,
-    withPoster: true,
-    focusable: false,
-    qualityStartLevel: qualityStartLevel,
-    onQualityLevelChange: onQualityLevelChange
-  })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, children));
+    style: containerStyle,
+    children: [isVideo && shouldLoad && !withoutVideo ? /*#__PURE__*/jsx("div", {
+      className: styles.videoContainer,
+      style: videoContainerStyle,
+      children: /*#__PURE__*/jsx(Video, {
+        className: styles.video,
+        media: media,
+        mediaRef: !forceMuted ? mediaRef : null,
+        paused: !playing,
+        muted: muted || forceMuted,
+        shouldLoad: shouldLoad,
+        onPlayError: onPlayError,
+        disablePictureInPicture: true,
+        autoPlay: true,
+        loop: true,
+        withPoster: true,
+        focusable: false,
+        qualityStartLevel: qualityStartLevel,
+        onQualityLevelChange: onQualityLevelChange
+      })
+    }) : null, /*#__PURE__*/jsx("div", {
+      className: styles.content,
+      children: children
+    })]
+  });
 }
 
 var _excluded = ["horizontalAlign", "verticalAlign"];
@@ -196,43 +200,46 @@ function BackgroundLayers(_ref) {
     width: width,
     height: height
   } : null);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className]),
-    style: containerStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.layers
-  }, layers.map(function (_ref2, index) {
-    var _ref2$horizontalAlign = _ref2.horizontalAlign,
-      horizontalAlign = _ref2$horizontalAlign === void 0 ? undefined : _ref2$horizontalAlign,
-      _ref2$verticalAlign = _ref2.verticalAlign,
-      verticalAlign = _ref2$verticalAlign === void 0 ? undefined : _ref2$verticalAlign,
-      layer = _objectWithoutProperties(_ref2, _excluded);
-    return /*#__PURE__*/React.createElement("div", {
-      key: "background-".concat(index),
-      className: classNames([styles.layer, layerClassName, _defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right')]),
-      style: {
-        zIndex: maxZIndex - index
-      }
-    }, /*#__PURE__*/React.createElement(Background, Object.assign({
-      width: width,
-      height: height,
-      resolution: resolution,
-      className: classNames([styles.background, backgroundClassName]),
-      playing: playing,
-      muted: muted,
-      horizontalAlign: horizontalAlign,
-      verticalAlign: verticalAlign,
-      loadingMode: loadingMode,
-      shouldLoad: shouldLoad,
-      mediaRef: mediaRef,
-      withoutVideo: withoutVideo,
-      onPlayError: onPlayError,
-      qualityStartLevel: qualityStartLevel,
-      onQualityLevelChange: onQualityLevelChange
-    }, layer)));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.content
-  }, children));
+    style: containerStyle,
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles.layers,
+      children: layers.map(function (_ref2, index) {
+        var _ref2$horizontalAlign = _ref2.horizontalAlign,
+          horizontalAlign = _ref2$horizontalAlign === void 0 ? undefined : _ref2$horizontalAlign,
+          _ref2$verticalAlign = _ref2.verticalAlign,
+          verticalAlign = _ref2$verticalAlign === void 0 ? undefined : _ref2$verticalAlign,
+          layer = _objectWithoutProperties(_ref2, _excluded);
+        return /*#__PURE__*/jsx("div", {
+          className: classNames([styles.layer, layerClassName, _defineProperty(_defineProperty({}, styles.bottom, verticalAlign === 'bottom'), styles.right, horizontalAlign === 'right')]),
+          style: {
+            zIndex: maxZIndex - index
+          },
+          children: /*#__PURE__*/jsx(Background, _objectSpread({
+            width: width,
+            height: height,
+            resolution: resolution,
+            className: classNames([styles.background, backgroundClassName]),
+            playing: playing,
+            muted: muted,
+            horizontalAlign: horizontalAlign,
+            verticalAlign: verticalAlign,
+            loadingMode: loadingMode,
+            shouldLoad: shouldLoad,
+            mediaRef: mediaRef,
+            withoutVideo: withoutVideo,
+            onPlayError: onPlayError,
+            qualityStartLevel: qualityStartLevel,
+            onQualityLevelChange: onQualityLevelChange
+          }, layer))
+        }, "background-".concat(index));
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: styles.content,
+      children: children
+    })]
+  });
 }
 
 export { Background, BackgroundLayers, BackgroundLayers as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-background",
-    "version": "0.4.49",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,8 +60,8 @@
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.49",
-        "@micromag/element-video": "^0.4.49",
+        "@micromag/core": "^0.4.50",
+        "@micromag/element-video": "^0.4.50",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -71,5 +71,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e"
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8"
 }