@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

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

@@ -1,7 +1,9 @@
-import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view";
 import { DemoData } from "../../global/demo";
+import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view";
 /**
  * @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>
@@ -138,6 +140,13 @@ export declare class SqmRewardExchangeList {
    * @uiName Cost row title
    */
   costTitle: string;
+  /**
+   * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+   * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+   * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+   * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
+   */
+  stateController: string;
   /**
    * @undocumented
    * @uiType object

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

@@ -75,6 +75,7 @@ export interface RewardExchangeProps {
   rewardRedeemedText: string;
   costTitle: string;
   empty: VNode;
+  stateController: string;
   demoData?: object;
 }
 export declare type Stages = "" | "chooseReward" | "chooseAmount" | "confirmation";

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): "primary" | "warning" | "success" | "danger";
+  getBadgeType(rewardStatus: string): "warning" | "primary" | "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,3 +1,4 @@
+import { Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Source Column

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

@@ -1,3 +1,4 @@
+import { ImpactConnection, Reward } from "../../../saasquatch";
 import { RewardTableColumn } from "./RewardTableColumn";
 /**
  * @uiName Reward Table Status Column
@@ -22,9 +23,9 @@ export declare class RewardTableStatusColumn implements RewardTableColumn {
    */
   expiryText: string;
   /**
-   * Displayed when a reward is pending due to W9 compliance.
+   * Displayed when a reward is pending due to W-9 compliance.
    *
-   * @uiName W9 pending text
+   * @uiName W-9 pending text
    */
   pendingUsTax: string;
   /**

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,7 +1,9 @@
 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"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><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 was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{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 ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>

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-route/sqm-route.d.ts

@@ -3,6 +3,7 @@ export interface RouteProps {
 }
 /**
  * @uiName Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
  * @slots [{"name":"","title":"Content"}]
  */
 export declare class SqmRoute {

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

@@ -1,5 +1,7 @@
 /**
  * @uiName Router
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"]
+ * @validChildren ["sqm-route"]
  * @slots [{"name":"","title":"Routes"}]
  */
 export declare class SqmRouter {

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

@@ -1,18 +1,11 @@
 /**
  * @uiName Scroll Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  */
 export declare class Scroll {
   ignored: boolean;
-  /**
-   * @uiName Button type
-   * @uiType string
-   * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
-   * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-
-   */
-  buttonType: "default" | "primary" | "success" | "neutral" | "warning" | "danger" | "text";
   /**
    * @uiName Button text
    */

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

@@ -2,6 +2,7 @@ import { ShareButtonViewProps } from "./sqm-share-button-view";
 import { DemoData } from "../../global/demo";
 /**
  * @uiName Share Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
@@ -9,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 {
@@ -39,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;
   /**
@@ -64,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";
   /**
@@ -92,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

@@ -2,6 +2,7 @@ import { DemoData } from "../../global/demo";
 import { CopyTextViewProps } from "../views/copy-text-view";
 /**
  * @uiName Share Code
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-titled-section"]
  * @exampleGroup Sharing
  * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
@@ -32,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
    */
@@ -45,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
+   * @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,6 @@ 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 CustomStylesWithDemoHooks: () => any;
 export declare const FullStack: () => any;

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

@@ -3,6 +3,7 @@ import { CopyTextViewProps } from "../views/copy-text-view";
 /**
  * @uiName Share Link
  * @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>
  */
 export declare class ShareLink {
@@ -32,19 +33,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
+   * @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

@@ -1,6 +1,8 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @uiName Stat Container
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
+ * @validChildren ["sqm-big-stat"]
  * @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>
@@ -15,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

@@ -1,5 +1,7 @@
 /**
  * @uiName Tab Group
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-tab"]
  * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
  * @exampleGroup Layout
  * @canvasRenderer always-replace
@@ -15,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;