From c0052baedc52d6c40dbbe8dcc72d6379870cedbc Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Tue, 24 Dec 2024 16:14:02 +0330
Subject: [PATCH] complete demo page

---
 .../Components/ProModal/BitProModal.razor     |  16 +-
 .../Components/ProModal/BitProModal.scss      |  71 ++-
 .../Bit.BlazorUI/Styles/functions.scss        |  12 -
 .../Components/ComponentDemo.razor            |  22 +-
 .../Components/ComponentDemo.razor.cs         |   3 +
 .../Extras/ProModal/BitProModalDemo.razor     | 537 +++++++++++++++---
 .../Extras/ProModal/BitProModalDemo.razor.cs  | 149 +++++
 .../ProModal/BitProModalDemo.razor.scss       |  29 +-
 .../Extras/ProPanel/BitProPanelDemo.razor     |  11 +-
 .../Surfaces/Modal/BitModalDemo.razor         |  31 +-
 .../Surfaces/Modal/BitModalDemo.razor.cs      |  33 +-
 .../Surfaces/Modal/BitModalDemo.razor.scss    |  23 +-
 12 files changed, 721 insertions(+), 216 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
index 4969a272c3..c1c9d5c011 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor
@@ -14,7 +14,7 @@
           AutoToggleScroll="AutoToggleScroll"
           Blocking="Blocking"
           Classes="Classes"
-          DragElementSelector="DragElementSelector"
+          DragElementSelector="@DragElementSelector"
           Draggable="Draggable"
           IsOpen="IsOpen"
           IsOpenChanged="AssignIsOpen"
@@ -26,16 +26,16 @@
           Styles="Styles">
     @if (Header is not null || HeaderText is not null || ShowCloseButton)
     {
-        <div style="@Styles?.HeaderContainer" class="bit-ppl-hcn @Classes?.HeaderContainer">
+        <div style="@Styles?.HeaderContainer" class="bit-pmd-hcn @Classes?.HeaderContainer">
             @if (Header is not null)
             {
-                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
                     @Header
                 </div>
             }
             else if (HeaderText is not null)
             {
-                <div style="@Styles?.Header" class="bit-ppl-hdr @Classes?.Header">
+                <div style="@Styles?.Header" class="bit-pmd-hdr @Classes?.Header">
                     @HeaderText
                 </div>
             }
@@ -44,26 +44,26 @@
             {
                 <button @onclick="CloseModal"
                         style="@Styles?.CloseButton"
-                        class="bit-ppl-cls @Classes?.CloseButton">
+                        class="bit-pmd-cls @Classes?.CloseButton">
                     <i style="@Styles?.CloseIcon" class="bit-icon bit-icon--Cancel @Classes?.CloseIcon" />
                 </button>
             }
         </div>
     }
 
-    <div style="@Styles?.Body" class="bit-ppl-bdy @Classes?.Body">
+    <div style="@Styles?.Body" class="bit-pmd-bdy @Classes?.Body">
         @(Body ?? ChildContent)
     </div>
 
     @if (Footer is not null)
     {
-        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
             @Footer
         </div>
     }
     else if (FooterText is not null)
     {
-        <div style="@Styles?.Footer" class="bit-ppl-fcn @Classes?.Footer">
+        <div style="@Styles?.Footer" class="bit-pmd-fcn @Classes?.Footer">
             @FooterText
         </div>
     }
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
index 10a83dbdbd..4c9c5c2091 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss
@@ -4,14 +4,21 @@
 }
 
 .bit-pmd-mfl {
-    .bit-pnl-ovl {
+    .bit-mdl-ovl {
         background-color: $clr-bg-overlay;
     }
 }
 
+.bit-pmd-tbr {
+    .bit-mdl-ctn {
+        border-top: spacing(0.5) solid $clr-pri;
+    }
+}
+
 .bit-pmd-fhe {
     .bit-mdl-ctn {
         height: 100%;
+        border-top: none;
     }
 }
 
@@ -19,10 +26,66 @@
     .bit-mdl-ctn {
         width: 100%;
     }
+
+    .bit-pmd-bdy {
+        max-width: unset;
+    }
 }
 
-.bit-pmd-tbr {
-    .bit-mdl-ctn {
-        border-top: rem2(4px) solid $clr-pri;
+.bit-pmd-hcn {
+    top: 0;
+    z-index: 1;
+    display: flex;
+    position: sticky;
+    font-weight: 600;
+    color: $clr-fg-pri;
+    overflow-wrap: anywhere;
+    background-color: $clr-bg-pri;
+    padding: spacing(2) spacing(2) 0;
+}
+
+.bit-pmd-hdr {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    font-size: spacing(2.5);
+}
+
+.bit-pmd-cls {
+    display: flex;
+    cursor: pointer;
+    width: spacing(5);
+    height: spacing(5);
+    align-items: center;
+    justify-content: center;
+    font-size: spacing(1.75);
+    border-radius: spacing(0.25);
+    background-color: transparent;
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:active {
+        color: $clr-fg-pri-active;
+        background-color: $clr-bg-pri-active;
     }
 }
+
+.bit-pmd-bdy {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: spacing(2);
+    max-width: spacing(75);
+}
+
+.bit-pmd-fcn {
+    bottom: 0;
+    z-index: 1;
+    position: sticky;
+    background-color: $clr-bg-pri;
+    padding: 0 spacing(2) spacing(2) spacing(2);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
index feee193b9f..e39212f8dc 100644
--- a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss
@@ -3,18 +3,6 @@
 
 $html-font-size: 16px;
 
-@function stripUnit($value) {
-    @return math.div($value, ($value * 0 + 1));
-}
-
-@function em2($pxValue, $base-font-size: $html-font-size) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($base-font-size))}em;
-}
-
-@function rem2($pxValue) {
-    @return #{calc(stripUnit($pxValue) / stripUnit($html-font-size))}rem;
-}
-
 @function spacing($spacingValue) {
     @return calc($spacing-scaling-factor * $spacingValue);
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
index ffef99e155..395ca784f1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor
@@ -5,21 +5,35 @@
         <BitText Typography="BitTypography.H3" Class="title">@ComponentName</BitText>
         <section id="overview-section" class="page-section">
             <BitText Typography="BitTypography.Subtitle1">
-                @ComponentDescription
+                @if (DescriptionTemplate is not null)
+                {
+                    @DescriptionTemplate
+                }
+                else
+                {
+                    @ComponentDescription
+                }
             </BitText>
         </section>
 
-        @if (Notes.HasValue())
+        @if (NotesTemplate is not null || Notes.HasValue())
         {
             <section id="notes-section" class="page-section">
                 <BitText Typography="BitTypography.H4" Class="subtitle">Notes</BitText>
-                @Notes
+                @if (NotesTemplate is not null)
+                {
+                    @NotesTemplate
+                }
+                else
+                {
+                    @Notes
+                }
             </section>
         }
 
         <section id="usage-section" class="page-section">
             <BitText Typography="BitTypography.H4" Class="subtitle">Usage</BitText>
-            @ChildContent
+            @(Body ?? ChildContent)
         </section>
 
         <section id="api-section" class="page-section">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
index 0491a6bfe9..9e03e60774 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs
@@ -5,6 +5,9 @@ public partial class ComponentDemo
     [Parameter] public string ComponentName { get; set; } = default!;
     [Parameter] public string? ComponentDescription { get; set; }
     [Parameter] public string? Notes { get; set; }
+    [Parameter] public RenderFragment? DescriptionTemplate { get; set; }
+    [Parameter] public RenderFragment? NotesTemplate { get; set; }
+    [Parameter] public RenderFragment? Body { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public List<ComponentParameter> ComponentParameters { get; set; } = [];
     [Parameter] public List<ComponentSubClass> ComponentSubClasses { get; set; } = [];
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor
index 551990c43d..0b8973d133 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor
@@ -1,4 +1,4 @@
-@page "/components/promodal"
+@page "/components/promodal"
 
 <PageOutlet Url="components/promodal"
             Title="ProModal"
@@ -9,11 +9,14 @@
                ComponentParameters="componentParameters"
                ComponentSubClasses="componentSubClasses"
                ComponentSubEnums="componentSubEnums">
-    <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-        <ExamplePreview>
-            <BitButton OnClick="() => isOpenBasic = true">Open ProModal</BitButton>
-            <BitProModal @bind-IsOpen="isOpenBasic">
-                <div style="padding:1rem;max-width:40rem">
+    <NotesTemplate>
+        The BitProPanel is the advanced version of the <BitLink Href="components/modal">BitModal</BitLink> component.
+    </NotesTemplate>
+    <Body>
+        <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+            <ExamplePreview>
+                <BitButton OnClick="() => isOpenBasic = true">Open ProModal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenBasic">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                     amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
                     sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
@@ -22,78 +25,454 @@
                     Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
                     Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                     efficitur.
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Header & Footer" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+            <ExamplePreview>
+                <BitButton OnClick="() => isProModalWithHeaderTextOpen = true">Open ProModal with HeaderText</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithHeaderTextOpen" HeaderText="BitProModal with HeaderText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isProModalWithHeaderOpen = true">Open ProModal with Header</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithHeaderOpen">
+                    <Header>
+                        <div>
+                            <div style="margin-bottom:4px">BitProModal with Header</div>
+                            <BitSearchBox Placeholder="Search here..." />
+                        </div>
+                    </Header>
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                </BitProModal>
+                <br /><br /><br /><br />
+                <BitButton OnClick="() => isProModalWithFooterTextOpen = true">Open ProModal with FooterText</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithFooterTextOpen" FooterText="BitProModal with FooterText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isProModalWithFooterOpen = true">Open ProModal with Footer</BitButton>
+                <BitProModal @bind-IsOpen="isProModalWithFooterOpen">
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                    <Footer>
+                        <h3 style="margin-bottom:4px">BitProModal with Footer</h3>
+                        <BitButton OnClick="() => isProModalWithFooterOpen = false">Save</BitButton>
+                        <BitButton OnClick="() => isProModalWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
+                    </Footer>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
+            <ExamplePreview>
+                <div>BitProModal has some advanced options to be customized.</div>
+                <br /><br />
+                <BitButton OnClick="() => isCloseButtonProModalOpen = true">Open ProModal with ShowCloseButton</BitButton>
+                <BitProModal @bind-IsOpen="isCloseButtonProModalOpen" HeaderText="ShowCloseButton" ShowCloseButton>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isBlockingProModalOpen = true">Open ProModal with Blocking</BitButton>
+                <BitProModal @bind-IsOpen="isBlockingProModalOpen" HeaderText="Blocking" ShowCloseButton Blocking>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isModelessProModalOpen = true">Open ProModal with Modeless</BitButton>
+                <BitProModal @bind-IsOpen="isModelessProModalOpen" HeaderText="Modeless" ShowCloseButton Modeless>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isModeFullProModalOpen = true">Open ProModal with ModeFull</BitButton>
+                <BitProModal @bind-IsOpen="isModeFullProModalOpen" HeaderText="ModeFull" ModeFull>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isAutoToggleScrollProModalOpen = true">Open ProModal with AutoToggleScroll</BitButton>
+                <BitProModal @bind-IsOpen="isAutoToggleScrollProModalOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isNoBorderProModalOpen = true">Open ProModal with NoBorder</BitButton>
+                <BitProModal @bind-IsOpen="isNoBorderProModalOpen" HeaderText="NoBorder" NoBorder>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Size" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+            <ExamplePreview>
+                <div>BitProModal has size related parameters to make it occupy available screen width/height or both.</div>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullSize = true">Open ProModal with FullSize</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullSize" FullSize="isFullSize" HeaderText="FullSize ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullSize" OnText="Restore" OffText="FullSize" />
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullWidth = true">Open ProModal with FullWidth</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullWidth" FullWidth="isFullWidth" HeaderText="FullWidth ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullWidth" OnText="Restore" OffText="FullWidth" />
+                </BitProModal>
+                <br /><br />
+                <BitButton OnClick="() => isOpenFullHeight = true">Open ProModal with FullHeight</BitButton>
+                <BitProModal @bind-IsOpen="isOpenFullHeight" FullHeight="isFullHeight" HeaderText="FullHeight ProModal">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                    efficitur.
+                    <hr />
+                    <BitToggleButton @bind-IsChecked="isFullHeight" OnText="Restore" OffText="FullHeight" />
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="AbsolutePosition" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+            <ExamplePreview>
+                <div>BitProModal has an absolute position option to further customize its location.</div><br />
+                <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal</BitButton>
+                <br /><br />
+                <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
+                <br /><br />
+                <div class="relative-container" id="modal-scroller">
+                    <BitProModal @bind-IsOpen="isOpenAbsolutePosition" HeaderText="AbsolutePosition" AbsolutePosition>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis.
+                    </BitProModal>
+
+                    <BitProModal @bind-IsOpen="isOpenScrollerSelector"
+                                 HeaderText="AbsolutePosition with AutoToggleScroll and ScrollerSelector"
+                                 AbsolutePosition AutoToggleScroll ScrollerSelector="#modal-scroller">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis.
+                    </BitProModal>
+
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
                 </div>
-            </BitProModal>
-        </ExamplePreview>
-    </ComponentExampleBox>
-
-    @* <ComponentExampleBox Title="Customizing content" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2"> *@
-    @*     <ExamplePreview> *@
-    @*         <BitButton OnClick="() => isOpenCustomContent = true">Open Modal</BitButton> *@
-    @*         <BitModal @bind-IsOpen="isOpenCustomContent"> *@
-    @*             <div class="modal-header"> *@
-    @*                 <span class="modal-header-text">Lorem Ipsum</span> *@
-    @*                 <BitButton Variant="BitVariant.Text" OnClick="() => isOpenCustomContent = false" IconName="@BitIconName.ChromeClose" Title="Close" /> *@
-    @*             </div> *@
-    @*             <div class="modal-body"> *@
-    @*                 <p> *@
-    @*                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit *@
-    @*                     amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor *@
-    @*                     sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut *@
-    @*                     turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, *@
-    @*                     ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. *@
-    @*                     Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. *@
-    @*                     Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend *@
-    @*                     efficitur. *@
-    @*                 </p> *@
-    @*                 <p> *@
-    @*                     Mauris at nunc eget lectus lobortis facilisis et eget magna. Vestibulum venenatis augue sapien, rhoncus *@
-    @*                     faucibus magna semper eget. Proin rutrum libero sagittis sapien aliquet auctor. Suspendisse tristique a *@
-    @*                     magna at facilisis. Duis rhoncus feugiat magna in rutrum. Suspendisse semper, dolor et vestibulum lacinia, *@
-    @*                     nunc felis malesuada ex, nec hendrerit justo ex et massa. Quisque quis mollis nulla. Nam commodo est ornare, *@
-    @*                     rhoncus odio eu, pharetra tellus. Nunc sed velit mi. *@
-    @*                 </p> *@
-    @*                 <p> *@
-    @*                     Sed condimentum ultricies turpis convallis pharetra. Sed sagittis quam pharetra luctus porttitor. Cras vel *@
-    @*                     consequat lectus. Sed nec fringilla urna, a aliquet libero. Aenean sed nisl purus. Vivamus vulputate felis *@
-    @*                     et odio efficitur suscipit. Ut volutpat dictum lectus, ac rutrum massa accumsan at. Sed pharetra auctor *@
-    @*                     finibus. In augue libero, commodo vitae nisi non, sagittis convallis ante. Phasellus malesuada eleifend *@
-    @*                     mollis. Curabitur ultricies leo ac metus venenatis elementum. *@
-    @*                 </p> *@
-    @*             </div> *@
-    @*         </BitModal> *@
-    @*     </ExamplePreview> *@
-    @* </ComponentExampleBox> *@
-
-    @* <ComponentExampleBox Title="FullSize" RazorCode="@example3RazorCode" CSharpCode="@example3CsharpCode" Id="example3"> *@
-    @*     <ExamplePreview> *@
-    @*         <div>The FullSize parameter of the BitModal allows the modal to be full-screen.</div><br /> *@
-    @*         <BitButton OnClick="() => isOpenFullSize = true">Open Modal</BitButton> *@
-    @*         <BitModal @bind-IsOpen="isOpenFullSize" FullSize="isFullSize"> *@
-    @*             <div class="modal-header"> *@
-    @*                 <span class="modal-header-text">Full size modal</span> *@
-    @*                 <BitButton Variant="BitVariant.Text" *@
-    @*                            OnClick="() => isFullSize = !isFullSize" *@
-    @*                            IconName="@(isFullSize ? BitIconName.BackToWindow : BitIconName.ChromeFullScreen)" *@
-    @*                            Title="@(isFullSize ? "Exit FullScreen" : "FullScreen")" /> *@
-    @*                 <BitButton Variant="BitVariant.Text" *@
-    @*                            OnClick="() => isOpenFullSize = false" *@
-    @*                            IconName="@BitIconName.ChromeClose" *@
-    @*                            Title="Close" /> *@
-    @*             </div> *@
-    @*             <div class="modal-body"> *@
-    @*                 <p> *@
-    @*                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit *@
-    @*                     amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor *@
-    @*                     sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut *@
-    @*                     turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, *@
-    @*                     ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. *@
-    @*                     Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. *@
-    @*                     Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend *@
-    @*                     efficitur. *@
-    @*                 </p> *@
-    @*             </div> *@
-    @*         </BitModal> *@
-    @*     </ExamplePreview> *@
-    @* </ComponentExampleBox> *@
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Position" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+            <ExamplePreview>
+                <div>To set the ProModal position on the page you can use the Position parameter.</div><br />
+                <div class="position-btn-container">
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopLeft)">Top Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopCenter)">Top Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopRight)">Top Right</BitButton>
+                    </div>
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterLeft)">Center Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.Center)">Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterRight)">Center Right</BitButton>
+                    </div>
+                    <div>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomLeft)">Bottom Left</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomCenter)">Bottom Center</BitButton>
+                        <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomRight)">Bottom Right</BitButton>
+                    </div>
+                </div>
+                <BitProModal @bind-IsOpen="isOpenPosition" Position="position">
+                    <Header>
+                        Position: @position
+                    </Header>
+                    <Body>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </Body>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Draggable" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+            <ExamplePreview>
+                <div>The Draggable parameter of the BitProModal allows users to move the modal around the screen.</div><br />
+                <BitButton OnClick="() => isOpenDraggable = true">Open Modal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenDraggable" Draggable>
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>Draggable</h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
+                </BitProModal>
+                <br /><br /><br /><br />
+                <div>Using custom drag element:</div><br />
+                <BitButton OnClick="() => isOpenDraggableSelector = true">Open Modal</BitButton>
+                <BitProModal @bind-IsOpen="isOpenDraggableSelector" Draggable DragElementSelector="#modal-drag-element">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3 id="modal-drag-element" style="color: white; background: brown; padding: 1rem">
+                            Draggable with DragElementSelector
+                        </h3>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                        efficitur.
+                    </div>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+            <ExamplePreview>
+                <div>
+                    <div>Using css related parameter users can further customize the modal based on their needs.</div>
+                    <br /><br />
+                    <div>Component's Style & Class:</div><br />
+                    <BitButton OnClick="() => isOpenStyle = true">Open styled modal</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenStyle" Style="box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Styled modal</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                    <br /><br />
+                    <BitButton OnClick="() => isOpenClass = true">Open classed modal</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenClass" Class="custom-class">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Classed modal</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+
+                    <br /><br /><br /><br />
+
+                    <div><b>Styles</b> & <b>Classes</b>:</div><br />
+                    <BitButton OnClick="() => isOpenStyles = true">Open modal Styles</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenStyles" Styles="@(new() { Overlay = "background-color: #4776f433;", Content = "box-shadow: 0 0 1rem tomato;" })">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Modal with Styles</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                    <br /><br />
+                    <BitButton OnClick="() => isOpenClasses = true">Open modal Classes</BitButton>
+                    <BitProModal @bind-IsOpen="isOpenClasses" Classes="@(new() { Root = "custom-root", Overlay = "custom-overlay", Content = "custom-content" })">
+                        <div style="padding: 1rem; max-width: 40rem">
+                            <h3>Modal with Classes</h3>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+                            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+                            sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+                            turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+                            ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+                            Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+                            Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+                            efficitur.
+                        </div>
+                    </BitProModal>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
+
+        <ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+            <ExamplePreview>
+                <div>Use BitProModal in right-to-left (RTL).</div><br />
+                <BitButton Dir="BitDir.Rtl" OnClick="() => isOpenRtl = true">باز کردن مُدال</BitButton>
+                <BitProModal Dir="BitDir.Rtl" @bind-IsOpen="isOpenRtl">
+                    <div style="padding: 1rem; max-width: 40rem">
+                        <h3>مدال راست به چپ</h3>
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
+                        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                    </div>
+                </BitProModal>
+            </ExamplePreview>
+        </ComponentExampleBox>
+    </Body>
 </ComponentDemo>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs
index 1f614c8ca2..e0cf8ba5ec 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cs
@@ -195,6 +195,47 @@ public partial class BitProModalDemo
 
     private bool isOpenBasic;
 
+    private bool isProModalWithHeaderTextOpen;
+    private bool isProModalWithHeaderOpen;
+    private bool isProModalWithFooterTextOpen;
+    private bool isProModalWithFooterOpen;
+
+    private bool isCloseButtonProModalOpen;
+    private bool isBlockingProModalOpen;
+    private bool isModelessProModalOpen;
+    private bool isModeFullProModalOpen;
+    private bool isAutoToggleScrollProModalOpen;
+    private bool isNoBorderProModalOpen;
+
+    private bool isFullSize;
+    private bool isOpenFullSize;
+    private bool isFullWidth;
+    private bool isOpenFullWidth;
+    private bool isFullHeight;
+    private bool isOpenFullHeight;
+
+    private bool isOpenAbsolutePosition;
+    private bool isOpenScrollerSelector;
+
+    private bool isOpenPosition;
+    private BitPosition position;
+    private void OpenModalInPosition(BitPosition positionValue)
+    {
+        isOpenPosition = true;
+        position = positionValue;
+    }
+
+    private bool isOpenDraggable;
+    private bool isOpenDraggableSelector;
+
+    private bool isOpenStyle;
+    private bool isOpenClass;
+    private bool isOpenStyles;
+    private bool isOpenClasses;
+
+    private bool isOpenRtl;
+
+
 
     private readonly string example1RazorCode = @"
 <BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
@@ -249,4 +290,112 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
 </BitModal>";
     private readonly string example3CsharpCode = @"
 private bool isOpenBasic;";
+
+    private readonly string example4RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example4CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example5RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example5CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example6RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example6CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example7RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example7CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example8RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example8CsharpCode = @"
+private bool isOpenBasic;";
+
+    private readonly string example9RazorCode = @"
+<BitButton OnClick=""() => isOpenBasic = true"">Open Modal</BitButton>
+
+<BitModal @bind-IsOpen=""isOpenBasic"">
+    <div style=""padding:1rem; max-width:40rem"">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
+        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
+        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
+        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
+        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
+        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
+        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
+        efficitur.
+    </div>
+</BitModal>";
+    private readonly string example9CsharpCode = @"
+private bool isOpenBasic;";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss
index d25be02092..a9d42776c2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scss
@@ -1,33 +1,10 @@
-@import '../../../../Styles/abstracts/_functions.scss';
-
-.modal-header {
-    gap: 0.5rem;
-    display: flex;
-    font-weight: 600;
-    align-items: center;
-    font-size: rem2(24px);
-    border-top: rem2(4px) solid #0054C6;
-    padding: rem2(12px) rem2(12px) rem2(14px) rem2(24px);
-}
-
-.modal-header-text {
-    flex-grow: 1;
-}
-
-.modal-body {
-    overflow-y: hidden;
-    max-width: rem2(960px);
-    line-height: rem2(20px);
-    padding: 0 rem2(24px) rem2(24px);
-}
-
-.relative-container {
+.relative-container {
     width: 100%;
+    height: 400px;
     overflow: auto;
     margin-top: 1rem;
     position: relative;
-    height: rem2(400px);
-    border: rem2(2px) lightgreen solid;
+    border: 2px lightgreen solid;
 }
 
 .position-btn-container {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
index afd142cdd1..3a16b05cc9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProPanel/BitProPanelDemo.razor
@@ -101,8 +101,7 @@
 
         <ComponentExampleBox Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
             <ExamplePreview>
-                <div>BitProPanel has some advanced options to be customized.</div>
-                <br /><br />
+                <div>BitProPanel has some advanced options to be customized.</div><br />
                 <BitButton OnClick="() => bitProPanelRef.Open()">Open ProPanel with ShowCloseButton</BitButton>
                 <BitProPanel @ref="bitProPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
                     <div style="width:300px">
@@ -111,7 +110,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isBlockingProPanelOpen = true">Open ProPanel with Blocking</BitButton>
                 <BitProPanel @bind-IsOpen="isBlockingProPanelOpen" HeaderText="Blocking" ShowCloseButton Blocking>
                     <div style="width:300px">
@@ -120,7 +119,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isModelessProPanelOpen = true">Open ProPanel with Modeless</BitButton>
                 <BitProPanel @bind-IsOpen="isModelessProPanelOpen" HeaderText="Modeless" ShowCloseButton Modeless>
                     <div style="width:300px">
@@ -129,7 +128,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isModeFullProPanelOpen = true">Open ProPanel with ModeFull</BitButton>
                 <BitProPanel @bind-IsOpen="isModeFullProPanelOpen" HeaderText="ModeFull" ShowCloseButton ModeFull>
                     <div style="width:300px">
@@ -138,7 +137,7 @@
                         sagittis nunc, ut interdum ipsum vestibulum non.
                     </div>
                 </BitProPanel>
-                <br /><br /><br />
+                <br />
                 <BitButton OnClick="() => isAutoToggleScrollProPanelOpen = true">Open ProPanel with AutoToggleScroll</BitButton>
                 <BitProPanel @bind-IsOpen="isAutoToggleScrollProPanelOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
                     <div style="width:300px">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
index 7f85c6af6b..c5e7190147 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor
@@ -29,7 +29,7 @@
 
     <ComponentExampleBox Title="Options" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <ExamplePreview>
-            <div>BitModal has some advanced options.</div><br />
+            <div>BitModal has some options.</div><br />
             <BitButton OnClick="() => isOpenBlocking = true">Open Modal (Blocking)</BitButton>
             <BitModal @bind-IsOpen="isOpenBlocking" Blocking>
                 <div style="padding: 1rem; max-width: 40rem">
@@ -83,7 +83,9 @@
             <div>BitModal has an absolute position option to further customize its location.</div><br />
             <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal</BitButton>
             <br /><br />
-            <div class="relative-container">
+            <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
+            <br /><br />
+            <div class="relative-container" id="modal-scroller">
                 <BitModal @bind-IsOpen="isOpenAbsolutePosition" AbsolutePosition>
                     <div style="padding: 1rem; max-width: 40rem">
                         <h3>AbsolutePosition</h3>
@@ -97,31 +99,6 @@
                         efficitur.
                     </div>
                 </BitModal>
-
-                <div>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                    efficitur.
-
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-                    amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-                    sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-                    turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-                    ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-                    Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-                    Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-                    efficitur.
-                </div>
-            </div>
-            <br /><br /><br /><br />
-            <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
-            <br /><br />
-            <div class="relative-container" id="modal-scroller">
                 <BitModal @bind-IsOpen="isOpenScrollerSelector" AbsolutePosition AutoToggleScroll ScrollerSelector="#modal-scroller">
                     <div style="padding: 1rem; max-width: 40rem">
                         <h3>AbsolutePosition with AutoToggleScroll and ScrollerSelector</h3>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
index d739468663..0371960dd7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs
@@ -292,7 +292,9 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
 
 <BitButton OnClick=""() => isOpenAbsolutePosition = true"">Open Modal</BitButton>
 
-<div class=""relative-container"">
+<BitButton OnClick=""() => isOpenScrollerSelector = true"">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
+
+<div class=""relative-container"" id=""modal-scroller"">
     <BitModal @bind-IsOpen=""isOpenAbsolutePosition"" AbsolutePosition>
         <div style=""padding: 1rem; max-width: 40rem"">
             <h3>AbsolutePosition</h3>
@@ -305,32 +307,7 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
             Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
             efficitur.
         </div>
-    </BitModal
-    <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-        efficitur
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
-        amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
-        sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut
-        turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh,
-        ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros.
-        Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante.
-        Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
-        efficitur.
-    </div>
-</div>
-
-
-
-<BitButton OnClick=""() => isOpenScrollerSelector = true"">Open Modal (AutoToggleScroll & ScrollerSelector)</BitButton>
-
-<div class=""relative-container"" id=""modal-scroller"">
+    </BitModal>
     <BitModal @bind-IsOpen=""isOpenScrollerSelector"" AbsolutePosition AutoToggleScroll ScrollerSelector=""#modal-scroller"">
         <div style=""padding: 1rem; max-width: 40rem"">
             <h3>AbsolutePosition with AutoToggleScroll and ScrollerSelector</h3>
@@ -343,7 +320,7 @@ Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia.
             Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
             efficitur.
         </div>
-    </BitModal
+    </BitModal>
     <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
         amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
index 1dcfbccc7d..a635eb0595 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.scss
@@ -1,25 +1,4 @@
-.modal-header {
-    gap: 0.5rem;
-    display: flex;
-    font-size: 24px;
-    font-weight: 600;
-    align-items: center;
-    padding: 12px 12px 14px 24px;
-    border-top: 4px solid #0054C6;
-}
-
-.modal-header-text {
-    flex-grow: 1;
-}
-
-.modal-body {
-    max-width: 960px;
-    line-height: 20px;
-    overflow-y: hidden;
-    padding: 0 24px 24px;
-}
-
-.relative-container {
+.relative-container {
     width: 100%;
     height: 345px;
     overflow: auto;