@saasquatch/mint-components 1.6.8-2 → 1.6.8-4

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

@@ -1,13 +1,13 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
 import { a as commonjsGlobal, k as useMemo, i as useState, u as useEffect, c as createCommonjsModule, m as h$1 } from './stencil-hooks.module-b48b45ec.js';
-import './global-0f137e54.js';
+import './global-170c4499.js';
 import './use-callback-051c06c6.js';
-import { g as gn, c as mn, e as setUserIdentity, d as dist, z as ze, o as setProgramId } from './index.module-787e5d35.js';
+import { g as gn, c as mn, e as setUserIdentity, d as dist, z as ze, o as setProgramId } from './index.module-0ba0774e.js';
 import './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { G as GenericTableView } from './GenericTableView-266126f9.js';
-import './useChildElements-0124b1a9.js';
+import './useChildElements-fd458906.js';
 import { l as luxon } from './luxon-1e38d7f1.js';
 import './utils-334c1e34.js';
 import './sqm-text-span-view-2f7d6d14.js';
@@ -16,16 +16,16 @@ import { H as HeroView } from './sqm-hero-view-875c927d.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
 import { L as LinkButtonView } from './sqm-link-button-view-8d9ad936.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-feb719ce.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-ee402e54.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-5a4ac267.js';
 import { E as EmailRegistrationView } from './email-registration-view-0ed79e24.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-727bbfd9.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-889fcc01.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-9970dee2.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-1f2b6063.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-ac955752.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-1f0f3bf8.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-8d453021.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, 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, H as rewardExchange, J as CardFeedView, K as autoColorScaleCss, M as ShadowViewAddon } from './ShadowViewAddon-ca765d5e.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, 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, H as rewardExchange, J as CardFeedView, K as autoColorScaleCss, M as ShadowViewAddon } from './ShadowViewAddon-751a6b84.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-83b417f0.js';
-import { U as UserIdentifierView } from './sqm-user-identifier-view-379c773f.js';
+import { U as UserIdentifierView } from './sqm-user-identifier-view-dbf71a5e.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1670,7 +1670,7 @@ const CopyButtonInside = () => {
     copyString: "https://noah.example.com",
     open: false,
     tooltiptext: "Copied!",
-    buttonOutside: false,
+    buttonPosition: "inside",
     isCopyIcon: false,
   })));
 };
@@ -3869,13 +3869,13 @@ const monoWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\
 
 const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"small\"\n    gap=\"xxxx-large\"\n    display=\"grid\"\n    max-width=\"100%\"\n  >\n    <sqm-portal-container\n      direction=\"column\"\n      padding=\"none\"\n      gap=\"xxx-large\"\n      display=\"grid\"\n      max-width=\"100%\"\n    >\n      <sqm-hero-image\n        image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n        header=\"MyCompany Rewards\"\n        description=\"Complete tasks to earn rewards\"\n        layout=\"overlay\"\n        padding-image=\"xxxx-large\"\n        padding-text=\"xxx-large\"\n        image-pos=\"center\"\n        overlay-color=\"#5e5669\"\n        overlay-opacity=\"0.9\"\n      >\n      </sqm-hero-image>\n      <sqm-portal-container\n        direction=\"column\"\n        padding=\"none\"\n        gap=\"xxx-large\"\n        max-width=\"770px\"\n        center\n        display=\"grid\"\n      >\n        <sqm-program-explainer header=\"How it works\">\n          <sqm-program-explainer-step\n            description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n            header=\"Earn points for using our product\"\n            icon=\"cash-stack\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n          <sqm-program-explainer-step\n            description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n            header=\"Redeem rewards with your points\"\n            icon=\"people\"\n            text-color=\"#000000\"\n          >\n          </sqm-program-explainer-step>\n        </sqm-program-explainer>\n        <sqm-portal-container\n          center\n          direction=\"row\"\n          display=\"flex\"\n          justify-content=\"space-between\"\n          gap=\"xxx-large\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n            >\n              <p>Points Redeemed</p>\n            </sqm-big-stat>\n            <sqm-big-stat\n              flex-reverse=\"true\"\n              alignment=\"left\"\n              stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n            >\n              <p>Points Balance</p>\n            </sqm-big-stat>\n          </sqm-stat-container>\n        </sqm-portal-container>\n        <sqm-portal-container\n          direction=\"column\"\n          padding=\"none\"\n          gap=\"xx-large\"\n          display=\"grid\"\n          max-width=\"100%\"\n        >\n          <sqm-titled-section\n            label-margin=\"small\"\n            padding=\"none\"\n            text-align=\"center\"\n          >\n            <h3 slot=\"label\">Earn points</h3>\n          </sqm-titled-section>\n          <sqm-card-feed gap=\"24\" width=\"347\">\n            <sqm-task-card\n              reward-amount=\"20\"\n              goal=\"1\"\n              card-title=\"Complete a Survey\"\n              description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n              button-text=\"Take survey\"\n              reward-unit=\"Points\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"250\"\n              goal=\"500\"\n              show-progress-bar\n              card-title=\"Spend $500\"\n              description=\"Earn 250 points when you spend $500 or more.\"\n              button-text=\"See plans\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              progress-bar-unit=\"$\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              goal=\"1\"\n              reward-amount=\"50\"\n              card-title=\"Follow Us on Twitter\"\n              description=\"Earn 50 points when you follow us on Twitter!\"\n              button-text=\"Follow\"\n              button-link=\"https://twitter.com/\"\n              open-new-tab=\"true\"\n              event-key=\"socialFollow\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              finite=\"0\"\n              reward-unit=\"Points\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n            <sqm-task-card\n              reward-amount=\"1\"\n              reward-unit=\"Free Month\"\n              goal=\"1\"\n              card-title=\"Upgrade Your Plan\"\n              description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n              button-text=\"Upgrade\"\n              completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n              ended-message=\"Ended {endDate}\"\n              expiry-message=\"Ends {endDate}\"\n              open-new-tab=\"false\"\n              finite=\"0\"\n              starts-on-message=\"Starts {startDate}\"\n            >\n            </sqm-task-card>\n          </sqm-card-feed>\n          <sqm-portal-container\n            gap=\"large\"\n            direction=\"column\"\n            display=\"grid\"\n            max-width=\"100%\"\n            padding=\"none\"\n          >\n            <sqm-titled-section\n              padding=\"none\"\n              text-align=\"center\"\n              label-margin=\"xx-small\"\n            >\n              <h3 slot=\"label\">Reward History</h3>\n            </sqm-titled-section>\n            <sqm-rewards-table\n              per-page=\"4\"\n              hidden-columns=\"0\"\n              more-label=\"Next\"\n              prev-label=\"Prev\"\n              sm-breakpoint=\"599\"\n              md-breakpoint=\"799\"\n            >\n              <sqm-rewards-table-reward-column\n                available-text=\"{availableAmount} remaining\"\n                column-title=\"Reward\"\n                copy-text=\"Copied!\"\n                redeemed-text=\"{redeemedAmount} redeemed\"\n              >\n              </sqm-rewards-table-reward-column>\n              <sqm-rewards-table-source-column\n                anonymous-user=\"Anonymous User\"\n                column-title=\"Source\"\n                deleted-user=\"Deleted User\"\n                referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n                reward-exchange-text=\"Reward Exchange\"\n                reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n              >\n              </sqm-rewards-table-source-column>\n              <sqm-rewards-table-status-column\n                column-title=\"Status\"\n                expiry-text=\"Expires on \"\n                status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n              >\n              </sqm-rewards-table-status-column>\n              <sqm-rewards-table-date-column\n                column-title=\"Date received\"\n                date-shown=\"dateGiven\"\n              >\n              </sqm-rewards-table-date-column>\n              <sqm-empty\n                slot=\"empty\"\n                empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n                empty-state-header=\"View your rewards\"\n                empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n              >\n              </sqm-empty>\n            </sqm-rewards-table>\n          </sqm-portal-container>\n        </sqm-portal-container>\n        <sqm-portal-footer\n          support-email=\"support@example.com\"\n          terms-link=\"https://example.com\"\n          faq-link=\"https://example.com\"\n          terms-text=\"Terms And Conditions\"\n          faq-text=\"FAQ\"\n          show-powered-by=\"true\"\n          padding-bottom=\"none\"\n          padding-left=\"none\"\n          padding-right=\"none\"\n          padding-top=\"none\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-portal-container>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const passwordlessReferrerPersonalized = "<sqm-brand>\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"none\"\n    gap=\"xx-large\"\n    max-width=\"770px\"\n    center\n    display=\"grid\"\n  >\n    <sqm-referral-card vertical-alignment=\"start\">\n      <sqm-titled-section\n        text-align=\"center\"\n        label-margin=\"xxx-small\"\n        padding=\"none\"\n      >\n        <h3 slot=\"label\">Share &#x24;50 with friends</h3>\n        <p slot=\"content\">\n          They&#x2019;ll get a &#x24;50 credit towards a new account and\n          you&#x2019;ll get up to &#x24;1200\n        </p>\n      </sqm-titled-section>\n      <sqm-portal-container\n        gap=\"large\"\n        slot=\"left\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <p>\n          They&#x2019;ll get a &#x24;50 credit towards a new account and\n          you&#x2019;ll get:\n        </p>\n        <sqm-timeline icon=\"circle\">\n          <sqm-timeline-entry\n            reward=\"$50\"\n            unit=\"visa giftcard\"\n            desc=\"Your friend purchases a Business plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n          <sqm-timeline-entry\n            reward=\"$200\"\n            unit=\"visa giftcard\"\n            desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n          <sqm-timeline-entry\n            reward=\"$1000\"\n            unit=\"visa giftcard\"\n            desc=\"Your friend purchases an Enterprise plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n        </sqm-timeline>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        slot=\"right\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <p>Choose how you want to share:</p>\n        <p><sub>Your unique referral link:</sub></p>\n        <sqm-share-link\n          tooltip-text=\"Copied to Clipboard\"\n          tooltip-lifespan=\"1000\"\n        >\n        </sqm-share-link>\n        <sqm-portal-container\n          gap=\"x-small\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-share-button\n            medium=\"email\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Share via email\n          </sqm-share-button>\n          <sqm-share-button\n            medium=\"linkedin\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Share on LinkedIn\n          </sqm-share-button>\n          <sqm-share-button\n            medium=\"twitter\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Tweet about us\n          </sqm-share-button>\n        </sqm-portal-container>\n      </sqm-portal-container>\n    </sqm-referral-card>\n  </sqm-portal-container>\n</sqm-brand>\n";
+const passwordlessReferrerPersonalized = "<sqm-brand>\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"none\"\n    gap=\"xx-large\"\n    max-width=\"770px\"\n    center\n    display=\"grid\"\n  >\n    <sqm-referral-card vertical-alignment=\"start\">\n      <sqm-titled-section\n        text-align=\"center\"\n        label-margin=\"xxx-small\"\n        padding=\"none\"\n        slot=\"header\"\n      >\n        <h3 slot=\"label\">Share &#x24;50 with friends</h3>\n        <p slot=\"content\">\n          They&#x2019;ll get a &#x24;50 credit towards a new account and\n          you&#x2019;ll get up to &#x24;1200\n        </p>\n      </sqm-titled-section>\n      <sqm-portal-container\n        gap=\"large\"\n        slot=\"left\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <p>How to get rewarded!</p>\n        <sqm-timeline icon=\"circle\">\n          <sqm-timeline-entry\n            reward=\"$50\"\n            unit=\"visa giftcard\"\n            desc=\"Your friend purchases a Business plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n          <sqm-timeline-entry\n            reward=\"$200\"\n            unit=\"visa giftcard\"\n            desc=\"Our sales team qualifies your friend as a good fit for our Enterprise plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n          <sqm-timeline-entry\n            reward=\"$1000\"\n            unit=\"visa giftcard\"\n            desc=\"Your friend purchases an Enterprise plan\"\n            icon=\"circle\"\n          >\n          </sqm-timeline-entry>\n        </sqm-timeline>\n      </sqm-portal-container>\n      <sqm-portal-container\n        gap=\"large\"\n        slot=\"right\"\n        direction=\"column\"\n        display=\"grid\"\n        max-width=\"100%\"\n        padding=\"none\"\n      >\n        <p>Choose how you want to share:</p>\n        <p><sub>Your unique referral link:</sub></p>\n        <sqm-share-link\n          tooltip-text=\"Copied to Clipboard\"\n          tooltip-lifespan=\"1000\"\n        >\n        </sqm-share-link>\n        <sqm-portal-container\n          gap=\"x-small\"\n          direction=\"column\"\n          display=\"grid\"\n          max-width=\"100%\"\n          padding=\"none\"\n        >\n          <sqm-share-button\n            medium=\"email\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Share via email\n          </sqm-share-button>\n          <sqm-share-button\n            medium=\"linkedin\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Share on LinkedIn\n          </sqm-share-button>\n          <sqm-share-button\n            medium=\"twitter\"\n            icon-slot=\"prefix\"\n            size=\"medium\"\n            type=\"default\"\n          >\n            Tweet about us\n          </sqm-share-button>\n        </sqm-portal-container>\n      </sqm-portal-container>\n      <sqm-portal-container\n        slot=\"footer\"\n        direction=\"column\"\n        gap=\"small\"\n        justify-content=\"center\"\n        display=\"flex\"\n        padding=\"large\"\n      >\n        <sqm-user-identifier\n          switch-user-link=\"https://www.example.com\"\n        ></sqm-user-identifier\n        ><sqm-portal-footer\n          padding-top=\"0\"\n          padding-bottom=\"0\"\n          padding-left=\"0\"\n          padding-right=\"0\"\n        ></sqm-portal-footer>\n      </sqm-portal-container>\n    </sqm-referral-card>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const passwordlessReferrerRegistration = "<sqm-brand>\n  <sqm-passwordless-registration include-name=\"true\">\n    <sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"xxx-small\"\n      padding=\"none\"\n      slot=\"top-slot\"\n    >\n      <h3 slot=\"label\">Share &#x24;50 with friends</h3>\n      <p slot=\"content\">\n        They&#x2019;ll get a &#x24;50 credit towards a new account and\n        you&#x2019;ll get up to &#x24;1200\n      </p>\n    </sqm-titled-section>\n\n    <sqm-portal-footer\n      support-email=\"support@example.com\"\n      terms-link=\"https://example.com\"\n      faq-link=\"https://example.com\"\n      terms-text=\"Terms And Conditions\"\n      faq-text=\"FAQ\"\n      show-powered-by=\"true\"\n      padding-bottom=\"none\"\n      padding-left=\"none\"\n      padding-right=\"none\"\n      padding-top=\"none\"\n      slot=\"bottom-slot\"\n    ></sqm-portal-footer>\n  </sqm-passwordless-registration>\n</sqm-brand>\n";
+const passwordlessReferrerRegistration = "<sqm-brand>\n  <sqm-passwordless-registration include-name=\"true\">\n    <sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"xxx-small\"\n      padding=\"none\"\n      slot=\"top-slot\"\n    >\n      <h3 slot=\"label\">Share &#x24;50 with friends</h3>\n      <p slot=\"content\">\n        They&#x2019;ll get a &#x24;50 credit towards a new account and\n        you&#x2019;ll get up to &#x24;1200\n      </p>\n    </sqm-titled-section>\n\n    <sqm-portal-footer\n      hide-support-text=\"true\"\n      terms-link=\"https://example.com\"\n      terms-text=\"Terms And Conditions\"\n      faq-text=\"FAQ\"\n      show-powered-by=\"true\"\n      padding-bottom=\"none\"\n      padding-left=\"none\"\n      padding-right=\"none\"\n      padding-top=\"none\"\n      slot=\"bottom-slot\"\n    ></sqm-portal-footer>\n  </sqm-passwordless-registration>\n</sqm-brand>\n";
 
-const passwordlessReferredPersonalized = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n  <sqm-portal-container\n    gap=\"large\"\n    direction=\"column\"\n    display=\"grid\"\n    max-width=\"770px\"\n    padding=\"small\"\n    center\n  >\n    <sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"xxx-small\"\n      padding=\"none\"\n    >\n      <h3 slot=\"label\">You got $50 off thanks to a friend</h3>\n    </sqm-titled-section>\n    <sqm-coupon-code></sqm-coupon-code>\n  </sqm-portal-container>\n  <sqm-portal-container\n    gap=\"large\"\n    direction=\"column\"\n    display=\"grid\"\n    max-width=\"100%\"\n    padding=\"none\"\n  >\n  </sqm-portal-container>\n</sqm-brand>\n";
+const passwordlessReferredPersonalized = "<sqm-brand>\n  <sqm-portal-container\n    direction=\"column\"\n    padding=\"none\"\n    gap=\"xx-large\"\n    max-width=\"770px\"\n    center\n    display=\"grid\"\n  >\n    <sqm-referral-card vertical-alignment=\"start\">\n      <sqm-portal-container\n        gap=\"large\"\n        direction=\"column\"\n        display=\"flex\"\n        justify-content=\"center\"\n        max-width=\"100%\"\n        padding=\"none\"\n        slot=\"header\"\n      >\n        <sqm-titled-section\n          text-align=\"center\"\n          label-margin=\"xxx-small\"\n          padding=\"none\"\n        >\n          <h3 slot=\"label\">You got $50 off thanks to a friend!</h3>\n\n          <p slot=\"content\">\n            Description about sharing the products wiht friends will make your\n            life 100 times better!\n          </p>\n        </sqm-titled-section>\n\n        <sqm-portal-container>\n          <p>\n            The coupon code has some conditions that are described concisely in\n            this paragraph so that you don’t get upset if the code doesn’t work\n          </p></sqm-portal-container\n        >\n\n        <sqm-coupon-code></sqm-coupon-code>\n      </sqm-portal-container>\n\n      <sqm-portal-footer\n        slot=\"footer\"\n        padding-top=\"0\"\n        padding-bottom=\"0\"\n        padding-left=\"0\"\n        padding-right=\"0\"\n      ></sqm-portal-footer>\n    </sqm-referral-card>\n  </sqm-portal-container>\n</sqm-brand>\n";
 
-const passwordlessReferredRegistration = "<sqm-brand>\n  <sqm-referred-registration\n    register-label=\"Get $50 off\"\n  ></sqm-referred-registration>\n</sqm-brand>\n";
+const passwordlessReferredRegistration = "<sqm-brand>\n  <sqm-referred-registration register-label=\"Get $50 off\">\n    <sqm-titled-section\n      text-align=\"center\"\n      label-margin=\"xxx-small\"\n      padding=\"none\"\n      slot=\"top-slot\"\n    >\n      <h3 slot=\"label\">You got $50 off thanks to a friend!</h3>\n      <p slot=\"content\">\n        Description about sharing the products with friends will make your life\n        100 times better!\n      </p>\n    </sqm-titled-section>\n\n    <div slot=\"bottom-slot\">\n      <p style=\"text-align: center; margin-top: 0; margin-bottom: 1.5rem\">\n        *Valid on purchases of $75 or more\n      </p>\n      <sqm-portal-footer\n        hide-support-text=\"true\"\n        terms-link=\"https://example.com\"\n        terms-text=\"Terms And Conditions\"\n        faq-text=\"FAQ\"\n        show-powered-by=\"true\"\n        padding-bottom=\"none\"\n        padding-left=\"none\"\n        padding-right=\"none\"\n        padding-top=\"none\"\n      ></sqm-portal-footer>\n    </div>\n  </sqm-referred-registration>\n</sqm-brand>\n";
 
 const portalTemplate = "<sqm-portal-frame>\n  <a slot=\"header\" href=\"/\">\n    <sqm-text style=\"height: 60px\">\n      <img\n        style=\"height: 60px\"\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\n      />\n    </sqm-text>\n  </a>\n  <sqb-program-section program-id=\"referral-program\">\n    <sqm-router>\n      <template\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\n      >\n        <sqm-hero\n          background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\n        >\n          <sqm-router>\n            <template path=\"/register\">\n              <sqm-portal-register>\n                <sqm-name-fields slot=\"formData\"></sqm-name-fields>\n              </sqm-portal-register>\n            </template>\n\n            <template path=\"/emailVerification\">\n              <sqm-portal-protected-route\n                redirect-to=\"/login\"\n              ></sqm-portal-protected-route>\n              <sqm-portal-email-verification></sqm-portal-email-verification>\n            </template>\n\n            <template path=\"/login\">\n              <sqm-portal-login></sqm-portal-login>\n            </template>\n\n            <template path=\"/verifyEmail\">\n              <sqm-portal-verify-email></sqm-portal-verify-email>\n            </template>\n\n            <template path=\"/forgotPassword\">\n              <sqm-portal-forgot-password\n                email-label=\"Business Email\"\n              ></sqm-portal-forgot-password>\n            </template>\n\n            <template path=\"/resetPassword\">\n              <sqm-portal-reset-password\n                confirm-password=\"true\"\n              ></sqm-portal-reset-password>\n            </template>\n            <template path=\"/logout\">\n              <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\n            </template>\n          </sqm-router>\n        </sqm-hero>\n      </template>\n    </sqm-router>\n    <sqm-router>\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\n        <sqm-divided-layout\n          direction=\"row\"\n          style=\"\n            border-top: 1px solid #eaeaea;\n            border-bottom: 1px solid #eaeaea;\n          \"\n        >\n          <sqm-navigation-sidebar>\n            <sqm-navigation-sidebar-item\n              path=\"/\"\n              icon=\"house\"\n              label=\"Dashboard\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/activity\"\n              icon=\"bar-chart\"\n              label=\"Activity\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/editProfile\"\n              icon=\"person\"\n              label=\"Edit Profile\"\n            ></sqm-navigation-sidebar-item>\n            <sqm-navigation-sidebar-item\n              path=\"/logout\"\n              icon=\"box-arrow-right\"\n              label=\"Logout\"\n            ></sqm-navigation-sidebar-item>\n          </sqm-navigation-sidebar>\n          <sqm-divided-layout direction=\"column\">\n            <sqm-router>\n              <template path=\"/\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqb-widget\n                  widget-type=\"p/referral-program/w/referrerWidget\"\n                  track-loads=\"true\"\n                ></sqb-widget>\n              </template>\n              <template path=\"/editProfile\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n                  <sqm-portal-change-password></sqm-portal-change-password>\n                </sqm-portal-container>\n              </template>\n\n              <template path=\"/activity\">\n                <sqm-portal-protected-route\n                  require-email-verification=\"true\"\n                  redirect-to=\"/login\"\n                  redirect-to-unverified=\"/emailVerification\"\n                ></sqm-portal-protected-route>\n                <sqm-portal-container\n                  direction=\"column\"\n                  padding=\"xxx-large\"\n                  gap=\"xxx-large\"\n                >\n                  <sqm-text> <h1>Activity</h1></sqm-text>\n                  <sqm-stat-container space=\"xxxx-large\"\n                    ><sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/referralsCount\"\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n                    >\n                    <sqm-big-stat\n                      flex-reverse=\"true\"\n                      alignment=\"left\"\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n                    >\n                  </sqm-stat-container>\n                  <sqm-referral-table>\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\n                    <sqm-referral-table-date-column\n                      column-title=\"Referred\"\n                      date-shown=\"dateReferralStarted\"\n                    ></sqm-referral-table-date-column> </sqm-referral-table\n                ></sqm-portal-container>\n              </template>\n            </sqm-router>\n          </sqm-divided-layout>\n        </sqm-divided-layout>\n      </template>\n    </sqm-router>\n  </sqb-program-section>\n  <sqm-portal-footer\n    slot=\"footer\"\n    support-email=\"support@example.com\"\n    terms-link=\"https://example.com\"\n    faq-link=\"https://example.com\"\n    terms-text=\"Terms And Conditions\"\n    faq-text=\"FAQ\"\n    show-powered-by=\"true\"\n  ></sqm-portal-footer>\n</sqm-portal-frame>\n";
 
@@ -9813,7 +9813,7 @@ const PoweredByImg = /*#__PURE__*/Object.freeze({
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$f = "Feature: Portal Footer\n\n    Background: A user is viewing the portal\n        Given a hosted portal\n        And a user is viewing the portal\n        And the portal has a footer\n\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\n        And prop \"terms-text\" with value \"Terms and Conditions\"\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\n        And prop \"faq-text\" with value \"Visit FAQ\"\n        When a user clicks on the \"Visit FAQ\" link\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\n        When they go back to the portal\n        And click on the \"Terms and Conditions\" link\n        Then they will be redirected to \"https://example.com/terms\" in a new page\n\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\n        Given the footer does not have <linkProp>\n        But it <mayHave> <textProp> with <value>\n        Then the <link> will not be shown in the footer\n        Examples:\n            | linkProp   | mayHave      | textProp  | value                | link     |\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\n            | terms-link | doesn't have |           |                      | T&C Link |\n            | faq-link   | doesn't have |           |                      | FAQ Link |\n\n    Scenario Outline: The support email and text is configurable but has a default\n        Given the footer <mayHave> <emailPropWithValue>\n        And the footer <mayAlsoHave> <textPropWithValue>\n        Then the footer's support email text is <renderedEmailText>\n        And the email address will be a mailto link with <mailtoEmail>\n        When the user clicks on the email address mailto Link\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\n        Examples:\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\n\n    Scenario Outline: Powered by SaaSquatch is shown by default\n        Given the footer <mayHaveProp> \"hide-powered-by\" with <value>\n        Then the powered by SaaSquatch image <mayBeShown>\n        Examples:\n            | mayHaveProp       | value | mayBeShown  |\n            | has prop          | true  | isn't shown |\n            | has prop          | false | is shown    |\n            | has prop          | test  | isn't shown |\n            | has prop          |       | isn't shown |\n            | doesn't have prop |       | is shown    |\n\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\n        Given the footer has the powered by SaaSquatch image\n        When a user clicks on it\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$f = "Feature: Portal Footer\n\n    Background: A user is viewing the portal\n        Given a hosted portal\n        And a user is viewing the portal\n        And the portal has a footer\n\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\n        And prop \"terms-text\" with value \"Terms and Conditions\"\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\n        And prop \"faq-text\" with value \"Visit FAQ\"\n        When a user clicks on the \"Visit FAQ\" link\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\n        When they go back to the portal\n        And click on the \"Terms and Conditions\" link\n        Then they will be redirected to \"https://example.com/terms\" in a new page\n\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\n        Given the footer does not have <linkProp>\n        But it <mayHave> <textProp> with <value>\n        Then the <link> will not be shown in the footer\n        Examples:\n            | linkProp   | mayHave      | textProp  | value                | link     |\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\n            | terms-link | doesn't have |           |                      | T&C Link |\n            | faq-link   | doesn't have |           |                      | FAQ Link |\n\n    Scenario Outline: The support email and text is configurable but has a default\n        Given the footer <mayHave> <emailPropWithValue>\n        And the footer <mayAlsoHave> <textPropWithValue>\n        Then the footer's support email text is <renderedEmailText>\n        And the email address will be a mailto link with <mailtoEmail>\n        When the user clicks on the email address mailto Link\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\n        Examples:\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\n\n    Scenario Outline: Powered by SaaSquatch is shown by default\n        Given the footer <mayHaveProp> \"hide-powered-by\" with <value>\n        Then the powered by SaaSquatch image <mayBeShown>\n        Examples:\n            | mayHaveProp       | value | mayBeShown  |\n            | has prop          | true  | isn't shown |\n            | has prop          | false | is shown    |\n            | has prop          | test  | isn't shown |\n            | has prop          |       | isn't shown |\n            | doesn't have prop |       | is shown    |\n\n    Scenario Outline: Support text is shown by default\n        Given the footer <mayHaveProp> \"hide-support-text\" with <value>\n        Then the support text <mayBeShown>\n        Examples:\n            | mayHaveProp       | value | mayBeShown  |\n            | has prop          | true  | isn't shown |\n            | has prop          | false | is shown    |\n            | has prop          | test  | isn't shown |\n            | has prop          |       | isn't shown |\n            | doesn't have prop |       | is shown    |\n\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\n        Given the footer has the powered by SaaSquatch image\n        When a user clicks on it\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Components/Portal Footer",
@@ -9836,6 +9836,7 @@ const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defaultProp
 const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { faqLink: "https://example.com", faqText: "FAQ" })));
 const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
 const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
+const FooterNoSupportText = () => (h(PortalFooterView, Object.assign({}, defaultProps$9, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
 
 const PortalFooter = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9844,7 +9845,8 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterWithTerms: FooterWithTerms,
   FooterWithFAQ: FooterWithFAQ,
   FooterWithTermsAndFAQ: FooterWithTermsAndFAQ,
-  FooterNoPoweredBy: FooterNoPoweredBy
+  FooterNoPoweredBy: FooterNoPoweredBy,
+  FooterNoSupportText: FooterNoSupportText
 });
 
 const scenario$g = "Feature: Hero Unit\n\n    Background: A portal with a hero unit exists\n        Given a hosted portal\n        And the portal has hero unit on the login page\n        And a user is viewing the login page\n\n    Scenario: The hero unit defaults to a single column layout\n        Given a hero unit does not have a \"columns\" prop\n        But the following html is wrapped by the hero unit\n            \"\"\"\n            <sqm-portal-login></sqm-portal-login>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Get Referring!</h1>\n            <p style=\"text-align:center\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur.\n            </p>\n            </div>\n            \"\"\"\n        Then only a single column will be displayed\n        And within it will be the login component\n\n    Scenario Outline: The hero unit supports single or dual column layouts\n        Given a hero unit with prop \"columns\" having <columnValue>\n        And it wraps <html>\n        Then the hero unit displays <columnValue> columns\n        Examples:\n            | columnValue | html                                                                                              |\n            | 1           | <h1>Column 1!</h1>                                                                                |\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\n\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\n        Given a hero unit with \"columns\" \"2\"\n        And the following html\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div>\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        When the hero unit is rendered\n        Then only one column is displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 1 will contain the \"Column 2!\" text\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\n        Then the two columns are displayed with content\n        And column 1 will contain the \"Column 1!\" text\n        And column 2 will contain the \"Column 2!\" text\n\n    Scenario Outline: A background for the hero unit can be set as an image or colour\n        Given a hero unit with <backgroundPropValue>\n        Then the background will be <background>\n        Examples:\n            | background                                                  | background               |\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\n            | LightSlateGrey                                              | light slate grey         |\n            | #00FF00                                                     | green                    |\n            | rgb(128,0,128)                                              | purple                   |\n\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\n        Given a hero unit with the following HTML\n            \"\"\"\n            <h1>Column 1!</h1>\n            <div slot=\"secondary-column\">\n            <h1 style=\"text-align:center\">Column 2!</h1>\n            </div>\n            \"\"\"\n        And prop \"wrap-direction\" has <value>\n        When the window width is less than 600px\n        Then the two columns will stack\n        And <column> will be on top\n        Examples:\n            | value        | column |\n            | wrap         | 1      |\n            | wrap-reverse | 2      |\n            |              | 1      |";
@@ -13015,7 +13017,7 @@ const CopyButtonInside$1 = () => {
     copyString: "https://noah.example.com",
     open: false,
     tooltiptext: "Copied!",
-    buttonOutside: false,
+    buttonPosition: "inside",
     isCopyIcon: false,
   })));
 };
@@ -13060,13 +13062,29 @@ const WithSlots = () => (h(EmailRegistrationView, Object.assign({}, defaultProps
     bottomSlot: h("div", null, "Hello this is the bottom slot"),
   },
 })));
+const Loading$4 = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps$d,
+  states: {
+    error: "",
+    loading: true,
+  },
+})));
+const Error$6 = () => (h(EmailRegistrationView, Object.assign({}, {
+  ...defaultProps$d,
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+  },
+})));
 
 const EmailRegistration = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': EmailRegistration_stories,
   Default: Default$e,
   HasFirstNameLastName: HasFirstNameLastName,
-  WithSlots: WithSlots
+  WithSlots: WithSlots,
+  Loading: Loading$4,
+  Error: Error$6
 });
 
 const CouponCode_stories = {
@@ -13094,7 +13112,10 @@ const CopyButton$2 = () => {
   return h("sqm-coupon-code", { isCopyIcon: false });
 };
 const CopyButtonInside$2 = () => {
-  return (h(CopyTextView, Object.assign({}, defaultProps$e, { buttonOutside: false, isCopyIcon: false })));
+  return (h(CopyTextView, Object.assign({}, defaultProps$e, { buttonPosition: "inside", isCopyIcon: false })));
+};
+const CopyButtonBelow = () => {
+  return (h(CopyTextView, Object.assign({}, defaultProps$e, { buttonPosition: "below", isCopyIcon: false })));
 };
 const CustomTooltipDuration$1 = () => {
   return (h("sqm-coupon-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
@@ -13108,10 +13129,11 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
   TextAlignCenter: TextAlignCenter$2,
   CopyButton: CopyButton$2,
   CopyButtonInside: CopyButtonInside$2,
+  CopyButtonBelow: CopyButtonBelow,
   CustomTooltipDuration: CustomTooltipDuration$1
 });
 
-const scenario$A = "@author:noah\n@owner:noah\n\nFeature: User Identifier\n\n\tBackground: A user on a passwordless widget\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tThen the component identifies the user by email\n\n\tBackground: Users can switch who they are identified as through a link\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tWhen the user clicks the link in the component\n\t\tThen they are sent back to the registration form to re-identify themselves";
+const scenario$A = "@author:noah\n@owner:noah\n\nFeature: User Identifier\n\n\tScenario: A user on a passwordless widget\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tThen the component identifies the user by email\n\n\tScenario: Users can switch who they are identified as through a link\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tWhen the user clicks the link in the component\n\t\tThen they are sent back to the registration form to re-identify themselves";
 
 const UserIdentifier_stories = {
   title: "Components/User Identifier",
@@ -13134,10 +13156,10 @@ const UserIdentifier = /*#__PURE__*/Object.freeze({
   Default: Default$f
 });
 
-const scenario$B = "@author:noah\n@owner:noah\n\nFeature: User Identifier\n\n\tBackground: A user on a passwordless widget\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tThen the component identifies the user by email\n\n\tBackground: Users can switch who they are identified as through a link\n\t\tGiven a user viewing a passwordless widget\n\t\tAnd the user is identified\n\t\tAnd the user is not logged in\n\t\tWhen the user clicks the link in the component\n\t\tThen they are sent back to the registration form to re-identify themselves";
+const scenario$B = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\tScenario: When a user clicks the button a link open\n\t\tWhen a user clicks the button\n\t\tThen a link opens\n\t\tAnd if `openInNewTab` is set to true then the link opens in a new tab";
 
 const LinkButton_stories = {
-  title: "Components/User Identifier",
+  title: "Components/Link Button",
   parameters: {
     scenario: scenario$B,
   },

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

@@ -1,8 +1,8 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
 import { m as h$1 } from './stencil-hooks.module-b48b45ec.js';
 import './use-callback-051c06c6.js';
-import './index.module-787e5d35.js';
-import { a as useRequestRerender } from './re-render-54bb3e32.js';
+import './index.module-0ba0774e.js';
+import { a as useRequestRerender } from './re-render-22de5b23.js';
 
 const TabView = ({}, children) => {
   return h(Host, null, children);

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

@@ -1,9 +1,9 @@
 import { h, c as Host, r as registerInstance } from './index-17b4da69.js';
 import { l, k as useMemo, u as useEffect, m as h$1 } from './stencil-hooks.module-b48b45ec.js';
 import './use-callback-051c06c6.js';
-import { R } from './index.module-787e5d35.js';
-import { u as useRerenderListener } from './re-render-54bb3e32.js';
-import { u as useChildElements } from './useChildElements-0124b1a9.js';
+import { R } from './index.module-0ba0774e.js';
+import { u as useRerenderListener } from './re-render-22de5b23.js';
+import { u as useChildElements } from './useChildElements-fd458906.js';
 import { g as getProps } from './utils-334c1e34.js';
 
 const TabsView = ({ content, placement, }) => {

package/dist/esm/{sqm-user-identifier-view-379c773f.js → sqm-user-identifier-view-dbf71a5e.js}

@@ -2,7 +2,14 @@ import { h } from './index-17b4da69.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {
-  Container: {},
+  Container: { color: "var(--sl-color-neutral-600)" },
+  Link: {
+    textDecoration: "none",
+    color: "var(--sl-color-primary-700)",
+    "&:hover": {
+      color: "var(--sl-color-primary-800)",
+    },
+  },
 };
 const vanillaStyle = `
 :host{
@@ -13,13 +20,13 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 function UserIdentifierView(props) {
   const { userIdentificationText, switchUserLink, switchUserText } = props;
-  return (h("span", { class: sheet.classes.Container },
+  return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     userIdentificationText,
     " (",
-    h("a", { href: switchUserLink }, switchUserText),
+    h("a", { class: sheet.classes.Link, href: switchUserLink, part: "sqm-link" }, switchUserText),
     ")"));
 }
 

package/dist/esm/sqm-user-identifier.entry.js

@@ -1,9 +1,20 @@
 import { r as registerInstance, h } from './index-17b4da69.js';
+import './stencil-hooks.module-b48b45ec.js';
+import './use-callback-051c06c6.js';
+import { i as isDemo } from './index.module-0ba0774e.js';
+import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
-import { g as getProps } from './utils-334c1e34.js';
-import { U as UserIdentifierView } from './sqm-user-identifier-view-379c773f.js';
+import { U as UserIdentifierView } from './sqm-user-identifier-view-dbf71a5e.js';
 
-const Image = class {
+function useUserIdentifier(props) {
+  return {
+    switchUserLink:  props.switchUserLink,
+    userIdentificationText: "",
+    switchUserText: "",
+  };
+}
+
+const UserIdentifier = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
@@ -18,8 +29,20 @@ const Image = class {
     this.switchUserText = "not you?";
   }
   render() {
-    return h(UserIdentifierView, Object.assign({}, getProps(this)));
+    const props = isDemo()
+      ? useDemoUserIdentifier(this)
+      : useUserIdentifier(this);
+    return h(UserIdentifierView, Object.assign({}, props));
   }
 };
+function useDemoUserIdentifier(props) {
+  const switchUserLink = "https://example.com";
+  const userIdentificationText = "user@example.com";
+  return cjs({
+    switchUserLink,
+    userIdentificationText,
+    switchUserText: props.switchUserText,
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
 
-export { Image as sqm_user_identifier };
+export { UserIdentifier as sqm_user_identifier };

package/dist/esm/{useChildElements-0124b1a9.js → useChildElements-fd458906.js}

@@ -1,5 +1,5 @@
 import { i as useState, k as useMemo } from './stencil-hooks.module-b48b45ec.js';
-import { R } from './index.module-787e5d35.js';
+import { R } from './index.module-0ba0774e.js';
 
 function useChildElements() {
   const host = R();

package/dist/esm/{usePasswordlessRegistration-2381025b.js → usePasswordlessRegistration-ad9a05d5.js}

@@ -1,5 +1,5 @@
 import { i as useState } from './stencil-hooks.module-b48b45ec.js';
-import { j as sn } from './index.module-787e5d35.js';
+import { j as sn } from './index.module-0ba0774e.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 
 function usePasswordlessRegistration() {

package/dist/esm/{useReferralTable-3024490c.js → useReferralTable-a3d6051e.js}

@@ -1,8 +1,8 @@
 import { h } from './index-17b4da69.js';
 import { b as browser, f as useReducer, u as useEffect } from './stencil-hooks.module-b48b45ec.js';
-import { d as dist, W, O, x, f as fn, h as hn } from './index.module-787e5d35.js';
-import { u as useRerenderListener } from './re-render-54bb3e32.js';
-import { u as useChildElements } from './useChildElements-0124b1a9.js';
+import { d as dist, W, O, x, f as fn, h as hn } from './index.module-0ba0774e.js';
+import { u as useRerenderListener } from './re-render-22de5b23.js';
+import { u as useChildElements } from './useChildElements-fd458906.js';
 import { l as luxon } from './luxon-1e38d7f1.js';
 
 const mockRewardData = (count = 4) => {

package/dist/esm/{useRegistrationFormState-3c2c2f1b.js → useRegistrationFormState-29e30121.js}

@@ -1,5 +1,5 @@
 import { y } from './stencil-hooks.module-b48b45ec.js';
-import { R } from './index.module-787e5d35.js';
+import { R } from './index.module-0ba0774e.js';
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {