From ac2eaa549ca3ef9d75e7b65ffe4280d5ffcd2f28 Mon Sep 17 00:00:00 2001
From: Julian Skinner <dev+github-bot@kajabi.com>
Date: Tue, 15 Oct 2024 05:41:18 -0500
Subject: [PATCH 01/13] fix(rails-icon): change the schema for icon attribute
 to string

---
 docs/lib/sage_rails/app/sage_components/sage_icon.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/lib/sage_rails/app/sage_components/sage_icon.rb b/docs/lib/sage_rails/app/sage_components/sage_icon.rb
index 9b0b7b7e78..5d54b21dd5 100644
--- a/docs/lib/sage_rails/app/sage_components/sage_icon.rb
+++ b/docs/lib/sage_rails/app/sage_components/sage_icon.rb
@@ -6,7 +6,7 @@ class SageIcon < SageComponent
     card_color: [:optional, NilClass, Set.new(SageSchemas::STATUSES), String],
     circular: [:optional, NilClass, TrueClass],
     color: [:optional, NilClass, SageSchemas::COLOR_SLIDER],
-    icon: SageSchemas::ICON,
+    icon: String,
     label: [:optional, NilClass, String],
     size: [:optional, NilClass, SageSchemas::ICON_SIZE],
   })

From c5b8d3dde40ece118feb7e2ac9a8ea6334a3c1ca Mon Sep 17 00:00:00 2001
From: Julian Skinner <dev+github-bot@kajabi.com>
Date: Tue, 15 Oct 2024 07:06:39 -0500
Subject: [PATCH 02/13] ci: add back labeler.yml for future use

---
 .github/labeler.yml | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .github/labeler.yml

diff --git a/.github/labeler.yml b/.github/labeler.yml
new file mode 100644
index 0000000000..92d3e92a7b
--- /dev/null
+++ b/.github/labeler.yml
@@ -0,0 +1,2 @@
+mercury-rising:
+  - base-branch: ['mercury-rising']

From a9125f810fd800683852e6cc08d00b618e2d6690 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Wed, 16 Oct 2024 12:28:45 -0500
Subject: [PATCH 03/13] style: updates Button styles to match Figma

---
 .../lib/stylesheets/components/_button.scss   | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index f31cb406d7..bf91cdceda 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -14,7 +14,7 @@ $-btn-base-padding-block: sage-spacing(xs); // vertical (y) axis
 $-btn-base-padding-inline: sage-spacing(sm); // horizontal (x) axis
 $-btn-base-line-height: var(--sage-line-height-body, #{rem(24px)});
 $-btn-border-radius: 9999px;
-$-btn-shadow-base: sage-shadow(sm);
+$-btn-shadow-base: sage-shadow(050);
 $-btn-icon-only-standard-size: rem(40px);
 $-btn-icon-only-subtle-size: rem(16px);
 $-btn-icon-only-hover-size: rem(24px);
@@ -49,13 +49,14 @@ $-btn-base-styles: (
   primary: (
     default: (
       color: sage-color(white),
-      background-color: sage-color(charcoal, 400),
-      border-color: sage-color(charcoal, 400),
+      background-color: sage-color(grey, 900),
+      border-color: sage-color(grey, 900),
       ring-color: sage-color(purple, 300),
     ),
     hover: (
       color: sage-color(white),
       background-color: sage-color(grey, 950),
+      border-color: sage-color(grey, 950),
     ),
     focus: (
       color: sage-color(white),
@@ -63,19 +64,19 @@ $-btn-base-styles: (
       border-color: sage-color(grey, 900),
     ),
     disabled: (
-      color: sage-color(grey, 600),
-      background-color: sage-color(grey, 200),
-      border-color: sage-color(grey, 200),
+      color: sage-color(grey, 400),
+      background-color: sage-color(grey, 150),
+      border-color: sage-color(grey, 150),
     )
   ),
   secondary: (
     default: (
-      color: sage-color(grey, 900),
+      color: sage-color(grey, 800),
       background-color: sage-color(white),
       ring-color: sage-color(purple, 300),
     ),
     hover: (
-      color: sage-color(grey, 900),
+      color: sage-color(grey, 950),
       background-color: sage-color(grey, 100),
     ),
     focus: (
@@ -96,7 +97,8 @@ $-btn-base-styles: (
     ),
     hover: (
       color: sage-color(white),
-      background-color: sage-color(red, 800),
+      background-color: sage-color(red, 600),
+      border-color: sage-color(red, 600),
     ),
     focus: (
       color: sage-color(white),
@@ -184,6 +186,7 @@ $-btn-loading-min-height: rem(36px);
   border-width: 1px;
   border-style: solid;
   border-radius: $-btn-border-radius;
+  box-shadow: $-btn-shadow-base;
   transition: $-btn-transition;
   transition-property: border, background-color, box-shadow;
 
@@ -588,13 +591,14 @@ a.sage-btn {
 
 // Secondary styles, no shadow variation
 .sage-btn--secondary {
-  color: sage-color(grey, 900);
+  color: sage-color(grey, 800);
   background-color: sage-color(white);
-  border: 1px solid sage-color(grey, 500);
+  border: 1px solid sage-color(grey, 200);
 
   &:hover {
-    background-color: sage-color(white);
-    border-color: sage-color(grey, 600);
+    color: sage-color(grey, 950);
+    background-color: sage-color(grey, 100);
+    border-color: sage-color(grey, 300);
   }
 
   &:focus {
@@ -603,16 +607,15 @@ a.sage-btn {
 
   &:focus-visible,
   &:active {
-    color: sage-color(grey, 800);
     background-color: sage-color(white);
     border-color: sage-color(grey);
   }
 
   &:disabled,
   &[aria-disabled="true"] {
-    color: sage-color(grey, 600);
+    color: sage-color(grey, 400);
     background-color: sage-color(white);
-    border-color: sage-color(grey, 200);
+    border-color: sage-color(grey, 100);
   }
 }
 

From 75fc774cdb09d8e3922c84be92e428bf9dd12548 Mon Sep 17 00:00:00 2001
From: Ashley Echols <ashley.echols@kajabi.com>
Date: Wed, 16 Oct 2024 12:37:13 -0500
Subject: [PATCH 04/13] style: corrects secondary button disabled border

---
 packages/sage-assets/lib/stylesheets/components/_button.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index bf91cdceda..8b06c59550 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -615,7 +615,7 @@ a.sage-btn {
   &[aria-disabled="true"] {
     color: sage-color(grey, 400);
     background-color: sage-color(white);
-    border-color: sage-color(grey, 100);
+    border-color: sage-color(grey, 150);
   }
 }
 

From d9b803616bc5227960d81774996e1ae30d807881 Mon Sep 17 00:00:00 2001
From: Alex Peterson <alex.peterson@kajabi.com>
Date: Mon, 14 Oct 2024 13:48:31 -0500
Subject: [PATCH 05/13] feat(expandablecard): add new optional key prop

---
 packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
index 2109efdaae..ab109b1fc6 100644
--- a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
+++ b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
@@ -12,6 +12,7 @@ export const ExpandableCard = ({
   expanded,
   children,
   className,
+  customKey,
   headerContent,
   name,
   onClick,
@@ -32,7 +33,7 @@ export const ExpandableCard = ({
     }
   };
 
-  const id = uuid();
+  const id = customKey || uuid();
 
   const containerClassnames = classnames(
     'sage-expandable-card',
@@ -98,6 +99,7 @@ ExpandableCard.defaultProps = {
   expanded: false,
   children: null,
   className: null,
+  customKey: null,
   headerContent: null,
   alignTrigger: 'middle',
   name: null,
@@ -109,6 +111,7 @@ ExpandableCard.defaultProps = {
 ExpandableCard.propTypes = {
   alignArrowRight: PropTypes.bool,
   bodyBordered: PropTypes.bool,
+  customKey: PropTypes.string,
   headerContent: PropTypes.node,
   expanded: PropTypes.bool,
   className: PropTypes.string,

From b5632c3c19e08d3f72fa63500cd9de9bc7b209bf Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Thu, 17 Oct 2024 08:56:42 -0700
Subject: [PATCH 06/13] fix: adds focus outline none back to components with
 focus visible applied (#2006)

---
 .../sage-assets/lib/stylesheets/components/_button.scss   | 8 ++++----
 .../sage-assets/lib/stylesheets/components/_checkbox.scss | 4 ++++
 .../sage-assets/lib/stylesheets/components/_choice.scss   | 4 ++++
 .../sage-assets/lib/stylesheets/components/_dropdown.scss | 4 ++++
 .../sage-assets/lib/stylesheets/components/_link.scss     | 4 ++++
 .../lib/stylesheets/components/_media_tile.scss           | 4 ++++
 .../sage-assets/lib/stylesheets/components/_radio.scss    | 4 ++++
 .../sage-assets/lib/stylesheets/components/_switch.scss   | 4 ++++
 8 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 8b06c59550..06a8b2a30a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -190,6 +190,10 @@ $-btn-loading-min-height: rem(36px);
   transition: $-btn-transition;
   transition-property: border, background-color, box-shadow;
 
+  &:focus {
+    outline: none;
+  }
+
   &:disabled,
   &[aria-disabled="true"] {
     @include sage-button-style-disabled;
@@ -601,10 +605,6 @@ a.sage-btn {
     border-color: sage-color(grey, 300);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible,
   &:active {
     background-color: sage-color(white);
diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
index e64daed60f..4d14795dd9 100644
--- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -213,6 +213,10 @@ $-checkbox-focus-outline-color: sage-color(purple, 300);
     background-color: sage-color(grey, 100);
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index 9c59d682e0..8f14554b6e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -65,6 +65,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     color: $-choice-color-active;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     border-color: sage-color(purple, 300);
     outline: none;
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index c31161dc81..49f20e61ac 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -122,6 +122,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   @extend %t-sage-body;
 
+  &:focus {
+    outline: none;
+  }
+
   &:active,
   &:focus-visible,
   &:focus-within {
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
index 6193f5e1c9..ff85c37cca 100644
--- a/packages/sage-assets/lib/stylesheets/components/_link.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -176,6 +176,10 @@ $-link-base-styles: (
     color: sage-color(grey, 600);
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:hover,
   &:active,
   &:focus-visible {
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
index 519870434f..88f405f1be 100644
--- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -77,6 +77,10 @@ $-media-tile-breakpoints: (
     color: inherit;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     outline: 0;
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss
index e357763793..18587e1b8e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_radio.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -176,6 +176,10 @@ $-radio-focus-outline-color: currentColor;
     }
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;
diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
index 0a0517a861..6bad669567 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -95,6 +95,10 @@ $-switch-toggle-size: rem(16px);
   border-radius: $-switch-border-radius;
   transition: background 0.3s ease-out;
 
+  &:focus {
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .sage-switch--has-border & {
     position: absolute;
   }

From 59d80eb6d2d63f0b616f8825d0ee5ba97c930cbf Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Thu, 17 Oct 2024 08:58:52 -0700
Subject: [PATCH 07/13] style: adjust focus styles for field-wrapper (#2007)

---
 packages/sage-assets/lib/stylesheets/components/_search.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss
index de5ba504d4..d658fa5a06 100644
--- a/packages/sage-assets/lib/stylesheets/components/_search.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_search.scss
@@ -115,10 +115,6 @@ $-search-icon: "::before";
   .sage-dropdown__panel & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-
-    &:focus-within {
-      box-shadow: inset map-get($sage-toolbar-button-borders, focus);
-    }
   }
 }
 

From 780ae129e3e5a9ea203ea8f83468a2afa8ccda28 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Thu, 17 Oct 2024 08:59:31 -0700
Subject: [PATCH 08/13] style: adds fallback stack for heading-font (#2008)

* style: adds fallback stack for heading-font

* fix: hello linter my old friend

* style: add Inter as first fallback
---
 packages/sage-assets/lib/stylesheets/core/_typography.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss
index 383d8ca9c7..22545bc729 100644
--- a/packages/sage-assets/lib/stylesheets/core/_typography.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_typography.scss
@@ -6,7 +6,7 @@
 
 
 // Font definitions
-$-heading-font: "GreetStandard";
+$-heading-font: "GreetStandard", "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif;
 $-body-font-stack: "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif;
 $-body-margin-bottom: sage-spacing(xs);
 $-headings-margin-bottom: sage-spacing(sm);

From a1249c3660315d0971d006304f04eef6d0cecb00 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Thu, 17 Oct 2024 09:00:30 -0700
Subject: [PATCH 09/13] style: correct dropdown select size and fonts (#2009)

* style: correct dropdown select size and fonts

* style: add font-family

* style: lint errors
---
 .../sage-assets/lib/stylesheets/components/_button.scss  | 4 +++-
 .../lib/stylesheets/components/_dropdown.scss            | 9 +++++++--
 .../lib/stylesheets/components/_form_select.scss         | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 06a8b2a30a..247e17456e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -245,7 +245,9 @@ $-btn-loading-min-height: rem(36px);
   }
 
   .sage-dropdown__trigger--select & {
-    font-weight: sage-font-weight(regular);
+    height: rem(40px);
+    font-family: $-body-font-stack;
+    font-weight: sage-font-weight(medium);
     border-width: 0;
     box-shadow: sage-border-interactive(default);
     &:hover {
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index 49f20e61ac..8bc011f8bc 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -438,6 +438,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   }
 }
 
+.sage-dropdown__trigger--select {
+  font-family: $-body-font-stack;
+}
+
 .sage-dropdown__trigger--select,
 .sage-dropdown__trigger--select-labeled {
   :not(.sage-dropdown--customized) > & {
@@ -452,10 +456,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__trigger-selected-value {
   justify-content: space-between;
   width: 100%;
+  font-weight: sage-font-weight(medium);
 }
 
 .sage-dropdown__trigger-label {
-  @extend %t-sage-body;
+  @extend %t-sage-body-med;
 
   position: absolute;
   z-index: sage-z-index(default, 1);
@@ -471,9 +476,9 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   .sage-dropdown--value-selected & {
     @extend %t-sage-body-xsmall-semi;
-
     transform: translateY(calc(#{-$-dropdown-height} + 50%));
     width: auto;
+    font-weight: sage-font-weight(medium);
     background-color: $-dropdown-trigger-label-color-label-background;
     transition: transform 0.15s ease-in-out, color 0.15s ease-out;
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
index 550ceb3a18..5de77e99bf 100644
--- a/packages/sage-assets/lib/stylesheets/components/_form_select.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -96,7 +96,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   .sage-select--value-selected & {
-    color: sage-color(grey, 900);
+    color: map-get($sage-field-colors, default);
   }
 
   .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before {

From ccb1cd0dcb39d9c60d2d127ef963ff4d19c2fc54 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Thu, 17 Oct 2024 14:03:55 -0700
Subject: [PATCH 10/13] style: add focus to correct styles on focus (#2010)

---
 packages/sage-assets/lib/stylesheets/components/_button.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 247e17456e..5e9bd9a688 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -533,6 +533,7 @@ a.sage-btn {
         }
       }
       @else if ($-style-type-name == focus) {
+        &:focus,
         &:focus-visible,
         &:active {
           color: map-get($-style-type-configs, color);

From 6ef50f6c89eff4593cfbc3b31bec7ebbe96c3aba Mon Sep 17 00:00:00 2001
From: Julian Skinner <ju-Skinner@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:44:44 -0500
Subject: [PATCH 11/13] test: change from independent versioning to single
 version for all monorepo packages (#1946)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
---
 lerna.json                        | 2 +-
 packages/sage-packs/package.json  | 2 +-
 packages/sage-react/package.json  | 2 +-
 packages/sage-system/package.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lerna.json b/lerna.json
index 61bb73671f..89f06de875 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
     "packages/*",
     "docs"
   ],
-  "version": "independent",
+  "version": "6.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {
diff --git a/packages/sage-packs/package.json b/packages/sage-packs/package.json
index 41f9acc43e..c70559a66a 100644
--- a/packages/sage-packs/package.json
+++ b/packages/sage-packs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kajabi/sage-packs",
-  "version": "1.1.16",
+  "version": "6.0.0",
   "description": "Sage Packs",
   "keywords": [
     "sage",
diff --git a/packages/sage-react/package.json b/packages/sage-react/package.json
index 62bd4a25cd..eb779e98f3 100644
--- a/packages/sage-react/package.json
+++ b/packages/sage-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kajabi/sage-react",
-  "version": "2.0.0",
+  "version": "6.0.0",
   "description": "React Components",
   "keywords": [
     "react",
diff --git a/packages/sage-system/package.json b/packages/sage-system/package.json
index 825aea1c54..90f3ea9de6 100644
--- a/packages/sage-system/package.json
+++ b/packages/sage-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kajabi/sage-system",
-  "version": "2.0.0",
+  "version": "6.0.0",
   "description": "Sage System",
   "keywords": [
     "sage",

From 36c50d9ddcb8c5f1f3677b4ad8108fa7c0c7161b Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Fri, 18 Oct 2024 14:01:09 -0500
Subject: [PATCH 12/13] fix: add border to inner cards and panels (#1996)

* feat!(rebrand): mercury-rising rebrand effort

ci: update rebrand mercury workflow for deployments

revert(font-weight): combine font-weights back to *00 based

fix: DSS-752

style(letter-spacing): updates to letter spacing for medium and smaller (#1922)

fix: DSS-747

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style: update body-xs to 12px (#1926)

refactor: removes page scope empty state and updates styles

style: adds styles for Icon Card for default and compact variants

style: adds gradient to icon card and empty state

docs: removes unneeded examples and adds new props

refactor: removes gradient

refactor: renames scope prop to size

chore: fixes Story name

refactor: adds background color to icon

docs: updates Empty States docs pages for Rails and React

docs: updates React component description with better clarity

chore: fixes linting issues

chore: removes unneeded gradient references

style(alert): adjust small variant icon alignment (#1930)

style(checkbox): adjust checkbox margin for alignment (#1931)

style(dropdown): add display flex to dropdown trigger (#1934)

* style(dropdown): add display flex to dropdown trigger

* style(dropdown): reorder css property

style(badge): correct interactive icon size (#1935)

style(line-height): update line-height to have rem units (#1933)

fix(p): remove adjacent p tag spacing (#1936)

fix: add white background color to box-like elements

* fix(box-shadow): update box shadow token value

* fix(box like components): add white background and md box shadow

* fix(container): remove color and shadow from container

* fix(css): updated order

* fix(frame): update to fix background color with nested frames

* fix(frame): add white background to bordered variant

chore: adds scope prop to address spec failures

chore: fixes syntax error

fix: add panel box-shadow (#1944)

* fix: add box-shadow to panel

* fix: remove box-shadow from inner card and panels

fix: updates placeholder assets & styles (#1947)

* fix: add new image assets

* style: adjust page heading image bg color

* fix: add new image assets for storybook

* fix: convert unsplash images to placeholders

* fix: convert unsplash images to small placeholder

* fix: hello linter my old friend

* fix: update image in empty state

fix: update line-height tokens (#1951)

fix: update box shadows (#1952)

* fix: update box shadows

* fix: add space after comma

ci: revert rebrand-mercury-rising back to original workflow

this is done since release-deploy has been fixed.

We hopes this solves this branch from not deploying properly in staging

style(pagination): remove background color (#1956)

style(choice): correct icon alignment (#1957)

* style(choice): remove incorrect margin styles

* docs(choice): add additional example without subtext

fix(sortable): update template columns (#1960)

fix(frame): add box shadow to bordered frame (#1958)

style(tab): adjust tab underline variable value (#1959)

chore: update pine-ds/icons to latets version

fix: updates conditionals to make image optional (#1965)

style: remove border from box like elements with box shadows (#1967)

* style: add shadow to frame

* style: remove border from box-like elements

* chore: remove white space for linter

style: change the active tab color to mercury 50 (#1969)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style: focus state updates (#1970)

* style: update sage-focus-ring mixin

* style: update focus-outline colors

* fix: removes duplicate focus ring

* style: update focus colors and sizing

* style: adjust tab focus

* fix: replace named color for linter

style(alert): add borders (#1972)

style(progress): update the default fill color to mercury-50 (#1971)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style(button): change border radius to 9999px (#1973)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style: update spacer to use logical properties (#1968)

style(button): change the colors for the accent variant to be purple (#1974)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

feature(loader): change loader to new behavior and colors (#1975)

* feat(loader-rails): change the loader animation and fill color

* feat(loader-react): change the loader animation and fill color

* style(loader): change timing to 1.5s per convo with design team

---------

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style: updates button font family

style: add Faire Spring font family (#1980)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

style(button): change button font-weight to med (500) (#1984)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

fix(button): loading button wasn't animating, updated svg in button-spinner.js (#1987)

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

* style: update color token name 3 digits (#1955)

* fix(frame): add box shadow to bordered frame (#1958)

* style: remove border from box like elements with box shadows (#1967)

* style: add shadow to frame

* style: remove border from box-like elements

* chore: remove white space for linter

* fix: change legacy colors to mapped values ie red 500 to red 95

* fix: remove old 100 tokens

* fix: add 0 to make token 3 digits

* fix: add red color classes

* fix: add 0 to green color token names

* fix: add 0 to blue color token names

* fix: add 0 to mercury color token names

* fix: add 0 to yellow color token names

* fix: add 0 to purple color token names

* fix: update grey color token names to 3 digits

* fix: update react green colors

* fix: update react purple colors

* fix: update red in jsx and erb

* fix: update orange color token to mercury

* fix: update charcoal color token to upper greys

* fix: update grey color token to lower greys

* fix: add options for default color values

* chore: remove whitespace

* fix: self review fix grey 300 and grey 400 in css

* Revert "fix: self review fix grey 300 and grey 400 in css"

This reverts commit 2ae5967850416529d61fda4ce6287e35a151fed6.

* Revert "fix: update grey color token to lower greys"

This reverts commit 69f8706fc389e07b36e121f830859a87e3f1f9c7.

* fix: update grey color token to lower greys

* Revert "fix: update grey color token to lower greys"

This reverts commit 2f43f1d435529ff04f4daf89fc0bc7cda3ff9ab9.

* style: update purple color token to use three digits

* style: update additional 2 digit token value to 3 digit token values

* style: added zero to mercury 30

* style: update templating to wrap 050 values in single-quotes

* style(breadcrumbs): change charcoal 400 to grey 900

* fix: update gray to grey instances

---------

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>

* fix: add-border-to-inner-cards-and-panels

* fix: clean up after rebase

---------

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
---
 packages/sage-assets/lib/stylesheets/components/_card.scss       | 1 +
 packages/sage-assets/lib/stylesheets/components/_choice.scss     | 1 +
 packages/sage-assets/lib/stylesheets/components/_panel.scss      | 1 +
 packages/sage-assets/lib/stylesheets/components/_stat_box.scss   | 1 +
 packages/sage-assets/lib/stylesheets/components/_switch.scss     | 1 +
 .../lib/stylesheets/components/_transaction_card.scss            | 1 +
 6 files changed, 6 insertions(+)

diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index 60ffb9bd64..7071da1a87 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -19,6 +19,7 @@ $-sage-card-background: transparent;
   .sage-card,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index 8f14554b6e..7cb579aaf6 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -102,6 +102,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   .sage-card & ,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   .sage-tabs--layout-default &:not(:last-child) {
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
index 4bfee719b2..be09769dc7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -11,6 +11,7 @@
   .sage-card &,
   .sage-panel {
     box-shadow: none;
+    border: sage-border();
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
index ce7ca6961f..9416185f9e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -17,6 +17,7 @@ $-stat-box-image-max-width: rem(48px);
   .sage-card &,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   &.sage-stat-box--raised {
diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
index 6bad669567..ddaa05baef 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -48,6 +48,7 @@ $-switch-toggle-size: rem(16px);
     .sage-card &,
     .sage-panel & {
       box-shadow: none;
+      border: sage-border();
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
index 0dfdadc996..0ddb767c98 100644
--- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -14,6 +14,7 @@ $-transaction-card-price-max-width: rem(100px);
   .sage-card &,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   position: relative;

From 2fe5d18ad886986b9f3dbdc212d96b8e921e3337 Mon Sep 17 00:00:00 2001
From: Phillip Lovelace <phillip.lovelace@kajabi.com>
Date: Mon, 21 Oct 2024 08:37:59 -0700
Subject: [PATCH 13/13] fix: tooltip custom class (react) (#2012)

* fix: add custom class prop

* docs: add custom class example

* fix: hello linter my old friend
---
 packages/sage-react/lib/Tooltip/Tooltip.jsx   |  8 +++---
 .../sage-react/lib/Tooltip/Tooltip.story.jsx  | 26 +++++++++++++++++++
 .../sage-react/lib/Tooltip/TooltipElement.jsx |  8 +++---
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/sage-react/lib/Tooltip/Tooltip.jsx b/packages/sage-react/lib/Tooltip/Tooltip.jsx
index 13c12d8d6b..a23e6cd609 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.jsx
@@ -2,14 +2,13 @@ import React, { Children, useState, cloneElement } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { TooltipElement } from './TooltipElement';
-import {
-  TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
 
 export const Tooltip = ({
   children,
   content,
   position,
+  tooltipCustomClass,
   ...rest
 }) => {
   const [active, setActive] = useState(false);
@@ -38,6 +37,7 @@ export const Tooltip = ({
           content={content}
           parentDomRect={parentDomRect}
           position={position}
+          tooltipCustomClass={tooltipCustomClass}
         />,
         document.body
       )}
@@ -50,10 +50,12 @@ Tooltip.POSITIONS = TOOLTIP_POSITIONS;
 
 Tooltip.defaultProps = {
   position: TOOLTIP_POSITIONS.DEFAULT,
+  tooltipCustomClass: '',
 };
 
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  tooltipCustomClass: PropTypes.string,
 };
diff --git a/packages/sage-react/lib/Tooltip/Tooltip.story.jsx b/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
index 3cd8896733..33e5fad4e4 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
@@ -37,3 +37,29 @@ export const Default = Template.bind({});
 export const Static = () => (
   <Tooltip.Element content="Testing static tooltip" />
 );
+
+export const CustomClass = Template.bind({});
+CustomClass.args = {
+  children: <Button>Button</Button>,
+  content: 'This content and sizing is styled with the applied custom class. Use at your own risk',
+  position: Tooltip.POSITIONS.DEFAULT,
+  tooltipCustomClass: 'custom-tooltip-class',
+};
+
+CustomClass.decorators = [
+  (Story) => (
+    <>
+      <style>
+        {`
+          .custom-tooltip-class {
+            color: #ff3e15;
+            height: 200px;
+            max-width: 800px;
+            width: 400px;
+          }
+        `}
+      </style>
+      <Story />
+    </>
+  ),
+];
diff --git a/packages/sage-react/lib/Tooltip/TooltipElement.jsx b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
index 52398cb63a..2bd467d402 100644
--- a/packages/sage-react/lib/Tooltip/TooltipElement.jsx
+++ b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
@@ -1,9 +1,7 @@
 import React, { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import {
-  TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -13,12 +11,14 @@ export const TooltipElement = ({
   content,
   parentDomRect,
   position,
+  tooltipCustomClass,
 }) => {
   const tooltipRef = useRef(null);
   const [coordinates, setCoordinates] = useState({ top: null, left: null });
 
   const classNames = classnames(
     'sage-tooltip',
+    tooltipCustomClass,
     {
       'sage-tooltip--static': !parentDomRect,
       [`sage-tooltip--${position}`]: position,
@@ -86,6 +86,7 @@ TooltipElement.POSITIONS = TOOLTIP_POSITIONS;
 TooltipElement.defaultProps = {
   parentDomRect: null,
   position: TOOLTIP_POSITIONS.DEFAULT,
+  tooltipCustomClass: '',
 };
 
 TooltipElement.propTypes = {
@@ -98,4 +99,5 @@ TooltipElement.propTypes = {
     width: PropTypes.number,
   }),
   position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+  tooltipCustomClass: PropTypes.string,
 };