@saasquatch/mint-components 2.0.4-9 → 2.0.5-0

package/dist/esm/{sqm-qr-code-view-804b8bb6.js → sqm-qr-code-view-ea505213.js}

@@ -69,7 +69,11 @@ function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCodeText,
       return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
     }
     else if (loading) {
-      return h("sqm-skeleton", { height: "100px", width: "100px" });
+      return (h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
+          width: "100px",
+          height: "100px",
+          borderRadius: "0px !important",
+        } }));
     }
     else if (qrLink) {
       return (h("svg", { width: "100", height: "100" },

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

@@ -6,7 +6,7 @@ import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE } from './useReferralCodes-c2e809cf.js';
 import './ErrorView-bbf0a042.js';
-import { Q as QrCodeView } from './sqm-qr-code-view-804b8bb6.js';
+import { Q as QrCodeView } from './sqm-qr-code-view-ea505213.js';
 
 const ShareLinkQuery = dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1, g as getElement, c as Host } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { n as h, j as useReducer, u as useMemo, f as useEffect } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -212,7 +212,7 @@ function LoadingSlot() {
   return (h$1("slot", { name: "loading" }, h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null), h$1(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (h$1("sqm-table-row", null, h$1("sqm-table-cell", { colspan: 5 }, h$1("sqm-skeleton", null))));
+  return (h$1("sqm-table-row", null, h$1("sqm-table-cell", { colspan: 5 }, h$1("sl-skeleton", null))));
 }
 function useReferralTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/esm/sqm-rewards-table_9.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { b as browser, j as useReducer, f as useEffect, n as h$1, u as useMemo } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, J, H, L, w as wn, R as Rn, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -329,7 +329,7 @@ function LoadingSlot() {
   return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5 }, h("sqm-skeleton", null))));
+  return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 5 }, h("sl-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
-import './global-536c422d.js';
+import './global-58a69018.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, o as setProgramId, k as kn, d as dist, X as Xe } from './index.module-c9811a48.js';
 import './cjs-bdfb4486.js';
@@ -15,26 +15,26 @@ import './sqm-text-span-view-4c17b8c9.js';
 import { C as CloseButtonView } from './sqm-close-button-view-2fa57229.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-5c387852.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-81541e40.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-5a452423.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8bbe5fcf.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-5fb1a99e.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
 import { B as BaseRegistrationFormView } from './sqm-base-registration-form-view-9e97d8b4.js';
 import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-8bdc3804.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-9848caf1.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-e3aef106.js';
 import './utilities-72c07b09.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-804b8bb6.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, c as CheckboxFieldView, d as PortalRegisterView, 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 PortalForgotPasswordView, i as PortalFrameView, R as ReferralIframeView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as useShareButton, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-fe2896cb.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, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, c as CheckboxFieldView, d as PortalRegisterView, 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 PortalForgotPasswordView, i as PortalFrameView, R as ReferralIframeView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as useShareButton, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-78a1c35c.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 } from './IndirectTaxDetailsView-a7dd6e4c.js';
-import { t as taxTypeToName, L as LoadingView } from './utils-fafc712f.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-fa2488c9.js';
+import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView } from './IndirectTaxDetailsView-8dec05e4.js';
+import { t as taxTypeToName, L as LoadingView } from './utils-2695a43e.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d543d939.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -6365,7 +6365,7 @@ const defaultElements = {
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
         h("td", null,
-          h("sqm-skeleton", null))));
+          h("sl-skeleton", null))));
     })))),
 };
 const SlottedIntoComponent = () => {
@@ -6442,11 +6442,6 @@ 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,
@@ -6458,8 +6453,7 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlertTransparent: SuccessAlertTransparent,
   ErrorAlertTransparent: ErrorAlertTransparent,
   WarningAlertTransparent: WarningAlertTransparent,
-  InfoAlertTransparent: InfoAlertTransparent,
-  Loading: Loading$1
+  InfoAlertTransparent: InfoAlertTransparent
 });
 
 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         |";
@@ -7040,19 +7034,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("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null)))));
+      h("sl-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 = {
@@ -7468,7 +7462,7 @@ const Empty$1 = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-const Loading$2 = () => {
+const Loading$1 = () => {
   const props = {
     states: {
       loading: true,
@@ -7937,7 +7931,7 @@ const Leaderboard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': Leaderboard_stories,
   Empty: Empty$1,
-  Loading: Loading$2,
+  Loading: Loading$1,
   Essentials: Essentials,
   One: One,
   Five: Five,
@@ -8485,7 +8479,7 @@ const defaultProps$a = {
 const Default$b = () => {
   return h("sqm-portal-change-marketing", null);
 };
-const Loading$3 = () => {
+const Loading$2 = () => {
   return (h(ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
 };
 const Error$4 = () => {
@@ -8509,7 +8503,7 @@ const ChangeMarketing = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': ChangeMarketing_stories,
   Default: Default$b,
-  Loading: Loading$3,
+  Loading: Loading$2,
   Error: Error$4,
   Success: Success
 });
@@ -8658,7 +8652,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$4 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps));
+const Loading$3 = () => h(PortalChangePasswordView, Object.assign({}, loadingProps));
 const Success$1 = () => h(PortalChangePasswordView, Object.assign({}, successProps));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
@@ -8668,7 +8662,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
   Open: Open,
   Error: Error$5,
   PaswordError: PaswordError,
-  Loading: Loading$4,
+  Loading: Loading$3,
   Success: Success$1
 });
 
@@ -8855,7 +8849,6 @@ 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: "",
@@ -9560,7 +9553,7 @@ const successProps$3 = {
 };
 const Default$h = () => h(PortalProfileView, Object.assign({}, defaultProps$i));
 const DefaultNoCountry = () => h(PortalProfileView, Object.assign({}, noCountry));
-const Loading$5 = () => h(PortalProfileView, Object.assign({}, loadingProps$5));
+const Loading$4 = () => 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));
@@ -9570,7 +9563,7 @@ const PortalProfile = /*#__PURE__*/Object.freeze({
   'default': PortalProfile_stories,
   Default: Default$h,
   DefaultNoCountry: DefaultNoCountry,
-  Loading: Loading$5,
+  Loading: Loading$4,
   Disabled: Disabled,
   Error: Error$6,
   Success: Success$2
@@ -10211,7 +10204,7 @@ const CenterAlign = () => {
 const RightAlign$1 = () => {
   return h(QrCodeView, Object.assign({}, defaultProps$m, { alignment: "right" }));
 };
-const Loading$6 = () => {
+const Loading$5 = () => {
   return h(QrCodeView, Object.assign({}, defaultProps$m, { loading: true }));
 };
 const Error$7 = () => {
@@ -10229,7 +10222,7 @@ const QRCode = /*#__PURE__*/Object.freeze({
   LeftAlign: LeftAlign$1,
   CenterAlign: CenterAlign,
   RightAlign: RightAlign$1,
-  Loading: Loading$6,
+  Loading: Loading$5,
   Error: Error$7,
   DownloadError: DownloadError
 });
@@ -10621,7 +10614,7 @@ const EmptyWithCustomTextAndImage = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
-const Loading$7 = () => {
+const Loading$6 = () => {
   return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
     pagination("pagination"),
     shareCodes("shareCodes"),
@@ -10636,7 +10629,7 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
   WithPreviouslyCopiedCodeAndCustomColor: WithPreviouslyCopiedCodeAndCustomColor,
   Empty: Empty$2,
   EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
-  Loading: Loading$7
+  Loading: Loading$6
 });
 
 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     |              |";
@@ -11160,19 +11153,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("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null)))));
+      h("sl-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",
@@ -11901,7 +11894,7 @@ const RedemptionError = () => StoryBase(redemptionError);
 const QueryError = () => StoryBase(queryError);
 const SuccessPromo = () => StoryBase(success);
 const SuccessVariableAndStepped = () => StoryBase(successVariable);
-const Loading$8 = () => StoryBase(loading);
+const Loading$7 = () => StoryBase(loading);
 const Empty$3 = () => StoryBase(empty$1);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -11923,7 +11916,7 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   QueryError: QueryError,
   SuccessPromo: SuccessPromo,
   SuccessVariableAndStepped: SuccessVariableAndStepped,
-  Loading: Loading$8,
+  Loading: Loading$7,
   Empty: Empty$3
 });
 
@@ -12535,19 +12528,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("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null)))));
+      h("sl-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: {
@@ -15133,7 +15126,7 @@ const InitialLoading = () => (h("sqm-code-verification", { demoData: {
       initialiseLoading: true,
     },
   } }));
-const Loading$9 = () => (h("sqm-code-verification", { demoData: {
+const Loading$8 = () => (h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$p,
       loading: true,
@@ -15157,7 +15150,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetCodeVerification_stories,
   Default: Default$n,
   InitialLoading: InitialLoading,
-  Loading: Loading$9,
+  Loading: Loading$8,
   CodeResent: CodeResent,
   VerificationFailed: VerificationFailed
 });
@@ -15184,7 +15177,7 @@ const EmailIsPrefilled = () => (h("div", null,
         email: "test@example.com",
       },
     } })));
-const Loading$a = () => (h("sqm-email-verification", { demoData: {
+const Loading$9 = () => (h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$q,
       initialLoading: true,
@@ -15225,7 +15218,7 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetEmailVerification_stories,
   Default: Default$o,
   EmailIsPrefilled: EmailIsPrefilled,
-  Loading: Loading$a,
+  Loading: Loading$9,
   SaveLoading: SaveLoading,
   WithHeader: WithHeader$1,
   InvalidEmail: InvalidEmail,
@@ -16958,7 +16951,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
 const PayoutDetailsCard_stories = {
   title: "Components/Payout Details Card",
 };
-const Loading$b = () => {
+const Loading$a = () => {
   return (h("sqm-payout-details-card", { demoData: {
       states: {
         loading: true,
@@ -16998,7 +16991,7 @@ const PaypalPayout = () => {
 const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PayoutDetailsCard_stories,
-  Loading: Loading$b,
+  Loading: Loading$a,
   NextPayout: NextPayout,
   PayoutToday: PayoutToday,
   ThresholdPayout: ThresholdPayout,
@@ -17021,7 +17014,7 @@ const VerifyIdentityReviewInternal = () => (h("sqm-payout-status-alert", { demoD
 const VerifyIdentityFailedInternal = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:FAILED" } } }));
 const W9ThresholdReached = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "OVER_W9_THRESHOLD" } } }));
 const Hold = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "HOLD" } } }));
-const Loading$c = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, loading: true } } }));
+const Loading$b = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, loading: true } } }));
 const Error$b = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, error: true } } }));
 const NewPayeeReview = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "NEW_PAYEE_REVIEW" } } }));
 const PaymentHoldOnChange = () => (h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
@@ -17047,7 +17040,7 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
   VerifyIdentityFailedInternal: VerifyIdentityFailedInternal,
   W9ThresholdReached: W9ThresholdReached,
   Hold: Hold,
-  Loading: Loading$c,
+  Loading: Loading$b,
   Error: Error$b,
   NewPayeeReview: NewPayeeReview,
   PaymentHoldOnChange: PaymentHoldOnChange,
@@ -17239,7 +17232,7 @@ const BackgroundColor$2 = () => (h(EmailRegistrationView, Object.assign({}, {
     backgroundColor: "aquamarine",
   },
 })));
-const Loading$d = () => (h(EmailRegistrationView, Object.assign({}, {
+const Loading$c = () => (h(EmailRegistrationView, Object.assign({}, {
   ...defaultProps$s,
   states: {
     error: "",
@@ -17279,7 +17272,7 @@ const EmailRegistration = /*#__PURE__*/Object.freeze({
   WithSlots: WithSlots,
   NoBorder: NoBorder$1,
   BackgroundColor: BackgroundColor$2,
-  Loading: Loading$d,
+  Loading: Loading$c,
   Error: Error$c,
   FraudError: FraudError,
   EmptyEmailError: EmptyEmailError
@@ -17489,7 +17482,7 @@ const Disabled$3 = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProp
       disabled: true,
     },
   } })));
-const Loading$e = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const Loading$d = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
@@ -17513,7 +17506,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   Multiple: Multiple,
   WithError: WithError$1,
   Disabled: Disabled$3,
-  Loading: Loading$e,
+  Loading: Loading$d,
   WithInitialValue: WithInitialValue$1
 });
 
@@ -17568,31 +17561,6 @@ const LeadCheckboxField = /*#__PURE__*/Object.freeze({
   CustomError: CustomError$3
 });
 
-const Skeleton_stories = {
-  title: "Components/Skeleton",
-};
-const Default$u = () => {
-  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$u,
-  CustomWidth: CustomWidth,
-  CustomHeight: CustomHeight,
-  CustomWidthAndHeight: CustomWidthAndHeight$1
-});
-
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -20279,7 +20247,6 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
-  Skeleton,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm/{useLeadFormState-5a6188da.js → useLeadFormState-8d4b2620.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { k as useState, y } from './dom-context-hooks.module-63370afd.js';
 import { _ } from './index.module-c9811a48.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';

package/dist/esm/{utils-fafc712f.js → utils-2695a43e.js}

@@ -1,41 +1,53 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 
 const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "35px",
+    gap: "24px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const LoadingView = () => {
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("sqm-skeleton", { width: "45%", height: "40px !important" }),
+    h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
     h("div", { class: sheet.classes.HeaderContainer },
-      h("sqm-skeleton", { width: "15%" }),
-      h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "15%" }),
-    h("sqm-skeleton", { width: "80px", height: "30px !important" })));
+      h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
 };
 
 function validTaxDocument(requiredType) {