@saasquatch/mint-components 2.1.9-12 → 2.1.9-14

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

@@ -33,7 +33,6 @@ const data = require('./data-e83f8a41.js');
 const keys = require('./keys-cff24974.js');
 require('./eventKeys-7af4df4d.js');
 const usePayoutStatus = require('./usePayoutStatus-cf050a03.js');
-const parseStates = require('./parseStates-d1effc19.js');
 
 /**
  *
@@ -3215,6 +3214,19 @@ function PayoutStatusAlertView(props) {
       getButton(states.status))));
 }
 
+function parseStates(states) {
+  if (typeof states === "string") {
+    try {
+      return JSON.parse(states);
+    }
+    catch (e) {
+      return undefined;
+    }
+  }
+  if (typeof states === "object")
+    return states;
+}
+
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -3393,7 +3405,7 @@ const PayoutStatusAlert = class {
   }
 };
 function useDemoPayoutStatusAlert(props) {
-  const states = parseStates.parseStates(props.stateController);
+  const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -5772,7 +5784,7 @@ function EmptySlot$1() {
   return (index.h("slot", { name: "empty" }, index.h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
-  const states = parseStates.parseStates(props.stateController);
+  const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -7754,7 +7766,7 @@ function useDemoTaxAndCash(props) {
     namespace: data.TAX_CONTEXT_NAMESPACE,
     initialValue: "/1",
   });
-  const states = parseStates.parseStates(props.stateController);
+  const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-tax-and-cash"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
@@ -8233,11 +8245,6 @@ const WidgetVerification = class {
         "&::part(panel)": {
           maxWidth: "480px",
         },
-        "&::part(title)": {
-          fontSize: "var(--sl-font-size-x-large)",
-          fontWeight: "600",
-          padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-        },
         "&::part(body)": {
           padding: "0 var(--sl-spacing-x-large)",
           fontSize: "var(--sl-font-size-small)",
@@ -8251,9 +8258,12 @@ const WidgetVerification = class {
         "&::part(overlay)": {
           background: "rgba(0, 0, 0, 0.5)",
         },
-        "&::part(close-button)": {
-          display: "none",
-        },
+      },
+      DialogTitle: {
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "600",
+        padding: "var(--sl-spacing-x-large) 0 0 0",
+        margin: "0",
       },
     };
     const sheet = JSS.createStyleSheet(style);
@@ -8263,21 +8273,21 @@ const WidgetVerification = class {
     const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
     const renderStepContent = () => {
       if (props.showPartnerModal) {
-        return (index.h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText)));
+        return (index.h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
       }
       if (props.showCode) {
         return (index.h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
       }
       return (index.h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
     };
-    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: true, label: dialogLabel, "onSl-request-close": (e) => {
+    return (index.h("div", null, index.h("style", { type: "text/css" }, styleString), index.h("sl-dialog", { class: sheet.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
         e.preventDefault();
       }, "onSl-hide": (e) => {
         var _a;
         if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
           e.preventDefault();
         }
-      } }, renderStepContent())));
+      } }, index.h("h2", { class: sheet.classes.DialogTitle }, dialogLabel), renderStepContent())));
   }
 };
 function useDemoWidgetVerificationInternal(props) {
@@ -8290,7 +8300,7 @@ function useDemoWidgetVerificationInternal(props) {
     initialValue: undefined,
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
-  const states = parseStates.parseStates(props.stateController);
+  const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});

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

@@ -10,10 +10,9 @@ 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-f274fdf2.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-7bcb2262.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-2d6e89a4.js');
 const keys = require('./keys-cff24974.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
-const parseStates = require('./parseStates-d1effc19.js');
 const useVerificationEmail = require('./useVerificationEmail-994bc32f.js');
 
 const UpsertUserEmailMutation = index_module.dist.gql `
@@ -431,6 +430,7 @@ const GET_USER_PARTNER_INFO = index_module.dist.gql `
         impactConnection {
           connected
           publisher {
+            id
             phoneNumber
             phoneNumberCountryCode
             countryCode
@@ -754,8 +754,6 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = domContextHooks_module.useState("US");
   const [currency, setCurrency] = domContextHooks_module.useState("");
   const [error, setError] = domContextHooks_module.useState("");
-  const parsed = parseStates.parseStates(props.stateController);
-  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
   // @ts-ignore
   return cjs.cjs({
     states: {
@@ -810,7 +808,7 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
+  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
 }
 
 exports.sqm_email_verification = WidgetEmailVerification;

package/dist/cjs/{sqm-partner-info-modal-view-7bcb2262.js → sqm-partner-info-modal-view-2d6e89a4.js}

@@ -8,11 +8,6 @@ const style = {
     "&::part(panel)": {
       maxWidth: "480px",
     },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large)",
       fontSize: "var(--sl-font-size-small)",
@@ -21,14 +16,17 @@ const style = {
     "&::part(footer)": {
       display: "flex",
       flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
+      padding: "0 var(--sl-spacing-large) var(--sl-spacing-large) var(--sl-spacing-large)",
     },
     "&::part(overlay)": {
       background: "rgba(0, 0, 0, 0.5)",
     },
-    "&::part(close-button)": {
-      display: "none",
-    },
+  },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-x-large) 0 0 0",
+    margin: "0",
   },
   FormFields: {
     display: "flex",
@@ -55,22 +53,24 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-small)",
+    margin: "0",
     "& > p": {
       margin: "0",
     },
   },
+  SubmitButton: {
+    width: "100%",
+    marginTop: "var(--sl-spacing-small)",
+  },
 };
 function PartnerInfoModalContentView(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  const description = states.isExistingPartner ? (index.h("div", { class: sheet.classes.DescriptionContainer },
+  const description = states.isExistingPartner ? (index.h("span", { class: sheet.classes.DescriptionContainer },
     index.h("p", null, text.descriptionExistingPartner),
-    index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", null,
-    " ",
-    text.descriptionNewPartner));
+    index.h("p", null, text.supportDescriptionExistingPartner))) : (index.h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
@@ -78,17 +78,17 @@ function PartnerInfoModalContentView(props) {
     index.h("style", { type: "text/css" }, styleString),
     description,
     index.h("div", { class: sheet.classes.FormFields },
-      index.h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCountryChange },
+      index.h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
         index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
             var _a;
             callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
           } }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
         _a.map((c) => (index.h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
-      index.h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCurrencyChange },
+      index.h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
         index.h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
         _b.map((c) => (index.h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
     states.error && index.h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel),
+    index.h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel),
   ];
 }
 function PartnerInfoModalView(props) {
@@ -97,7 +97,7 @@ function PartnerInfoModalView(props) {
   console.log(states, "partner info modal states"); // TEMP
   if (!states.open)
     return index.h("div", null);
-  return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
+  return (index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
       ? text.modalHeaderExistingPartner
       : text.modalHeader, "onSl-request-close": (e) => {
       e.preventDefault();
@@ -107,6 +107,9 @@ function PartnerInfoModalView(props) {
         e.preventDefault();
       }
     } },
+    index.h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
+      ? text.modalHeaderExistingPartner
+      : text.modalHeader),
     index.h(PartnerInfoModalContentView, Object.assign({}, props))));
 }
 

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

@@ -38,7 +38,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js'
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-923ff8d9.js');
 const data = require('./data-e83f8a41.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
-const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-7bcb2262.js');
+const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-2d6e89a4.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal-view.js

@@ -5,11 +5,6 @@ const style = {
     "&::part(panel)": {
       maxWidth: "480px",
     },
-    "&::part(title)": {
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "600",
-      padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-    },
     "&::part(body)": {
       padding: "0 var(--sl-spacing-x-large)",
       fontSize: "var(--sl-font-size-small)",
@@ -18,14 +13,17 @@ const style = {
     "&::part(footer)": {
       display: "flex",
       flexDirection: "column",
-      gap: "var(--sl-spacing-small)",
+      padding: "0 var(--sl-spacing-large) var(--sl-spacing-large) var(--sl-spacing-large)",
     },
     "&::part(overlay)": {
       background: "rgba(0, 0, 0, 0.5)",
     },
-    "&::part(close-button)": {
-      display: "none",
-    },
+  },
+  DialogTitle: {
+    fontSize: "var(--sl-font-size-x-large)",
+    fontWeight: "600",
+    padding: "var(--sl-spacing-x-large) 0 0 0",
+    margin: "0",
   },
   FormFields: {
     display: "flex",
@@ -52,22 +50,24 @@ const style = {
     display: "flex",
     flexDirection: "column",
     gap: "var(--sl-spacing-medium)",
-    marginTop: "var(--sl-spacing-small)",
+    margin: "0",
     "& > p": {
       margin: "0",
     },
   },
+  SubmitButton: {
+    width: "100%",
+    marginTop: "var(--sl-spacing-small)",
+  },
 };
 export function PartnerInfoModalContentView(props) {
   var _a, _b;
   const { states, callbacks, text } = props;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const description = states.isExistingPartner ? (h("div", { class: sheet.classes.DescriptionContainer },
+  const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
     h("p", null, text.descriptionExistingPartner),
-    h("p", null, text.supportDescriptionExistingPartner))) : (h("p", null,
-    " ",
-    text.descriptionNewPartner));
+    h("p", null, text.supportDescriptionExistingPartner))) : (h("p", { class: sheet.classes.DescriptionContainer }, text.descriptionNewPartner));
   const buttonLabel = states.isExistingPartner
     ? text.confirmButtonLabel
     : text.submitButtonLabel;
@@ -75,17 +75,17 @@ export function PartnerInfoModalContentView(props) {
     h("style", { type: "text/css" }, styleString),
     description,
     h("div", { class: sheet.classes.FormFields },
-      h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCountryChange },
+      h("sl-select", { key: `country-${states.countryCode}`, exportparts: "label: input-label, base: input-base", label: text.countryLabel, value: states.countryCode, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCountryChange },
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCountryPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => {
             var _a;
             callbacks.setCountrySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
           } }), (_a = states.filteredCountries) === null || _a === void 0 ? void 0 :
         _a.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName)))),
-      h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, "onSl-select": callbacks.onCurrencyChange },
+      h("sl-select", { key: `currency-${states.currency}`, exportparts: "label: input-label, base: input-base", label: text.currencyLabel, value: states.currency, disabled: states.submitting || !!states.isExistingPartner, required: true, hoist: true, "onSl-select": callbacks.onCurrencyChange },
         h("sl-input", { class: sheet.classes.SearchInput, placeholder: text.searchCurrencyPlaceholder, onKeyDown: (e) => e.stopPropagation(), "onSl-input": (e) => { var _a; return callbacks.setCurrencySearch((_a = e.target) === null || _a === void 0 ? void 0 : _a.value); } }), (_b = states.filteredCurrencies) === null || _b === void 0 ? void 0 :
         _b.map((c) => (h("sl-menu-item", { value: c.currencyCode }, c.currencyCode))))),
     states.error && h("p", { class: sheet.classes.ErrorMessage }, states.error),
-    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, style: { width: "100%" }, exportparts: "base: primarybutton-base" }, buttonLabel),
+    h("sl-button", { slot: "footer", type: "primary", loading: states.submitting, disabled: states.submitting || !states.countryCode || !states.currency, onClick: callbacks.onSubmit, class: sheet.classes.SubmitButton, exportparts: "base: primarybutton-base" }, buttonLabel),
   ];
 }
 export function PartnerInfoModalView(props) {
@@ -94,7 +94,7 @@ export function PartnerInfoModalView(props) {
   console.log(states, "partner info modal states"); // TEMP
   if (!states.open)
     return h("div", null);
-  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: false, label: states.isExistingPartner
+  return (h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, noHeader: true, label: states.isExistingPartner
       ? text.modalHeaderExistingPartner
       : text.modalHeader, "onSl-request-close": (e) => {
       e.preventDefault();
@@ -104,5 +104,8 @@ export function PartnerInfoModalView(props) {
         e.preventDefault();
       }
     } },
+    h("h2", { class: sheet.classes.DialogTitle }, states.isExistingPartner
+      ? text.modalHeaderExistingPartner
+      : text.modalHeader),
     h(PartnerInfoModalContentView, Object.assign({}, props))));
 }

package/dist/collection/components/sqm-partner-info-modal/sqm-partner-info-modal.js

@@ -2,7 +2,6 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { PartnerInfoModalContentView, PartnerInfoModalView, } from "./sqm-partner-info-modal-view";
 import { usePartnerInfoModal, } from "./usePartnerInfoModal";
@@ -521,8 +520,6 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = useState("US");
   const [currency, setCurrency] = useState("");
   const [error, setError] = useState("");
-  const parsed = parseStates(props.stateController);
-  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
   // @ts-ignore
   return deepmerge({
     states: {
@@ -577,5 +574,5 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
+  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
 }

package/dist/collection/components/sqm-partner-info-modal/usePartnerInfoModal.js

@@ -18,6 +18,7 @@ export const GET_USER_PARTNER_INFO = gql `
         impactConnection {
           connected
           publisher {
+            id
             phoneNumber
             phoneNumberCountryCode
             countryCode

package/dist/collection/components/sqm-widget-verification/sqm-widget-verification.js

@@ -215,11 +215,6 @@ export class WidgetVerification {
         "&::part(panel)": {
           maxWidth: "480px",
         },
-        "&::part(title)": {
-          fontSize: "var(--sl-font-size-x-large)",
-          fontWeight: "600",
-          padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-        },
         "&::part(body)": {
           padding: "0 var(--sl-spacing-x-large)",
           fontSize: "var(--sl-font-size-small)",
@@ -233,9 +228,12 @@ export class WidgetVerification {
         "&::part(overlay)": {
           background: "rgba(0, 0, 0, 0.5)",
         },
-        "&::part(close-button)": {
-          display: "none",
-        },
+      },
+      DialogTitle: {
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "600",
+        padding: "var(--sl-spacing-x-large) 0 0 0",
+        margin: "0",
       },
     };
     const sheet = createStyleSheet(style);
@@ -245,7 +243,7 @@ export class WidgetVerification {
     const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
     const renderStepContent = () => {
       if (props.showPartnerModal) {
-        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText)));
+        return (h("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
       }
       if (props.showCode) {
         return (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
@@ -254,14 +252,16 @@ export class WidgetVerification {
     };
     return (h("div", null,
       h("style", { type: "text/css" }, styleString),
-      h("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: true, label: dialogLabel, "onSl-request-close": (e) => {
+      h("sl-dialog", { class: sheet.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
           e.preventDefault();
         }, "onSl-hide": (e) => {
           var _a;
           if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
             e.preventDefault();
           }
-        } }, renderStepContent())));
+        } },
+        h("h2", { class: sheet.classes.DialogTitle }, dialogLabel),
+        renderStepContent())));
   }
   static get is() { return "sqm-widget-verification"; }
   static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,6 @@ import { T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_
 import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE, V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
 import './eventKeys-f76b6a03.js';
 import { u as usePayoutStatus } from './usePayoutStatus-fa504d49.js';
-import { p as parseStates } from './parseStates-ed75e224.js';
 
 /**
  *
@@ -3211,6 +3210,19 @@ function PayoutStatusAlertView(props) {
       getButton(states.status))));
 }
 
+function parseStates(states) {
+  if (typeof states === "string") {
+    try {
+      return JSON.parse(states);
+    }
+    catch (e) {
+      return undefined;
+    }
+  }
+  if (typeof states === "object")
+    return states;
+}
+
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -8229,11 +8241,6 @@ const WidgetVerification = class {
         "&::part(panel)": {
           maxWidth: "480px",
         },
-        "&::part(title)": {
-          fontSize: "var(--sl-font-size-x-large)",
-          fontWeight: "600",
-          padding: "var(--sl-spacing-x-large) var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
-        },
         "&::part(body)": {
           padding: "0 var(--sl-spacing-x-large)",
           fontSize: "var(--sl-font-size-small)",
@@ -8247,9 +8254,12 @@ const WidgetVerification = class {
         "&::part(overlay)": {
           background: "rgba(0, 0, 0, 0.5)",
         },
-        "&::part(close-button)": {
-          display: "none",
-        },
+      },
+      DialogTitle: {
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "600",
+        padding: "var(--sl-spacing-x-large) 0 0 0",
+        margin: "0",
       },
     };
     const sheet = createStyleSheet(style);
@@ -8259,21 +8269,21 @@ const WidgetVerification = class {
     const dialogLabel = this.general_widgetHeaderWithPartnerCreation;
     const renderStepContent = () => {
       if (props.showPartnerModal) {
-        return (h$1("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText)));
+        return (h$1("sqm-partner-info-modal", Object.assign({ inModal: true }, partnerText, { stateController: props["sqm-partner-info-modal_stateController"] || "{}" })));
       }
       if (props.showCode) {
         return (h$1("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_"))));
       }
       return (h$1("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))));
     };
-    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-dialog", { class: sheet.classes.Dialog, noHeader: false, open: true, label: dialogLabel, "onSl-request-close": (e) => {
+    return (h$1("div", null, h$1("style", { type: "text/css" }, styleString), h$1("sl-dialog", { class: sheet.classes.Dialog, noHeader: true, open: true, label: dialogLabel, "onSl-request-close": (e) => {
         e.preventDefault();
       }, "onSl-hide": (e) => {
         var _a;
         if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "SL-DIALOG") {
           e.preventDefault();
         }
-      } }, renderStepContent())));
+      } }, h$1("h2", { class: sheet.classes.DialogTitle }, dialogLabel), renderStepContent())));
   }
 };
 function useDemoWidgetVerificationInternal(props) {

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

@@ -6,10 +6,9 @@ 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-738acfb3.js';
-import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-dd777f00.js';
+import { a as PartnerInfoModalContentView, P as PartnerInfoModalView } from './sqm-partner-info-modal-view-f85b5a08.js';
 import { S as SHOW_CODE_NAMESPACE, a as VERIFICATION_EMAIL_NAMESPACE, V as VERIFICATION_PARENT_NAMESPACE } from './keys-db1897ae.js';
 import { T as TAX_FORM_UPDATED_EVENT_KEY } from './eventKeys-f76b6a03.js';
-import { p as parseStates } from './parseStates-ed75e224.js';
 import { u as useVerificationEmail } from './useVerificationEmail-cb3d51e3.js';
 
 const UpsertUserEmailMutation = dist.gql `
@@ -427,6 +426,7 @@ const GET_USER_PARTNER_INFO = dist.gql `
         impactConnection {
           connected
           publisher {
+            id
             phoneNumber
             phoneNumberCountryCode
             countryCode
@@ -750,8 +750,6 @@ function useDemoPartnerInfoModal(props) {
   const [countryCode, setCountryCode] = useState("US");
   const [currency, setCurrency] = useState("");
   const [error, setError] = useState("");
-  const parsed = parseStates(props.stateController);
-  const stateOverride = (parsed === null || parsed === void 0 ? void 0 : parsed["sqm-partner-info-modal"]) || parsed || {};
   // @ts-ignore
   return cjs({
     states: {
@@ -806,7 +804,7 @@ function useDemoPartnerInfoModal(props) {
       supportDescriptionExistingPartner: props.supportDescriptionExistingPartner,
       modalHeaderExistingPartner: props.modalHeaderExistingPartner,
     },
-  }, props.demoData || stateOverride, { arrayMerge: (_, a) => a });
+  }, props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a });
 }
 
 export { WidgetEmailVerification as sqm_email_verification, PartnerInfoModal as sqm_partner_info_modal };