@app-studio/web 0.9.69 → 0.9.71

package/dist/web.esm.js

@@ -520,9 +520,9 @@ var createIcon = function createIcon(name, defaultProps) {
   if (defaultProps === void 0) {
     defaultProps = {};
   }
-  var IconComponent = props => /*#__PURE__*/React.createElement(Icon, Object.assign({
+  var IconComponent = props => (/*#__PURE__*/React.createElement(Icon, Object.assign({
     name: name
-  }, defaultProps, props));
+  }, defaultProps, props)));
   IconComponent.displayName = name + "Icon";
   return IconComponent;
 };
@@ -701,9 +701,9 @@ var UploadIcon = /*#__PURE__*/createIcon('upload', {
 });
 // Restored icons
 var CheckIcon = TickIcon;
-var BackIcon = props => /*#__PURE__*/React.createElement(ChevronIcon, Object.assign({
+var BackIcon = props => (/*#__PURE__*/React.createElement(ChevronIcon, Object.assign({
   orientation: "left"
-}, props));
+}, props)));
 var ZoomOutIcon = /*#__PURE__*/createIcon('zoom-out', {
   filled: false
 });
@@ -808,106 +808,6 @@ var DragHandleLinesIcon = /*#__PURE__*/createIcon('grip-horizontal', {
   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
  *
@@ -17266,7 +17166,8 @@ var HighlightStyles = {
   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"];
@@ -17538,7 +17439,7 @@ var TitleView = _ref => {
   var {
       children,
       highlightText,
-      highlightStyle = 'background',
+      highlightStyle = 'default',
       highlightColor = 'theme.primary',
       highlightSecondaryColor,
       size = 'lg',
@@ -17635,9 +17536,9 @@ var TitleView = _ref => {
   // 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,
@@ -17693,25 +17594,27 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React.createElement(Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? part : (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React.createElement(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.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.createElement(Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React.createElement(Element, Object.assign({
+      fontSize: fontSize
+    }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React.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.createElement(TextComponent, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), text);
+  return /*#__PURE__*/React.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), text);
 };
 
 /**
@@ -25778,7 +25681,8 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _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__*/createContext({});
 /**
@@ -26237,15 +26141,15 @@ var BackgroundOverlay = _ref10 => {
   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)';
     }
@@ -26272,6 +26176,78 @@ var BackgroundViewBase = _ref11 => {
     value: {}
   }, /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
 };
+var BackgroundLayout = /*#__PURE__*/React.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.createElement(View, Object.assign({}, props, {
+    ref: ref,
+    backgroundColor: 'transparent',
+    position: "relative",
+    overflow: "visible"
+  }, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(View, {
+    padding: (_props$padding = props.padding) != null ? _props$padding : 96 + extraPadding + "px " + extraPadding + "px",
+    position: "relative",
+    overflow: "visible"
+  }, /*#__PURE__*/React.createElement(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.createElement(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.createElement(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
@@ -26285,6 +26261,7 @@ BackgroundView.Image = BackgroundImage;
 BackgroundView.Video = BackgroundVideo;
 BackgroundView.Gradient = BackgroundGradient;
 BackgroundView.Overlay = BackgroundOverlay;
+BackgroundView.Layout = BackgroundLayout;
 
 /**
  * Background Component with compound pattern
@@ -26338,6 +26315,7 @@ var BackgroundComponent = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PUR
 })));
 BackgroundComponent.displayName = 'Background';
 var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
+  Layout: BackgroundView.Layout,
   Aurora: BackgroundView.Aurora,
   Meteors: BackgroundView.Meteors,
   Wall: BackgroundView.Wall,
@@ -26351,5 +26329,5 @@ var Background = /*#__PURE__*/Object.assign(BackgroundComponent, {
 });
 Background.displayName = 'Background';
 
-export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CreditCardIcon, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSelector, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon$1 as Icon, ImageIcon, InfoIcon, InstagramIcon, LayoutIcon, LikeIcon, Link, LinkIcon, LinkedinIcon, Loader, LoadingSpinnerIcon, LockIcon, LogoutIcon, MagicWandIcon, MapPinIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, MoreIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, Selector, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, BackIcon, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CreditCardIcon, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, Drawer, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSelector, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LayoutIcon, LikeIcon, Link, LinkIcon, LinkedinIcon, Loader, LoadingSpinnerIcon, LockIcon, LogoutIcon, MagicWandIcon, MapPinIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, MoreIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, Selector, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map