@saasquatch/mint-components 1.15.0-2 → 1.15.0-20

package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js

@@ -9,10 +9,10 @@ const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 const JSS = require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-0aa82125.js');
+require('./sqm-text-span-view-56e48a78.js');
 const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
+const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-1b2440c3.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
 require('./AsYouType-6788393a.js');
 const usePortalRegistrationForm = require('./usePortalRegistrationForm-f25d89e7.js');
 

package/dist/cjs/{sqm-portal-login-view-761a4d8e.js → sqm-portal-login-view-84e99287.js}

@@ -3,7 +3,7 @@
 const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

package/dist/cjs/{sqm-portal-profile-view-33164798.js → sqm-portal-profile-view-96e936cf.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const index = require('./index-a29c60ef.js');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-f06aabc0.js');
 const JSS = require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 function PortalProfileView(props) {
   var _a, _b, _c, _d, _e;

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-e31dc4f5.js');
+require('./global-f06aabc0.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-0aa82125.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
+require('./sqm-text-span-view-56e48a78.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-96e936cf.js');
 const utilities = require('./utilities-78f5e169.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/{sqm-portal-registration-form-view-637a4bf4.js → sqm-portal-registration-form-view-4377d849.js}

@@ -3,7 +3,7 @@
 const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

package/dist/cjs/sqm-portal-registration-form.cjs.entry.js

@@ -9,9 +9,9 @@ require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-0aa82125.js');
+require('./sqm-text-span-view-56e48a78.js');
 require('./useRegistrationFormState-7b820f0c.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-4377d849.js');
 require('./AsYouType-6788393a.js');
 const usePortalRegistrationForm = require('./usePortalRegistrationForm-f25d89e7.js');
 

package/dist/cjs/{sqm-portal-reset-password-view-fe602822.js → sqm-portal-reset-password-view-52fc50fe.js}

@@ -3,7 +3,7 @@
 const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

package/dist/cjs/sqm-portal-reset-password.cjs.entry.js

@@ -10,8 +10,8 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-0aa82125.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
+require('./sqm-text-span-view-56e48a78.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-52fc50fe.js');
 
 function usePortalResetPassword(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/dist/cjs/{sqm-portal-verify-email-view-7b678f34.js → sqm-portal-verify-email-view-4f837226.js}

@@ -3,7 +3,7 @@
 const index = require('./index-a29c60ef.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-f7e0377a.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const style = {
   Wrapper: mixins.AuthWrapper,

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

@@ -9,8 +9,8 @@ const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-f7e0377a.js');
-require('./sqm-text-span-view-0aa82125.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
+require('./sqm-text-span-view-56e48a78.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4f837226.js');
 
 let globalPromise = null;
 function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {

package/dist/cjs/{sqm-qr-code-view-15dfc0b6.js → sqm-qr-code-view-3da9ed28.js}

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

package/dist/cjs/sqm-qr-code.cjs.entry.js

@@ -10,7 +10,7 @@ const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-82e8797b.js');
 require('./ErrorView-b2fcf954.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {

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

@@ -4,19 +4,19 @@ 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-e31dc4f5.js');
+const global = require('./global-f06aabc0.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');
 require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+const GenericTableView = require('./GenericTableView-f0e9c531.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
 const mockRewardData = require('./mockRewardData-272e22d6.js');
 const useReferralTable = require('./useReferralTable-7c3f9600.js');
-const sqmTextSpanView = require('./sqm-text-span-view-0aa82125.js');
+const sqmTextSpanView = require('./sqm-text-span-view-56e48a78.js');
 
 const mockReferralData = (count = 4) => {
   const data = [...Array(count)].map(() => getMockData());
@@ -448,9 +448,7 @@ const ReferralTableRewardsCell = class {
         "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/cjs/sqm-rewards-table-customer-note-cell.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 RewardTableCustomerNoteCell = class {
   constructor(hostRef) {

package/dist/cjs/sqm-rewards-table_9.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');
-const global = require('./global-e31dc4f5.js');
+const global = require('./global-f06aabc0.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');
 require('./mixins-f7e0377a.js');
-const GenericTableView = require('./GenericTableView-a9f4ba75.js');
+const GenericTableView = require('./GenericTableView-f0e9c531.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 const luxon = require('./luxon-2926d85f.js');
@@ -607,11 +607,11 @@ const RewardTableRewardsCell = class {
           },
           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 = JSS.createStyleSheet(style);

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

@@ -4,40 +4,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-require('./global-e31dc4f5.js');
+require('./global-f06aabc0.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 GenericTableView = require('./GenericTableView-a9f4ba75.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');
-require('./sqm-text-span-view-0aa82125.js');
+require('./sqm-text-span-view-56e48a78.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-21ddf04f.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-ea3fa23b.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-55b378dc.js');
 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-7ebb426a.js');
-const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
-const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-38a5227a.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-5dfd2b52.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-969cf926.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-96e936cf.js');
 require('./utilities-78f5e169.js');
-const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
-const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.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-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-787391f7.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-3da9ed28.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f641a7de.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
-const sqmInvoiceTableView = require('./sqm-invoice-table-view-16ac73d0.js');
+const sqmInvoiceTableView = require('./sqm-invoice-table-view-431faed1.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1500,13 +1500,15 @@ const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
-const WithCustomColors = () => {
+const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1579,7 +1581,7 @@ const ShareButton = /*#__PURE__*/Object.freeze({
   WithoutIcon: WithoutIcon,
   WithoutText: WithoutText,
   TextStyleWithoutIcon: TextStyleWithoutIcon,
-  WithCustomColors: WithCustomColors,
+  WithCustomColorsAndBranding: WithCustomColorsAndBranding,
   WithCustomBorderRadius: WithCustomBorderRadius,
   LinkLocationTest: LinkLocationTest,
   FullStackIcon: FullStackIcon,
@@ -1726,6 +1728,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 +1755,7 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   TextAlignRight: TextAlignRight,
   CopyButton: CopyButton,
   CopyButtonBelow: CopyButtonBelow,
+  CustomStyles: CustomStyles,
   FullStack: FullStack
 });
 
@@ -1819,6 +1834,10 @@ const InvalidStatValue = () => {
   };
   return index.h(ShadowViewAddon.BigStatView, Object.assign({}, props), "Big stat");
 };
+const CustomStyles$1 = () => {
+  return (index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+    index.h("p", null, "Giftcards Earned")));
+};
 const MultipleStats = () => {
   return (index.h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -1831,6 +1850,15 @@ const MultipleStats = () => {
       index.h("sqm-text", null,
         index.h("p", null, "Points Balance")))));
 };
+const MultipleStatsWithCustomBranding = () => {
+  return (index.h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Giftcards Earned")),
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Referrals")),
+    index.h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      index.h("p", null, "Points balance"))));
+};
 
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1843,7 +1871,9 @@ const BigStat = /*#__PURE__*/Object.freeze({
   FlexReverseLeft: FlexReverseLeft,
   NoStatValue: NoStatValue,
   InvalidStatValue: InvalidStatValue,
-  MultipleStats: MultipleStats
+  CustomStyles: CustomStyles$1,
+  MultipleStats: MultipleStats,
+  MultipleStatsWithCustomBranding: MultipleStatsWithCustomBranding
 });
 
 const scenario$4 = "@owner:noah @author:noah\nFeature: Leaderboard\n\tThe leaderboard supports three main cases\n\t- Top Started Referrers\n\t- Top Converted Referrers\n\t- Top Point Earners\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\n\n  Background: A user exists\n    Given a user\n    And they are viewing the leaderboard\n\n  @motivating\n  Scenario Outline: Two types of referrals leaderboards can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with <value>\n    And there are started referrals on the tenant\n    And there are started converted on the tenant\n    When the user views the leaderboard\n    Then they see the referral <referralType> leaderboard\n\n    Examples:\n      | value                 | referralType |\n      | topStartedReferrers   | started      |\n      | topConvertedReferrers | converted    |\n\n  @motivating\n  Scenario: The top point earners leaderboard can be displayed\n    Given a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\n    And there are users with points\n    When the user views the leaderboard\n    Then they see the top point earners leaderboard\n    And text values are displayed for point counts\n\n  @minutia\n  Scenario Outline: Reward pretty value is used on the top point earners leaderboard\n    Given top point earners leaderboard\n    And the \"POINT\" reward unit has a pretty value for the following locales\n      | locale |\n      | en     |\n      | fr     |\n      | tr     |\n    When the user views the leaderboard\n    And they have <locale>\n    Then they see the translated pretty value in the stat value column\n\n  @motivating\n  Scenario Outline: Program Context is used by default to filter leaderboard results\n    Given a <leaderboardType> leaderboard loaded with program context for \"my-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Program Id context can be overwritten with a prop\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\n    When the user views the leaderboard\n    Then they only see <results> from \"my-test-program\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Global leaderboards can be displayed by clearing program context\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\n\t\t#This can also be done with a program section in a similar manner\n    Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\n    When the user views the leaderboard\n    Then they see global <results>\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario: Leaderboard results are shown in descending order\n    Given there are leaderboard results\n    When the user views the leaderboard\n    Then they see up to the 10 top leaderboard results\n    And leaderboard is in descending order\n\n  @motivating\n  Scenario Outline: Leaderboard results can be filtered with a time interval\n    Given a <leaderboardType> leaderboard\n    And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n    When the user views the leaderboard\n    Then they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\n\n    Examples:\n      | leaderboardType       | results             |\n      | topStartedReferrers   | started referrals   |\n      | topConvertedReferrers | converted referrals |\n      | topPointEarners       | points earned       |\n\n  @motivating\n  Scenario Outline: Leaderboard rank type can be configured\n    Given a leaderboard has prop \"rank-type\" with <value>\n    When the user views the leaderboard\n    Then their leaderboard rank is their <rank>\n\n    Examples:\n      | value     | rank       |\n      | rowNumber | row number |\n      | denseRank | dense rank |\n      | rank      | rank       |\n\n  @minutia\n  Scenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\n    Given a leaderboard has prop \"max-rows\" with <value>\n    And the leaderboard has <resultCount>\n    When the user views the leaderboard\n    Then they see <number> rows\n\n    Examples:\n      | value | resultCount | number |\n      |       |          10 |     10 |\n      |     5 |          10 |      5 |\n      |     3 |           1 |      1 |\n      |    25 |          15 |     15 |\n\n  @minutiae @ui\n  Scenario: Leaderboards with no results show an empty state\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then an empty state is dislayed\n    And they see an image of a leaderboard\n    And below they see \"View your rank in the leaderboard\"\n    And below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\n    And the text is center aligned\n\n  @minutiae @ui\n  Scenario: A custom empty state can be provided\n    Given a leaderboard has no results\n    When the user views the leaderboard\n    Then the contents of the \"empty\" slot are displayed\n\n  @minutiae @ui\n  Scenario: User is on Essentials plan\n    Given the user has an Essentials plan\n    When they view the leaderboard\n    Then a message telling them to upgrade their plan appears:\n      \"\"\"\n      Contact Support to upgrade your plan and start leveraging\n                gamification in your program.\n      \"\"\"\n    And an empty table image is displayed\n\n  @minutiae @ui\n  Scenario: Leaderboard headings can be customized\n    Given a leaderboard\n    And it has the following props\n      | prop         | value          |\n      | rankheading  | Place          |\n      | usersheading | Customer       |\n      | statsheading | Referral Count |\n      | show-rank    | true           |\n    When the user views the leaderboard\n    Then they see the following columns with headings\n      | column | heading        |\n      | rank   | Place          |\n      | user   | Customer       |\n      | stat   | Referral Count |\n\n  @motivating @ui\n  Scenario Outline: Leaderboard rank can be hidden or shown\n    Given a leaderboard\n    And it has prop \"show-rank\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the rank column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | see       |\n      | false     | don't see |\n      |           | don't see |\n\n    Scenario Outline: Users names can be hidden or shown\n    Given a leaderboard\n    And it has prop \"hide-names\" with <propValue>\n    When the user views the leaderboard\n    Then they <maySee> the referrer column\n\n    Examples:\n      | propValue | maySee    |\n      | true      | don't see |\n      | false     | see       |\n      |           | see       |\n\n  @motivating @ui\n  Scenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\n    Given a user in the top 10 of the leaderboard results\n    When they view the leaderboard\n    Then they see the row with their name highlighted with brand colour\n\n  @motivating @ui\n  Scenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\n    Given a user <mayHave> completed actions counted by the leaderboard\n    And they are not in the top 10 leaderboard results\n    And the leaderboard has prop \"show-user\" with <value>\n    When they view the leaderboard\n    Then they <maySee> \"...\" under the top 10 leaderboard results\n    And under \"...\" they <maySee> a row highlighted with brand colour\n    And they <maySee> their name\n    And they <maySee> their leaderboard value\n    And they <maySeeRank>\n\n    Examples:\n      | mayHave | value | maySee    | maySeeRank           |\n      | has     | true  | see       | see their rank       |\n      | hasn't  | true  | see       | don't see their rank |\n      | N/A     | false | don't see | don't see their rank |\n      | hasn't  |       | see       | don't see their rank |\n\n  @minutiae\n  Scenario: Users without names are displayed as an \"Anonymous User\"\n    Given a user\n    And they do not have a first name\n    And they do not have a last initial\n    When they view the leaderboard\n    Then they see the user displayed as \"Anonymous User\"\n\n  @minutiae\n  Scenario Outline: If a user only has a first or last name, then only that is displayed\n    Given a user\n    And they only have a <name>\n    When they view the leaderboard\n    Then they only see their <name>\n\n    Examples:\n      | name      |\n      | firstName |\n      | lastName  |\n";
@@ -2214,6 +2244,43 @@ const ReferralLeaderboard = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
+const ReferralLeaderboardWithCustomStyles = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles$1,
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+        textColor: "white",
+        borderColor: "white",
+        background: "slateblue",
+        borderRadius: 18,
+        viewingUserHighlightColor: "yellow",
+        viewingUserHighlightTextColor: "slateblue",
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        textValue: "82",
+        rank: 1,
+        rowNumber: 1,
+      },
+    },
+    elements: {
+      ...defaultElements$1,
+    },
+  };
+  return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
+};
 const ReferralLeaderboardWithMaxWidth = () => {
   const props = {
     states: {
@@ -2474,6 +2541,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   One: One,
   Five: Five,
   ReferralLeaderboard: ReferralLeaderboard,
+  ReferralLeaderboardWithCustomStyles: ReferralLeaderboardWithCustomStyles,
   ReferralLeaderboardWithMaxWidth: ReferralLeaderboardWithMaxWidth,
   PointsLeaderboard: PointsLeaderboard,
   TenWithRank: TenWithRank,
@@ -3475,7 +3543,7 @@ const FullStackSuccess = () => {
     index.h("div", { class: "AlertContent" },
       index.h("div", { part: "successalert-text" }, "Title"),
       index.h("div", { part: "successalert-subtext" }, "Body text."),
-      index.h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+      index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
           console.log("click");
         } }, "Primary Action"),
       index.h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
@@ -13043,7 +13111,7 @@ const Timeline_stories = {
 const TimelineWith1Reward = () => {
   return (index.h("div", null,
     index.h("sqm-timeline", null,
-      index.h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
+      index.h("sqm-timeline-entry", { textColor: "red", lineColor: "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
     index.h("br", null),
     " ",
     index.h("hr", null),
@@ -13100,6 +13168,13 @@ const TimelineWith4Rewards = () => {
       index.h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
       index.h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
 };
+const TimelineWithCustomColors = () => {
+  return (index.h("sqm-timeline", null,
+    index.h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+    index.h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+    index.h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
+    index.h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })));
+};
 
 const Timeline = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -13107,7 +13182,8 @@ const Timeline = /*#__PURE__*/Object.freeze({
   TimelineWith1Reward: TimelineWith1Reward,
   TimelineWith2Rewards: TimelineWith2Rewards,
   TimelineWith3Rewards: TimelineWith3Rewards,
-  TimelineWith4Rewards: TimelineWith4Rewards
+  TimelineWith4Rewards: TimelineWith4Rewards,
+  TimelineWithCustomColors: TimelineWithCustomColors
 });
 
 const scenario$x = "@author:kutay\n@owner:kutay\nFeature: Image\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the image component\n\n\t@motivating\n\t@ui\n\tScenario: Image is displayed from URL\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tThen the image is displayed\n\t\tAnd it is centered\n\n\t@motivating\n\t@ui\n\tScenario Outline: Images can be aligned left, center or right\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"align\" has <value>\n\t\tThen the image is displayed\n\t\tAnd it is aligned to the <value>\n\t\tExamples:\n\t\t\t| value  |\n\t\t\t| left   |\n\t\t\t| center |\n\t\t\t| right  |\n\n\t@motivating\n\t@ui\n\tScenario: Image background can be assigned a color\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"background-color\" is provided a color\n\t\tThen the image is displayed\n\t\tAnd the background is the provided color\n\n\t@motivating\n\t@ui\n\tScenario: Image minimum height can be constrained\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided\n\t\tAnd prop \"min-height\" is given a minimum value\n\t\tThen the image is displayed\n\t\tAnd the container size changes\n\t\tThen the image does not shrink below its minimum height";
@@ -13564,6 +13640,13 @@ const SimpleTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
       </sqm-tabs>
     ` }));
+const CustomColor$1 = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
+     <sqm-tabs text-color="red">
+        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Custom">This is the custom tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
+      </sqm-tabs>
+    ` }));
 const ManyTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
@@ -14045,6 +14128,7 @@ const Tabs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Tabs_stories,
   SimpleTabs: SimpleTabs,
+  CustomColor: CustomColor$1,
   ManyTabs: ManyTabs,
   SingleTab: SingleTab,
   ReferralProgram: ReferralProgram,
@@ -14131,6 +14215,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" }));
 };
@@ -14182,6 +14269,7 @@ const ReferralCode$1 = /*#__PURE__*/Object.freeze({
   'default': ReferralCode_stories,
   ReferralCode: ReferralCode,
   ShowNotificationText: ShowNotificationText,
+  ShowNotificationTextRed: ShowNotificationTextRed,
   ShowNotificationTextWithButton: ShowNotificationTextWithButton,
   ShowNotificationTextWithButtonBelow: ShowNotificationTextWithButtonBelow,
   CustomTooltipText: CustomTooltipText$1,
@@ -14463,7 +14551,7 @@ const InAContainer = () => {
   return (index.h("div", { style: containerStyles },
     index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
 };
-const CustomColor$1 = () => {
+const CustomColor$2 = () => {
   return (index.h("div", { style: containerStyles },
     index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
 };
@@ -14473,7 +14561,7 @@ const CloseButton = /*#__PURE__*/Object.freeze({
   'default': CloseButton_stories,
   Default: Default$l,
   InAContainer: InAContainer,
-  CustomColor: CustomColor$1
+  CustomColor: CustomColor$2
 });
 
 // ! IMPORTANT: These objects cannot be used as default values for component props
@@ -15587,6 +15675,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"),
@@ -15613,6 +15707,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   'default': ReferralCodes_stories,
   ReferralCodes: ReferralCodes,
   WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
+  WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$3,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
   Loading: Loading$b
@@ -15818,6 +15913,25 @@ const QRCode = /*#__PURE__*/Object.freeze({
   DownloadError: DownloadError
 });
 
+const Text_stories = {
+  title: "Components/Text",
+};
+const PurpleText = () => {
+  return (index.h("sqm-text", { textColor: "slateblue" },
+    index.h("p", null, "This is the text component")));
+};
+const CustomFontSize = () => {
+  return (index.h("sqm-text", { fontSize: 36 },
+    index.h("p", null, "This is the text component")));
+};
+
+const Text = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Text_stories,
+  PurpleText: PurpleText,
+  CustomFontSize: CustomFontSize
+});
+
 /**
  *
  * Themes
@@ -18555,6 +18669,7 @@ const stories = [
   PayoutButtonScroll,
   PayoutStatusAlert,
   QRCode,
+  Text,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {