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

package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js

@@ -4,7 +4,7 @@ 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-261393c6.js');
+const global = require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js');

package/dist/cjs/sqm-pagination_3.cjs.entry.js

@@ -4,14 +4,14 @@ 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-261393c6.js');
+const global = require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
 require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-c85acaaa.js');
+const copyTextView = require('./copy-text-view-7441206d.js');
 
 const style = {
   Container: {

package/dist/cjs/{sqm-portal-email-verification-view-8d5b23f3.js → sqm-portal-email-verification-view-f5ce25cc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-261393c6.js');
+const global = require('./global-124aec2c.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-261393c6.js');
+require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-8d5b23f3.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f5ce25cc.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-fcb3ea3f.js → sqm-portal-profile-view-07d13061.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-261393c6.js');
+const global = require('./global-124aec2c.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-261393c6.js');
+require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-56e48a78.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-fcb3ea3f.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-07d13061.js');
 const utilities = require('./utilities-78f5e169.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/sqm-referral-table_11.cjs.entry.js

@@ -4,7 +4,7 @@ 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-261393c6.js');
+const global = require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-rewards-table_9.cjs.entry.js

@@ -4,7 +4,7 @@ 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-261393c6.js');
+const global = require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-261393c6.js');
+require('./global-124aec2c.js');
 const index_module = require('./index.module-ee84433d.js');
 require('./cjs-1066ec21.js');
 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');
+const copyTextView = require('./copy-text-view-7441206d.js');
 const GenericTableView = require('./GenericTableView-f0e9c531.js');
 require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
@@ -24,20 +24,20 @@ const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-d39a55d8.js'
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-11d57c12.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-17111896.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-6f35d2ee.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-8d5b23f3.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-f5ce25cc.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-b986086e.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-84e99287.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1b2440c3.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-fcb3ea3f.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-07d13061.js');
 require('./utilities-78f5e169.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52fc50fe.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3f11bc68.js');
+const ShadowViewAddon = require('./ShadowViewAddon-e666dc8b.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-8b950046.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-f369b0a6.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1726,6 +1726,18 @@ const CopyButtonBelow = () => {
     buttonStyle: "button-below",
   })));
 };
+const CustomStyles = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    backgroundColor: "#1ed760",
+    borderRadius: "30px",
+    textColor: "#121212",
+    buttonType: "primary",
+  };
+  return index.h(copyTextView.CopyTextView, Object.assign({}, props));
+};
 const FullStack = () => {
   return index.h("sqm-share-link", null);
 };
@@ -1741,6 +1753,7 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   TextAlignRight: TextAlignRight,
   CopyButton: CopyButton,
   CopyButtonBelow: CopyButtonBelow,
+  CustomStyles: CustomStyles,
   FullStack: FullStack
 });
 

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-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-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-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

@@ -32,6 +32,7 @@ export class ShareCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -45,8 +46,18 @@ export class ShareCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * 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";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -148,6 +159,9 @@ export class ShareCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -155,6 +169,90 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"left\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of share link container"
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-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": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The border radius on the share link container"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
     "copyButtonLabel": {
       "type": "string",
       "mutable": false,
@@ -199,6 +297,9 @@ export class ShareCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -206,12 +307,45 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
+    "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\""
+    },
     "demoData": {
       "type": "unknown",
       "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",
@@ -247,6 +381,10 @@ function useDemoShareCode(props) {
     textAlign: props.textAlign,
     copyButtonLabel: props.copyButtonLabel,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

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);
 };