@saasquatch/mint-components 1.11.0 → 1.11.1-1

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

@@ -1,32 +1,33 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { a as commonjsGlobal, u as useMemo, k as useState, f as useEffect, c as createCommonjsModule, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
-import './global-04c7d3b5.js';
-import { $ as $n, S as Sn, b as setUserIdentity, d as dist, X as Xe, o as setProgramId } from './index.module-def4aec5.js';
+import './global-b89b6edc.js';
+import { e as $n, S as Sn, b as setUserIdentity, d as dist, X as Xe, o as setProgramId } from './index.module-f122af7b.js';
+import './utils-334c1e34.js';
+import { c as createStyleSheet } from './JSS-67b5cff8.js';
+import { C as CopyTextView } from './copy-text-view-bf55abeb.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { G as GenericTableView } from './GenericTableView-d59d8ab4.js';
-import './useChildElements-32e1bda1.js';
+import { G as GenericTableView } from './GenericTableView-bf154727.js';
+import './useChildElements-37daf533.js';
 import { l as luxon } from './luxon-7600be8d.js';
-import './utils-334c1e34.js';
 import './sqm-text-span-view-8d140661.js';
 import { A as AssetCardView } from './sqm-asset-card-view-9d93fbdd.js';
-import { C as CloseButtonView } from './sqm-close-button-view-dc65b4e3.js';
+import { C as CloseButtonView } from './sqm-close-button-view-b24c708b.js';
 import './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-a89a88bf.js';
+import { E as EmailRegistrationView } from './email-registration-view-12793040.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-2c6122cd.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0312e073.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-60ef06cc.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-4307c992.js';
-import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-c2ed8fed.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-ffe955c8.js';
-import './utilities-3f5bba22.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-79a85e02.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d7ea2c56.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-e012b2aa.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-14114804.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-ced567c9.js';
+import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-95cd454f.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-d72dd5ac.js';
+import './utilities-18d10876.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f1454d43.js';
+import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-3739f523.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as autoColorScaleCss, Q as ShadowViewAddon } from './ShadowViewAddon-5bb2b69a.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
-import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-6e13a323.js';
+import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-09cc28d6.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1624,6 +1625,19 @@ const EmptyState = /*#__PURE__*/Object.freeze({
   SlottedIntoComponent: SlottedIntoComponent
 });
 
+const Pagination_stories = {
+  title: "Components/Link Button",
+};
+const Default = () => {
+  return h("sqm-pagination", null);
+};
+
+const Pagination = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Pagination_stories,
+  Default: Default
+});
+
 const scenario$2 = "@author:johan\n@owner:johan\nFeature: Share Link\n\n  The share link component is a box that allows users to see and copy their share link for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users sharelink can be copied to their clipboard\n    Given tooltipText is \"hello tooltip\"\n    When the component renders\n    Then there is a textbox with the user's share link\n    When the clipboard icon is clicked\n    Then the link is copied to clipboard\n    And a tooltip appears for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share link is \"https://www.example.com/sharelink/abc\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share link is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share link is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their sharelink\n    Given a user viewing the share link component\n    And the component is rendered for \"program-a\"\n    When they click to copy their link\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share link text\n    Given a user is editing the share link component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the share link component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
 
 const ShareLink_stories = {
@@ -1632,7 +1646,7 @@ const ShareLink_stories = {
     scenario: scenario$2,
   },
 };
-const Default = () => {
+const Default$1 = () => {
   const props = {
     copyString: "https://noah.example.com",
     open: false,
@@ -1696,7 +1710,7 @@ const FullStack = () => {
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ShareLink_stories,
-  Default: Default,
+  Default: Default$1,
   Tooltip: Tooltip,
   Disabled: Disabled,
   Error: Error$1,
@@ -1715,7 +1729,7 @@ const BigStat_stories = {
     scenario: scenario$3,
   },
 };
-const Default$1 = () => {
+const Default$2 = () => {
   const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -1798,7 +1812,7 @@ const MultipleStats = () => {
 const BigStat = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': BigStat_stories,
-  Default: Default$1,
+  Default: Default$2,
   LeftAlign: LeftAlign,
   RightAlign: RightAlign,
   FlexReverse: FlexReverse,
@@ -7272,14 +7286,14 @@ const loadingProps = {
   },
   content: { pageLabel: "Sign in to your account" },
 };
-const Default$2 = () => h(PortalLoginView, Object.assign({}, defaultProps$2));
+const Default$3 = () => h(PortalLoginView, Object.assign({}, defaultProps$2));
 const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
 const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));
 
 const PortalLogin = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalLogin_stories,
-  Default: Default$2,
+  Default: Default$3,
   LoginWithError: LoginWithError,
   LoginLoading: LoginLoading
 });
@@ -7382,7 +7396,7 @@ const slottedProps = {
       h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$3 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
+const Default$4 = () => h(PortalRegisterView, Object.assign({}, defaultProps$3));
 const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps$1));
 const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps$1));
 const FieldsHidden = () => {
@@ -7409,7 +7423,7 @@ const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaul
 const PortalRegister = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalRegister_stories,
-  Default: Default$3,
+  Default: Default$4,
   RegisterWithError: RegisterWithError,
   RegisterLoading: RegisterLoading,
   FieldsHidden: FieldsHidden,
@@ -7485,7 +7499,7 @@ const successProps = {
     messageSlot: "Enter your email below to receive a password reset link.",
   },
 };
-const Default$4 = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps$4));
+const Default$5 = () => h(PortalForgotPasswordView, Object.assign({}, defaultProps$4));
 const ForgotPasswordWithError = () => (h(PortalForgotPasswordView, Object.assign({}, errorProps$2)));
 const ForgotPasswordLoading = () => (h(PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
 const ForgotPasswordSuccess = () => (h(PortalForgotPasswordView, Object.assign({}, successProps)));
@@ -7493,7 +7507,7 @@ const ForgotPasswordSuccess = () => (h(PortalForgotPasswordView, Object.assign({
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalForgotPassword_stories,
-  Default: Default$4,
+  Default: Default$5,
   ForgotPasswordWithError: ForgotPasswordWithError,
   ForgotPasswordLoading: ForgotPasswordLoading,
   ForgotPasswordSuccess: ForgotPasswordSuccess
@@ -7564,7 +7578,7 @@ const loadingVerificationProps = {
   callbacks: defaultCallbacks,
   content: defaultContent,
 };
-const Default$5 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$5));
+const Default$6 = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps$5));
 const EmailVerificationWithError = () => (h(PortalEmailVerificationView, Object.assign({}, errorProps$3)));
 const EmailVerificationLoading = () => (h(PortalEmailVerificationView, Object.assign({}, loadingProps$3)));
 const EmailVerificationCheckingVerification = () => (h(PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
@@ -7573,7 +7587,7 @@ const EmailVerificationSuccess = () => (h(PortalEmailVerificationView, Object.as
 const PortalEmailVerification = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalEmailVerification_stories,
-  Default: Default$5,
+  Default: Default$6,
   EmailVerificationWithError: EmailVerificationWithError,
   EmailVerificationLoading: EmailVerificationLoading,
   EmailVerificationCheckingVerification: EmailVerificationCheckingVerification,
@@ -7726,7 +7740,7 @@ const validatingCodeProps = {
     failed: () => console.log("failed"),
   },
 };
-const Default$6 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$6));
+const Default$7 = () => h(PortalResetPasswordView, Object.assign({}, defaultProps$6));
 const DefaultWithoutConfirmField = () => (h(PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
 const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps$4)));
 const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps$4)));
@@ -7736,7 +7750,7 @@ const CodeValidating = () => (h(PortalResetPasswordView, Object.assign({}, valid
 const PortalResetPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalResetPassword_stories,
-  Default: Default$6,
+  Default: Default$7,
   DefaultWithoutConfirmField: DefaultWithoutConfirmField,
   ResetPasswordWithError: ResetPasswordWithError,
   ResetPasswordLoading: ResetPasswordLoading,
@@ -7799,7 +7813,7 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
 const AssetCard_stories = {
   title: "Components/Asset Card",
 };
-const Default$7 = () => {
+const Default$8 = () => {
   const props = {
     text: { titleText: "Marketing Banner" },
     imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
@@ -7827,7 +7841,7 @@ const CardWithNoImg = () => {
 const AssetCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': AssetCard_stories,
-  Default: Default$7,
+  Default: Default$8,
   CardWithLongText: CardWithLongText,
   CardWithNoImg: CardWithNoImg
 });
@@ -8048,7 +8062,7 @@ const successProps$3 = {
     submit: (e) => console.log("Submit", e),
   },
 };
-const Default$8 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$7));
+const Default$9 = () => h(PortalChangePasswordView, Object.assign({}, defaultProps$7));
 const Open = () => h(PortalChangePasswordView, Object.assign({}, openProps));
 const Error$2 = () => h(PortalChangePasswordView, Object.assign({}, errorProps$6));
 const PaswordError = () => (h(PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
@@ -8058,7 +8072,7 @@ const Success = () => h(PortalChangePasswordView, Object.assign({}, successProps
 const ChangePassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangePassword_stories,
-  Default: Default$8,
+  Default: Default$9,
   Open: Open,
   Error: Error$2,
   PaswordError: PaswordError,
@@ -8285,7 +8299,7 @@ const successProps$4 = {
     onChange: (e) => console.log(e),
   },
 };
-const Default$9 = () => h(PortalProfileView, Object.assign({}, defaultProps$8));
+const Default$a = () => h(PortalProfileView, Object.assign({}, defaultProps$8));
 const DefaultNoCountry = () => h(PortalProfileView, Object.assign({}, noCountry));
 const Loading$2 = () => h(PortalProfileView, Object.assign({}, loadingProps$6));
 const Disabled$1 = () => h(PortalProfileView, Object.assign({}, disabledProps));
@@ -8295,7 +8309,7 @@ const Success$1 = () => h(PortalProfileView, Object.assign({}, successProps$4));
 const PortalProfile = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PortalProfile_stories,
-  Default: Default$9,
+  Default: Default$a,
   DefaultNoCountry: DefaultNoCountry,
   Loading: Loading$2,
   Disabled: Disabled$1,
@@ -10255,7 +10269,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$a = () => {
+const Default$b = () => {
   return h(PoweredByImg$1, null);
 };
 const CustomColor = () => {
@@ -10268,7 +10282,7 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$a,
+  Default: Default$b,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
@@ -10655,7 +10669,7 @@ const defaultRegisterProps = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$b = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a))));
+const Default$c = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a))));
 const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
     ...defaultProps$a.states,
     checked: true,
@@ -10710,7 +10724,7 @@ const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegiste
 const CheckboxField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CheckboxField_stories,
-  Default: Default$b,
+  Default: Default$c,
   DefaultChecked: DefaultChecked,
   CustomLabel: CustomLabel,
   Error: Error$4,
@@ -10812,7 +10826,7 @@ const defaultProps$b = {
     ],
   },
 };
-const Default$c = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b))));
+const Default$d = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b))));
 const CustomLabel$1 = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps$b, { content: {
     ...defaultProps$b.content,
     dropdownLabel: "Pick your favorite",
@@ -10840,7 +10854,7 @@ const CustomError$1 = createHookStory(() => (h(DropdownFieldView, Object.assign(
 const DropdownField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': DropdownField_stories,
-  Default: Default$c,
+  Default: Default$d,
   CustomLabel: CustomLabel$1,
   Error: Error$5,
   CustomError: CustomError$1
@@ -10950,7 +10964,7 @@ const defaultRegisterProps$1 = {
     invalidEmailErrorMessage: "Must be a valid email address",
   },
 };
-const Default$d = () => h(InputFieldView, Object.assign({}, defaultProps$c));
+const Default$e = () => h(InputFieldView, Object.assign({}, defaultProps$c));
 const CustomLabel$2 = () => (h(InputFieldView, Object.assign({}, defaultProps$c, { content: { ...defaultProps$c.content, fieldLabel: "My Label" } })));
 const Error$6 = () => (h(InputFieldView, Object.assign({}, defaultProps$c, { states: {
     ...defaultProps$c.states,
@@ -11000,7 +11014,7 @@ const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign(
 const InputField = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': InputField_stories,
-  Default: Default$d,
+  Default: Default$e,
   CustomLabel: CustomLabel$2,
   Error: Error$6,
   CustomError: CustomError$2,
@@ -12623,6 +12637,21 @@ const sharebutton = (slot) => {
       h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
       h("sqm-share-button", { medium: "twitter" }, "Post about us on X"))));
 };
+const shareButtonsWithPromoCodes = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      h("sub", null, "Share with your friends:"),
+      h("sqm-share-code", null),
+      h("sqm-share-link", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Post about us on X"),
+      h("sqm-portal-container", { gap: "x-small" },
+        h("span", { style: { textAlign: "center", color: "var(--sl-color-gray-500)" } }, "You have copied this code before"),
+        h("sqm-pagination", null)))));
+};
 const timeline = (slot, count) => {
   return (h("sqm-timeline", { slot: slot, icon: "circle" },
     count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
@@ -12645,6 +12674,11 @@ const TimelineAndShareButtons = () => {
     timeline("left", 3),
     sharebutton("right")));
 };
+const OneTimeUsePromoCodes = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 4),
+    shareButtonsWithPromoCodes("right")));
+};
 const StartAlignment = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "start" },
     timeline("left", 4),
@@ -12721,6 +12755,7 @@ const ReferralCard = /*#__PURE__*/Object.freeze({
   ImageAndShareButtons: ImageAndShareButtons,
   LimitWidth: LimitWidth,
   TimelineAndShareButtons: TimelineAndShareButtons,
+  OneTimeUsePromoCodes: OneTimeUsePromoCodes,
   StartAlignment: StartAlignment,
   CenterAlignment: CenterAlignment,
   EndAlignment: EndAlignment,
@@ -13822,6 +13857,82 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
   Error: Error$7
 });
 
+const scenario$A = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n  The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n  Background: Environment\n    Given there is a valid program ID in the environment\n    And there is a valid user ID and account ID in the environment\n\n  @motivating\n  Scenario: A Users referral code can be copied to their clipboard\n    Given tooltiptext is \"hello tooltip\"\n    When the component renders\n    Then there is a textbox with the user's referral code\n    When the clipboard icon is clicked\n    Then the code is copied to clipboard\n    And a tooltip will appear for ~1 second\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip will appear for ~2 seconds\n\n  @minutia\n  Scenario: Demo\n    Given isDemo() returns true\n    Then the share code is \"SHARECODE001\"\n    And the component won't be interactive\n    And the tooltip is hidden\n\n  @minutia\n  Scenario: Program ID can be sourced from prop\n    Given the programId prop is set to \"program-a\"\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-a\"\n\n  @minutia\n  Scenario: Program ID can be sourced from window\n    Given the programId prop is unset\n    And window.widgetIdent.programId is set to \"program-b\"\n    When the component renders\n    Then the share code is for \"program-b\"\n\n  @minutia\n  Scenario: An analytic event is fired when a user copies their code\n    Given a user viewing the referral code component\n    And the component is rendered for \"program-a\"\n    When they click to copy their code\n    Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n    And it is for \"program-a\"\n    And it has share medium \"DIRECT\"\n\n\n  @ui\n  Scenario Outline: user can edit the alignment of the share code text\n    Given a user is editing the referral code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the referral code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n";
+
+const ReferralCode_stories = {
+  title: "Components/Referral Code",
+  parameters: {
+    scenario: scenario$A,
+  },
+};
+const ReferralCode = () => {
+  return (h("sqm-referral-code", { tooltiptext: "Copied to Clipboard" }));
+};
+const ShowNotificationText = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
+};
+const ShowNotificationTextWithButton = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
+};
+const ShowNotificationTextWithButtonBelow = () => {
+  return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-below" }));
+};
+const CustomTooltipText$1 = () => {
+  return (h("sqm-referral-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+const TextAlignCenter$2 = () => {
+  return h("sqm-referral-code", { textAlign: "center" });
+};
+const TextAlignRight$2 = () => {
+  return h("sqm-referral-code", { textAlign: "right" });
+};
+const CustomTooltipDuration$1 = () => {
+  return (h("sqm-referral-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
+};
+const CopyButton$2 = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    isCopyIcon: false,
+    buttonStyle: "button-outside",
+  })));
+};
+const CopyButtonBelow$2 = () => {
+  return (h(CopyTextView, Object.assign({}, {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    buttonStyle: "button-below",
+  })));
+};
+const Error$8 = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    disabled: true,
+    open: true,
+    tooltiptext: "Copied!",
+    error: true,
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};
+
+const ReferralCode$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralCode_stories,
+  ReferralCode: ReferralCode,
+  ShowNotificationText: ShowNotificationText,
+  ShowNotificationTextWithButton: ShowNotificationTextWithButton,
+  ShowNotificationTextWithButtonBelow: ShowNotificationTextWithButtonBelow,
+  CustomTooltipText: CustomTooltipText$1,
+  TextAlignCenter: TextAlignCenter$2,
+  TextAlignRight: TextAlignRight$2,
+  CustomTooltipDuration: CustomTooltipDuration$1,
+  CopyButton: CopyButton$2,
+  CopyButtonBelow: CopyButtonBelow$2,
+  Error: Error$8
+});
+
 // import scenario from "./ShareCode.feature";
 const EmailRegistration_stories = {
   title: "Components/Email Registration",
@@ -13848,7 +13959,7 @@ const defaultProps$d = {
     fraudErrorMessageTitle: "Looks like you tried referring yourself",
   },
 };
-const Default$e = () => h(EmailRegistrationView, Object.assign({}, defaultProps$d));
+const Default$f = () => h(EmailRegistrationView, Object.assign({}, defaultProps$d));
 const HasFirstNameLastName = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$d,
   content: {
@@ -13885,7 +13996,7 @@ const Loading$4 = () => (h(EmailRegistrationView, Object.assign({}, {
     loading: true,
   },
 })));
-const Error$8 = () => (h(EmailRegistrationView, Object.assign({}, {
+const Error$9 = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$d,
   states: {
     error: "Something went wrong. Please try again.",
@@ -13913,23 +14024,23 @@ const EmptyEmailError = () => (h(EmailRegistrationView, Object.assign({}, {
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
-  Default: Default$e,
+  Default: Default$f,
   HasFirstNameLastName: HasFirstNameLastName,
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
   Loading: Loading$4,
-  Error: Error$8,
+  Error: Error$9,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
 });
 
-const scenario$A = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n  The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n  @motivating\n  Scenario: Component only fetches codes from current program\n    Given a user has multiple rewards from various programs\n    When the component is loaded\n    Then it fetches the user's rewards from only the program associated with the widget\n\n  @motivating\n  Scenario: Component only looks at fueltank rewards\n    Given a user has multiple rewards of different types\n    When the component is loaded\n    Then it filters the user's reward to only return FUELTANK rewards\n\n\n  @motivating\n  Scenario: The first (i.e. most recently received) reward is the reward that is displayed\n    Given a user has at least one fueltank reward\n    And the fueltank reward is available\n    Then the coupon code component shows the first reward returned\n    And this reward is the most recently received reward by the user\n\n  @motivating\n  Scenario Outline: Coupon code has multiple states depending on reward status\n    Given a user has at least one fueltank reward\n    And the reward has most recent status <status>\n    And the dateScheduledFor field is <dateScheduledFor>\n    Then the component's status is set to <componentStatus>\n    And the <errorMessageTextProp> is displayed under the input field\n\n    Examples:\n      | status    | dateScheduledFor | componentStatus | errorMessageTextProp     |\n      | AVAILABLE | null             | AVAILABLE       | N/A                      |\n      | EXPIRED   | null             | EXPIRED         | expiredErrorMessage      |\n      | REDEEMED  | null             | REDEEMED        | redeemedMessage          |\n      | CANCELLED | null             | CANCELLED       | cancelledErrorMessage    |\n      | PENDING   | null             | EMPTY_TANK      | fullfillmentErrorMessage |\n      | PENDING   | 123412341234     | PENDING         | pendingErrorMessage      |\n      | null      | null             | ERROR           | genericErrorMessage      |\n\n  Scenario Outline: Coupon code's error message text props are grouped\n    Given an end user is viewing the coupon code component in the widget editor\n    And they are looking at the component's properties\n    Then they see <prop>\n    And <prop> is grouped under \"Coupon code error\"\n    Examples:\n      | prop                     |\n      | N/A                      |\n      | expiredErrorMessage      |\n      | redeemedMessage          |\n      | cancelledErrorMessage    |\n      | fullfillmentErrorMessage |\n      | pendingErrorMessage      |\n      | genericErrorMessage      |\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @ui\n  Scenario: Component shows an error state when there is an error\n    Given a user is viewing the coupon code component\n    When there is an error in the coupon code\n    Then in place of the coupon code is an alert banner\n    And the alert banner gives information about the error to the user\n\n  @ui\n  Scenario: Component shows an loading state\n    Given a user is viewing the coupon code component\n    When the coupon code is loading in\n    Then the text inside the input is \"Loading...\"\n    And the coupon code input box has a gray background\n    And the cursor is set to \"default\"\n    And the user cannot copy the text\n\n  @ui\n  Scenario Outline: User can edit the alignment of the coupon code text\n    Given a user is editing the coupon code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the coupon code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n\n  @minutia\n  Scenario: ICU string converts to a date\n    Given a user is viewing a live coupon code code component\n    And the \"pendingErrorText\" has the \"{unpendDate}\" ICU string\n    And the program is configured for rewards to be pending\n    Then the user will see an info alert banner\n    And the ICU string is converted to the unpend date\n";
+const scenario$B = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n  The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n  @motivating\n  Scenario: Component only fetches codes from current program\n    Given a user has multiple rewards from various programs\n    When the component is loaded\n    Then it fetches the user's rewards from only the program associated with the widget\n\n  @motivating\n  Scenario: Component only looks at fueltank rewards\n    Given a user has multiple rewards of different types\n    When the component is loaded\n    Then it filters the user's reward to only return FUELTANK rewards\n\n\n  @motivating\n  Scenario: The first (i.e. most recently received) reward is the reward that is displayed\n    Given a user has at least one fueltank reward\n    And the fueltank reward is available\n    Then the coupon code component shows the first reward returned\n    And this reward is the most recently received reward by the user\n\n  @motivating\n  Scenario Outline: Coupon code has multiple states depending on reward status\n    Given a user has at least one fueltank reward\n    And the reward has most recent status <status>\n    And the dateScheduledFor field is <dateScheduledFor>\n    Then the component's status is set to <componentStatus>\n    And the <errorMessageTextProp> is displayed under the input field\n\n    Examples:\n      | status    | dateScheduledFor | componentStatus | errorMessageTextProp     |\n      | AVAILABLE | null             | AVAILABLE       | N/A                      |\n      | EXPIRED   | null             | EXPIRED         | expiredErrorMessage      |\n      | REDEEMED  | null             | REDEEMED        | redeemedMessage          |\n      | CANCELLED | null             | CANCELLED       | cancelledErrorMessage    |\n      | PENDING   | null             | EMPTY_TANK      | fullfillmentErrorMessage |\n      | PENDING   | 123412341234     | PENDING         | pendingErrorMessage      |\n      | null      | null             | ERROR           | genericErrorMessage      |\n\n  Scenario Outline: Coupon code's error message text props are grouped\n    Given an end user is viewing the coupon code component in the widget editor\n    And they are looking at the component's properties\n    Then they see <prop>\n    And <prop> is grouped under \"Coupon code error\"\n    Examples:\n      | prop                     |\n      | N/A                      |\n      | expiredErrorMessage      |\n      | redeemedMessage          |\n      | cancelledErrorMessage    |\n      | fullfillmentErrorMessage |\n      | pendingErrorMessage      |\n      | genericErrorMessage      |\n\n  @minutia\n  Scenario: Tooltip lifespan defaults to 2000\n    Given the tooltip's lifespan is set to 2000\n    And there is tooltip text\n    When the component renders\n    And the clipboard icon is clicked\n    Then a tooltip appears for ~2 seconds\n\n  @ui\n  Scenario: Component shows an error state when there is an error\n    Given a user is viewing the coupon code component\n    When there is an error in the coupon code\n    Then in place of the coupon code is an alert banner\n    And the alert banner gives information about the error to the user\n\n  @ui\n  Scenario: Component shows an loading state\n    Given a user is viewing the coupon code component\n    When the coupon code is loading in\n    Then the text inside the input is \"Loading...\"\n    And the coupon code input box has a gray background\n    And the cursor is set to \"default\"\n    And the user cannot copy the text\n\n  @ui\n  Scenario Outline: User can edit the alignment of the coupon code text\n    Given a user is editing the coupon code component\n    Then they see \"Align text\" props\n    And the default value is \"left\"\n    When they change the option to <option>\n    Then they see the text in <position>\n    Examples:\n      | option | position |\n      | left   | left     |\n      | center | center   |\n      | right  | right    |\n\n  @ui\n  Scenario Outline: The position of the copy button can be changed\n    Given a user is editing the coupon code component\n    Then they see \"Style\" props\n    And the default value is \"icon\"\n    When they change the option to <option>\n    Then they see the copy button in <position>\n    Examples:\n      | option         | position                        |\n      | button outside | outside the input, on the right |\n      | button below   | outside the input, below        |\n      | icon           | inside the input as an icon     |\n\n  @minutia\n  Scenario: ICU string converts to a date\n    Given a user is viewing a live coupon code code component\n    And the \"pendingErrorText\" has the \"{unpendDate}\" ICU string\n    And the program is configured for rewards to be pending\n    Then the user will see an info alert banner\n    And the ICU string is converted to the unpend date\n";
 
 const CouponCode_stories = {
   title: "Components/Coupon Code",
   parameters: {
-    scenario: scenario$A,
+    scenario: scenario$B,
   },
 };
 const defaultProps$e = {
@@ -13944,25 +14055,25 @@ const defaultProps$e = {
 const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
 };
-const CustomTooltipText$1 = () => {
+const CustomTooltipText$2 = () => {
   return h("sqm-coupon-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
 };
-const CustomTooltipDuration$1 = () => {
+const CustomTooltipDuration$2 = () => {
   return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
 };
-const TextAlignCenter$2 = () => {
+const TextAlignCenter$3 = () => {
   return h("sqm-coupon-code", { textAlign: "center" });
 };
-const TextAlignRight$2 = () => {
+const TextAlignRight$3 = () => {
   return h("sqm-coupon-code", { textAlign: "right" });
 };
-const CopyButton$2 = () => {
+const CopyButton$3 = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside" })));
 };
 const CopyButtonCustomLabel = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
 };
-const CopyButtonBelow$2 = () => {
+const CopyButtonBelow$3 = () => {
   return (h("sqm-coupon-code", Object.assign({}, defaultProps$e, { buttonStyle: "button-below" })));
 };
 const CopyButtonBelowCustomLabel = () => {
@@ -14000,13 +14111,13 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CouponCode_stories,
   CouponCode: CouponCode,
-  CustomTooltipText: CustomTooltipText$1,
-  CustomTooltipDuration: CustomTooltipDuration$1,
-  TextAlignCenter: TextAlignCenter$2,
-  TextAlignRight: TextAlignRight$2,
-  CopyButton: CopyButton$2,
+  CustomTooltipText: CustomTooltipText$2,
+  CustomTooltipDuration: CustomTooltipDuration$2,
+  TextAlignCenter: TextAlignCenter$3,
+  TextAlignRight: TextAlignRight$3,
+  CopyButton: CopyButton$3,
   CopyButtonCustomLabel: CopyButtonCustomLabel,
-  CopyButtonBelow: CopyButtonBelow$2,
+  CopyButtonBelow: CopyButtonBelow$3,
   CopyButtonBelowCustomLabel: CopyButtonBelowCustomLabel,
   Loading: Loading$5,
   CopyButtonLoading: CopyButtonLoading,
@@ -14019,12 +14130,12 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   ErrorRedeemed: ErrorRedeemed
 });
 
-const scenario$B = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\n\n  Background:\n    Given a user viewing an instant access widget\n\n  @motivating\n  @ui\n  Scenario: A user on an instant access widget\n    Given the user is identified\n    And the user is logged in\n    Then the component identifies the user by displaying their email in an ICU string\n    And the users email displayed in the ICU string using hte \"{email}\" variable\n\n  @motivating\n  @ui\n  Scenario: Users can switch who they are identified as through a link\n    Given the user is identified\n    And the user is logged in\n    When the user clicks the link in the component\n    Then the saved user identity is emptied\n    And they are sent back to the registration form to re-identify themselves\n\n  @minutia\n  Scenario: Logout link empties the saved User Identity\n    Given a valid user identity\n    And the user is viewing the \"logged-in\" template\n    When they click the logout link\n    Then the user identity is set to \"undefined\"\n    And the user is returned to the \"logged-out\" template";
+const scenario$C = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\n\n  Background:\n    Given a user viewing an instant access widget\n\n  @motivating\n  @ui\n  Scenario: A user on an instant access widget\n    Given the user is identified\n    And the user is logged in\n    Then the component identifies the user by displaying their email in an ICU string\n    And the users email displayed in the ICU string using hte \"{email}\" variable\n\n  @motivating\n  @ui\n  Scenario: Users can switch who they are identified as through a link\n    Given the user is identified\n    And the user is logged in\n    When the user clicks the link in the component\n    Then the saved user identity is emptied\n    And they are sent back to the registration form to re-identify themselves\n\n  @minutia\n  Scenario: Logout link empties the saved User Identity\n    Given a valid user identity\n    And the user is viewing the \"logged-in\" template\n    When they click the logout link\n    Then the user identity is set to \"undefined\"\n    And the user is returned to the \"logged-out\" template";
 
 const LogoutCurrentUser_stories = {
   title: "Components/Logout Current User",
   parameters: {
-    scenario: scenario$B,
+    scenario: scenario$C,
   },
 };
 const defaultProps$f = {
@@ -14034,22 +14145,22 @@ const defaultProps$f = {
   loading: false,
   emailErrorText: "Error fetching email",
 };
-const Default$f = () => {
+const Default$g = () => {
   return h(LogoutCurrentUserView, Object.assign({}, defaultProps$f));
 };
 
 const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LogoutCurrentUser_stories,
-  Default: Default$f
+  Default: Default$g
 });
 
-const scenario$C = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
+const scenario$D = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value   | buttonType |\n\t\t\t| <null>  | primary    |\n\t\t\t| default | default    |\n\t\t\t| primary | primary    |\n\t\t\t| success | success    |\n\t\t\t| neutral | neutral    |\n\t\t\t| warning | warning    |\n\t\t\t| danger  | danger     |";
 
 const LinkButton_stories = {
   title: "Components/Link Button",
   parameters: {
-    scenario: scenario$C,
+    scenario: scenario$D,
   },
 };
 const defaultProps$g = {
@@ -14057,7 +14168,7 @@ const defaultProps$g = {
   openInNewTab: false,
   buttonText: "Button Text",
 };
-const Default$g = () => {
+const Default$h = () => {
   return h("sqm-link-button", Object.assign({}, defaultProps$g));
 };
 const OpenInNewTab = () => {
@@ -14067,7 +14178,7 @@ const OpenInNewTab = () => {
 const LinkButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': LinkButton_stories,
-  Default: Default$g,
+  Default: Default$h,
   OpenInNewTab: OpenInNewTab
 });
 
@@ -14085,7 +14196,7 @@ const containerStyles = {
   border: "1px solid black",
   padding: "25px",
 };
-const Default$h = () => {
+const Default$i = () => {
   return h(CloseButtonView, Object.assign({}, defaultProps$h));
 };
 const InAContainer = () => {
@@ -14100,7 +14211,7 @@ const CustomColor$1 = () => {
 const CloseButton = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': CloseButton_stories,
-  Default: Default$h,
+  Default: Default$i,
   InAContainer: InAContainer,
   CustomColor: CustomColor$1
 });
@@ -14338,7 +14449,7 @@ const Loading$6 = () => {
       },
     } }));
 };
-const Error$9 = () => {
+const Error$a = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
         error: true,
@@ -14379,7 +14490,7 @@ const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
   Loading: Loading$6,
-  Error: Error$9,
+  Error: Error$a,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -14989,6 +15100,49 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
   InvoiceTableDemoHook: InvoiceTableDemoHook
 });
 
+const scenario$E = "@author: sam\n@owner: sam\n\nFeature: Referral Codes Component\n\n    A paginated display of available and used promo codes for the user to share with others\n\n    @motivating\n    Scenario: Promo code can be shared using various share mediums\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        Then the promo code can be copied directly\n        And the promo code can be shared using <shareMedium>\n\n        Examples:\n            | shareMedium |\n            | DIRECT      |\n            | EMAIL       |\n            | FBMESSENGER |\n            | WHATSAPP    |\n\n    @minutia\n    Scenario: User is notified if the currently viewed promo code has been used already\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the code has not been used already\n        Then no notification text is displayed\n        When the code is changed to one that has been used\n        Then the notification text is displayed\n\n    @minutia\n    Scenario Outline: Share mediums can be optionally displayed\n        Given an authenticated user\n        And the program has promo codes configured\n        And <propName> is true\n        Then the <shareMedium> is hidden\n        Examples:\n            | propName        | shareMedium |\n            | hideSharelink   | DIRECT      |\n            | hideEmail       | EMAIL       |\n            | hideFbMessenger | FBMESSENGER |\n            | hideWhatsApp    | WHATSAPP    |\n\n    @minutia\n    Scenario Outline: Number of codes is displayed in the pagination component\n        Given an authenticated user\n        And the program has promo codes configured\n        When the promo code section is loaded\n        And the user has <numCodes> available\n        And the user is on <currentPage>\n        Then the pagination text is <paginationText>\n        Examples:\n            | numCodes | currentPage | paginationText |\n            | 5        | 1           | 1 of 5         |\n            | 5        | 2           | 2 of 5         |\n            | 5        | 3           | 3 of 5         |\n            | 5        | 4           | 4 of 5         |\n            | 5        | 5           | 5 of 5         |\n            | 1        | 1           | 1 of 1         |\n            | 0        | 0           | 0 of 0         |\n\n";
+
+const ReferralCodes_stories = {
+  title: "Components/Referral Codes",
+  parameters: {
+    scenario: scenario$E,
+  },
+};
+const pagination = (slot) => {
+  return h("sqm-pagination", { slot: slot });
+};
+const shareButtons = (slot) => {
+  return (h("sqm-portal-container", { gap: "small", slot: slot },
+    h("sqm-share-button", { medium: "email" }, "Share via email"),
+    h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+    h("sqm-share-button", { medium: "whatsapp" }, "Share on WhatsApp")));
+};
+const shareCodes = (slot) => {
+  return h("sqm-referral-code", { slot: slot });
+};
+const shareCodeWithPreviouslyCopied = (slot) => {
+  return (h("sqm-referral-code", { slot: slot, showNotificationText: true, notificationText: "You\u2019ve copied this before." }));
+};
+const ReferralCodes = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodes("shareCodes"),
+    shareButtons("shareButtons")));
+};
+const WithPreviouslyCopiedCode = () => {
+  return (h("sqm-referral-codes", null,
+    pagination("pagination"),
+    shareCodeWithPreviouslyCopied("shareCodes"),
+    shareButtons("shareButtons")));
+};
+
+const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ReferralCodes_stories,
+  ReferralCodes: ReferralCodes,
+  WithPreviouslyCopiedCode: WithPreviouslyCopiedCode
+});
+
 /**
  *
  * Themes
@@ -15001,7 +15155,7 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$i = `
+const Default$j = `
  // No CSS
 `;
 const Orangey = `
@@ -15035,7 +15189,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$i,
+  Default: Default$j,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -17634,6 +17788,7 @@ const stories = [
   InvoiceTableCells,
   UseInvoiceTableCells,
   ShareButton,
+  Pagination,
   ShareLink,
   BigStat,
   Leaderboard,
@@ -17702,6 +17857,8 @@ const stories = [
   Tabs,
   ShareCode$1,
   CouponCode$1,
+  ReferralCode$1,
+  ReferralCodes$1,
   LogoutCurrentUser,
   LinkButton,
   EmailRegistration,