@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/Notification/gallery.yaml

@@ -0,0 +1,1376 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Status Types
+  blocks:
+    - id: notif_status_success
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Changes Saved
+        description: Your changes have been saved successfully.
+    - id: notif_status_error
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: error
+        title: Save Failed
+        description: Failed to save your changes. Please try again.
+    - id: notif_status_warning
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Disk Space Low
+        description: Server storage is running below 10% capacity.
+    - id: notif_status_info
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Update Available
+        description: A new version of the application is available.
+    - id: btn_status_success
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Success
+        color: primary
+        variant: outlined
+        icon: AiOutlineCheckCircle
+      events:
+        onClick:
+          - id: open_status_success
+            type: CallMethod
+            params:
+              blockId: notif_status_success
+              method: open
+    - id: btn_status_error
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Error
+        color: danger
+        variant: outlined
+        icon: AiOutlineCloseCircle
+      events:
+        onClick:
+          - id: open_status_error
+            type: CallMethod
+            params:
+              blockId: notif_status_error
+              method: open
+    - id: btn_status_warning
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Warning
+        color: default
+        variant: outlined
+        icon: AiOutlineWarning
+      events:
+        onClick:
+          - id: open_status_warning
+            type: CallMethod
+            params:
+              blockId: notif_status_warning
+              method: open
+    - id: btn_status_info
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Info
+        color: primary
+        variant: text
+        icon: AiOutlineInfoCircle
+      events:
+        onClick:
+          - id: open_status_info
+            type: CallMethod
+            params:
+              blockId: notif_status_info
+              method: open
+
+- title: Placement
+  blocks:
+    - id: notif_place_top_right
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Top Right
+        description: Default placement position.
+        placement: topRight
+    - id: notif_place_top_left
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Top Left
+        description: Appears at the top left corner.
+        placement: topLeft
+    - id: notif_place_bottom_right
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Bottom Right
+        description: Appears at the bottom right corner.
+        placement: bottomRight
+    - id: notif_place_bottom_left
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Bottom Left
+        description: Appears at the bottom left corner.
+        placement: bottomLeft
+    - id: btn_place_top_right
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top Right
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_place_top_right
+            type: CallMethod
+            params:
+              blockId: notif_place_top_right
+              method: open
+    - id: btn_place_top_left
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top Left
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_place_top_left
+            type: CallMethod
+            params:
+              blockId: notif_place_top_left
+              method: open
+    - id: btn_place_bottom_right
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bottom Right
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_place_bottom_right
+            type: CallMethod
+            params:
+              blockId: notif_place_bottom_right
+              method: open
+    - id: btn_place_bottom_left
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bottom Left
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_place_bottom_left
+            type: CallMethod
+            params:
+              blockId: notif_place_bottom_left
+              method: open
+
+- title: Duration
+  blocks:
+    - id: notif_dur_short
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Quick Notice
+        description: Disappears in 2 seconds.
+        duration: 2
+    - id: notif_dur_default
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Default Duration
+        description: Auto-closes after 4.5 seconds (default).
+    - id: notif_dur_long
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Extended Duration
+        description: Stays visible for 10 seconds.
+        duration: 10
+    - id: notif_dur_sticky
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Persistent
+        description: Will not auto-close (duration 0). Must be dismissed manually.
+        duration: 0
+    - id: btn_dur_short
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 2 seconds
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_dur_short
+            type: CallMethod
+            params:
+              blockId: notif_dur_short
+              method: open
+    - id: btn_dur_default
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Default (4.5s)
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_dur_default
+            type: CallMethod
+            params:
+              blockId: notif_dur_default
+              method: open
+    - id: btn_dur_long
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: 10 seconds
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_dur_long
+            type: CallMethod
+            params:
+              blockId: notif_dur_long
+              method: open
+    - id: btn_dur_sticky
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Sticky (duration 0)
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_dur_sticky
+            type: CallMethod
+            params:
+              blockId: notif_dur_sticky
+              method: open
+
+- title: Custom Icon
+  blocks:
+    - id: notif_icon_string
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Download Complete
+        description: Your file has been downloaded successfully.
+        icon: AiOutlineDownload
+    - id: notif_icon_colored
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Starred Item
+        description: Item has been added to your favorites.
+        icon:
+          name: AiOutlineStar
+          color: '#faad14'
+    - id: notif_icon_sized
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Session Expiring
+        description: Your session will expire in 5 minutes.
+        icon:
+          name: AiOutlineLock
+          color: '#fa8c16'
+          size: 28
+    - id: btn_icon_string
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: String Icon
+        color: primary
+        variant: outlined
+        icon: AiOutlineDownload
+      events:
+        onClick:
+          - id: open_icon_string
+            type: CallMethod
+            params:
+              blockId: notif_icon_string
+              method: open
+    - id: btn_icon_colored
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Colored Icon
+        color: default
+        variant: outlined
+        icon: AiOutlineStar
+      events:
+        onClick:
+          - id: open_icon_colored
+            type: CallMethod
+            params:
+              blockId: notif_icon_colored
+              method: open
+    - id: btn_icon_sized
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Sized Icon
+        color: default
+        variant: outlined
+        icon: AiOutlineLock
+      events:
+        onClick:
+          - id: open_icon_sized
+            type: CallMethod
+            params:
+              blockId: notif_icon_sized
+              method: open
+
+- title: Close Icon
+  blocks:
+    - id: notif_close_icon_string
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Custom Close
+        description: This notification has a custom close icon.
+        closeIcon: AiOutlineCloseSquare
+        duration: 0
+    - id: notif_close_icon_styled
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Styled Close
+        description: Close icon with custom color and size.
+        closeIcon:
+          name: AiOutlineCloseCircle
+          color: '#ff4d4f'
+          size: 18
+        duration: 0
+    - id: notif_close_icon_arrow
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Arrow Close
+        description: Uses an arrow icon instead of the default close.
+        closeIcon: AiOutlineArrowRight
+        duration: 0
+    - id: btn_close_icon_string
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Square Close
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_close_icon_string
+            type: CallMethod
+            params:
+              blockId: notif_close_icon_string
+              method: open
+    - id: btn_close_icon_styled
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Styled Close
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_close_icon_styled
+            type: CallMethod
+            params:
+              blockId: notif_close_icon_styled
+              method: open
+    - id: btn_close_icon_arrow
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Arrow Close
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_close_icon_arrow
+            type: CallMethod
+            params:
+              blockId: notif_close_icon_arrow
+              method: open
+
+- title: Action Button
+  blocks:
+    - id: notif_btn_confirm
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Action Required
+        description: Please review and confirm the pending changes.
+        duration: 0
+        button:
+          title: Confirm
+          icon: AiOutlineCheck
+          color: primary
+          variant: solid
+          size: small
+    - id: notif_btn_retry
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: error
+        title: Upload Failed
+        description: The file could not be uploaded. Please try again.
+        duration: 0
+        button:
+          title: Retry
+          icon: AiOutlineReload
+          color: danger
+          variant: solid
+          size: small
+    - id: notif_btn_undo
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Item Deleted
+        description: The record has been removed from the database.
+        duration: 0
+        button:
+          title: Undo
+          color: default
+          variant: outlined
+          size: small
+    - id: btn_trigger_confirm
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: With Confirm
+        color: primary
+        variant: outlined
+      events:
+        onClick:
+          - id: open_btn_confirm
+            type: CallMethod
+            params:
+              blockId: notif_btn_confirm
+              method: open
+    - id: btn_trigger_retry
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: With Retry
+        color: danger
+        variant: outlined
+      events:
+        onClick:
+          - id: open_btn_retry
+            type: CallMethod
+            params:
+              blockId: notif_btn_retry
+              method: open
+    - id: btn_trigger_undo
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: With Undo
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_btn_undo
+            type: CallMethod
+            params:
+              blockId: notif_btn_undo
+              method: open
+
+- title: Top and Bottom Offset
+  blocks:
+    - id: notif_top_offset
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Top Offset
+        description: Positioned 80px from the top of the viewport.
+        placement: topRight
+        top: 80
+    - id: notif_bottom_offset
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Bottom Offset
+        description: Positioned 80px from the bottom of the viewport.
+        placement: bottomRight
+        bottom: 80
+    - id: notif_default_offset
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Default Offset
+        description: Uses the default 24px offset.
+        placement: topRight
+    - id: btn_top_offset
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Top 80px
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_top_offset
+            type: CallMethod
+            params:
+              blockId: notif_top_offset
+              method: open
+    - id: btn_bottom_offset
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bottom 80px
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_bottom_offset
+            type: CallMethod
+            params:
+              blockId: notif_bottom_offset
+              method: open
+    - id: btn_default_offset
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Default (24px)
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_default_offset
+            type: CallMethod
+            params:
+              blockId: notif_default_offset
+              method: open
+
+- title: HTML Content
+  blocks:
+    - id: notif_html_bold
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: '<b>Deployment</b> Complete'
+        description: 'Deployed to <b>production</b>. Visit <a href="https://lowdefy.com">the site</a> to verify.'
+    - id: notif_html_styled
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Maintenance Scheduled
+        description: '<span style="color: #fa8c16; font-weight: bold;">Downtime:</span> Saturday 2:00 AM - 6:00 AM UTC.'
+    - id: notif_html_list
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Release Notes
+        description: '<ul><li>Fixed login timeout issue</li><li>Added dark mode support</li><li>Improved dashboard performance</li></ul>'
+        duration: 0
+    - id: btn_html_bold
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Bold and Link
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_html_bold
+            type: CallMethod
+            params:
+              blockId: notif_html_bold
+              method: open
+    - id: btn_html_styled
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Styled HTML
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_html_styled
+            type: CallMethod
+            params:
+              blockId: notif_html_styled
+              method: open
+    - id: btn_html_list
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: HTML List
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_html_list
+            type: CallMethod
+            params:
+              blockId: notif_html_list
+              method: open
+
+- title: Notification Style
+  blocks:
+    - id: notif_style_border
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Custom Border
+        description: This notification has a left green border.
+      style:
+        .element:
+          borderLeft: 4px solid #52c41a
+    - id: notif_style_bg
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Custom Background
+        description: This notification has a custom background color.
+      style:
+        .element:
+          background: rgba(250, 173, 20, 0.1)
+    - id: notif_style_shadow
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Heavy Shadow
+        description: This notification has an elevated shadow.
+      style:
+        .element:
+          boxShadow: 0 6px 24px rgba(0, 0, 0, 0.2)
+    - id: btn_style_border
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Left Border
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_style_border
+            type: CallMethod
+            params:
+              blockId: notif_style_border
+              method: open
+    - id: btn_style_bg
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom Background
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_style_bg
+            type: CallMethod
+            params:
+              blockId: notif_style_bg
+              method: open
+    - id: btn_style_shadow
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Heavy Shadow
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_style_shadow
+            type: CallMethod
+            params:
+              blockId: notif_style_shadow
+              method: open
+
+- title: Override at Call Time
+  blocks:
+    - id: notif_override_base
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Default Title
+        description: Default notification description.
+    - id: btn_override_success
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Override as Success
+        color: primary
+        variant: solid
+        icon: AiOutlineCheckCircle
+      events:
+        onClick:
+          - id: open_override_success
+            type: CallMethod
+            params:
+              blockId: notif_override_base
+              method: open
+              args:
+                - status: success
+                  title: Overridden Title
+                  description: Status, title, and description overridden at call time.
+    - id: btn_override_error
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Override as Error
+        color: danger
+        variant: solid
+        icon: AiOutlineCloseCircle
+      events:
+        onClick:
+          - id: open_override_error
+            type: CallMethod
+            params:
+              blockId: notif_override_base
+              method: open
+              args:
+                - status: error
+                  title: Error Override
+                  description: This error notification was overridden at call time.
+    - id: btn_override_duration
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Override Duration
+        color: default
+        variant: outlined
+        icon: AiOutlineClockCircle
+      events:
+        onClick:
+          - id: open_override_duration
+            type: CallMethod
+            params:
+              blockId: notif_override_base
+              method: open
+              args:
+                - duration: 1
+                  title: Quick Flash
+                  description: This closes after just 1 second.
+
+- title: Events
+  blocks:
+    - id: notif_events_demo
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Interactive Notification
+        description: Click the notification body or close it to trigger events.
+        duration: 0
+      events:
+        onClick:
+          - id: events_click_msg
+            type: DisplayMessage
+            params:
+              content: Notification body clicked!
+              status: info
+        onClose:
+          - id: events_close_msg
+            type: DisplayMessage
+            params:
+              content: Notification was closed.
+              status: success
+    - id: notif_events_close_action
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: Session Timeout
+        description: Your session is about to expire. Close to extend.
+        duration: 0
+        button:
+          title: Extend Session
+          color: primary
+          variant: solid
+          size: small
+      events:
+        onClose:
+          - id: events_extend_msg
+            type: DisplayMessage
+            params:
+              content: Session extended for 30 minutes.
+              status: success
+    - id: notif_events_click_nav
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: New Comment
+        description: Click this notification to view the comment.
+        duration: 8
+      events:
+        onClick:
+          - id: events_nav_msg
+            type: DisplayMessage
+            params:
+              content: Navigating to comments section...
+              status: info
+    - id: btn_events_demo
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Open Interactive
+        color: primary
+        variant: solid
+      events:
+        onClick:
+          - id: open_events_demo
+            type: CallMethod
+            params:
+              blockId: notif_events_demo
+              method: open
+    - id: btn_events_close_action
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Session Timeout
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_events_close
+            type: CallMethod
+            params:
+              blockId: notif_events_close_action
+              method: open
+    - id: btn_events_click_nav
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Click to Navigate
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_events_click_nav
+            type: CallMethod
+            params:
+              blockId: notif_events_click_nav
+              method: open
+
+- title: Style and CSS
+  blocks:
+    - id: notif_css_tailwind
+      type: Notification
+      layout:
+        span: 0
+      class: shadow-2xl
+      properties:
+        status: success
+        title: Tailwind Shadow
+        description: This notification uses a Tailwind shadow-2xl class.
+    - id: notif_css_rounded
+      type: Notification
+      layout:
+        span: 0
+      class: rounded-xl
+      properties:
+        status: info
+        title: Rounded Corners
+        description: Notification with extra-rounded corners via Tailwind.
+    - id: notif_css_inline
+      type: Notification
+      layout:
+        span: 0
+      style:
+        .element:
+          borderRadius: 12
+          border: 2px solid #1890ff
+      properties:
+        status: info
+        title: Inline Style
+        description: This notification uses inline style with a blue border.
+    - id: btn_css_tailwind
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Tailwind Shadow
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_css_tailwind
+            type: CallMethod
+            params:
+              blockId: notif_css_tailwind
+              method: open
+    - id: btn_css_rounded
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Rounded Corners
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_css_rounded
+            type: CallMethod
+            params:
+              blockId: notif_css_rounded
+              method: open
+    - id: btn_css_inline
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Inline Style
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_css_inline
+            type: CallMethod
+            params:
+              blockId: notif_css_inline
+              method: open
+
+- title: Theme Token Overrides
+  blocks:
+    - id: notif_theme_wide
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Wide Notification
+        description: This notification is wider than the default 384px.
+        theme:
+          width: 500
+    - id: notif_theme_zindex
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: warning
+        title: High Z-Index
+        description: This notification has an elevated z-index of 2000.
+        theme:
+          zIndexPopup: 2000
+    - id: notif_theme_progress
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: success
+        title: Custom Progress Bar
+        description: The auto-close progress bar has a custom gradient.
+        duration: 8
+        theme:
+          progressBg: 'linear-gradient(to right, #52c41a, #1890ff)'
+    - id: notif_theme_combined
+      type: Notification
+      layout:
+        span: 0
+      properties:
+        status: info
+        title: Combined Tokens
+        description: Wide notification with custom progress bar.
+        duration: 6
+        theme:
+          width: 450
+          progressBg: 'linear-gradient(to right, #722ed1, #eb2f96)'
+    - id: btn_theme_wide
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Wide (500px)
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_theme_wide
+            type: CallMethod
+            params:
+              blockId: notif_theme_wide
+              method: open
+    - id: btn_theme_zindex
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Z-Index 2000
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_theme_zindex
+            type: CallMethod
+            params:
+              blockId: notif_theme_zindex
+              method: open
+    - id: btn_theme_progress
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Custom Progress
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_theme_progress
+            type: CallMethod
+            params:
+              blockId: notif_theme_progress
+              method: open
+    - id: btn_theme_combined
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Combined Tokens
+        color: default
+        variant: outlined
+      events:
+        onClick:
+          - id: open_theme_combined
+            type: CallMethod
+            params:
+              blockId: notif_theme_combined
+              method: open
+
+- title: Notification in Order Processing
+  blocks:
+    - id: order_card
+      type: Card
+      properties:
+        title: Order #12847
+        size: small
+      blocks:
+        - id: order_status_text
+          type: Markdown
+          properties:
+            content: |
+              **Customer:** Sarah Johnson
+              **Items:** 3 items totaling $247.50
+              **Status:** Pending fulfillment
+        - id: notif_order_shipped
+          type: Notification
+          layout:
+            span: 0
+          properties:
+            status: success
+            title: Order Shipped
+            description: 'Order #12847 has been shipped. Tracking number: <b>1Z999AA10123456784</b>'
+            icon: AiOutlineRocket
+            duration: 0
+            button:
+              title: View Tracking
+              color: primary
+              variant: solid
+              size: small
+          events:
+            onClose:
+              - id: order_close_msg
+                type: DisplayMessage
+                params:
+                  content: Notification dismissed.
+                  status: info
+        - id: notif_order_cancelled
+          type: Notification
+          layout:
+            span: 0
+          properties:
+            status: error
+            title: Order Cancelled
+            description: 'Order #12847 has been cancelled. Refund of $247.50 initiated.'
+            icon: AiOutlineStop
+            duration: 0
+        - id: order_actions
+          type: Box
+          layout:
+            gap: 8
+            justify: flex-end
+          blocks:
+            - id: btn_order_cancel
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Cancel Order
+                color: danger
+                variant: outlined
+                icon: AiOutlineStop
+              events:
+                onClick:
+                  - id: order_cancel_notif
+                    type: CallMethod
+                    params:
+                      blockId: notif_order_cancelled
+                      method: open
+            - id: btn_order_ship
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Mark as Shipped
+                color: primary
+                variant: solid
+                icon: AiOutlineRocket
+              events:
+                onClick:
+                  - id: order_ship_notif
+                    type: CallMethod
+                    params:
+                      blockId: notif_order_shipped
+                      method: open
+
+- title: Notification in System Alerts
+  blocks:
+    - id: alerts_card
+      type: Card
+      properties:
+        title: System Monitor
+        size: small
+      blocks:
+        - id: alerts_description
+          type: Markdown
+          properties:
+            content: |
+              Monitor system health and receive real-time alerts. Click a button below to simulate different alert types.
+        - id: notif_alert_cpu
+          type: Notification
+          layout:
+            span: 0
+          properties:
+            status: warning
+            title: High CPU Usage
+            description: 'CPU usage has exceeded <b>90%</b> on server <b>web-prod-03</b>. Consider scaling up or optimizing workloads.'
+            icon:
+              name: AiOutlineDashboard
+              color: '#fa8c16'
+            duration: 0
+            placement: topRight
+            button:
+              title: View Details
+              color: primary
+              variant: outlined
+              size: small
+          events:
+            onClick:
+              - id: alert_cpu_click
+                type: DisplayMessage
+                params:
+                  content: Opening server dashboard...
+                  status: info
+        - id: notif_alert_deploy
+          type: Notification
+          layout:
+            span: 0
+          properties:
+            status: success
+            title: Deployment Successful
+            description: 'Version <b>2.4.1</b> deployed to production. All health checks passing.'
+            icon: AiOutlineCheckCircle
+            duration: 8
+          events:
+            onClose:
+              - id: alert_deploy_close
+                type: DisplayMessage
+                params:
+                  content: Deployment alert acknowledged.
+                  status: success
+        - id: notif_alert_security
+          type: Notification
+          layout:
+            span: 0
+          properties:
+            status: error
+            title: Security Alert
+            description: 'Multiple failed login attempts detected from IP <b>192.168.1.42</b>. Account temporarily locked.'
+            icon:
+              name: AiOutlineLock
+              color: '#ff4d4f'
+            duration: 0
+            button:
+              title: Block IP
+              color: danger
+              variant: solid
+              size: small
+          events:
+            onClose:
+              - id: alert_security_close
+                type: SetState
+                params:
+                  securityAlertDismissed: true
+        - id: alerts_actions
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: btn_alert_cpu
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: CPU Warning
+                color: default
+                variant: outlined
+                icon: AiOutlineDashboard
+              events:
+                onClick:
+                  - id: trigger_alert_cpu
+                    type: CallMethod
+                    params:
+                      blockId: notif_alert_cpu
+                      method: open
+            - id: btn_alert_deploy
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Deploy Success
+                color: primary
+                variant: outlined
+                icon: AiOutlineCheckCircle
+              events:
+                onClick:
+                  - id: trigger_alert_deploy
+                    type: CallMethod
+                    params:
+                      blockId: notif_alert_deploy
+                      method: open
+            - id: btn_alert_security
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Security Alert
+                color: danger
+                variant: outlined
+                icon: AiOutlineLock
+              events:
+                onClick:
+                  - id: trigger_alert_security
+                    type: CallMethod
+                    params:
+                      blockId: notif_alert_security
+                      method: open