@saasquatch/mint-components 1.15.0-0 → 1.15.0-10

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

@@ -3,6 +3,8 @@ import { DemoData } from "../../global/demo";
 /**
  *
  * @uiName User Stat
+ * @validParents ["sqm-stat-container"]
+ * @validChildren ["p","div","h1","h2","h3","h4","h5","span"]
  * @slots [{"name":"","title":"Stat Text"}]
  * @slotEditor richText
  * @exampleGroup Statistics

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

@@ -1,7 +1,7 @@
 /**
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
- * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div"]
+ * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"]
  * @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>

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { CouponCodeViewProps } from "./sqm-coupon-code-view";
 /**
  * @uiName Coupon Code
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @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>
@@ -31,6 +32,7 @@ export declare class CouponCode {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign?: "left" | "center" | "right";
   /**
@@ -44,6 +46,7 @@ export declare class CouponCode {
    * @uiType string
    * @uiEnum ["icon", "button-outside", "button-below"]
    * @uiEnumNames ["Icon", "Button outside", "Button below"]
+   * @uiGroup Style
    */
   buttonStyle?: "icon" | "button-outside" | "button-below";
   /**
@@ -105,6 +108,46 @@ export declare class CouponCode {
    * @uiGroup Coupon code error
    */
   couponCodePlaceholder: string;
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * Color of the text and copy icon
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * The border radius on the share link container (in pixels)
+   * @uiName Border Radius
+   * @uiType number
+   * @uiGroup Style
+   */
+  borderRadius?: string;
+  /**
+   * The type of the button (primary or secondary) that will be used to copy the link.
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary"]
+   * @uiEnumNames ["Primary", "Secondary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary";
+  /**
+   * Background color of share link container
+   * @uiName Background color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-divided-layout/sqm-divided-layout.d.ts

@@ -3,6 +3,8 @@
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section"]
+ * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
  */
 export declare class DividedLayout {

package/dist/types/components/sqm-header-logo/sqm-header-logo.d.ts

@@ -1,5 +1,6 @@
 /**
  * @uiName Header Logo
+ * @validParents ["sqm-portal-frame","div","sqm-brand"]
  */
 export declare class HeroImage {
   /**

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Hero Layout
+ * @validParents ["sqm-portal-container","sqm-brand","div"]
  * @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

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

@@ -17,5 +17,6 @@ export interface HeroImageViewProps {
   paddingImage?: Spacing;
   imagePos: "left" | "center" | "right";
   imageMobilePos: "top" | "bottom";
+  buttonType?: "primary" | "secondary";
 }
 export declare function HeroImageView(props: HeroImageViewProps, children: VNode): any;

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

@@ -1,6 +1,7 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @uiName Hero Image
+ * @validParents ["sqm-portal-container","sqm-brand", "div"]
  * @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" background-color="#F9F9F9"></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" background-color="#F9F9F9" 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>
@@ -16,22 +17,26 @@ export declare class HeroImage {
    * @uiName Overlay color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   overlayColor?: string;
   /**
    * @uiName Overlay opacity
+   * @uiGroup Style
    */
   overlayOpacity: string;
   /**
    * @uiName Text color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   textColor?: string;
   /**
    * @uiName Background color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   backgroundColor?: string;
   /**
@@ -39,11 +44,13 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["overlay", "columns"]
    * @uiEnumNames ["Overlay", "Two-column"]
+   * @uiGroup Style
    */
   layout: "overlay" | "columns";
   /**
    * @uiName Image percentage
    * @uiType number
+   * @uiGroup Style
    */
   imagePercentage: number;
   /**
@@ -51,6 +58,7 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   imagePos: "left" | "center" | "right";
   /**
@@ -58,6 +66,7 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["top", "bottom"]
    * @uiEnumNames ["Top", "Bottom"]
+   * @uiGroup Style
    */
   imageMobilePos: "top" | "bottom";
   /**
@@ -87,6 +96,7 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
    * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+   * @uiGroup Style
    */
   paddingText: Spacing;
   /**
@@ -94,8 +104,18 @@ export declare class HeroImage {
    * @uiType string
    * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
    * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+   * @uiGroup Style
    */
   paddingImage: Spacing;
+  /**
+   * The type of the button (primary or secondary) that will be used to copy the link.
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary"]
+   * @uiEnumNames ["Primary", "Secondary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary";
   constructor();
   disconnectedCallback(): void;
   render(): any;

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Image
+ * @validParents ["sqm-brand","div","sqm-portal-container","sqm-divided-layout","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @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>
  */

package/dist/types/components/sqm-instant-access-registration/sqm-instant-access-registration.d.ts

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { EmailRegistrationViewProps } from "../views/email-registration-view";
 /**
  * @uiName Instant Access Registration
+ * @validParents ["sqm-portal-container","div","sqm-hero","template", "sqb-program-section", "sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Instant Access Registration - <sqm-instant-access-registration></sqm-instant-access-registration>

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

@@ -11,6 +11,7 @@ export interface LeaderboardViewProps {
       showRank?: boolean;
       hideViewer?: boolean;
       viewingUserText?: string;
+      viewingUserhighlightColor?: string;
       hideNames?: boolean;
       anonymousUser?: string;
       rankSuffix?: string;

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { LeaderboardViewProps } from "./sqm-leaderboard-view";
 /**
  * @uiName Leaderboard
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
@@ -59,6 +60,11 @@ export declare class Leaderboard {
    * @uiName Viewing user text
    */
   viewingUserText: string;
+  /**
+   * @uiWidget color
+   * @uiName Viewing user highlight color
+   */
+  viewingUserHighlightColor: string;
   /**
    * Hide the Names of users to protect personal identifiable information
    *

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

@@ -2,6 +2,7 @@ import { NavigationMenuViewProps } from "./sqm-navigation-menu-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Navigation Menu
+ * @validParents ["sqm-portal-container","div","sqm-brand","sqm-divided-layout"]
  */
 export declare class NavigationMenu {
   ignored: boolean;

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

@@ -1,5 +1,7 @@
 /**
  * @uiName Microsite Sidebar
+ * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
+ * @validChildren ["sqm-navigation-sidebar-item"]
  * @slots [{"name":"", "title":"Sidebar Content"}]
  */
 export declare class NavigationSidebar {

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

@@ -2,6 +2,7 @@ import { PortalChangePasswordViewProps } from "./sqm-portal-change-password-view
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Microsite Password Change
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand"]
  */
 export declare class PortalChangePassword {
   ignored: boolean;

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Footer
+ * @validParents ["div","sqm-brand","sqm-portal-container"]
  */
 export declare class PortalFooter {
   ignored: boolean;

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { PortalLoginViewProps } from "./sqm-portal-login-view";
 /**
  * @uiName Microsite Login
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"]
  */
 export declare class PortalLogin {
   ignored: boolean;

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Microsite Logout
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @compatibility Built for instant access
  */
 export declare class PortalLogout {

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

@@ -2,6 +2,7 @@ import { PortalProfileViewProps } from "./sqm-portal-profile-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Microsite Participant Profile
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  */
 export declare class PortalProfile {
   ignored: boolean;

package/dist/types/components/sqm-portal-protected-route/sqm-portal-protected-route.d.ts

@@ -1,5 +1,6 @@
 /**
  * @uiName Microsite Protected Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template", "sqb-program-section", "sqb-conditional-section"]
  * @slots [{"name":"","title":"Route Content"}]
  */
 export declare class PortalProtectedRoute {

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

@@ -1,5 +1,7 @@
 /**
  * @uiName Program Explainer
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-program-explainer-step"]
  * @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" text-color="#000000"></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" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>

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

@@ -3,6 +3,9 @@ export interface ProgramExplainerStepViewProps {
   description: string;
   textColor?: string;
   backgroundColor?: string;
+  borderRadius?: string;
+  iconBackgroundColor?: string;
+  iconColor?: string;
   imageUrl?: string;
   icon?: string;
 }

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

@@ -19,13 +19,30 @@ export declare class ProgramExplainerStep {
    * @uiWidget color
    * @format color
    */
-  textColor: string;
+  textColor?: string;
   /**
    * @uiName Background color
    * @uiWidget color
    * @format color
    */
-  backgroundColor: string;
+  backgroundColor?: string;
+  /**
+   * @uiName Border radius
+   * @type number
+   */
+  borderRadius?: string;
+  /**
+   * @uiName Icon Background color
+   * @uiWidget color
+   * @format color
+   */
+  iconBackgroundColor?: string;
+  /**
+   * @uiName Icon color
+   * @uiWidget color
+   * @format color
+   */
+  iconColor?: string;
   /**
    * Displayed in place of an icon
    *

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Microsite Program Menu
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @slots [{"name":"","title":"Menu Content"}]
  * @canvasRenderer always-replace
  */

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { QRCodeViewProps } from "./sqm-qr-code-view";
 /**
  * @uiName QR Code
+ * @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>
  */

package/dist/types/components/sqm-referral-card/sqm-referral-card-view.d.ts

@@ -2,7 +2,10 @@ import { VNode } from "../../stencil-public-runtime";
 export interface ReferralCardViewProps {
   verticalAlignment: "start" | "center" | "end";
   hideBorder?: boolean;
-  backgroundColor: string;
+  borderColor?: string;
+  borderRadius?: number;
+  textColor?: string;
+  backgroundColor?: string;
   slots: {
     left: VNode;
     right: VNode;
@@ -13,7 +16,7 @@ export interface ReferralCardViewProps {
   paddingRight?: string;
   paddingBottom?: string;
   paddingLeft?: string;
-  limitWidth: boolean;
+  limitWidth?: boolean;
   hasHeader: boolean;
   hasFooter: boolean;
 }

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

@@ -1,9 +1,11 @@
 /**
  * @uiName Referral Card
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
  * @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>
- */
+ * */
 export declare class ReferralCard {
   ignored: boolean;
   /**
@@ -52,6 +54,26 @@ export declare class ReferralCard {
    * @uiType string
    */
   backgroundColor: string;
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   */
+  borderColor?: string;
+  /**
+   * Color of the text and copy icon
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   */
+  textColor?: string;
+  /**
+   * The border radius on the share link container (in pixels)
+   * @uiName Border Radius
+   * @uiType number
+   */
+  borderRadius?: number;
   /**
    * @uiName Limit width
    * @uiType boolean

package/dist/types/components/sqm-referral-code/ReferralCode.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
 export default _default;
 export declare const ReferralCode: () => any;
 export declare const ShowNotificationText: () => any;
+export declare const ShowNotificationTextRed: () => any;
 export declare const ShowNotificationTextWithButton: () => any;
 export declare const ShowNotificationTextWithButtonBelow: () => any;
 export declare const CustomTooltipText: () => any;

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { CopyTextViewProps } from "../views/copy-text-view";
 /**
  * @uiName Referral Code
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span"]
  * @exampleGroup Sharing
  * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" show-notification-text="true"></sqm-referral-code>
  */
@@ -44,6 +45,7 @@ export declare class ReferralCode {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign: "left" | "center" | "right";
   /**
@@ -57,8 +59,49 @@ export declare class ReferralCode {
    * @uiType string
    * @uiEnum ["icon", "button-outside", "button-below"]
    * @uiEnumNames ["Icon", "Button outside", "Button below"]
+   * @uiGroup Style
    */
   buttonStyle?: "icon" | "button-outside" | "button-below";
+  /**
+   * Background color of share link container
+   * @uiName Background color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * Color of the text and copy icon
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * The border radius on the share link container (in pixels)
+   * @uiName Border Radius
+   * @uiType number
+   * @uiGroup Style
+   */
+  borderRadius?: string;
+  /**
+   * The type of the button (primary or secondary) that will be used to copy the link.
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary"]
+   * @uiEnumNames ["Primary", "Secondary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary";
   /**
    * @undocumented
    * @uiType object

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

@@ -7,6 +7,7 @@ declare const _default: {
 export default _default;
 export declare const ReferralCodes: () => any;
 export declare const WithPreviouslyCopiedCode: () => any;
+export declare const WithPreviouslyCopiedCodeAndCustomColor: () => any;
 export declare const Empty: () => any;
 export declare const EmptyWithCustomTextAndImage: () => any;
 export declare const Loading: () => any;

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

@@ -12,5 +12,6 @@ export interface ReferralCodesViewProps {
     loading: boolean;
   };
   titleText?: string;
+  textColor?: string;
 }
 export declare function ReferralCodesView(props: ReferralCodesViewProps): any;

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { ReferralCodesViewProps } from "./sqm-referral-codes-view";
 /**
  * @uiName Promo Codes
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"]
  * @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>
@@ -11,6 +12,12 @@ export declare class ReferralCodes {
    * @uiName Title Text
    */
   titleText?: string;
+  /**
+   * @uiName Text Color
+   * @uiType string
+   * @uiWidget color
+   */
+  textColor?: string;
   /**
    * @uiName Empty State Header Text
    */

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

@@ -2,6 +2,8 @@ import { DemoData } from "../../global/demo";
 import { GenericTableViewProps } from "../../tables/GenericTableView";
 /**
  * @uiName Referral Table
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @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="Anonymous User" 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} 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 {Reward approved for payout and was scheduled for payment 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.} 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>

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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { EmailRegistrationViewProps } from "../views/email-registration-view";
 /**
  * @uiName Instant Access Friend Registration
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>

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

@@ -2,6 +2,8 @@ import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Reward Exchange
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-empty"]
  * @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>