@saasquatch/mint-components 1.15.0-4 → 1.15.0-40

package/dist/esm/sqm-big-stat_41.entry.js

@@ -1,25 +1,25 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-91e7729f.js';
 import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-4bc38af4.js';
-import { i as intl } from './global-1d207c9e.js';
+import { i as intl } from './global-66746c30.js';
 import { i as isDemo, _, d as dist, J, H, $ as $e, w as wn, B, L, y as yn, j as jn, r as Ue, V as Ve, u as useCallback, Q as Qe, k as kn } from './index.module-89a79f66.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-8f75921a.js';
-import './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-782137ba.js';
+import './mixins-f750863a.js';
+import { C as CopyTextView } from './copy-text-view-4a207b17.js';
 import { a as useRequestRerender } from './re-render-cc945f38.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import './luxon-8d51c92b.js';
-import './sqm-text-span-view-ca32495e.js';
+import './sqm-text-span-view-cd3902e5.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-d6f33135.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
+import { P as PortalLoginView } from './sqm-portal-login-view-e870b4b0.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-e350d540.js';
+import { b as useDemoBigStat, U as useBigStat, B as BigStatView, O as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, V as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, W as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-5f9b6d07.js';
 import './sqm-portal-container-view-1683ae32.js';
 import { u as usePayoutStatus } from './usePayoutStatus-58aa56b4.js';
 
@@ -31,8 +31,19 @@ const BigStat = class {
      *
      * @uiName Flex reverse
      * @default
+     * @uiGroup Style
      */
     this.flexReverse = false;
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     * @uiGroup Style
+     */
+    this.alignment = "center";
     this.ignored = true;
     h(this);
   }
@@ -392,6 +403,7 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
+    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -415,6 +427,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -428,6 +441,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -489,6 +503,15 @@ const CouponCode = class {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
+    /**
+     * 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
+     */
+    this.buttonType = "primary";
     h(this);
   }
   disconnectedCallback() { }
@@ -512,6 +535,11 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -526,14 +554,23 @@ function useDemoCouponCode(props) {
 function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-right": props.borderless
+          ? "none"
+          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+      };
     }
     else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-bottom": props.borderless
+          ? "none"
+          : `1px solid ${props.borderColor || "var(--sqm-text)"}`,
+      };
     }
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -549,11 +586,10 @@ function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}
@@ -585,10 +621,17 @@ const DividedLayout = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
+     * @undocumented
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
     this.dividerStyle = "1px solid #EAEAEA";
+    /**
+     * Background color of the divider
+     * @uiName Divider Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     h(this);
   }
   disconnectedCallback() { }
@@ -948,6 +991,7 @@ const Hero = class {
 function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
+  console.log("buttonType is ", props.buttonType);
   // Dependent on props, not feasiable to move out
   const style = {
     Container: {
@@ -957,7 +1001,7 @@ function HeroImageView(props, children) {
         width: "100%",
         height: "100%",
         position: "absolute",
-        background: props.overlayColor || "var(--sl-color-primary-900)",
+        background: props.overlayColor || "var(--sl-color-black)",
         opacity: props.overlayOpacity,
       },
     },
@@ -1064,7 +1108,7 @@ function HeroImageView(props, children) {
       h$1("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (h$1("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h$1("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+        props.buttonText && (h$1("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));
@@ -1088,6 +1132,7 @@ const HeroImage = class {
     registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1095,11 +1140,13 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -1107,6 +1154,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1114,6 +1162,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1126,6 +1175,7 @@ const HeroImage = class {
      * @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
      */
     this.paddingText = "xxxx-large";
     /**
@@ -1133,8 +1183,18 @@ const HeroImage = class {
      * @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
      */
     this.paddingImage = "none";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     h(this);
   }
   disconnectedCallback() { }
@@ -1423,13 +1483,6 @@ const Leaderboard = class {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * Hide the viewer's leaderboard row if not in the top results.
-     *
-     * @uiName Hide viewing user
-     * @default
-     */
-    this.hideViewer = false;
     /**
      * @uiName Viewing user text
      */
@@ -1452,6 +1505,13 @@ const Leaderboard = class {
      * @uiName Maximum rows number
      */
     this.maxRows = 10;
+    /**
+     * Hide the viewer's leaderboard row if not in the top results.
+     *
+     * @uiName Hide viewing user
+     * @default
+     */
+    this.hideViewer = false;
     this.ignored = true;
     h(this);
     withShadowView(this);
@@ -1475,6 +1535,12 @@ const Leaderboard = class {
       showRank: this.showRank,
       rankSuffix: this.rankSuffix,
       width: this.width,
+      viewingUserHighlightColor: this.viewingUserHighlightColor,
+      viewingUserHighlightTextColor: this.viewingUserHighlightTextColor,
+      background: this.background,
+      borderColor: this.borderColor,
+      textColor: this.textColor,
+      borderRadius: this.borderRadius,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -1545,6 +1611,12 @@ function useLeaderboardDemo(props) {
         hideNames: props.hideNames,
         rankSuffix: props.rankSuffix,
         width: props.width,
+        viewingUserHighlightColor: props.viewingUserHighlightColor,
+        viewingUserHighlightTextColor: props.viewingUserHighlightTextColor,
+        background: props.background,
+        borderColor: props.borderColor,
+        textColor: props.textColor,
+        borderRadius: props.borderRadius,
       },
     },
     data: {
@@ -2556,7 +2628,7 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent) {
+function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = yn();
   return {
     data: {
@@ -2566,6 +2638,9 @@ function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -2577,6 +2652,26 @@ const PortalFrame = class {
      * @undocumented
      */
     this.notFullScreen = false;
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff);";
+    // TODO: Replace with border variable later
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    /**
+     * Background color for the header and footer.
+     * @uiName Header and Footer Background Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
     h(this);
   }
   disconnectedCallback() { }
@@ -2585,13 +2680,16 @@ const PortalFrame = class {
     const headerContent = h$1("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (h$1(PortalFrameView, Object.assign({}, props), h$1("slot", null)));
   }
 };
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return cjs({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h$1("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h$1("div", { style: { display: "flex", flexDirection: "column" } }, h$1("span", { style: {
@@ -3069,6 +3167,9 @@ function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
       color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
@@ -3105,11 +3206,14 @@ function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: "#FFF",
-      color: "var(--sl-color-primary-300)",
+      background: props.iconBackgroundColor || "var(--sl-color-white)",
+      color: props.iconColor || "var(--sl-color-primary-500)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
   };
   const sheet = createStyleSheet(style);
@@ -3178,44 +3282,45 @@ const ProgramMenu = class {
   }
 };
 
-const style$4 = {
-  Container: {
-    borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sqm-text)",
-    background: "var(--sl-color-neutral-0)",
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "var(--sl-spacing-large)",
-  },
-  EndContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  ColumnContainer: {
-    "& p": { margin: "0" },
-    display: "grid",
-    gridAutoColumns: "minmax(0, 1fr)",
-    gridAutoFlow: "column",
-    gap: "calc(2 * var(--sl-spacing-medium))",
-    "@media (max-width: 499px)": {
-      gridAutoFlow: "unset",
-      gridAutoColumns: "unset",
-      gridTemplateColumns: "1fr",
-      border: "none",
-    },
-  },
-};
-const sheet$4 = createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (h$1("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+  const style = {
+    Container: {
+      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      color: props.textColor || "var(--sqm-text)",
+      background: props.backgroundColor || "var(--sl-color-neutral-0)",
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "var(--sl-spacing-large)",
+    },
+    EndContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    ColumnContainer: {
+      "& p": { margin: "0" },
+      display: "grid",
+      gridAutoColumns: "minmax(0, 1fr)",
+      gridAutoFlow: "column",
+      gap: "calc(2 * var(--sl-spacing-medium))",
+      "@media (max-width: 499px)": {
+        gridAutoFlow: "unset",
+        gridAutoColumns: "unset",
+        gridTemplateColumns: "1fr",
+        border: "none",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
+  return (h$1("div", { part: "sqm-base", class: sheet.classes.Container, style: {
+      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
@@ -3225,15 +3330,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     h$1("style", { type: "text/css" },
-      styleString$4,
+      styleString,
       vanillaStyle$1),
-    props.hasHeader && (h$1("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    h$1("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+    props.hasHeader && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.header)),
+    h$1("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (h$1("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (h$1("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -4467,8 +4572,8 @@ const ShareButton = class {
     /**
      * @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"]
      */
     this.type = "default";
     /**
@@ -4480,11 +4585,13 @@ const ShareButton = class {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -4590,6 +4697,7 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -4603,8 +4711,18 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     h(this);
   }
   disconnectedCallback() { }
@@ -4625,6 +4743,11 @@ function useDemoShareCode(props) {
     textAlign: props.textAlign,
     copyButtonLabel: props.copyButtonLabel,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
+    buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
@@ -4659,19 +4782,30 @@ const ShareLink = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
+    /**
+     * The type of the button that is used (primary, secondary, or tertiary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     /**
      * 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
      */
     this.buttonStyle = "icon";
     h(this);
@@ -4693,7 +4827,12 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {
@@ -4718,12 +4857,29 @@ const StatContainer = class {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
+    this.display = "flex";
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     */
+    this.alignment = "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"]
+     */
+    this.gap = "x-large";
     h(this);
   }
   disconnectedCallback() { }
@@ -4767,8 +4923,18 @@ function useTaskCard(props) {
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
+  const styles = {
+    card: {
+      backgroundColor: props.backgroundColor,
+      textColor: props.textColor,
+      borderColor: props.borderColor,
+      borderRadius: props.borderRadius,
+      buttonType: props.buttonType,
+    },
+  };
   return {
     states: { loadingEvent, locale },
+    styles,
     callbacks: { sendEvent, onClick },
   };
 }
@@ -4882,6 +5048,14 @@ const TaskCard = class {
      * @uiGroup Button
      */
     this.hideButton = false;
+    /**
+     * @uiName Button Style
+     * @uiType string
+     * @uiEnum ["primary", "secondary", "tertiary"]
+     * @uiEnumNames ["Primary", "Secondary", "Tertiary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     h(this);
   }
   disconnectedCallback() { }
@@ -4903,6 +5077,7 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -4956,51 +5131,6 @@ const Gift = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24"
 const Circle = () => (h$1("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   h$1("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$5 = {
-  TimelineReward: {
-    color: "var(--sqm-text)",
-    lineHeight: "var(--sl-line-height-dense)",
-    "& .container": {
-      display: "flex",
-    },
-    "& .line": {
-      display: "none",
-      color: "transparent",
-      userSelect: "none",
-      background: "var(--sl-color-primary-300)",
-      width: "4px",
-      borderRadius: "4px",
-      margin: "-2px",
-      position: "relative",
-      left: "12px",
-      top: "34px",
-    },
-    "& .step": {
-      display: "flex",
-    },
-    "& .icon": {
-      position: "relative",
-      top: "4px",
-      zIndex: "1",
-      color: "var(--sl-color-primary-300)",
-      marginRight: "var(--sl-spacing-large)",
-    },
-    "& .reward": {
-      marginRight: "var(--sl-spacing-x-small)",
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& .unit": {
-      textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-small)",
-    },
-    "& .description": {
-      fontSize: "var(--sl-font-size-medium)",
-    },
-  },
-};
-const sheet$5 = createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -5013,9 +5143,54 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h$1("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
+  const style = {
+    TimelineReward: {
+      color: props.textColor || "var(--sqm-text)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .container": {
+        display: "flex",
+      },
+      "& .line": {
+        display: "none",
+        color: "transparent",
+        userSelect: "none",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
+        width: "4px",
+        borderRadius: "4px",
+        margin: "-2px",
+        position: "relative",
+        left: "12px",
+        top: "34px",
+      },
+      "& .step": {
+        display: "flex",
+      },
+      "& .icon": {
+        position: "relative",
+        top: "4px",
+        zIndex: "1",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
+        marginRight: "var(--sl-spacing-large)",
+      },
+      "& .reward": {
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .unit": {
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h$1("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     h$1("style", { type: "text/css" },
-      styleString$5,
+      styleString,
       vanillaStyle$2),
     h$1("div", { class: "container", part: "sqm-entry-container" },
       h$1("div", { class: "line" }, "/"),