@saasquatch/mint-components 1.15.0-99 → 1.16.0-1

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

@@ -14,47 +14,14 @@ const style = {
   },
   RedeemBadge: {
     "&::part(base)": {
-      padding: "4px 8px",
-      fontSize: "var(--sl-font-size-small)",
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-icon)",
-      color: "var(--sl-color-white)",
-    },
-  },
-  DangerBadge: {
-    "&::part(base)": {
-      padding: "4px 8px",
-      fontSize: "var(--sl-font-size-small)",
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-icon)",
-      color: "var(--sl-color-white)",
-    },
-  },
-  WarningBadge: {
-    "&::part(base)": {
-      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-icon)",
-      color: "var(--sl-color-white)",
-    },
-  },
-  SuccessBadge: {
-    "&::part(base)": {
       padding: "4px 8px",
-      fontSize: "var(--sl-font-size-small)",
-      textAlign: "center",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-icon)",
-      color: "var(--sl-color-white)",
+      background: "var(--sl-color-blue-600)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-neutral-500)",
     margin: "0",
   },
 };
@@ -74,7 +41,7 @@ export class RewardTableStatusCell {
     this.pendingReviewText = "Awaiting review";
     this.deniedText = "Detected self-referral";
     this.payoutFailed = "Payout failed due to a fulfillment issue and is current being retried.";
-    this.payoutApproved = "Reward approved for payout and was scheduled for payment based on your settings.";
+    this.payoutApproved = "Reward was scheduled for payment based on your settings, barring any account holds.";
     this.payoutCancelled = "If you think this is a mistake, contact our Support team.";
   }
   rewardStatus(reward) {
@@ -201,25 +168,11 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
-    // @ts-ignore
-    const getBadgeCSSClass = (badgeType) => {
-      switch (rewardStatus) {
-        case "AVAILABLE":
-          return sheet.classes.SuccessBadge;
-        case "REDEEMED":
-        case "PAYOUT_APPROVED":
-          return sheet.classes.RedeemBadge;
-        case "PENDING":
-        case "PENDING_REVIEW":
-          return sheet.classes.WarningBadge;
-        default:
-          return sheet.classes.DangerBadge;
-      }
-    };
-    const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
+          ? sheet.classes.RedeemBadge
+          : sheet.classes.Badge }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||
@@ -271,8 +224,7 @@ export class RewardTableStatusCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         }
       },
@@ -291,8 +243,7 @@ export class RewardTableStatusCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         }
       },
@@ -535,7 +486,7 @@ export class RewardTableStatusCell {
       },
       "attribute": "payout-approved",
       "reflect": false,
-      "defaultValue": "\"Reward approved for payout and was scheduled for payment based on your settings.\""
+      "defaultValue": "\"Reward was scheduled for payment based on your settings, barring any account holds.\""
     },
     "payoutCancelled": {
       "type": "string",

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Date Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
+ * @example Reward Table Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
  */
 export class RewardTableDateColumn {
   constructor() {
@@ -108,8 +108,7 @@ export class RewardTableDateColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {
@@ -69,8 +69,7 @@ export class RewardTableCustomerNoteColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
+ * @example Rewards Table Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
  */
 export class RewardsTableColumn {
   constructor() {
@@ -147,8 +147,7 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -215,8 +215,7 @@ export class RewardTableUserColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export class RewardTableStatusColumn {
   constructor() {
@@ -455,12 +455,10 @@ export class RewardTableStatusColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           },
           "ImpactConnection": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
+import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -10,7 +10,6 @@ import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
@@ -235,8 +234,7 @@ export class RewardsTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../saasquatch"
+            "location": "global"
           }
         }
       },

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -1,11 +1,11 @@
 import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import debugFn from "debug";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
+import debugFn from "debug";
 const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `

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

@@ -1,7 +1,6 @@
 import { h, Component, State, Prop, Host } from "@stencil/core";
 /**
  * @uiName Route
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
  * @slots [{"name":"","title":"Content"}]
  */
 export class SqmRoute {

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

@@ -3,8 +3,6 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useRouter } from "./useRouter";
 /**
  * @uiName Router
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"]
- * @validChildren ["sqm-route"]
  * @slots [{"name":"","title":"Routes"}]
  */
 export class SqmRouter {

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

@@ -4,7 +4,6 @@ import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Scroll Button
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  */

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

@@ -44,15 +44,13 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColorsAndBranding = () => {
+export const WithCustomColors = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
-    border: "2px solid yellow",
-    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

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

@@ -24,30 +24,15 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-// TODO: Figure out hover and active states
-// *::part(base):hover {
-// 	border-color: ${
-//     props.backgroundcolor
-//       ? props.backgroundcolor
-//       : props.medium
-//       ? medium[props.medium].color
-//       : ""
-//   }!important;
-// }
-// *::part(base):focus {
-// 	border-color: ${
-//     props.backgroundcolor
-//       ? props.backgroundcolor
-//       : props.medium
-//       ? medium[props.medium].color
-//       : ""
-//   }!important;
-// }
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	sl-button::part(base) {
-	  border: ${props.border || "none"};
-    font-family: var(--sqm-primary-font);
+	*::part(base) {
+	border: none;
+			--sl-focus-ring-color-primary: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}80!important;
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -62,7 +47,21 @@ export function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
+	*::part(base):hover {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
 
+	*::part(base):focus {
+		border-color: ${props.backgroundcolor
+    ? props.backgroundcolor
+    : props.medium
+      ? medium[props.medium].color
+      : ""}D1!important;
+	}
 
 	*::part(label) {
 		position: relative;
@@ -72,7 +71,7 @@ export function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }

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

@@ -7,7 +7,6 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
@@ -15,12 +14,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {
@@ -28,8 +27,8 @@ export class ShareButton {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -41,13 +40,11 @@ export class ShareButton {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
-     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
-     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -150,9 +147,6 @@ export class ShareButton {
         "tags": [{
             "text": "Border radius",
             "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": "Configure border radius with pixel amount"
       },
@@ -179,38 +173,12 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "backgroundcolor",
       "reflect": false
     },
-    "border": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border",
-            "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "border",
-      "reflect": false
-    },
     "textcolor": {
       "type": "string",
       "mutable": false,
@@ -231,9 +199,6 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -254,9 +219,6 @@ export class ShareButton {
         "tags": [{
             "text": "Display pill",
             "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -287,8 +249,8 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
-        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text\" | \"warning\"",
+        "original": "| \"primary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
+        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
         "references": {}
       },
       "required": false,
@@ -301,10 +263,10 @@ export class ShareButton {
             "text": "Button style",
             "name": "uiName"
           }, {
-            "text": "[\"primary\", \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
+            "text": "[\"primary\" , \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Secondary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
+            "text": "[\"Primary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
             "name": "uiEnumNames"
           }],
         "text": ""
@@ -336,9 +298,6 @@ export class ShareButton {
           }, {
             "text": "[\"Small\", \"Medium\", \"Large\"]",
             "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -409,9 +368,6 @@ export class ShareButton {
         "tags": [{
             "text": "Hide icon",
             "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -436,9 +392,6 @@ export class ShareButton {
         "tags": [{
             "text": "Hide text",
             "name": "uiName"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -536,7 +489,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\"; border?: string; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"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; }",
+        "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; }",
         "references": {
           "DemoData": {
             "location": "import",