@saasquatch/mint-components 2.5.0-3 → 2.5.0-5

package/dist/cjs/{ShadowViewAddon-331ac9e4.js → ShadowViewAddon-6d88b845.js}

@@ -230,7 +230,7 @@ function PortalChangePasswordView(props) {
   };
   const sheet = JSS.createStyleSheet(style);
   const styleString = sheet.toString();
-  return (index.h("div", null,
+  return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString),
     index.h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
       index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, {
@@ -2340,7 +2340,7 @@ function CouponCodeView(props) {
     index.h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    index.h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    index.h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign }, part: "label" }, props.couponCodeLabel),
     error ? (index.h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       index.h("div", { part: "erroralert-text" }, props.errorText))) : (index.h(copyTextView.CopyTextView, Object.assign({}, props)))));
 }
@@ -4290,10 +4290,18 @@ function ShareLinkView(props) {
       whiteSpace: "nowrap",
       userSelect: "none",
       lineHeight: "var(--sl-input-height-medium)",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      flexGrow: 0,
+      flexShrink: 1,
+      minWidth: 0,
+      direction: "rtl",
+      textAlign: "left",
     },
     EditInput: {
       maxWidth: "260px",
-      width: "100%",
+      flexShrink: 0,
+      flexGrow: 1,
       "&::part(base)": {
         border: "none",
         borderRadius: "0",
@@ -4373,7 +4381,8 @@ function ShareLinkView(props) {
         vanillaStyle$6),
       index.h("p", { class: sheet.classes.EditLabel }, editLabelText),
       index.h("div", { class: sheet.classes.EditInputWrapper },
-        index.h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
+        index.h("span", { class: sheet.classes.DomainPrefix, title: domainPrefix },
+          index.h("span", { dir: "ltr" }, domainPrefix)),
         index.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();
@@ -4762,7 +4771,7 @@ function LeadFormView(props) {
         vanillaStyle$7,
         styleString$9),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
-      index.h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      index.h("sqm-form-message", { loading: states.loading, exportparts: "successalert-icon" },
         index.h("b", null, content.submitSuccessHeader),
         index.h("br", null),
         index.h("div", { part: "successalert-text" }, content.submitSuccessDescription)),

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -18,7 +18,7 @@ const reRender = require('./re-render-72a0ef45.js');
 const useReferralTable = require('./useReferralTable-06887d9a.js');
 const useChildElements = require('./useChildElements-041127d7.js');
 const luxon = require('./luxon-c1ad356a.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-9745956d.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-6a65f1fb.js');
 const data = require('./data-04ef5511.js');
 const keys = require('./keys-5a2c9ed2.js');
 const eventKeys = require('./eventKeys-7af4df4d.js');
@@ -772,7 +772,7 @@ const BankingInfoFormView = (props) => {
       index.h("div", { class: classes.LargeSkeleton }))));
     return skeletons;
   };
-  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (index.h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
@@ -2420,7 +2420,7 @@ const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet$2;
-  return (index.h("div", { class: classes.Container },
+  return (index.h("div", { class: classes.Container, part: "form-container" },
     index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$1),
@@ -2808,7 +2808,7 @@ const IndirectTaxFormView = (props) => {
   var _a;
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
   const { classes } = sheet$3;
-  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (index.h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$3,
       vanillaStyle$2),

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

@@ -29,7 +29,7 @@ const useInstantAccessRegistration = require('./useInstantAccessRegistration-239
 const useLeadFormState = require('./useLeadFormState-bf49984b.js');
 const utilities = require('./utilities-fcdb9504.js');
 const ErrorView = require('./ErrorView-ee7b0f36.js');
-const ShadowViewAddon = require('./ShadowViewAddon-331ac9e4.js');
+const ShadowViewAddon = require('./ShadowViewAddon-6d88b845.js');
 require('./sqm-portal-container-view-757f921b.js');
 const data = require('./data-04ef5511.js');
 const keys = require('./keys-5a2c9ed2.js');
@@ -8062,15 +8062,15 @@ const TaxAndCashMonolith = class {
     }
     switch (props.step) {
       case "/1":
-        return (index.h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
+        return (index.h("sqm-user-info-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step1_"))));
       case "/2":
-        return (index.h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
+        return (index.h("sqm-indirect-tax-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step2_"))));
       case "/3":
-        return (index.h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
+        return (index.h("sqm-docusign-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step3_"))));
       case "/4":
-        return (index.h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
+        return (index.h("sqm-banking-info-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
+        return (index.h("sqm-tax-and-cash-dashboard", Object.assign({ exportparts: "dashboard-container: container" }, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
       case "/error":
         return (index.h(ErrorView.ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: global.intl.formatMessage({
             id: "loadingErrorAlertDescription",

package/dist/cjs/{sqm-portal-email-verification-view-6cc7ef05.js → sqm-portal-email-verification-view-a2a60c53.js}

@@ -41,7 +41,7 @@ const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 function PortalEmailVerificationView(props) {
   const { states, callbacks, content: { email, verifyMessage, emailVerificationHeader, resendEmailButtonText, verificationStatusMessage, verificationLoadingMessage, verificationResentMessage, }, } = props;
-  return (index.h("div", { class: sheet.classes.Wrapper },
+  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -10,7 +10,7 @@ const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-b9e10f5d.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6cc7ef05.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-a2a60c53.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/sqm-portal-forgot-password_6.cjs.entry.js

@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-b9e10f5d.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-717d0633.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-a679a0a7.js');
 const AsYouType = require('./AsYouType-d15caac8.js');
 const useRegistrationFormState = require('./useRegistrationFormState-4fe5b770.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-a45f7a52.js');

package/dist/cjs/{sqm-portal-profile-view-a4ba4657.js → sqm-portal-profile-view-95a3ad9f.js}

@@ -64,7 +64,7 @@ function PortalProfileView(props) {
     index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h1" }), text.editProfileHeader),
     index.h(sqmTextSpanView.TextSpanView, Object.assign({}, { type: "h2" }), text.editProfileSubHeader),
     index.h("form", { class: sheet.classes.FormStyle, onSubmit: callbacks.onSubmit },
-      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, exportparts: "success-icon" },
+      states.success && (index.h("sqm-form-message", { class: sheet.classes.Success, exportparts: "successalert-icon" },
         index.h("div", { part: "successalert-text" }, text.submissionSuccessText))),
       error && (index.h("sqm-form-message", { class: sheet.classes.Error, type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, error))),

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -10,7 +10,7 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-b9e10f5d.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a4ba4657.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-95a3ad9f.js');
 const utilities = require('./utilities-fcdb9504.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/{sqm-portal-reset-password-view-a767b044.js → sqm-portal-reset-password-view-b2c546bd.js}

@@ -41,10 +41,10 @@ const styleString = sheet.toString();
 function PortalResetPasswordView(props) {
   const { states, callbacks } = props;
   if (states.reset) {
-    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
+    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}`, part: "sqm-base" },
       index.h("style", { type: "text/css" }, styleString),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
-      index.h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
+      index.h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "successalert-icon" },
         index.h("div", { part: "successalert-text" }, states.content.resetSuccessText)),
       index.h("div", null,
         index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
@@ -53,14 +53,14 @@ function PortalResetPasswordView(props) {
     return index.h("div", null);
   }
   if (!states.oobCodeValid) {
-    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
+    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}`, part: "sqm-base" },
       index.h("style", { type: "text/css" }, styleString),
       index.h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
         index.h("div", { part: "erroralert-text" }, states.content.codeInvalidText)),
       index.h("div", null,
         index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
   }
-  return (index.h("div", { class: sheet.classes.Wrapper },
+  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -11,7 +11,7 @@ const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-b9e10f5d.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-a767b044.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-b2c546bd.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/dist/cjs/{sqm-portal-verify-email-view-717d0633.js → sqm-portal-verify-email-view-a679a0a7.js}

@@ -200,7 +200,7 @@ function PortalVerifyEmailView(props) {
         vanillaStyle$3,
         styleString$2),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.verifyEmailText),
-      index.h("sqm-form-message", { exportparts: "success-icon" },
+      index.h("sqm-form-message", { exportparts: "successalert-icon" },
         index.h("div", { part: "successalert-text" }, content.verifySuccessText)),
       index.h("sl-button", { class: sheet$2.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.continueText)));
   }

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -494,11 +494,6 @@ const style = {
     "margin-right": "var(--sl-spacing-small)",
     "flex-wrap": "wrap",
   },
-  /**
-   * @csspart sqm-reward-cell-value - The reward value
-   * @csspart sqm-reward-cell-progress - The reward progress
-   * @csspart sqm-reward-cell-subtext - The reward subtext
-   */
   Details: {
     "padding-bottom": "var(--sl-spacing-small)",
     "max-width": "500px",
@@ -661,7 +656,7 @@ const RewardsTableColumn = class {
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (index.h("sqm-rewards-table-reward-cell", { reward: data, redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: options === null || options === void 0 ? void 0 : options.locale, exportparts: "sqm-rewards-cell-value, sqm-rewards-cell-progress-bar, sqm-rewards-cell-subtext" }));
+    return (index.h("sqm-rewards-table-reward-cell", { reward: data, redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: options === null || options === void 0 ? void 0 : options.locale, exportparts: "sqm-reward-cell-value, sqm-reward-cell-progress, sqm-reward-cell-subtext" }));
   }
   async renderLabel() {
     return this.columnTitle;

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

@@ -13,7 +13,7 @@ require('./useReferralCodes-0f7948af.js');
 require('./mixins-4761d472.js');
 const copyTextView = require('./copy-text-view-bb2c0ea7.js');
 require('./sqm-text-span-view-b9e10f5d.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-717d0633.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-a679a0a7.js');
 require('./AsYouType-d15caac8.js');
 const subregions = require('./subregions-d12829d6.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-a45f7a52.js');
@@ -29,15 +29,15 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-67fd7934.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-f330d641.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-6616e3e0.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-49b152dd.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6cc7ef05.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-a4ba4657.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-a2a60c53.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-95a3ad9f.js');
 require('./utilities-fcdb9504.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-a767b044.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-b2c546bd.js');
 require('./ErrorView-ee7b0f36.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
-const ShadowViewAddon = require('./ShadowViewAddon-331ac9e4.js');
+const ShadowViewAddon = require('./ShadowViewAddon-6d88b845.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-757f921b.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-9745956d.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-6a65f1fb.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-88de1b78.js');
 require('./data-04ef5511.js');
 const sqmPartnerInfoModalView = require('./sqm-partner-info-modal-view-d9b61d54.js');
@@ -14389,6 +14389,14 @@ const CustomizeUrlSaving = () => {
     isSaving: true,
   })));
 };
+const CustomizeUrlEditingMobileNarrow = () => {
+  return (index.h("div", { style: { width: "320px", border: "1px dashed red" } },
+    index.h(ShadowViewAddon.ShareLinkView, Object.assign({}, {
+      ...defaultCustomizeProps,
+      isEditing: true,
+      domainPrefix: "https://referral-marketing.mybrandname.com/",
+    }))));
+};
 
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14412,7 +14420,8 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   CustomizeUrlValidationError: CustomizeUrlValidationError,
   CustomizeUrlInvalidCharacters: CustomizeUrlInvalidCharacters,
   CustomizeUrlProfanity: CustomizeUrlProfanity,
-  CustomizeUrlSaving: CustomizeUrlSaving
+  CustomizeUrlSaving: CustomizeUrlSaving,
+  CustomizeUrlEditingMobileNarrow: CustomizeUrlEditingMobileNarrow
 });
 
 const UseShareLink_stories = {

package/dist/cjs/{sqm-user-info-form-view-9745956d.js → sqm-user-info-form-view-6a65f1fb.js}

@@ -654,7 +654,7 @@ const TaxAndCashDashboardView = (props) => {
     };
   };
   return (index.h("div", null,
-    index.h("div", null,
+    index.h("div", { part: "dashboard-container" },
       index.h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
@@ -679,7 +679,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-payment-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (index.h("sqm-form-message", { loading: states.loading, exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
+      alertInfo && (index.h("sqm-form-message", { loading: states.loading, exportparts: "warningalert-base: alert-base, warningalert-icon: alert-icon, erroralert-base: alert-base, erroralert-icon: alert-icon, infoalert-base: alert-base, infoalert-icon: alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         index.h("strong", null, alertInfo.header),
         index.h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -2260,7 +2260,7 @@ const UserInfoFormView = (props) => {
     var _a;
     return states.isUser && !!((_a = data$1.userData) === null || _a === void 0 ? void 0 : _a[field]);
   }
-  return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (index.h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$2,
       vanillaStyle$2),

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -17,9 +17,9 @@ import { useDemoBigStat } from "./useDemoBigStat";
  * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat>
  * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat>
  * @example Other Stat - <sqm-big-stat flex-reverse="true" alignment="left" stat-type=""><p>Label</p></sqm-big-stat>
+ * @csspart stat-wrapper - The stat wrapper element
  * @csspart stat-value - The stat value element
  * @csspart stat-description - The stat description element
- * @csspart stat-wrapper - The stat wrapper element
  */
 export class BigStat {
   constructor() {

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -9,6 +9,7 @@ import { CardFeedView } from "./sqm-card-feed-view";
  * @validChildren ["sqm-task-card"]
  * @exampleGroup Rewards
  * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
+ * @csspart sqm-base - The base container
  */
 export class CardFeed {
   constructor() {

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -11,8 +11,6 @@ import { useCheckboxField } from "./useCheckboxField";
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
- * @csspart input-label - The input label
- * @csspart input-base - The input base
  */
 export class CheckboxField {
   constructor() {

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code-view.js

@@ -24,7 +24,7 @@ export function CouponCodeView(props) {
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign } }, props.couponCodeLabel),
+    h("p", { class: sheet.classes.couponCodeLabel, style: { textAlign: props.textAlign }, part: "label" }, props.couponCodeLabel),
     error ? (h("sqm-form-message", { type: props.errorType, exportparts: "erroralert-icon" },
       h("div", { part: "erroralert-text" }, props.errorText))) : (h(CopyTextView, Object.assign({}, props)))));
 }

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -11,6 +11,7 @@ import { useCouponCode } from "./useCouponCode";
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>
+ * @csspart label - The coupon code label element
  * @csspart erroralert-text - The error message element
  * @csspart erroralert-icon - The error alert icon
  * @csspart icon-button-base - The copy icon button base

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -10,6 +10,7 @@ import { getProps } from "../../utils/utils";
  * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section", "sqm-divided-layout"]
  * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
+ * @csspart sqm-base - The base container
  */
 export class DividedLayout {
   constructor() {

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -12,6 +12,7 @@ import { useDropdownField } from "./useDropdownField";
  * @slots [{"name":"", "title":"Drop Down Option"}]
  * @exampleGroup Microsite Components
  * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>
+ * @csspart sqm-base - The base container
  * @csspart input-label - The input label
  * @csspart input-base - The input base
  */

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Edit Profile
+ * @csspart sqm-base - The base container
  * @csspart sqm-header - The profile form header
  * @csspart erroralert-text - The error message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-empty/sqm-empty.js

@@ -3,7 +3,8 @@ import { EmptyStateView } from "./sqm-empty-view";
 /**
  * @uiName Empty State Content
  * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
- * @csspart header-text - The empty state header
+ * @csspart sqm-base - The base container
+ *  @csspart header-text - The empty state header
  * @csspart description-text - The empty state description
  */
 export class Empty {

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -8,6 +8,7 @@ import { getProps } from "../../utils/utils";
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
  * @exampleGroup Layout
+ * @csspart sqm-base - The base container
  * @csspart sqm-single-col - The single-column container
  * @csspart sqm-two-col-container - The two-column container
  * @csspart sqm-two-col-primary-col - The primary column

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -9,6 +9,7 @@ import { HeroImageView } from "./sqm-hero-image-view";
  * @exampleGroup Common Components
  * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right"></sqm-hero-image>
  * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @csspart sqm-base - The base container for the hero image
  * @csspart sqm-overlay - The image overlay
  * @csspart sqm-columns-image - The image column
  * @csspart sqm-columns-text-area - The text column

package/dist/collection/components/sqm-image/sqm-image.js

@@ -6,6 +6,7 @@ import { ImageView } from "./sqm-image-view";
  * @validParents ["sqm-brand","div","sqm-portal-container","sqm-divided-layout","sqm-titled-section", "sqb-program-section", "sqb-conditional-section", "sqm-tab"]
  * @exampleGroup Common Components
  * @example Image - <sqm-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000259/squatch-assets/tn47wOj.png" alignment="center"></sqm-image>
+ * @csspart sqm-base - The base container for the image
  * @csspart sqm-image - The image element
  */
 export class Image {

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -11,6 +11,7 @@ import { useInputField } from "./useInputField";
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
+ * @csspart sqm-base - The base container
  * @csspart input-label - The input label
  * @csspart input-base - The input base
  */

package/dist/collection/components/sqm-instant-access-registration/sqm-instant-access-registration.js

@@ -11,6 +11,7 @@ import { useInstantAccessRegistration } from "./useInstantAccessRegistration";
  * @exampleGroup Instant Access
  * @example Advocate Registration - <sqm-instant-access-registration></sqm-instant-access-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
+ * @csspart sqm-base - The base container for the instant access registration component
  * @csspart erroralert-icon - The error alert icon
  * @csspart input-label - The input label
  * @csspart input-base - The input base

package/dist/collection/components/sqm-invoice-table/sqm-invoice-table.js

@@ -16,7 +16,8 @@ import { tryMethod, useInvoiceTable } from "./useInvoiceTable";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @validChildren ["p","div","h1","h2","h3","h4","h5","span"]
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Invoice Table - <sqm-invoice-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" ><sqm-invoice-table-download-column></sqm-invoice-table-download-column><sqm-invoice-table-date-column column-title="Date"></sqm-invoice-table-date-column><sqm-invoice-table-data-column column-title="Invoice" property="invoiceId"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Earnings" property="earnings"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Indirect tax" property="indirectTax"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Earnings after tax" property="netEarnings"></sqm-invoice-table-data-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png" empty-state-header="View your invoice details" empty-state-text="Refer a friend to view the status of your invoices and rewards earned" slot="empty" ></sqm-empty ></sqm-invoice-table> */
+ * @example Invoice Table - <sqm-invoice-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" ><sqm-invoice-table-download-column></sqm-invoice-table-download-column><sqm-invoice-table-date-column column-title="Date"></sqm-invoice-table-date-column><sqm-invoice-table-data-column column-title="Invoice" property="invoiceId"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Earnings" property="earnings"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Indirect tax" property="indirectTax"></sqm-invoice-table-data-column><sqm-invoice-table-data-column column-title="Earnings after tax" property="netEarnings"></sqm-invoice-table-data-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png" empty-state-header="View your invoice details" empty-state-text="Refer a friend to view the status of your invoices and rewards earned" slot="empty" ></sqm-empty ></sqm-invoice-table>
+ * */
 export class InvoiceTable {
   constructor() {
     /**

package/dist/collection/components/sqm-lead-form/sqm-lead-checkbox-field.js

@@ -9,6 +9,7 @@ import { useLeadCheckboxField } from "./useCheckboxField";
 /**
  * @uiName Lead Form Checkbox Field
  * @validParents ["sqm-lead-form"]
+ * @csspart sqm-base - The base container
  */
 export class LeadCheckboxField {
   constructor() {

package/dist/collection/components/sqm-lead-form/sqm-lead-dropdown-field.js

@@ -10,6 +10,7 @@ import { useLeadDropdownField } from "./useLeadDropdownField";
  * @uiName Lead Form Dropdown Field
  * @validParents ["sqm-lead-form"]
  * @slots [{"name":"", "title":"Dropdown Option"}]
+ * @csspart sqm-base - The base container
  */
 export class LeadDropdownField {
   constructor() {

package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js

@@ -76,7 +76,7 @@ export function LeadFormView(props) {
         vanillaStyle,
         styleString),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      h("sqm-form-message", { loading: states.loading, exportparts: "successalert-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),

package/dist/collection/components/sqm-lead-form/sqm-lead-form.js

@@ -8,10 +8,11 @@ import { useLeadForm } from "./useLeadForm";
  * @uiName Lead Form
  * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"}]
+ * @csspart sqm-base - The base container
  * @csspart successalert-text - The success message element
  * @csspart alert-title - The alert title
  * @csspart alert-description - The alert description
- * @csspart success-icon - The success alert icon
+ * @csspart successalert-icon - The success alert icon
  * @csspart input-label - The input label
  * @csspart input-base - The input base
  * @csspart primarybutton-base - The primary button base

package/dist/collection/components/sqm-lead-form/sqm-lead-input-field.js

@@ -9,6 +9,7 @@ import { useLeadInputField } from "./useLeadInputField";
 /**
  * @uiName Lead Form Input Field
  * @validParents ["sqm-lead-form"]
+ * @csspart sqm-base - The base container
  */
 export class LeadInputField {
   constructor() {

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -16,6 +16,7 @@ import { useLeaderboard } from "./useLeaderboard";
  * @example Points Earned - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
  * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
  * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
+ * @csspart sqm-base - The base container
  * @csspart sqm-table - The leaderboard table
  */
 export class Leaderboard {

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -11,6 +11,7 @@ import { getProps } from "../../utils/utils";
  * @compatibility Built for instant access
  * @validParents ["sqm-portal-container","template", "sqm-referred-registration", "sqb-auth-template-switch", "div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @example Sign out current user - <sqm-logout-current-user user-identification-text="{email}" switch-user-link="#" switch-user-text="not you?"></sqm-logout-current-user>
+ * @csspart sqm-base - The base container
  * @csspart sqm-link - The logout link element
  */
 export class LogoutCurrentUser {

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -9,6 +9,7 @@ import deepmerge from "deepmerge";
  * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
  * @validChildren ["sqm-navigation-sidebar-item"]
  * @slots [{"name":"", "title":"Sidebar Content"}]
+ * @csspart sqm-base - The base container
  * @csspart sqm-items-container - The navigation items container
  */
 export class NavigationSidebar {

package/dist/collection/components/sqm-pagination/sqm-pagination.js

@@ -9,6 +9,7 @@ import { PaginationView } from "./sqm-pagination-view";
 import { usePagination } from "./usePagination";
 /**
  * @uiName Pagination
+ * @csspart sqm-base - The base container
  * @csspart sqm-pagination-button - A pagination button
  * @csspart primarybutton-base - The primary button base
  * @csspart secondarybutton-base - The secondary button base

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -12,6 +12,7 @@ import { usePasswordField, } from "./usePasswordField";
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Password Field - <sqm-password-field field-label="Password"></sqm-password-field>
+ * @csspart sqm-base - The base container
  * @csspart input-label - The input label
  * @csspart input-base - The input base
  */