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

package/dist/cjs/{sqm-text-span-view-0aa82125.js → sqm-text-span-view-56e48a78.js}

@@ -7,37 +7,37 @@ const style = {
   p: {
     "font-size": "var(--sl-font-size-small)",
     "font-weight": "400",
-    color: "var(--sl-color-gray-800)",
+    color: "var(--sq-text)",
     margin: "0",
   },
   subtext: {
     "font-size": "var(--sl-font-size-x-small)",
     "font-weight": "400",
-    color: "var(--sl-color-gray-600)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   h1: {
     "font-size": "var(--sl-font-size-xx-large)",
     "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
+    color: "var(--sq-text)",
     margin: "0",
   },
   h2: {
     "font-size": "var(--sl-font-size-x-large)",
     "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
+    color: "var(--sq-text)",
     margin: "0",
   },
   h3: {
     "font-size": "var(--sl-font-size-large)",
     "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
+    color: "var(--sq-text)",
     margin: "0",
   },
   h4: {
     "font-size": "13px",
     "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
+    color: "var(--sq-text)",
     margin: "0",
   },
 };

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const Text = class {
   constructor(hostRef) {

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -476,7 +476,7 @@ export class CouponCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile-view.js

@@ -32,7 +32,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, exportparts: "base: defaultbutton-base" }, text.canceltext)))));
+            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -23,7 +23,7 @@ export const FullStackSuccess = () => {
     h("div", { class: "AlertContent" },
       h("div", { part: "successalert-text" }, "Title"),
       h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
           console.log("click");
         } }, "Primary Action"),
       h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -119,7 +119,7 @@ export function HeroImageView(props, children) {
       h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: "base: primarybutton-base", onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -1,65 +1,65 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
-const style = {
-  Leaderboard: {
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-    },
-    "& th": {
-      textAlign: "left",
-      padding: "var(--sl-spacing-medium)",
-      paddingTop: "0",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& tr:not(:first-child)": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& td": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-    },
-    "& .ellipses": {
-      textAlign: "left",
-      padding: "0",
-      color: "var(--sqm-text)",
-      paddingLeft: "25%",
-    },
-    "& .highlight": {
-      background: "var(--sl-color-primary-50)",
-    },
-    "& td, th": {
-      color: "var(--sqm-text)",
-      padding: "var(--sl-spacing-medium)",
-    },
-    "& .User": {
-      width: "100%",
-    },
-    "& .Score": {
-      width: "auto",
-      whiteSpace: "nowrap",
-    },
-    "& .Rank": {
-      whiteSpace: "nowrap",
-    },
-    "& .fullWidth": {
-      width: "100%",
+export function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  const style = {
+    Leaderboard: {
+      "& table": {
+        width: "100%",
+        borderCollapse: "collapse",
+      },
+      "& th": {
+        textAlign: "left",
+        padding: "var(--sl-spacing-medium)",
+        paddingTop: "0",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& tr:not(:first-child)": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+      },
+      "& td": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+      },
+      "& .ellipses": {
+        textAlign: "left",
+        padding: "0",
+        color: "var(--sqm-text)",
+        paddingLeft: "25%",
+      },
+      "& .highlight": {
+        background: styles.viewingUserhighlightColor || "var(--sl-color-primary-100)",
+      },
+      "& td, th": {
+        color: "var(--sqm-text)",
+        padding: "var(--sl-spacing-medium)",
+      },
+      "& .User": {
+        width: "100%",
+      },
+      "& .Score": {
+        width: "auto",
+        whiteSpace: "nowrap",
+      },
+      "& .Rank": {
+        whiteSpace: "nowrap",
+      },
+      "& .fullWidth": {
+        width: "100%",
+      },
     },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
   :host{
     display: block;
   }
 `;
-export function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
   if (states.isEssentials) {
     return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
   }

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js

@@ -276,6 +276,29 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "\"You\""
     },
+    "viewingUserHighlightColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Viewing user highlight color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "viewing-user-highlight-color",
+      "reflect": false
+    },
     "hideNames": {
       "type": "boolean",
       "mutable": false,
@@ -434,7 +457,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserhighlightColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -511,6 +534,7 @@ function useLeaderboardDemo(props) {
       hasLeaders: true,
       isEssentials: false,
       styles: {
+        // viewingUserHighlightColor: props.viewingUserHighlightColor,
         usersheading: props.usersheading
           ? props.usersheading
           : "Top referrers",

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.css

@@ -1,11 +1,11 @@
 p,
 .P {
   font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
+  color: var(--sqm-text);
   margin-top: 0px;
 }
 p.Subtitle,
 .P.Subtitle {
-  color: var(--sl-color-gray-500);
+  color: var(--sqm-text-subdued);
   margin: 0px;
 }

package/dist/collection/components/sqm-logout-current-user/sqm-logout-current-user.js

@@ -122,7 +122,7 @@ export class LogoutCurrentUser {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -8,6 +8,7 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
+      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
       color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
@@ -44,11 +45,14 @@ export 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);

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -71,7 +71,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Text color",
@@ -97,7 +97,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -114,6 +114,81 @@ export class ProgramExplainerStep {
       "attribute": "background-color",
       "reflect": false
     },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "type"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "iconBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-background-color",
+      "reflect": false
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-color",
+      "reflect": false
+    },
     "imageUrl": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -38,11 +38,6 @@ const style = {
     height: "100%",
     maxWidth: "335px",
   },
-  TextButton: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-600)",
-    },
-  },
   LoadingSkeleton: {
     "&::part(indicator)": {
       borderRadius: "0px !important",
@@ -93,6 +88,6 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

package/dist/collection/components/sqm-referral-code/sqm-referral-code.js

@@ -265,7 +265,7 @@ export class ReferralCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -27,9 +27,7 @@ export class ReferralTableRewardsCell {
         "flex-wrap": "wrap",
       },
       Details: {
-        "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
-        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -135,11 +135,11 @@ export class RewardTableRewardsCell {
           },
           Text: {
             fontSize: "var(--sl-font-size-medium)",
-            color: "var(--sl-color-gray-800)",
+            color: "var(--sqm-text)",
           },
           Subtext: {
             fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
+            color: "var(--sqm-text-subdued)",
           },
         };
         const sheet = createStyleSheet(style);

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -490,7 +490,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"primary\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
+        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"warning\" | \"info\" | \"success\" | \"primary\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-code/sqm-share-code.js

@@ -211,7 +211,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-share-link/ShareLink.stories.js

@@ -64,6 +64,18 @@ export const CopyButtonBelow = () => {
     buttonStyle: "button-below",
   })));
 };
+export const CustomStyles = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    backgroundColor: "#1ed760",
+    borderRadius: "30px",
+    textColor: "#121212",
+    buttonType: "primary",
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};
 export const FullStack = () => {
   return h("sqm-share-link", null);
 };

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -37,13 +37,23 @@ export class ShareLink {
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
+    /**
+     * 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";
     /**
      * 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";
     withHooks(this);
@@ -175,6 +185,39 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"Copy Link\""
     },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
     "buttonStyle": {
       "type": "string",
       "mutable": false,
@@ -187,7 +230,7 @@ export class ShareLink {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Style",
+            "text": "Button style",
             "name": "uiName"
           }, {
             "text": "string",
@@ -198,6 +241,9 @@ export class ShareLink {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -210,7 +256,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -245,7 +291,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: () => {

package/dist/collection/components/sqm-task-card/DetailsView.js

@@ -12,7 +12,7 @@ export const style = {
       position: "absolute",
       top: "var(--sl-spacing-medium)",
       right: "var(--sl-spacing-medium)",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       "& :hover": {
         color: "var(--sl-color-primary-700)",