@saasquatch/mint-components 1.15.0-8 → 1.15.0-9

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

@@ -11,7 +11,7 @@ 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-9d4259f4.js');
+const copyTextView = require('./copy-text-view-b2f47da0.js');
 
 const style = {
   Container: {
@@ -220,8 +220,18 @@ const ReferralCode = 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 (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() { }
@@ -245,6 +255,11 @@ function useDemoReferralCode(props) {
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
     isCopied: props.showNotificationText,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     isUsed: false,
     rewardStatus: "AVAILABLE",
     open,
@@ -258,53 +273,53 @@ function useDemoReferralCode(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const style$1 = {
-  Wrapper: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-large)",
-  },
-  HeaderContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  ShareCodeContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  ShareButtonContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  TitleText: {
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-large)",
-    margin: "0",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet$1 = JSS.createStyleSheet(style$1);
-const styleString$1 = sheet$1.toString();
 function ReferralCodesView(props) {
-  const { slots, titleText, states } = props;
+  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
+  const style = {
+    Wrapper: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-large)",
+      color: textColor,
+    },
+    HeaderContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    ShareCodeContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    ShareButtonContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    TitleText: {
+      fontSize: "var(--sl-font-size-large)",
+      margin: "0",
+    },
+  };
+  const vanillaStyle = `
+    :host {
+      display: block;
+    }
+    :host([hidden]): {
+      display: none;
+    }
+  `;
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;
@@ -312,16 +327,16 @@ function ReferralCodesView(props) {
     if (states.loading) {
       return slots.loading;
     }
-    return (index.h("div", { class: sheet$1.classes.Wrapper },
-      index.h("div", { class: sheet$1.classes.ShareCodeContainer }, slots.shareCodes),
-      index.h("div", { class: sheet$1.classes.ShareButtonContainer }, slots.shareButtons)));
+    return (index.h("div", { class: sheet.classes.Wrapper },
+      index.h("div", { class: sheet.classes.ShareCodeContainer }, slots.shareCodes),
+      index.h("div", { class: sheet.classes.ShareButtonContainer }, slots.shareButtons)));
   };
-  return (index.h("div", { class: sheet$1.classes.Wrapper, part: "sqm-base" },
+  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle,
-      styleString$1),
-    index.h("div", { class: sheet$1.classes.HeaderContainer },
-      index.h("h2", { class: sheet$1.classes.TitleText }, titleText),
+      styleString),
+    index.h("div", { class: sheet.classes.HeaderContainer },
+      index.h("h2", { class: sheet.classes.TitleText }, titleText),
       !states.noCodes && !states.loading && slots.pagination),
     getSlotContent(states)));
 }
@@ -381,6 +396,7 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return cjs.cjs({
     titleText: props.titleText,
+    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

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

@@ -11,7 +11,7 @@ require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./useReferralCodes-82e8797b.js');
 require('./mixins-f7e0377a.js');
-const copyTextView = require('./copy-text-view-9d4259f4.js');
+const copyTextView = require('./copy-text-view-b2f47da0.js');
 const GenericTableView = require('./GenericTableView-f0e9c531.js');
 require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
@@ -35,7 +35,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52f
 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-afc40c22.js');
+const ShadowViewAddon = require('./ShadowViewAddon-3e3e03ab.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-f369b0a6.js');
 
@@ -14144,6 +14144,9 @@ const ReferralCode = () => {
 const ShowNotificationText = () => {
   return (index.h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
 };
+const ShowNotificationTextRed = () => {
+  return (index.h("sqm-referral-code", { textColor: "red", showNotificationText: true, notificationText: "You've copied this code before" }));
+};
 const ShowNotificationTextWithButton = () => {
   return (index.h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
 };
@@ -14195,6 +14198,7 @@ const ReferralCode$1 = /*#__PURE__*/Object.freeze({
   'default': ReferralCode_stories,
   ReferralCode: ReferralCode,
   ShowNotificationText: ShowNotificationText,
+  ShowNotificationTextRed: ShowNotificationTextRed,
   ShowNotificationTextWithButton: ShowNotificationTextWithButton,
   ShowNotificationTextWithButtonBelow: ShowNotificationTextWithButtonBelow,
   CustomTooltipText: CustomTooltipText$1,
@@ -15600,6 +15604,12 @@ const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
+const WithPreviouslyCopiedCodeAndCustomColor = () => {
+  return (index.h("sqm-referral-codes", { textColor: "red" },
+    pagination("pagination"),
+    shareCodeWithPreviouslyCopied("shareCodes"),
+    shareButtons("shareButtons")));
+};
 const Empty$3 = () => {
   return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
     pagination("pagination"),
@@ -15626,6 +15636,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   'default': ReferralCodes_stories,
   ReferralCodes: ReferralCodes,
   WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
+  WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$3,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
   Loading: Loading$b

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; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; 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; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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", exportparts: "base: primarybutton-base", onClick: () => props.buttonNewTab
+        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));

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

@@ -13,6 +13,7 @@ export class HeroImage {
   constructor() {
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -20,11 +21,13 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -32,6 +35,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -39,6 +43,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -51,6 +56,7 @@ export class HeroImage {
      * @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";
     /**
@@ -58,8 +64,18 @@ export class HeroImage {
      * @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 (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() { }
@@ -116,6 +132,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -136,6 +155,9 @@ export class HeroImage {
         "tags": [{
             "text": "Overlay opacity",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -163,6 +185,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -189,6 +214,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -218,6 +246,9 @@ export class HeroImage {
           }, {
             "text": "[\"Overlay\", \"Two-column\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -242,6 +273,9 @@ export class HeroImage {
           }, {
             "text": "number",
             "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -272,6 +306,9 @@ export class HeroImage {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -302,6 +339,9 @@ export class HeroImage {
           }, {
             "text": "[\"Top\", \"Bottom\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -444,6 +484,9 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -479,12 +522,48 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "padding-image",
       "reflect": false,
       "defaultValue": "\"none\""
+    },
+    "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\""
     }
   }; }
 }

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; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: 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; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -13,6 +13,9 @@ export const ReferralCode = () => {
 export const ShowNotificationText = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
 };
+export const ShowNotificationTextRed = () => {
+  return (h("sqm-referral-code", { textColor: "red", showNotificationText: true, notificationText: "You've copied this code before" }));
+};
 export const ShowNotificationTextWithButton = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
 };

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

@@ -57,8 +57,18 @@ export class ReferralCode {
      * @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() { }
@@ -253,6 +263,9 @@ export class ReferralCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -260,12 +273,158 @@ export class ReferralCode {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
+    "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
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border color of share link container (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-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 (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "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; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: 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; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -304,6 +463,11 @@ function useDemoReferralCode(props) {
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
     isCopied: props.showNotificationText,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     isUsed: false,
     rewardStatus: "AVAILABLE",
     open,