@saasquatch/mint-components 1.15.0-5 → 1.15.0-50

package/dist/cjs/{sqm-close-button-view-ea3fa23b.js → sqm-close-button-view-5e85ac51.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-a29c60ef.js');
+const index = require('./index-a43a63b4.js');
 const JSS = require('./JSS-8503a151.js');
-const mixins = require('./mixins-f7e0377a.js');
+const mixins = require('./mixins-4761d472.js');
 
 const style = {
   HostBlock: mixins.HostBlock,

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
+require('./mixins-4761d472.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-5e85ac51.js');
 
 const CloseButton = class {
   constructor(hostRef) {

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

@@ -0,0 +1,342 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const global = require('./global-6d0d196d.js');
+const index_module = require('./index.module-39955732.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-4761d472.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
+const keys = require('./keys-cff24974.js');
+const useVerificationEmail = require('./useVerificationEmail-1496b993.js');
+
+const style = {
+  Wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-medium)",
+    maxWidth: "550px",
+  },
+  HeaderContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  InputsContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    position: "relative",
+    flexDirection: "column",
+  },
+  CodeInputContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+  },
+  CodeInput: {
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  CodeInputError: {
+    ...mixins.ErrorStyles,
+    maxWidth: "40px",
+    "&::part(input)": {
+      margin: "0",
+      padding: "0 var(--sl-input-spacing-small)",
+      fontSize: "var(--sl-font-size-large)",
+    },
+  },
+  ErrorText: {
+    color: "var(--sl-color-danger-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+  ContinueButton: {
+    width: "100%",
+    maxWidth: "100px",
+  },
+  FooterContainer: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  SkeletonTwo: {
+    width: "30%",
+    height: "34px",
+  },
+  SkeletonThree: {
+    width: "15%",
+    height: "24px",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+
+
+`;
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+function WidgetCodeVerificationView(props) {
+  const { states, refs, callbacks, text } = props;
+  const resendCodeText = global.intl.formatMessage({
+    id: "resendCodeText",
+    defaultMessage: text.resendCodeText,
+  }, {
+    resendCodeLink: (index.h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+        e.preventDefault();
+        callbacks.resendEmail();
+      } }, text.resendCodeLabel)),
+  });
+  const codeResentSuccessfully = global.intl.formatMessage({
+    id: "codeResentSuccessfully",
+    defaultMessage: text.codeResentSuccessfullyText,
+  }, {
+    email: states.email,
+  });
+  const inputClass = states.verifyFailed
+    ? sheet.classes.CodeInputError
+    : sheet.classes.CodeInput;
+  return (index.h("div", { part: "sqm-base" },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    index.h("div", { class: sheet.classes.Wrapper },
+      index.h("div", { class: sheet.classes.HeaderContainer },
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, global.intl.formatMessage({
+          id: `emailHeaderText`,
+          defaultMessage: states.verifyFailed
+            ? text.reverifyCodeHeaderText
+            : text.verifyCodeHeaderText,
+        }, { email: states.email }))),
+      states.emailResent && (index.h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+        index.h("b", null, codeResentSuccessfully))),
+      index.h("div", { class: sheet.classes.InputsContainer },
+        index.h("div", { ref: refs.codeWrapperRef, class: sheet.classes.CodeInputContainer },
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" }),
+          index.h("sl-input", { class: inputClass, name: "code" })),
+        states.verifyFailed && (index.h("p", { class: sheet.classes.ErrorText }, text.invalidCodeText)),
+        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.submitCode, disabled: states.loading || states.initialiseLoading, loading: states.loading || states.initialiseLoading, exportparts: "base: primarybutton-base", type: "primary" }, text.verifyText)),
+      index.h("div", { class: sheet.classes.FooterContainer },
+        index.h(sqmTextSpanView.TextSpanView, { type: "p" }, resendCodeText)))));
+}
+
+const VerifyEmailWithCodeMutation = index_module.dist.gql `
+  mutation submitImpactPublisherEmail2FACode(
+    $user: UserIdInput!
+    $code: String!
+  ) {
+    submitImpactPublisherEmail2FACode(user: $user, code: $code) {
+      verifiedEmail
+      accessKey
+    }
+  }
+`;
+function useWidgetCodeVerification(props) {
+  const host = stencilHooks_module.l();
+  const [_, setShowCode] = index_module.Pn(keys.SHOW_CODE_NAMESPACE);
+  const email = index_module.Fn(keys.VERIFICATION_EMAIL_NAMESPACE);
+  const [emailSent, setEmailSent] = stencilHooks_module.useState(false);
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const [codeRef, setCodeRef] = stencilHooks_module.useState(null);
+  const [validationError, setValidationError] = stencilHooks_module.useState(false);
+  const [emailError, setEmailError] = stencilHooks_module.useState(false);
+  const { initialized, verificationEmail, send: [sendEmail, { loading: sendLoading, errors: sendErrors }], verify: [verifyEmail, { loading: verifyLoading, errors: verifyErrors }], } = useVerificationEmail.useVerificationEmail();
+  stencilHooks_module.useEffect(() => {
+    if (!codeRef)
+      return;
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    codeElements.forEach((element, idx) => {
+      element.addEventListener("focus", (e) => {
+        e.target.select();
+      });
+      element.addEventListener("keydown", (e) => {
+        if (e.key === "Backspace" && e.target.value === "") {
+          codeElements[Math.max(0, idx - 1)].focus();
+        }
+      });
+      element.addEventListener("input", (e) => {
+        const input = e.data;
+        if (!input)
+          return;
+        if (idx === codeElements.length - 1) {
+          e.target.value = input.slice(0, 1);
+          return;
+        }
+        if (input.length > 1) {
+          const rest = input.slice(1);
+          e.target.value = input.slice(0, 1);
+          codeElements[idx + 1].dispatchEvent(new InputEvent("input", {
+            inputType: "insertFromPaste",
+            data: rest,
+          }));
+        }
+        codeElements[idx + 1].focus();
+      });
+    });
+  }, [codeRef]);
+  const reset = () => {
+    setShowCode(false);
+    setValidationError(false);
+  };
+  const resendEmail = async () => {
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result) {
+      setEmailError(true);
+      return;
+    }
+    if (emailSent)
+      setEmailResent(true);
+    setEmailSent(true);
+  };
+  const submitCode = async () => {
+    const slInputs = codeRef.querySelectorAll("sl-input");
+    const codeElements = Array.from(slInputs).map((node) => node.shadowRoot.querySelector(`input[name="code"]`));
+    if (codeElements.find((el) => !el.value)) {
+      setValidationError(true);
+      return;
+    }
+    let code = "";
+    codeElements.forEach((element) => {
+      code = `${code}${element.value}`;
+    });
+    // UI should only allow this to be called if initialized, but checking just in case
+    if (!initialized)
+      return;
+    setValidationError(false);
+    const res = await verifyEmail(code);
+    if (res === null || res === void 0 ? void 0 : res.success) {
+      props.onVerification(res.accessKey);
+      reset();
+    }
+    else {
+      setValidationError(true);
+    }
+  };
+  stencilHooks_module.useEffect(() => {
+    // Wait for mutations to be determined from user lookup
+    if (!initialized)
+      return;
+    // email should already exist if user has completed email-verification
+    if (!email)
+      resendEmail();
+    else
+      setEmailSent(true);
+  }, [initialized]);
+  return {
+    refs: {
+      codeWrapperRef: setCodeRef,
+    },
+    states: {
+      email: verificationEmail,
+      emailResent,
+      resendError: sendErrors || verifyErrors,
+      initialiseLoading: !initialized,
+      loading: sendLoading || verifyLoading,
+      verifyFailed: !!validationError,
+    },
+    callbacks: {
+      resendEmail,
+      submitCode,
+    },
+    text: props.getTextProps(),
+  };
+}
+
+const WidgetCodeVerification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Verify code widget header text
+     */
+    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * @uiName Reverify code widget header text
+     */
+    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
+    /**
+     * Text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
+    /**
+     * The link that appears in the resend code link
+     * @uiName Resend code label
+     */
+    this.resendCodeLabel = "Resend code";
+    /**
+     * Link text displayed under verify button
+     * @uiName Resend code text
+     */
+    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
+    /**
+     * Error text displayed under verification input
+     * @uiName Invalid code text
+     */
+    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
+    /**
+     * @uiName Verify code button text
+     */
+    this.verifyText = "Verify";
+    /**
+     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoWidgetCodeVerification(this)
+      : useWidgetCodeVerification(this);
+    return index.h(WidgetCodeVerificationView, Object.assign({}, props));
+  }
+};
+function useDemoWidgetCodeVerification(props) {
+  const [emailResent, setEmailResent] = stencilHooks_module.useState(false);
+  const setVerifiedContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
+  return cjs.cjs({
+    states: {
+      initialiseLoading: false,
+      loading: false,
+      email: "test@example.com",
+      emailResent,
+      verifyFailed: false,
+    },
+    refs: {
+      codeWrapperRef: () => { },
+    },
+    callbacks: {
+      resendEmail: async () => setEmailResent(true),
+      submitCode: async () => setVerifiedContext(true),
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_code_verification = WidgetCodeVerification;

package/dist/cjs/sqm-context-router.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index$1 = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 const utils = require('./utils-6847bc06.js');
 const index = require('./index-8c6255f5.js');
 

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

@@ -2,16 +2,16 @@
 
 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-261393c6.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const global = require('./global-6d0d196d.js');
+const index_module = require('./index.module-39955732.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
+const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
 const keys = require('./keys-cff24974.js');
-const useVerificationEmail = require('./useVerificationEmail-95a82767.js');
+const useVerificationEmail = require('./useVerificationEmail-1496b993.js');
 
 const UpsertUserEmailMutation = index_module.dist.gql `
   mutation upsertUser($userInput: UserInput!) {

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

@@ -2,13 +2,13 @@
 
 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-261393c6.js');
-require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const global = require('./global-6d0d196d.js');
+require('./index.module-39955732.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 
 function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
@@ -83,12 +83,6 @@ const PortalContainer = class {
      * @uiEnumNames ["Wrap", "No Wrap"]
      */
     this.flexWrap = "wrap";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff00";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -97,54 +91,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) {
     index.registerInstance(this, hostRef);
@@ -154,6 +100,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 (index.h("div", null, index.h("style", null, vanillaStyle), index.h("slot", null)));
   }
 };

package/dist/cjs/sqm-form-message.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
 
 const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Warning::part(base){background-color:var(--sl-color-warning-100);border-color:var(--sl-color-warning-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
 

package/dist/cjs/sqm-google-sign-in.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 
 function useGoogleSignIn(props) {
   const [loaded, setLoaded] = stencilHooks_module.useState(false);

package/dist/cjs/sqm-graphql-client-provider.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 
 async function useGraphQLClientProvider({ domain }) {
   const token = index_module.G();

package/dist/cjs/sqm-header-logo.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
 
 const HeroImage = class {
   constructor(hostRef) {

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a29c60ef.js');
-const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const index_module = require('./index.module-ee84433d.js');
+const index = require('./index-a43a63b4.js');
+const stencilHooks_module = require('./stencil-hooks.module-62264802.js');
+const index_module = require('./index.module-39955732.js');
 require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
-require('./mixins-f7e0377a.js');
-const emailRegistrationView = require('./email-registration-view-55b378dc.js');
-require('./useRegistrationFormState-7b820f0c.js');
-const useInstantAccessRegistration = require('./useInstantAccessRegistration-0537e28e.js');
+require('./mixins-4761d472.js');
+const emailRegistrationView = require('./email-registration-view-996fb438.js');
+require('./useRegistrationFormState-5f44ca80.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-86b7164c.js');
 
 const InstantAccessRegistration = class {
   constructor(hostRef) {
@@ -102,7 +102,7 @@ const InstantAccessRegistration = class {
      * @uiGroup Card style
      * @uiType string
      */
-    this.backgroundColor = "#ffffff";
+    this.backgroundColor = "var(--sqm-portal-background)";
     /**
      * @undocumented
      * @uiType boolean