From 6b95526e471eeffd83aa820a2f4e35d1c1125a08 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Thu, 25 Jul 2024 17:00:02 -0500
Subject: [PATCH 01/12] refactor: removes page scope empty state and updates
 styles

---
 .../components/empty_state/_preview.html.erb  | 28 +++---
 .../app/sage_components/sage_empty_state.rb   |  4 +-
 .../stylesheets/components/_empty_state.scss  | 85 +++++--------------
 3 files changed, 36 insertions(+), 81 deletions(-)

diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
index b1c7f56bc4..ff8a218545 100644
--- a/docs/app/views/examples/components/empty_state/_preview.html.erb
+++ b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -31,7 +31,6 @@
 <%= sage_component SageEmptyState, {
   title: "Create your first Email Campaign",
   graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
 } do %>
   <% content_for :sage_empty_state_text do %>
     <p>
@@ -41,7 +40,7 @@
     </p>
   <% end %>
   <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButtonGroup, { gap: :sm } do %>
+    <%= sage_component SageButtonGroup, { align: 'center', gap: :sm } do %>
       <%= sage_component SageButton, {
         attributes: { href: "#" },
         style: "primary",
@@ -61,7 +60,6 @@
 <%= sage_component SageEmptyState, {
   title: "Create your first Email Campaign",
   graphic: image_tag("empty-state-lg.svg", alt: ""),
-  scope: "page",
 } do %>
   <% content_for :sage_empty_state_text do %>
     <p>
@@ -71,16 +69,18 @@
     </p>
   <% end %>
   <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "primary",
-      value: "Create Email Campaigns",
-    } %>
-    <%= sage_component SageButton, {
-      attributes: { href: "#" },
-      style: "secondary",
-      subtle: true,
-      value: "Learn More",
-    } %>
+    <%= sage_component SageButtonGroup, { align: 'center', gap: :sm } do %>
+      <%= sage_component SageButton, {
+        attributes: { href: "#" },
+        style: "primary",
+        value: "Create Email Campaigns",
+      } %>
+      <%= sage_component SageButton, {
+        attributes: { href: "#" },
+        style: "secondary",
+        subtle: true,
+        value: "Learn More",
+      } %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
index 79a7fc2112..52b62ebeb8 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -3,10 +3,10 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
-    scope: [:optional, NilClass, Set.new(["page", "compact", nil])],
+    scope: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],
-    title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h5", "h6"])],
+    title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h6"])],
   })
   def sections
     %w(empty_state_actions empty_state_text empty_state_video)
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index effb269696..786315dc86 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -4,28 +4,19 @@
 /// @group sage
 ////
 
-$-empty-state-graphic-feature-width: 100%;
-$-empty-state-graphic-feature-height: rem(142px);
-$-empty-state-graphic-page-width: 100%;
-$-empty-state-graphic-page-height: rem(336px);
-$-empty-state-page-max-width: rem(1064px);
+$-empty-state-graphic-default-width: 100%;
+$-empty-state-graphic-default-height: rem(104px);
+$-empty-state-graphic-compact-width: 100%;
+$-empty-state-graphic-compact-height: rem(56px);
 
 .sage-empty-state {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  max-width: sage-container(md);
+  text-align: center;
+  justify-items: center;
 
-  &:not(.sage-empty-state--page) {
-    @include sage-grid-panel();
-
-    max-width: sage-container(md);
-    text-align: center;
-    justify-items: center;
-  }
-
-  &:not(.sage-empty-state--compact):not(.sage-empty-state--page) {
-    gap: sage-spacing();
-    padding: sage-spacing(2xl) sage-spacing();
-  }
+  @include sage-grid-panel();
 }
 
 .sage-empty-state--center {
@@ -44,38 +35,10 @@ $-empty-state-page-max-width: rem(1064px);
   padding: sage-spacing(xs) sage-spacing();
 }
 
-.sage-empty-state--page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: sage-spacing();
-  width: 100%;
-  padding: sage-spacing(lg);
-
-  @media screen and (max-width: sage-breakpoint(lg-max)) {
-    flex-direction: column;
-  }
-
-  @media screen and (min-width: sage-breakpoint(xl-min)) {
-    flex-direction: row;
-    max-width: $-empty-state-page-max-width;
-  }
-}
-
 .sage-empty-state__actions,
 .sage-empty-state__custom-content,
 .sage-empty-state__video {
-  margin-top: sage-spacing();
-}
-
-.sage-empty-state__content {
-  .sage-empty-state--page & {
-    max-width: $-empty-state-graphic-page-width;
-
-    @media screen and (min-width: sage-breakpoint(xl-min)) {
-      order: 1;
-    }
-  }
+  margin-block-start: sage-spacing();
 }
 
 .sage-empty-state__graphic {
@@ -83,8 +46,8 @@ $-empty-state-page-max-width: rem(1064px);
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  width: $-empty-state-graphic-feature-width;
-  height: $-empty-state-graphic-feature-height;
+  inline-size: $-empty-state-graphic-default-width;
+  block-size: $-empty-state-graphic-default-height;
 
   > img {
     display: block;
@@ -93,13 +56,9 @@ $-empty-state-page-max-width: rem(1064px);
     border-radius: sage-border(radius);
   }
 
-  .sage-empty-state--page & {
-    max-width: $-empty-state-graphic-page-width;
-    height: $-empty-state-graphic-page-height;
-
-    @media screen and (min-width: sage-breakpoint(xl-min)) {
-      order: 2;
-    }
+  .sage-empty-state--compact & {
+    inline-size: $-empty-state-graphic-compact-width;
+    block-size: $-empty-state-graphic-compact-height;
   }
 }
 
@@ -109,23 +68,19 @@ $-empty-state-page-max-width: rem(1064px);
 }
 
 .sage-empty-state__title {
-  @extend %t-sage-heading-4;
+  @extend %t-sage-heading-3;
 
-  color: sage-color(charcoal, 500);
+  color: sage-color(grey, 90);
   word-wrap: break-word;
 
-  .sage-empty-state--page & {
-    @extend %t-sage-heading-1;
-  }
-
   &:not(:only-child) {
-    margin-bottom: sage-spacing(sm);
+    margin-block-end: sage-spacing(sm);
   }
 }
 
 .sage-empty-state__text {
   @extend %t-sage-body;
 
-  color: sage-color(charcoal, 300);
+  color: sage-color(grey, 70);
   word-wrap: break-word;
 }

From ac3cbc6c50a6a34d9f1ad4b9cb2b737aaf5cffcb Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Fri, 26 Jul 2024 10:57:11 -0500
Subject: [PATCH 02/12] style: adds styles for Icon Card for default and
 compact variants

---
 .../_sage_empty_state.html.erb                |  6 +++--
 .../stylesheets/components/_empty_state.scss  | 26 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index f2d9c8b4ea..4ef652439f 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -1,6 +1,6 @@
 <%
 variant = component.scope.present? ? component.scope : false
-title_tag = variant == "feature" ? "h1" : "h2"
+title_tag = variant == "compact" ? "h2" : "h1"
 if component.title_tag.present?
   title_tag = component.title_tag
 end
@@ -20,9 +20,11 @@ end
     </div>
   <% end %>
 
-  <%= sage_component SageIcon, {
+  <%= sage_component SageIconCard, {
+    color: 'published',
     icon: component.icon,
     size: "3xl",
+    round: true,
     css_classes: "sage-empty-state__icon"
   } if component.icon %>
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 786315dc86..023561f675 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -8,6 +8,8 @@ $-empty-state-graphic-default-width: 100%;
 $-empty-state-graphic-default-height: rem(104px);
 $-empty-state-graphic-compact-width: 100%;
 $-empty-state-graphic-compact-height: rem(56px);
+$-empty-state-icon-size: rem(104px);
+$-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state {
   margin-inline-start: auto;
@@ -25,14 +27,6 @@ $-empty-state-graphic-compact-height: rem(56px);
   top: 50%;
   transform: translate(-50%, -50%);
   padding: sage-spacing();
-
-  @media screen and (min-width: sage-breakpoint(lg-max)) {
-    padding: 0;
-  }
-}
-
-.sage-empty-state--compact {
-  padding: sage-spacing(xs) sage-spacing();
 }
 
 .sage-empty-state__actions,
@@ -64,7 +58,15 @@ $-empty-state-graphic-compact-height: rem(56px);
 
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(charcoal, 100);
+  color: sage-color(white);
+  inline-size: $-empty-state-icon-size;
+  block-size: $-empty-state-icon-size;
+
+  .sage-empty-state--compact & {
+    inline-size: $-empty-state-icon-compact-size;
+    block-size: $-empty-state-icon-compact-size;
+    padding: 1rem;
+  }
 }
 
 .sage-empty-state__title {
@@ -81,6 +83,10 @@ $-empty-state-graphic-compact-height: rem(56px);
 .sage-empty-state__text {
   @extend %t-sage-body;
 
-  color: sage-color(grey, 70);
   word-wrap: break-word;
 }
+
+.sage-empty-state__text,
+.sage-empty-state__custom-content {
+  color: sage-color(grey, 70);
+}

From 1194c87d7b69cdd2b00684c2fd716aeb6b5ffc34 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Mon, 29 Jul 2024 15:06:08 -0500
Subject: [PATCH 03/12] style: adds gradient to icon card and empty state

---
 .../sage_rails/app/sage_components/sage_empty_state.rb    | 1 +
 docs/lib/sage_rails/app/sage_components/sage_icon_card.rb | 1 +
 .../app/views/sage_components/_sage_empty_state.html.erb  | 8 ++++++--
 .../app/views/sage_components/_sage_icon_card.html.erb    | 5 ++++-
 .../lib/stylesheets/components/_icon_card.scss            | 4 ++++
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
index 52b62ebeb8..eb7ee89ede 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -1,6 +1,7 @@
 class SageEmptyState < SageComponent
   set_attribute_schema({
     center_vertical: [:optional, NilClass, TrueClass],
+    gradient: [:optional, NilClass, {topColor: String, bottomColor: String}],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
     scope: [:optional, NilClass, Set.new(["compact", nil])],
diff --git a/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb b/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
index 796d73fc8f..f2bee59ee7 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
@@ -4,6 +4,7 @@ class SageIconCard < SageComponent
     background_color: [:optional, NilClass, String],
     color: [:optional, NilClass, SageSchemas::STATUSES],
     foreground_color: [:optional, NilClass, String],
+    gradient: [:optional, NilClass, {topColor: String, bottomColor: String}],
     icon: String,
     label: [:optional, NilClass, String],
     round: [:optional, NilClass, TrueClass],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index 4ef652439f..ae5bb1e894 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -21,10 +21,14 @@ end
   <% end %>
 
   <%= sage_component SageIconCard, {
-    color: 'published',
+    foreground_color: SageTokens::COLOR_PALETTE[:WHITE],
+    gradient: {
+      topColor: component.gradient.present? ? component.gradient[:topColor] : SageTokens::COLOR_PALETTE[:MERCURY_20],
+      bottomColor: component.gradient.present? ? component.gradient[:bottomColor] : SageTokens::COLOR_PALETTE[:MERCURY_30],
+    },
     icon: component.icon,
-    size: "3xl",
     round: true,
+    size: "3xl",
     css_classes: "sage-empty-state__icon"
   } if component.icon %>
 
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
index 8cfee6764a..53b61ff737 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
@@ -4,6 +4,8 @@ size = component.size.present? ? component.size == "md" ? "" : "-#{component.siz
 style = {
   "--background-color": (component.background_color if component.background_color.present?),
   "--color": (component.foreground_color if component.foreground_color.present?),
+  "--color-gradient-top": (component.gradient[:topColor] if component.gradient.present?),
+  "--color-gradient-bottom": (component.gradient[:bottomColor] if component.gradient.present?),
 }.compact.map{|k,v| "#{k}:#{v}"}.join(";")
 %>
 <div
@@ -11,12 +13,13 @@ style = {
     sage-icon-card
     <%= "sage-icon-card--#{color}" if color.present? %>
     <%= "sage-icon-card--round" if component.round %>
+    <%= "sage-icon-card--gradient" if component.gradient %>
     <%= component.generated_css_classes %>
   "
   <% component.attributes.each do |key, value| %>
     <%= "#{key}=\"#{value}\"".html_safe %>
   <% end if component.attributes&.is_a?(Hash) %>
-  <% if component.background_color.present? or component.foreground_color.present? %>
+  <% if component.background_color.present? or component.foreground_color.present? or component.gradient.present? %>
     style="<%= style %>"
   <% end %>
   <%= component.generated_html_attributes.html_safe %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
index 04ede8922a..a614924286 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
@@ -29,6 +29,10 @@
     --background-color: #{sage-color-combo($-color, default, background)};
   }
 }
+
+.sage-icon-card--gradient {
+  background-image: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%)
+}
 .sage-icon-card--round {
   border-radius: sage-border(radius-round);
 }

From 43c78f5f17ad2e130904db80f27ebd776ae26de8 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Mon, 29 Jul 2024 16:08:21 -0500
Subject: [PATCH 04/12] docs: removes unneeded examples and adds new props

---
 .../components/empty_state/_preview.html.erb  | 58 -------------------
 .../components/empty_state/_props.html.erb    | 39 +++++++++++--
 2 files changed, 33 insertions(+), 64 deletions(-)

diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
index ff8a218545..806327b388 100644
--- a/docs/app/views/examples/components/empty_state/_preview.html.erb
+++ b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -26,61 +26,3 @@
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
-
-<h3>Page Scope and Graphic</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButtonGroup, { align: 'center', gap: :sm } do %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "primary",
-        value: "Create Email Campaigns",
-      } %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "secondary",
-        subtle: true,
-        value: "Learn More",
-      } %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<h3>Page Scope and Graphic with Video</h3>
-<%= sage_component SageEmptyState, {
-  title: "Create your first Email Campaign",
-  graphic: image_tag("empty-state-lg.svg", alt: ""),
-} do %>
-  <% content_for :sage_empty_state_text do %>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  <% end %>
-  <% content_for :sage_empty_state_actions do %>
-    <%= sage_component SageButtonGroup, { align: 'center', gap: :sm } do %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "primary",
-        value: "Create Email Campaigns",
-      } %>
-      <%= sage_component SageButton, {
-        attributes: { href: "#" },
-        style: "secondary",
-        subtle: true,
-        value: "Learn More",
-      } %>
-    <% end %>
-  <% end %>
-<% end %>
diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb
index 78d94b1012..63fcb44646 100644
--- a/docs/app/views/examples/components/empty_state/_props.html.erb
+++ b/docs/app/views/examples/components/empty_state/_props.html.erb
@@ -1,6 +1,6 @@
 <tr>
   <td><%= md('`center_vertical`') %></td>
-  <td><%= md('If true, the empty state will be adjust to be visually centered inside the entire page context. Meant to be used in pairing with `scope: "page"`.') %></td>
+  <td><%= md('If true, the empty state will be adjust to be visually centered inside the entire page context.') %></td>
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
@@ -10,6 +10,17 @@
   <td><%= md('String') %></td>
   <td><%= md('`nil | Icon name from Sage icons`') %></td>
 </tr>
+<tr>
+  <td><%= md('`gradient`') %></td>
+  <td><%= md('Sets two colors for the icon gradient. If no color is set, it will default to Mercury 20 and Mercury 30.') %></td>
+  <td><%= md('```
+  {
+    bottomColor: String,
+    topColor: String
+  }
+  ```') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`graphic`') %></td>
   <td><%= md('Adds a graphic above the content.') %></td>
@@ -19,12 +30,11 @@
 <tr>
   <td><%= md('`scope`') %></td>
   <td><%= md('The layout of the component adjusts depending on this context setting:
-  
-- `nil` (default) sets up a "feature"-level layout for use within panels or cards for showing empty state for particular features.
+
+- `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage.
 - `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts.
-- `"page"` is for use on whole page empty states and is intended to fill the stage.
 ') %></td>
-  <td><%= md('`nil` | `"compact"` | `"page"`') %></td>
+  <td><%= md('`nil` | `"compact"`') %></td>
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
@@ -48,11 +58,28 @@
 <tr>
   <td colspan="4"><strong>Content Slots</strong></td>
 </tr>
+<tr>
+  <td><%= md('`:sage_empty_state_actions`') %></td>
+  <td><%= md('
+    Slot into which buttons or other actions can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
+<tr>
+  <td><%= md('`:sage_empty_state_text`') %></td>
+  <td><%= md('
+    Slot into which text can be placed.
+  ') %></td>
+  <td></td>
+  <td></td>
+</tr>
 <tr>
   <td><%= md('`:sage_empty_state_video`') %></td>
   <td><%= md('
-  Slot into which video cards or other media can be placed.
+    Slot into which video cards or other media can be placed.
   ') %></td>
   <td></td>
   <td></td>
 </tr>
+

From 5fe1404627ea9a8b571e2653dc61c9e0dac92465 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Tue, 30 Jul 2024 15:45:41 -0500
Subject: [PATCH 05/12] refactor: removes gradient

---
 .../examples/components/empty_state/_props.html.erb | 11 -----------
 .../app/sage_components/sage_empty_state.rb         |  1 -
 .../sage_components/_sage_empty_state.html.erb      | 10 ++--------
 .../views/sage_components/_sage_icon_card.html.erb  |  4 +---
 .../lib/stylesheets/components/_empty_state.scss    | 13 ++++---------
 packages/sage-react/lib/EmptyState/EmptyState.jsx   | 13 +++++++++++--
 .../sage-react/lib/EmptyState/EmptyState.story.jsx  | 10 +++-------
 packages/sage-react/lib/EmptyState/configs.js       |  1 -
 8 files changed, 21 insertions(+), 42 deletions(-)

diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb
index 63fcb44646..58f63932ff 100644
--- a/docs/app/views/examples/components/empty_state/_props.html.erb
+++ b/docs/app/views/examples/components/empty_state/_props.html.erb
@@ -10,17 +10,6 @@
   <td><%= md('String') %></td>
   <td><%= md('`nil | Icon name from Sage icons`') %></td>
 </tr>
-<tr>
-  <td><%= md('`gradient`') %></td>
-  <td><%= md('Sets two colors for the icon gradient. If no color is set, it will default to Mercury 20 and Mercury 30.') %></td>
-  <td><%= md('```
-  {
-    bottomColor: String,
-    topColor: String
-  }
-  ```') %></td>
-  <td><%= md('`nil`') %></td>
-</tr>
 <tr>
   <td><%= md('`graphic`') %></td>
   <td><%= md('Adds a graphic above the content.') %></td>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
index eb7ee89ede..52b62ebeb8 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -1,7 +1,6 @@
 class SageEmptyState < SageComponent
   set_attribute_schema({
     center_vertical: [:optional, NilClass, TrueClass],
-    gradient: [:optional, NilClass, {topColor: String, bottomColor: String}],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
     scope: [:optional, NilClass, Set.new(["compact", nil])],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index ae5bb1e894..ae2a84fdbd 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -20,15 +20,9 @@ end
     </div>
   <% end %>
 
-  <%= sage_component SageIconCard, {
-    foreground_color: SageTokens::COLOR_PALETTE[:WHITE],
-    gradient: {
-      topColor: component.gradient.present? ? component.gradient[:topColor] : SageTokens::COLOR_PALETTE[:MERCURY_20],
-      bottomColor: component.gradient.present? ? component.gradient[:bottomColor] : SageTokens::COLOR_PALETTE[:MERCURY_30],
-    },
+  <%= sage_component SageIcon, {
     icon: component.icon,
-    round: true,
-    size: "3xl",
+    size: variant == 'compact' ? 'xl' : '3xl',
     css_classes: "sage-empty-state__icon"
   } if component.icon %>
 
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
index 53b61ff737..07ec06daf3 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
@@ -4,8 +4,6 @@ size = component.size.present? ? component.size == "md" ? "" : "-#{component.siz
 style = {
   "--background-color": (component.background_color if component.background_color.present?),
   "--color": (component.foreground_color if component.foreground_color.present?),
-  "--color-gradient-top": (component.gradient[:topColor] if component.gradient.present?),
-  "--color-gradient-bottom": (component.gradient[:bottomColor] if component.gradient.present?),
 }.compact.map{|k,v| "#{k}:#{v}"}.join(";")
 %>
 <div
@@ -19,7 +17,7 @@ style = {
   <% component.attributes.each do |key, value| %>
     <%= "#{key}=\"#{value}\"".html_safe %>
   <% end if component.attributes&.is_a?(Hash) %>
-  <% if component.background_color.present? or component.foreground_color.present? or component.gradient.present? %>
+  <% if component.background_color.present? or component.foreground_color.present? %>
     style="<%= style %>"
   <% end %>
   <%= component.generated_html_attributes.html_safe %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 023561f675..3387eedb22 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -12,13 +12,14 @@ $-empty-state-icon-size: rem(104px);
 $-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state {
+  @include sage-grid-panel();
+
   margin-inline-start: auto;
   margin-inline-end: auto;
   max-width: sage-container(md);
   text-align: center;
   justify-items: center;
-
-  @include sage-grid-panel();
+  gap: sage-spacing(sm);
 }
 
 .sage-empty-state--center {
@@ -58,15 +59,9 @@ $-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(white);
+  color: sage-color(grey, 60);
   inline-size: $-empty-state-icon-size;
   block-size: $-empty-state-icon-size;
-
-  .sage-empty-state--compact & {
-    inline-size: $-empty-state-icon-compact-size;
-    block-size: $-empty-state-icon-compact-size;
-    padding: 1rem;
-  }
 }
 
 .sage-empty-state__title {
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
index e98bb81e1f..049e64a5c6 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -39,7 +39,13 @@ export const EmptyState = ({
           {graphic}
         </div>
       )}
-      {icon && (<Icon icon={icon} size={Icon.SIZES.XXXL} className="sage-empty-state__icon" />)}
+      {icon && (
+        <Icon
+          icon={icon}
+          size={Icon.SIZES.XXXL}
+          className="sage-empty-state__icon"
+        />
+      )}
       <div className="sage-empty-state__content">
         {title && (
           <TitleTag className="sage-empty-state__title">
@@ -59,7 +65,10 @@ export const EmptyState = ({
         )}
         {actions && (
           <div className="sage-empty-state__actions">
-            <Button.Group gap={Button.Group.GAP_OPTIONS.SM}>
+            <Button.Group
+              align={Button.Group.ALIGN_OPTIONS.CENTER}
+              gap={Button.Group.GAP_OPTIONS.SM}
+            >
               {actions}
             </Button.Group>
           </div>
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
index 23c7bd7b41..57c2f8f03f 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -23,11 +23,7 @@ export default {
   },
   args: {
     actions: (
-      <>
-        <Button.Group gap={Button.Group.GAP_OPTIONS.SM}>
-          <Button>Lorem ipsum</Button>
-        </Button.Group>
-      </>
+      <Button>Lorem ipsum</Button>
     ),
     icon: SageTokens.ICONS.GEAR,
     text: 'Text Here',
@@ -39,8 +35,8 @@ const Template = (args) => <EmptyState {...args} />;
 
 export const Default = Template.bind({});
 
-export const PageScope = Template.bind({});
-PageScope.args = {
+export const CompactScope = Template.bind({});
+CompactScope.args = {
   icon: null,
   graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
   scope: EmptyState.SCOPES.PAGE,
diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js
index 6550148d23..feec26820c 100644
--- a/packages/sage-react/lib/EmptyState/configs.js
+++ b/packages/sage-react/lib/EmptyState/configs.js
@@ -1,5 +1,4 @@
 export const EMPTY_STATE_SCOPES = {
   DEFAULT: null,
-  PAGE: 'page',
   COMPACT: 'compact',
 };

From 94949d5915e63e66dddd66afa85c5514c32555b3 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Tue, 30 Jul 2024 15:55:39 -0500
Subject: [PATCH 06/12] refactor: renames scope prop to size

---
 .../components/empty_state/_preview.html.erb         |  2 +-
 .../app/sage_components/sage_empty_state.rb          |  2 +-
 .../views/sage_components/_sage_empty_state.html.erb |  2 +-
 .../lib/stylesheets/components/_empty_state.scss     |  2 +-
 .../lib/stylesheets/components/_icon_card.scss       |  3 ---
 packages/sage-react/lib/EmptyState/EmptyState.jsx    | 12 ++++++------
 .../sage-react/lib/EmptyState/EmptyState.story.jsx   |  8 ++++----
 packages/sage-react/lib/EmptyState/configs.js        |  2 +-
 8 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
index 806327b388..d311061d7a 100644
--- a/docs/app/views/examples/components/empty_state/_preview.html.erb
+++ b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -13,7 +13,7 @@
   icon: "bold",
   title: "Title for state, compact variety",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
-  scope: "compact",
+  size: "compact",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
index 52b62ebeb8..1b9c877afa 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -3,7 +3,7 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
-    scope: [:optional, NilClass, Set.new(["compact", nil])],
+    size: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],
     title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h6"])],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index ae2a84fdbd..9f97843804 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -1,5 +1,5 @@
 <%
-variant = component.scope.present? ? component.scope : false
+variant = component.size.present? ? component.size : false
 title_tag = variant == "compact" ? "h2" : "h1"
 if component.title_tag.present?
   title_tag = component.title_tag
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 3387eedb22..8399236721 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -14,12 +14,12 @@ $-empty-state-icon-compact-size: rem(56px);
 .sage-empty-state {
   @include sage-grid-panel();
 
+  gap: sage-spacing(sm);
   margin-inline-start: auto;
   margin-inline-end: auto;
   max-width: sage-container(md);
   text-align: center;
   justify-items: center;
-  gap: sage-spacing(sm);
 }
 
 .sage-empty-state--center {
diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
index a614924286..ece871d7fd 100644
--- a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
@@ -30,9 +30,6 @@
   }
 }
 
-.sage-icon-card--gradient {
-  background-image: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%)
-}
 .sage-icon-card--round {
   border-radius: sage-border(radius-round);
 }
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
index 049e64a5c6..91587efa80 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { SageTokens } from '../configs';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { EMPTY_STATE_SCOPES } from './configs';
+import { EMPTY_STATE_SIZES } from './configs';
 
 export const EmptyState = ({
   actions,
@@ -12,7 +12,7 @@ export const EmptyState = ({
   children,
   graphic,
   icon,
-  scope,
+  size,
   text,
   title,
   titleTag,
@@ -23,7 +23,7 @@ export const EmptyState = ({
     'sage-empty-state',
     {
       'sage-empty-state--center': centerVertical,
-      [`sage-empty-state--${scope}`]: scope,
+      [`sage-empty-state--${size}`]: size,
     },
   );
 
@@ -84,7 +84,7 @@ export const EmptyState = ({
   );
 };
 
-EmptyState.SCOPES = EMPTY_STATE_SCOPES;
+EmptyState.SIZES = EMPTY_STATE_SIZES;
 
 EmptyState.defaultProps = {
   actions: null,
@@ -92,7 +92,7 @@ EmptyState.defaultProps = {
   children: null,
   graphic: null,
   icon: null,
-  scope: EmptyState.SCOPES.DEFAULT,
+  size: EmptyState.SIZES.DEFAULT,
   text: null,
   title: null,
   titleTag: 'h2',
@@ -105,7 +105,7 @@ EmptyState.propTypes = {
   children: PropTypes.node,
   graphic: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
-  scope: PropTypes.oneOf(Object.values(EmptyState.SCOPES)),
+  size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
index 57c2f8f03f..bab384f9fb 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -18,7 +18,7 @@ export default {
   argTypes: {
     ...selectArgs({
       icon: SageTokens.ICONS,
-      scope: EmptyState.SCOPES
+      size: EmptyState.SIZES
     })
   },
   args: {
@@ -35,11 +35,11 @@ const Template = (args) => <EmptyState {...args} />;
 
 export const Default = Template.bind({});
 
-export const CompactScope = Template.bind({});
-CompactScope.args = {
+export const Compactsize = Template.bind({});
+Compactsize.args = {
   icon: null,
   graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
-  scope: EmptyState.SCOPES.PAGE,
+  size: EmptyState.SIZES.PAGE,
   text: (
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js
index feec26820c..75df4b370d 100644
--- a/packages/sage-react/lib/EmptyState/configs.js
+++ b/packages/sage-react/lib/EmptyState/configs.js
@@ -1,4 +1,4 @@
-export const EMPTY_STATE_SCOPES = {
+export const EMPTY_STATE_SIZES = {
   DEFAULT: null,
   COMPACT: 'compact',
 };

From 6f9679bceb65ce5244757600f9f6b75ec62a239c Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Tue, 30 Jul 2024 15:59:07 -0500
Subject: [PATCH 07/12] chore: fixes Story name

---
 packages/sage-react/lib/EmptyState/EmptyState.story.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
index bab384f9fb..979a40701b 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -35,8 +35,8 @@ const Template = (args) => <EmptyState {...args} />;
 
 export const Default = Template.bind({});
 
-export const Compactsize = Template.bind({});
-Compactsize.args = {
+export const CompactSize = Template.bind({});
+CompactSize.args = {
   icon: null,
   graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
   size: EmptyState.SIZES.PAGE,

From 907b3e81a201a18f9e417978793ac6b09a7d87c3 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Fri, 2 Aug 2024 10:08:32 -0500
Subject: [PATCH 08/12] refactor: adds background color to icon

---
 .../app/sage_components/sage_empty_state.rb    |  1 +
 .../sage_components/_sage_empty_state.html.erb | 17 ++++++++++++-----
 .../stylesheets/components/_empty_state.scss   | 14 +++++++++++++-
 .../sage-react/lib/EmptyState/EmptyState.jsx   | 18 +++++++++++++-----
 .../lib/EmptyState/EmptyState.story.jsx        |  2 +-
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
index 1b9c877afa..6c29f7d92d 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -3,6 +3,7 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
+    icon_background: [:optional, NilClass, String],
     size: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index 9f97843804..0ed9ad29e5 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -20,11 +20,18 @@ end
     </div>
   <% end %>
 
-  <%= sage_component SageIcon, {
-    icon: component.icon,
-    size: variant == 'compact' ? 'xl' : '3xl',
-    css_classes: "sage-empty-state__icon"
-  } if component.icon %>
+  <% if component.icon.present? %>
+    <div
+      class="sage-empty-state__icon-container"
+      style="--color-background-icon: <%= component.icon_background || SageTokens::COLOR_PALETTE[:MERCURY_30] %>"
+    >
+      <%= sage_component SageIcon, {
+        icon: component.icon,
+        size: variant == 'compact' ? 'xl' : '3xl',
+        css_classes: "sage-empty-state__icon"
+      }%>
+    </div>
+  <% end %>
 
   <div class="sage-empty-state__content">
     <% if component.title.present? %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 8399236721..202525f14f 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -8,6 +8,7 @@ $-empty-state-graphic-default-width: 100%;
 $-empty-state-graphic-default-height: rem(104px);
 $-empty-state-graphic-compact-width: 100%;
 $-empty-state-graphic-compact-height: rem(56px);
+$-empty-state-icon-background-color: var(--color-background-icon);
 $-empty-state-icon-size: rem(104px);
 $-empty-state-icon-compact-size: rem(56px);
 
@@ -57,9 +58,20 @@ $-empty-state-icon-compact-size: rem(56px);
   }
 }
 
+.sage-empty-state__icon-container {
+  display: flex;
+  background-color: $-empty-state-icon-background-color;
+  padding: sage-spacing(lg);
+  border-radius: sage-border(radius-round);
+
+  .sage-empty-state--compact & {
+    padding: sage-spacing(sm);
+  }
+}
+
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(grey, 60);
+  color: sage-color(white);
   inline-size: $-empty-state-icon-size;
   block-size: $-empty-state-icon-size;
 }
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
index 91587efa80..73db0e9042 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -12,6 +12,7 @@ export const EmptyState = ({
   children,
   graphic,
   icon,
+  backgroundColor,
   size,
   text,
   title,
@@ -40,11 +41,16 @@ export const EmptyState = ({
         </div>
       )}
       {icon && (
-        <Icon
-          icon={icon}
-          size={Icon.SIZES.XXXL}
-          className="sage-empty-state__icon"
-        />
+        <div
+          className="sage-empty-state__icon-container"
+          style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_30 }}
+        >
+          <Icon
+            icon={icon}
+            size={Icon.SIZES.XXXL}
+            className="sage-empty-state__icon"
+          />
+        </div>
       )}
       <div className="sage-empty-state__content">
         {title && (
@@ -92,6 +98,7 @@ EmptyState.defaultProps = {
   children: null,
   graphic: null,
   icon: null,
+  backgroundColor: null,
   size: EmptyState.SIZES.DEFAULT,
   text: null,
   title: null,
@@ -105,6 +112,7 @@ EmptyState.propTypes = {
   children: PropTypes.node,
   graphic: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  backgroundColor: PropTypes.string,
   size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
index 979a40701b..98e3d4f021 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -38,7 +38,7 @@ export const Default = Template.bind({});
 export const CompactSize = Template.bind({});
 CompactSize.args = {
   icon: null,
-  graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
+  graphic: (<img src="https://unsplash.it/2000/1100" alt="" />),
   size: EmptyState.SIZES.PAGE,
   text: (
     <p>

From 90fafe8ec3d80fb4b76c94d3ae3be2d287225e05 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Fri, 2 Aug 2024 12:02:44 -0500
Subject: [PATCH 09/12] docs: updates Empty States docs pages for Rails and
 React

---
 .../components/empty_state/_preview.html.erb  |  2 +-
 .../components/empty_state/_props.html.erb    |  6 +-
 .../_sage_empty_state.html.erb                |  1 +
 .../stylesheets/components/_empty_state.scss  |  1 -
 .../sage-react/lib/EmptyState/EmptyState.jsx  | 36 +++++++-
 .../lib/EmptyState/EmptyState.story.jsx       | 59 ------------
 .../lib/EmptyState/EmptyState.story.mdx       | 92 +++++++++++++++++++
 7 files changed, 132 insertions(+), 65 deletions(-)
 delete mode 100644 packages/sage-react/lib/EmptyState/EmptyState.story.jsx
 create mode 100644 packages/sage-react/lib/EmptyState/EmptyState.story.mdx

diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
index d311061d7a..cf18c50378 100644
--- a/docs/app/views/examples/components/empty_state/_preview.html.erb
+++ b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -8,7 +8,7 @@
 <% end %>
 
 <h3>With Icon and Compact</h3>
-<p> Compact variants, with less top and bottom padding, are useful for smaller contexts.</p>
+<p> Compact variants, with a smaller icon, are useful for smaller contexts.</p>
 <%= sage_component SageEmptyState, {
   icon: "bold",
   title: "Title for state, compact variety",
diff --git a/docs/app/views/examples/components/empty_state/_props.html.erb b/docs/app/views/examples/components/empty_state/_props.html.erb
index 58f63932ff..8ea699b93d 100644
--- a/docs/app/views/examples/components/empty_state/_props.html.erb
+++ b/docs/app/views/examples/components/empty_state/_props.html.erb
@@ -1,6 +1,6 @@
 <tr>
   <td><%= md('`center_vertical`') %></td>
-  <td><%= md('If true, the empty state will be adjust to be visually centered inside the entire page context.') %></td>
+  <td><%= md('If true, the empty state will be visually centered inside the entire page context.') %></td>
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
@@ -17,8 +17,8 @@
   <td><%= md('`nil`') %></td>
 </tr>
 <tr>
-  <td><%= md('`scope`') %></td>
-  <td><%= md('The layout of the component adjusts depending on this context setting:
+  <td><%= md('`size`') %></td>
+  <td><%= md('The size of the icon adjusts depending on this context setting:
 
 - `nil` (default) sets up a "feature"-level layout for use on whole page empty states and is intended to fill the stage.
 - `"compact"` similar to the default above, this compacts the spacing a little more for smaller contexts.
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
index 0ed9ad29e5..7f4070f492 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -26,6 +26,7 @@ end
       style="--color-background-icon: <%= component.icon_background || SageTokens::COLOR_PALETTE[:MERCURY_30] %>"
     >
       <%= sage_component SageIcon, {
+        color: "white",
         icon: component.icon,
         size: variant == 'compact' ? 'xl' : '3xl',
         css_classes: "sage-empty-state__icon"
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 202525f14f..7a95b5727a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -71,7 +71,6 @@ $-empty-state-icon-compact-size: rem(56px);
 
 .sage-empty-state__icon {
   display: inline-flex;
-  color: sage-color(white);
   inline-size: $-empty-state-icon-size;
   block-size: $-empty-state-icon-size;
 }
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
index 73db0e9042..eb56246d4b 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.jsx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -46,8 +46,9 @@ export const EmptyState = ({
           style={{ '--color-background-icon': backgroundColor || SageTokens.COLOR_PALETTE.MERCURY_30 }}
         >
           <Icon
+            color={Icon.COLORS.WHITE}
             icon={icon}
-            size={Icon.SIZES.XXXL}
+            size={size === EmptyState.SIZES.COMPACT ? Icon.SIZES.XL : Icon.SIZES.XXXL}
             className="sage-empty-state__icon"
           />
         </div>
@@ -107,15 +108,48 @@ EmptyState.defaultProps = {
 };
 
 EmptyState.propTypes = {
+  /**
+   * Slot into which buttons or other actions can be placed.
+   */
   actions: PropTypes.node,
+  /**
+   * If true, the Empty State will be visually centered inside the entire page context.
+   */
   centerVertical: PropTypes.bool,
+  /**
+   * The content to be rendered within the Empty State.
+   */
   children: PropTypes.node,
+  /**
+   * Adds a graphic above the content.
+   */
   graphic: PropTypes.node,
+  /**
+   * Adds an icon above the content.
+   */
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
+  /**
+   * Sets the background color of the icon container. Defaults to Mercury 30
+   */
   backgroundColor: PropTypes.string,
+  /**
+   * The size and context of the Empty State.
+   */
   size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
+  /**
+   * Sets the text for the Empty State.
+   */
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Sets the title for the Empty State.
+   */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Sets which HTML heading tag to use on the title.
+   */
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  /**
+   * Slot into which video cards or other media can be placed.
+   */
   video: PropTypes.node,
 };
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
deleted file mode 100644
index 98e3d4f021..0000000000
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { selectArgs } from '../story-support/helpers';
-import { Button } from '../Button';
-import { SageTokens } from '../configs';
-import { EmptyState } from './EmptyState';
-
-export default {
-  title: 'Sage/EmptyState',
-  component: EmptyState,
-  // displays description on Docs tab
-  parameters: {
-    docs: {
-      description: {
-        component: 'The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.'
-      },
-    },
-  },
-  argTypes: {
-    ...selectArgs({
-      icon: SageTokens.ICONS,
-      size: EmptyState.SIZES
-    })
-  },
-  args: {
-    actions: (
-      <Button>Lorem ipsum</Button>
-    ),
-    icon: SageTokens.ICONS.GEAR,
-    text: 'Text Here',
-    title: 'Title Here'
-  }
-};
-
-const Template = (args) => <EmptyState {...args} />;
-
-export const Default = Template.bind({});
-
-export const CompactSize = Template.bind({});
-CompactSize.args = {
-  icon: null,
-  graphic: (<img src="https://unsplash.it/2000/1100" alt="" />),
-  size: EmptyState.SIZES.PAGE,
-  text: (
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Elit arcu volutpat cursus ultricies ac, ultricies.
-      Platea sed nibh molestie ut.
-    </p>
-  ),
-  title: 'Create your first Email Campaign',
-  titleTag: 'h1',
-  children: null,
-  actions: (
-    <>
-      <Button>Add Email Campaign</Button>
-      <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
-    </>
-  )
-};
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
new file mode 100644
index 0000000000..ba47b8f595
--- /dev/null
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
@@ -0,0 +1,92 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Button } from '../Button';
+import { SageTokens } from '../configs';
+import { EmptyState } from './EmptyState';
+
+<Meta title="Sage/EmptyState" component={EmptyState} />
+
+# Empty State
+
+The Empty State is displayed for main application features that have never been interacted with before. The Empty State is also used for smaller features in the app that primarily focus on data entry and have no data to show.
+
+## Accessibility
+
+Ensure images or graphics that are used in the Empty State component *do not* include alt text so that the image remains decorative and invisible to screen readers.
+
+## Properties
+
+<ArgsTable story="Default" />
+
+## Size
+
+The Empty State component has two sizes: default and `compact`. The default size is meant to be used for whole-page empty states and is intended to fill the stage. The compact size features a smaller icon and is intended to fill empty states for smaller contexts.
+
+### Default
+
+<Canvas>
+  <Story name="Default">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      icon={SageTokens.ICONS.PEN}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>
+
+### Compact
+
+<Canvas>
+  <Story name="Compact">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      icon={SageTokens.ICONS.PEN}
+      size={EmptyState.SIZES.COMPACT}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>
+
+### With Graphic
+
+<Canvas>
+  <Story name="WithGraphic">
+    <EmptyState
+      actions={(
+        <>
+          <Button>Add Email Campaign</Button>
+          <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
+        </>
+      )}
+      graphic={(<img src="https://unsplash.it/2000/1100" alt="" />)}
+      title="Create your first Email Campaign"
+      titleTag="h1"
+      text={(<p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Elit arcu volutpat cursus ultricies ac, ultricies.
+      Platea sed nibh molestie ut.
+    </p>)}
+    />
+  </Story>
+</Canvas>
\ No newline at end of file

From f4a80c85690e0769ae54cd4cc81d30f2163b78cc Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Fri, 2 Aug 2024 13:07:42 -0500
Subject: [PATCH 10/12] docs: updates React component description with better
 clarity

---
 packages/sage-react/lib/EmptyState/EmptyState.story.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
index ba47b8f595..4bf2bfcc59 100644
--- a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
+++ b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
@@ -11,7 +11,7 @@ The Empty State is displayed for main application features that have never been
 
 ## Accessibility
 
-Ensure images or graphics that are used in the Empty State component *do not* include alt text so that the image remains decorative and invisible to screen readers.
+Ensure images or graphics that are used in the Empty State component *do not* include `alt` text so that the image remains decorative and invisible to screen readers.
 
 ## Properties
 

From aa214f9c572f11e14926277cc6a8a5baf7a4b5e1 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Fri, 2 Aug 2024 14:04:00 -0500
Subject: [PATCH 11/12] chore: fixes linting issues

---
 .../sage-assets/lib/stylesheets/components/_empty_state.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 7a95b5727a..e2c15fb632 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -53,15 +53,15 @@ $-empty-state-icon-compact-size: rem(56px);
   }
 
   .sage-empty-state--compact & {
-    inline-size: $-empty-state-graphic-compact-width;
     block-size: $-empty-state-graphic-compact-height;
+    inline-size: $-empty-state-graphic-compact-width;
   }
 }
 
 .sage-empty-state__icon-container {
   display: flex;
-  background-color: $-empty-state-icon-background-color;
   padding: sage-spacing(lg);
+  background-color: $-empty-state-icon-background-color;
   border-radius: sage-border(radius-round);
 
   .sage-empty-state--compact & {

From 56fe7c4599eb85e162711d5f72c4550cc3e1805c Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Mon, 5 Aug 2024 15:30:11 -0500
Subject: [PATCH 12/12] chore: removes unneeded gradient references

---
 docs/lib/sage_rails/app/sage_components/sage_icon_card.rb        | 1 -
 .../app/views/sage_components/_sage_icon_card.html.erb           | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb b/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
index f2bee59ee7..796d73fc8f 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_icon_card.rb
@@ -4,7 +4,6 @@ class SageIconCard < SageComponent
     background_color: [:optional, NilClass, String],
     color: [:optional, NilClass, SageSchemas::STATUSES],
     foreground_color: [:optional, NilClass, String],
-    gradient: [:optional, NilClass, {topColor: String, bottomColor: String}],
     icon: String,
     label: [:optional, NilClass, String],
     round: [:optional, NilClass, TrueClass],
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
index 07ec06daf3..8cfee6764a 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_icon_card.html.erb
@@ -11,7 +11,6 @@ style = {
     sage-icon-card
     <%= "sage-icon-card--#{color}" if color.present? %>
     <%= "sage-icon-card--round" if component.round %>
-    <%= "sage-icon-card--gradient" if component.gradient %>
     <%= component.generated_css_classes %>
   "
   <% component.attributes.each do |key, value| %>