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

package/dist/esm/{sqm-close-button-view-f9819751.js → sqm-close-button-view-bc2bc10e.js}

@@ -1,6 +1,6 @@
 import { h } from './index-91e7729f.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { H as HostBlock } from './mixins-83f90fa1.js';
+import { H as HostBlock } from './mixins-f750863a.js';
 
 const style = {
   HostBlock: HostBlock,

package/dist/esm/sqm-close-button.entry.js

@@ -2,8 +2,8 @@ import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { n as h } from './stencil-hooks.module-4bc38af4.js';
 import { g as getEnvironmentSDK } from './index.module-89a79f66.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';
+import './mixins-f750863a.js';
+import { C as CloseButtonView } from './sqm-close-button-view-bc2bc10e.js';
 
 const CloseButton = class {
   constructor(hostRef) {

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

@@ -1,11 +1,11 @@
 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-1d207c9e.js';
+import { i as intl } from './global-66746c30.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';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-ca32495e.js';
+import { T as TextSpanView } from './sqm-text-span-view-cd3902e5.js';
 import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE } from './keys-406491dc.js';
 import { u as useVerificationEmail } from './useVerificationEmail-edc318cb.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-1d207c9e.js';
+import { i as intl } from './global-66746c30.js';
 import './index.module-89a79f66.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
@@ -93,54 +93,6 @@ 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(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    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(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-bold);
-    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(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-`;
 const Text = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -150,6 +102,54 @@ const Text = class {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
+    const vanillaStyle = `
+    sqm-text {
+      display: block;
+      color: ${this.textColor || "var(--sqm-text)"};
+    }
+
+    sqm-text h1 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xxx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h2 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h3 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-x-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h4 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-large)"};
+      font-weight: var(--sl-font-weight-bold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text p {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-medium)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text sub {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-small)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+    `;
     return (h("div", null, h("style", null, vanillaStyle), h("slot", null)));
   }
 };

package/dist/esm/sqm-instant-access-registration.entry.js

@@ -4,8 +4,8 @@ import { i as isDemo, b as setUserIdentity } from './index.module-89a79f66.js';
 import './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
+import './mixins-f750863a.js';
+import { E as EmailRegistrationView } from './email-registration-view-b1c858ee.js';
 import './useRegistrationFormState-d6f33135.js';
 import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dc4ad9f2.js';
 

package/dist/esm/{sqm-invoice-table-view-e0c9772a.js → sqm-invoice-table-view-b7e91eef.js}

@@ -1,5 +1,5 @@
 import { h } from './index-91e7729f.js';
-import { i as intl } from './global-1d207c9e.js';
+import { i as intl } from './global-66746c30.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { E as ErrorView } from './ErrorView-48e2b969.js';
 
@@ -1970,7 +1970,7 @@ const style$2 = {
     fontSize: "var(--sl-font-size-small)",
     marginTop: "var(--sl-spacing-small)",
     margin: "0 0 var(--sl-spacing-large)",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
   },
   Header: {
     fontSize: "var(--sl-font-size-large)",

package/dist/esm/{sqm-leaderboard-rank-view-753c8d4a.js → sqm-leaderboard-rank-view-84b3c539.js}

@@ -2,7 +2,7 @@ import { h } from './index-91e7729f.js';
 
 function LeaderboardRankView(props) {
   const { data } = props;
-  return h("span", { class: "P" }, data.rank);
+  return (h("span", { style: { marginTop: "0px", fontSize: "var(--sl-font-size-small)" } }, data.rank));
 }
 
 export { LeaderboardRankView as L };

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

@@ -1,9 +1,9 @@
 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-1d207c9e.js';
+import { i as intl } from './global-66746c30.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';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-84b3c539.js';
 
 const GET_RANK = dist.gql `
   query ($type: String!, $filter: UserLeaderboardFilterInput) {
@@ -48,7 +48,7 @@ function useLeaderboardRank(props) {
   };
 }
 
-const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sl-color-gray-800);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sl-color-gray-500);margin:0px}";
+const sqmLeaderboardRankCss = "p,.P{font-size:var(--sl-font-size-small);color:var(--sqm-text);margin-top:0px}p.Subtitle,.P.Subtitle{color:var(--sqm-text-subdued);margin:0px}";
 
 const LeaderboardRank = class {
   constructor(hostRef) {

package/dist/esm/{sqm-navigation-sidebar-item-view-8f1c72bc.js → sqm-navigation-sidebar-item-view-6e046743.js}

@@ -1,25 +1,36 @@
 import { h } from './index-91e7729f.js';
 import { j as jn } from './index.module-89a79f66.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { g as gap } from './mixins-83f90fa1.js';
+import { g as gap } from './mixins-f750863a.js';
 
 function NavigationSidebarItemView(props) {
   const { states, data } = props;
+  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
+  const backgroundHoverColor = props.backgroundHoverColor || "var(--sl-color-gray-50)";
+  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sl-color-gray-200)";
+  const textFocusedColor = props.textFocusedColor || "var(--sqm-text)";
   const style = {
     ItemContainer: {
       display: "flex",
-      "background-color": `${states.active ? "var(--sl-color-gray-200)" : "var(--sl-color-white)"}`,
-      "border-radius": "8px",
-      padding: "8px",
+      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
+      padding: `var(--sl-spacing-${props.padding})`,
       "text-decoration": "none",
-      color: "#454444",
+      color: states.active
+        ? textFocusedColor
+        : props.textColor || "var(--sqm-text)",
       "align-items": "center",
       ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
       "&:hover": {
         cursor: "pointer",
         background: states.active
-          ? "var(--sl-color-gray-300)"
-          : "var(--sl-color-gray-50)",
+          ? backgroundFocusedColor
+          : backgroundHoverColor,
+        color: states.active
+          ? textFocusedColor
+          : props.textHoverColor || "var(--sqm-text)",
       },
     },
     Label: {

package/dist/esm/sqm-navigation-sidebar-item.entry.js

@@ -4,8 +4,8 @@ import { k as kn, i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
-import './mixins-83f90fa1.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-8f1c72bc.js';
+import './mixins-f750863a.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-6e046743.js';
 
 function useNavigationSidebarItem(props) {
   const currentPage = kn();
@@ -16,14 +16,29 @@ function useNavigationSidebarItem(props) {
     data: {
       label: props.label,
       icon: props.icon,
-      path: props.path
+      path: props.path,
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   };
 }
 
 const NavigationSidebarItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Padding
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.padding = "x-small";
     h(this);
   }
   disconnectedCallback() { }
@@ -43,6 +58,14 @@ function useSidebarItemDemo(props) {
       label: props.label || "Dashboard",
       icon: props.icon || "house",
     },
+    backgroundColor: props.backgroundColor,
+    backgroundHoverColor: props.backgroundHoverColor,
+    textColor: props.textColor,
+    textHoverColor: props.textHoverColor,
+    borderRadius: props.borderRadius,
+    backgroundFocusedColor: props.backgroundFocusedColor,
+    textFocusedColor: props.textFocusedColor,
+    padding: props.padding,
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

package/dist/esm/{sqm-navigation-sidebar-view-9d802b78.js → sqm-navigation-sidebar-view-f898265a.js}

@@ -1,6 +1,7 @@
 import { h } from './index-91e7729f.js';
 
-const vanillaStyle = `
+function NavigationSidebarView(props, children) {
+  const vanillaStyle = `
 
 * {
   padding: 0;
@@ -8,6 +9,16 @@ const vanillaStyle = `
   box-sizing: border-box;
 }
 
+.container {
+  background: var(--sqm-portal-background);
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 @keyframes slideIn {
   0% {
     left: -350px;
@@ -59,12 +70,12 @@ const vanillaStyle = `
     flex-direction: column;
     z-index: 100;
   }
-  .menu-items { 
+  .menu-items {
     display: none;
     padding: 20px;
     border-right: 1px solid #eaeaea;
     padding-top: 60px;
-    background: white; 
+    background: var(--sqm-portal-background); 
     width: 100vw;
     height: 100vh;
     position: absolute;
@@ -128,7 +139,7 @@ const vanillaStyle = `
   .toggler:checked ~ .hamburger > .line:nth-child(2),
   .toggler:checked ~ .hamburger > .line:nth-child(3) {
     width: 75%;
-    border-bottom: 3px solid #444445;
+    border-bottom: 3px solid ${props.mobileMenuColor};
     margin: 0;
   }
 
@@ -138,11 +149,10 @@ const vanillaStyle = `
     height: 4px;
     width: 100%;
     margin-bottom: 3px;
-    border-bottom: 5px solid #444445;
+    border-bottom: 5px solid ${props.mobileMenuColor};
   }
 }
 `;
-function NavigationSidebarView(props, children) {
   return (h("div", { class: "container", part: "sqm-base" },
     h("style", null, vanillaStyle),
     h("input", Object.assign({ type: "checkbox", class: "toggler" }, props)),

package/dist/esm/sqm-navigation-sidebar.entry.js

@@ -1,21 +1,31 @@
 import { r as registerInstance, h as h$1 } from './index-91e7729f.js';
 import { n as h, k as useState, f as useEffect } from './stencil-hooks.module-4bc38af4.js';
-import { k as kn, H } from './index.module-89a79f66.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
+import { i as isDemo, k as kn, H } from './index.module-89a79f66.js';
+import { c as cjs } from './cjs-bdfb4486.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-f898265a.js';
 
 const NavigationSidebar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * @uiName Text color
+     * @uiWidget color
+     * @format color
+     * @uiGroup Style
+     */
+    this.mobileMenuColor = "var(--sqm-text, #444445)";
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    const props = useNavigationSidebar();
+    const props = isDemo()
+      ? useDemoNavigationSidebar(this)
+      : useNavigationSidebar(this);
     return (h$1(NavigationSidebarView, Object.assign({}, props), h$1("slot", null)));
   }
 };
-function useNavigationSidebar() {
+function useNavigationSidebar(props) {
   const location = kn();
   const programId = H();
   const [checked, setChecked] = useState(false);
@@ -27,9 +37,15 @@ function useNavigationSidebar() {
     setChecked(e.target.checked);
   }
   return {
+    mobileMenuColor: props.mobileMenuColor,
     checked,
     onClick,
   };
 }
+function useDemoNavigationSidebar(props) {
+  return cjs({
+    mobileMenuColor: props.mobileMenuColor,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 
 export { NavigationSidebar as sqm_navigation_sidebar };

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

@@ -1,13 +1,13 @@
 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-1d207c9e.js';
+import { i as intl } from './global-66746c30.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';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { R as REFERRAL_CODES_PAGINATION_CONTEXT, a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED, u as useReferralCodes } from './useReferralCodes-8f75921a.js';
-import './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-782137ba.js';
+import './mixins-f750863a.js';
+import { C as CopyTextView } from './copy-text-view-4a207b17.js';
 
 const style = {
   Container: {
@@ -25,7 +25,7 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function PaginationView(props) {
-  const { states, callbacks, text } = props;
+  const { states, callbacks, text, buttonType } = props;
   const { onNext, onPrev } = callbacks;
   const { currentPage, totalPages, loading } = states;
   if (totalPages === 1)
@@ -33,10 +33,10 @@ function PaginationView(props) {
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     !loading && (h(Fragment, null,
-      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
         h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
       h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    h("sl-button", { exportparts: `base: ${buttonType}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }
 
@@ -75,6 +75,15 @@ const Pagination = class {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "secondary";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -93,6 +102,7 @@ function useDemoPagination(props) {
       totalPages: 5,
       loading: false,
     },
+    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),
@@ -203,6 +213,7 @@ const ReferralCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -216,8 +227,18 @@ const ReferralCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -241,6 +262,11 @@ function useDemoReferralCode(props) {
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
     isCopied: props.showNotificationText,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     isUsed: false,
     rewardStatus: "AVAILABLE",
     open,
@@ -254,53 +280,53 @@ function useDemoReferralCode(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
-  Wrapper: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-large)",
-  },
-  HeaderContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  ShareCodeContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  ShareButtonContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  TitleText: {
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-large)",
-    margin: "0",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet$1 = createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
 function ReferralCodesView(props) {
-  const { slots, titleText, states } = props;
+  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
+  const style = {
+    Wrapper: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-large)",
+      color: textColor,
+    },
+    HeaderContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    ShareCodeContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    ShareButtonContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    TitleText: {
+      fontSize: "var(--sl-font-size-large)",
+      margin: "0",
+    },
+  };
+  const vanillaStyle = `
+    :host {
+      display: block;
+    }
+    :host([hidden]): {
+      display: none;
+    }
+  `;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;
@@ -308,16 +334,16 @@ function ReferralCodesView(props) {
     if (states.loading) {
       return slots.loading;
     }
-    return (h("div", { class: sheet$1.classes.Wrapper },
-      h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
-      h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+    return (h("div", { class: sheet.classes.Wrapper },
+      h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
+      h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
   };
-  return (h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
-      styleString$1),
-    h("div", { class: sheet$1.classes.HeaderContainer },
-      h("h2", { class: sheet$1.classes.TitleText }, titleText),
+      styleString),
+    h("div", { class: sheet.classes.HeaderContainer },
+      h("h2", { class: sheet.classes.TitleText }, titleText),
       !states.noCodes && !states.loading && slots.pagination),
     getSlotContent(states)));
 }
@@ -377,6 +403,7 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return cjs({
     titleText: props.titleText,
+    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

package/dist/esm/sqm-password-field.entry.js

@@ -4,7 +4,7 @@ import { i as isDemo } from './index.module-89a79f66.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { E as ErrorStyles } from './mixins-83f90fa1.js';
+import { E as ErrorStyles } from './mixins-f750863a.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT } from './useRegistrationFormState-d6f33135.js';
 
 var constants = {