@saasquatch/mint-components 2.2.0-6 → 2.2.0

package/dist/esm/{ShadowViewAddon-4d554869.js → ShadowViewAddon-0b980200.js}

@@ -1,20 +1,20 @@
 import { h, c as Host, d as getAssetPath, F as Fragment, g as getElement } from './index-38ad4957.js';
-import { i as intl } from './global-75e96214.js';
-import { b as browser, u as useMemo, k as useState } from './dom-context-hooks.module-50442785.js';
-import { H, L, J, d as dist, w as wn, B, F as Fn, $ as $e, g as getEnvironmentSDK } from './index.module-02cb914c.js';
+import { i as intl } from './global-96c14d63.js';
+import { b as browser, u as useMemo, k as useState, m as useRef } from './dom-context-hooks.module-50442785.js';
+import { H, L, J, d as dist, w as wn, B, F as Fn, $ as $e, g as getEnvironmentSDK, X as Xe, Q as Qe } from './index.module-b23fdad8.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-25f8b792.js';
+import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-52ca720f.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f750863a.js';
 import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import { T as TextSpanView } from './sqm-text-span-view-4db9e33f.js';
-import { u as useChildElements } from './useChildElements-06937df7.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
+import { u as useChildElements } from './useChildElements-9bccfb72.js';
 import { l as luxon } from './luxon-1be92a8e.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { o as optimizeCloudinaryUrl } from './imageUrl-4775f17b.js';
-import { a as isValidColor, b as isMobile } from './utilities-cbd8f2eb.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-a8c708cd.js';
+import { a as isValidColor, b as isMobile } from './utilities-77b1e0cc.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-200c9df8.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
@@ -540,7 +540,7 @@ _, type, unit, status, global = "") => {
         $programId: ID
         $unit: String
         $type: RewardType
-        $statusFilter: RewardStatusFilterInput
+        ${statusFilter ? "$statusFilter: RewardStatusFilterInput" : ""}
       ) {
         viewer {
           ... on User {
@@ -549,7 +549,7 @@ _, type, unit, status, global = "") => {
                 programId_eq: $programId
                 type_eq: $type
                 unit_eq: $unit
-                statuses_eq: $statusFilter
+                ${statusFilter ? "statuses_eq: $statusFilter" : "statuses_nin: [{status: CANCELLED}, {status: EXPIRED}]"}
               }
             ) {
               totalCount
@@ -575,14 +575,14 @@ const integrationRewardsCountFilteredQuery = (programId,
 _, status, global = "") => {
   const statusFilter = status ? { status } : null;
   return debugQuery(dist.gql `
-      query ($programId: ID, $statusFilter: RewardStatusFilterInput) {
+      query ($programId: ID, ${statusFilter ? "$statusFilter: RewardStatusFilterInput" : ""}) {
         viewer {
           ... on User {
             rewards(
               filter: {
                 programId_eq: $programId
                 type_eq: INTEGRATION
-                statuses_eq: $statusFilter
+                ${statusFilter ? "statuses_eq: $statusFilter" : "statuses_nin: [{status: CANCELLED}, {status: EXPIRED}]"}
               }
             ) {
               totalCount
@@ -1081,8 +1081,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
     const fallback = (_c = res.data) === null || _c === void 0 ? void 0 : _c.fallback;
     const balance = arr === null || arr === void 0 ? void 0 : arr[0];
     const totalEarned = balance
-      ? (balance.totalAssignedCredit || 0) +
-        (balance.totalPendingCredit || 0)
+      ? (balance.totalAssignedCredit || 0) + (balance.totalPendingCredit || 0)
       : 0;
     const result = wn(dist.gql `
           query (
@@ -2301,7 +2300,7 @@ function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+      } }, (!content.checkboxOptional ? { required: true } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
         if (!value && !content.checkboxOptional) {
           return content.errorMessage;
         }
@@ -3022,7 +3021,7 @@ function ReferralIframeView(props) {
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
 }
 
 const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -4227,15 +4226,203 @@ function useShareButton(props) {
   };
 }
 
+const vanillaStyle$6 = `
+  :host {
+    display: block;
+    width: 100%;
+  }
+`;
+function ShareLinkView(props) {
+  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, savingLabelText, cancelLabelText, editLabelText, charactersRemainingText, validatingLabelText, isEditing, editValue, domainPrefix, editsRemaining, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, minCharactersText, } = props;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-xx-small)",
+      width: "100%",
+    },
+    CustomizeLinkText: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      color: "var(--sl-color-neutral-900)",
+      textAlign: "left",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    CustomizeLinkDisabled: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-400)",
+      cursor: "default",
+      textAlign: "left",
+    },
+    EditContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    EditInputWrapper: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-input-border-color, #d1d5db)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      background: "var(--sqm-input-background, #fff)",
+      overflow: "hidden",
+      "&:focus-within": {
+        borderColor: "#999999",
+        boxShadow: "0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color)",
+      },
+    },
+    DomainPrefix: {
+      padding: "0 0 0 var(--sl-spacing-medium)",
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-500)",
+      whiteSpace: "nowrap",
+      userSelect: "none",
+      lineHeight: "var(--sl-input-height-medium)",
+    },
+    EditInput: {
+      "&::part(base)": {
+        border: "none",
+        borderRadius: "0",
+      },
+      "&::part(input)": {
+        margin: 0,
+      },
+    },
+    EditLabel: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    HelperText: {
+      paddingTop: "var(--sl-spacing-xx-small)",
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    ErrorText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sqm-danger-color-text, #dc2626)",
+    },
+    ActionRow: {
+      display: "flex",
+      gap: "var(--sl-spacing-medium)",
+      alignItems: "center",
+    },
+    SaveButton: {
+      cursor: "pointer",
+      fontFamily: "var(--sl-font-sans)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      border: "1px solid var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-900)",
+      color: "#fff",
+      "&:disabled": {
+        opacity: "0.5",
+        cursor: "default",
+      },
+    },
+    CancelButton: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      background: "none",
+      border: "none",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-color-neutral-500)",
+      "&::part(label)": {
+        padding: "0",
+      },
+    },
+    LimitReachedContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--sl-spacing-x-small)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
+  const showCharactersRemaining = charactersRemaining <= 14;
+  const editLimitMessage = intl.formatMessage({
+    id: "editLimitText",
+    defaultMessage: editLimitText,
+  }, { editsRemaining });
+  // Editing state
+  if (isEditing) {
+    return (h("div", { class: sheet.classes.Container },
+      h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle$6),
+      h("p", { class: sheet.classes.EditLabel }, editLabelText),
+      h("div", { class: sheet.classes.EditInputWrapper },
+        h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
+        h("sl-input", { class: sheet.classes.EditInput, type: "text", value: editValue, onInput: (e) => onEditValueChange(e.target.value), onKeyDown: (e) => {
+            if (e.key === "/" || e.key === "@")
+              e.preventDefault();
+          }, disabled: isSaving, maxLength: characterLimit })),
+      h("p", { class: sheet.classes.HelperText },
+        editLimitMessage,
+        " ",
+        charactersRemaining > 12 && minCharactersText,
+        showCharactersRemaining &&
+          ` ${intl.formatMessage({
+            id: "charactersRemainingText",
+            defaultMessage: charactersRemainingText,
+          }, { charactersRemaining })}`),
+      validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
+        h("p", { part: "alert-title" }, validationError.title),
+        validationError.description)),
+      isValidating && (h("p", { class: sheet.classes.HelperText }, validatingLabelText)),
+      h("div", { class: sheet.classes.ActionRow },
+        h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving ||
+            isValidating ||
+            !!validationError ||
+            !editValue ||
+            editValue.length < minCharacters }, isSaving ? savingLabelText : saveLabelText),
+        h("sl-button", { type: "text", class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
+  }
+  // Default / Customized / Limit reached states
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle$6),
+    h(CopyTextView, Object.assign({}, copyTextViewProps)),
+    allowCustomization &&
+      (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
+        h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
+        h("p", { class: limitReached
+            ? sheet.classes.CustomizeLinkDisabled
+            : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
+        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
+          id: "editLimitReached",
+          defaultMessage: editLimitReachedText,
+        }, {
+          supportLink: (h("a", { target: "_blank", href: "https://help.impact.com/other/readme/get-help-and-support" }, supportLinkText)),
+        }))))))));
+}
+
+const MAX_EDITS = 5;
+const CHARACTER_LIMIT = 15;
+const MIN_CHARACTERS = 3;
 const MessageLinkQuery$1 = dist.gql `
-  query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
+  query ($programId: ID) {
     user: viewer {
       ... on User {
-        shareLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: DIRECT
-        )
+        shareLink(programId: $programId)
       }
     }
   }
@@ -4245,19 +4432,115 @@ const WIDGET_ENGAGEMENT_EVENT = dist.gql `
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
 `;
+const ADD_SHARE_LINK_CODE = dist.gql `
+  mutation ($addShareLinkCodeInput: AddShareLinkCodeInput!) {
+    addShareLinkCode(addShareLinkCodeInput: $addShareLinkCodeInput) {
+      linkCode {
+        linkCode
+        shortUrl
+        referralCode {
+          code
+        }
+      }
+    }
+  }
+`;
+const VALIDATE_LINK_CODE = dist.gql `
+  query validateLinkCode($linkCode: String!) {
+    validateLinkCode(linkCode: $linkCode) {
+      valid
+      invalidReason
+    }
+  }
+`;
+const GET_LINK_DOMAIN = dist.gql `
+  query getLinkDomain {
+    tenantSettings {
+      primaryLinkDomain {
+        host
+      }
+    }
+  }
+`;
+const SHARE_LINK_EDIT_COUNT = dist.gql `
+  query shareLinkEditCount {
+    viewer {
+      ... on User {
+        shareLinkCodes {
+          totalCount
+          data {
+            isVanity
+          }
+        }
+      }
+    }
+  }
+`;
+function parseShareUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return {
+      url: parsed.origin + parsed.pathname,
+      domain: parsed.origin + "/",
+      path: parsed.pathname.slice(1),
+    };
+  }
+  catch {
+    return { url, domain: url, path: "" };
+  }
+}
 function useShareLink(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { programId = H() } = props;
   const user = J();
   const engagementMedium = B();
   const contextData = Fn(REFERRAL_CODES_NAMESPACE);
-  const { data } = wn(MessageLinkQuery$1, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const { data, refetch } = wn(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = $e(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = $e(SET_CODE_COPIED);
-  const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
+  const [setCopied] = $e(SET_CODE_COPIED);
+  const [addShareLinkCode, { loading: isSaving }] = $e(ADD_SHARE_LINK_CODE);
+  const [validateLinkCode] = Xe(VALIDATE_LINK_CODE);
+  const { refresh } = Qe();
+  const { data: linkDomainData } = wn(GET_LINK_DOMAIN, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.allowCustomization);
+  const { data: editCountData, refetch: refetchEditCount } = wn(SHARE_LINK_EDIT_COUNT, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.allowCustomization);
+  const { url: copyString, domain: domainPrefix, path: pathSuffix, } = parseShareUrl((_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
-  "...";
+  "...");
   const [open, setOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [validationError, setValidationError] = useState(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const debounceTimerRef = useRef(undefined);
+  const latestValidationValueRef = useRef("");
+  const hasPrimaryLinkDomain = ((_c = linkDomainData === null || linkDomainData === void 0 ? void 0 : linkDomainData.tenantSettings) === null || _c === void 0 ? void 0 : _c.primaryLinkDomain) != null;
+  const customizeDisabled = !hasPrimaryLinkDomain;
+  const vanityCount = (_g = (_f = (_e = (_d = editCountData === null || editCountData === void 0 ? void 0 : editCountData.viewer) === null || _d === void 0 ? void 0 : _d.shareLinkCodes) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.filter((code) => code.isVanity).length) !== null && _g !== void 0 ? _g : 0;
+  const editCount = vanityCount;
+  const editsRemaining = Math.max(0, MAX_EDITS - editCount);
+  const limitReached = editsRemaining <= 0;
+  function mapErrorCodeToInfo(errorCode) {
+    if (!errorCode)
+      return null;
+    const errorMap = {
+      EXISTING_CODE_CONFLICT: {
+        code: "EXISTING_CODE_CONFLICT",
+        title: props.linkTakenErrorTitle,
+        description: props.linkTakenErrorDescription,
+      },
+      INVALID_CHARACTER: {
+        code: "INVALID_CHARACTER",
+        title: props.invalidCharactersErrorTitle,
+        description: props.invalidCharactersErrorDescription,
+      },
+      BLOCKED_WORD: {
+        code: "BLOCKED_WORD",
+        title: props.restrictedWordsErrorTitle,
+        description: props.restrictedWordsErrorDescription,
+      },
+    };
+    return errorMap[errorCode];
+  }
   async function onClick() {
     if (contextData) {
       await setCopied({ referralCode: contextData.referralCode });
@@ -4281,7 +4564,125 @@ function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  function onCustomizeClick() {
+    if (limitReached || customizeDisabled)
+      return;
+    setIsEditing(true);
+    setEditValue(editCount === 0 ? "" : pathSuffix);
+    setValidationError(null);
+  }
+  function onEditValueChange(value) {
+    const trimmed = value.slice(0, CHARACTER_LIMIT);
+    setEditValue(trimmed);
+    setValidationError(null);
+    latestValidationValueRef.current = trimmed;
+    if (debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
+    if (!trimmed || trimmed.length < MIN_CHARACTERS) {
+      setIsValidating(false);
+      return;
+    }
+    setIsValidating(true);
+    debounceTimerRef.current = setTimeout(async () => {
+      var _a, _b;
+      const requestedValue = trimmed;
+      try {
+        const result = await validateLinkCode({ linkCode: requestedValue });
+        // Discard stale responses if the user has continued typing
+        if (latestValidationValueRef.current !== requestedValue)
+          return;
+        if (!((_a = result === null || result === void 0 ? void 0 : result.validateLinkCode) === null || _a === void 0 ? void 0 : _a.valid)) {
+          const reason = (_b = result === null || result === void 0 ? void 0 : result.validateLinkCode) === null || _b === void 0 ? void 0 : _b.invalidReason;
+          setValidationError(mapErrorCodeToInfo(reason));
+        }
+      }
+      catch {
+        // Validation query failed — don't block the user
+        if (latestValidationValueRef.current !== requestedValue)
+          return;
+      }
+      if (latestValidationValueRef.current === requestedValue) {
+        setIsValidating(false);
+      }
+    }, 500);
+  }
+  async function onSave() {
+    var _a, _b;
+    if (!editValue ||
+      editValue.length < MIN_CHARACTERS ||
+      validationError ||
+      isValidating)
+      return;
+    try {
+      await addShareLinkCode({
+        addShareLinkCodeInput: {
+          userId: user === null || user === void 0 ? void 0 : user.id,
+          accountId: user === null || user === void 0 ? void 0 : user.accountId,
+          programId,
+          linkCode: editValue,
+          makeShareLinkCodePrimaryForReferralCode: true,
+        },
+      });
+      setIsEditing(false);
+      await Promise.all([refetch(), refetchEditCount()]);
+      refresh();
+    }
+    catch (e) {
+      const errorCode = (_a = e === null || e === void 0 ? void 0 : e.extensions) === null || _a === void 0 ? void 0 : _a.code;
+      setValidationError((_b = mapErrorCodeToInfo(errorCode)) !== null && _b !== void 0 ? _b : {
+        code: null,
+        title: props.saveErrorTitle,
+        description: (e === null || e === void 0 ? void 0 : e.message) || props.saveErrorDescription,
+      });
+    }
+  }
+  function onCancel() {
+    setIsEditing(false);
+    setEditValue("");
+    setValidationError(null);
+    setIsValidating(false);
+    latestValidationValueRef.current = "";
+    if (debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
+  }
+  return {
+    copyTextViewProps: {
+      ...props,
+      onClick,
+      open,
+      copyString,
+    },
+    minCharactersText: props.minCharactersText,
+    allowCustomization: props.allowCustomization,
+    customizeLinkLabel: props.customizeLinkButtonLabel,
+    saveLabelText: props.saveLabelText,
+    savingLabelText: props.savingLabelText,
+    cancelLabelText: props.cancelLabelText,
+    editLabelText: props.editLabelText,
+    charactersRemainingText: props.charactersRemainingText,
+    validatingLabelText: props.validatingLabelText,
+    isEditing,
+    editValue,
+    domainPrefix,
+    editsRemaining,
+    maxEdits: MAX_EDITS,
+    limitReached,
+    validationError,
+    isValidating,
+    isSaving,
+    characterLimit: CHARACTER_LIMIT,
+    minCharacters: MIN_CHARACTERS,
+    charactersRemaining: CHARACTER_LIMIT - editValue.length,
+    editLimitText: props.editLimitText,
+    editLimitReachedText: props.editLimitReachedText,
+    supportLinkText: props.supportLinkText,
+    customizeDisabled,
+    customizeDisabledTooltip: props.customizeDisabledTooltip,
+    onCustomizeClick,
+    onEditValueChange,
+    onSave,
+    onCancel,
+  };
 }
 
 const style$9 = {
@@ -4322,7 +4723,7 @@ const style$9 = {
   },
   ErrorStyle: ErrorStyles,
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4354,7 +4755,7 @@ function LeadFormView(props) {
   return (h(Fragment, null,
     states.success && (h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
-        vanillaStyle$6,
+        vanillaStyle$7,
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
@@ -4364,7 +4765,7 @@ function LeadFormView(props) {
       h("sl-button", { class: sheet$9.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
     h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
       h("style", { type: "text/css" },
-        vanillaStyle$6,
+        vanillaStyle$7,
         styleString$9),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
@@ -4417,7 +4818,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4446,7 +4847,7 @@ function LeadDropdownFieldView(props) {
   });
   return (h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
-      vanillaStyle$7,
+      vanillaStyle$8,
       styleString$a),
     h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
         if (!value && !content.dropdownOptional) {
@@ -4497,4 +4898,4 @@ const ShadowViewAddon = ({ story }, children) => {
     h(TagName, { "stencilbook-shadow-view": randomInt })));
 };
 
-export { empty as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, useShareButton as G, HeroView as H, InputFieldView as I, useShareLink as J, ProgressBarView as K, LeaderboardView as L, ProgressBar as M, NameFieldsView as N, LeadFormView as O, PortalChangePasswordView as P, LeadDropdownFieldView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, ShadowViewAddon as U, useBigStat as V, withShadowView as W, demoRewardExchange as X, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalFrameView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useDemoBigStat as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };
+export { empty as A, BigStatView as B, CardFeedView as C, DropdownFieldView as D, EditProfileView as E, rewardExchange as F, useShareButton as G, HeroView as H, InputFieldView as I, ShareLinkView as J, useShareLink as K, LeaderboardView as L, ProgressBarView as M, NameFieldsView as N, ProgressBar as O, PortalChangePasswordView as P, LeadFormView as Q, ReferralIframeView as R, StatContainerView as S, TaskCardView as T, LeadDropdownFieldView as U, ShadowViewAddon as V, useBigStat as W, withShadowView as X, demoRewardExchange as Y, ShareButtonView as a, PoweredByImg as b, BaseRegistrationFormView as c, CheckboxFieldView as d, CouponCodeView as e, ChangeMarktingView as f, PortalFooterView as g, PortalFrameView as h, RewardExchangeView as i, rewardExchangeLongText as j, rewardExchangeSelected as k, chooseAmountFixed as l, chooseAmountFixedNoDescription as m, chooseAmountVariable as n, chooseAmountVariableNoDescription as o, chooseAmountVariableDisabled as p, chooseAmountVariableUnavailable as q, rewardExchangeCustomErrorMsg as r, confirmFixed as s, confirmVariable as t, useDemoBigStat as u, redemptionError as v, queryError as w, success as x, successVariable as y, loading as z };