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

package/dist/mint-components/{p-714bf981.entry.js → p-f11a39b4.entry.js}

@@ -1 +1 @@
-import{r as e,h as i}from"./p-083180bf.js";import"./p-6f8a3436.js";import{k as a,m as t,f as s,n}from"./p-a7fc1e02.js";import{l as r,n as o,J as l,j as c,b as d,i as v}from"./p-8a6531d2.js";import{c as u}from"./p-c1086930.js";import"./p-cef45012.js";import"./p-49b20dae.js";import"./p-c813ec64.js";import{P as m}from"./p-9c982f7e.js";const f=class{constructor(i){e(this,i),this.ignored=!0,this.redirectPath="/verifyEmail",this.emailVerificationHeader="Verify your email",this.resendEmailButtonText="Re-send Email",this.verifyMessage="A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.",this.verificationStatusMessage="Checking verification status in {countdown}",this.verificationLoadingMessage="Checking verification status",this.verificationResentMessage="Your verification email has been resent successfully",this.networkErrorMessage="An error occurred while verifying your password. Please refresh the page.",n(this)}disconnectedCallback(){}render(){const{states:e,callbacks:n,content:f}=v()?u({states:{error:"",loading:!1,success:!1,countdown:10},callbacks:{submit:async()=>{}},content:{email:"test@example.com",verifyMessage:(h=this).verifyMessage,emailVerificationHeader:h.emailVerificationHeader,resendEmailButtonText:h.resendEmailButtonText,verificationLoadingMessage:h.verificationLoadingMessage,verificationStatusMessage:h.verificationStatusMessage,verificationResentMessage:h.verificationResentMessage,networkErrorMessage:h.networkErrorMessage}},h.demoData||{},{arrayMerge:(e,i)=>i}):function(e){var i,n,v,u,m,f,h,g,p;const[y,{loading:b,errors:w}]=r(),[M,{data:j,loading:k}]=o(),I=l(),P=null===(i=null==I?void 0:I.managedIdentity)||void 0===i?void 0:i.email,E=new URLSearchParams(c.location.search),x=E.get("nextPage"),[R,V]=a(!1),[C,L]=a(""),[S,_]=a(10),A=t(void 0),B=t(void 0);async function H(){var i;const a=await M();if(null===(i=null==a?void 0:a.managedIdentitySession)||void 0===i?void 0:i.emailVerified)return clearInterval(A.current),c.push({pathname:e.redirectPath,search:E.toString()&&"?"+E.toString()});U(10)}const T=(e=1e4)=>setInterval(H,e),q=e=>setInterval((()=>_(e)),1e3);function U(e){if(clearInterval(B.current),clearInterval(A.current),"hidden"===document.visibilityState)return;e&&_(e);let i=S||10;B.current=q(e-1||i-1),A.current=T(1e3*e||1e3*i)}const Y=d((()=>U()),[S]);return s((()=>(A.current||(H(),A.current=T()),()=>{clearInterval(A.current)})),[]),s((()=>(S>0&&(clearInterval(B.current),B.current=q(S-1)),document.addEventListener("visibilitychange",Y),()=>{clearInterval(B.current),document.removeEventListener("visibilitychange",Y)})),[S]),{states:{loading:b,error:(null===(m=null===(u=null===(v=null===(n=null==w?void 0:w.response)||void 0===n?void 0:n.errors)||void 0===v?void 0:v[0])||void 0===u?void 0:u.extensions)||void 0===m?void 0:m.message)||(null===(g=null===(h=null===(f=null==w?void 0:w.response)||void 0===f?void 0:f.errors)||void 0===h?void 0:h[0])||void 0===g?void 0:g.message)||C,success:R,loadingVerification:k,isVerified:!!(null===(p=null==j?void 0:j.managedIdentitySession)||void 0===p?void 0:p.emailVerified),countdown:S},callbacks:{submit:async()=>{var i;if(!P)return;L(""),V(!1);const a={email:P,urlParams:x?{nextPage:x}:null,redirectPath:e.redirectPath},t=await y(a);t instanceof Error?t.message&&L(e.networkErrorMessage):(null===(i=t.requestManagedIdentityVerificationEmail)||void 0===i?void 0:i.success)&&V(!0)}},content:{email:P,verifyMessage:e.verifyMessage,emailVerificationHeader:e.emailVerificationHeader,resendEmailButtonText:e.resendEmailButtonText,verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage,verificationResentMessage:e.verificationResentMessage,networkErrorMessage:e.networkErrorMessage}}}(this);var h;return i(m,{states:e,callbacks:n,content:f})}};export{f as sqm_portal_email_verification}
+import{r as e,h as i}from"./p-083180bf.js";import"./p-6f8a3436.js";import{k as a,m as t,f as s,n}from"./p-a7fc1e02.js";import{l as r,n as o,J as l,j as c,b as d,i as v}from"./p-8a6531d2.js";import{c as u}from"./p-c1086930.js";import"./p-cef45012.js";import"./p-49b20dae.js";import"./p-c813ec64.js";import{P as m}from"./p-f2e2ef27.js";const f=class{constructor(i){e(this,i),this.ignored=!0,this.redirectPath="/verifyEmail",this.emailVerificationHeader="Verify your email",this.resendEmailButtonText="Re-send Email",this.verifyMessage="A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.",this.verificationStatusMessage="Checking verification status in {countdown}",this.verificationLoadingMessage="Checking verification status",this.verificationResentMessage="Your verification email has been resent successfully",this.networkErrorMessage="An error occurred while verifying your password. Please refresh the page.",n(this)}disconnectedCallback(){}render(){const{states:e,callbacks:n,content:f}=v()?u({states:{error:"",loading:!1,success:!1,countdown:10},callbacks:{submit:async()=>{}},content:{email:"test@example.com",verifyMessage:(h=this).verifyMessage,emailVerificationHeader:h.emailVerificationHeader,resendEmailButtonText:h.resendEmailButtonText,verificationLoadingMessage:h.verificationLoadingMessage,verificationStatusMessage:h.verificationStatusMessage,verificationResentMessage:h.verificationResentMessage,networkErrorMessage:h.networkErrorMessage}},h.demoData||{},{arrayMerge:(e,i)=>i}):function(e){var i,n,v,u,m,f,h,g,p;const[y,{loading:b,errors:w}]=r(),[M,{data:j,loading:k}]=o(),I=l(),P=null===(i=null==I?void 0:I.managedIdentity)||void 0===i?void 0:i.email,E=new URLSearchParams(c.location.search),x=E.get("nextPage"),[R,V]=a(!1),[C,L]=a(""),[S,_]=a(10),A=t(void 0),B=t(void 0);async function H(){var i;const a=await M();if(null===(i=null==a?void 0:a.managedIdentitySession)||void 0===i?void 0:i.emailVerified)return clearInterval(A.current),c.push({pathname:e.redirectPath,search:E.toString()&&"?"+E.toString()});U(10)}const T=(e=1e4)=>setInterval(H,e),q=e=>setInterval((()=>_(e)),1e3);function U(e){if(clearInterval(B.current),clearInterval(A.current),"hidden"===document.visibilityState)return;e&&_(e);let i=S||10;B.current=q(e-1||i-1),A.current=T(1e3*e||1e3*i)}const Y=d((()=>U()),[S]);return s((()=>(A.current||(H(),A.current=T()),()=>{clearInterval(A.current)})),[]),s((()=>(S>0&&(clearInterval(B.current),B.current=q(S-1)),document.addEventListener("visibilitychange",Y),()=>{clearInterval(B.current),document.removeEventListener("visibilitychange",Y)})),[S]),{states:{loading:b,error:(null===(m=null===(u=null===(v=null===(n=null==w?void 0:w.response)||void 0===n?void 0:n.errors)||void 0===v?void 0:v[0])||void 0===u?void 0:u.extensions)||void 0===m?void 0:m.message)||(null===(g=null===(h=null===(f=null==w?void 0:w.response)||void 0===f?void 0:f.errors)||void 0===h?void 0:h[0])||void 0===g?void 0:g.message)||C,success:R,loadingVerification:k,isVerified:!!(null===(p=null==j?void 0:j.managedIdentitySession)||void 0===p?void 0:p.emailVerified),countdown:S},callbacks:{submit:async()=>{var i;if(!P)return;L(""),V(!1);const a={email:P,urlParams:x?{nextPage:x}:null,redirectPath:e.redirectPath},t=await y(a);t instanceof Error?t.message&&L(e.networkErrorMessage):(null===(i=t.requestManagedIdentityVerificationEmail)||void 0===i?void 0:i.success)&&V(!0)}},content:{email:P,verifyMessage:e.verifyMessage,emailVerificationHeader:e.emailVerificationHeader,resendEmailButtonText:e.resendEmailButtonText,verificationLoadingMessage:e.verificationLoadingMessage,verificationStatusMessage:e.verificationStatusMessage,verificationResentMessage:e.verificationResentMessage,networkErrorMessage:e.networkErrorMessage}}}(this);var h;return i(m,{states:e,callbacks:n,content:f})}};export{f as sqm_portal_email_verification}

package/dist/mint-components/p-f2e2ef27.js

@@ -0,0 +1 @@
+import{h as e}from"./p-083180bf.js";import{i as t}from"./p-6f8a3436.js";import{c as s}from"./p-cef45012.js";import{A as o,a as r}from"./p-49b20dae.js";import{T as a}from"./p-c813ec64.js";const i=s({Wrapper:o,Column:{...r},ButtonLink:{fontSize:"14px",color:"var(--sl-color-primary-500)",display:"inline-block !important","&:hover":{cursor:"pointer",textDecoration:"underline"}},ButtonLinkLoading:{fontSize:"14px",color:"var(--sqm-text-subdued)",opacity:"0.6",display:"inline-block !important",textDecoration:"underline","&:hover":{cursor:"not-allowed"}}}),n=i.toString();function l(s){const{states:o,callbacks:r,content:{email:l,verifyMessage:p,emailVerificationHeader:c,resendEmailButtonText:m,verificationStatusMessage:d,verificationLoadingMessage:u,verificationResentMessage:f}}=s;return e("div",{class:i.classes.Wrapper,part:"sqm-base"},e("style",{type:"text/css"},"\n:host {\n  display: block;\n}\n:host([hidden]): {\n  display: none;\n}\n",n),e(a,{type:"h3"},c),e("sl-form",{class:i.classes.Column,"onSl-submit":r.submit},s.states.error&&e("sqm-form-message",{type:"error",exportparts:"erroralert-icon"},e("div",{part:"erroralert-text"},s.states.error)),s.states.success&&e("sqm-form-message",{type:"success",exportparts:"successalert-icon"},e("div",{part:"successalert-text"},f)),e(a,{type:"p"},t.formatMessage({id:"verifyMessage",defaultMessage:p},{email:e("span",{style:{fontWeight:"var(--sl-font-weight-semibold)"}},l)})),e("p",{style:{color:"var(--sqm-text-subdued)",fontSize:"14px"}},t.formatMessage({id:"verificationStatus",defaultMessage:o.loadingVerification?u+" {countdown}":d},{countdown:o.loadingVerification?e("sl-spinner",null):o.countdown})),e("sl-button",{type:"primary",exportparts:"base: primarybutton-base",onClick:r.submit,loading:o.loading},m)))}export{l as P}

package/dist/types/components/sqm-big-stat/sqm-big-stat.d.ts

@@ -13,9 +13,9 @@ import { BigStatViewProps } from "./sqm-big-stat-view";
  * @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 declare class BigStat {
   /**

package/dist/types/components/sqm-card-feed/sqm-card-feed.d.ts

@@ -5,6 +5,7 @@
  * @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 declare class CardFeed {
   ignored: boolean;

package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts

@@ -5,7 +5,8 @@ import { CheckboxFieldViewProps } from "./sqm-checkbox-field-view";
  * @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 sqm-base - The base container
+ *  @csspart input-label - The input label
  * @csspart input-base - The input base
  */
 export declare class CheckboxField {

package/dist/types/components/sqm-coupon-code/sqm-coupon-code.d.ts

@@ -6,6 +6,8 @@ import { CouponCodeViewProps } from "./sqm-coupon-code-view";
  * @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 sqm-base - The base container element
+ * @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/types/components/sqm-divided-layout/sqm-divided-layout.d.ts

@@ -6,6 +6,7 @@
  * @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 declare class DividedLayout {
   /**

package/dist/types/components/sqm-dropdown-field/sqm-dropdown-field.d.ts

@@ -6,6 +6,7 @@ import { DropdownFieldViewProps } from "./sqm-dropdown-field-view";
  * @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/types/components/sqm-edit-profile/sqm-edit-profile.d.ts

@@ -2,6 +2,7 @@ import { EditProfileViewProps } from "./sqm-edit-profile-view";
 import { DemoData } from "../../global/demo";
 /**
  * @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/types/components/sqm-empty/sqm-empty.d.ts

@@ -1,7 +1,8 @@
 /**
  * @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 declare class Empty {

package/dist/types/components/sqm-hero/sqm-hero.d.ts

@@ -4,6 +4,7 @@
  * @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/types/components/sqm-hero-image/sqm-hero-image.d.ts

@@ -6,6 +6,7 @@ import { Spacing } from "../../global/mixins";
  * @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/types/components/sqm-image/sqm-image.d.ts

@@ -3,6 +3,7 @@
  * @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 declare class Image {

package/dist/types/components/sqm-input-field/sqm-input-field.d.ts

@@ -5,6 +5,7 @@ import { InputFieldViewProps } from "./sqm-input-field-view";
  * @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/types/components/sqm-instant-access-registration/sqm-instant-access-registration.d.ts

@@ -7,6 +7,7 @@ import { EmailRegistrationViewProps } from "../views/email-registration-view";
  * @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/types/components/sqm-invoice-table/sqm-invoice-table.d.ts

@@ -7,7 +7,9 @@ import { GenericTableViewProps } from "../../tables/GenericTableView";
  * @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 declare class InvoiceTable {
   /**
    * Filters to only show invoices in this program. Will default to filtering by the program context where

package/dist/types/components/sqm-lead-form/sqm-lead-checkbox-field.d.ts

@@ -3,6 +3,7 @@ import { LeadCheckboxFieldViewProps } from "./sqm-lead-checkbox-field-view";
 /**
  * @uiName Lead Form Checkbox Field
  * @validParents ["sqm-lead-form"]
+ * @csspart sqm-base - The base container
  */
 export declare class LeadCheckboxField {
   ignored: boolean;

package/dist/types/components/sqm-lead-form/sqm-lead-dropdown-field.d.ts

@@ -4,6 +4,7 @@ import { DropdownFieldViewProps } from "./sqm-lead-dropdown-field-view";
  * @uiName Lead Form Dropdown Field
  * @validParents ["sqm-lead-form"]
  * @slots [{"name":"", "title":"Dropdown Option"}]
+ * @csspart sqm-base - The base container
  */
 export declare class LeadDropdownField {
   ignored: boolean;

package/dist/types/components/sqm-lead-form/sqm-lead-form.d.ts

@@ -4,6 +4,7 @@ import { LeadFormViewProps } from "./sqm-lead-form-view";
  * @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

package/dist/types/components/sqm-lead-form/sqm-lead-input-field.d.ts

@@ -3,6 +3,7 @@ import { LeadInputFieldViewProps } from "./sqm-lead-input-field-view";
 /**
  * @uiName Lead Form Input Field
  * @validParents ["sqm-lead-form"]
+ * @csspart sqm-base - The base container
  */
 export declare class LeadInputField {
   ignored: boolean;

package/dist/types/components/sqm-leaderboard/sqm-leaderboard.d.ts

@@ -11,6 +11,7 @@ import { LeaderboardViewProps } from "./sqm-leaderboard-view";
  * @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 declare class Leaderboard {

package/dist/types/components/sqm-logout-current-user/sqm-logout-current-user.d.ts

@@ -6,6 +6,7 @@ import { CopyTextViewProps } from "../views/copy-text-view";
  * @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 declare class LogoutCurrentUser {

package/dist/types/components/sqm-navigation-sidebar/sqm-navigation-sidebar.d.ts

@@ -5,6 +5,7 @@ import { DemoData } from "../../global/demo";
  * @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 declare class NavigationSidebar {

package/dist/types/components/sqm-pagination/sqm-pagination.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 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/types/components/sqm-partner-info-modal/sqm-partner-info-modal.d.ts

@@ -6,6 +6,7 @@ import { PartnerInfoModalResult } 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

package/dist/types/components/sqm-password-field/sqm-password-field.d.ts

@@ -4,6 +4,7 @@ import { PasswordFieldViewDemoProps } 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
  */

package/dist/types/components/sqm-popup-container/sqm-popup-container.d.ts

@@ -2,6 +2,7 @@
  * @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 declare class PopupContainer {

package/dist/types/components/sqm-portal-change-marketing/sqm-portal-change-marketing.d.ts

@@ -3,6 +3,7 @@ import { DemoData } from "../../global/demo";
 /**
  * @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/types/components/sqm-portal-change-password/sqm-portal-change-password.d.ts

@@ -3,6 +3,7 @@ import { DemoData } from "../../global/demo";
 /**
  * @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/types/components/sqm-portal-container/sqm-portal-container.d.ts

@@ -5,6 +5,7 @@ import { Spacing } from "../../global/mixins";
  * @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 declare class PortalContainer {
   ignored: boolean;

package/dist/types/components/sqm-portal-email-verification/sqm-portal-email-verification.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { PortalEmailVerificationViewProps } from "./sqm-portal-email-verification-view";
 /**
  * @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/types/components/sqm-portal-footer/sqm-portal-footer.d.ts

@@ -1,6 +1,7 @@
 /**
  * @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 declare class PortalFooter {
   ignored: boolean;

package/dist/types/components/sqm-portal-forgot-password/sqm-portal-forgot-password.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { PortalForgotPasswordViewProps } from "./sqm-portal-forgot-password-view";
 /**
  * @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/types/components/sqm-portal-frame/sqm-portal-frame.d.ts

@@ -3,6 +3,7 @@ import { DemoData } from "../../global/demo";
 /**
  * @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/types/components/sqm-portal-login/sqm-portal-login.d.ts

@@ -3,6 +3,7 @@ import { PortalLoginViewProps } from "./sqm-portal-login-view";
 /**
  * @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/types/components/sqm-portal-profile/sqm-portal-profile.d.ts

@@ -3,6 +3,7 @@ import { DemoData } from "../../global/demo";
 /**
  * @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

package/dist/types/components/sqm-portal-register/sqm-portal-register.d.ts

@@ -4,6 +4,7 @@ import { PortalRegisterViewProps } from "./sqm-portal-register-view";
  * @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

package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form.d.ts

@@ -4,6 +4,7 @@ import { PortalRegistrationFormViewProps } from "./sqm-portal-registration-form-
  * @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/types/components/sqm-portal-reset-password/sqm-portal-reset-password.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { PortalResetPasswordViewProps } from "./sqm-portal-reset-password-view";
 /**
  * @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

package/dist/types/components/sqm-portal-verify-email/sqm-portal-verify-email.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { PortalVerifyEmailViewProps } from "./sqm-portal-verify-email-view";
 /**
  * @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

package/dist/types/components/sqm-program-explainer/sqm-program-explainer.d.ts

@@ -5,6 +5,7 @@
  * @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/types/components/sqm-program-explainer-step/sqm-program-explainer-step.d.ts

@@ -3,6 +3,7 @@
  * @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/types/components/sqm-qr-code/sqm-qr-code.d.ts

@@ -5,6 +5,7 @@ import { QRCodeViewProps } from "./sqm-qr-code-view";
  * @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/types/components/sqm-referral-card/sqm-referral-card.d.ts

@@ -6,6 +6,7 @@
  * @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 declare class ReferralCard {
   ignored: boolean;

package/dist/types/components/sqm-referral-codes/sqm-referral-codes.d.ts

@@ -6,6 +6,7 @@ import { ReferralCodesViewProps } from "./sqm-referral-codes-view";
  * @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 declare class ReferralCodes {
   /**

package/dist/types/components/sqm-referral-table/sqm-referral-table.d.ts

@@ -8,6 +8,7 @@ import { GenericTableViewProps } from "../../tables/GenericTableView";
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
+ * @csspart sqm-base - The base container for the referral table component
  */
 export declare class ReferralTable {
   /**

package/dist/types/components/sqm-referred-registration/sqm-referred-registration.d.ts

@@ -7,6 +7,11 @@ import { EmailRegistrationViewProps } 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 declare class ReferredRegistration {
   ignored: boolean;

package/dist/types/components/sqm-reward-exchange-list/sqm-reward-exchange-list.d.ts

@@ -7,6 +7,7 @@ import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view";
  * @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/types/components/sqm-share-button/sqm-share-button.d.ts

@@ -17,6 +17,7 @@ import { DemoData } from "../../global/demo";
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
  * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
+ * @csspart sqm-base - The base container for the share button component
  * @csspart primarybutton-base - The primary button base
  * @csspart secondarybutton-base - The secondary button base
  * @csspart icon - The share button icon

package/dist/types/components/sqm-share-link/sqm-share-link.d.ts

@@ -5,6 +5,7 @@ import { ShareLinkViewProps } from "./sqm-share-link-view";
  * @exampleGroup Sharing
  * @validParents ["sqm-portal-container", "sqm-titled-section", "div","sqm-hero","sqm-referral-card","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
+ * @csspart sqm-base - The base container for the share link component
  * @csspart alert-title - The validation error title
  * @csspart icon-button-base - The copy icon button base
  * @csspart primarybutton-base - The primary button base

package/dist/types/components/sqm-stat-container/sqm-stat-container.d.ts

@@ -6,6 +6,7 @@ import { Spacing } from "../../global/mixins";
  * @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/types/components/sqm-task-card/sqm-task-card.d.ts

@@ -5,6 +5,7 @@ import { TaskCardViewProps } from "./sqm-task-card-view";
  * @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/types/components/sqm-timeline/sqm-timeline-entry.d.ts

@@ -3,6 +3,7 @@
  * @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/types/components/sqm-timeline/sqm-timeline.d.ts

@@ -5,6 +5,7 @@
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
  * @exampleGroup Common Components
  * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" 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>
+ * @csspart sqm-base - The base container for the timeline
  */
 export declare class Timeline {
   ignored: boolean;

package/dist/types/components/sqm-user-attribute/sqm-user-attribute.d.ts

@@ -4,6 +4,7 @@ import { UserAttributeViewProps } from "./sqm-user-attribute-view";
  * @uiName User Attribute
  * @exampleGroup Advanced
  * @example User Attribute - <sqm-user-attribute value="lastSeenDate"></sqm-user-attribute>
+ * @csspart sqm-base - The base container
  */
 export declare class UserAttribute {
   ignored: boolean;

package/dist/types/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.d.ts

@@ -1,6 +1,8 @@
 import { DemoData } from "../../../global/demo";
 import { WidgetCodeVerificationViewProps } from "./sqm-code-verification-view";
 /**
+ * @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/types/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../../global/demo";
 import { WidgetEmailVerificationViewProps } from "./sqm-email-verification-view";
 /**
  * @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