@saasquatch/mint-components 1.13.5-0 → 1.14.0-0

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

@@ -22,7 +22,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-14a02da4.js');
+const AutoColor = require('./AutoColor-3b59126f.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
 
@@ -42,11 +42,11 @@ const BigStat = class {
   disconnectedCallback() { }
   render() {
     var _a;
-    const { props, label } = index_module.isDemo() ? ShadowViewAddon.useDemoBigStat(this) : ShadowViewAddon.useBigStat(this);
+    const { props, label } = index_module.isDemo() ? AutoColor.useDemoBigStat(this) : AutoColor.useBigStat(this);
     const host = index_module._();
     const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = index.h("slot", { name: "label" }, hasLabel ? index.h("slot", null) : label);
-    return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
+    return index.h(AutoColor.BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
   }
 };
 
@@ -74,7 +74,7 @@ const BrandComponent = class {
     function getCss(brandColor) {
       if (brandColor) {
         try {
-          return ShadowViewAddon.autoColorScaleCss(brandColor);
+          return AutoColor.autoColorScaleCss(brandColor);
         }
         catch { }
       }
@@ -136,7 +136,7 @@ const CardFeed = class {
   }
   disconnectedCallback() { }
   render() {
-    return (index.h(ShadowViewAddon.CardFeedView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+    return (index.h(AutoColor.CardFeedView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
   }
 };
 
@@ -259,7 +259,7 @@ const CheckboxField = class {
     const { states, callbacks } = index_module.isDemo()
       ? useCheckboxFieldDemo(this)
       : useCheckboxField(this);
-    return (index.h(ShadowViewAddon.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+    return (index.h(AutoColor.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
 };
 function useCheckboxFieldDemo(props) {
@@ -500,7 +500,7 @@ const CouponCode = class {
     const props = index_module.isDemo()
       ? useDemoCouponCode(thisProps)
       : useCouponCode(thisProps);
-    return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, props));
+    return index.h(AutoColor.CouponCodeView, Object.assign({}, props));
   }
 };
 function useDemoCouponCode(props) {
@@ -646,7 +646,7 @@ const DropdownField = class {
     const { states } = index_module.isDemo()
       ? useDropdownFieldDemo(this)
       : useDropdownField();
-    return (index.h(ShadowViewAddon.DropdownFieldView, { states: states, content: content }));
+    return (index.h(AutoColor.DropdownFieldView, { states: states, content: content }));
   }
 };
 function useDropdownFieldDemo(props) {
@@ -836,7 +836,7 @@ const EditProfile = class {
     const props = index_module.isDemo()
       ? useEditProfileDemo(utils.getProps(this))
       : useEditProfile(utils.getProps(this));
-    return index.h(ShadowViewAddon.EditProfileView, Object.assign({}, props));
+    return index.h(AutoColor.EditProfileView, Object.assign({}, props));
   }
 };
 function useEditProfileDemo(props) {
@@ -944,7 +944,7 @@ const Hero = class {
         secondaryColumn: index.h("slot", { name: "secondary-column" }),
       },
     };
-    return index.h(ShadowViewAddon.HeroView, Object.assign({}, props));
+    return index.h(AutoColor.HeroView, Object.assign({}, props));
   }
 };
 
@@ -1252,7 +1252,7 @@ const InputField = class {
       return (index.h(RequiredPropsError, { missingProps: missingProps, heading: "An error occured while loading this form", subheading: "A technical problem prevented this input field from loading. Please contact us with the link to this page.", description: "Values for the following attributes are missing:" }));
     }
     const { states } = index_module.isDemo() ? useInputFieldDemo(this) : useInputField();
-    return index.h(ShadowViewAddon.InputFieldView, { states: states, content: content });
+    return index.h(AutoColor.InputFieldView, { states: states, content: content });
   }
 };
 function useInputFieldDemo(props) {
@@ -1457,7 +1457,7 @@ const Leaderboard = class {
     this.maxRows = 10;
     this.ignored = true;
     stencilHooks_module.h$1(this);
-    ShadowViewAddon.withShadowView(this);
+    AutoColor.withShadowView(this);
   }
   disconnectedCallback() { }
   render() {
@@ -1483,7 +1483,7 @@ const Leaderboard = class {
     const viewprops = index_module.isDemo()
       ? useLeaderboardDemo(demoProps)
       : useLeaderboard(props);
-    return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, viewprops));
+    return index.h(AutoColor.LeaderboardView, Object.assign({}, viewprops));
   }
 };
 function EmptySlot() {
@@ -1630,7 +1630,7 @@ const MarketingEmailsCheckbox = class {
     const { states, callbacks } = index_module.isDemo()
       ? useCheckboxFieldDemo$1(this)
       : useCheckboxField(this);
-    return (index.h(ShadowViewAddon.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
+    return (index.h(AutoColor.CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
 };
 function useCheckboxFieldDemo$1(props) {
@@ -1675,7 +1675,7 @@ const NameFields = class {
   disconnectedCallback() { }
   render() {
     const { states } = index_module.isDemo() ? useNameFieldsDemo(this) : useNameFields(this);
-    return index.h(ShadowViewAddon.NameFieldsView, { states: states });
+    return index.h(AutoColor.NameFieldsView, { states: states });
   }
 };
 function useNameFieldsDemo(props) {
@@ -2279,7 +2279,7 @@ const PortalChangeMarketing = class {
     const props = index_module.isDemo()
       ? usePortalProfileDemo(utils.getProps(this))
       : usePortalProfile(utils.getProps(this));
-    return index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, props));
+    return index.h(AutoColor.ChangeMarktingView, Object.assign({}, props));
   }
 };
 function usePortalProfileDemo(props) {
@@ -2462,7 +2462,7 @@ const PortalChangePassword = class {
     const { states, callbacks } = index_module.isDemo()
       ? usePortalChangePasswordDemo(this)
       : usePortalChangePassword(this);
-    return index.h(ShadowViewAddon.PortalChangePasswordView, { states: states, callbacks: callbacks });
+    return index.h(AutoColor.PortalChangePasswordView, { states: states, callbacks: callbacks });
   }
 };
 function usePortalChangePasswordDemo(props) {
@@ -2554,7 +2554,7 @@ const PortalFooter = class {
   }
   disconnectedCallback() { }
   render() {
-    return index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, utils.getProps(this)));
+    return index.h(AutoColor.PortalFooterView, Object.assign({}, utils.getProps(this)));
   }
   static get assetsDirs() { return ["../../assets"]; }
 };
@@ -2589,7 +2589,7 @@ const PortalFrame = class {
     const props = index_module.isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
       : usePortalFrame(footerContent, headerContent);
-    return (index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props), index.h("slot", null)));
+    return (index.h(AutoColor.PortalFrameView, Object.assign({}, props), index.h("slot", null)));
   }
 };
 function usePortalFrameDemo(footerContent, headerContent, props) {
@@ -2983,7 +2983,7 @@ const PortalRegister = class {
       lowercaseErrorText: this.lowercaseErrorText,
       hasErrorText: this.hasErrorText,
     };
-    return (index.h(ShadowViewAddon.PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+    return (index.h(AutoColor.PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
 };
 function useRegisterDemo(props) {
@@ -3363,7 +3363,7 @@ const SqmReferralIframe = class {
     const { states, data } = index_module.isDemo()
       ? useReferralIframeDemo(utils.getProps(this))
       : useReferralIframe(utils.getProps(this));
-    return (index.h(index.Host, { style: { display: "contents" } }, index.h(ShadowViewAddon.ReferralIframeView, { data: data, states: states })));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h(AutoColor.ReferralIframeView, { data: data, states: states })));
   }
 };
 function useReferralIframeDemo(props) {
@@ -4327,7 +4327,7 @@ const SqmRewardExchangeList = class {
     const { states, data, callbacks, refs } = index_module.isDemo()
       ? useRewardExchangeListDemo(props)
       : useRewardExchangeList(props);
-    return (index.h(index.Host, { style: { display: "contents" } }, index.h(ShadowViewAddon.RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h(AutoColor.RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
   }
   static get assetsDirs() { return ["assets"]; }
 };
@@ -4353,7 +4353,7 @@ function useRewardExchangeListDemo(props) {
     },
     data: {
       shareCode: "SHARECODE123",
-      exchangeList: ShadowViewAddon.demoRewardExchange.data.exchangeList,
+      exchangeList: AutoColor.demoRewardExchange.data.exchangeList,
     },
     callbacks: {
       exchangeReward: () => { },
@@ -4506,8 +4506,8 @@ const ShareButton = class {
     const thisProps = utils.getProps(this);
     const props = index_module.isDemo()
       ? useDemoShareButton(thisProps)
-      : ShadowViewAddon.useShareButton(thisProps);
-    return (index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), index.h("slot", null)));
+      : AutoColor.useShareButton(thisProps);
+    return (index.h(AutoColor.ShareButtonView, Object.assign({}, props), index.h("slot", null)));
   }
 };
 function useDemoShareButton(props) {
@@ -4682,7 +4682,7 @@ const ShareLink = class {
     const thisProps = utils.getProps(this);
     const props = index_module.isDemo()
       ? useDemoShareLink(thisProps)
-      : ShadowViewAddon.useShareLink(thisProps);
+      : AutoColor.useShareLink(thisProps);
     return index.h(copyTextView.CopyTextView, Object.assign({}, props));
   }
 };
@@ -4729,7 +4729,7 @@ const StatContainer = class {
   }
   disconnectedCallback() { }
   render() {
-    return (index.h(ShadowViewAddon.StatContainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+    return (index.h(AutoColor.StatContainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
   }
 };
 
@@ -4888,13 +4888,13 @@ const TaskCard = class {
   disconnectedCallback() { }
   render() {
     const { props } = index_module.isDemo()
-      ? ShadowViewAddon.useDemoBigStat(this)
-      : ShadowViewAddon.useBigStat({ ...utils.getProps(this), programId: this.programId });
+      ? AutoColor.useDemoBigStat(this)
+      : AutoColor.useBigStat({ ...utils.getProps(this), programId: this.programId });
     const { value, loading } = props;
     const { states, callbacks } = index_module.isDemo()
       ? useTaskCardDemo(this)
       : useTaskCard(this);
-    return (index.h(ShadowViewAddon.TaskCardView, { callbacks: callbacks, states: {
+    return (index.h(AutoColor.TaskCardView, { callbacks: callbacks, states: {
         loading,
         loadingEvent: states.loadingEvent,
         progress: value,

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

@@ -0,0 +1,349 @@
+'use strict';
+
+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 index_module = require('./index.module-ee84433d.js');
+const cjs = require('./cjs-1066ec21.js');
+const utils = require('./utils-6847bc06.js');
+const JSS = require('./JSS-8503a151.js');
+const mixins = require('./mixins-f7e0377a.js');
+const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const parseStates = require('./parseStates-d1effc19.js');
+const keys = require('./keys-cff24974.js');
+const useVerificationEmail = require('./useVerificationEmail-95a82767.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.";
+    /**
+     * @parentState {"parent": "sqm-widget-verification", "title": "Code Step" }
+     * @componentState { "title": "Verification Failed", "props": { "states": { "verifyFailed": true } } }
+     * @componentState { "title": "Loading", "props": { "states": { "loading": true } } }
+     */
+    this.stateController = "{}";
+    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 || parseStates.parseStates(props.stateController) || {}, { arrayMerge: (_, a) => a });
+}
+
+exports.sqm_code_verification = WidgetCodeVerification;

package/dist/cjs/sqm-invoice-table-data-cell_5.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-a29c60ef.js');
+const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
+const utils = require('./utils-6847bc06.js');
+const luxon = require('./luxon-2926d85f.js');
+
+const InvoiceTableDataCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return this.data;
+  }
+};
+
+const RewardTableDateCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    this.locale = "en";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a, _b;
+    const date = !this.date
+      ? "-"
+      : (_b = (_a = luxon.luxon.DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.setLocale(utils.luxonLocale(this.locale))) === null || _b === void 0 ? void 0 : _b.toLocaleString(luxon.luxon.DateTime.DATE_MED);
+    return date;
+  }
+};
+
+const InvoiceTableDownloadCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const vanillaStyle = `svg:hover, svg:hover * {
+      cursor: pointer;
+    }`;
+    return (index.h(index.Host, null, index.h("style", null, vanillaStyle), !!this.downloadUrl && (index.h("a", { href: this.downloadUrl, target: "_blank" }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.625 12.4375C0.79076 12.4375 0.949732 12.5033 1.06694 12.6206C1.18415 12.7378 1.25 12.8967 1.25 13.0625V16.1875C1.25 16.519 1.3817 16.837 1.61612 17.0714C1.85054 17.3058 2.16848 17.4375 2.5 17.4375H17.5C17.8315 17.4375 18.1495 17.3058 18.3839 17.0714C18.6183 16.837 18.75 16.519 18.75 16.1875V13.0625C18.75 12.8967 18.8158 12.7378 18.9331 12.6206C19.0503 12.5033 19.2092 12.4375 19.375 12.4375C19.5408 12.4375 19.6997 12.5033 19.8169 12.6206C19.9342 12.7378 20 12.8967 20 13.0625V16.1875C20 16.8505 19.7366 17.4864 19.2678 17.9553C18.7989 18.4241 18.163 18.6875 17.5 18.6875H2.5C1.83696 18.6875 1.20107 18.4241 0.732233 17.9553C0.263392 17.4864 0 16.8505 0 16.1875V13.0625C0 12.8967 0.065848 12.7378 0.183058 12.6206C0.300269 12.5033 0.45924 12.4375 0.625 12.4375Z", fill: "#717179" }), index.h("path", { d: "M9.5575 14.88C9.61556 14.9382 9.68453 14.9844 9.76046 15.0159C9.83639 15.0474 9.91779 15.0636 10 15.0636C10.0822 15.0636 10.1636 15.0474 10.2395 15.0159C10.3155 14.9844 10.3844 14.9382 10.4425 14.88L14.1925 11.13C14.3099 11.0126 14.3758 10.8535 14.3758 10.6875C14.3758 10.5215 14.3099 10.3624 14.1925 10.245C14.0751 10.1276 13.916 10.0617 13.75 10.0617C13.584 10.0617 13.4249 10.1276 13.3075 10.245L10.625 12.9288V1.9375C10.625 1.77174 10.5592 1.61277 10.4419 1.49556C10.3247 1.37835 10.1658 1.3125 10 1.3125C9.83424 1.3125 9.67527 1.37835 9.55806 1.49556C9.44085 1.61277 9.375 1.77174 9.375 1.9375V12.9288L6.6925 10.245C6.57514 10.1276 6.41597 10.0617 6.25 10.0617C6.08403 10.0617 5.92486 10.1276 5.8075 10.245C5.69014 10.3624 5.62421 10.5215 5.62421 10.6875C5.62421 10.8535 5.69014 11.0126 5.8075 11.13L9.5575 14.88Z", fill: "#717179" }))))));
+  }
+};
+
+const TableCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** @uiName Column span  */
+    this.colspan = 1;
+    /** @uiName Padding */
+    this.padding = "15px 10px";
+  }
+  render() {
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h("td", { colSpan: this.colspan, style: { padding: this.padding } }, index.h("slot", null))));
+  }
+};
+
+const TableRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Border
+     */
+    this.border = "1px solid #EAEAEA";
+  }
+  render() {
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h("tr", { style: { border: this.border } }, index.h("slot", null))));
+  }
+};
+
+exports.sqm_invoice_table_data_cell = InvoiceTableDataCell;
+exports.sqm_invoice_table_date_cell = RewardTableDateCell;
+exports.sqm_invoice_table_download_cell = InvoiceTableDownloadCell;
+exports.sqm_table_cell = TableCell;
+exports.sqm_table_row = TableRow;