@saasquatch/mint-components 1.15.0-8 → 1.15.0-81

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

@@ -2,14 +2,14 @@ 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"]
+ * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
- * @example Referral Started Leaderboard - <sqm-leaderboard 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"><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 Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" 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 Points Earned Leaderboard - <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>
+ * @example Referral Started - <sqm-leaderboard 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"><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 Referral Converted - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" 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 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 - <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>
  * @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>
  */
 export declare class Leaderboard {
@@ -49,22 +49,10 @@ export declare class Leaderboard {
    * @uiName Rank Suffix
    */
   rankSuffix: string;
-  /**
-   * Hide the viewer's leaderboard row if not in the top results.
-   *
-   * @uiName Hide viewing user
-   * @default
-   */
-  hideViewer: boolean;
   /**
    * @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
    *
@@ -104,6 +92,54 @@ export declare class Leaderboard {
    * @uiName Maximum rows number
    */
   maxRows: number;
+  /**
+   * Hide the viewer's leaderboard row if not in the top results.
+   *
+   * @uiName Hide viewing user
+   * @default
+   */
+  hideViewer: boolean;
+  /**
+   * Changes the background color of the viewing user row in the leaderboard.
+   * @uiName Viewing User Highlight Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  viewingUserHighlightColor?: string;
+  /**
+   * Changes the text color of the viewing user row in the leaderboard.
+   * @uiName Viewing User Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  viewingUserHighlightTextColor?: string;
+  /**
+   * Changes the background color of the leaderboard.
+   * @uiName Background Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  background?: string;
+  /**
+   * Changes the border color of the table rows.
+   * @uiName Border Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * Text color of the leaderboard.
+   * @uiName Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * Leaderboard border radius in pixels.
+   * @uiName Border Radius
+   * @uiGroup Style
+   */
+  borderRadius?: number;
   /**
    * @undocumented
    * @uiType object

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

@@ -16,6 +16,12 @@ export interface LeaderboardProps {
   maxRows: number;
   programId?: string;
   interval: string;
+  viewingUserHighlightColor?: string;
+  viewingUserHighlightTextColor?: string;
+  background?: string;
+  borderColor?: string;
+  textColor?: string;
+  borderRadius?: number;
   empty: VNode;
   demoProps?: LeaderboardViewProps;
 }

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

@@ -1,5 +1,6 @@
 /**
  * @uiName Link Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Common Components
  * @example Link Button - <sqm-link-button link="https://www.example.com" open-in-new-tab="true">Click here</sqm-link-button>
  */

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

@@ -4,6 +4,7 @@ import { CopyTextViewProps } from "../views/copy-text-view";
  * @uiName Sign out current user
  * @exampleGroup Instant Access
  * @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>
  */
 export declare class LogoutCurrentUser {

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

@@ -2,5 +2,6 @@ import { VNode } from "../../stencil-public-runtime";
 export interface NavigationSidebarViewProps {
   checked?: boolean;
   onClick?: (e: MouseEvent) => void;
+  mobileMenuColor?: string;
 }
 export declare function NavigationSidebarView(props: NavigationSidebarViewProps, children: VNode): any;

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

@@ -1,3 +1,5 @@
+import { NavigationSidebarViewProps } from "./sqm-navigation-sidebar-view";
+import { DemoData } from "../../global/demo";
 /**
  * @uiName Microsite Sidebar
  * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
@@ -6,6 +8,18 @@
  */
 export declare class NavigationSidebar {
   ignored: boolean;
+  /**
+   * @uiName Text color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  mobileMenuColor?: string;
+  /**
+   * @undocumented
+   * @uiType object
+   */
+  demoData?: DemoData<NavigationSidebarViewProps>;
   constructor();
   disconnectedCallback(): void;
   render(): any;

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

@@ -7,5 +7,13 @@ export interface NavigationSidebarItemViewProps {
     icon: string;
     path: string;
   };
+  backgroundColor?: string;
+  backgroundHoverColor?: string;
+  textColor?: string;
+  textHoverColor?: string;
+  borderRadius?: number;
+  backgroundFocusedColor?: string;
+  textFocusedColor?: string;
+  padding?: string;
 }
 export declare function NavigationSidebarItemView(props: NavigationSidebarItemViewProps): any;

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

@@ -1,5 +1,6 @@
 import { DemoData } from "../../global/demo";
 import { NavigationSidebarItemViewProps } from "./sqm-navigation-sidebar-item-view";
+import { Spacing } from "../../global/mixins";
 /**
  * @uiName Microsite Sidebar Item
  * @validParents ["sqm-navigation-sidebar"]
@@ -16,12 +17,68 @@ export declare class NavigationSidebarItem {
    * Options available at https://shoelace.style/components/icon
    *
    * @uiName Icon
+   * @uiGroup Style
    */
   icon: string;
   /**
    * @uiName Label
    */
   label: string;
+  /**
+   * Background color of the nav item
+   * @uiName Background Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
+  /**
+   * Background color of the nav item when hovered
+   * @uiName Background Hover Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundHoverColor?: string;
+  /**
+   * Background color of the nav item when focused
+   * @uiName Background Focused Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundFocusedColor?: string;
+  /**
+   * Text color of the nav item
+   * @uiName Text Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * Text color of the nav item when hovered
+   * @uiName Text Hover Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textHoverColor?: string;
+  /**
+   * Text color of the nav item when items is focused
+   * @uiName Text Focused Color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textFocusedColor?: string;
+  /**
+   * Border radius (in number of pixels)
+   * @uiName Border Radius
+   * @uiGroup Style
+   */
+  borderRadius?: number;
+  /**
+   * @uiName Padding
+   * @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"]
+   */
+  padding?: Spacing;
   /**
    * @undocumented
    * @uiType object

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

@@ -11,5 +11,6 @@ export interface PaginationViewProps {
     onNext: (e: Event) => void;
     onPrev: (e: Event) => void;
   };
+  buttonType?: "primary" | "secondary";
 }
 export declare function PaginationView(props: PaginationViewProps): any;

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

@@ -2,8 +2,6 @@ import { DemoData } from "../../global/demo";
 import { UsePagination } from "./usePagination";
 /**
  * @uiName Pagination
- * @exampleGroup Common Components
- * @example Promo Code Pagination - <sqm-pagination></sqm-pagination>
  */
 export declare class Pagination {
   ignored: boolean;
@@ -11,6 +9,15 @@ export declare class Pagination {
    * @uiName Pagination text
    */
   paginationText: string;
+  /**
+   * The type of the button that is used (primary or secondary).
+   * @uiName Button Type
+   * @uiType string
+   * @uiEnum ["primary", "secondary"]
+   * @uiEnumNames ["Primary", "Secondary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary";
   /**
    * @undocumented
    * @uiType object

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

@@ -23,8 +23,8 @@ export declare function usePopupContainer(props: UsePopupContainerProps): {
       poweredByText: string;
       poweredBy: boolean;
       closeButton: boolean;
-      embedPadding?: "none" | "medium" | "large" | "small";
-      popupPadding?: "none" | "medium" | "large" | "small";
+      embedPadding?: "small" | "none" | "medium" | "large";
+      popupPadding?: "small" | "none" | "medium" | "large";
     };
   };
   data: {};

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

@@ -25,5 +25,7 @@ export interface PortalChangePasswordViewProps {
     setOpen: (open: boolean) => void;
     submit: (event: MouseEvent) => void;
   };
+  borderRadius?: string;
+  background?: string;
 }
 export declare function PortalChangePasswordView(props: PortalChangePasswordViewProps): any;

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

@@ -1,6 +1,6 @@
 /**
  * @uiName Footer
- * @validParents ["div","sqm-brand","sqm-portal-container"]
+ * @validParents ["div","sqm-brand","sqm-portal-container", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration"]
  */
 export declare class PortalFooter {
   ignored: boolean;

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

@@ -9,11 +9,15 @@ export interface PortalForgotPasswordViewProps {
     submit: (event: any) => Promise<void>;
   };
   content: {
-    secondaryButton: any;
     messageSlot: any;
     emailLabel?: string;
     submitLabel?: string;
     successAlertText?: string;
+    loginText?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    border?: string;
+    textColor?: string;
   };
 }
 export declare function PortalForgotPasswordView(props: PortalForgotPasswordViewProps): any;

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

@@ -43,6 +43,21 @@ export declare class PortalForgotPassword {
    * @uiName Email verification sent text
    */
   successAlertText: string;
+  /**
+   * @uiName Background color
+   * @uiWidget color
+   */
+  backgroundColor: string;
+  /**
+   * @uiName Border radius
+   * @uiWidget number
+   */
+  borderRadius: string;
+  /**
+   * @uiName Border style
+   * @uiWidget textArea
+   */
+  border: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-frame/sqm-portal-frame-view.d.ts

@@ -8,5 +8,8 @@ export interface PortalFrameViewProps {
     rerender: Function;
   };
   notFullScreen?: boolean;
+  backgroundColor?: string;
+  border?: string;
+  headerAndFooterBackgroundColor?: string;
 }
 export declare function PortalFrameView(props: PortalFrameViewProps, children: VNode): any;

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

@@ -10,6 +10,25 @@ export declare class PortalFrame {
    * @undocumented
    */
   notFullScreen?: boolean;
+  /**
+   * @uiName Background color
+   * @uiWidget color
+   * @uiType string
+   */
+  backgroundColor: string;
+  /**
+   * Borders placed to seperate the header and footer from the body content.
+   * @uiName Border
+   * @uiType string
+   */
+  border: string;
+  /**
+   * Background color for the header and footer.
+   * @uiName Header and Footer Background Color
+   * @uiWidget color
+   * @uiType string
+   */
+  headerAndFooterBackgroundColor: string;
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-portal-frame/usePortalFrame.d.ts

@@ -1,3 +1,4 @@
 import { VNode } from "../../stencil-public-runtime";
 import { PortalFrameViewProps } from "./sqm-portal-frame-view";
-export declare function usePortalFrame(footerContent: VNode, headerContent: VNode): PortalFrameViewProps;
+import { PortalFrame } from "./sqm-portal-frame";
+export declare function usePortalFrame(footerContent: VNode, headerContent: VNode, props: PortalFrame): PortalFrameViewProps;

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

@@ -3,6 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => any;
+export declare const Text: () => any;
 export declare const IsGoogle: () => any;
 export declare const LoginWithError: () => any;
 export declare const LoginLoading: () => any;

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

@@ -3,7 +3,7 @@ export interface ProgramExplainerStepViewProps {
   description: string;
   textColor?: string;
   backgroundColor?: string;
-  borderRadius?: string;
+  borderRadius?: number;
   iconBackgroundColor?: string;
   iconColor?: string;
   imageUrl?: string;

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

@@ -27,10 +27,11 @@ export declare class ProgramExplainerStep {
    */
   backgroundColor?: string;
   /**
+   * Amount in pixels
    * @uiName Border radius
    * @type number
    */
-  borderRadius?: string;
+  borderRadius?: number;
   /**
    * @uiName Icon Background color
    * @uiWidget color

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,7 +1,8 @@
 /**
+ *
  * @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"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-hero"]
+ * @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", "sqm-portal-footer", "sqm-titled-section"]
  * @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>
@@ -53,7 +54,27 @@ export declare class ReferralCard {
    * @uiWidget color
    * @uiType string
    */
-  backgroundColor: string;
+  backgroundColor?: string;
+  /**
+   * Border color of container
+   * @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 (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

@@ -45,6 +45,7 @@ export declare class ReferralCode {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign: "left" | "center" | "right";
   /**
@@ -58,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 that is used (primary or secondary).
+   * @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

@@ -12,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/cells/sqm-referral-table-rewards-cell.d.ts

@@ -1,3 +1,4 @@
+import { ImpactConnection, Reward } from "../../../saasquatch";
 export declare class ReferralTableRewardsCell {
   rewards: Reward[];
   taxConnection: ImpactConnection;

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

@@ -1,3 +1,4 @@
+import { FraudStatus } from "../../../saasquatch";
 export declare class ReferralTableStatusCell {
   statusText: string;
   fraudStatus?: FraudStatus;

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

@@ -1,4 +1,5 @@
 import { VNode } from "../../../stencil-public-runtime";
+import { ImpactConnection, Referral, Referrer } from "../../../saasquatch";
 export interface ReferralTableColumn {
   renderLabel(): Promise<string>;
   renderCell(data: Referral, options: {

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

@@ -1,3 +1,4 @@
+import { Referral } from "../../../saasquatch";
 import { ReferralTableColumn } from "./ReferralTableColumn";
 /**
  * @uiName Referral Table Generic Column

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

@@ -1,3 +1,4 @@
+import { Referral, Referrer } from "../../../saasquatch";
 import { ReferralDates } from "../useReferralTable";
 import { ReferralTableColumn } from "./ReferralTableColumn";
 /**

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

@@ -1,3 +1,4 @@
+import { ImpactConnection, Referral, Referrer } from "../../../saasquatch";
 import { ReferralTableColumn } from "./ReferralTableColumn";
 /**
  * @uiName Referral Table Rewards Column

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

@@ -1,3 +1,4 @@
+import { Referral, Referrer } from "../../../saasquatch";
 import { ReferralTableColumn } from "./ReferralTableColumn";
 /**
  * @uiName Referral Table Status Column