@saasquatch/mint-components 2.1.0 → 2.1.1-1

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

@@ -1,38 +1,38 @@
-import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
-import './global-5d501632.js';
-import { a as commonjsGlobal, u as useMemo, k as useState, c as createCommonjsModule, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
-import { j as jn, b as setUserIdentity, f as setProgramId, k as kn, d as dist, X as Xe } from './index.module-234e8f5e.js';
+import { h, r as registerInstance, c as Host } from './index-38ad4957.js';
+import './global-b2ee3a12.js';
+import { a as commonjsGlobal, u as useMemo, k as useState, c as createCommonjsModule, f as useEffect, n as h$1 } from './dom-context-hooks.module-50442785.js';
+import { j as jn, e as setUserIdentity, p as setProgramId, k as kn, d as dist, X as Xe } from './index.module-e266b4d7.js';
 import './cjs-bdfb4486.js';
 import './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-75d67509.js';
+import './useReferralCodes-1ca1fda0.js';
 import './mixins-f750863a.js';
-import { C as CopyTextView } from './copy-text-view-fac47254.js';
-import { G as GenericTableView } from './GenericTableView-e43d310f.js';
-import './useChildElements-daf489b1.js';
-import { l as luxon } from './luxon-bbf75a9d.js';
-import './sqm-text-span-view-4c17b8c9.js';
-import { C as CloseButtonView } from './sqm-close-button-view-2fa57229.js';
+import { C as CopyTextView } from './copy-text-view-87259b11.js';
+import './sqm-text-span-view-738acfb3.js';
+import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c1a72c4f.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-2f4936ef.js';
+import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
+import './useChildElements-31ba3daf.js';
+import { l as luxon } from './luxon-1be92a8e.js';
+import { C as CloseButtonView } from './sqm-close-button-view-fd9012e7.js';
 import './index-ffa26b43.js';
-import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
-import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-e461c8d6.js';
-import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-18baae5b.js';
-import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-f21e54e3.js';
-import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-0a2ec560.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-3d1b3be4.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-ec6d9b7e.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-36eae0a3.js';
-import './utilities-e6f8716e.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-8bdc3804.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-abef7286.js';
-import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-33805220.js';
-import './ErrorView-bbf0a042.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-ea505213.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as PortalRegisterView, f as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, g as ChangeMarktingView, h as PortalFooterView, i as PortalForgotPasswordView, j as PortalFrameView, k as PortalLoginView, R as ReferralIframeView, l as RewardExchangeView, r as rewardExchangeCustomErrorMsg, m as rewardExchangeLongText, n as rewardExchangeSelected, o as chooseAmountFixed, p as chooseAmountFixedNoDescription, q as chooseAmountVariable, s as chooseAmountVariableNoDescription, t as chooseAmountVariableDisabled, v as chooseAmountVariableUnavailable, w as confirmFixed, x as confirmVariable, y as redemptionError, z as queryError, A as success, F as successVariable, G as loading, J as empty$1, K as rewardExchange, M as useShareButton, O as useShareLink, Q as ProgressBarView, U as ProgressBar$2, V as LeadFormView, W as LeadDropdownFieldView, X as ShadowViewAddon } from './ShadowViewAddon-4c1699d3.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-176e92e3.js';
-import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-74dcb6d0.js';
-import { t as taxTypeToName, L as LoadingView } from './data-4a551ba6.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-9cf60eea.js';
+import { E as EmailRegistrationView } from './email-registration-view-4cdb4129.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-00d76ba1.js';
+import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7a682cc3.js';
+import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-376c1bf6.js';
+import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2b66457a.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-7f966119.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-13e25037.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-a172bdcc.js';
+import './utilities-f05633da.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-cfbc0eb0.js';
+import './ErrorView-74cb3af8.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-ce476721.js';
+import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as useShareLink, K as ProgressBarView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as ShadowViewAddon } from './ShadowViewAddon-19a59d93.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-a8c708cd.js';
+import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-0ef6a58f.js';
+import { t as taxTypeToName, L as LoadingView } from './data-a6752028.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d8f76a9d.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -6363,7 +6363,7 @@ const defaultElements = {
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
         h("td", null,
-          h("sl-skeleton", null))));
+          h("sqm-skeleton", null))));
     })))),
 };
 const SlottedIntoComponent = () => {
@@ -6440,6 +6440,11 @@ const WarningAlertTransparent = () => (h("sqm-form-message", { type: "warning",
 const InfoAlertTransparent = () => (h("sqm-form-message", { type: "info", transparent: true },
   h("p", { part: "alert-title" }, "This is the title"),
   h("p", { part: "alert-description" }, "This is the description")));
+const Loading$1 = () => {
+  return (h("sqm-form-message", { type: "success", loading: true },
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
+};
 
 const FormMessage = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6451,7 +6456,8 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlertTransparent: SuccessAlertTransparent,
   ErrorAlertTransparent: ErrorAlertTransparent,
   WarningAlertTransparent: WarningAlertTransparent,
-  InfoAlertTransparent: InfoAlertTransparent
+  InfoAlertTransparent: InfoAlertTransparent,
+  Loading: Loading$1
 });
 
 const scenario$6 = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";
@@ -7032,19 +7038,19 @@ const InvoiceTable_stories = {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": "View your invoice details", "empty-state-text": "Track the status of your invoices and rewards earned by referring friends" }));
 // Reward Status Cases
 const simpleInvoiceTableProps = {
@@ -7460,7 +7466,7 @@ const Empty$1 = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-const Loading$1 = () => {
+const Loading$2 = () => {
   const props = {
     states: {
       loading: true,
@@ -7929,7 +7935,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Leaderboard_stories,
   Empty: Empty$1,
-  Loading: Loading$1,
+  Loading: Loading$2,
   Essentials: Essentials,
   One: One,
   Five: Five,
@@ -8477,7 +8483,7 @@ const defaultProps$a = {
 const Default$b = () => {
   return h("sqm-portal-change-marketing", null);
 };
-const Loading$2 = () => {
+const Loading$3 = () => {
   return (h(ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
 };
 const Error$4 = () => {
@@ -8501,7 +8507,7 @@ const ChangeMarketing = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangeMarketing_stories,
   Default: Default$b,
-  Loading: Loading$2,
+  Loading: Loading$3,
   Error: Error$4,
   Success: Success
 });
@@ -8650,7 +8656,7 @@ const Default$c = () => h(PortalChangePasswordView, Object.assign({}, defaultPro
 const Open = () => h(PortalChangePasswordView, Object.assign({}, openProps));
 const Error$5 = () => h(PortalChangePasswordView, Object.assign({}, errorProps$2));
 const PaswordError = () => (h(PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$3 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps));
+const Loading$4 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps));
 const Success$1 = () => h(PortalChangePasswordView, Object.assign({}, successProps));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
@@ -8660,7 +8666,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
   Open: Open,
   Error: Error$5,
   PaswordError: PaswordError,
-  Loading: Loading$3,
+  Loading: Loading$4,
   Success: Success$1
 });
 
@@ -8847,6 +8853,7 @@ const defaultContent = {
   resendEmailButtonText: "Re-send Email",
   verificationStatusMessage: "Checking verification status in {countdown}",
   verificationLoadingMessage: "Checking verification status",
+  verificationResentMessage: "Verification email resent to {email}",
 };
 const defaultStates = {
   error: "",
@@ -9287,7 +9294,7 @@ const WithError = () => {
       states: { ...demoProps.states, error: "This is an error message" },
     } }));
 };
-const Loading$4 = () => {
+const Loading$5 = () => {
   return (h("sqm-portal-google-login", { demoData: {
       states: { ...demoProps.states, loading: true },
     } }));
@@ -9298,7 +9305,7 @@ const PortalGoogleLoginFormStories = /*#__PURE__*/Object.freeze({
   'default': GoogleLoginForm_stories,
   Default: Default$g,
   WithError: WithError,
-  Loading: Loading$4
+  Loading: Loading$5
 });
 
 const PortalLogin_stories = {
@@ -9596,7 +9603,7 @@ const successProps$3 = {
 };
 const Default$i = () => h(PortalProfileView, Object.assign({}, defaultProps$i));
 const DefaultNoCountry = () => h(PortalProfileView, Object.assign({}, noCountry));
-const Loading$5 = () => h(PortalProfileView, Object.assign({}, loadingProps$5));
+const Loading$6 = () => h(PortalProfileView, Object.assign({}, loadingProps$5));
 const Disabled = () => h(PortalProfileView, Object.assign({}, disabledProps));
 const Error$6 = () => h(PortalProfileView, Object.assign({}, errorProps$7));
 const Success$2 = () => h(PortalProfileView, Object.assign({}, successProps$3));
@@ -9606,7 +9613,7 @@ const PortalProfile = /*#__PURE__*/Object.freeze({
   'default': PortalProfile_stories,
   Default: Default$i,
   DefaultNoCountry: DefaultNoCountry,
-  Loading: Loading$5,
+  Loading: Loading$6,
   Disabled: Disabled,
   Error: Error$6,
   Success: Success$2
@@ -10247,7 +10254,7 @@ const CenterAlign = () => {
 const RightAlign$1 = () => {
   return h(QrCodeView, Object.assign({}, defaultProps$m, { alignment: "right" }));
 };
-const Loading$6 = () => {
+const Loading$7 = () => {
   return h(QrCodeView, Object.assign({}, defaultProps$m, { loading: true }));
 };
 const Error$7 = () => {
@@ -10265,7 +10272,7 @@ const QRCode = /*#__PURE__*/Object.freeze({
   LeftAlign: LeftAlign$1,
   CenterAlign: CenterAlign,
   RightAlign: RightAlign$1,
-  Loading: Loading$6,
+  Loading: Loading$7,
   Error: Error$7,
   DownloadError: DownloadError
 });
@@ -10657,7 +10664,7 @@ const EmptyWithCustomTextAndImage = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
-const Loading$7 = () => {
+const Loading$8 = () => {
   return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
     pagination("pagination"),
     shareCodes("shareCodes"),
@@ -10672,7 +10679,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$2,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
-  Loading: Loading$7
+  Loading: Loading$8
 });
 
 const scenario$s = "@owner:sam\n@author:sam\n\nFeature: Referral Iframe\n\n\tUsed to provide an external form for submitting referral leads using the current user's referral code\n\n\tBackground: A user is logged in\n\t\tGiven there is a logged in user\n\n\t@motivating\n\tScenario: Referral code is passed to the iframe as a query parameter\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the user has navigated to \"/refer\"\n\t\tAnd the user's referral code is \"BOBBYREFER\"\n\t\tWhen the iframe content is loaded\n\t\tThen the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\n\n\t@ui\n\tScenario Outline: The height and width of the iFrame can be controlled via props\n\t\tGiven the \"iframe-src\" is \"https://example.com\"\n\t\tAnd the iframe content is 1000x1000\n\t\tAnd the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the content of the iframe will be displayed with scrollbars\n\t\tAnd the dimension of the iFrame displayed will be 500x500\n\t\tWhen the \"iframe-height\" is set to <heightValue>\n\t\tAnd the \"iframe-width\" is set to <widthValue>\n\t\tThen the full content of the iframe will be displayed on the page\n\t\tAnd the dimension of the iFrame displayed will be 1000x1000\n\t\tExamples:\n\t\t| heightValue | widthValue |\n\t\t| 500px       | 500px      |\n\t\t| 50%         | 50%        |\n\n\t@minutia\n\tScenario Outline: The iFrame will fail fast if a iFrame source isn't provided\n\t\tGiven \"iframe-src\" <mayBeAnAttribute>\n\t\tAnd it <mayHaveValue>\n\t\tWhen a user views the referral iFrame component\n\t\tThen an alert with an error message is displayed in place of the iFrame\n\t\tAnd it has a details section\n\t\tWhen \"More details\" is clicked\n\t\tThen the following information will be displayed\n\t\t| component being used |\n\t\t| missing attribute(s) |\n\n\tExamples:\n\t\t| mayBeAnAttribute    | mayHaveValue |\n\t\t| is not an attribute | N/A          |\n\t\t| is an attribute     | \"\"           |\n\t\t| is an attribute     |              |";
@@ -11196,19 +11203,19 @@ const ReferralTable_stories = {
 const loadingElement$1 = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement$1 = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
 const baseReward$1 = {
   id: "123",
@@ -12239,7 +12246,7 @@ const RedemptionError = () => StoryBase(redemptionError);
 const QueryError = () => StoryBase(queryError);
 const SuccessPromo = () => StoryBase(success);
 const SuccessVariableAndStepped = () => StoryBase(successVariable);
-const Loading$8 = () => StoryBase(loading);
+const Loading$9 = () => StoryBase(loading);
 const Empty$3 = () => StoryBase(empty$1);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -12261,7 +12268,7 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   QueryError: QueryError,
   SuccessPromo: SuccessPromo,
   SuccessVariableAndStepped: SuccessVariableAndStepped,
-  Loading: Loading$8,
+  Loading: Loading$9,
   Empty: Empty$3
 });
 
@@ -12790,19 +12797,19 @@ const RewardsTable_stories = {
 const loadingElement$2 = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement$2 = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
 const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
   states: {
@@ -15680,7 +15687,7 @@ const InitialLoading = () => (h("sqm-code-verification", { demoData: {
       initialiseLoading: true,
     },
   } }));
-const Loading$9 = () => (h("sqm-code-verification", { demoData: {
+const Loading$a = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$q,
       loading: true,
@@ -15704,7 +15711,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetCodeVerification_stories,
   Default: Default$o,
   InitialLoading: InitialLoading,
-  Loading: Loading$9,
+  Loading: Loading$a,
   CodeResent: CodeResent,
   VerificationFailed: VerificationFailed
 });
@@ -15731,7 +15738,7 @@ const EmailIsPrefilled = () => (h("div", null,
         email: "test@example.com",
       },
     } })));
-const Loading$a = () => (h("sqm-email-verification", { demoData: {
+const Loading$b = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$r,
       initialLoading: true,
@@ -15772,7 +15779,7 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetEmailVerification_stories,
   Default: Default$p,
   EmailIsPrefilled: EmailIsPrefilled,
-  Loading: Loading$a,
+  Loading: Loading$b,
   SaveLoading: SaveLoading,
   WithHeader: WithHeader$1,
   InvalidEmail: InvalidEmail,
@@ -17509,7 +17516,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
 const PayoutDetailsCard_stories = {
   title: "Components/Payout Details Card",
 };
-const Loading$b = () => {
+const Loading$c = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
         loading: true,
@@ -17549,7 +17556,7 @@ const PaypalPayout = () => {
 const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
-  Loading: Loading$b,
+  Loading: Loading$c,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -17572,7 +17579,7 @@ const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoD
 const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:FAILED" } } }));
 const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "OVER_W9_THRESHOLD" } } }));
 const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "HOLD" } } }));
-const Loading$c = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
+const Loading$d = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
 const Error$b = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, error: true } } }));
 const NewPayeeReview = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "NEW_PAYEE_REVIEW" } } }));
 const PaymentHoldOnChange = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
@@ -17598,7 +17605,7 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   VerifyIdentityFailedInternal: VerifyIdentityFailedInternal,
   W9ThresholdReached: W9ThresholdReached,
   Hold: Hold,
-  Loading: Loading$c,
+  Loading: Loading$d,
   Error: Error$b,
   NewPayeeReview: NewPayeeReview,
   PaymentHoldOnChange: PaymentHoldOnChange,
@@ -17790,7 +17797,7 @@ const BackgroundColor$2 = () => (h(EmailRegistrationView, Object.assign({}, {
     backgroundColor: "aquamarine",
   },
 })));
-const Loading$d = () => (h(EmailRegistrationView, Object.assign({}, {
+const Loading$e = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$t,
   states: {
     error: "",
@@ -17830,7 +17837,7 @@ const EmailRegistration = /*#__PURE__*/Object.freeze({
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
-  Loading: Loading$d,
+  Loading: Loading$e,
   Error: Error$c,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
@@ -18040,7 +18047,7 @@ const Disabled$3 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProp
       disabled: true,
     },
   } })));
-const Loading$e = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+const Loading$f = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
     ...defaultProps$w.states,
     leadFormState: {
       ...defaultProps$w.states.leadFormState,
@@ -18064,7 +18071,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   Multiple: Multiple,
   WithError: WithError$2,
   Disabled: Disabled$3,
-  Loading: Loading$e,
+  Loading: Loading$f,
   WithInitialValue: WithInitialValue$1
 });
 
@@ -18119,6 +18126,31 @@ const LeadCheckboxField = /*#__PURE__*/Object.freeze({
   CustomError: CustomError$3
 });
 
+const Skeleton_stories = {
+  title: "Components/Skeleton",
+};
+const Default$v = () => {
+  return h("sqm-skeleton", null);
+};
+const CustomWidth = () => {
+  return h("sqm-skeleton", { width: "100px" });
+};
+const CustomHeight = () => {
+  return h("sqm-skeleton", { height: "100px" });
+};
+const CustomWidthAndHeight$1 = () => {
+  return h("sqm-skeleton", { width: "150px", height: "50px" });
+};
+
+const Skeleton = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': Skeleton_stories,
+  Default: Default$v,
+  CustomWidth: CustomWidth,
+  CustomHeight: CustomHeight,
+  CustomWidthAndHeight: CustomWidthAndHeight$1
+});
+
 const UserInfoFormView_stories = {
   title: "Components/User Info Form View",
 };
@@ -18262,7 +18294,7 @@ const baseProps = {
     phoneCountryRef: { current: null },
   },
 };
-const Default$v = () => {
+const Default$w = () => {
   return h(UserInfoFormView$1, Object.assign({}, baseProps));
 };
 const WithPrefilledData = () => {
@@ -18284,7 +18316,7 @@ const WithPrefilledData = () => {
       },
     } })));
 };
-const Loading$f = () => {
+const Loading$g = () => {
   return (h(UserInfoFormView$1, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       loading: true,
@@ -18446,9 +18478,9 @@ const DisabledForm = () => {
 const UserInfoFormView = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UserInfoFormView_stories,
-  Default: Default$v,
+  Default: Default$w,
   WithPrefilledData: WithPrefilledData,
-  Loading: Loading$f,
+  Loading: Loading$g,
   LoadingError: LoadingError,
   WithValidationErrors: WithValidationErrors,
   WithGeneralError: WithGeneralError,
@@ -21149,6 +21181,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
   TaxAndCashRewardsTableCell,
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,

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

@@ -1,7 +1,7 @@
-import { h, c as Host, r as registerInstance } from './index-b3a06de8.js';
-import { n as h$1 } from './dom-context-hooks.module-63370afd.js';
-import './index.module-234e8f5e.js';
-import { a as useRequestRerender } from './re-render-b56bc163.js';
+import { h, c as Host, r as registerInstance } from './index-38ad4957.js';
+import { n as h$1 } from './dom-context-hooks.module-50442785.js';
+import './index.module-e266b4d7.js';
+import { a as useRequestRerender } from './re-render-4f4bd4da.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-b3a06de8.js';
-import { u as useMemo, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
-import { _ } from './index.module-234e8f5e.js';
+import { h, c as Host, r as registerInstance } from './index-38ad4957.js';
+import { u as useMemo, f as useEffect, n as h$1 } from './dom-context-hooks.module-50442785.js';
+import { _ } from './index.module-e266b4d7.js';
 import { g as getProps } from './utils-334c1e34.js';
-import { u as useRerenderListener } from './re-render-b56bc163.js';
-import { u as useChildElements } from './useChildElements-daf489b1.js';
+import { u as useRerenderListener } from './re-render-4f4bd4da.js';
+import { u as useChildElements } from './useChildElements-31ba3daf.js';
 
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/esm/{sqm-text-span-view-4c17b8c9.js → sqm-text-span-view-738acfb3.js}

@@ -1,4 +1,4 @@
-import { h } from './index-b3a06de8.js';
+import { h } from './index-38ad4957.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 function TextSpanView(props, children) {

package/dist/esm/sqm-text-span.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { n as h } from './dom-context-hooks.module-63370afd.js';
+import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
+import { n as h } from './dom-context-hooks.module-50442785.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
+import { T as TextSpanView } from './sqm-text-span-view-738acfb3.js';
 
 const TextSpan = class {
   constructor(hostRef) {

package/dist/esm/{sqm-user-info-form-view-74dcb6d0.js → sqm-user-info-form-view-0ef6a58f.js}

@@ -1,7 +1,7 @@
-import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-5d501632.js';
+import { h } from './index-38ad4957.js';
+import { i as intl } from './global-b2ee3a12.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { f as formatErrorMessage, L as LoadingView, F as FORM_STEPS, v as validateBillingField } from './data-4a551ba6.js';
+import { f as formatErrorMessage, L as LoadingView, F as FORM_STEPS, v as validateBillingField } from './data-a6752028.js';
 
 const style = {
   Description: {
@@ -1941,7 +1941,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
+      (states.isPartner || states.isUser) && (h("sqm-form-message", { loading: states.loading, type: "info" },
         h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         h("p", { part: "alert-description" }, intl.formatMessage({
           id: "isPartnerAlertDescription",

package/dist/esm/sqm-widget-verification-controller.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { b as browser, n as h, k as useState, f as useEffect } from './dom-context-hooks.module-63370afd.js';
-import { I as In, u as useCallback, i as isDemo } from './index.module-234e8f5e.js';
+import { r as registerInstance, h as h$1, c as Host } from './index-38ad4957.js';
+import { b as browser, n as h, k as useState, f as useEffect } from './dom-context-hooks.module-50442785.js';
+import { I as In, b as useCallback, i as isDemo } from './index.module-e266b4d7.js';
 import { a as VERIFICATION_PARENT_NAMESPACE } from './keys-406491dc.js';
 
 const debug = browser("sq:widget-verification");

package/dist/esm/sqm-widget-verification.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
-import { d as dist, J, I as In, h as En, X as Xe, i as isDemo } from './index.module-234e8f5e.js';
+import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
+import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-50442785.js';
+import { d as dist, J, I as In, q as En, X as Xe, i as isDemo } from './index.module-e266b4d7.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { e as extractProps, p as parseStates } from './extractProps-54064fb0.js';

package/dist/esm/{useChildElements-daf489b1.js → useChildElements-31ba3daf.js}

@@ -1,5 +1,5 @@
-import { k as useState, u as useMemo } from './dom-context-hooks.module-63370afd.js';
-import { _ } from './index.module-234e8f5e.js';
+import { k as useState, u as useMemo } from './dom-context-hooks.module-50442785.js';
+import { _ } from './index.module-e266b4d7.js';
 
 function useChildElements() {
   const host = _();

package/dist/esm/{useInstantAccessRegistration-89e7dfc8.js → useInstantAccessRegistration-1388dace.js}

@@ -1,7 +1,7 @@
-import { k as useState } from './dom-context-hooks.module-63370afd.js';
-import { L, v as vn } from './index.module-234e8f5e.js';
+import { k as useState } from './dom-context-hooks.module-50442785.js';
+import { L, v as vn } from './index.module-e266b4d7.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import { u as useRegistrationFormState } from './useRegistrationFormState-a9e156e6.js';
+import { u as useRegistrationFormState } from './useRegistrationFormState-0cee2d21.js';
 
 function useInstantAccessRegistration(props) {
   const locale = L();