@saasquatch/mint-components 1.15.0-5 → 1.15.0-51

package/dist/types/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.d.ts

@@ -1,3 +1,4 @@
+import { Reward } from "../../../saasquatch";
 export declare class RewardTableRewardsCell {
   reward: Reward;
   redeemedText: string;

package/dist/types/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.d.ts

@@ -1,3 +1,4 @@
+import { Reward } from "../../../saasquatch";
 export declare class RewardTableSourceCell {
   reward: Reward;
   deletedUserText: string;

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

@@ -1,3 +1,4 @@
+import { ImpactConnection, Reward } from "../../../saasquatch";
 export declare class RewardTableStatusCell {
   statusText: string;
   reward: Reward;
@@ -18,7 +19,7 @@ export declare class RewardTableStatusCell {
   payoutCancelled: string;
   rewardStatus(reward: Reward): string;
   getTaxPendingReasons(reward: Reward, taxConnection: ImpactConnection): string;
-  getBadgeType(rewardStatus: string): "warning" | "primary" | "success" | "danger";
+  getBadgeType(rewardStatus: string): "primary" | "warning" | "success" | "danger";
   getPayoutStatusText(taxStatus: string): string;
   render(): any;
 }

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

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

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

@@ -1,9 +1,10 @@
+import { Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Date Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
+ * @example Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
  */
 export declare class RewardTableDateColumn implements RewardTableColumn {
   /**

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

@@ -1,9 +1,10 @@
+import { Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export declare class RewardTableCustomerNoteColumn implements RewardTableColumn {
   /**

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

@@ -1,9 +1,10 @@
+import { Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Rewards Table Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
+ * @example Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
  */
 export declare class RewardsTableColumn implements RewardTableColumn {
   /**

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

@@ -1,9 +1,10 @@
+import { Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export declare class RewardTableUserColumn implements RewardTableColumn {
   /**

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

@@ -1,9 +1,10 @@
+import { ImpactConnection, Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" 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." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" 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." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export declare class RewardTableStatusColumn implements RewardTableColumn {
   /**

package/dist/types/components/sqm-rewards-table/mockRewardData.d.ts

@@ -1,4 +1,5 @@
 import { DateTime } from "luxon";
+import { Reward } from "../../saasquatch";
 declare const _default: (count?: number, status?: any) => {
   data: Reward[];
 };

package/dist/types/components/sqm-rewards-table/mockTaxData.d.ts

@@ -1,2 +1,3 @@
+import { ImpactConnection } from "../../saasquatch";
 declare const _default: () => ImpactConnection;
 export default _default;

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

@@ -1,5 +1,6 @@
 import { DemoData } from "../../global/demo";
 import { GenericTableViewProps } from "../../tables/GenericTableView";
+import { Referral } from "../../saasquatch";
 /**
  * @uiName Reward Table
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]

package/dist/types/components/sqm-rewards-table/useRewardsTable.d.ts

@@ -1,6 +1,6 @@
 import { VNode } from "../../stencil-public-runtime";
-import { RewardsTable } from "./sqm-rewards-table";
 import { GenericTableViewProps } from "../../tables/GenericTableView";
+import { RewardsTable } from "./sqm-rewards-table";
 export declare const CSS_NAMESPACE = "sqm-rewards-table";
 export declare function useRewardsTable(props: RewardsTable, emptyElement: VNode, loadingElement: VNode): GenericTableViewProps;
 export declare function tryMethod(c: HTMLElement, callback: () => Promise<string>): Promise<string | VNode>;

package/dist/types/components/sqm-share-button/ShareButton.stories.d.ts

@@ -12,7 +12,7 @@ export declare const TextStyle: () => any;
 export declare const WithoutIcon: () => any;
 export declare const WithoutText: () => any;
 export declare const TextStyleWithoutIcon: () => any;
-export declare const WithCustomColors: () => any;
+export declare const WithCustomColorsAndBranding: () => any;
 export declare const WithCustomBorderRadius: () => any;
 export declare const LinkLocationTest: () => any;
 export declare const FullStackIcon: () => any;

package/dist/types/components/sqm-share-button/sqm-share-button-view.d.ts

@@ -4,8 +4,9 @@ export interface ShareButtonViewProps {
   loading?: boolean;
   disabled?: boolean;
   pill?: boolean;
-  type?: "primary" | "success" | "info" | "warning" | "danger" | "default" | "text";
+  type?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "default" | "text";
   size?: "small" | "medium" | "large";
+  border?: string;
   icon?: string;
   hideicon?: boolean;
   hidetext?: boolean;

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

@@ -10,12 +10,12 @@ import { DemoData } from "../../global/demo";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</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>
  */
 export declare class ShareButton {
@@ -40,22 +40,31 @@ export declare class ShareButton {
   /**
    * Configure border radius with pixel amount
    * @uiName Border radius
+   * @uiGroup Style
    */
   borderradius?: number;
   /**
    * @uiName Button background color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   backgroundcolor?: string;
+  /**
+   * @uiName Border
+   * @uiGroup Style
+   */
+  border?: string;
   /**
    * @uiName Button text color
    * @uiWidget color
    * @format color
+   * @uiGroup Style
    */
   textcolor?: string;
   /**
    * @uiName Display pill
+   * @uiGroup Style
    */
   pill?: boolean;
   /**
@@ -65,15 +74,16 @@ export declare class ShareButton {
   /**
    * @uiType string
    * @uiName Button style
-   * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-   * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+   * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+   * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
    */
-  type?: "primary" | "success" | "info" | "warning" | "danger" | "default" | "text";
+  type?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "default" | "text";
   /**
    * @uiName Button size
    * @uiType string
    * @uiEnum ["small", "medium", "large" ]
    * @uiEnumNames ["Small", "Medium", "Large"]
+   * @uiGroup Style
    */
   size?: "small" | "medium" | "large";
   /**
@@ -93,11 +103,13 @@ export declare class ShareButton {
   icon?: string;
   /**
    * @uiName Hide icon
+   * @uiGroup Style
    * @default
    */
   hideicon?: boolean;
   /**
    * @uiName Hide text
+   * @uiGroup Style
    * @default
    */
   hidetext?: boolean;

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

@@ -33,8 +33,32 @@ export declare class ShareCode {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign: "left" | "center" | "right";
+  /**
+   * Background color of share link container
+   * @uiName Background color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  backgroundColor?: 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;
   /**
    * @uiName Copy button label
    */
@@ -46,8 +70,26 @@ export declare class ShareCode {
    * @uiType string
    * @uiEnum ["icon", "button-outside", "button-below"]
    * @uiEnumNames ["Icon", "Button outside", "Button below"]
+   * @uiGroup Style
    */
   buttonStyle?: "icon" | "button-outside" | "button-below";
+  /**
+   * 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";
+  /**
+   * Border color of share link container (default is set to 1px solid transparent)
+   * @uiName Border color
+   * @uiWidget color
+   * @format color
+   * @uiGroup Style
+   */
+  borderColor?: string;
   /**
    * @undocumented
    * @uiType object

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

@@ -13,4 +13,5 @@ export declare const TextAlignCenter: () => any;
 export declare const TextAlignRight: () => any;
 export declare const CopyButton: () => any;
 export declare const CopyButtonBelow: () => any;
+export declare const CustomStyles: () => any;
 export declare const FullStack: () => any;

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

@@ -32,19 +32,61 @@ export declare class ShareLink {
    * @uiType string
    * @uiEnum ["left", "center", "right"]
    * @uiEnumNames ["Left", "Center", "Right"]
+   * @uiGroup Style
    */
   textAlign?: "left" | "center" | "right";
   /**
    * @uiName Copy button label
    */
   copyButtonLabel: string;
+  /**
+   * 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";
   /**
    * Set the copy button style and placement
    *
-   * @uiName Style
+   * @uiName Button style
    * @uiType string
    * @uiEnum ["icon", "button-outside", "button-below"]
    * @uiEnumNames ["Icon", "Button outside", "Button below"]
+   * @uiGroup Style
    */
   buttonStyle?: "icon" | "button-outside" | "button-below";
   /**

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

@@ -2,5 +2,8 @@ import { VNode } from "../../stencil-public-runtime";
 export interface StatContainerProps {
   space: string;
   display?: "grid" | "flex";
+  alignment?: "left" | "right" | "center";
+  hideBorder?: boolean;
+  gap?: string;
 }
 export declare function StatContainerView(props: StatContainerProps, children: VNode): any;

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

@@ -17,12 +17,35 @@ export declare class StatContainer {
    */
   space: Spacing;
   /**
+   * @undocumented
    * @uiName Display
    * @uiType string
    * @uiEnum ["grid", "flex"]
    * @uiEnumNames ["Grid", "Flex"]
    */
   display: "grid" | "flex";
+  /**
+   * Hide the seperating border between stats
+   * @uiName Hide border
+   * @uiType boolean
+   */
+  hideBorder?: boolean;
+  /**
+   * Controls the alignment of the flexbox
+   *
+   * @uiName Alignment
+   * @uiType string
+   * @uiEnum ["left", "right", "center"]
+   * @uiEnumNames ["Left", "Right", "Center"]
+   */
+  alignment?: "left" | "right" | "center";
+  /**
+   * @uiName Gap
+   * @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"]
+   */
+  gap: Spacing;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-stencilbook/BrandSelector.d.ts

@@ -0,0 +1,9 @@
+export declare class SqmBrandSelector {
+  selectedBrand: string;
+  constructor();
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  private brands;
+  private updateBrand;
+  render(): any;
+}

package/dist/types/components/sqm-stencilbook/Themes.d.ts

@@ -9,9 +9,9 @@
  *  - Shoelace color generator: https://codepen.io/claviska/full/QWveRgL
  *
  */
-export declare const Default = "\n // No CSS\n";
-export declare const Orangey: string;
-export declare const Netflix: string;
-export declare const SaaSquatchCorporate: string;
-export declare const NYTimes: string;
-export declare const Klip: string;
+import { BrandingConfiguration } from "../../saasquatch";
+export declare const Default: any;
+export declare const Netflix: BrandingConfiguration;
+export declare const Amazon: BrandingConfiguration;
+export declare const Spotify: BrandingConfiguration;
+export declare const Google: BrandingConfiguration;

package/dist/types/components/sqm-tabs/Tabs.stories.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const SimpleTabs: () => any;
+export declare const CustomColor: () => any;
 export declare const ManyTabs: () => any;
 export declare const SingleTab: () => any;
 export declare const ReferralProgram: () => any;

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

@@ -2,6 +2,7 @@ import { FunctionalComponent } from "../../stencil-public-runtime";
 import { TabElement } from "./useTabs";
 export declare type TabsViewProps = {
   placement: "left" | "right" | "bottom" | "top";
+  textColor?: string;
   content: {
     tabs: TabElement[];
   };

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

@@ -17,6 +17,14 @@ export declare class Tabs {
    * @uiEnumNames ["Left", "Right", "Bottom", "Top"]
    */
   placement?: "left" | "right" | "bottom" | "top";
+  /**
+   * Tab text color
+   *
+   * @uiName Text color
+   * @uiType string
+   * @uiWidget color
+   */
+  textColor?: string;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-task-card/DetailsView.d.ts

@@ -1,6 +1,12 @@
 import { VNode } from "../../stencil-public-runtime";
 export declare const style: {
   Description: {
+    "& .icon": {
+      color: string;
+      "&:hover": {
+        color: string;
+      };
+    };
     "& input[type=checkbox]": {
       display: string;
     };

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

@@ -21,6 +21,11 @@ export declare type TaskCardViewProps = {
     openNewTab: boolean;
     eventKey?: string;
     hideButton?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    buttonType?: "primary" | "secondary";
   };
   states: {
     loading: boolean;

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

@@ -166,6 +166,38 @@ export declare class TaskCard {
    * @uiGroup Button
    */
   hideButton?: boolean;
+  /**
+   * @uiName Card Background color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  backgroundColor?: string;
+  /**
+   * @uiName Text color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  textColor?: string;
+  /**
+   * @uiName Border color
+   * @uiWidget color
+   * @uiGroup Style
+   */
+  borderColor?: string;
+  /**
+   * @uiName Border radius
+   * @uiType number
+   * @uiGroup Style
+   */
+  borderRadius?: number;
+  /**
+   * @uiName Button Style
+   * @uiType string
+   * @uiEnum ["primary", "secondary"]
+   * @uiEnumNames ["Primary", "Secondary"]
+   * @uiGroup Style
+   */
+  buttonType?: "primary" | "secondary";
   /**
    * @undocumented
    * @uiType object

package/dist/types/components/sqm-task-card/useTaskCard.d.ts

@@ -4,6 +4,15 @@ export declare function useTaskCard(props: TaskCard): {
     loadingEvent: boolean;
     locale: string;
   };
+  styles: {
+    card: {
+      backgroundColor: string;
+      textColor: string;
+      borderColor: string;
+      borderRadius: number;
+      buttonType: "primary" | "secondary";
+    };
+  };
   callbacks: {
     sendEvent: (eventKey: string) => void;
     onClick: () => void;

package/dist/types/components/sqm-text/Text.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const PurpleText: () => any;
+export declare const CustomFontSize: () => any;

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

@@ -7,6 +7,18 @@
  */
 export declare class Text {
   ignored: boolean;
+  /**
+   * Font size in pixels
+   * @uiName Font Size
+   * @uiType number
+   */
+  fontSize?: number;
+  /**
+   * @uiName Text Color
+   * @uiWidget color
+   * @format color
+   */
+  textColor?: string;
   constructor();
   disconnectedCallback(): void;
   componentWillLoad(): void;

package/dist/types/components/sqm-text-span/sqm-text-span-view.d.ts

@@ -1,5 +1,7 @@
 import { VNode } from "../../stencil-public-runtime";
-export interface TextSpanView {
+export interface TextSpanViewProps {
   type: "p" | "subtext" | "h1" | "h2" | "h3" | "h4";
+  fontSize?: number;
+  textColor?: string;
 }
-export declare function TextSpanView(props: TextSpanView, children: VNode): any;
+export declare function TextSpanView(props: TextSpanViewProps, children: VNode): any;

package/dist/types/components/sqm-text-span/sqm-text-span.d.ts

@@ -3,7 +3,7 @@
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
  */
-export declare class Text {
+export declare class TextSpan {
   ignored: boolean;
   /**
    * @uiName Text
@@ -16,6 +16,18 @@ export declare class Text {
    * @uiEnumNames ["Paragraph", "Subtext", "Header 1", "Header 2", "Header 3", "Header 4"]
    */
   type: "p" | "subtext" | "h1" | "h2" | "h3" | "h4";
+  /**
+   * Font size in pixels
+   * @uiName Font Size
+   * @uiType number
+   */
+  fontSize?: number;
+  /**
+   * @uiName Text Color
+   * @uiWidget color
+   * @format color
+   */
+  textColor?: string;
   constructor();
   disconnectedCallback(): void;
   componentWillLoad(): void;

package/dist/types/components/sqm-timeline/Timeline.stories.d.ts

@@ -9,3 +9,4 @@ export declare const TimelineWith1Reward: () => any;
 export declare const TimelineWith2Rewards: () => any;
 export declare const TimelineWith3Rewards: () => any;
 export declare const TimelineWith4Rewards: () => any;
+export declare const TimelineWithCustomColors: () => any;

package/dist/types/components/sqm-timeline/sqm-timeline-entry-view.d.ts

@@ -5,5 +5,7 @@ export interface TimelineEntryProps {
   desc: string;
   icon: string;
   iconState: string;
+  textColor?: string;
+  lineColor?: string;
 }
 export declare function TimelineEntryView(props: TimelineEntryProps): VNode;