@saasquatch/mint-components 1.15.0-2 → 1.15.0-4

package/dist/cjs/{ShadowViewAddon-787391f7.js → ShadowViewAddon-9e7916d8.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
@@ -115,14 +115,14 @@ const style$1 = {
     "& .ellipses": {
       textAlign: "left",
       padding: "0",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text)",
       paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
     },
     "& td, th": {
-      color: "var(--sl-color-gray-800)",
+      color: "var(--sqm-text)",
       padding: "var(--sl-spacing-medium)",
     },
     "& .User": {
@@ -242,8 +242,7 @@ function BigStatView(props) {
     Description: {
       "font-size": "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
+      color: "var(--sqm-text-subdued)",
       "text-align": alignment,
     },
   };
@@ -2255,19 +2254,19 @@ const style$7 = {
       boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: "var(--sl-color-neutral-600)",
+      color: "var(--sqm-text)",
     },
     "& .main.complete": {
       background: "var(--sl-color-primary-50)",
       borderColor: "var(--sl-color-primary-500)",
     },
     "& .main.expired": {
-      color: "var(--sl-color-neutral-600)",
+      color: "var(--sqm-text)",
       background: "var(--sl-color-neutral-50)",
     },
     "& .title": {
       fontSize: "var(--sl-font-size-medium)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
     },
     "& .container": {
       margin: "var(--sl-spacing-medium)",
@@ -2328,7 +2327,7 @@ const style$7 = {
       alignSelf: "center",
       fontSize: "var(--sl-font-size-x-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
       lineHeight: "100%",
       marginRight: "var(--sl-spacing-xx-small)",
     },
@@ -2336,7 +2335,7 @@ const style$7 = {
       alignSelf: "end",
       textTransform: "uppercase",
       fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-950)",
+      color: "var(--sqm-text)",
       lineHeight: "var(--sl-font-size-medium)",
       marginRight: "var(--sl-spacing-xx-small)",
     },
@@ -2354,7 +2353,7 @@ const style$7 = {
       color: "var(--sl-color-primary-300)",
     },
     "&[data-subdue] .neutral": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(--sqm-text)",
     },
     display: "flex",
     "& .icon": {
@@ -2366,7 +2365,7 @@ const style$7 = {
       marginTop: "auto",
       verticalAlign: "text-bottom",
       fontSize: "var(--sl-font-size-x-small)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text)",
     },
     "& .success": {
       color: "var(--sl-color-primary-500)",
@@ -2376,19 +2375,19 @@ const style$7 = {
       marginTop: "auto",
       marginLeft: "auto",
       "&::part(base)": {
-        color: "var(--sl-color-neutral-0)",
+        color: "var(--sqm-text)",
       },
       "&.disabled::part(base)": {
         border: "1px solid var(--sl-color-primary-400)",
         background: "var(--sl-color-primary-400)",
       },
       "&.neutral::part(base)": {
-        border: "1px solid var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-400)",
+        border: "1px solid var(--sqm-text)",
+        background: "var(--sqm-text)",
       },
     },
     "& .neutral": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text)",
     },
     "& .datetime": {
       display: "block",
@@ -4023,7 +4022,7 @@ const style$c = {
   HostBlock: mixins.HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-small)",
   },
 };

package/dist/cjs/{global-e31dc4f5.js → global-0cf6d295.js}

@@ -26490,6 +26490,8 @@ html {
   --widget-background-color: var(--sl-color-white);
   --sqm-portal-main-width: 900px;
   --sqm-max-width: 100%;
+  --sqm-text: var(--sl-color-neutral-800);
+  --sqm-text-subdued: var(--sl-color-neutral-500);
 }
 
 body {
@@ -26497,7 +26499,7 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   line-height: var(--sl-line-height-normal);
   margin: 0;
   background-color: var(--sqm-portal-background);
@@ -26529,7 +26531,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -26540,7 +26541,7 @@ h2, .Title {
 .Subtitle {
   text-align: center;
   margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
 }
 .SupportText{
   margin-top: var(--sl-spacing-small);

package/dist/cjs/loader.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-0cf6d295.js');
 require('./index.module-ee84433d.js');
 
 /*

package/dist/cjs/mint-components.cjs.js

@@ -2,7 +2,7 @@
 
 const index = require('./index-a29c60ef.js');
 require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-0cf6d295.js');
 require('./index.module-ee84433d.js');
 
 /*

package/dist/cjs/sqm-banking-info-form_17.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -18,7 +18,7 @@ const luxon = require('./luxon-2926d85f.js');
 const useReferralTable = require('./useReferralTable-7c3f9600.js');
 const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-dbf7a907.js');
 const extractProps = require('./extractProps-fd93ba62.js');
 const keys = require('./keys-cff24974.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');

package/dist/cjs/sqm-big-stat_41.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -23,7 +23,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9e7916d8.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
 
@@ -987,7 +987,7 @@ function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sl-color-neutral-0)",
+      color: props.textColor || "var(--sqm-text)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -998,7 +998,7 @@ function HeroImageView(props, children) {
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -3013,7 +3013,7 @@ function useRegisterDemo(props) {
 function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "",
     },
     Header: {
@@ -3073,7 +3073,7 @@ function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
@@ -3087,6 +3087,7 @@ function ProgramExplainerStepView(props) {
       },
     },
     Header: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
       marginTop: "var(--sl-spacing-x-large)",
@@ -3095,6 +3096,7 @@ function ProgramExplainerStepView(props) {
       },
     },
     Description: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
       "@media (max-width: 499px)": {
@@ -3183,7 +3185,7 @@ const ProgramMenu = class {
 const style$4 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sl-color-neutral-900)",
+    color: "var(--sqm-text)",
     background: "var(--sl-color-neutral-0)",
     display: "flex",
     flexDirection: "column",
@@ -4960,7 +4962,7 @@ const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0
 
 const style$5 = {
   TimelineReward: {
-    color: "var(--sl-color-neutral-900)",
+    color: "var(--sqm-text)",
     lineHeight: "var(--sl-line-height-dense)",
     "& .container": {
       display: "flex",

package/dist/cjs/sqm-email-verification.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-empty_4.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 require('./index.module-ee84433d.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
@@ -18,7 +18,7 @@ function EmptyStateView(props) {
       index.h("sqm-text", { slot: "label" },
         index.h("p", { part: "header-text" }, emptyStateHeader)),
       index.h("sqm-text", { slot: "content" },
-        index.h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, global.intl.formatMessage({
+        index.h("p", { part: "description-text" }, global.intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {
@@ -100,47 +100,48 @@ const PortalContainer = class {
 const vanillaStyle = `
   sqm-text {
     display: block;
+    color: var(--sqm-text);
   }
 
   sqm-text h1 {
     font-size: var(--sl-font-size-xxx-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h2 {
     font-size: var(--sl-font-size-xx-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h3 {
     font-size: var(--sl-font-size-x-large);
     font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
     font-weight: var(--sl-font-weight-bold);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text p {
     font-size: var(--sl-font-size-medium);
     font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
+    color: var(--sqm-text);
     margin: 0;
   }
 
   sqm-text sub {
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
+    color: var(--sqm-text);
     margin: 0;
   }
 `;

package/dist/cjs/{sqm-invoice-table-view-16ac73d0.js → sqm-invoice-table-view-dbf7a907.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const JSS = require('./JSS-8503a151.js');
 const ErrorView = require('./ErrorView-b2fcf954.js');
 

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');

package/dist/cjs/sqm-pagination_3.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
@@ -288,7 +288,7 @@ const style$1 = {
     flexDirection: "column",
   },
   TitleText: {
-    color: "var(--sl-color-neutral-700)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-large)",
     margin: "0",
   },

package/dist/cjs/{sqm-portal-email-verification-view-7ebb426a.js → sqm-portal-email-verification-view-ab0fb983.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-0aa82125.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7ebb426a.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-ab0fb983.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-33164798.js → sqm-portal-profile-view-e3026b53.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
 

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-0aa82125.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-e3026b53.js');
 const utilities = require('./utilities-78f5e169.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-0cf6d295.js');
 const index_module = require('./index.module-ee84433d.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
@@ -24,20 +24,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-7ebb426a.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-ab0fb983.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-e3026b53.js');
 require('./utilities-78f5e169.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-9e7916d8.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-dbf7a907.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -22,8 +22,7 @@ export function BigStatView(props) {
     Description: {
       "font-size": "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
+      color: "var(--sqm-text-subdued)",
       "text-align": alignment,
     },
   };

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -5,7 +5,7 @@ import { CardFeedView } from "./sqm-card-feed-view";
 /**
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
- * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"]
+ * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"]
  * @validChildren ["sqm-task-card"]
  * @exampleGroup Rewards
  * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code-view.js

@@ -6,7 +6,7 @@ const style = {
   HostBlock: HostBlock,
   couponCodeLabel: {
     margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-small)",
   },
 };

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -7,6 +7,7 @@ import { CouponCodeView } from "./sqm-coupon-code-view";
 import { useCouponCode } from "./useCouponCode";
 /**
  * @uiName Coupon Code
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -7,6 +7,8 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section"]
+ * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
  */
 export class DividedLayout {

package/dist/collection/components/sqm-empty/sqm-empty-view.js

@@ -8,7 +8,7 @@ export function EmptyStateView(props) {
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
+        h("p", { part: "description-text" }, intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -2,6 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
 /**
  * @uiName Header Logo
+ * @validParents ["sqm-portal-frame","div","sqm-brand"]
  */
 export class HeroImage {
   constructor() {

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -4,6 +4,7 @@ import { HeroView } from "./sqm-hero-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Hero Layout
+ * @validParents ["sqm-portal-container","sqm-brand","div"]
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
  * @exampleGroup Layout

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -38,7 +38,7 @@ export function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sl-color-neutral-0)",
+      color: props.textColor || "var(--sqm-text)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -49,7 +49,7 @@ export function HeroImageView(props, children) {
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
+ * @validParents ["sqm-portal-container","sqm-brand", "div"]
  * @exampleGroup Common Components
  * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
  * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>