From b2e42c051b374000714f4faf628e1a35ef98f5d2 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Thu, 9 Mar 2023 15:03:57 +0100
Subject: [PATCH] Changes in (chip, buttons, dropdown grid, inputs, snackbar)

---
 dependencies/Connected                        |   2 +-
 .../Pages/Democomp.razor                      | 145 ++++---
 .../Pages/Index.razor                         |   7 +-
 .../Components/Chip.razor.cs                  |   5 +-
 .../Components/DatePicker.razor               | 196 ++++++---
 .../Components/DatePicker.razor.cs            |   8 +-
 .../Styles/components/_buttons-icons.scss     | 110 +++---
 .../Styles/components/_buttons.scss           |  45 ++-
 .../Styles/components/_card.scss              | 123 ++++--
 .../Styles/components/_chip.scss              |   2 +-
 .../Styles/components/_dropdown.scss          |   9 +-
 .../Styles/components/_grid.scss              |  89 +----
 .../Styles/components/_index.scss             |   3 +-
 .../Styles/components/_inputs.scss            |  13 +-
 .../Styles/components/_snackbar.scss          | 373 ++++++++++--------
 .../Styles/globals/_index.scss                |   3 +-
 .../Utilities/StyleBuilder.cs                 |   2 +-
 17 files changed, 678 insertions(+), 457 deletions(-)
diff --git a/dependencies/Connected b/dependencies/Connected
index dd40532..cc259df 160000
--- a/dependencies/Connected
+++ b/dependencies/Connected
@@ -1 +1 @@
-Subproject commit dd40532a0ff03237407de9635c7211c5e1af5807
+Subproject commit cc259dfc18c4ad6989898fa813e281b9249c3bd3
diff --git a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
index 99153f9..365325a 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
@@ -1,5 +1,8 @@
 @page "/democomp"
 
+
+
+
 <body class="">
     <div class="top-loading-bar"></div>
     <div class="document-container d-flex">
@@ -209,6 +212,25 @@
                         <button type="button" href="#" class="btn btn-outline-dark">click me</button>
                     </div>
                 </div>
+
+
+                <hr class="mt-4 mb-4">
+                <div>
+                    <h4 class="text-core mt-5">Link buttons</h4>
+                    <div class="btn-content">
+                        <button type="button" href="#" class="btn btn-link-core">click me</button>
+                        <button type="button" href="#" class="btn btn-link-primary">click me</button>
+                        <button type="button" href="#" class="btn btn-link-secondary">click me</button>
+                        <button type="button" href="#" class="btn btn-link-success">click me</button>
+                        <button type="button" href="#" class="btn btn-link-info">click me</button>
+                        <button type="button" href="#" class="btn btn-link-warning">click me</button>
+                        <button type="button" href="#" class="btn btn-link-danger">click me</button>
+                        <button type="button" href="#" class="btn btn-link-white">click me</button>
+                        <button type="button" href="#" class="btn btn-link-light">click me</button>
+                        <button type="button" href="#" class="btn btn-link-dark">click me</button>
+                    </div>
+                </div>
+
                 <hr class="mt-4 mb-4">
                 <div>
                     <h4 class="text-core mt-5">Sizes</h4>
@@ -545,11 +567,13 @@
                         </div>
 
 
-                        <div class="form-group error">
+                        <div class="form-group ">
                             <select type="textarea" required="required">
                             </select>
                             <span class="highlight"></span><span class="bar"></span>
                             <label class="label-animated">Select</label>
+                            <div class="input-helper-text">Some helping Text</div>
+                            <div class="input-error-text">At least 6 characters required</div>
                             <span class="input-glyph-wraper">
                                 <span class="input-glyph button">
                                     <Glyph SVG="@Icons.Material.Outlined.Cancel" class="icon-root svg-icon" />
@@ -561,7 +585,7 @@
                                     <Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
                                 </span>
                             </span>
-                            <div class="backdrop"></div>
+                            <div class="backdrop d-sm-none"></div>
                             <div class="drop-down">
                                 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                     <div class="dropdown-header">Header</div>
@@ -575,6 +599,15 @@
 
                         </div>
 
+
+                        <DatePicker
+                        CloseOnDateSelect=true
+                        @bind-SelectedDate=@date> 
+                        </DatePicker>
+                        @code {
+                            DateTime date = DateTime.Today;
+                        }
+
                         <div class="form-group">
                             <textarea type="textarea" rows="5" required="required"></textarea><span class="highlight"></span><span class="bar"></span>
                             <label class="label-animated">Message</label>
@@ -695,9 +728,9 @@
 
                 </div>
 
-                <div class="data-grid dense image select collapse  @NavClosed mt-5">
+                <div class="data-grid dense image select collapse   mt-5">
                     <!--dense select collapse-->
-                    <div class="data-grid-row-content">
+                    <div class="data-grid-row-content @NavClosed">
                         <!--active-->
                         <div class="data-grid-select">
                             @* <label class="checkbox-group m-0" for="checkbox-S11">
@@ -841,60 +874,65 @@
 
 
 
-        <section id="buttons" class="mt-3 b-1 b-r-4 p-5">
+        <section id="card" class="mt-3 b-1 b-r-4 p-5">
             <h2>Card</h2>
             <p>Cards contain content and actions that relate information about a subject.</p>
             
                 <div class="grid grid-col-3 gap-3">
 
-                    <div class="card">
+                    <div class="card @NavClosed warning border elevation-1">  <!--classes for priority (info, success, warning, danger), class for border (border), class for shadow (elevation-1)-->
 
-                    <div class="card-header-cta">
-                        <button class="btn btn-light btn-icon">
-                        <Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
-                        </button>            
-                    </div>
+                        <div class="card-header-cta">
+                           <button class="btn btn-white btn-icon">
+                                <Glyph SVG="@Icons.Material.Filled.FavoriteBorder" class="icon-root svg-icon" />
+                            </button>  
+                            <button @onclick="ToggleNav" class="btn btn-white btn-icon collapse"> <!--optional button for toggle collapsed contnent-->
+                                <Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon" />
+                            </button>  
+                        </div>
 
-                      <div class="card-media">
+                        <div class="card-media"> <!--optional media contnent-->
                             <img class="img-fluid" style="height:250px" src="https://source.unsplash.com/random?face">
                         </div>
 
+                        <div class="card-avatar">    <!--optional profile contnent-->                            
+                            <img class="img-fluid" src="https://source.unsplash.com/random?face">
+                            <div class="">
+                                <div class="avatar-title">Profile title</div>
+                                <div class="avatar-subhead">Profile subhead</div>
+                            </div>
+                        </div>
 
-                                <div class="card-avatar">                                
-                                    <img class="img-fluid" src="https://source.unsplash.com/random?face">
-                                    <div class="">
-                                        <div class="avatar-title">Profile title</div>
-                                        <div class="avatar-subhead">Profile subhead</div>
-                                    </div>
-                                </div>
-
-                        <div class="card-container">
-
-
-                                    <div class="card-header">       
-                                        <div class="card-header-title">
-                                            <p class="typography typography-body1">Card Title</p>
-                                            <p class="card-header-subhead">Card Subhead</p>
-                                        </div>
+                        <div class="card-content-container"> <!--main card contnent-->
 
+                            <div class="card-header">       
+                                <p class="card-header-title">Card Title</p>
+                                <p class="card-header-subhead">Card Subhead</p>
+                            </div>                    
 
-                                    </div>                    
-            
-
-                                    <div class="card-content">
-                                        <p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
-                                    </div>
+                            <div class="card-content">
+                                <p class="typography typography-body2">Cards contain content and actions that relate information about a subject.</p>
+                            </div>
+                               
+                            <div class="collapsed @NavClosed"> <!--optional collapsed contnent-->
+                                <div class="text-small pb-3">
+                                    You have successfully published ticket You have successfully published ticket Partner network on desk Connected Partner network on desk Connected
+                                </div>
+                            </div>
 
-                                    <div class="card-actions">
-                                        <div class="btn-content">
-                                            <button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
-                                            <button type="button" class="btn btn-sm  btn-core">Understood</button>
-                                        </div>
-                                    </div>
+                            <div class="card-divider"></div>
 
+                            <div class="card-actions justify-flex-end"> <!--optional action contnent-->
+                                <div class="btn-content">                                    
+                                    <button type="button" class="btn btn-sm btn-secondary" @onclick="ToggleNav">Close</button>
+                                    <button type="button" class="btn btn-sm  btn-core">Understood</button>
+                                </div>
                             </div>
+
+                        </div>
                     </div>
 
+
                 </div>
 
         </section>
@@ -911,7 +949,7 @@
             </button>
 
             <!-- Modal -->
-            <div class="modal fade @NavClosed" tabindex="-1"> 
+            <div class="modal fade " tabindex="-1"> <!--@NavClosed-->
             <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                 <div class="modal-content">
                 <div class="modal-header">
@@ -1057,31 +1095,42 @@
             </div>
         </aside>
     </div>
-            <div class="snackbar-group d-none bottom right"> <!--set position top, right, bottom, left -->
-                    <div class="snackbar success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
+            <div class="snackbar-group  bottom right"> <!--set position top, right, bottom, left,  class show when group is visible-->
+                    <div class="snackbar slide-in success"> <!-- Snackbars disappear automatically, classes for priority info, success, warning, danger-->
                         <div class="snackbar-content">
                             <div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.Check" class="icon-root svg-icon" /></div>
                             <div class="snackbar-message">Snackbar message text</div>
                         </div>
                     </div>
 
-                    <div class="snackbar banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
+                    <div class="snackbar slide-in banner"> <!-- Banners remain until dismissed by the user, or if the state that caused the banner is resolved -->
                         <div class="snackbar-content">
                             <div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.PersonOutline" class="icon-root svg-icon" /></div>
                             <div class="snackbar-message">
-                                <div class="snackbar-title">Snackbar banner title</div>
+                                <div class="snackbar-header">
+                                    <div class="snackbar-title">Snackbar banner title</div>
+                                    <div class="snackbar-recived">17:22</div>
+                                </div>
                                 <div class="snackbar-label">Snackbar banner message text </div>
 
                             </div>
-                            <div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div>
+                            @* <div class="snackbar-cta-icon"><Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" /></div> *@
+                        <div class="snackbar-cta-abs">
+                            <button class="btn btn-white btn-icon">
+                                <Glyph SVG="@Icons.Material.Filled.Close" class="icon-root svg-icon" />
+                            </button>
+                        </div>
                         </div>
                     </div>
 
-                    <div class="snackbar dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
+                    <div class="snackbar slide-in dialog"> <!-- Dialogs block app usage until the user takes a dialog action or exits the dialog (if available) -->
                         <div class="snackbar-content">
                             <div class="snackbar-leading-icon"><Glyph SVG="@Icons.Material.Filled.WarningAmber" class="icon-root svg-icon" /></div>
                             <div class="snackbar-message">
-                                <div class="snackbar-title">Snackbar dialog title</div>
+                                    <div class="snackbar-header">
+                                        <div class="snackbar-title">Snackbar dialog title</div>
+                                    <div class="snackbar-recived">17:22</div>
+                                </div>
                                 <div class="snackbar-label">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati nihil totam, modi minus</div>
                                 <div class="snackbar-action">
                                     <div class="btn btn-secondary">Snackbar action</div>
diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
index 3205f94..9e9bf51 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor
@@ -1,5 +1,6 @@
 ﻿@page "/"
 @using Connected.Models;
+@using Connected.Components;
 
 
 <h1 style="text-align:center;">Component Sandbox</h1>
@@ -21,15 +22,11 @@
 <DatePicker 
 CloseOnDateSelect=true
 @bind-SelectedDate=@date>
-
+ 
 </DatePicker>
 
-<TextInput @bind-Value="@value"></TextInput>
 <p>Selected date is @date.ToString()</p>
 
-@value
-
 @code {
     DateTime date = DateTime.Today;
-
 }
\ No newline at end of file
diff --git a/src/Connected.Components/Components/Chip.razor.cs b/src/Connected.Components/Components/Chip.razor.cs
index ff1297f..385a115 100644
--- a/src/Connected.Components/Components/Chip.razor.cs
+++ b/src/Connected.Components/Components/Chip.razor.cs
@@ -1,4 +1,7 @@
-﻿namespace Connected.Components;
+﻿using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components;
+
 public partial class Chip
 {
 }
diff --git a/src/Connected.Components/Components/DatePicker.razor b/src/Connected.Components/Components/DatePicker.razor
index e369771..17a388b 100644
--- a/src/Connected.Components/Components/DatePicker.razor
+++ b/src/Connected.Components/Components/DatePicker.razor
@@ -1,109 +1,177 @@
 ﻿@using System.Globalization;
+
+      
+
 @if (loaded)
 {
-    <div id="picker" class="m-2" style="width:270px; height:auto;">
+    <div id="picker">
+
         <!-- DatePicker input !can be edited manualy -->
-        <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
+        @* <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div> *@
+
+
+        <div class="form-group">
+            <input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
+            <label class="label-animated">Select date</label>
+            <div class="input-helper-text">Some helping Text</div>
+            <div class="input-error-text">At least 6 characters required</div>
+            <span class="input-glyph-wraper">
+                <span class="input-glyph">
+                    <span class="input-glyph button" @onclick="(() => Shown = !Shown)">
+                        <Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
+                    </span>
+                    <span class="input-glyph error">
+                        <Glyph SVG="@Icons.Material.Outlined.ErrorOutline" class="icon-root svg-icon" />
+                    </span>
+                </span>
+            </span>
+        </div>
+
+
         @if (Shown)
-        {
+        { 
             <!-- DatePicker header -->
-            <div id="picker_header" class="bg-info" style="height:80px;">
-                <div class="text-medium p-1">
+            <div class="picker-container">
+            <div id="picker-header">
+                @* <div class="text-medium">
                     @SelectedDate.Year.ToString()
-                </div>
-                <div class="text-large p-1">
+                </div> *@
+                <div class="picker-header-label">Select date</div>
+                <div class="picker-header-title">
                     @SelectedDate.ToString("ddd, " + Format)
                 </div>
             </div>
+            <div class="picker-divider"></div>
             <!-- DatePicker body -->
-            <div id="picker_body" class="bg-white" style="height:auto;">
+            <div id="picker-body">
                 @switch (Selecting)
                 {
                     case Selecting.Years:
                         {
-                            <div class="@NavBarClass">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                  
+                            <div class="picker-menu">
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
+                                </button> 
+                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
+                                </button> 
                             </div>
-                            @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
-                            {
-                                int y = i;
-                                <a href="#" @onclick="@(()=>SetYear(y))">
-                                    <div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
-                                        <div class="chip-leading-icon"></div>
-                                        <div class="chip-label">@i.ToString()</div>
-                                        <div class="chip-cta-icon"></div>
-                                    </div>
-
-                                </a>
-                                if (SelectedDate.Year - i % 3 == 0)
+                            <div class="picker-grid-col-3 gap-3">
+                                @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
                                 {
-                                    <br />
+                                    int y = i;
+                                    @* <a href="#" @onclick="@(()=>SetYear(y))">
+                                        <div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
+                                            <div class="chip-leading-icon"></div>
+                                            <div class="chip-label">@i.ToString()</div>
+                                            <div class="chip-cta-icon"></div>
+                                        </div>
+
+                                    </a>
+                                    if (SelectedDate.Year - i % 3 == 0)
+                                    {
+                                        <br />
+                                    } *@
+                                <button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
                                 }
-                            }
+                            </div>
                             break;
                         }
                     case Selecting.Months:
                         {
-                            <div class="@NavBarClass">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+             
+
+                            <div class="picker-menu">
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
+                                </button> 
+                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
+                                </button> 
                             </div>
-                            @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
-                            {
-                                int m = i;
-                                <a href="#" @onclick="@(()=>SetMonth(m))">
+                            <div class="picker-grid-col-3 gap-3">
+                                @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
+                                {
+                                    int m = i;
+                                    @* <a href="#" @onclick="@(()=>SetMonth(m))">
 
-                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
-                                        <div class="chip-leading-icon"></div>
-                                        <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
-                                        <div class="chip-cta-icon"></div>
-                                    </div>
+                                        <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
+                                            <div class="chip-leading-icon"></div>
+                                            <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
+                                            <div class="chip-cta-icon"></div>
+                                        </div>
+
+                                    </a>
+                                
+                                
+                                    if (i % 3 == 0)
+                                    {
+                                        <br />
+                                    } *@
+                                <button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
 
-                                </a>
-                                if (i % 3 == 0)
-                                {
-                                    <br />
                                 }
-                            }
+                             </div>
                             break;
                         }
                     case (Selecting.Days):
                         {
-                            <div class="@NavBarClass">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            <div class="picker-menu">
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
+                                </button> 
+                                <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
+                                <button class="btn btn-icon-alt "> 
+                                     <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
+                                </button> 
                             </div>
-
-                            @for (int i = 0; i < 7; i++)
-                            {
-                                <div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@CalendarStart.AddDays(i).ToString("ddd")</div>
-                            }
-                            @foreach (var Date in ShowingDates)
-                            {
-                                <a href="#" @onclick="@(()=>SetDate(Date))">
-                                    <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
-                                        @Date.Day.ToString()
-                                    </div>
-                                </a>
-                                @if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                            <div class="picker-grid-col-7 gap-3">
+                                @for (int i = 0; i < 7; i++)
+                            
                                 {
-                                    <br />
+                                
+                                    @* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
+                                    <div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
+                                
                                 }
+                            
+                                @foreach (var Date in ShowingDates)
+                                {
+                                    <button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))">
+                                        @* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
+                                            @Date.Day.ToString()
+                                        </div> *@
+
+                                        
+                                            @Date.Day.ToString()
+                                        
+                                    </button>
+                                    @if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                    {
+                                        @* <br /> *@
+                                    }
 
-                                CalendarStart = CalendarStart.AddDays(1);
-                            }
+                                    CalendarStart = CalendarStart.AddDays(1);
+                                }
+                            </div>
                             break;
+                       
                         }
+                         
                 }
             </div>
             <!-- Bottom bar -->
+                <div class="btn-content  justify-flex-end my-0">                                    
+                    <button type="button" class="btn btn-sm btn-secondary">Cancel</button>
+                    <button type="button" class="btn btn-sm  btn-core">OK</button>
+                </div>
             <div>
                 
             </div>
+        </div>
         }
     </div>
 }
diff --git a/src/Connected.Components/Components/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker.razor.cs
index 676bedd..66f7905 100644
--- a/src/Connected.Components/Components/DatePicker.razor.cs
+++ b/src/Connected.Components/Components/DatePicker.razor.cs
@@ -153,14 +153,14 @@ public partial class DatePicker
 	public string DateChipStyle(DateTime date)
 	{
 		string result = "";
-		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
-		if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
+		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
+		if (date.CompareTo(DateTime.Today) == 0) result = "days current";
 		if (date.Month.CompareTo(SelectedDate.Month) == 0)
 		{
 			if (date.Date.CompareTo(SelectedDate.Date) == 0)
-				return result+" bg-info text-light";
+				return result+"days active";
 			else
-				return result+" bg-core text-dark";
+				return result+" ";
 		}
 		return result;
 	}
diff --git a/src/Connected.Components/Styles/components/_buttons-icons.scss b/src/Connected.Components/Styles/components/_buttons-icons.scss
index a8f6c10..a6677ba 100644
--- a/src/Connected.Components/Styles/components/_buttons-icons.scss
+++ b/src/Connected.Components/Styles/components/_buttons-icons.scss
@@ -2,66 +2,64 @@
 @use "../util/" as *;
 
 .btn-icon {
-    font-size: inherit;
-    flex: 0 0 auto;
-    padding: 8px;   
-    line-height: 1;
-    text-align: center;
-    border-radius: $border-radius-pill;
-    cursor: pointer;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
+  font-size: inherit;
+  flex: 0 0 auto;
+  padding: 8px;
+  line-height: 1;
+  text-align: center;
+  border-radius: $border-radius-pill;
+  cursor: pointer;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-
 .btn-icon-alt {
-    font-size: inherit;
-    flex: 0 0 auto;
-    border: 1px solid transparent;
-    padding: 8px;
-    line-height: 1;
-    text-align: center;
-    border-radius: $border-radius-pill;
-    cursor: pointer;
-    background-color: transparent;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; 
-        &:hover {
-            background-color: rgba(0,0,0,.075)
-        }
-        &:focus-visible,
-        &.focus {
-            outline: 0;
-            background-color: var(--bg-core-primary-light);
-            box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
-        }
-        &:active,
-        &.active {
-            color: #fff;
-            background-color: var(--bg-core-primary);
-        }
+  font-size: inherit;
+  flex: 0 0 auto;
+  border: 1px solid transparent;
+  padding: 8px;
+  line-height: 1;
+  text-align: center;
+  border-radius: $border-radius-pill;
+  cursor: pointer;
+  background-color: transparent;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.075);
   }
+  &:focus-visible,
+  &.focus {
+    outline: 0;
+    background-color: var(--bg-core-primary-light);
+    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
+  }
+  &:active,
+  &.active {
+    color: #fff;
+    background-color: var(--bg-core-primary);
+  }
+}
 
+@each $key, $val in $theme-colors {
+  .btn-icon-alt.#{$key} {
+    background-color: transparent;
+    color: $val;
+    &:hover {
+      //background-color: lighten($val, 24);
+      background-color: rgba($val, 0.1);
+    }
+    &:focus-visible,
+    &.focus {
+      outline: 0;
+      color: set-color($val);
+      background-color: rgba($val, 0.5);
+      box-shadow: 0 0 0 0.15rem lighten($val, 20);
+    }
+    &:active,
+    &.active {
+      color: set-color($val);
+      background-color: $val;
+    }
+  } 
+}
 
 
-  @each $key, $val in $theme-colors {
-    .btn-icon-alt.#{$key} {
-      background-color: transparent;
-      color: $val;
-      &:hover {
-        //background-color: lighten($val, 24);
-        background-color: rgba($val, .1);
-      }
-      &:focus-visible,
-      &.focus {
-        outline: 0;
-        color: set-color($val);
-        background-color: rgba($val, .5);
-        box-shadow: 0 0 0 0.15rem lighten($val, 20);
-      }
-      &:active,
-      &.active {
-        color: set-color($val);
-        background-color: $val;
-      }
-    }
-}
\ No newline at end of file
diff --git a/src/Connected.Components/Styles/components/_buttons.scss b/src/Connected.Components/Styles/components/_buttons.scss
index 064bf53..d59f319 100644
--- a/src/Connected.Components/Styles/components/_buttons.scss
+++ b/src/Connected.Components/Styles/components/_buttons.scss
@@ -59,10 +59,29 @@ $border-radius-btn: 100vw;
     &:active,
     &.active {
       background-color: darken($val, 15);
+    }    
+  }
+
+  .btn-link-#{$key} {
+    // @include btn();
+    background-color: transparent;
+    color: $val;
+    border: 1px solid transparent;
+    &:hover {
+      color: set-color($val);
+      background-color: $val;
     }
-  
-    
+    &:focus-visible,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 0.15rem lighten($val, 20);
+    }
+    &:active,
+    &.active {
+      background-color: darken($val, 15);
+    }    
   }
+
   .btn-outline-#{$key} {
     // @include btn();
     color: darken($val, 10);
@@ -112,8 +131,8 @@ $border-radius-btn: 100vw;
 
 .btn-core {
   background-color: var(--bg-core-primary) !important;
-  //color: set-color (var(--bg-core-primary-lighten)) !important;
-  color: rgba(255,255,255,.85) !important;
+  color: set-color (var(--bg-core-primary-lighten)) !important;
+  //color: rgba(255,255,255,.85) !important;
   &:hover {
     background-color: var(--bg-core-primary-darken) !important;
   }
@@ -128,6 +147,24 @@ $border-radius-btn: 100vw;
   }
 }
 
+.btn-link-core {
+  background-color: transparent !important;
+  color: (var(--bg-core-primary-darken)) !important;
+  &:hover {
+    color: rgba(255,255,255,.85) !important;
+    background-color: var(--bg-core-primary-darken) !important;
+  }
+  &:focus-visible,
+  &.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
+  }
+  &:active,
+  &.active {
+    color: rgba(255,255,255,.85) !important;
+    background-color: var(--bg-core-primary-darken) !important;
+  }
+}
 
 
 .btn-outline-core {
diff --git a/src/Connected.Components/Styles/components/_card.scss b/src/Connected.Components/Styles/components/_card.scss
index 20cbfed..5eb4cca 100644
--- a/src/Connected.Components/Styles/components/_card.scss
+++ b/src/Connected.Components/Styles/components/_card.scss
@@ -5,7 +5,7 @@ $box-padding: 0 0 0.25rem 0;
 
 .card {
   background-color: var(--element-fg-core);
-  border: 1px solid var(--border-core);
+
   border-radius: $border-radius-lg;
   display: flex;
   flex-direction: column;
@@ -13,44 +13,109 @@ $box-padding: 0 0 0.25rem 0;
   position: relative;
 }
 
+.card.elevation-1{
+    box-shadow: $base-box-shadow;
+  }
+
+.card.border{
+    border: 1px solid var(--border-core);
+}
+
+.card:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: $border-radius-lg;
+    opacity: .2;
+    pointer-events: none;
+}
+
+.card.danger:after,
+.card.danger button:not(.btn-secondary, .card-header-cta button) {
+    background-color: $danger!important;
+}
+
+.card.danger.border,
+.card.danger .card-divider {
+    border-color: lighten($danger, 15)!important;
+}
+
+.card.warning:after,
+.card.warning button:not(.btn-secondary, .card-header-cta button) {
+    background-color: $warning!important;
+}
+
+.card.warning.border,
+.card.warning .card-divider {
+    border-color: lighten($warning, 15)!important;
+}
+
+.card.success:after,
+.card.success button:not(.btn-secondary, .card-header-cta button) {
+    background-color: $success!important;
+}
+
+.card.success.border,
+.card.success .card-divider {
+    border-color: lighten($success, 15)!important;
+}
+
+.card.info:after,
+.card.info button:not(.btn-secondary, .card-header-cta button) {
+    background-color: $info!important;
+}
+
+.card.info.border,
+.card.info .card-divider {
+    border-color: lighten($info, 15)!important;
+}
+
 .card-header-cta {
   position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
-  z-index: 1;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+  display: flex;
+  gap: .5rem;
+}
+
+.card .card-header-cta i,
+.card .card-header-cta svg  {
+  transform: rotate(0);
+  transition: all 0.5s ease-in;
+}
+
+.card.show .card-header-cta .collapse i,
+.card.show .card-header-cta .collapse svg  {
+  transform: rotate(180deg);
 }
 
+
 .card-media {
   width: 100%;
   max-height: 250px;
-  margin-bottom: .75rem;
+  z-index: 1;
   & img {
     object-fit: cover;
     width: inherit;
   }
 }
 
-.card-container {
-  padding: 0 .75rem .75rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.card-container {
-  padding: 0.75rem;
+.card-content-container {
+  padding: 0.75rem 1rem;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
 
-.card-container > * {
-  //flex: 1;
-}
+// .card-container > * {
+//   //flex: 1;
+// }
 
 .card-avatar {
   display: flex;
   align-items: center;
-  margin: 0 0.75rem;
+  margin: 0.75rem 1rem 0;
   padding: $box-padding;
 
   & img {
@@ -59,6 +124,7 @@ $box-padding: 0 0 0.25rem 0;
     object-fit: cover;
     border-radius: 50%;
     margin-right: 0.5rem;
+    z-index: 1;
   }
   & .avatar-title {
     font-weight: 600;
@@ -76,14 +142,14 @@ $box-padding: 0 0 0.25rem 0;
   padding: $box-padding;
 
   & .card-header-title {
-    font-size: 1.5rem;
+    font-size: $font-size-md;
     color: var(--text-core-hc);
   }
 
   & .card-header-subhead {
-    font-size: 1.05rem;
-    font-weight: 500;
+    font-size: $base-font-size;
     line-height: 0.5;
+    font-weight: 500;
     color: var(--text-core-lc);
   }
 }
@@ -97,8 +163,17 @@ $box-padding: 0 0 0.25rem 0;
   margin-top: auto;
   display: flex;
   flex-wrap: wrap;
-align-content: end;
-  & .btn-content{
-    margin: 0 .25rem;
-  }
+  align-content: end;
+  z-index: 1;
+    & .btn-content {
+        margin: 0.5rem 0 .25rem;
+    }
 }
+
+.card-divider {
+    width: 100%;
+    height: 0;
+    margin: 0 0 .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid var(--border-core);
+}
\ No newline at end of file
diff --git a/src/Connected.Components/Styles/components/_chip.scss b/src/Connected.Components/Styles/components/_chip.scss
index 65234e7..0046e69 100644
--- a/src/Connected.Components/Styles/components/_chip.scss
+++ b/src/Connected.Components/Styles/components/_chip.scss
@@ -181,7 +181,7 @@
       max-height: max-content;
       opacity: 1;
       pointer-events: initial;
-      border-radius: .6rem;
+
 
   }
   &:focus-within ~ .backdrop {
diff --git a/src/Connected.Components/Styles/components/_dropdown.scss b/src/Connected.Components/Styles/components/_dropdown.scss
index 77a852e..71014c8 100644
--- a/src/Connected.Components/Styles/components/_dropdown.scss
+++ b/src/Connected.Components/Styles/components/_dropdown.scss
@@ -1,6 +1,9 @@
 @use "../globals/" as *;
 @use "../util/" as *;
 
+
+
+
 .drop-down {
   position: fixed;
   top: 50%;
@@ -25,13 +28,13 @@
 @include breakpoint(sm) {
   .drop-down {
     position: absolute;
-    top: 46px;
+    top: auto;
     left: 0;
-    opacity: 0;
+    margin-top: 1rem;
     min-width: 100%;
     width: 100%;
     transform: none;
-    border-radius: 0 0 $border-radius-lg $border-radius-lg;
+    border-radius: $border-radius-lg;
   }
 }
 
diff --git a/src/Connected.Components/Styles/components/_grid.scss b/src/Connected.Components/Styles/components/_grid.scss
index 1bbf4fd..cd99261 100644
--- a/src/Connected.Components/Styles/components/_grid.scss
+++ b/src/Connected.Components/Styles/components/_grid.scss
@@ -12,78 +12,6 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
 
-//   .grid.grid-col-1{
-//     $cols: 1;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-//   .grid.grid-col-2{
-//     $cols: 2;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-3{
-//     $cols: 3;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-4{
-//     $cols: 4;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-5{
-//     $cols: 5;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-6{
-//     $cols: 6;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-7{
-//     $cols: 7;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-8{
-//     $cols: 8;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-9{
-//     $cols: 9;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-10{
-//     $cols: 10;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-11{
-//     $cols: 11;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
-// .grid.grid-col-12{
-//     $cols: 12;
-//     @include grid();
-//     grid-template-columns: repeat(auto-fit, minmax(max(250px, 100% / ($cols + 1) + 1px), 1fr));
-// }
-
 $gridcol: ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
 
 @each $colCount in $gridcol {
@@ -312,8 +240,8 @@ $columns: 12;
   transition: all 0.5s ease-in;
 }
 
-.data-grid.show .data-grid-collapse-cta i,
-.data-grid.show .data-grid-collapse-cta svg {
+.data-grid-row-content.show .data-grid-collapse-cta i,
+.data-grid-row-content.show .data-grid-collapse-cta svg {
   transform: rotate(180deg);
   transition: all 0.5s ease-in;
 }
@@ -364,7 +292,7 @@ overflow: hidden;
 
 
 .dots {
-  --width: .75rem;
+  --width: .85rem;
   --height: var(--width);  
 
   position: absolute;
@@ -376,18 +304,17 @@ overflow: hidden;
   .dot {
       width: var(--width);
       height: var(--height);
-      border-radius: 50%;
-      background-color: var(--bg-core-primary-lighten);
+      border-radius: $border-radius-pill;
+      background-color: var(--bg-core-primary);
       display: inline-block;
-      outline: 1px solid #fff;
+      outline: 1px solidvar(--border-core);
       transition: all 300ms ease-in-out;
   }
 
   .dot.active,
   .dot.next {
-    background-color: var(--bg-core-primary);
-    outline: 2px solid var(--bg-core-primary);
-    outline-offset: 2px;
+    background-color: var(--bg-core-primary-darken);
+    width: calc(var(--width) * 2);
   }
 
   .dot.completed {
diff --git a/src/Connected.Components/Styles/components/_index.scss b/src/Connected.Components/Styles/components/_index.scss
index 5e38ba8..623f83c 100644
--- a/src/Connected.Components/Styles/components/_index.scss
+++ b/src/Connected.Components/Styles/components/_index.scss
@@ -15,4 +15,5 @@
 @forward "badge";
 @forward "buttons-icons";
 @forward "dropdown";
-@forward "card";
\ No newline at end of file
+@forward "card";
+@forward "date-picker";
\ No newline at end of file
diff --git a/src/Connected.Components/Styles/components/_inputs.scss b/src/Connected.Components/Styles/components/_inputs.scss
index b29b024..0057e5a 100644
--- a/src/Connected.Components/Styles/components/_inputs.scss
+++ b/src/Connected.Components/Styles/components/_inputs.scss
@@ -257,12 +257,21 @@ select {
   -moz-appearance: textfield;
 }
 
-  .form-group-alt:focus-within {
-    background-color: var(--bg-core-primary-lighten);
+.form-group-alt:focus-within {
+  background-color: var(--bg-core-primary-lighten);
 }
 
 
   /*search*/
+
+  /* clears the 'X'*/
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    -webkit-appearance:none;
+  }
+
   .form-group-alt .input-group-content{
     height: var(--height);
     display: flex;
diff --git a/src/Connected.Components/Styles/components/_snackbar.scss b/src/Connected.Components/Styles/components/_snackbar.scss
index c4b2b78..61d3b96 100644
--- a/src/Connected.Components/Styles/components/_snackbar.scss
+++ b/src/Connected.Components/Styles/components/_snackbar.scss
@@ -1,203 +1,256 @@
-@use '../globals/' as *;
-@use '../util/' as *;
+@use "../globals/" as *;
+@use "../util/" as *;
 
+.snackbar-group {
+  position: fixed;
+  z-index: $snackbar-zindex;
+  // top: 0;
+  // right: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 100svh;
+  //background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
+//   border: 1px solid rgba(255, 255, 255, 0.25);
+//   border-radius: 0.6rem;
+//   backdrop-filter: blur(25px) opacity(0.5);
+  transform: translateX(100%);
+  transition: $transition;
+}
 
-.snackbar-group{    
-    position: fixed;
-    z-index: $snackbar-zindex;
-    // top: 0;
-    // right: 0;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    max-height: 100svh;
-    //background:linear-gradient(to left,transparent, transparent, rgba(255,255,255,.15));
-    border: 1px solid rgba(255,255,255,.25);
-    border-radius: 0.6rem;
-    backdrop-filter: blur(25px) opacity(0.5);
+.snackbar-group.show {
+    transform: translateX(0);
+  }
+
+.snackbar {
+  width: 350px;
+  //min-height: 60px;
+  background-color: var(--bg-core-primary-light);
+  background-color: rgba(255,255,255,.8);
+  backdrop-filter: blur(10px);
+  margin: 0 0.75rem 0.75rem;
+  padding: 1rem;
+  border-radius: $border-radius-lg;
+  filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.15));
+  //transform: translateX(100%);
 }
 
-.snackbar{    
-    width: 350px;
-    //min-height: 60px;
-    background-color: var(--bg-core-primary-light);
-    margin: 0 .75rem .75rem;
-    padding: 1rem;
-    border-radius: $border-radius-lg;
-    filter: drop-shadow(1px 2px 4px rgba(0,0,0,.15));
-    transform: translateX(100%);
-    animation: slidein 0.3s ease-in-out forwards;
+.snackbar.slide-in {
+  animation: slidein 0.3s ease-in-out forwards;
 }
- 
-@keyframes slidein {  
-    100%{
-        transform: translateX(0);
-    }
+
+.snackbar.slide-out {
+  animation: slideout 0.3s ease-in-out forwards;
 }
 
-.snackbar:first-of-type{
-    margin-top: 1rem;
+@keyframes slidein {
+  0% {
+    transform: translateX(110%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideout {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(110%);
+  }
 }
 
+.snackbar:first-of-type {
+  margin-top: 1rem;
+}
 
 .snackbar:after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: $border-radius-lg;
-    opacity: .3;
-    pointer-events: none;
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: $border-radius-lg;
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 .snackbar.danger:after,
 .snackbar.danger .snackbar-leading-icon {
-    background-color: $danger;
+  background-color: $danger;
 }
 
 .snackbar.warning:after,
 .snackbar.warning .snackbar-leading-icon {
-    background-color: $warning;
+  background-color: $warning;
 }
 
 .snackbar.success:after,
-.snackbar.success .snackbar-leading-icon  {
-    background-color: $success;
+.snackbar.success .snackbar-leading-icon {
+  background-color: $success;
 }
 
 .snackbar.info:after,
-.snackbar.info .snackbar-leading-icon  {
-    background-color: $info;
+.snackbar.info .snackbar-leading-icon {
+  background-color: $info;
 }
 
 .snackbar-content {
-    --height: 2rem;  
+  --height: 2rem;
+
+  display: flex;
+  //align-items: center;
+  justify-content: center;
+
+  .snackbar-leading-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: var(--bg-core-primary);
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+  }
+
+  .snackbar-leading-icon img {
+    object-fit: cover;
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+  }
+
+  .snackbar-cta-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $border-radius-pill;
+    background-color: transparent;
+    cursor: pointer;
+    height: var(--height);
+    aspect-ratio: 1 / 1;
+    transition: all 0.35s cubic-bezier(0.6, -1.25, 0.6, 2.25);
+  }
+
+  .snackbar-cta-abs {
+    position: absolute;
+    opacity: 0;
+    left: -13px;
+    top: -13px;
+    box-shadow: $base-box-shadow;
+    transition: $transition;
+  }
+
+  .snackbar-cta-abs .btn-icon {
+    padding: 4px;
+  }
+
+  .snackbar-message {
+    font-size: $font-size-sm;
+    margin-left: 0.85rem;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    flex: 1;
+  }
+
+  .snackbar-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .snackbar-title {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-600;
+    color: $text-core-hc;
+  }
+
+  .snackbar-recived {
+    font-size: .75rem;
+    font-weight: $font-weight-600;
+    color: $text-core-vc;
+  }
 
+  .snackbar-action {
     display: flex;
-    //align-items: center;
-    justify-content: center; 
-  
-    .snackbar-leading-icon{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: $border-radius-pill;
-        background-color: var(--bg-core-primary);
-        height: var(--height);
-        aspect-ratio: 1 / 1;
-        overflow: hidden;  
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .snackbar-action .btn {
+    font-size: 0.85rem;
+    text-transform: none;
+    padding: 0.1rem 0.7rem;
+    border-radius: 0.35rem;
+  }
+
+  .snackbar-cta-icon:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+
+.snackbar:hover .snackbar-cta-abs {
+    opacity: .9;
+  }
+
+.snackbar-group {
+  &.top {
+    top: 0;
+  }
+  &.right {
+    right: 0;
+  }
+  &.bottom {
+    bottom: 150px;
+  }
+  &.left {
+    left: 0;
+  }
+
+  @include breakpoint(sm) {
+    &.top {
+      top: 0;
     }
-    
-    .snackbar-leading-icon img{
-        object-fit: cover;
-        height: var(--height);
-        aspect-ratio: 1 / 1;  
+    &.right {
+      right: 0;
     }
-    
-    .snackbar-cta-icon{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: $border-radius-pill;
-        background-color: transparent;
-        cursor: pointer;
-        height: var(--height);
-        aspect-ratio: 1 / 1; 
-        transition: all 0.35s cubic-bezier(0.6,-1.25,0.6,2.25);
+    &.bottom {
+      bottom: 0;
     }
-    
-    .snackbar-message{
-        font-size: $font-size-sm;
-        margin: 0 .85rem;
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        justify-content: center;
-        flex: 1;
+    &.left {
+      left: 0;
     }
+  }
 
-    .snackbar-title{
-        font-size: $font-size-sm;
-        font-weight: $font-weight-600;
-        color: $text-core-hc;
+  @include breakpoint(lg) {
+    &.top {
+      top: 0;
     }
-    
-    .snackbar-action {
-        display: flex;
-        flex-wrap: wrap;
-        gap: .5rem;
-        margin-top: 0.5rem;
+    &.right {
+      right: 0;
     }
-
-    .snackbar-action .btn{
-        font-size: .85rem;
-        text-transform: none;
-        padding: .1rem .7rem;
-        border-radius: 0.35rem;
+    &.bottom {
+      bottom: 0;
     }
-   
-    .snackbar-cta-icon:hover{
-        background-color: rgba(0,0,0,.15);
+    &.left {
+      left: 0;
     }
+  }
 }
 
-.snackbar-group{
-    &.top{
-        top: 0;
-    }
-    &.right{
-        right: 0;
-    }
-    &.bottom{
-        bottom: 150px;
-    }
-    &.left{
-        left: 0;
-    }
+.snackbar {
+  width: 90%;
+  margin: 0 auto 0.75rem auto;
 
+  @include breakpoint(sm) {
+    width: 50vw;
+    margin: 0 0.75rem 0.75rem;
+  }
 
-    @include breakpoint(sm) {
-        &.top{
-            top: 0;
-        }
-        &.right{
-            right: 0;
-        }
-        &.bottom{
-            bottom: 0;
-        }
-        &.left{
-            left: 0;
-        }
-      }  
-    
-    @include breakpoint(lg) {
-        &.top{
-            top: 0;
-        }
-        &.right{
-            right: 0;
-        }
-        &.bottom{
-            bottom: 0;
-        }
-        &.left{
-            left: 0;
-        }
-      }
-  }
-
-
-.snackbar{
-    width: 90%;
-    margin: 0 auto .75rem auto;
-
-
-    @include breakpoint(sm) {
-        width: 50vw;
-        margin: 0 .75rem .75rem;
-      }  
-    
-    @include breakpoint(lg) {
-      width: 350px;
-      }
-  }
\ No newline at end of file
+  @include breakpoint(lg) {
+    width: 350px;
+  }
+}
diff --git a/src/Connected.Components/Styles/globals/_index.scss b/src/Connected.Components/Styles/globals/_index.scss
index e13285e..1238d6b 100644
--- a/src/Connected.Components/Styles/globals/_index.scss
+++ b/src/Connected.Components/Styles/globals/_index.scss
@@ -1,4 +1,5 @@
 @forward 'reset';
 @forward 'variables';
 @forward 'core';
-@forward 'typography';
\ No newline at end of file
+@forward 'typography';
+@forward 'fonts';
\ No newline at end of file
diff --git a/src/Connected.Components/Utilities/StyleBuilder.cs b/src/Connected.Components/Utilities/StyleBuilder.cs
index 620daab..6db2500 100644
--- a/src/Connected.Components/Utilities/StyleBuilder.cs
+++ b/src/Connected.Components/Utilities/StyleBuilder.cs
@@ -37,7 +37,7 @@ public struct StyleBuilder
 	/// <param name="value"></param>
 	public StyleBuilder(string prop, string value) => stringBuffer = $"{prop}:{value};";
 	public StyleBuilder(string style) : this() => this.style = style;
-
+ 
 	/// <summary>
 	/// Adds a conditional in-line style to the builder with space separator and closing semicolon.
 	/// </summary>
