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

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -19,19 +19,19 @@ const style = {
       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)",
@@ -92,7 +92,7 @@ const style = {
       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)",
     },
@@ -100,7 +100,7 @@ const style = {
       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)",
     },
@@ -118,7 +118,7 @@ const style = {
       color: "var(--sl-color-primary-300)",
     },
     "&[data-subdue] .neutral": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(--sqm-text)",
     },
     display: "flex",
     "& .icon": {
@@ -130,7 +130,7 @@ const style = {
       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)",
@@ -140,19 +140,19 @@ const style = {
       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",

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

@@ -3,47 +3,48 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 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/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 import { Circle, Gift } from "./SVGs";
 const style = {
   TimelineReward: {
-    color: "var(--sl-color-neutral-900)",
+    color: "var(--sqm-text)",
     lineHeight: "var(--sl-line-height-dense)",
     "& .container": {
       display: "flex",

package/dist/collection/global/styles.js

@@ -584,6 +584,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 {
@@ -591,7 +593,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);
@@ -623,7 +625,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -634,7 +635,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/collection/global/styles.ts

@@ -585,6 +585,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 {
@@ -592,7 +594,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);
@@ -624,7 +626,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -635,7 +636,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/esm/{ShadowViewAddon-cf230f50.js → ShadowViewAddon-e350d540.js}

@@ -1,6 +1,6 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-91e7729f.js';
 import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { d as dist, H, J, F as Fn, w as wn, $ as $e, B, g as getEnvironmentSDK, L } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
@@ -113,14 +113,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": {
@@ -240,8 +240,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,
     },
   };
@@ -2253,19 +2252,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)",
@@ -2326,7 +2325,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)",
     },
@@ -2334,7 +2333,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)",
     },
@@ -2352,7 +2351,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": {
@@ -2364,7 +2363,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)",
@@ -2374,19 +2373,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",
@@ -4021,7 +4020,7 @@ const style$c = {
   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/esm/{global-be1f9992.js → global-1d207c9e.js}

@@ -26488,6 +26488,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 {
@@ -26495,7 +26497,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);
@@ -26527,7 +26529,6 @@ h2, .Title {
 }
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
   margin-top: 0px;
 }
 
@@ -26538,7 +26539,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/esm/loader.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-91e7729f.js';
 import './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
+import './global-1d207c9e.js';
 import './index.module-89a79f66.js';
 
 /*

package/dist/esm/mint-components.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, H, b as bootstrapLazy } from './index-91e7729f.js';
 import './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
+import './global-1d207c9e.js';
 import './index.module-89a79f66.js';
 
 /*

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

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as Host, g as getElement } from './index-91e7729f.js';
 import { m as useRef, k as useState, f as useEffect, n as h$1, l, u as useMemo, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, q as En, u as useCallback, R as Rn, M as Mn, I as In, S as Sn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -14,7 +14,7 @@ import { l as luxon } from './luxon-8d51c92b.js';
 import { g as generateUserError } from './useReferralTable-b3876ed6.js';
 import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
 import { E as ErrorView } from './ErrorView-48e2b969.js';
-import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-2c726568.js';
+import { t as taxTypeToName, v as validTaxDocument, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, g as getCountryObj, O as OtherRegionSlotView, I as InvoiceTableView, L as LoadingView, c as vatLabels, G as GeneralLoadingView, f as formatErrorMessage, d as validateBillingField, o as objectIsFull, A as ADDRESS_REGIONS } from './sqm-invoice-table-view-e0c9772a.js';
 import { e as extractProps } from './extractProps-ae1afbb3.js';
 import { b as VERIFICATION_EVENT_KEY, V as VERIFICATION_EMAIL_NAMESPACE, S as SHOW_CODE_NAMESPACE, a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY, a as useVeriffApp, g as getStatus, V as VERIFF_COMPLETE_EVENT_KEY } from './usePayoutStatus-58aa56b4.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
 import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -19,7 +19,7 @@ import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-cf230f50.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-e350d540.js';
 import './sqm-portal-container-view-1683ae32.js';
 import { u as usePayoutStatus } from './usePayoutStatus-58aa56b4.js';
 
@@ -983,7 +983,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 + ")",
@@ -994,7 +994,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 + ")",
@@ -3009,7 +3009,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: {
@@ -3069,7 +3069,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",
@@ -3083,6 +3083,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)",
@@ -3091,6 +3092,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)": {
@@ -3179,7 +3181,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",
@@ -4956,7 +4958,7 @@ const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 2
 
 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/esm/sqm-email-verification.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance } from './index-91e7729f.js';
 import { k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { d as dist, t as Pn, w as wn, J, $ as $e, i as isDemo, q as En } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';

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

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as Host } from './index-91e7729f.js';
 import { n as h$1 } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import './index.module-89a79f66.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
@@ -14,7 +14,7 @@ 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,
         }, {
@@ -96,47 +96,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/esm/{sqm-invoice-table-view-2c726568.js → sqm-invoice-table-view-e0c9772a.js}

@@ -1,5 +1,5 @@
 import { h } from './index-91e7729f.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { E as ErrorView } from './ErrorView-48e2b969.js';
 

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { n as h } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { d as dist, H, J, w as wn, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';

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

@@ -1,6 +1,6 @@
 import { h, F as Fragment, r as registerInstance } from './index-91e7729f.js';
 import { n as h$1, k as useState } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { F as Fn, i as isDemo, d as dist, H, J, w as wn, $ as $e, B } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
@@ -284,7 +284,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/esm/{sqm-portal-email-verification-view-35b4353b.js → sqm-portal-email-verification-view-6c8bad0b.js}

@@ -1,5 +1,5 @@
 import { h } from './index-91e7729f.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-83f90fa1.js';
 import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { k as useState, m as useRef, f as useEffect, n as h } from './stencil-hooks.module-4bc38af4.js';
-import './global-be1f9992.js';
+import './global-1d207c9e.js';
 import { l as ln, n as nn, J, j as jn, u as useCallback, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import './mixins-83f90fa1.js';
 import './sqm-text-span-view-ca32495e.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-35b4353b.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-6c8bad0b.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/esm/{sqm-portal-profile-view-93003974.js → sqm-portal-profile-view-cbdeec1f.js}

@@ -1,5 +1,5 @@
 import { h } from './index-91e7729f.js';
-import { i as intl } from './global-be1f9992.js';
+import { i as intl } from './global-1d207c9e.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';