@app-studio/web 0.9.69 → 0.9.70

package/dist/web.umd.development.js

@@ -25746,7 +25746,8 @@
     _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
     _excluded9 = ["children"],
     _excluded10 = ["contentPosition"],
-    _excluded11 = ["children", "views"];
+    _excluded11 = ["children", "views"],
+    _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
   // Background Context
   var BackgroundContext = /*#__PURE__*/React.createContext({});
   /**
@@ -26205,15 +26206,15 @@
     var getDefaultOverlay = () => {
       switch (contentPosition) {
         case 'left':
-          return 'radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+          return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
         case 'right':
-          return 'radial-gradient(circle at 30% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)';
+          return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
         case 'top':
-          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
         case 'bottom':
-          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.1) 100%)';
+          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
         case 'center':
-          return 'radial-gradient(circle at 50% 90%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+          return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
         default:
           return 'rgba(0,0,0,0.5)';
       }
@@ -26240,6 +26241,78 @@
       value: {}
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
   };
+  var BackgroundLayout = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
+    var _props$backgroundColo, _props$padding;
+    var {
+        children,
+        shape = 'rounded',
+        decorationRotation = 5,
+        decorationScale = 1,
+        decorationOpacity = 0.8,
+        views
+      } = _ref12,
+      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+    var getBorderRadius = shape => {
+      switch (shape) {
+        case 'square':
+          return '0px';
+        case 'pill':
+          return '9999px';
+        case 'rounded':
+        default:
+          return '16px';
+      }
+    };
+    var radius = getBorderRadius(shape);
+    // Calculate the extra space needed for the rotated/scaled decoration
+    // When rotated, corners extend beyond the original bounds
+    // Extra space ≈ sin(rotation) × dimension + (scale - 1) × dimension
+    var rotationRad = Math.abs(decorationRotation) * (Math.PI / 180);
+    var rotationOffset = Math.sin(rotationRad) * 100; // percentage-based estimate
+    var scaleOffset = (decorationScale - 1) * 100 / 2;
+    var extraPadding = Math.ceil(rotationOffset + scaleOffset);
+    var backgroundColor = (_props$backgroundColo = props.backgroundColor) != null ? _props$backgroundColo : 'theme.primary';
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, props, {
+      ref: ref,
+      backgroundColor: 'transparent',
+      position: "relative",
+      overflow: "visible"
+    }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      padding: (_props$padding = props.padding) != null ? _props$padding : 96 + extraPadding + "px " + extraPadding + "px",
+      position: "relative",
+      overflow: "visible"
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      top: extraPadding,
+      left: extraPadding,
+      right: extraPadding,
+      bottom: extraPadding,
+      backgroundColor: backgroundColor,
+      borderRadius: radius,
+      opacity: decorationOpacity / 1.5,
+      transform: "scale(" + decorationScale + ")",
+      pointerEvents: "none",
+      zIndex: 1
+    }, views == null ? void 0 : views.back)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      top: extraPadding,
+      left: extraPadding,
+      right: extraPadding,
+      bottom: extraPadding,
+      transform: "rotate(" + decorationRotation + "deg) scale(" + decorationScale + ")",
+      opacity: decorationOpacity / 1.2,
+      backgroundColor: backgroundColor,
+      borderRadius: radius,
+      pointerEvents: "none",
+      zIndex: 2
+    }, views == null ? void 0 : views.front)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      margin: "0 auto",
+      //width="100%"
+      position: "relative",
+      zIndex: 3
+    }, views == null ? void 0 : views.content), children)));
+  });
+  BackgroundLayout.displayName = 'Background.Layout';
   // Create the compound component
   var BackgroundView = BackgroundViewBase;
   // Attach compound components
@@ -26253,6 +26326,7 @@
   BackgroundView.Video = BackgroundVideo;
   BackgroundView.Gradient = BackgroundGradient;
   BackgroundView.Overlay = BackgroundOverlay;
+  BackgroundView.Layout = BackgroundLayout;
 
   /**
    * Background Component with compound pattern
@@ -26306,6 +26380,7 @@
   })));
   BackgroundComponent.displayName = 'Background';
   var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
+    Layout: BackgroundView.Layout,
     Aurora: BackgroundView.Aurora,
     Meteors: BackgroundView.Meteors,
     Wall: BackgroundView.Wall,