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

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

@@ -4,26 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-0cf6d295.js');
+const global = require('./global-a38a094f.js');
 const index_module = require('./index.module-ee84433d.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./useReferralCodes-82e8797b.js');
-require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-c85acaaa.js');
+require('./mixins-4761d472.js');
+const copyTextView = require('./copy-text-view-ee147291.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 require('./luxon-2926d85f.js');
-require('./sqm-text-span-view-0aa82125.js');
+require('./sqm-text-span-view-ce4c0178.js');
 const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-0fbbda1b.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-9e7916d8.js');
+const ShadowViewAddon = require('./ShadowViewAddon-fcd0c52f.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
 
@@ -35,8 +35,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;
     stencilHooks_module.h$1(this);
   }
@@ -396,6 +407,7 @@ function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
+    buttonType: props.buttonType || "primary",
   };
 }
 
@@ -419,6 +431,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -432,6 +445,7 @@ const CouponCode = class {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -493,6 +507,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -516,6 +539,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
@@ -530,14 +558,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)": {
@@ -553,11 +590,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;`
     : ""}
@@ -589,10 +625,17 @@ const DividedLayout = class {
   constructor(hostRef) {
     index.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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -952,6 +995,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: {
@@ -961,7 +1005,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,
       },
     },
@@ -1068,7 +1112,7 @@ function HeroImageView(props, children) {
       index.h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (index.h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (index.h("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (index.h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+        props.buttonText && (index.h("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)));
@@ -1092,6 +1136,7 @@ const HeroImage = class {
     index.registerInstance(this, hostRef);
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -1099,11 +1144,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;
     /**
@@ -1111,6 +1158,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -1118,6 +1166,7 @@ const HeroImage = class {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -1130,6 +1179,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";
     /**
@@ -1137,8 +1187,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -1427,13 +1487,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
      */
@@ -1456,6 +1509,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;
     stencilHooks_module.h$1(this);
     ShadowViewAddon.withShadowView(this);
@@ -1479,6 +1539,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 = index_module.isDemo()
@@ -1549,6 +1615,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: {
@@ -2560,7 +2632,7 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
-function usePortalFrame(footerContent, headerContent) {
+function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = index_module.yn();
   return {
     data: {
@@ -2570,6 +2642,9 @@ function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }
 
@@ -2581,6 +2656,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);";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -2589,13 +2684,16 @@ const PortalFrame = class {
     const headerContent = index.h("slot", { name: "header" });
     const props = index_module.isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (index.h(ShadowViewAddon.PortalFrameView, Object.assign({}, props), index.h("slot", null)));
   }
 };
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return cjs.cjs({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (index.h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (index.h("div", { style: { display: "flex", flexDirection: "column" } }, index.h("span", { style: {
@@ -3073,6 +3171,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)": {
@@ -3109,11 +3210,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 = JSS.createStyleSheet(style);
@@ -3182,44 +3286,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 = JSS.createStyleSheet(style$4);
-const styleString$4 = sheet$4.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("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 = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
+  return (index.h("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})`,
@@ -3229,15 +3334,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$4,
+      styleString,
       vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
+    props.hasHeader && (index.h("div", { class: sheet.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -4471,8 +4576,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";
     /**
@@ -4484,11 +4589,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;
@@ -4594,6 +4701,7 @@ const ShareCode = class {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -4607,8 +4715,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -4629,6 +4747,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: () => {
@@ -4663,19 +4786,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";
     stencilHooks_module.h$1(this);
@@ -4697,7 +4831,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: () => {
@@ -4722,12 +4861,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -4771,8 +4927,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 },
   };
 }
@@ -4886,6 +5052,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";
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -4907,6 +5081,7 @@ const TaskCard = class {
 };
 function useTaskCardDemo(props) {
   return cjs.cjs({
+    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),
@@ -4960,51 +5135,6 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("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 = JSS.createStyleSheet(style$5);
-const styleString$5 = sheet$5.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -5017,9 +5147,54 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("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 = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (index.h("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$5,
+      styleString,
       vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),