From 6a59ee141e5749253a5d7c9d59c1c674cc63a185 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Fri, 14 Nov 2025 11:24:09 -0800
Subject: [PATCH 01/18] Update leaderboard loading style

---
 packages/mint-components/src/components.d.ts  | 40 -------------------
 .../sqm-leaderboard/sqm-leaderboard-view.tsx  |  2 +-
 2 files changed, 1 insertion(+), 41 deletions(-)

diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 4407a4eed7..37cd20612a 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -6,7 +6,6 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { DemoData } from "./global/demo";
-import { AssetCardViewProps } from "./components/sqm-asset-card/sqm-asset-card-view";
 import { BankingInfoFormViewProps } from "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view";
 import { BigStatViewProps } from "./components/sqm-big-stat/sqm-big-stat-view";
 import { CheckboxFieldViewProps } from "./components/sqm-checkbox-field/sqm-checkbox-field-view";
@@ -64,21 +63,6 @@ export namespace Components {
         "renderCell": () => Promise<any>;
         "renderLabel": (idx: any) => Promise<any>;
     }
-    interface SqmAssetCard {
-        /**
-          * @undocumented 
-          * @uiType object
-         */
-        "demoData"?: DemoData<AssetCardViewProps>;
-        /**
-          * @uiName Banner image
-         */
-        "imgUrl": string;
-        /**
-          * @uiName Banner title
-         */
-        "titleText": string;
-    }
     interface SqmBankingInfoForm {
         /**
           * @uiName Agency code field label
@@ -6906,12 +6890,6 @@ declare global {
         prototype: HTMLRaisinsPlopTargetElement;
         new (): HTMLRaisinsPlopTargetElement;
     };
-    interface HTMLSqmAssetCardElement extends Components.SqmAssetCard, HTMLStencilElement {
-    }
-    var HTMLSqmAssetCardElement: {
-        prototype: HTMLSqmAssetCardElement;
-        new (): HTMLSqmAssetCardElement;
-    };
     interface HTMLSqmBankingInfoFormElement extends Components.SqmBankingInfoForm, HTMLStencilElement {
     }
     var HTMLSqmBankingInfoFormElement: {
@@ -7670,7 +7648,6 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "raisins-plop-target": HTMLRaisinsPlopTargetElement;
-        "sqm-asset-card": HTMLSqmAssetCardElement;
         "sqm-banking-info-form": HTMLSqmBankingInfoFormElement;
         "sqm-big-stat": HTMLSqmBigStatElement;
         "sqm-brand": HTMLSqmBrandElement;
@@ -7802,21 +7779,6 @@ declare global {
 declare namespace LocalJSX {
     interface RaisinsPlopTarget {
     }
-    interface SqmAssetCard {
-        /**
-          * @undocumented 
-          * @uiType object
-         */
-        "demoData"?: DemoData<AssetCardViewProps>;
-        /**
-          * @uiName Banner image
-         */
-        "imgUrl"?: string;
-        /**
-          * @uiName Banner title
-         */
-        "titleText"?: string;
-    }
     interface SqmBankingInfoForm {
         /**
           * @uiName Agency code field label
@@ -14608,7 +14570,6 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "raisins-plop-target": RaisinsPlopTarget;
-        "sqm-asset-card": SqmAssetCard;
         "sqm-banking-info-form": SqmBankingInfoForm;
         "sqm-big-stat": SqmBigStat;
         "sqm-brand": SqmBrand;
@@ -14742,7 +14703,6 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "raisins-plop-target": LocalJSX.RaisinsPlopTarget & JSXBase.HTMLAttributes<HTMLRaisinsPlopTargetElement>;
-            "sqm-asset-card": LocalJSX.SqmAssetCard & JSXBase.HTMLAttributes<HTMLSqmAssetCardElement>;
             "sqm-banking-info-form": LocalJSX.SqmBankingInfoForm & JSXBase.HTMLAttributes<HTMLSqmBankingInfoFormElement>;
             "sqm-big-stat": LocalJSX.SqmBigStat & JSXBase.HTMLAttributes<HTMLSqmBigStatElement>;
             "sqm-brand": LocalJSX.SqmBrand & JSXBase.HTMLAttributes<HTMLSqmBrandElement>;
diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
index 59605e8cf3..691447bb41 100644
--- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
+++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
@@ -142,7 +142,7 @@ export function LeaderboardView(props: LeaderboardViewProps) {
           {vanillaStyle}
         </style>
         <table>
-          {[...Array(10)].map(() => {
+          {[...Array(5)].map(() => {
             return (
               <tr>
                 <td>

From fbfe8fef67e546b15c118ac74e5dcb9046b4aac6 Mon Sep 17 00:00:00 2001
From: Sam Beveridge <sam.beveridge@impact.com>
Date: Mon, 17 Nov 2025 11:08:15 -0800
Subject: [PATCH 02/18] cleaing up some imports

---
 packages/mint-components/src/components.d.ts  | 42 +-----------------
 .../sqm-navigation-menu/useNavigationMenu.tsx |  3 +-
 .../sqm-password-field/sqm-password-field.tsx | 17 ++-----
 .../sqm-password-field/usePasswordField.tsx   | 11 +++++
 .../sqm-portal-container-view.tsx             | 18 ++++----
 .../usePortalProtectedRoute.tsx               |  4 +-
 .../sqm-portal-reset-password-view.tsx        |  2 +-
 .../usePortalVerifyEmail.tsx                  |  2 +-
 packages/mint-components/src/index.html       | 44 ++++++++++++++++++-
 packages/mint-components/stencil.config.ts    |  7 +++
 10 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 4407a4eed7..9104d12130 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -6,7 +6,6 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { DemoData } from "./global/demo";
-import { AssetCardViewProps } from "./components/sqm-asset-card/sqm-asset-card-view";
 import { BankingInfoFormViewProps } from "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view";
 import { BigStatViewProps } from "./components/sqm-big-stat/sqm-big-stat-view";
 import { CheckboxFieldViewProps } from "./components/sqm-checkbox-field/sqm-checkbox-field-view";
@@ -35,7 +34,7 @@ import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-na
 import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { UsePagination } from "./components/sqm-pagination/usePagination";
-import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/sqm-password-field";
+import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/usePasswordField";
 import { PayoutButtonScrollViewProps } from "./components/sqm-payout-button-scroll/sqm-payout-button-scroll-view";
 import { PayoutStatusAlertViewProps } from "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view";
 import { ChangeMarketingViewProps } from "./components/sqm-portal-change-marketing/sqm-portal-change-marketing-view";
@@ -64,21 +63,6 @@ export namespace Components {
         "renderCell": () => Promise<any>;
         "renderLabel": (idx: any) => Promise<any>;
     }
-    interface SqmAssetCard {
-        /**
-          * @undocumented 
-          * @uiType object
-         */
-        "demoData"?: DemoData<AssetCardViewProps>;
-        /**
-          * @uiName Banner image
-         */
-        "imgUrl": string;
-        /**
-          * @uiName Banner title
-         */
-        "titleText": string;
-    }
     interface SqmBankingInfoForm {
         /**
           * @uiName Agency code field label
@@ -6906,12 +6890,6 @@ declare global {
         prototype: HTMLRaisinsPlopTargetElement;
         new (): HTMLRaisinsPlopTargetElement;
     };
-    interface HTMLSqmAssetCardElement extends Components.SqmAssetCard, HTMLStencilElement {
-    }
-    var HTMLSqmAssetCardElement: {
-        prototype: HTMLSqmAssetCardElement;
-        new (): HTMLSqmAssetCardElement;
-    };
     interface HTMLSqmBankingInfoFormElement extends Components.SqmBankingInfoForm, HTMLStencilElement {
     }
     var HTMLSqmBankingInfoFormElement: {
@@ -7670,7 +7648,6 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "raisins-plop-target": HTMLRaisinsPlopTargetElement;
-        "sqm-asset-card": HTMLSqmAssetCardElement;
         "sqm-banking-info-form": HTMLSqmBankingInfoFormElement;
         "sqm-big-stat": HTMLSqmBigStatElement;
         "sqm-brand": HTMLSqmBrandElement;
@@ -7802,21 +7779,6 @@ declare global {
 declare namespace LocalJSX {
     interface RaisinsPlopTarget {
     }
-    interface SqmAssetCard {
-        /**
-          * @undocumented 
-          * @uiType object
-         */
-        "demoData"?: DemoData<AssetCardViewProps>;
-        /**
-          * @uiName Banner image
-         */
-        "imgUrl"?: string;
-        /**
-          * @uiName Banner title
-         */
-        "titleText"?: string;
-    }
     interface SqmBankingInfoForm {
         /**
           * @uiName Agency code field label
@@ -14608,7 +14570,6 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "raisins-plop-target": RaisinsPlopTarget;
-        "sqm-asset-card": SqmAssetCard;
         "sqm-banking-info-form": SqmBankingInfoForm;
         "sqm-big-stat": SqmBigStat;
         "sqm-brand": SqmBrand;
@@ -14742,7 +14703,6 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "raisins-plop-target": LocalJSX.RaisinsPlopTarget & JSXBase.HTMLAttributes<HTMLRaisinsPlopTargetElement>;
-            "sqm-asset-card": LocalJSX.SqmAssetCard & JSXBase.HTMLAttributes<HTMLSqmAssetCardElement>;
             "sqm-banking-info-form": LocalJSX.SqmBankingInfoForm & JSXBase.HTMLAttributes<HTMLSqmBankingInfoFormElement>;
             "sqm-big-stat": LocalJSX.SqmBigStat & JSXBase.HTMLAttributes<HTMLSqmBigStatElement>;
             "sqm-brand": LocalJSX.SqmBrand & JSXBase.HTMLAttributes<HTMLSqmBrandElement>;
diff --git a/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx b/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
index cbd2991706..f8a573df55 100644
--- a/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
+++ b/packages/mint-components/src/components/sqm-navigation-menu/useNavigationMenu.tsx
@@ -3,9 +3,8 @@ import {
   useTick,
   useUserIdentity,
 } from "@saasquatch/component-boilerplate";
-import { useRef } from "@saasquatch/universal-hooks";
+import { useEffect, useRef } from "@saasquatch/universal-hooks";
 import { SlMenu, SlMenuItem } from "@saasquatch/shoelace";
-import { useEffect } from "haunted";
 import { NavigationMenu } from "./sqm-navigation-menu";
 import { NavigationMenuViewProps } from "./sqm-navigation-menu-view";
 
diff --git a/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx b/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
index 68c33277c1..e2a82a1fdd 100644
--- a/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
+++ b/packages/mint-components/src/components/sqm-password-field/sqm-password-field.tsx
@@ -4,24 +4,15 @@ import { useState } from "@saasquatch/universal-hooks";
 import { Component, h, Prop, State, VNode } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
 import { validateNewPassword } from "./passwordValidation";
 import {
   PortalPasswordFieldViewProps,
   PortalResetPasswordView,
 } from "./sqm-password-field-view";
-import { usePasswordField } from "./usePasswordField";
-
-export interface PasswordFieldViewDemoProps {
-  initValue: string;
-  states: {
-    enableValidation: boolean;
-    registrationFormState: RegistrationFormState;
-    content: {
-      fieldLabel: string;
-    };
-  };
-}
+import {
+  PasswordFieldViewDemoProps,
+  usePasswordField,
+} from "./usePasswordField";
 
 /**
  * @uiName Form Password Field
diff --git a/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx b/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
index c8b24b8a74..1041d15206 100644
--- a/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
+++ b/packages/mint-components/src/components/sqm-password-field/usePasswordField.tsx
@@ -9,6 +9,17 @@ import {
   REGISTRATION_FORM_STATE_CONTEXT,
 } from "../sqm-portal-registration-form/useRegistrationFormState";
 
+export interface PasswordFieldViewDemoProps {
+  initValue: string;
+  states: {
+    enableValidation: boolean;
+    registrationFormState: RegistrationFormState;
+    content: {
+      fieldLabel: string;
+    };
+  };
+}
+
 export function usePasswordField(
   props: PortalPasswordField
 ): PortalPasswordFieldViewProps {
diff --git a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
index cd67591dcf..73c9bce8b7 100644
--- a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx
@@ -1,4 +1,4 @@
-import { h, VNode } from "@stencil/core";
+import { h, Host, VNode } from "@stencil/core";
 import { Spacing } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
 
@@ -55,12 +55,14 @@ export function PortalContainerView(
   const styleString = sheet.toString();
 
   return (
-    <div class={sheet.classes.Container} part={"sqm-base"}>
-      <style type="text/css">
-        {vanillaStyle}
-        {styleString}
-      </style>
-      {children}
-    </div>
+    <Host>
+      <div class={sheet.classes.Container} part={"sqm-base"}>
+        <style type="text/css">
+          {vanillaStyle}
+          {styleString}
+        </style>
+        {children}
+      </div>
+    </Host>
   );
 }
diff --git a/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx b/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
index d3cf0f4e7d..9cc6939fa1 100644
--- a/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
+++ b/packages/mint-components/src/components/sqm-portal-protected-route/usePortalProtectedRoute.tsx
@@ -3,7 +3,7 @@ import {
   navigation,
   useCurrentPage,
 } from "@saasquatch/component-boilerplate";
-import { useEffect } from "haunted";
+import { useEffect } from "@saasquatch/universal-hooks";
 
 interface PortalProtectedRouteProps {
   redirectTo: string;
@@ -40,6 +40,6 @@ export function usePortalProtectedRoute({
       });
     }
   }, []);
-  
+
   return !!userIdent;
 }
diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
index f206d429d4..f9a2a5d0af 100644
--- a/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-reset-password/sqm-portal-reset-password-view.tsx
@@ -5,8 +5,8 @@ import {
   AuthWrapper,
 } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
-import { PasswordFieldViewDemoProps } from "../sqm-password-field/sqm-password-field";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
+import { PasswordFieldViewDemoProps } from "../sqm-password-field/usePasswordField";
 
 export interface PortalResetPasswordViewProps {
   states: {
diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx b/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
index 34be6c1243..e041d3fba2 100644
--- a/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
+++ b/packages/mint-components/src/components/sqm-portal-verify-email/usePortalVerifyEmail.tsx
@@ -4,8 +4,8 @@ import {
   useUserIdentity,
   useVerifyEmailMutation,
 } from "@saasquatch/component-boilerplate";
-import { useEffect, useState } from "@saasquatch/stencil-hooks";
 import { sanitizeUrlPath } from "../../utils/utils";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
 
 let globalPromise: null | Promise<any | Error> = null;
 
diff --git a/packages/mint-components/src/index.html b/packages/mint-components/src/index.html
index 9730b63139..b50e5c5582 100644
--- a/packages/mint-components/src/index.html
+++ b/packages/mint-components/src/index.html
@@ -17,7 +17,49 @@
   </script>
 
 <body>
-  <sqm-stencilbook></sqm-stencilbook>
+  <sqm-portal-container
+    direction="column"
+    padding="small"
+    gap="xxx-large"
+    display="grid"
+    max-width="100%"
+    ><sqm-stat-container space="xxx-large" display="flex" slot
+        ><sqm-big-stat
+            flex-reverse="true"
+            alignment="left"
+            stat-type="/rewardBalance/CREDIT/POINT/value/global"
+            ><p>Points Balance</p></sqm-big-stat
+        ><sqm-big-stat
+            flex-reverse="true"
+            alignment="left"
+            stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"
+            ><p>Giftcards Earned</p></sqm-big-stat
+        ><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"
+            ><p>Referrals</p></sqm-big-stat
+        ></sqm-stat-container
+    ><sqm-image
+        alignment="center"
+        slot
+        image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1762475328/tenant_ac52kfybp1tkr/fz34nzkgameagtrwwtqx.png"
+    ></sqm-image
+    ><sqm-program-explainer header="How it works" slot
+        ><sqm-program-explainer-step
+            description="Explore and use our product while earning points in the process!"
+            header="Earn points"
+            icon="cash-stack"
+        ></sqm-program-explainer-step
+        ><sqm-program-explainer-step
+            description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard"
+            header="Redeem rewards"
+            icon="people"
+        ></sqm-program-explainer-step></sqm-program-explainer
+    ><sqm-image
+        image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png"
+        alignment="center"
+        slot
+    ></sqm-image>
+</sqm-portal-container>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/packages/mint-components/stencil.config.ts b/packages/mint-components/stencil.config.ts
index ed126e4ff0..23af5abfb0 100644
--- a/packages/mint-components/stencil.config.ts
+++ b/packages/mint-components/stencil.config.ts
@@ -28,6 +28,13 @@ const useGrapesjs: OutputTarget = grapesJsOutput({
 
 export const config: Config = {
   namespace: "mint-components",
+  hydratedFlag: {
+    hydratedValue: "inherit!important",
+    initialValue: "hidden",
+    name: "hydrated",
+    property: "visibility",
+    selector: "class",
+  },
   devServer: {
     // startupTimeout: 0,
   },

From ebb4c0289feff0146a632d662a6c5cbe8676abf7 Mon Sep 17 00:00:00 2001
From: Sam Beveridge <sam.beveridge@impact.com>
Date: Mon, 17 Nov 2025 15:29:46 -0800
Subject: [PATCH 03/18] upgrade formatjs version

---
 packages/mint-components/package-lock.json    | 473 ++++++++++++++----
 packages/mint-components/package.json         |   4 +-
 .../useLeaderboardRank.tsx                    |   2 +-
 .../sqm-tax-and-cash/sqm-tax-and-cash.tsx     |  34 +-
 packages/mint-components/src/index.html       | 110 ++--
 5 files changed, 448 insertions(+), 175 deletions(-)

diff --git a/packages/mint-components/package-lock.json b/packages/mint-components/package-lock.json
index d6f16b3f6d..816d6bc661 100644
--- a/packages/mint-components/package-lock.json
+++ b/packages/mint-components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@saasquatch/mint-components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@saasquatch/mint-components",
-      "version": "2.0.2",
+      "version": "2.0.3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -36,7 +36,7 @@
         "path-to-regexp": "^6.2.0"
       },
       "devDependencies": {
-        "@formatjs/intl": "1.8.4",
+        "@formatjs/intl": "^3.1.8",
         "@formatjs/intl-pluralrules": "^1.5.8",
         "@formatjs/intl-relativetimeformat": "4.5.15",
         "@formatjs/intl-utils": "^2.2.5",
@@ -1789,28 +1789,61 @@
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.6.3.tgz",
-      "integrity": "sha512-7ijswObmYXabVy5GvcpKG29jbyJ9rGtFdRBdmdQvoDmMo0PwlOl/L08GtrjA4YWLAZ0j2owb2YrRLGNAvLBk+Q==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+      "dev": true,
       "dependencies": {
-        "tslib": "^2.1.0"
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/intl-localematcher": "0.6.2",
+        "decimal.js": "^10.4.3",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/icu-skeleton-parser": "1.8.16",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "tslib": "^2.8.0"
       }
     },
     "node_modules/@formatjs/intl": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.8.4.tgz",
-      "integrity": "sha512-m0/5ZRQZZfzXmeDieoG8kxu3QRvJazv2VbXhROs5khJKfUKu1rz6xfuUrh3gkmydWYtHuwJDIoC9oGR0ik4+/g==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-3.1.8.tgz",
+      "integrity": "sha512-LWXgwI5zTMatvR8w8kCNh/priDTOF/ZssokMBHJ7ZWXFoYLVOYo0EJERD9Eajv+xsfQO1QkuAt77KWQ1OI4mOQ==",
+      "dev": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.6.3",
-        "@formatjs/intl-displaynames": "4.0.11",
-        "@formatjs/intl-listformat": "5.0.12",
-        "fast-memoize": "^2.5.2",
-        "intl-messageformat": "9.5.3",
-        "intl-messageformat-parser": "6.4.3",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "intl-messageformat": "10.7.18",
+        "tslib": "^2.8.0"
       },
       "peerDependencies": {
-        "typescript": "^4.2"
+        "typescript": "^5.6.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1819,23 +1852,68 @@
       }
     },
     "node_modules/@formatjs/intl-displaynames": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-4.0.11.tgz",
-      "integrity": "sha512-e3917+HmXStxb2fNP3sOr3R1DMALdWrUteBb3nerA2AKa12mXwmL0lDavrdltwZWqF7/Egh8fF/esB0Z/fqOgQ==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.2.tgz",
+      "integrity": "sha512-SLesCDan9NCMqBbHPXMEwqAcPn3tnbQw0sv0rssH1JQDLDUQYwKXL93kz30X3yskTyQS7N+pd47bhoIe3kbXyw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/intl-localematcher": "0.2.24",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+      "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.24",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+      "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.6.3",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@formatjs/intl-listformat": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-5.0.12.tgz",
-      "integrity": "sha512-xWAndG73lqJ1+ar6SljCpM9nUsi2YoZfKi45F2YZRSxtUx4JbWYkhpbroOwxjCQ8ppZFoPc2mlLZjhPZiTyG7g==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.2.tgz",
+      "integrity": "sha512-/IYagQJkzTvpBlhhaysGYNgM3o72WBg1ZWZcpookkgXEJbINwLP5kVagHxmgxffYKs1CDzQ8rmKHghu2qR/7zw==",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.6.3",
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/intl-localematcher": "0.2.24",
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+      "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.24",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+      "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@formatjs/intl-pluralrules": {
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-1.5.9.tgz",
@@ -3020,6 +3098,72 @@
         "rxjs": "^6.6.7"
       }
     },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+      "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.2.24",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/fast-memoize": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.18.tgz",
+      "integrity": "sha512-vquIzsAJJmZ5jWVH8dEgUKcbG4yu3KqtyPet+q35SW5reLOvblkfeCXTRW2TpIwNXzdVqsJBwjbTiRiSU9JxwQ==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/icu-skeleton-parser": "1.3.5",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.5.tgz",
+      "integrity": "sha512-Nhyo2/6kG7ZfgeEfo02sxviOuBcvtzH6SYUharj3DLCDJH3A/4OxkKcmx/2PWGX4bc6iSieh+FA94CsKDxnZBQ==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/intl": {
+      "version": "1.18.5",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.18.5.tgz",
+      "integrity": "sha512-5jiC7neCMXMAa/uQU68plY3vxQqtDjiFPkvc6fEuCmNoVZkIya9uMG8uqM2Z0BOX6xg0K1ohHuj+VLHDDx1fEw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.0.18",
+        "@formatjs/intl-displaynames": "5.4.2",
+        "@formatjs/intl-listformat": "6.5.2",
+        "intl-messageformat": "9.11.4",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "typescript": "^4.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.24",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+      "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@saasquatch/component-boilerplate/node_modules/fast-equals": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
@@ -3028,6 +3172,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@saasquatch/component-boilerplate/node_modules/intl-messageformat": {
+      "version": "9.11.4",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.11.4.tgz",
+      "integrity": "sha512-77TSkNubIy/hsapz6LQpyR6OADcxhWdhSaboPb5flMaALCVkPvAIxr48AlPqaMl4r1anNcvR9rpLWVdwUY1IKg==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.0.18",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@saasquatch/component-boilerplate/node_modules/jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -5410,9 +5565,9 @@
       }
     },
     "node_modules/decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "dev": true
     },
     "node_modules/decode-uri-component": {
@@ -7357,23 +7512,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/intl-messageformat": {
-      "version": "9.5.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.5.3.tgz",
-      "integrity": "sha512-Ei8vH41/icJsc16ZfWk1FzZ2SpaVn0gElXsQCKKPerxK/28m1gVdH0G26GuCqAyz5ETEJiSRn8sPMaSWJDuTjg==",
-      "dependencies": {
-        "fast-memoize": "^2.5.2",
-        "intl-messageformat-parser": "6.4.3",
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/intl-messageformat-parser": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.4.3.tgz",
-      "integrity": "sha512-gpB7OeKDSd9wqjIQ7wVQM9byrpMlokGoUfJND7DS9SjoBbOsZIHAHw+lrmAWYmq+MI3WQUeLouSFdYAZ6zSX9A==",
-      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
+      "version": "10.7.18",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "dev": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.6.3",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "tslib": "^2.8.0"
       }
     },
     "node_modules/ip-address": {
@@ -15674,9 +15821,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/tua-body-scroll-lock": {
       "version": "1.2.1",
@@ -17673,43 +17820,125 @@
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@formatjs/ecma402-abstract": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.6.3.tgz",
-      "integrity": "sha512-7ijswObmYXabVy5GvcpKG29jbyJ9rGtFdRBdmdQvoDmMo0PwlOl/L08GtrjA4YWLAZ0j2owb2YrRLGNAvLBk+Q==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+      "integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+      "dev": true,
       "requires": {
-        "tslib": "^2.1.0"
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/intl-localematcher": "0.6.2",
+        "decimal.js": "^10.4.3",
+        "tslib": "^2.8.0"
+      }
+    },
+    "@formatjs/fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "@formatjs/icu-messageformat-parser": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+      "integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+      "dev": true,
+      "requires": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/icu-skeleton-parser": "1.8.16",
+        "tslib": "^2.8.0"
+      }
+    },
+    "@formatjs/icu-skeleton-parser": {
+      "version": "1.8.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+      "integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+      "dev": true,
+      "requires": {
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "tslib": "^2.8.0"
       }
     },
     "@formatjs/intl": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.8.4.tgz",
-      "integrity": "sha512-m0/5ZRQZZfzXmeDieoG8kxu3QRvJazv2VbXhROs5khJKfUKu1rz6xfuUrh3gkmydWYtHuwJDIoC9oGR0ik4+/g==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-3.1.8.tgz",
+      "integrity": "sha512-LWXgwI5zTMatvR8w8kCNh/priDTOF/ZssokMBHJ7ZWXFoYLVOYo0EJERD9Eajv+xsfQO1QkuAt77KWQ1OI4mOQ==",
+      "dev": true,
       "requires": {
-        "@formatjs/ecma402-abstract": "1.6.3",
-        "@formatjs/intl-displaynames": "4.0.11",
-        "@formatjs/intl-listformat": "5.0.12",
-        "fast-memoize": "^2.5.2",
-        "intl-messageformat": "9.5.3",
-        "intl-messageformat-parser": "6.4.3",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "intl-messageformat": "10.7.18",
+        "tslib": "^2.8.0"
       }
     },
     "@formatjs/intl-displaynames": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-4.0.11.tgz",
-      "integrity": "sha512-e3917+HmXStxb2fNP3sOr3R1DMALdWrUteBb3nerA2AKa12mXwmL0lDavrdltwZWqF7/Egh8fF/esB0Z/fqOgQ==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.2.tgz",
+      "integrity": "sha512-SLesCDan9NCMqBbHPXMEwqAcPn3tnbQw0sv0rssH1JQDLDUQYwKXL93kz30X3yskTyQS7N+pd47bhoIe3kbXyw==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.6.3",
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/intl-localematcher": "0.2.24",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.3",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+          "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.24",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/intl-localematcher": {
+          "version": "0.2.24",
+          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+          "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
       }
     },
     "@formatjs/intl-listformat": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-5.0.12.tgz",
-      "integrity": "sha512-xWAndG73lqJ1+ar6SljCpM9nUsi2YoZfKi45F2YZRSxtUx4JbWYkhpbroOwxjCQ8ppZFoPc2mlLZjhPZiTyG7g==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.2.tgz",
+      "integrity": "sha512-/IYagQJkzTvpBlhhaysGYNgM3o72WBg1ZWZcpookkgXEJbINwLP5kVagHxmgxffYKs1CDzQ8rmKHghu2qR/7zw==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.6.3",
+        "@formatjs/ecma402-abstract": "1.11.3",
+        "@formatjs/intl-localematcher": "0.2.24",
         "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.3",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+          "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.24",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/intl-localematcher": {
+          "version": "0.2.24",
+          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+          "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        }
+      }
+    },
+    "@formatjs/intl-localematcher": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+      "integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.8.0"
       }
     },
     "@formatjs/intl-pluralrules": {
@@ -18634,11 +18863,80 @@
         "rxjs": "^6.6.7"
       },
       "dependencies": {
+        "@formatjs/ecma402-abstract": {
+          "version": "1.11.3",
+          "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz",
+          "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==",
+          "requires": {
+            "@formatjs/intl-localematcher": "0.2.24",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/fast-memoize": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+          "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/icu-messageformat-parser": {
+          "version": "2.0.18",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.18.tgz",
+          "integrity": "sha512-vquIzsAJJmZ5jWVH8dEgUKcbG4yu3KqtyPet+q35SW5reLOvblkfeCXTRW2TpIwNXzdVqsJBwjbTiRiSU9JxwQ==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.3",
+            "@formatjs/icu-skeleton-parser": "1.3.5",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/icu-skeleton-parser": {
+          "version": "1.3.5",
+          "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.5.tgz",
+          "integrity": "sha512-Nhyo2/6kG7ZfgeEfo02sxviOuBcvtzH6SYUharj3DLCDJH3A/4OxkKcmx/2PWGX4bc6iSieh+FA94CsKDxnZBQ==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.3",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/intl": {
+          "version": "1.18.5",
+          "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.18.5.tgz",
+          "integrity": "sha512-5jiC7neCMXMAa/uQU68plY3vxQqtDjiFPkvc6fEuCmNoVZkIya9uMG8uqM2Z0BOX6xg0K1ohHuj+VLHDDx1fEw==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.3",
+            "@formatjs/fast-memoize": "1.2.1",
+            "@formatjs/icu-messageformat-parser": "2.0.18",
+            "@formatjs/intl-displaynames": "5.4.2",
+            "@formatjs/intl-listformat": "6.5.2",
+            "intl-messageformat": "9.11.4",
+            "tslib": "^2.1.0"
+          }
+        },
+        "@formatjs/intl-localematcher": {
+          "version": "0.2.24",
+          "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz",
+          "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
         "fast-equals": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
           "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ=="
         },
+        "intl-messageformat": {
+          "version": "9.11.4",
+          "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.11.4.tgz",
+          "integrity": "sha512-77TSkNubIy/hsapz6LQpyR6OADcxhWdhSaboPb5flMaALCVkPvAIxr48AlPqaMl4r1anNcvR9rpLWVdwUY1IKg==",
+          "requires": {
+            "@formatjs/ecma402-abstract": "1.11.3",
+            "@formatjs/fast-memoize": "1.2.1",
+            "@formatjs/icu-messageformat-parser": "2.0.18",
+            "tslib": "^2.1.0"
+          }
+        },
         "jwt-decode": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -20535,9 +20833,9 @@
       "dev": true
     },
     "decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "dev": true
     },
     "decode-uri-component": {
@@ -22012,22 +22310,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "intl-messageformat": {
-      "version": "9.5.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.5.3.tgz",
-      "integrity": "sha512-Ei8vH41/icJsc16ZfWk1FzZ2SpaVn0gElXsQCKKPerxK/28m1gVdH0G26GuCqAyz5ETEJiSRn8sPMaSWJDuTjg==",
-      "requires": {
-        "fast-memoize": "^2.5.2",
-        "intl-messageformat-parser": "6.4.3",
-        "tslib": "^2.1.0"
-      }
-    },
-    "intl-messageformat-parser": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.4.3.tgz",
-      "integrity": "sha512-gpB7OeKDSd9wqjIQ7wVQM9byrpMlokGoUfJND7DS9SjoBbOsZIHAHw+lrmAWYmq+MI3WQUeLouSFdYAZ6zSX9A==",
+      "version": "10.7.18",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+      "integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+      "dev": true,
       "requires": {
-        "@formatjs/ecma402-abstract": "1.6.3",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.3.6",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.4",
+        "tslib": "^2.8.0"
       }
     },
     "ip-address": {
@@ -28367,9 +28658,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "tua-body-scroll-lock": {
       "version": "1.2.1",
diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 7c75c9a70f..8168f8ad79 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.3",
+  "version": "2.0.5-1",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -36,7 +36,7 @@
     "postinstall": "patch-package"
   },
   "devDependencies": {
-    "@formatjs/intl": "1.8.4",
+    "@formatjs/intl": "^3.1.8",
     "@formatjs/intl-pluralrules": "^1.5.8",
     "@formatjs/intl-relativetimeformat": "4.5.15",
     "@formatjs/intl-utils": "^2.2.5",
diff --git a/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx b/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
index b5982cb898..c7f4ab9af7 100644
--- a/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
+++ b/packages/mint-components/src/components/sqm-leaderboard-rank/useLeaderboardRank.tsx
@@ -68,7 +68,7 @@ export function useLeaderboardRank(
 
   return {
     data: {
-      rank: fullRankText,
+      rank: fullRankText as string,
     },
   };
 }
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
index 661158ec08..07e68b9e2e 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx
@@ -1305,22 +1305,24 @@ export class TaxAndCashMonolith {
         return (
           <ErrorView
             loadingErrorAlertHeader={this.loadingErrorAlertHeader}
-            loadingErrorAlertDescription={intl.formatMessage(
-              {
-                id: "loadingErrorAlertDescription",
-                defaultMessage: this.loadingErrorAlertDescription,
-              },
-              {
-                supportLink: (
-                  <a
-                    target="_blank"
-                    href={`mailto:advocate-support@impact.com`}
-                  >
-                    {this.supportLink}
-                  </a>
-                ),
-              }
-            )}
+            loadingErrorAlertDescription={
+              intl.formatMessage(
+                {
+                  id: "loadingErrorAlertDescription",
+                  defaultMessage: this.loadingErrorAlertDescription,
+                },
+                {
+                  supportLink: (
+                    <a
+                      target="_blank"
+                      href={`mailto:advocate-support@impact.com`}
+                    >
+                      {this.supportLink}
+                    </a>
+                  ),
+                }
+              ) as string
+            }
           />
         );
     }
diff --git a/packages/mint-components/src/index.html b/packages/mint-components/src/index.html
index b50e5c5582..974237ff31 100644
--- a/packages/mint-components/src/index.html
+++ b/packages/mint-components/src/index.html
@@ -1,65 +1,45 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-  <title>Mint Components Stencilbook</title>
-  <script type="module" src="build/mint-components.esm.js"></script>
-  <script nomodule src="build/mint-components.js"></script>
-
-  <script>
-    const brandConfig = localStorage.getItem("localStorageBrandConfigKey");
-    if (brandConfig) {
-      const parsedConfig = JSON.parse(brandConfig);
-      window.SquatchBrandingConfig = parsedConfig;
-    }
-  </script>
-
-<body>
-  <sqm-portal-container
-    direction="column"
-    padding="small"
-    gap="xxx-large"
-    display="grid"
-    max-width="100%"
-    ><sqm-stat-container space="xxx-large" display="flex" slot
-        ><sqm-big-stat
-            flex-reverse="true"
-            alignment="left"
-            stat-type="/rewardBalance/CREDIT/POINT/value/global"
-            ><p>Points Balance</p></sqm-big-stat
-        ><sqm-big-stat
-            flex-reverse="true"
-            alignment="left"
-            stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"
-            ><p>Giftcards Earned</p></sqm-big-stat
-        ><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"
-            ><p>Referrals</p></sqm-big-stat
-        ></sqm-stat-container
-    ><sqm-image
-        alignment="center"
-        slot
-        image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1762475328/tenant_ac52kfybp1tkr/fz34nzkgameagtrwwtqx.png"
-    ></sqm-image
-    ><sqm-program-explainer header="How it works" slot
-        ><sqm-program-explainer-step
-            description="Explore and use our product while earning points in the process!"
-            header="Earn points"
-            icon="cash-stack"
-        ></sqm-program-explainer-step
-        ><sqm-program-explainer-step
-            description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard"
-            header="Redeem rewards"
-            icon="people"
-        ></sqm-program-explainer-step></sqm-program-explainer
-    ><sqm-image
-        image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png"
-        alignment="center"
-        slot
-    ></sqm-image>
-</sqm-portal-container>
-
-</body>
-
-</html>
\ No newline at end of file
+<html>
+  <head>
+    <script>
+      !(function (a, b) {
+        a("squatch", "http://localhost:3333/squatch.min.js", b);
+      })(function (a, b, c) {
+        var d, e, f;
+        (c["_" + a] = {}),
+          (c[a] = {}),
+          (c[a].ready = function (b) {
+            c["_" + a].ready = c["_" + a].ready || [];
+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),
+          (e.src = b),
+          (f = document.getElementsByTagName("script")[0]),
+          f.parentNode.insertBefore(e, f);
+      }, this);
+    </script>
+    <script>
+      window.squatchTenant = "ac52kfybp1tkr";
+      window.squatchConfig = {
+        domain: "https://staging.referralsaasquatch.com",
+      };
+      window.squatchToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU";
+      window.widgetIdent = {
+        programId: "41863",
+        userId: "testuser",
+        accountId: "testuser",
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU",
+        tenantAlias: "ac52kfybp1tkr",
+        engagementMedium: "EMBED",
+        appDomain: "https://staging.referralsaasquatch.com",
+      };
+    </script>
+  </head>
+  <body>
+    <impact-embed widget="p/41863/w/referrerWidget"
+      ><div>Loading...</div></impact-embed
+    >
+  </body>
+</html>

From 4a575b2e37f564ca2924c0737aed1f1b9b023600 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 08:24:31 -0800
Subject: [PATCH 04/18] Add loading state for form message component

---
 packages/mint-components/src/components.d.ts          | 10 ++++++++++
 .../sqm-form-message/FormMessage.stories.tsx          |  9 +++++++++
 .../components/sqm-form-message/sqm-form-message.scss | 11 +++++++++++
 .../components/sqm-form-message/sqm-form-message.tsx  | 11 +++++++++++
 .../sqm-email-verification-view.tsx                   | 11 +++++++++++
 5 files changed, 52 insertions(+)

diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 37cd20612a..5b62331585 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -985,6 +985,11 @@ export namespace Components {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading": string;
         /**
           * Render the alert with transparent styles
          */
@@ -8701,6 +8706,11 @@ declare namespace LocalJSX {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading"?: string;
         /**
           * Render the alert with transparent styles
          */
diff --git a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
index d88863d889..01e5bb4f86 100644
--- a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
@@ -69,3 +69,12 @@ export const InfoAlertTransparent = () => (
     <p part="alert-description">This is the description</p>
   </sqm-form-message>
 );
+
+export const Loading = () => {
+  return (
+    <sqm-form-message type="success" loading="true">
+      <p part="alert-title">This is the title</p>
+      <p part="alert-description">This is the description</p>
+    </sqm-form-message>
+  );
+};
diff --git a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
index e00a34e5de..15f276963f 100644
--- a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
+++ b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
@@ -69,3 +69,14 @@ sl-alert::part(base) {
 ::slotted(*[part="erroralert-text"]) {
   font-size: 14px;
 }
+
+.skeleton {
+  height: 90px;
+  width: 100%;
+  border-radius: var(--sqm-border-radius-normal);
+}
+
+.skeleton::part(indicator) {
+  --sheen-color: green !important;
+  border-radius: var(--sqm-border-radius-normal);
+}
diff --git a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
index a985016539..638554c657 100644
--- a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
@@ -20,6 +20,13 @@ export class FormMessage {
    * @uiName Alert type
    */
   @Prop() type: string;
+
+  /**
+   * Loading state for the alert.
+   *
+   * @uiName Loading
+   */
+  @Prop() loading: string;
   /**
    * Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon
    *
@@ -39,6 +46,10 @@ export class FormMessage {
   disconnectedCallback() {}
 
   render() {
+    if (this.loading) {
+      return <sl-skeleton class="skeleton"></sl-skeleton>;
+    }
+
     if (this.type === "error") {
       return (
         <sl-alert
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
index 35c8ef7082..108c138034 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
@@ -221,9 +221,20 @@ export function WidgetEmailVerificationView(
   const renderLoadingSkeleton = () => {
     return (
       <div class={sheet.classes.Wrapper}>
+        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
+        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
         <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
         <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
         <sl-skeleton class={sheet.classes.SkeletonThree}></sl-skeleton>
+        <sl-button
+          submit
+          class={sheet.classes.ContinueButton}
+          loading={true}
+          exportparts="base: primarybutton-base"
+          type="primary"
+        >
+          {text.sendCodeText}
+        </sl-button>
       </div>
     );
   };

From ddd68f6043ba808b27c52f3aab3cebb1d8289dff Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 09:44:25 -0800
Subject: [PATCH 05/18] Add re-usable skeleton component

---
 packages/mint-components/src/components.d.ts  | 29 ++++++++++
 .../sqm-skeleton/Skeleton.stories.tsx         | 37 +++++++++++++
 .../components/sqm-skeleton/sqm-skeleton.tsx  | 53 +++++++++++++++++++
 .../sqm-stencilbook/sqm-stencilbook.tsx       |  2 +
 packages/mint-components/src/global/styles.ts |  3 +-
 5 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
 create mode 100644 packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 5b62331585..d9396adcdc 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -4889,6 +4889,16 @@ export namespace Components {
          */
         "tooltiptext": string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -7543,6 +7553,12 @@ declare global {
         prototype: HTMLSqmShareLinkElement;
         new (): HTMLSqmShareLinkElement;
     };
+    interface HTMLSqmSkeletonElement extends Components.SqmSkeleton, HTMLStencilElement {
+    }
+    var HTMLSqmSkeletonElement: {
+        prototype: HTMLSqmSkeletonElement;
+        new (): HTMLSqmSkeletonElement;
+    };
     interface HTMLSqmStatContainerElement extends Components.SqmStatContainer, HTMLStencilElement {
     }
     var HTMLSqmStatContainerElement: {
@@ -7761,6 +7777,7 @@ declare global {
         "sqm-share-button": HTMLSqmShareButtonElement;
         "sqm-share-code": HTMLSqmShareCodeElement;
         "sqm-share-link": HTMLSqmShareLinkElement;
+        "sqm-skeleton": HTMLSqmSkeletonElement;
         "sqm-stat-container": HTMLSqmStatContainerElement;
         "sqm-stencilbook": HTMLSqmStencilbookElement;
         "sqm-tab": HTMLSqmTabElement;
@@ -12581,6 +12598,16 @@ declare namespace LocalJSX {
          */
         "tooltiptext"?: string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -14688,6 +14715,7 @@ declare namespace LocalJSX {
         "sqm-share-button": SqmShareButton;
         "sqm-share-code": SqmShareCode;
         "sqm-share-link": SqmShareLink;
+        "sqm-skeleton": SqmSkeleton;
         "sqm-stat-container": SqmStatContainer;
         "sqm-stencilbook": SqmStencilbook;
         "sqm-tab": SqmTab;
@@ -14821,6 +14849,7 @@ declare module "@stencil/core" {
             "sqm-share-button": LocalJSX.SqmShareButton & JSXBase.HTMLAttributes<HTMLSqmShareButtonElement>;
             "sqm-share-code": LocalJSX.SqmShareCode & JSXBase.HTMLAttributes<HTMLSqmShareCodeElement>;
             "sqm-share-link": LocalJSX.SqmShareLink & JSXBase.HTMLAttributes<HTMLSqmShareLinkElement>;
+            "sqm-skeleton": LocalJSX.SqmSkeleton & JSXBase.HTMLAttributes<HTMLSqmSkeletonElement>;
             "sqm-stat-container": LocalJSX.SqmStatContainer & JSXBase.HTMLAttributes<HTMLSqmStatContainerElement>;
             "sqm-stencilbook": LocalJSX.SqmStencilbook & JSXBase.HTMLAttributes<HTMLSqmStencilbookElement>;
             "sqm-tab": LocalJSX.SqmTab & JSXBase.HTMLAttributes<HTMLSqmTabElement>;
diff --git a/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
new file mode 100644
index 0000000000..a555c05bf1
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+
+export default {
+  title: "Components/Skeleton",
+};
+
+export const Default = () => {
+  return <sqm-skeleton></sqm-skeleton>;
+};
+
+export const CustomWidth = () => {
+  return <sqm-skeleton width="100px"></sqm-skeleton>;
+};
+
+export const CustomHeight = () => {
+  return <sqm-skeleton height="100px"></sqm-skeleton>;
+};
+
+export const CustomWidthAndHeight = () => {
+  return <sqm-skeleton width="150px" height="50px"></sqm-skeleton>;
+};
+
+export const CustomColors = () => {
+  return (
+    <div>
+      <style>
+        {`
+          sqm-skeleton::part(indicator) {
+            --sheen-color: red;
+            --color: blue;
+          }
+        `}
+      </style>
+      <sqm-skeleton></sqm-skeleton>
+    </div>
+  );
+};
diff --git a/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
new file mode 100644
index 0000000000..c366f157de
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
@@ -0,0 +1,53 @@
+import { h, Component, State, Prop, Host } from "@stencil/core";
+
+@Component({
+  tag: "sqm-skeleton",
+  shadow: true,
+})
+export class Skeleton {
+  @State()
+  ignored = true;
+
+  /**
+   * @uiName Height (in pixels or %)
+   */
+  @Prop() height?: string = "100%";
+
+  /**
+   * @uiName Width (in pixels or %)
+   */
+  @Prop() width?: string = "100%";
+
+  disconnectedCallback() {}
+
+  vanillaStyle = `
+  sl-skeleton::part(indicator) {
+    --sheen-color: var(--sqm-skeleton-animation-background);
+    --color: var(--sqm-skeleton-background);
+    border-radius: var(--sqm-border-radius-normal);
+  }
+
+  sl-skeleton::part(base) {
+    height:${this.height};
+    width:${this.width};
+  }
+
+  :host{
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+  `;
+  render() {
+    console.log("This is the height", this.height);
+
+    return (
+      <div>
+        <style type="text/css">{this.vanillaStyle}</style>
+        <sl-skeleton></sl-skeleton>
+      </div>
+    );
+  }
+}
diff --git a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
index 760b0e0b5f..caca8b60f8 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
+++ b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx
@@ -101,6 +101,7 @@ import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
 import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
 import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
+import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
@@ -207,6 +208,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
 ];
 
 /**
diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts
index 38637a4ead..ba7373f999 100644
--- a/packages/mint-components/src/global/styles.ts
+++ b/packages/mint-components/src/global/styles.ts
@@ -586,7 +586,8 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(240, 4%, 91%);
+  --sqm-skeleton-background: hsl(141 0% 70%);
+  --sqm-skeleton-animation-background: hsl(120, 0%,95%);
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };

From 274c80b06e51fc498a7c7e899b5e445330b6361b Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 10:46:56 -0800
Subject: [PATCH 06/18] Pass loading prop to form-message instances

---
 packages/mint-components/src/components.d.ts  |  4 +-
 .../sqm-edit-profile-view.tsx                 |  6 ++-
 .../sqm-form-message/FormMessage.stories.tsx  |  2 +-
 .../sqm-form-message/sqm-form-message.scss    | 11 -----
 .../sqm-form-message/sqm-form-message.tsx     |  4 +-
 .../sqm-lead-form/sqm-lead-form-view.tsx      | 44 +++++++++----------
 .../PortalEmailVerification.stories.tsx       |  3 +-
 .../sqm-portal-email-verification-view.tsx    | 16 +++----
 .../sqm-skeleton/Skeleton.stories.tsx         | 16 -------
 .../sqm-email-verification-view.tsx           | 10 ++---
 .../sqm-indirect-tax-form-view.tsx            |  2 +-
 .../sqm-payout-status-alert-view.tsx          | 10 +----
 .../sqm-tax-and-cash-dashboard-view.tsx       |  1 +
 .../sqm-user-info-form-view.tsx               |  2 +-
 packages/mint-components/src/global/styles.ts |  4 +-
 15 files changed, 51 insertions(+), 84 deletions(-)

diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index d9396adcdc..4b93eb1e09 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -989,7 +989,7 @@ export namespace Components {
           * Loading state for the alert.
           * @uiName Loading
          */
-        "loading": string;
+        "loading": boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -8727,7 +8727,7 @@ declare namespace LocalJSX {
           * Loading state for the alert.
           * @uiName Loading
          */
-        "loading"?: string;
+        "loading"?: boolean;
         /**
           * Render the alert with transparent styles
          */
diff --git a/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx b/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
index 0c9682dfc4..5fa944ce00 100644
--- a/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
+++ b/packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx
@@ -61,7 +61,11 @@ const EditProfileView = (props: EditProfileViewProps) => {
         <form class="FormWrapper" onSubmit={callbacks.onSubmit}>
           <div class="FormSection">
             {states.formState.error && (
-              <sqm-form-message type="error" exportparts="erroralert-icon">
+              <sqm-form-message
+                loading={states.loading}
+                type="error"
+                exportparts="erroralert-icon"
+              >
                 <div part="erroralert-text">{states.formState.error}</div>
               </sqm-form-message>
             )}
diff --git a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
index 01e5bb4f86..79d4a41b43 100644
--- a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx
@@ -72,7 +72,7 @@ export const InfoAlertTransparent = () => (
 
 export const Loading = () => {
   return (
-    <sqm-form-message type="success" loading="true">
+    <sqm-form-message type="success" loading={true}>
       <p part="alert-title">This is the title</p>
       <p part="alert-description">This is the description</p>
     </sqm-form-message>
diff --git a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
index 15f276963f..e00a34e5de 100644
--- a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
+++ b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.scss
@@ -69,14 +69,3 @@ sl-alert::part(base) {
 ::slotted(*[part="erroralert-text"]) {
   font-size: 14px;
 }
-
-.skeleton {
-  height: 90px;
-  width: 100%;
-  border-radius: var(--sqm-border-radius-normal);
-}
-
-.skeleton::part(indicator) {
-  --sheen-color: green !important;
-  border-radius: var(--sqm-border-radius-normal);
-}
diff --git a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
index 638554c657..20298c3b10 100644
--- a/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
+++ b/packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx
@@ -26,7 +26,7 @@ export class FormMessage {
    *
    * @uiName Loading
    */
-  @Prop() loading: string;
+  @Prop() loading: boolean = false;
   /**
    * Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon
    *
@@ -47,7 +47,7 @@ export class FormMessage {
 
   render() {
     if (this.loading) {
-      return <sl-skeleton class="skeleton"></sl-skeleton>;
+      return <sqm-skeleton height="90px" width="100%"></sqm-skeleton>;
     }
 
     if (this.type === "error") {
diff --git a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
index 8c55b69851..28b9fddf39 100644
--- a/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
+++ b/packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx
@@ -137,7 +137,7 @@ export function LeadFormView(props: LeadFormViewProps) {
             {styleString}
           </style>
           <TextSpanView type="h3">{content.pageLabel}</TextSpanView>
-          <sqm-form-message exportparts="success-icon">
+          <sqm-form-message loading={states.loading} exportparts="success-icon">
             <b>{content.submitSuccessHeader}</b>
             <br />
             <div part="successalert-text">
@@ -174,29 +174,27 @@ export function LeadFormView(props: LeadFormViewProps) {
           {states.error && (
             <sl-alert
               exportparts="base: alert-base, icon:alert-icon"
-              type="danger"
-              class={sheet.classes.ErrorAlertContainer}
-              open
+              type="error"
             >
-              <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
-              <b>{content.submitErrorHeader}</b>
-              <br />
-              {intl.formatMessage(
-                {
-                  id: "submitErrorDescription",
-                  defaultMessage: content.submitErrorDescription,
-                },
-                {
-                  supportLink: (
-                    <a
-                      target="_blank"
-                      href={`mailto:advocate-support@impact.com`}
-                    >
-                      {content.supportLinkText}
-                    </a>
-                  ),
-                }
-              )}
+              <p part="alert-title">{content.submitErrorHeader}</p>
+              <p part="alert-text">
+                {intl.formatMessage(
+                  {
+                    id: "submitErrorDescription",
+                    defaultMessage: content.submitErrorDescription,
+                  },
+                  {
+                    supportLink: (
+                      <a
+                        target="_blank"
+                        href={`mailto:advocate-support@impact.com`}
+                      >
+                        {content.supportLinkText}
+                      </a>
+                    ),
+                  }
+                )}
+              </p>
             </sl-alert>
           )}
           <div class={sheet.classes.NameFieldWrapper}>
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx b/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
index a732036c02..ac2ed7888d 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/PortalEmailVerification.stories.tsx
@@ -16,7 +16,7 @@ const defaultCallbacks = {
   submit: async (e) => await e,
 };
 
-const defaultContent = {
+const defaultContent: PortalEmailVerificationViewProps["content"] = {
   email: "email@example.com",
   verifyMessage:
     "A verification email was sent to {email}. Please verify your email to continue to the portal.",
@@ -24,6 +24,7 @@ const defaultContent = {
   resendEmailButtonText: "Re-send Email",
   verificationStatusMessage: "Checking verification status in {countdown}",
   verificationLoadingMessage: "Checking verification status",
+  verificationResentMessage: "Verification email resent to {email}",
 };
 
 const defaultStates = {
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
index 2694878e82..0230c70337 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/sqm-portal-email-verification-view.tsx
@@ -41,7 +41,7 @@ const style = {
   },
   ButtonLinkLoading: {
     fontSize: "14px",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     opacity: "0.6",
     display: "inline-block !important",
     textDecoration: "underline",
@@ -114,7 +114,7 @@ export function PortalEmailVerificationView(
           )}
         </TextSpanView>
         {
-          <p style={{ color: "var(--sl-color-gray-500)", fontSize: "14px" }}>
+          <p style={{ color: "var(--sqm-text-subdued)", fontSize: "14px" }}>
             {intl.formatMessage(
               {
                 id: `verificationStatus`,
@@ -132,16 +132,14 @@ export function PortalEmailVerificationView(
             )}
           </p>
         }
-        <a
-          class={
-            states.loading
-              ? sheet.classes.ButtonLinkLoading
-              : sheet.classes.ButtonLink
-          }
+        <sl-button
+          type="primary"
+          exportparts="base: primarybutton-base"
           onClick={callbacks.submit}
+          loading={states.loading}
         >
           {resendEmailButtonText}
-        </a>
+        </sl-button>
       </sl-form>
     </div>
   );
diff --git a/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
index a555c05bf1..0a50d305a6 100644
--- a/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
+++ b/packages/mint-components/src/components/sqm-skeleton/Skeleton.stories.tsx
@@ -19,19 +19,3 @@ export const CustomHeight = () => {
 export const CustomWidthAndHeight = () => {
   return <sqm-skeleton width="150px" height="50px"></sqm-skeleton>;
 };
-
-export const CustomColors = () => {
-  return (
-    <div>
-      <style>
-        {`
-          sqm-skeleton::part(indicator) {
-            --sheen-color: red;
-            --color: blue;
-          }
-        `}
-      </style>
-      <sqm-skeleton></sqm-skeleton>
-    </div>
-  );
-};
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
index 108c138034..ce8d1b7735 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.tsx
@@ -221,11 +221,11 @@ export function WidgetEmailVerificationView(
   const renderLoadingSkeleton = () => {
     return (
       <div class={sheet.classes.Wrapper}>
-        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.SkeletonThree}></sl-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="16px" width="50%"></sqm-skeleton>
+        <sqm-skeleton height="34px" width="30%"></sqm-skeleton>
+        <sqm-skeleton height="24px" width="15%"></sqm-skeleton>
         <sl-button
           submit
           class={sheet.classes.ContinueButton}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
index b50e2fa835..f97bfc7747 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx
@@ -272,7 +272,7 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => {
           </sqm-form-message>
         )}
         {states.isPartner && (
-          <sqm-form-message type="info">
+          <sqm-form-message loading={states.loading} type="info">
             <p part="alert-title">{text.isPartnerAlertHeader}</p>
             {intl.formatMessage(
               {
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
index df36ca33c6..ef8b58c715 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
@@ -51,10 +51,6 @@ export interface PayoutStatusAlertViewProps {
 }
 
 const style = {
-  SkeletonOne: {
-    width: "50%",
-    height: "16px",
-  },
   AlertDescriptionText: {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
@@ -337,10 +333,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     }
   }
 
-  if (states.loading) {
-    return <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>;
-  }
-
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return <div></div>;
@@ -350,7 +342,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     <div part="sqm-base">
       <style type="text/css">{styleString}</style>
       <style type="text/css">{vanillaStyle}</style>
-      <sqm-form-message type={alertDetails.alertType}>
+      <sqm-form-message loading={states.loading} type={alertDetails.alertType}>
         <p part="alert-title">{alertDetails.header}</p>
         <p part="alert-description">{alertDetails.description}</p>
         {getButton(states.status)}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
index 31393007a1..2103b7fcf5 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
@@ -756,6 +756,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
         )}
         {alertInfo && (
           <sqm-form-message
+            loading={states.loading}
             exportparts="base: alert-base, icon:alert-icon"
             type={alertInfo?.alertType}
             class={alertInfo?.class}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
index f85ee0f088..777457dc86 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx
@@ -516,7 +516,7 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {
           )}
 
           {(states.isPartner || states.isUser) && (
-            <sqm-form-message type="info">
+            <sqm-form-message loading={states.loading} type="info">
               <p part="alert-title">{text.isPartnerAlertHeader}</p>
               <p part="alert-description">
                 {intl.formatMessage(
diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts
index ba7373f999..37c314a293 100644
--- a/packages/mint-components/src/global/styles.ts
+++ b/packages/mint-components/src/global/styles.ts
@@ -586,8 +586,8 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(141 0% 70%);
-  --sqm-skeleton-animation-background: hsl(120, 0%,95%);
+  --sqm-skeleton-background: hsl(240 5.9% 90%);
+  --sqm-skeleton-animation-background: hsl(240 4.8% 95.9%);
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };

From 4b50160f1ee5c9a6a791ce9f945d9d48ec265c2a Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 11:49:58 -0800
Subject: [PATCH 07/18] Re build after merge

---
 .../src/components/sqm-coupon-code/readme.md  |  1 +
 .../src/components/sqm-edit-profile/readme.md |  1 +
 .../src/components/sqm-form-message/readme.md |  6 ++++
 .../sqm-instant-access-registration/readme.md |  1 +
 .../sqm-portal-change-marketing/readme.md     |  1 +
 .../sqm-portal-change-password/readme.md      |  1 +
 .../sqm-portal-email-verification/readme.md   |  1 +
 .../sqm-portal-forgot-password/readme.md      |  1 +
 .../sqm-portal-google-login/readme.md         |  1 +
 .../readme.md                                 |  1 +
 .../src/components/sqm-portal-login/readme.md |  1 +
 .../components/sqm-portal-profile/readme.md   |  1 +
 .../components/sqm-portal-register/readme.md  |  1 +
 .../sqm-portal-registration-form/readme.md    |  1 +
 .../sqm-portal-reset-password/readme.md       |  1 +
 .../sqm-portal-verify-email/readme.md         |  1 +
 .../src/components/sqm-qr-code/readme.md      |  1 +
 .../sqm-referred-registration/readme.md       |  1 +
 .../src/components/sqm-skeleton/readme.md     | 35 +++++++++++++++++++
 .../src/components/sqm-stencilbook/readme.md  |  4 +++
 .../sqm-code-verification/readme.md           |  1 +
 .../sqm-email-verification/readme.md          |  3 ++
 .../sqm-banking-info-form/readme.md           |  1 +
 .../tax-and-cash/sqm-docusign-form/readme.md  |  1 +
 .../sqm-indirect-tax-form/readme.md           |  1 +
 .../sqm-payout-status-alert/readme.md         |  1 +
 .../sqm-tax-and-cash-dashboard/readme.md      |  1 +
 .../tax-and-cash/sqm-tax-and-cash/readme.md   |  1 +
 .../tax-and-cash/sqm-user-info-form/readme.md |  1 +
 29 files changed, 73 insertions(+)
 create mode 100644 packages/mint-components/src/components/sqm-skeleton/readme.md

diff --git a/packages/mint-components/src/components/sqm-coupon-code/readme.md b/packages/mint-components/src/components/sqm-coupon-code/readme.md
index 1539432b7d..9c1e88c497 100644
--- a/packages/mint-components/src/components/sqm-coupon-code/readme.md
+++ b/packages/mint-components/src/components/sqm-coupon-code/readme.md
@@ -45,6 +45,7 @@
 ```mermaid
 graph TD;
   sqm-coupon-code --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-coupon-code
   style sqm-coupon-code fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-edit-profile/readme.md b/packages/mint-components/src/components/sqm-edit-profile/readme.md
index 8f3d353967..14597103a4 100644
--- a/packages/mint-components/src/components/sqm-edit-profile/readme.md
+++ b/packages/mint-components/src/components/sqm-edit-profile/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-edit-profile --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-edit-profile
   style sqm-edit-profile fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-form-message/readme.md b/packages/mint-components/src/components/sqm-form-message/readme.md
index 4f4f94974c..c49c5aa8ec 100644
--- a/packages/mint-components/src/components/sqm-form-message/readme.md
+++ b/packages/mint-components/src/components/sqm-form-message/readme.md
@@ -8,6 +8,7 @@
 | Property      | Attribute     | Description                                                                                                            | Type      | Default     |
 | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
 | `icon`        | `icon`        | Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon | `string`  | `undefined` |
+| `loading`     | `loading`     | Loading state for the alert.                                                                                           | `boolean` | `false`     |
 | `transparent` | `transparent` | Render the alert with transparent styles                                                                               | `boolean` | `false`     |
 | `type`        | `type`        | Options include "success", "info", "warning", and "error"                                                              | `string`  | `undefined` |
 
@@ -45,9 +46,14 @@
  - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard)
  - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form)
 
+### Depends on
+
+- [sqm-skeleton](../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-form-message --> sqm-skeleton
   sqm-banking-info-form --> sqm-form-message
   sqm-code-verification --> sqm-form-message
   sqm-coupon-code --> sqm-form-message
diff --git a/packages/mint-components/src/components/sqm-instant-access-registration/readme.md b/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
index d3fc12fc8a..849754029f 100644
--- a/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
+++ b/packages/mint-components/src/components/sqm-instant-access-registration/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-instant-access-registration --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-instant-access-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
index 18667924e9..70d0af02c0 100644
--- a/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-change-marketing/readme.md
@@ -31,6 +31,7 @@
 ```mermaid
 graph TD;
   sqm-portal-change-marketing --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-change-marketing
   style sqm-portal-change-marketing fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-change-password/readme.md b/packages/mint-components/src/components/sqm-portal-change-password/readme.md
index b19c246fb2..6062e5c30c 100644
--- a/packages/mint-components/src/components/sqm-portal-change-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-change-password/readme.md
@@ -44,6 +44,7 @@
 graph TD;
   sqm-portal-change-password --> sqm-form-message
   sqm-portal-change-password --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-change-password
   style sqm-portal-change-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
index 6383c5ff5c..c9d705e380 100644
--- a/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-email-verification/readme.md
@@ -30,6 +30,7 @@
 ```mermaid
 graph TD;
   sqm-portal-email-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
index 4c39aaba57..06f52dbd61 100644
--- a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-portal-forgot-password --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-forgot-password
   style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-google-login/readme.md b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
index 4b9f37647b..2bd0a7fb5e 100644
--- a/packages/mint-components/src/components/sqm-portal-google-login/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
@@ -36,6 +36,7 @@
 graph TD;
   sqm-portal-google-login --> sqm-google-sign-in
   sqm-portal-google-login --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-google-login fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
index 777229f93b..fd5e7a7739 100644
--- a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
@@ -53,6 +53,7 @@ graph TD;
   sqm-portal-google-registration-form --> sqm-google-sign-in
   sqm-portal-google-registration-form --> sqm-form-message
   sqm-portal-google-registration-form --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-google-registration-form fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-login/readme.md b/packages/mint-components/src/components/sqm-portal-login/readme.md
index 5efab6c666..b21a35084e 100644
--- a/packages/mint-components/src/components/sqm-portal-login/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-login/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-portal-login --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-login
   style sqm-portal-login fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-profile/readme.md b/packages/mint-components/src/components/sqm-portal-profile/readme.md
index 7ffb69bedb..62db804ad1 100644
--- a/packages/mint-components/src/components/sqm-portal-profile/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-profile/readme.md
@@ -34,6 +34,7 @@
 ```mermaid
 graph TD;
   sqm-portal-profile --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-register/readme.md b/packages/mint-components/src/components/sqm-portal-register/readme.md
index cfa1aa2680..49f364a41e 100644
--- a/packages/mint-components/src/components/sqm-portal-register/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-register/readme.md
@@ -50,6 +50,7 @@
 graph TD;
   sqm-portal-register --> sqm-form-message
   sqm-portal-register --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-register
   style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-registration-form/readme.md b/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
index 5fabd259be..19ca5ffed1 100644
--- a/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-registration-form/readme.md
@@ -46,6 +46,7 @@
 graph TD;
   sqm-portal-registration-form --> sqm-form-message
   sqm-portal-registration-form --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-registration-form fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
index 87754a376f..d8c33c5b72 100644
--- a/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-reset-password/readme.md
@@ -43,6 +43,7 @@
 graph TD;
   sqm-portal-reset-password --> sqm-form-message
   sqm-portal-reset-password --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
index de05c6f176..ef0358ea14 100644
--- a/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-verify-email/readme.md
@@ -29,6 +29,7 @@
 ```mermaid
 graph TD;
   sqm-portal-verify-email --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-qr-code/readme.md b/packages/mint-components/src/components/sqm-qr-code/readme.md
index d9727eda37..6d197e1716 100644
--- a/packages/mint-components/src/components/sqm-qr-code/readme.md
+++ b/packages/mint-components/src/components/sqm-qr-code/readme.md
@@ -30,6 +30,7 @@
 ```mermaid
 graph TD;
   sqm-qr-code --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-qr-code fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-referred-registration/readme.md b/packages/mint-components/src/components/sqm-referred-registration/readme.md
index 5e895d9521..5ef204c03c 100644
--- a/packages/mint-components/src/components/sqm-referred-registration/readme.md
+++ b/packages/mint-components/src/components/sqm-referred-registration/readme.md
@@ -43,6 +43,7 @@
 ```mermaid
 graph TD;
   sqm-referred-registration --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-referred-registration
   style sqm-referred-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-skeleton/readme.md b/packages/mint-components/src/components/sqm-skeleton/readme.md
new file mode 100644
index 0000000000..c2e18fed33
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-skeleton/readme.md
@@ -0,0 +1,35 @@
+# sqm-skeleton
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default  |
+| -------- | --------- | ----------- | -------- | -------- |
+| `height` | `height`  |             | `string` | `"100%"` |
+| `width`  | `width`   |             | `string` | `"100%"` |
+
+
+## Dependencies
+
+### Used by
+
+ - [sqm-email-verification](../sqm-widget-verification/sqm-email-verification)
+ - [sqm-form-message](../sqm-form-message)
+ - [sqm-stencilbook](../sqm-stencilbook)
+
+### Graph
+```mermaid
+graph TD;
+  sqm-email-verification --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
+  sqm-stencilbook --> sqm-skeleton
+  style sqm-skeleton fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md
index 71162f8ad7..839a7b3d9a 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/readme.md
+++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md
@@ -101,6 +101,7 @@
 - [sqm-lead-input-field](../sqm-lead-form)
 - [sqm-lead-dropdown-field](../sqm-lead-form)
 - [sqm-lead-form](../sqm-lead-form)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -199,6 +200,8 @@ graph TD;
   sqm-stencilbook --> sqm-lead-input-field
   sqm-stencilbook --> sqm-lead-dropdown-field
   sqm-stencilbook --> sqm-lead-form
+  sqm-stencilbook --> sqm-skeleton
+  sqm-form-message --> sqm-skeleton
   sqm-portal-register --> sqm-form-message
   sqm-portal-register --> sqm-password-field
   sqm-coupon-code --> sqm-form-message
@@ -237,6 +240,7 @@ graph TD;
   sqm-rewards-table-status-column --> sqm-rewards-table-status-cell
   sqm-rewards-table-date-column --> sqm-rewards-table-date-cell
   sqm-code-verification --> sqm-form-message
+  sqm-email-verification --> sqm-skeleton
   sqm-email-verification --> sqm-form-message
   sqm-banking-info-form --> sqm-code-verification
   sqm-banking-info-form --> sqm-form-message
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md b/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
index 0e3b2042bf..202714151c 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-code-verification/readme.md
@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-code-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-banking-info-form --> sqm-code-verification
   sqm-stencilbook --> sqm-code-verification
   sqm-widget-verification --> sqm-code-verification
diff --git a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
index f025bea793..9f01209af6 100644
--- a/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
+++ b/packages/mint-components/src/components/sqm-widget-verification/sqm-email-verification/readme.md
@@ -28,12 +28,15 @@
 
 ### Depends on
 
+- [sqm-skeleton](../../sqm-skeleton)
 - [sqm-form-message](../../sqm-form-message)
 
 ### Graph
 ```mermaid
 graph TD;
+  sqm-email-verification --> sqm-skeleton
   sqm-email-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-email-verification
   sqm-widget-verification --> sqm-email-verification
   style sqm-email-verification fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
index 98f2fd336e..53516c5e15 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-banking-info-form/readme.md
@@ -88,6 +88,7 @@ graph TD;
   sqm-banking-info-form --> sqm-code-verification
   sqm-banking-info-form --> sqm-form-message
   sqm-code-verification --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-banking-info-form
   style sqm-banking-info-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
index fdd69dd222..d654d729c2 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/readme.md
@@ -50,6 +50,7 @@
 ```mermaid
 graph TD;
   sqm-docusign-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-docusign-form
   sqm-tax-and-cash --> sqm-docusign-form
   style sqm-docusign-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
index c76346fde8..373cb90e2e 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/readme.md
@@ -55,6 +55,7 @@
 ```mermaid
 graph TD;
   sqm-indirect-tax-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-indirect-tax-form
   sqm-tax-and-cash --> sqm-indirect-tax-form
   style sqm-indirect-tax-form fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
index 8f7a321ad3..495dac0c8d 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md
@@ -67,6 +67,7 @@
 graph TD;
   sqm-payout-status-alert --> sqm-scroll
   sqm-payout-status-alert --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-payout-status-alert
   style sqm-payout-status-alert fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
index 73005b9843..76f4f64133 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
@@ -118,6 +118,7 @@ graph TD;
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column
+  sqm-form-message --> sqm-skeleton
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
index 26ab8d6616..dac279c8fe 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
@@ -225,6 +225,7 @@ graph TD;
   sqm-tax-and-cash --> sqm-tax-and-cash-dashboard
   sqm-tax-and-cash --> sqm-form-message
   sqm-user-info-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-indirect-tax-form --> sqm-form-message
   sqm-docusign-form --> sqm-form-message
   sqm-banking-info-form --> sqm-code-verification
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
index 3a5878f76c..eef2bf702e 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
@@ -59,6 +59,7 @@
 ```mermaid
 graph TD;
   sqm-user-info-form --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-user-info-form
   sqm-tax-and-cash --> sqm-user-info-form
   style sqm-user-info-form fill:#f9f,stroke:#333,stroke-width:4px

From 4981c8e932ce5943494f50631347f134ed7fb1a3 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 11:58:53 -0800
Subject: [PATCH 08/18] Fix payout status alert buttons

---
 .../sqm-payout-status-alert-view.tsx          | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
index 902a90f952..7a2c4e0404 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
@@ -310,13 +310,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -347,13 +349,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -384,13 +388,15 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
               </sl-button>
               <sl-button
                 disabled={states.loading}
-                type="default"
+                type="secondary"
+                exportparts="base: secondarybutton-base"
                 onClick={callbacks.onNewFormClick}
               >
                 {text.newFormButton}
@@ -421,6 +427,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
@@ -451,6 +458,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
               <sl-button
                 disabled={states.loading}
                 type="primary"
+                exportparts="base: primarybutton-base"
                 onClick={callbacks.onPaymentInfoClick}
               >
                 {text.editPaymentInformationButton}
@@ -496,12 +504,18 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
             scroll-animation="smooth"
           ></sqm-scroll>
         ) : data.type === "SquatchPortal" ? (
-          <sl-button type="default" onClick={callbacks.onTermsClick}>
+          <sl-button
+            type="primary"
+            exportparts="base: primarybutton-base"
+            onClick={callbacks.onTermsClick}
+          >
             {text.w9RequiredButtonText}
           </sl-button>
         ) : (
           // Demo case
-          <sl-button type="default">{text.w9RequiredButtonText}</sl-button>
+          <sl-button type="primary" exportparts="base: primarybutton-base">
+            {text.w9RequiredButtonText}
+          </sl-button>
         );
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (

From 5298f88ada8334013af85d67e36c872bae964a03 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Wed, 19 Nov 2025 15:41:57 -0800
Subject: [PATCH 09/18] Refactor all skeletons to use standard component

---
 .../sqm-empty/EmptyState.stories.tsx          |  2 +-
 .../InvoiceTable.stories.tsx                  | 10 ++--
 .../sqm-invoice-table/sqm-invoice-table.tsx   |  2 +-
 .../sqm-leaderboard/sqm-leaderboard-view.tsx  |  2 +-
 .../sqm-qr-code/sqm-qr-code-view.tsx          | 12 +---
 .../sqm-referral-codes/sqm-referral-codes.tsx |  2 +-
 .../ReferralTable.stories.tsx                 | 10 ++--
 .../sqm-referral-table/sqm-referral-table.tsx |  2 +-
 .../sqm-reward-exchange-list-view.tsx         | 22 ++++---
 .../RewardsTable.stories.tsx                  | 10 ++--
 .../sqm-rewards-table/sqm-rewards-table.tsx   |  2 +-
 .../src/components/sqm-stencilbook/Themes.tsx | 12 ++++
 .../sqm-task-card/sqm-task-card-view.tsx      | 10 ++--
 .../sqm-payout-details-card-view.tsx          | 14 +++--
 .../sqm-tax-and-cash-dashboard-view.tsx       | 18 ++----
 .../sqm-tax-and-cash/LoadingView.tsx          | 57 +++++++++----------
 packages/mint-components/src/global/styles.ts |  8 ++-
 packages/mint-components/src/saasquatch.d.ts  |  4 ++
 .../mint-components/src/tables/TableSlots.tsx | 18 +++---
 19 files changed, 107 insertions(+), 110 deletions(-)

diff --git a/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx b/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
index b5f1da2ab1..cde9b09944 100644
--- a/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
+++ b/packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx
@@ -47,7 +47,7 @@ const defaultElements = {
           return (
             <tr>
               <td>
-                <sl-skeleton></sl-skeleton>
+                <sqm-skeleton></sqm-skeleton>
               </td>
             </tr>
           );
diff --git a/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx b/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
index 08e54c71cf..000d73a7ef 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx
@@ -18,27 +18,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx b/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
index 4ba9c1e1dc..e3e3251724 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
+++ b/packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx
@@ -150,7 +150,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
index 691447bb41..c2ea4eacfa 100644
--- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
+++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx
@@ -146,7 +146,7 @@ export function LeaderboardView(props: LeaderboardViewProps) {
             return (
               <tr>
                 <td>
-                  <sl-skeleton></sl-skeleton>
+                  <sqm-skeleton></sqm-skeleton>
                 </td>
               </tr>
             );
diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
index 40ec6c359e..73c55ce6ef 100644
--- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
+++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
@@ -107,17 +107,7 @@ export function QrCodeView({
         />
       );
     } else if (loading) {
-      return (
-        <sl-skeleton
-          className={sheet.classes.LoadingSkeleton}
-          effect="sheen"
-          style={{
-            width: "100px",
-            height: "100px",
-            borderRadius: "0px !important",
-          }}
-        ></sl-skeleton>
-      );
+      return <sqm-skeleton height="100px" width="100px"></sqm-skeleton>;
     } else if (qrLink) {
       return (
         <svg width="100" height="100">
diff --git a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
index d145823002..77dd7d796c 100644
--- a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
+++ b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx
@@ -131,7 +131,7 @@ function LoadingSlot() {
   );
 }
 function LoadingRow() {
-  return <sl-skeleton style={{ width: "100%" }}></sl-skeleton>;
+  return <sqm-skeleton></sqm-skeleton>;
 }
 
 function useDemoReferralCodes(props: ReferralCodes) {
diff --git a/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
index b39ed7a9a4..7acb343e81 100644
--- a/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx
@@ -36,27 +36,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
index c130034b21..e6b43ae5a9 100644
--- a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
@@ -137,7 +137,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
index acf39ae9e6..e59bca5156 100644
--- a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
+++ b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx
@@ -877,14 +877,13 @@ export function RewardExchangeView(props: RewardExchangeViewProps) {
               <sl-card class={sheet.classes.Card}>
                 <div class={sheet.classes.CardLayout}>
                   <div>
-                    <sl-skeleton
+                    <sqm-skeleton
                       style={{
-                        width: "100px",
-                        height: "100px",
                         margin: "9px",
-                        "--border-radius": "var(--sqm-border-radius-normal)",
                       }}
-                    ></sl-skeleton>
+                      width="100px"
+                      height="100px"
+                    ></sqm-skeleton>
                   </div>
 
                   <div
@@ -892,15 +891,14 @@ export function RewardExchangeView(props: RewardExchangeViewProps) {
                       margin:
                         "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                       width: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "var(--sl-spacing-small)",
                     }}
                   >
-                    <sl-skeleton
-                      style={{ marginBottom: "var(--sl-spacing-small)" }}
-                    ></sl-skeleton>
-                    <sl-skeleton
-                      style={{ marginBottom: "var(--sl-spacing-small)" }}
-                    ></sl-skeleton>
-                    <sl-skeleton style={{ width: "45%" }}></sl-skeleton>
+                    <sqm-skeleton></sqm-skeleton>
+                    <sqm-skeleton></sqm-skeleton>
+                    <sqm-skeleton width="45%"></sqm-skeleton>
                   </div>
                 </div>
               </sl-card>
diff --git a/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx b/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
index 026c7685a4..52c222a8c3 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/RewardsTable.stories.tsx
@@ -42,27 +42,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>
diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
index f8180e4a56..448dc40873 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
@@ -123,7 +123,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
diff --git a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
index d8f2b6512c..c5d7279eb7 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
+++ b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx
@@ -26,6 +26,10 @@ export const Netflix: BrandingConfiguration = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#272727",
+      animationBackground: "#E50914",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -118,6 +122,10 @@ export const Amazon: BrandingConfiguration = {
   },
   color: {
     backgroundColor: "#ffffff",
+    loadingSkeleton: {
+      background: "hsl(240 4.8% 95.9%)",
+      animationBackground: "#FF9900",
+    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -207,6 +215,10 @@ export const Spotify: BrandingConfiguration = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#282928",
+      animationBackground: "#1ed760",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
diff --git a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
index c0a0f1aa62..758d4820a0 100644
--- a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
+++ b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx
@@ -314,7 +314,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             style={{ opacity: taskComplete || taskUnavailable ? "0.45" : "1" }}
           >
             {states.loading ? (
-              <sl-skeleton style={{ width: "22%", margin: "0" }} />
+              <sqm-skeleton style={{ width: "22%", margin: "0" }} />
             ) : (
               <div>
                 {showComplete && (
@@ -333,7 +333,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
           </div>
 
           {states.loading ? (
-            <sl-skeleton
+            <sqm-skeleton
               style={{ width: "42%", margin: "var(--sl-spacing-medium) 0" }}
             />
           ) : (
@@ -355,7 +355,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             </div>
           )}
           {states.loading ? (
-            <sl-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
+            <sqm-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
           ) : (
             content.description && (
               <Details
@@ -365,7 +365,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             )
           )}
           {content.showProgressBar && states.loading ? (
-            <sl-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
+            <sqm-skeleton style={{ margin: "var(--sl-spacing-medium) 0" }} />
           ) : (
             content.showProgressBar && (
               <ProgressBarView
@@ -382,7 +382,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode {
             data-subdue={taskComplete || taskUnavailable}
           >
             {states.loading ? (
-              <sl-skeleton style={{ width: "25%", marginLeft: "auto" }} />
+              <sqm-skeleton style={{ width: "25%", marginLeft: "auto" }} />
             ) : (
               <div style={{ display: "contents" }}>
                 <span class="text">
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
index 6deb396346..640f3449f2 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx
@@ -174,12 +174,16 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) {
   const renderLoadingSkeleton = () => {
     return (
       <div class={classes.CardContainer}>
-        <div class={classes.StatusContainer}>
-          <sl-skeleton class={classes.SkeletonOne}></sl-skeleton>
-          <sl-skeleton class={classes.SkeletonTwo}></sl-skeleton>
+        <div class={classes.StatusContainer} style={{ display: "block" }}>
+          <sqm-skeleton
+            style={{ marginBottom: "var(--sl-spacing-medium)" }}
+            width="25%"
+            height="16px"
+          ></sqm-skeleton>
+          <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
         </div>
-        <sl-skeleton class={classes.SkeletonThree}></sl-skeleton>
-        <sl-skeleton class={classes.SkeletonOne}></sl-skeleton>
+        <sqm-skeleton width="50%" height="34px"></sqm-skeleton>
+        <sqm-skeleton width="25%" height="16px"></sqm-skeleton>
       </div>
     );
   };
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
index 97e9e03b88..a505ac5c86 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx
@@ -239,16 +239,6 @@ const style = {
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
   },
-  SkeletonOne: {
-    width: "15%",
-    height: "10px",
-  },
-  SkeletonTwo: {
-    width: "25%",
-    height: "24px",
-    top: "var(--sl-spacing-small)",
-    marginBottom: "var(--sl-spacing-x-small)",
-  },
   TaxSectionSkeletonContainer: {
     display: "flex",
     flexDirection: "column",
@@ -1056,8 +1046,8 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
             <div>
               {states.loading ? (
                 <div class={sheet.classes.TaxSectionSkeletonContainer}>
-                  <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-                  <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
+                  <sqm-skeleton width="15%" height="10px"></sqm-skeleton>
+                  <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
                 </div>
               ) : (
                 <div>
@@ -1102,8 +1092,8 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
         <div class={sheet.classes.IndirectTaxPreviewContainer}>
           {states.loading ? (
             <div class={sheet.classes.TaxSectionSkeletonContainer}>
-              <sl-skeleton class={sheet.classes.SkeletonOne}></sl-skeleton>
-              <sl-skeleton class={sheet.classes.SkeletonTwo}></sl-skeleton>
+              <sqm-skeleton width="15%" height="10px"></sqm-skeleton>
+              <sqm-skeleton width="25%" height="24px"></sqm-skeleton>
             </div>
           ) : (
             <div>
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
index 32d41db753..23fbb27dd1 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/LoadingView.tsx
@@ -5,32 +5,14 @@ const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "24px",
+    gap: "35px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
-
-  TitleSkeleton: {
-    width: "45%",
-    height: "40px !important",
-  },
-  StepSkeleton: {
-    width: "15%",
-  },
-  HeaderSkeleton: {
-    width: "25%",
-    height: "30px !important",
-  },
-  InputSkeleton: {
-    width: "75%",
-  },
-  ButtonSkeleton: {
-    width: "80px",
-    height: "30px !important",
-  },
+  // Skeleton styles removed as they are now inlined props
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
@@ -39,18 +21,33 @@ const LoadingView = () => {
   return (
     <div class={sheet.classes.Container}>
       <style type="text/css">{styleString}</style>
-      <sl-skeleton class={sheet.classes.TitleSkeleton}></sl-skeleton>
+      {/* TitleSkeleton */}
+      <sqm-skeleton width="45%" height="40px !important"></sqm-skeleton>
+
       <div class={sheet.classes.HeaderContainer}>
-        <sl-skeleton class={sheet.classes.StepSkeleton}></sl-skeleton>
-        <sl-skeleton class={sheet.classes.HeaderSkeleton}></sl-skeleton>
+        {/* StepSkeleton */}
+        <sqm-skeleton width="15%"></sqm-skeleton>
+        {/* HeaderSkeleton */}
+        <sqm-skeleton width="25%" height="30px !important"></sqm-skeleton>
       </div>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.InputSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.StepSkeleton}></sl-skeleton>
-      <sl-skeleton class={sheet.classes.ButtonSkeleton}></sl-skeleton>
+
+      {/* InputSkeletons */}
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+      <sqm-skeleton width="75%" height="35px"></sqm-skeleton>
+
+      {/* StepSkeleton */}
+      <sqm-skeleton width="15%"></sqm-skeleton>
+      {/* ButtonSkeleton */}
+      <sqm-skeleton width="80px" height="30px !important"></sqm-skeleton>
     </div>
   );
 };
diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts
index 37c314a293..4db1f82edf 100644
--- a/packages/mint-components/src/global/styles.ts
+++ b/packages/mint-components/src/global/styles.ts
@@ -586,8 +586,12 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
-  --sqm-skeleton-background: hsl(240 5.9% 90%);
-  --sqm-skeleton-animation-background: hsl(240 4.8% 95.9%);
+  --sqm-skeleton-background: ${
+    config?.color?.loadingSkeleton?.background || "hsl(240 5.9% 90%)"
+  };
+  --sqm-skeleton-animation-background: ${
+    config?.color?.loadingSkeleton?.animationBackground || "hsl(240 4.8% 95.9%)"
+  };
   --sqm-text: ${
     config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)"
   };
diff --git a/packages/mint-components/src/saasquatch.d.ts b/packages/mint-components/src/saasquatch.d.ts
index 77d06a0da5..c66ea758b6 100644
--- a/packages/mint-components/src/saasquatch.d.ts
+++ b/packages/mint-components/src/saasquatch.d.ts
@@ -216,6 +216,10 @@ export interface BrandingConfiguration {
   };
   color?: {
     backgroundColor?: string;
+    loadingSkeleton?: {
+      background?: string;
+      animationBackground?: string;
+    };
     textColorShades?: {
       mainText: string;
       subduedText: string;
diff --git a/packages/mint-components/src/tables/TableSlots.tsx b/packages/mint-components/src/tables/TableSlots.tsx
index 4789795804..8161542c35 100644
--- a/packages/mint-components/src/tables/TableSlots.tsx
+++ b/packages/mint-components/src/tables/TableSlots.tsx
@@ -1,7 +1,5 @@
 import { h } from "@stencil/core";
 
-
-
 export function LoadingSlot() {
   return (
     <slot name="loading">
@@ -16,7 +14,7 @@ export function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={5}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );
@@ -25,22 +23,22 @@ export function LoadingRow() {
 export function LoadingSkeleton() {
   return (
     <div style={{ width: "100%" }}>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton style={{ marginBottom: "28px" }}></sl-skeleton>
-      <sl-skeleton></sl-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton style={{ marginBottom: "28px" }}></sqm-skeleton>
+      <sqm-skeleton></sqm-skeleton>
     </div>
   );
 }
-export function EmptySlot({ label }: { label: string; }) {
+export function EmptySlot({ label }: { label: string }) {
   return (
     <slot name="empty">
       <EmptySkeleton label={label} />
     </slot>
   );
 }
-export function EmptySkeleton({ label }: { label: string; }) {
+export function EmptySkeleton({ label }: { label: string }) {
   return (
     <div style={{ width: "100%" }}>
       <sqm-text>

From d99a9a03ed82773f148cc64be334e80edd695a18 Mon Sep 17 00:00:00 2001
From: Sam Beveridge <sam.beveridge@impact.com>
Date: Wed, 19 Nov 2025 16:38:01 -0800
Subject: [PATCH 10/18] fiddling with bundling

---
 packages/bedrock-components/package.json      |  2 +-
 packages/bedrock-components/stencil.config.ts | 35 ++++++++++---------
 packages/mint-components/package.json         |  2 +-
 packages/mint-components/stencil.config.ts    | 10 ++++++
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/bedrock-components/package.json b/packages/bedrock-components/package.json
index cff1eadb4a..6f6dd75899 100644
--- a/packages/bedrock-components/package.json
+++ b/packages/bedrock-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/bedrock-components",
   "title": "Bedrock Components",
-  "version": "1.5.0",
+  "version": "1.5.2-0",
   "description": "Component library that adds advanced logic to your widgets and pages. Built and maintained by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Bedrock.svg",
   "main": "dist/index.cjs.js",
diff --git a/packages/bedrock-components/stencil.config.ts b/packages/bedrock-components/stencil.config.ts
index c7b42e6a49..39f3bb8888 100644
--- a/packages/bedrock-components/stencil.config.ts
+++ b/packages/bedrock-components/stencil.config.ts
@@ -1,43 +1,44 @@
-import { Config } from '@stencil/core';
-import alias from '@rollup/plugin-alias';
-import { grapesJsOutput } from '@saasquatch/stencil-grapes-plugin';
-import { OutputTarget } from '@stencil/core/internal';
-import { string } from 'rollup-plugin-string';
-import path from 'path';
-import plugin from '@raisins/stencil-docs-target';
+import { Config } from "@stencil/core";
+import alias from "@rollup/plugin-alias";
+import { grapesJsOutput } from "@saasquatch/stencil-grapes-plugin";
+import { OutputTarget } from "@stencil/core/internal";
+import { string } from "rollup-plugin-string";
+import path from "path";
+import plugin from "@raisins/stencil-docs-target";
 
 const useGrapesjs: OutputTarget = grapesJsOutput({
-  outDir: 'grapesjs',
+  outDir: "grapesjs",
 });
 
 export const config: Config = {
-  namespace: 'bedrock-components',
+  namespace: "bedrock-components",
   buildEs5: true,
-  globalScript: 'src/global/global.ts',
+  globalScript: "src/global/global.ts",
+  hydratedFlag: null,
   outputTargets: [
     {
-      type: 'dist',
+      type: "dist",
     },
     {
-      type: 'docs-readme',
+      type: "docs-readme",
     },
     {
-      type: 'www',
+      type: "www",
       serviceWorker: null, // disable service workers
     },
     useGrapesjs,
     plugin({
-      outDir: 'docs',
+      outDir: "docs",
     }),
   ],
-  plugins: [string({ include: '**/*.feature' })],
+  plugins: [string({ include: "**/*.feature" })],
   rollupPlugins: {
     before: [
       alias({
         entries: [
           {
-            find: '@saasquatch/universal-hooks',
-            replacement: path.resolve(__dirname, 'node_modules', '@saasquatch/stencil-hooks'),
+            find: "@saasquatch/universal-hooks",
+            replacement: path.resolve(__dirname, "node_modules", "@saasquatch/stencil-hooks"),
           },
         ],
       }),
diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 8168f8ad79..a3a865e725 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.5-1",
+  "version": "2.0.5-2",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
diff --git a/packages/mint-components/stencil.config.ts b/packages/mint-components/stencil.config.ts
index 23af5abfb0..178a442236 100644
--- a/packages/mint-components/stencil.config.ts
+++ b/packages/mint-components/stencil.config.ts
@@ -73,6 +73,16 @@ export const config: Config = {
     {
       components: ["sqm-referral-code", "sqm-referral-codes", "sqm-pagination"],
     },
+    {
+      components: [
+        "sqm-portal-login",
+        "sqm-portal-register",
+        "sqm-portal-registration-form",
+        "sqm-portal-forgot-password",
+        "sqm-portal-verify-email",
+        "sqm-portal-google-login",
+      ],
+    },
   ],
   outputTargets:
     //@ts-ignore

From 7fecfd4537a2ecf83236567276687d9b87c8a00f Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Thu, 20 Nov 2025 15:50:28 -0800
Subject: [PATCH 11/18] Publish new pre release

---
 packages/mint-components/package.json         |  2 +-
 .../components/sqm-invoice-table/readme.md    |  2 ++
 .../src/components/sqm-leaderboard/readme.md  |  2 ++
 .../src/components/sqm-qr-code/readme.md      |  2 ++
 .../components/sqm-referral-codes/readme.md   |  2 ++
 .../components/sqm-referral-table/readme.md   |  2 ++
 .../sqm-reward-exchange-list/readme.md        |  2 ++
 .../components/sqm-rewards-table/readme.md    |  2 ++
 .../src/components/sqm-skeleton/readme.md     | 24 +++++++++++++++++++
 .../src/components/sqm-stencilbook/readme.md  | 15 ++++++++++--
 .../src/components/sqm-task-card/readme.md    |  5 ++++
 .../sqm-payout-details-card/readme.md         |  5 ++++
 .../sqm-payout-status-alert-view.tsx          |  2 +-
 .../sqm-tax-and-cash-dashboard/readme.md      |  4 ++++
 .../tax-and-cash/sqm-tax-and-cash/readme.md   |  6 +++++
 .../tax-and-cash/sqm-user-info-form/readme.md |  2 ++
 16 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 7c75c9a70f..72033492f6 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.3",
+  "version": "2.0.4-9",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
diff --git a/packages/mint-components/src/components/sqm-invoice-table/readme.md b/packages/mint-components/src/components/sqm-invoice-table/readme.md
index 06117e376d..7cd1bec240 100644
--- a/packages/mint-components/src/components/sqm-invoice-table/readme.md
+++ b/packages/mint-components/src/components/sqm-invoice-table/readme.md
@@ -36,6 +36,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -43,6 +44,7 @@ graph TD;
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-leaderboard/readme.md b/packages/mint-components/src/components/sqm-leaderboard/readme.md
index d0d038b1e9..6661bb94be 100644
--- a/packages/mint-components/src/components/sqm-leaderboard/readme.md
+++ b/packages/mint-components/src/components/sqm-leaderboard/readme.md
@@ -42,11 +42,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-leaderboard --> sqm-empty
+  sqm-leaderboard --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-qr-code/readme.md b/packages/mint-components/src/components/sqm-qr-code/readme.md
index 6d197e1716..0214bf9d64 100644
--- a/packages/mint-components/src/components/sqm-qr-code/readme.md
+++ b/packages/mint-components/src/components/sqm-qr-code/readme.md
@@ -24,11 +24,13 @@
 
 ### Depends on
 
+- [sqm-skeleton](../sqm-skeleton)
 - [sqm-form-message](../sqm-form-message)
 
 ### Graph
 ```mermaid
 graph TD;
+  sqm-qr-code --> sqm-skeleton
   sqm-qr-code --> sqm-form-message
   sqm-form-message --> sqm-skeleton
   style sqm-qr-code fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/sqm-referral-codes/readme.md b/packages/mint-components/src/components/sqm-referral-codes/readme.md
index 91b60cec83..e059cf3119 100644
--- a/packages/mint-components/src/components/sqm-referral-codes/readme.md
+++ b/packages/mint-components/src/components/sqm-referral-codes/readme.md
@@ -27,11 +27,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-referral-codes --> sqm-empty
+  sqm-referral-codes --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-referral-table/readme.md b/packages/mint-components/src/components/sqm-referral-table/readme.md
index 8ec5c88d29..326ddf114f 100644
--- a/packages/mint-components/src/components/sqm-referral-table/readme.md
+++ b/packages/mint-components/src/components/sqm-referral-table/readme.md
@@ -32,6 +32,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -39,6 +40,7 @@ graph TD;
   sqm-referral-table --> sqm-empty
   sqm-referral-table --> sqm-table-row
   sqm-referral-table --> sqm-table-cell
+  sqm-referral-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md b/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
index c520cd9670..fe0c030c22 100644
--- a/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
+++ b/packages/mint-components/src/components/sqm-reward-exchange-list/readme.md
@@ -47,11 +47,13 @@
 ### Depends on
 
 - [sqm-empty](../sqm-empty)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-reward-exchange-list --> sqm-empty
+  sqm-reward-exchange-list --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-rewards-table/readme.md b/packages/mint-components/src/components/sqm-rewards-table/readme.md
index 16f7062f3c..2aca999959 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/readme.md
+++ b/packages/mint-components/src/components/sqm-rewards-table/readme.md
@@ -31,6 +31,7 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -38,6 +39,7 @@ graph TD;
   sqm-rewards-table --> sqm-empty
   sqm-rewards-table --> sqm-table-row
   sqm-rewards-table --> sqm-table-cell
+  sqm-rewards-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/sqm-skeleton/readme.md b/packages/mint-components/src/components/sqm-skeleton/readme.md
index c2e18fed33..935e7c0455 100644
--- a/packages/mint-components/src/components/sqm-skeleton/readme.md
+++ b/packages/mint-components/src/components/sqm-skeleton/readme.md
@@ -19,14 +19,38 @@
 
  - [sqm-email-verification](../sqm-widget-verification/sqm-email-verification)
  - [sqm-form-message](../sqm-form-message)
+ - [sqm-invoice-table](../sqm-invoice-table)
+ - [sqm-leaderboard](../sqm-leaderboard)
+ - [sqm-payout-details-card](../tax-and-cash/sqm-payout-details-card)
+ - [sqm-qr-code](../sqm-qr-code)
+ - [sqm-referral-codes](../sqm-referral-codes)
+ - [sqm-referral-table](../sqm-referral-table)
+ - [sqm-reward-exchange-list](../sqm-reward-exchange-list)
+ - [sqm-rewards-table](../sqm-rewards-table)
  - [sqm-stencilbook](../sqm-stencilbook)
+ - [sqm-task-card](../sqm-task-card)
+ - [sqm-tax-and-cash](../tax-and-cash/sqm-tax-and-cash)
+ - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard)
+ - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-email-verification --> sqm-skeleton
   sqm-form-message --> sqm-skeleton
+  sqm-invoice-table --> sqm-skeleton
+  sqm-leaderboard --> sqm-skeleton
+  sqm-payout-details-card --> sqm-skeleton
+  sqm-qr-code --> sqm-skeleton
+  sqm-referral-codes --> sqm-skeleton
+  sqm-referral-table --> sqm-skeleton
+  sqm-reward-exchange-list --> sqm-skeleton
+  sqm-rewards-table --> sqm-skeleton
   sqm-stencilbook --> sqm-skeleton
+  sqm-task-card --> sqm-skeleton
+  sqm-tax-and-cash --> sqm-skeleton
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
+  sqm-user-info-form --> sqm-skeleton
   style sqm-skeleton fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md
index 839a7b3d9a..cc07968973 100644
--- a/packages/mint-components/src/components/sqm-stencilbook/readme.md
+++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md
@@ -16,6 +16,7 @@
 - [sqm-big-stat](../sqm-big-stat)
 - [sqm-stat-container](../sqm-stat-container)
 - [sqm-brand](../sqm-brand)
+- [sqm-skeleton](../sqm-skeleton)
 - [sqm-checkbox-field](../sqm-checkbox-field)
 - [sqm-portal-register](../sqm-portal-register)
 - [sqm-name-fields](../sqm-name-fields)
@@ -101,7 +102,6 @@
 - [sqm-lead-input-field](../sqm-lead-form)
 - [sqm-lead-dropdown-field](../sqm-lead-form)
 - [sqm-lead-form](../sqm-lead-form)
-- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -115,6 +115,7 @@ graph TD;
   sqm-stencilbook --> sqm-big-stat
   sqm-stencilbook --> sqm-stat-container
   sqm-stencilbook --> sqm-brand
+  sqm-stencilbook --> sqm-skeleton
   sqm-stencilbook --> sqm-checkbox-field
   sqm-stencilbook --> sqm-portal-register
   sqm-stencilbook --> sqm-name-fields
@@ -200,7 +201,6 @@ graph TD;
   sqm-stencilbook --> sqm-lead-input-field
   sqm-stencilbook --> sqm-lead-dropdown-field
   sqm-stencilbook --> sqm-lead-form
-  sqm-stencilbook --> sqm-skeleton
   sqm-form-message --> sqm-skeleton
   sqm-portal-register --> sqm-form-message
   sqm-portal-register --> sqm-password-field
@@ -216,39 +216,49 @@ graph TD;
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-invoice-table-download-column --> sqm-invoice-table-download-cell
   sqm-invoice-table-date-column --> sqm-invoice-table-date-cell
   sqm-invoice-table-data-column --> sqm-invoice-table-data-cell
   sqm-leaderboard --> sqm-empty
+  sqm-leaderboard --> sqm-skeleton
   sqm-payout-button-scroll --> sqm-scroll
   sqm-portal-change-marketing --> sqm-form-message
   sqm-portal-forgot-password --> sqm-form-message
   sqm-referral-codes --> sqm-empty
+  sqm-referral-codes --> sqm-skeleton
   sqm-referral-table --> sqm-empty
   sqm-referral-table --> sqm-table-row
   sqm-referral-table --> sqm-table-cell
+  sqm-referral-table --> sqm-skeleton
   sqm-referral-table-user-column --> sqm-referral-table-user-cell
   sqm-referral-table-status-column --> sqm-referral-table-status-cell
   sqm-referral-table-date-column --> sqm-referral-table-date-cell
   sqm-referral-table-rewards-column --> sqm-referral-table-rewards-cell
   sqm-reward-exchange-list --> sqm-empty
+  sqm-reward-exchange-list --> sqm-skeleton
   sqm-rewards-table --> sqm-empty
   sqm-rewards-table --> sqm-table-row
   sqm-rewards-table --> sqm-table-cell
+  sqm-rewards-table --> sqm-skeleton
   sqm-rewards-table-reward-column --> sqm-rewards-table-reward-cell
   sqm-rewards-table-source-column --> sqm-rewards-table-source-cell
   sqm-rewards-table-status-column --> sqm-rewards-table-status-cell
   sqm-rewards-table-date-column --> sqm-rewards-table-date-cell
+  sqm-task-card --> sqm-skeleton
   sqm-code-verification --> sqm-form-message
   sqm-email-verification --> sqm-skeleton
   sqm-email-verification --> sqm-form-message
   sqm-banking-info-form --> sqm-code-verification
   sqm-banking-info-form --> sqm-form-message
+  sqm-payout-details-card --> sqm-skeleton
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
   sqm-indirect-tax-form --> sqm-form-message
   sqm-docusign-form --> sqm-form-message
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
@@ -259,6 +269,7 @@ graph TD;
   sqm-tax-and-cash --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-tax-and-cash-dashboard
   sqm-tax-and-cash --> sqm-form-message
+  sqm-tax-and-cash --> sqm-skeleton
   sqm-payout-status-alert --> sqm-scroll
   sqm-payout-status-alert --> sqm-form-message
   sqm-lead-form --> sqm-form-message
diff --git a/packages/mint-components/src/components/sqm-task-card/readme.md b/packages/mint-components/src/components/sqm-task-card/readme.md
index 4c81bef199..f7c7b4fdc7 100644
--- a/packages/mint-components/src/components/sqm-task-card/readme.md
+++ b/packages/mint-components/src/components/sqm-task-card/readme.md
@@ -46,9 +46,14 @@
 
  - [sqm-stencilbook](../sqm-stencilbook)
 
+### Depends on
+
+- [sqm-skeleton](../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-task-card --> sqm-skeleton
   sqm-stencilbook --> sqm-task-card
   style sqm-task-card fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
index 48f9003c6f..0cf1076bd4 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md
@@ -24,9 +24,14 @@
  - [sqm-stencilbook](../../sqm-stencilbook)
  - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard)
 
+### Depends on
+
+- [sqm-skeleton](../../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-payout-details-card --> sqm-skeleton
   sqm-stencilbook --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   style sqm-payout-details-card fill:#f9f,stroke:#333,stroke-width:4px
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
index 7a2c4e0404..0bae62b078 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
@@ -576,7 +576,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     <div part="sqm-base">
       <style type="text/css">{styleString}</style>
       <style type="text/css">{vanillaStyle}</style>
-      <sqm-form-message loading={states.loading} type={alertDetails.alertType}>
+      <sqm-form-message loading={true} type={alertDetails.alertType}>
         <p part="alert-title">{alertDetails.header}</p>
         <p part="alert-description">{alertDetails.description}</p>
         {getButton(states.status)}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
index 76f4f64133..772397fcd0 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md
@@ -104,6 +104,7 @@
 
 - [sqm-payout-details-card](../sqm-payout-details-card)
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 - [sqm-invoice-table](../../sqm-invoice-table)
 - [sqm-invoice-table-download-column](../../sqm-invoice-table/columns)
 - [sqm-invoice-table-date-column](../../sqm-invoice-table/columns)
@@ -114,14 +115,17 @@
 graph TD;
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column
+  sqm-payout-details-card --> sqm-skeleton
   sqm-form-message --> sqm-skeleton
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
index dac279c8fe..68f4733144 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md
@@ -214,6 +214,7 @@
 - [sqm-banking-info-form](../sqm-banking-info-form)
 - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard)
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 
 ### Graph
 ```mermaid
@@ -224,7 +225,9 @@ graph TD;
   sqm-tax-and-cash --> sqm-banking-info-form
   sqm-tax-and-cash --> sqm-tax-and-cash-dashboard
   sqm-tax-and-cash --> sqm-form-message
+  sqm-tax-and-cash --> sqm-skeleton
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
   sqm-form-message --> sqm-skeleton
   sqm-indirect-tax-form --> sqm-form-message
   sqm-docusign-form --> sqm-form-message
@@ -233,13 +236,16 @@ graph TD;
   sqm-code-verification --> sqm-form-message
   sqm-tax-and-cash-dashboard --> sqm-payout-details-card
   sqm-tax-and-cash-dashboard --> sqm-form-message
+  sqm-tax-and-cash-dashboard --> sqm-skeleton
   sqm-tax-and-cash-dashboard --> sqm-invoice-table
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column
   sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column
+  sqm-payout-details-card --> sqm-skeleton
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
index eef2bf702e..33c0d55668 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md
@@ -54,11 +54,13 @@
 ### Depends on
 
 - [sqm-form-message](../../sqm-form-message)
+- [sqm-skeleton](../../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-user-info-form --> sqm-form-message
+  sqm-user-info-form --> sqm-skeleton
   sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-user-info-form
   sqm-tax-and-cash --> sqm-user-info-form

From f7300cff82b7e283aa7e347bfaa009e646ee8ec3 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Mon, 24 Nov 2025 10:01:45 -0800
Subject: [PATCH 12/18] Update demo data for testing

---
 .../sqm-payout-status-alert/sqm-payout-status-alert-view.tsx    | 2 +-
 .../sqm-payout-status-alert/sqm-payout-status-alert.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
index 0bae62b078..7a2c4e0404 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx
@@ -576,7 +576,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
     <div part="sqm-base">
       <style type="text/css">{styleString}</style>
       <style type="text/css">{vanillaStyle}</style>
-      <sqm-form-message loading={true} type={alertDetails.alertType}>
+      <sqm-form-message loading={states.loading} type={alertDetails.alertType}>
         <p part="alert-title">{alertDetails.header}</p>
         <p part="alert-description">{alertDetails.description}</p>
         {getButton(states.status)}
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
index f885963647..89a3f1e758 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
@@ -255,7 +255,7 @@ function useDemoPayoutStatusAlert(
       states: {
         error: false,
         status: props.demoData.states.status,
-        loading: false,
+        loading: true,
         veriffLoading: false,
       },
       data: { type: "SquatchAdmin" },

From 5f85807b8ce97226094944e4b25fc09574d7ae8d Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Mon, 24 Nov 2025 10:19:15 -0800
Subject: [PATCH 13/18] Update loading state in rewrds table

---
 packages/mint-components/package.json                           | 2 +-
 .../src/components/sqm-rewards-table/sqm-rewards-table.tsx      | 2 +-
 .../sqm-payout-status-alert/sqm-payout-status-alert.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 72033492f6..f7d807ee74 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.4-9",
+  "version": "2.0.4-10",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
index 448dc40873..549801a37d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
@@ -227,7 +227,7 @@ function useRewardsTableDemo(
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: false,
+        loading: true,
         show: "rows",
       },
       callbacks: {
diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
index 89a3f1e758..f885963647 100644
--- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
+++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx
@@ -255,7 +255,7 @@ function useDemoPayoutStatusAlert(
       states: {
         error: false,
         status: props.demoData.states.status,
-        loading: true,
+        loading: false,
         veriffLoading: false,
       },
       data: { type: "SquatchAdmin" },

From e874f830c05b090f72cc6eb50dc57853243c2486 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Mon, 24 Nov 2025 10:28:41 -0800
Subject: [PATCH 14/18] Hard code QR code loading state

---
 packages/mint-components/package.json                           | 2 +-
 .../src/components/sqm-qr-code/sqm-qr-code-view.tsx             | 2 ++
 .../mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx  | 1 +
 .../src/components/sqm-rewards-table/sqm-rewards-table.tsx      | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index f7d807ee74..509e9806ac 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.4-10",
+  "version": "2.0.4-11",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
index 73c55ce6ef..29f889b3a4 100644
--- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
+++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx
@@ -135,6 +135,7 @@ export function QrCodeView({
         {codeContent}
         <div class={sheet.classes.ButtonContainer}>
           <sl-button
+            loading={loading}
             size="small"
             exportparts="base: primarybutton-base"
             type="primary"
@@ -143,6 +144,7 @@ export function QrCodeView({
             {downloadCodeText}
           </sl-button>
           <sl-button
+            loading={loading}
             size="small"
             exportparts="base: secondarybutton-base"
             type="text"
diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
index 29407217b4..8a4a36c869 100644
--- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
+++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx
@@ -87,6 +87,7 @@ function useDemoQRCode(props: QrCode): QRCodeViewProps {
       hideTitle: props.hideTitle,
       showDialog: () => setDialog(true),
       hideDialog: () => setDialog(false),
+      loading: true,
       titleText: props.titleText,
       viewCodeText: props.viewCodeText,
       downloadCodeText: props.downloadCodeText,
diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
index 549801a37d..448dc40873 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
@@ -227,7 +227,7 @@ function useRewardsTableDemo(
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: true,
+        loading: false,
         show: "rows",
       },
       callbacks: {

From 54621f718636b08bcf1dc1513a95cd49acbee965 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Mon, 24 Nov 2025 10:30:20 -0800
Subject: [PATCH 15/18] New pre release

---
 packages/mint-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 509e9806ac..dc55e48c92 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.0.4-11",
+  "version": "2.0.4-12",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

From ff1e71421e6f6b8bea868c16dfdd2a293d4e7883 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Mon, 24 Nov 2025 14:57:41 -0800
Subject: [PATCH 16/18] Delete console.log

---
 .../src/components/sqm-skeleton/sqm-skeleton.tsx                | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
index c366f157de..21cad72a45 100644
--- a/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
+++ b/packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx
@@ -41,8 +41,6 @@ export class Skeleton {
   }
   `;
   render() {
-    console.log("This is the height", this.height);
-
     return (
       <div>
         <style type="text/css">{this.vanillaStyle}</style>

From 70f0ee60f6ba513847a0ad60bf851d0d0031e419 Mon Sep 17 00:00:00 2001
From: Zach Harrison <zharrison100@gmail.com>
Date: Thu, 26 Feb 2026 14:13:03 -0800
Subject: [PATCH 17/18] Merge master and publish pre release

---
 packages/mint-components/package.json         |  4 +-
 packages/mint-components/src/components.d.ts  | 39 +++++++++++++++++++
 .../sqm-portal-google-login/readme.md         |  1 +
 .../readme.md                                 |  1 +
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json
index 7eca600010..f2d1f994c4 100644
--- a/packages/mint-components/package.json
+++ b/packages/mint-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.1.1-0",
+  "version": "2.1.1-1",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -107,4 +107,4 @@
   },
   "homepage": "https://github.com/saasquatch/program-tools",
   "license": "MIT"
-}
\ No newline at end of file
+}
diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts
index 2d90b4db72..cb52dfa07b 100644
--- a/packages/mint-components/src/components.d.ts
+++ b/packages/mint-components/src/components.d.ts
@@ -985,6 +985,11 @@ export namespace Components {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading": boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -4957,6 +4962,16 @@ export namespace Components {
          */
         "tooltiptext": string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -7707,6 +7722,12 @@ declare global {
         prototype: HTMLSqmShareLinkElement;
         new (): HTMLSqmShareLinkElement;
     };
+    interface HTMLSqmSkeletonElement extends Components.SqmSkeleton, HTMLStencilElement {
+    }
+    var HTMLSqmSkeletonElement: {
+        prototype: HTMLSqmSkeletonElement;
+        new (): HTMLSqmSkeletonElement;
+    };
     interface HTMLSqmStatContainerElement extends Components.SqmStatContainer, HTMLStencilElement {
     }
     var HTMLSqmStatContainerElement: {
@@ -7925,6 +7946,7 @@ declare global {
         "sqm-share-button": HTMLSqmShareButtonElement;
         "sqm-share-code": HTMLSqmShareCodeElement;
         "sqm-share-link": HTMLSqmShareLinkElement;
+        "sqm-skeleton": HTMLSqmSkeletonElement;
         "sqm-stat-container": HTMLSqmStatContainerElement;
         "sqm-stencilbook": HTMLSqmStencilbookElement;
         "sqm-tab": HTMLSqmTabElement;
@@ -8870,6 +8892,11 @@ declare namespace LocalJSX {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading"?: boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -12813,6 +12840,16 @@ declare namespace LocalJSX {
          */
         "tooltiptext"?: string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -15016,6 +15053,7 @@ declare namespace LocalJSX {
         "sqm-share-button": SqmShareButton;
         "sqm-share-code": SqmShareCode;
         "sqm-share-link": SqmShareLink;
+        "sqm-skeleton": SqmSkeleton;
         "sqm-stat-container": SqmStatContainer;
         "sqm-stencilbook": SqmStencilbook;
         "sqm-tab": SqmTab;
@@ -15149,6 +15187,7 @@ declare module "@stencil/core" {
             "sqm-share-button": LocalJSX.SqmShareButton & JSXBase.HTMLAttributes<HTMLSqmShareButtonElement>;
             "sqm-share-code": LocalJSX.SqmShareCode & JSXBase.HTMLAttributes<HTMLSqmShareCodeElement>;
             "sqm-share-link": LocalJSX.SqmShareLink & JSXBase.HTMLAttributes<HTMLSqmShareLinkElement>;
+            "sqm-skeleton": LocalJSX.SqmSkeleton & JSXBase.HTMLAttributes<HTMLSqmSkeletonElement>;
             "sqm-stat-container": LocalJSX.SqmStatContainer & JSXBase.HTMLAttributes<HTMLSqmStatContainerElement>;
             "sqm-stencilbook": LocalJSX.SqmStencilbook & JSXBase.HTMLAttributes<HTMLSqmStencilbookElement>;
             "sqm-tab": LocalJSX.SqmTab & JSXBase.HTMLAttributes<HTMLSqmTabElement>;
diff --git a/packages/mint-components/src/components/sqm-portal-google-login/readme.md b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
index ec9d7dc5f7..cca4cf9ea1 100644
--- a/packages/mint-components/src/components/sqm-portal-google-login/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-login/readme.md
@@ -40,6 +40,7 @@
 graph TD;
   sqm-portal-google-login --> sqm-google-sign-in
   sqm-portal-google-login --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-google-login
   style sqm-portal-google-login fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
index 99b64114e6..99685212cd 100644
--- a/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
+++ b/packages/mint-components/src/components/sqm-portal-google-registration-form/readme.md
@@ -57,6 +57,7 @@ graph TD;
   sqm-portal-google-registration-form --> sqm-google-sign-in
   sqm-portal-google-registration-form --> sqm-form-message
   sqm-portal-google-registration-form --> sqm-password-field
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-portal-google-registration-form
   style sqm-portal-google-registration-form fill:#f9f,stroke:#333,stroke-width:4px
 ```

From be30188175bd95f1bdd565053fe73b3598b37f7a Mon Sep 17 00:00:00 2001
From: Sam Beveridge <sam.beveridge@impact.com>
Date: Fri, 27 Feb 2026 15:49:43 -0800
Subject: [PATCH 18/18] replace "Anonymous User" with "Your Friend" for
 referral / reward tables

---
 .../sqm-referral-table-user-column.tsx        |  4 ++--
 .../sqm-referral-table/sqm-referral-table.tsx |  2 +-
 .../RewardsTableCell.stories.tsx              |  2 +-
 .../sqm-rewards-table-source-column.feature   |  6 +++---
 .../sqm-rewards-table-source-column.tsx       |  4 ++--
 .../sqm-rewards-table/sqm-rewards-table.tsx   |  2 +-
 .../src/components/sqm-tabs/Tabs.stories.tsx  | 20 +++++++++----------
 .../templates/CashPayoutsReferralWidget.html  |  2 +-
 .../src/templates/LoyaltyWidget.html          |  2 +-
 .../src/templates/MonoWidget.html             |  4 ++--
 .../src/templates/PaypalMonoWidget.html       |  4 ++--
 .../src/templates/PaypalReferralWidget.html   |  2 +-
 .../templates/PromoCodeReferralWidget.html    |  2 +-
 .../src/templates/ReferralWidget.html         |  2 +-
 .../ReferralRewardColumn.stories.tsx          |  4 ++--
 .../StatusColumn.stories.tsx                  |  4 ++--
 16 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
index 5844bd424e..431d9d6c12 100644
--- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx
@@ -8,7 +8,7 @@ import { ReferralTableColumn } from "./ReferralTableColumn";
  * @uiName Referral Table User Column
  * @validParents ["sqm-referral-table"]
  * @exampleGroup Referrals
- * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column>
+ * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User"></sqm-referral-table-user-column>
  */
 @Component({
   tag: "sqm-referral-table-user-column",
@@ -24,7 +24,7 @@ export class ReferralTableUserColumn implements ReferralTableColumn {
    *
    * @uiName Anonymous user text
    */
-  @Prop() anonymousUser: string = "Anonymous User";
+  @Prop() anonymousUser: string = "Your Friend";
   /**
    * Name displayed for deleted users
    *
diff --git a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
index 4390a1363a..b099645585 100644
--- a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
+++ b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx
@@ -23,7 +23,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
  * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
  */
 @Component({
   tag: "sqm-referral-table",
diff --git a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
index 451d0927f5..a8d3655d1d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx
@@ -433,7 +433,7 @@ export const SourceCellAnonymousUser = () => {
     <sqm-rewards-table-source-cell
       reward={{ ...rewardsData, ...referral(anon) }}
       referralText="Referral to"
-      anonymousUserText="Anonymous User"
+      anonymousUserText="Your Friend"
     ></sqm-rewards-table-source-cell>
   );
 };
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
index f70413f5da..d0e2b59b76 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.feature
@@ -1,6 +1,6 @@
 @author:derek @owner:derek
 Feature: Reward Table Source Column
-    Shows the source of each reward
+  Shows the source of each reward
 
   @motivating @ui
   Scenario Outline: The title of the source column is configurable
@@ -71,14 +71,14 @@ Feature: Reward Table Source Column
       | last.name  | first.name |
 
   @motivating @ui
-  Scenario Outline: The source column displays referral as "Anonymous User" if the referral user has no names
+  Scenario Outline: The source column displays referral as "Your Friend" if the referral user has no names
     Given a user with a referral reward
     And that reward has <rewardSource>
     And the <referralUser> has no first name
     And the <referralUser> has no last name
     When they view the rewards table
     Then then source displays <sourceText>
-    And under it displays "Anonymous User"
+    And under it displays "Your Friend"
 
     Examples:
       | rewardSource  | referralUser  | sourceText  |
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
index 9b43e98426..cb48ac5166 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
@@ -8,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn";
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 @Component({
   tag: "sqm-rewards-table-source-column",
@@ -25,7 +25,7 @@ export class RewardTableUserColumn implements RewardTableColumn {
    *
    * @uiName Anonymous user text
    */
-  @Prop() anonymousUser: string = "Anonymous User";
+  @Prop() anonymousUser: string = "Your Friend";
   /**
    * Name displayed for deleted users
    *
diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
index 6beef709b3..2e030923a7 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx
@@ -23,7 +23,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
  */
 @Component({
   tag: "sqm-rewards-table",
diff --git a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
index d90ab8a009..61c7bb1911 100644
--- a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
+++ b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx
@@ -80,7 +80,7 @@ export const ReferralProgram = () => (
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -123,7 +123,7 @@ export const ReferralProgram = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -176,7 +176,7 @@ export const LoyaltyProgram = () => (
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -219,7 +219,7 @@ export const LoyaltyProgram = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -275,7 +275,7 @@ export const BottomTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -318,7 +318,7 @@ export const BottomTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -374,7 +374,7 @@ export const LeftTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -417,7 +417,7 @@ export const LeftTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -473,7 +473,7 @@ export const RightTabs = () => (
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -516,7 +516,7 @@ export const RightTabs = () => (
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/CashPayoutsReferralWidget.html b/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
index 4265bf44fa..128f8a8b8f 100644
--- a/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
+++ b/packages/mint-components/src/templates/CashPayoutsReferralWidget.html
@@ -76,7 +76,7 @@ <h3 slot="label">
                 </sqm-tab>
                 <sqm-tab header="Referral History"><sqm-referral-table per-page="4" hidden-columns="2" more-label="Next"
                         prev-label="Prev" sm-breakpoint="599" md-breakpoint="799">
-                        <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User"
+                        <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend"
                             deleted-user="Deleted User"></sqm-referral-table-user-column>
                         <sqm-referral-table-rewards-column column-title="Rewards"
                             status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" 
diff --git a/packages/mint-components/src/templates/LoyaltyWidget.html b/packages/mint-components/src/templates/LoyaltyWidget.html
index 3ce592def0..cc01d9470a 100644
--- a/packages/mint-components/src/templates/LoyaltyWidget.html
+++ b/packages/mint-components/src/templates/LoyaltyWidget.html
@@ -184,7 +184,7 @@ <h3 slot="label">Reward History</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/MonoWidget.html b/packages/mint-components/src/templates/MonoWidget.html
index e902af5083..933864eed1 100644
--- a/packages/mint-components/src/templates/MonoWidget.html
+++ b/packages/mint-components/src/templates/MonoWidget.html
@@ -255,7 +255,7 @@ <h3 slot="label">Earn more rewards</h3>
             >
               <sqm-referral-table-user-column
                 column-title="User"
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 deleted-user="Deleted User"
               >
               </sqm-referral-table-user-column>
@@ -307,7 +307,7 @@ <h3 slot="label">Earn more rewards</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/PaypalMonoWidget.html b/packages/mint-components/src/templates/PaypalMonoWidget.html
index f2efe5ef91..0573f18718 100644
--- a/packages/mint-components/src/templates/PaypalMonoWidget.html
+++ b/packages/mint-components/src/templates/PaypalMonoWidget.html
@@ -280,7 +280,7 @@ <h3 slot="label">Earn more rewards</h3>
             >
               <sqm-referral-table-user-column
                 column-title="User"
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 deleted-user="Deleted User"
               >
               </sqm-referral-table-user-column>
@@ -340,7 +340,7 @@ <h3 slot="label">Earn more rewards</h3>
               >
               </sqm-rewards-table-reward-column>
               <sqm-rewards-table-source-column
-                anonymous-user="Anonymous User"
+                anonymous-user="Your Friend"
                 column-title="Source"
                 deleted-user="Deleted User"
                 referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
diff --git a/packages/mint-components/src/templates/PaypalReferralWidget.html b/packages/mint-components/src/templates/PaypalReferralWidget.html
index d582d969e8..59ab9a06e2 100644
--- a/packages/mint-components/src/templates/PaypalReferralWidget.html
+++ b/packages/mint-components/src/templates/PaypalReferralWidget.html
@@ -197,7 +197,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/mint-components/src/templates/PromoCodeReferralWidget.html b/packages/mint-components/src/templates/PromoCodeReferralWidget.html
index a00870db85..727fb5ba8d 100644
--- a/packages/mint-components/src/templates/PromoCodeReferralWidget.html
+++ b/packages/mint-components/src/templates/PromoCodeReferralWidget.html
@@ -142,7 +142,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/mint-components/src/templates/ReferralWidget.html b/packages/mint-components/src/templates/ReferralWidget.html
index 9366b72805..7527837b06 100644
--- a/packages/mint-components/src/templates/ReferralWidget.html
+++ b/packages/mint-components/src/templates/ReferralWidget.html
@@ -172,7 +172,7 @@ <h3 slot="label">Referral History</h3>
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           >
           </sqm-referral-table-user-column>
diff --git a/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx b/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
index 4114ab2128..8172d84881 100644
--- a/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
+++ b/packages/paypal-components/src/components/sqp-rewards-column/ReferralRewardColumn.stories.tsx
@@ -90,7 +90,7 @@ export const FullReferralTable = () => (
   >
     <sqm-referral-table-user-column
       column-title="User"
-      anonymous-user="Anonymous User"
+      anonymous-user="Your Friend"
       deleted-user="Deleted User"
     ></sqm-referral-table-user-column>
     <sqm-referral-table-status-column
@@ -143,7 +143,7 @@ export const MockDataTable = () => {
         >
           <sqm-referral-table-user-column
             column-title="User"
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             deleted-user="Deleted User"
           ></sqm-referral-table-user-column>
           <sqm-referral-table-status-column
diff --git a/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx b/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
index c2dbc88d64..40b0da93d3 100644
--- a/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
+++ b/packages/paypal-components/src/components/sqp-status-column/StatusColumn.stories.tsx
@@ -114,7 +114,7 @@ export const FullRewardsTable = () => (
       redeemed-text="{redeemedAmount} redeemed"
     ></sqm-rewards-table-reward-column>
     <sqm-rewards-table-source-column
-      anonymous-user="Anonymous User"
+      anonymous-user="Your Friend"
       column-title="Source"
       deleted-user="Deleted User"
       referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -170,7 +170,7 @@ export const MockDataTable = () => {
             redeemed-text="{redeemedAmount} redeemed"
           ></sqm-rewards-table-reward-column>
           <sqm-rewards-table-source-column
-            anonymous-user="Anonymous User"
+            anonymous-user="Your Friend"
             column-title="Source"
             deleted-user="Deleted User"
             referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"