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

package/dist/collection/components/sqm-popup-container/sqm-popup-container.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
  * @uiName Popup Container
  * @slots [{"name":"","title":"Content"}]
  * @canvasRenderer always-replace
+ * @csspart sqm-base - The base container
  * @csspart sqm-close-button - The popup close button
  */
 export class PopupContainer {

package/dist/collection/components/sqm-portal-change-marketing/sqm-portal-change-marketing.js

@@ -8,6 +8,7 @@ import deepmerge from "deepmerge";
 /**
  * @uiName Change Marketing Opt in Status
  * @requiredFeatures ["MARKETING_EMAILS"]
+ * @csspart sqm-base - The base container
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password-view.js

@@ -48,7 +48,7 @@ export function PortalChangePasswordView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", null,
+  return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("sl-dialog", { class: sheet.classes.Dialog, open: states.open, "onSl-hide": () => callbacks.setOpen(false) },
       h(PortalSectionView, Object.assign({}, {

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -8,6 +8,7 @@ import { useState } from "@saasquatch/universal-hooks";
 /**
  * @uiName Microsite Password Change
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand"]
+ * @csspart sqm-base - The base container for the portal change password component
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -8,6 +8,7 @@ import { getProps } from "../../utils/utils";
  * @exampleGroup Layout
  * @example Row Layout Container - <sqm-portal-container direction="row" padding="none" gap="xxx-large" display="flex" max-width="100%"><p>Add your row content!</p></sqm-portal-container>
  * @example Column Layout Container - <sqm-portal-container direction="column" padding="none" gap="xxx-large" display="grid" max-width="100%"><p>Add your column content!</p></sqm-portal-container>
+ * @csspart sqm-base - The base container for the portal container component
  */
 export class PortalContainer {
   constructor() {

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

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

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js

@@ -6,6 +6,7 @@ import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-vi
 import { usePortalEmailVerification } from "./usePortalEmailVerification";
 /**
  * @uiName Microsite Email Verification
+ * @csspart sqm-base - The base container for the portal email verification component
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer.js

@@ -5,6 +5,7 @@ import { PortalFooterView } from "./sqm-portal-footer-view";
 /**
  * @uiName Footer
  * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame", "sqm-referred-registration"]
+ * @csspart sqm-base - The base container
  */
 export class PortalFooter {
   constructor() {

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js

@@ -6,6 +6,7 @@ import { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
 import { usePortalForgotPassword } from "./usePortalForgotPassword";
 /**
  * @uiName Microsite Forgot Password
+ * @csspart sqm-base - The base container
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js

@@ -7,6 +7,7 @@ import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Frame
  * @slots [{"name":"header","title":"Header Content"},{"name":"footer","title":"Footer Content"},{"name":"","title":"Body Content"}]
+ * @csspart sqm-base - The base container
  * @csspart sqm-header - The header container
  * @csspart sqm-footer - The footer container
  */

package/dist/collection/components/sqm-portal-login/sqm-portal-login.js

@@ -8,6 +8,7 @@ import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Microsite Login
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"]
+ * @csspart sqm-base - The base container
  * @csspart forgot-password-link - The forgot password link
  * @csspart erroralert-text - The error message element
  * @csspart erroralert-icon - The error alert icon

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

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

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

@@ -8,9 +8,10 @@ import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Participant Profile
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
+ * @csspart sqm-base - The base container
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
- * @csspart success-icon - The success alert icon
+ * @csspart successalert-icon - The success alert icon
  * @csspart erroralert-icon - The error alert icon
  * @csspart input-label - The input label
  * @csspart input-base - The input base

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -8,11 +8,6 @@ import { usePortalRegister } from "./usePortalRegister";
  * @uiName Microsite Registration
  * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
- * @csspart erroralert-text - The error message element
- * @csspart erroralert-icon - The error alert icon
- * @csspart input-label - The input label
- * @csspart input-base - The input base
- * @csspart primarybutton-base - The primary button base
  */
 export class PortalRegister {
   constructor() {

package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js

@@ -8,6 +8,7 @@ import { usePortalRegistrationForm } from "./usePortalRegistrationForm";
  * @uiName Microsite Registration
  * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"},{"name":"emailOptIn","title":"Email Opt-in Fields"}]
+ * @csspart sqm-base - The base container
  * @csspart erroralert-text - The error message element
  * @csspart erroralert-icon - The error alert icon
  * @csspart input-label - The input label

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password-view.js

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

package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password.js

@@ -6,9 +6,10 @@ import { PortalResetPasswordView, } from "./sqm-portal-reset-password-view";
 import { usePortalResetPassword } from "./usePortalResetPassword";
 /**
  * @uiName Microsite Reset Password
+ * @csspart sqm-base - The base container for the portal reset password component
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
- * @csspart success-icon - The success alert icon
+ * @csspart successalert-icon - The success alert icon
  * @csspart erroralert-icon - The error alert icon
  * @csspart input-label - The input label
  * @csspart input-base - The input base

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

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

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js

@@ -7,9 +7,10 @@ import { usePortalVerifyEmail } from "./usePortalVerifyEmail";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Microsite Verify Email
+ * @csspart sqm-base - The base container
  * @csspart erroralert-text - The error message element
  * @csspart successalert-text - The success message element
- * @csspart success-icon - The success alert icon
+ * @csspart successalert-icon - The success alert icon
  * @csspart erroralert-icon - The error alert icon
  * @csspart primarybutton-base - The primary button base
  */

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -9,6 +9,7 @@ import { ProgramExplainerView } from "./sqm-program-explainer-view";
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
  * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people"></sqm-program-explainer-step></sqm-program-explainer>
+ * @csspart sqm-base - The base container for the program explainer
  * @csspart sqm-header - The header element
  * @csspart sqm-grid-container - The grid container element
  */

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -7,6 +7,7 @@ import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
  * @exampleGroup Common Components
  * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack"></sqm-program-explainer-step>
  * @validParents ["sqm-program-explainer"]
+ * @csspart sqm-base - The base container for the program explainer step
  * @csspart sqm-media - The media element (icon or image)
  * @csspart sqm-header - The header element
  * @csspart sqm-description - The description element

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

@@ -10,6 +10,7 @@ import { useQRCode } from "./useQRCode";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "sqb-program-section", "sqb-conditional-section"]
  * @exampleGroup Sharing
  * @example QR Code - <sqm-qr-code></sqm-qr-code>
+ * @csspart sqm-base - The base container
  * @csspart sqm-title - The QR code title
  * @csspart primarybutton-base - The primary button base
  * @csspart secondarybutton-base - The secondary button base

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

@@ -11,6 +11,7 @@ import { useChildElements } from "../../tables/useChildElements";
  * @exampleGroup Referrals
  * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
+ * @csspart sqm-base - The base container
  * */
 export class ReferralCard {
   constructor() {

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -11,6 +11,7 @@ import { useReferralCodes } from "./useReferralCodes";
  * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
  * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
+ * @csspart sqm-base - The base container
  */
 export class ReferralCodes {
   constructor() {

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -11,6 +11,11 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
  * @exampleGroup Instant Access
  * @example Friend Registration - <sqm-referred-registration></sqm-referred-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
+ * @csspart primarybutton-base - The primary button base
  */
 export class ReferredRegistration {
   constructor() {

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js

@@ -14,6 +14,7 @@ import { useRewardExchangeList, } from "./useRewardExchangeList";
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @exampleGroup Rewards
  * @example Reward Exchange - <sqm-reward-exchange-list not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" choose-reward-title="Rewards" choose-amount-title="Select" confirmation-title="Confirm" reward-title="Choose a reward" cancel-text="Cancel" back-text="Back" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltip-text="Copied" done-text="Done" select-text="Select amount to receive" query-error="Unable to load reward exchange list. Please try again" redemption-error="An error occured trying to redeem this reward. Please try again" not-enough-error="Not enough {sourceUnit} to redeem for this reward" reward-redeemed-text="Reward redeemed" promo-code="Promo Code" skeleton-card-num=8 reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" slot="empty"></sqm-empty></sqm-reward-exchange-list>
+ * @csspart sqm-base - The base container
  * @csspart choose-reward-container - The choose reward container
  * @csspart choose-amount-container - The choose amount container
  * @csspart confirmation-container - The confirmation container

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -10,11 +10,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",
@@ -77,6 +72,11 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+/**
+ * @csspart sqm-reward-cell-value - The reward value
+ * @csspart sqm-reward-cell-progress - The reward progress
+ * @csspart sqm-reward-cell-subtext - The reward subtext
+ */
 export class RewardTableRewardsCell {
   // TODO: value function from portalv2
   render() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -4,9 +4,9 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
- * @csspart sqm-rewards-cell-value - The reward cell value
- * @csspart sqm-rewards-cell-progress-bar - The reward progress bar
- * @csspart sqm-rewards-cell-subtext - The reward cell subtext
+ * @csspart sqm-reward-cell-value - The reward cell value
+ * @csspart sqm-reward-cell-progress - The reward progress
+ * @csspart sqm-reward-cell-subtext - The reward cell subtext
  * @exampleGroup Rewards
  * @example Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
  */
@@ -32,7 +32,7 @@ export class RewardsTableColumn {
   }
   disconnectedCallback() { }
   async renderCell(data, options) {
-    return (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 (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/collection/components/sqm-share-link/ShareLink.stories.js

@@ -217,3 +217,11 @@ export const CustomizeUrlSaving = () => {
     isSaving: true,
   })));
 };
+export const CustomizeUrlEditingMobileNarrow = () => {
+  return (h("div", { style: { width: "320px", border: "1px dashed red" } },
+    h(ShareLinkView, Object.assign({}, {
+      ...defaultCustomizeProps,
+      isEditing: true,
+      domainPrefix: "https://referral-marketing.mybrandname.com/",
+    }))));
+};

package/dist/collection/components/sqm-share-link/sqm-share-link-view.js

@@ -64,10 +64,18 @@ export 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",
@@ -147,7 +155,8 @@ export function ShareLinkView(props) {
         vanillaStyle),
       h("p", { class: sheet.classes.EditLabel }, editLabelText),
       h("div", { class: sheet.classes.EditInputWrapper },
-        h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
+        h("span", { class: sheet.classes.DomainPrefix, title: domainPrefix },
+          h("span", { dir: "ltr" }, 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();

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

@@ -9,6 +9,7 @@ import { getProps } from "../../utils/utils";
  * @slots [{"name":"", "title":"Stats"}]
  * @exampleGroup Statistics
  * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat></sqm-stat-container>
+ * @csspart sqm-base - The base container for the stat container
  * @csspart sqm-inner-container - The stat content container
  * @csspart sqm-border - The stat border
  */

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

@@ -11,6 +11,7 @@ import { useTaskCard } from "./useTaskCard";
  * @uiName Task Card
  * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
  * @validParents ["sqm-card-feed"]
+ * @csspart sqm-base - The base container
  * @csspart sqm-card-container - The task card container
  * @csspart sqm-style-container - The task card style container
  * @csspart sqm-value - The task value

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -5,7 +5,6 @@ import { TextSpanView } from "./sqm-text-span-view";
  * @uiName Text Span
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
- * @csspart sqm-text-span - The text span element
  */
 export class TextSpan {
   constructor() {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -8,6 +8,7 @@ import { TimelineEntryView } from "./sqm-timeline-entry-view";
  * @validParents ["sqm-timeline"]
  * @exampleGroup Common Components
  * @example Timeline Entry - <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry>
+ * @csspart sqm-base - The base container for the timeline entry
  * @csspart sqm-entry-container - The timeline entry container
  * @csspart sqm-reward - The reward value
  * @csspart sqm-unit - The reward unit

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute.js

@@ -8,6 +8,7 @@ import { useUserAttribute } from "./useUserAttribute";
  * @uiName User Attribute
  * @exampleGroup Advanced
  * @example User Attribute - <sqm-user-attribute value="lastSeenDate"></sqm-user-attribute>
+ * @csspart sqm-base - The base container
  */
 export class UserAttribute {
   constructor() {

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

@@ -7,6 +7,8 @@ import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
 /**
+ * @uiName Widget Code Verification
+ * @csspart sqm-base - The base container
  * @csspart successalert-icon - The success alert icon
  * @csspart primarybutton-base - The primary button base
  */

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

@@ -8,6 +8,7 @@ import deepmerge from "deepmerge";
 import { SHOW_CODE_NAMESPACE } from "../keys";
 /**
  * @uiName Widget Verification Gate
+ * @csspart sqm-base - The base container
  * @csspart alert-title - The alert title
  * @csspart primarybutton-base - The primary button base
  * @csspart input-label - The input label

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.js

@@ -188,7 +188,7 @@ export const BankingInfoFormView = (props) => {
       h("div", { class: classes.LargeSkeleton }))));
     return skeletons;
   };
-  return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form.js

@@ -14,11 +14,6 @@ import { getFormInputs, paypalFeeMap, useBankingInfoForm, } from "./useBankingIn
 /**
  * @uiName Banking Information Form
  * @exampleGroup Common Components
- *
- * @csspart alert-title - The alert title
- * @csspart primarybutton-base - The primary button base
- * @csspart secondarybutton-base - The secondary button base
- * @csspart radio-base - The radio base
  */
 export class BankingInfoForm {
   constructor() {

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.js

@@ -119,7 +119,7 @@ export const DocusignFormView = (props) => {
   var _a;
   const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
   const { classes } = sheet;
-  return (h("div", { class: classes.Container },
+  return (h("div", { class: classes.Container, part: "form-container" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),

package/dist/collection/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form.js

@@ -11,8 +11,6 @@ import { useDocusignForm } from "./useDocusignForm";
  * @uiName DocuSign Document Submission
  * @exampleGroup Tax and Cash Components
  * @slots [{"name": "docusign-iframe", "title": "DocuSign IFrame Slot"}]
- * @csspart alert-title - The alert title
- * @csspart primarybutton-base - The primary button base
  */
 export class DocusignForm {
   constructor() {

package/dist/collection/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.js

@@ -125,7 +125,7 @@ export const IndirectTaxFormView = (props) => {
   var _a;
   const { states, states: { formState }, callbacks, text, refs, slots, } = props;
   const { classes } = sheet;
-  return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.js

@@ -11,6 +11,7 @@ import { parseStates } from "../../../utils/parseStates";
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Tax and Cash
  * @example Payout Status Alert - <sqm-payout-status-alert></sqm-payout-status-alert>
+ * @csspart sqm-base - The base container
  * @csspart alert-title - The alert title
  * @csspart alert-description - The alert description
  * @csspart primarybutton-base - The primary button base

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.js

@@ -15,6 +15,7 @@ import { intl } from "../../../global/global";
  * @exampleGroup Tax and Cash
  * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section", "template"]
  * @example Microsite Cash Payout Form - <sqm-tax-and-cash></sqm-tax-and-cash>
+ * @csspart container - The base container for the tax and cash component
  */
 export class TaxAndCashMonolith {
   constructor() {
@@ -1180,15 +1181,15 @@ export class TaxAndCashMonolith {
     }
     switch (props.step) {
       case "/1":
-        return (h("sqm-user-info-form", Object.assign({}, this.getGeneralStepTextProps("step1_"))));
+        return (h("sqm-user-info-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step1_"))));
       case "/2":
-        return (h("sqm-indirect-tax-form", Object.assign({}, this.getGeneralStepTextProps("step2_"))));
+        return (h("sqm-indirect-tax-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step2_"))));
       case "/3":
-        return (h("sqm-docusign-form", Object.assign({}, this.getGeneralStepTextProps("step3_"))));
+        return (h("sqm-docusign-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step3_"))));
       case "/4":
-        return (h("sqm-banking-info-form", Object.assign({}, this.getGeneralStepTextProps("step4_"))));
+        return (h("sqm-banking-info-form", Object.assign({ exportparts: "form-container: container" }, this.getGeneralStepTextProps("step4_"))));
       case "/dashboard":
-        return (h("sqm-tax-and-cash-dashboard", Object.assign({}, this.getGeneralStepTextProps("dashboard_"), { stateController: props["sqm-tax-and-cash-dashboard_stateController"] || "{}" })));
+        return (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 (h(ErrorView, { loadingErrorAlertHeader: this.loadingErrorAlertHeader, loadingErrorAlertDescription: intl.formatMessage({
             id: "loadingErrorAlertDescription",

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -594,7 +594,7 @@ export const TaxAndCashDashboardView = (props) => {
     };
   };
   return (h("div", null,
-    h("div", null,
+    h("div", { part: "dashboard-container" },
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
@@ -619,7 +619,7 @@ export const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (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 && (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 },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),

package/dist/collection/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.js

@@ -304,7 +304,7 @@ export const UserInfoFormView = (props) => {
     var _a;
     return states.isUser && !!((_a = data.userData) === null || _a === void 0 ? void 0 : _a[field]);
   }
-  return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
+  return (h("sl-form", { part: "form-container", class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),