@app-studio/web 0.9.69 → 0.9.71

package/dist/web.umd.development.js

@@ -488,9 +488,9 @@
     if (defaultProps === void 0) {
       defaultProps = {};
     }
-    var IconComponent = props => /*#__PURE__*/React__default.createElement(Icon, Object.assign({
+    var IconComponent = props => (/*#__PURE__*/React__default.createElement(Icon, Object.assign({
       name: name
-    }, defaultProps, props));
+    }, defaultProps, props)));
     IconComponent.displayName = name + "Icon";
     return IconComponent;
   };
@@ -669,9 +669,9 @@
   });
   // Restored icons
   var CheckIcon = TickIcon;
-  var BackIcon = props => /*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
+  var BackIcon = props => (/*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
     orientation: "left"
-  }, props));
+  }, props)));
   var ZoomOutIcon = /*#__PURE__*/createIcon('zoom-out', {
     filled: false
   });
@@ -776,106 +776,6 @@
     filled: false
   });
 
-  var Icon$1 = {
-    __proto__: null,
-    Icon: Icon,
-    UserIcon: UserIcon,
-    HelpIcon: HelpIcon,
-    FolderIcon: FolderIcon,
-    ChevronIcon: ChevronIcon,
-    DragHandleIcon: DragHandleIcon,
-    FileIcon: FileIcon,
-    VideoIcon: VideoIcon,
-    ImageIcon: ImageIcon,
-    AudioIcon: AudioIcon,
-    TwitterIcon: TwitterIcon,
-    XIcon: XIcon,
-    TwitchIcon: TwitchIcon,
-    CloseIcon: CloseIcon,
-    InstagramIcon: InstagramIcon,
-    YoutubeIcon: YoutubeIcon,
-    FacebookIcon: FacebookIcon,
-    LinkedinIcon: LinkedinIcon,
-    ThreadsIcon: ThreadsIcon,
-    MinusIcon: MinusIcon,
-    InfoIcon: InfoIcon,
-    PlayIcon: PlayIcon,
-    PauseIcon: PauseIcon,
-    HeartIcon: HeartIcon,
-    StarIcon: StarIcon,
-    SaveIcon: SaveIcon,
-    WarningIcon: WarningIcon,
-    BatteryIcon: BatteryIcon,
-    BookmarkIcon: BookmarkIcon,
-    CloudIcon: CloudIcon,
-    CopyIcon: CopyIcon,
-    DustBinIcon: DustBinIcon,
-    DeleteIcon: DeleteIcon,
-    EditIcon: EditIcon,
-    MicrophoneIcon: MicrophoneIcon,
-    StopIcon: StopIcon,
-    SendIcon: SendIcon,
-    LoadingSpinnerIcon: LoadingSpinnerIcon,
-    AttachmentIcon: AttachmentIcon,
-    SearchIcon: SearchIcon,
-    HomeIcon: HomeIcon,
-    SettingsIcon: SettingsIcon,
-    DownloadIcon: DownloadIcon,
-    ShareIcon: ShareIcon,
-    TickIcon: TickIcon,
-    PlusIcon: PlusIcon,
-    CloseEyeIcon: CloseEyeIcon,
-    OpenEyeIcon: OpenEyeIcon,
-    LockIcon: LockIcon,
-    ProfileIcon: ProfileIcon,
-    ExternalLinkIcon: ExternalLinkIcon,
-    SuccessIcon: SuccessIcon,
-    ErrorIcon: ErrorIcon,
-    NotificationIcon: NotificationIcon,
-    DocumentIcon: DocumentIcon,
-    ChartIcon: ChartIcon,
-    MoonIcon: MoonIcon,
-    PanelIcon: PanelIcon,
-    UploadIcon: UploadIcon,
-    CheckIcon: CheckIcon,
-    BackIcon: BackIcon,
-    ZoomOutIcon: ZoomOutIcon,
-    TextIcon: TextIcon,
-    ShapeIcon: ShapeIcon,
-    RotateIcon: RotateIcon,
-    GiftIcon: GiftIcon,
-    ShieldIcon: ShieldIcon,
-    LogoutIcon: LogoutIcon,
-    PowerOffIcon: PowerOffIcon,
-    LinkIcon: LinkIcon,
-    LayoutIcon: LayoutIcon,
-    ZapIcon: ZapIcon,
-    CreditCardIcon: CreditCardIcon,
-    MoreIcon: MoreIcon,
-    TrashIcon: TrashIcon,
-    FilterIcon: FilterIcon,
-    CalendarIcon: CalendarIcon,
-    ClockIcon: ClockIcon,
-    MapPinIcon: MapPinIcon,
-    MenuIcon: MenuIcon,
-    RefreshIcon: RefreshIcon,
-    PrintIcon: PrintIcon,
-    MagicWandIcon: MagicWandIcon,
-    UnLikeIcon: UnLikeIcon,
-    LikeIcon: LikeIcon,
-    CameraIcon: CameraIcon,
-    BluetoothIcon: BluetoothIcon,
-    UnlockIcon: UnlockIcon,
-    WifiIcon: WifiIcon,
-    BoldArrowIcon: BoldArrowIcon,
-    ArrowIcon: ArrowIcon,
-    SpinnerIcon: SpinnerIcon,
-    SliderIcon: SliderIcon,
-    CropIcon: CropIcon,
-    ZoomInIcon: ZoomInIcon,
-    DragHandleLinesIcon: DragHandleLinesIcon
-  };
-
   /**
    * Alert Styles
    *
@@ -17234,7 +17134,8 @@
     glow: color => ({
       color: color,
       textShadow: "0 0 10px " + color + "80, 0 0 20px " + color + "40, 0 0 30px " + color + "20"
-    })
+    }),
+    default: () => ({})
   };
 
   var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "textComponent", "as"];
@@ -17506,7 +17407,7 @@
     var {
         children,
         highlightText,
-        highlightStyle = 'background',
+        highlightStyle = 'default',
         highlightColor = 'theme.primary',
         highlightSecondaryColor,
         size = 'lg',
@@ -17603,9 +17504,9 @@
     // Common container props
     var containerProps = Object.assign({
       ref,
-      as: 'h1',
       animate: inView ? controlledAnimate : undefined
     }, !textComponent && {
+      as: 'h1',
       fontSize: useResponsive ? undefined : fontSize,
       fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
       letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
@@ -17661,25 +17562,27 @@
         lastIndex = match.index + match[0].length;
       }
       if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        fontSize: useResponsive ? undefined : fontSize
+      }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
         key: "highlight-" + idx,
         as: "span",
         display: "inline",
-        animate: inView ? controlledHighlightAnimate : undefined,
-        fontSize: useResponsive ? undefined : fontSize
+        animate: inView ? controlledHighlightAnimate : undefined
       }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(part.text)))));
     }
     // Case 2: Has highlight style but no highlight target - apply style to entire title
     if (highlightStyle && !activeHighlightTarget) {
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+        fontSize: fontSize
+      }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
         as: "span",
-        fontSize: fontSize,
         display: "inline",
         animate: inView ? controlledHighlightAnimate : undefined
       }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
     }
     // Case 3: Default - no highlighting
-    return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
+    return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), text);
   };
 
   /**
@@ -25746,7 +25649,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 +26109,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 +26144,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 +26229,7 @@
   BackgroundView.Video = BackgroundVideo;
   BackgroundView.Gradient = BackgroundGradient;
   BackgroundView.Overlay = BackgroundOverlay;
+  BackgroundView.Layout = BackgroundLayout;
 
   /**
    * Background Component with compound pattern
@@ -26306,6 +26283,7 @@
   })));
   BackgroundComponent.displayName = 'Background';
   var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
+    Layout: BackgroundView.Layout,
     Aurora: BackgroundView.Aurora,
     Meteors: BackgroundView.Meteors,
     Wall: BackgroundView.Wall,
@@ -26405,7 +26383,7 @@
   exports.HelpIcon = HelpIcon;
   exports.HomeIcon = HomeIcon;
   exports.HoverCard = HoverCard;
-  exports.Icon = Icon$1;
+  exports.Icon = Icon;
   exports.ImageIcon = ImageIcon;
   exports.InfoIcon = InfoIcon;
   exports.InstagramIcon = InstagramIcon;