@saasquatch/mint-components 2.5.0-2 → 2.5.0-4

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,9 @@ 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
  */
 export class DropdownField {
   constructor() {

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

@@ -7,6 +7,14 @@ 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
+ * @csspart input-label - The input label
+ * @csspart input-base - The input base
+ * @csspart primarybutton-base - The primary button base
+ * @csspart secondarybutton-base - The secondary button base
  */
 export class EditProfile {
   constructor() {

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

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

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

@@ -3,6 +3,14 @@ import { Component, h, Prop, State } from "@stencil/core";
 /**
  * @uiName Form Message
  * @slots [{"name":"","title":"Message Content"}]
+ * @csspart erroralert-base - The error alert base
+ * @csspart erroralert-icon - The error alert icon
+ * @csspart infoalert-base - The info alert base
+ * @csspart infoalert-icon - The info alert icon
+ * @csspart warningalert-base - The warning alert base
+ * @csspart warningalert-icon - The warning alert icon
+ * @csspart successalert-base - The success alert base
+ * @csspart successalert-icon - The success alert icon
  */
 export class FormMessage {
   constructor() {

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

@@ -8,6 +8,11 @@ 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
+ * @csspart sqm-two-col-secondary-col - The secondary column
  */
 export class Hero {
   constructor() {

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

@@ -9,6 +9,15 @@ 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
+ * @csspart sqm-columns-header - The header in the text column
+ * @csspart sqm-columns-description - The description in the text column
+ * @csspart primarybutton-base - The primary button base
+ * @csspart secondarybutton-base - The secondary button base
+ * @csspart sqm-hero-image-button - The hero image button
  */
 export class HeroImage {
   constructor() {

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

@@ -6,6 +6,8 @@ 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 {
   constructor() {

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

@@ -11,6 +11,9 @@ 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
  */
 export class InputField {
   constructor() {

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

@@ -11,6 +11,11 @@ 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
+ * @csspart primarybutton-base - The primary button base
  */
 export class InstantAccessRegistration {
   constructor() {

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

@@ -44,7 +44,7 @@ export function InvoiceTableView(props, children) {
     :host{
       display: block;
     }`;
-  return (h("div", { class: sheet.classes.Container },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-table-container" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

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

@@ -16,7 +16,9 @@ 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>
+ * @csspart sqm-table-container - The container element for the 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.js

@@ -8,6 +8,14 @@ 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 input-label - The input label
+ * @csspart input-base - The input base
+ * @csspart primarybutton-base - The primary button base
  */
 export class LeadForm {
   constructor() {

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,8 @@ 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 {
   constructor() {

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

@@ -11,6 +11,8 @@ 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 {
   constructor() {

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -9,6 +9,8 @@ import { useNameFields } from "./useNameFields";
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Name Fields - <sqm-name-fields first-name-label="First Name" last-name-label="Last Name"></sqm-name-fields>
+ * @csspart input-label - The input label
+ * @csspart input-base - The input base
  */
 export class NameFields {
   constructor() {

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

@@ -8,6 +8,7 @@ import deepmerge from "deepmerge";
 /**
  * @uiName Navigation Menu
  * @validParents ["sqm-portal-container","div","sqm-brand","sqm-divided-layout"]
+ * @csspart dropdownbutton-base - The dropdown button base
  */
 export class NavigationMenu {
   constructor() {

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

@@ -9,6 +9,8 @@ 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 {
   constructor() {

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

@@ -10,6 +10,8 @@ import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
  * @validParents ["sqm-navigation-sidebar"]
  * @exampleGroup Microsite Components
  * @example Sidebar Item - <sqm-navigation-sidebar-item label="Sidebar Item" icon="house"></sqm-navigation-sidebar-item>
+ * @csspart sqm-link - The navigation link element
+ * @csspart sqm-label - The navigation label
  */
 export class NavigationSidebarItem {
   constructor() {

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

@@ -9,6 +9,10 @@ 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
  */
 export class Pagination {
   constructor() {

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

@@ -85,7 +85,7 @@ export function PartnerInfoModalContentView(props) {
     id: "supportDescriptionExistingPartner",
     defaultMessage: text.supportDescriptionExistingPartner,
   }, {
-    supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+    supportLink: (h("a", { target: "_blank", href: `mailto:advocate-payment-support@impact.com` }, text.supportLink)),
   });
   const description = states.isExistingPartner ? (h("span", { class: sheet.classes.DescriptionContainer },
     h("p", null, text.descriptionExistingPartner),
@@ -99,7 +99,7 @@ export function PartnerInfoModalContentView(props) {
   }, {
     termsAndConditionsLink: (h("a", { href: text.termsAndConditionsLink, target: "_blank" }, text.termsAndConditionsLabel)),
   });
-  return (h("div", null,
+  return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.FormFields },
       description,

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

@@ -12,6 +12,12 @@ import { usePartnerInfoModal, } from "./usePartnerInfoModal";
  * @validParents ["sqm-portal-container", "sqm-portal-frame", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section"]
  * @example Partner Info Modal - <sqm-partner-info-modal></sqm-partner-info-modal>
  * @hidden
+ * @csspart sqm-base - The base container for the partner info modal
+ * @csspart alert-description - The error description
+ * @csspart input-label - The input label
+ * @csspart input-base - The input base
+ * @csspart select-menu - The select menu
+ * @csspart primarybutton-base - The primary button base
  */
 export class PartnerInfoModal {
   constructor() {

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

@@ -12,6 +12,9 @@ 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
  */
 export class PortalPasswordField {
   constructor() {

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

@@ -7,6 +7,8 @@ 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 {
   constructor() {

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

@@ -8,6 +8,11 @@ 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
+ * @csspart successalert-icon - The success alert icon
  */
 export class PortalChangeMarketing {
   constructor() {

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,15 @@ 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
+ * @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
+ * @csspart secondarybutton-base - The secondary button base
  */
 export class PortalChangePassword {
   constructor() {

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,12 @@ 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
+ * @csspart successalert-icon - The success alert icon
+ * @csspart primarybutton-base - The primary button base
  */
 export class PortalEmailVerification {
   constructor() {

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,15 @@ 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
+ * @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
+ * @csspart secondarybutton-base - The secondary button base
  */
 export class PortalForgotPassword {
   constructor() {

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

@@ -7,6 +7,9 @@ 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
  */
 export class PortalFrame {
   constructor() {

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

@@ -7,6 +7,7 @@ import { PortalLoginView, } from "../sqm-portal-login/sqm-portal-login-view";
 import { usePortalLogin } from "../sqm-portal-login/usePortalLogin";
 /**
  * @uiName Microsite Login
+ * @csspart forgot-password-link - The forgot password link
  */
 export class PortalGoogleLogin {
   constructor() {

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

@@ -11,6 +11,9 @@ import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationFo
  * @uiName Google Registration
  * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
+ * @csspart input-label - The input label
+ * @csspart input-base - The input base
+ * @csspart primarybutton-base - The primary button base
  */
 export class PortalGoogleRegistrationForm {
   constructor() {

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

@@ -8,6 +8,14 @@ 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
+ * @csspart input-label - The input label
+ * @csspart input-base - The input base
+ * @csspart primarybutton-base - The primary button base
+ * @csspart secondarybutton-base - The secondary button base
  */
 export class PortalLogin {
   constructor() {

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

@@ -8,6 +8,14 @@ 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 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 PortalProfile {
   constructor() {

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

@@ -8,6 +8,12 @@ import { usePortalRegister } from "./usePortalRegister";
  * @uiName Microsite Registration
  * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions 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
+ * @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,12 @@ 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
+ * @csspart input-base - The input base
+ * @csspart primarybutton-base - The primary button base
  */
 export class PortalRegistrationForm {
   constructor() {

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

@@ -38,7 +38,7 @@ 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" },
@@ -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,6 +6,14 @@ 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 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 PortalResetPassword {
   constructor() {

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

@@ -7,6 +7,12 @@ 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 erroralert-icon - The error alert icon
+ * @csspart primarybutton-base - The primary button base
  */
 export class PortalVerifyEmail {
   constructor() {

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,10 @@ 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
  */
 export class QrCode {
   constructor() {