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

package/dist/cjs/sqm-portal-profile.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-94f36ad7.js');
+require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./sqm-text-span-view-7a61ae4c.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-f74b8d6c.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-5c5e29b1.js');
 const utilities = require('./utilities-9a0c5e91.js');
 
 const GET_USER = index_module.dist.gql `

package/dist/cjs/{sqm-qr-code-view-a2889aee.js → sqm-qr-code-view-4ccf89da.js}

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

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

@@ -10,7 +10,7 @@ const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 const useReferralCodes = require('./useReferralCodes-11cdf43b.js');
 require('./ErrorView-3f91e5ab.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-a2889aee.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
 
 const ShareLinkQuery = index_module.dist.gql `
   query shareLink($programId: ID, $engagementMedium: UserEngagementMedium!) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -216,7 +216,7 @@ function LoadingSlot() {
   return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sqm-skeleton", null))));
+  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sl-skeleton", null))));
 }
 function useReferralTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -333,7 +333,7 @@ function LoadingSlot() {
   return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sqm-skeleton", null))));
+  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 5 }, index.h("sl-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-94f36ad7.js');
+require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 require('./cjs-1066ec21.js');
@@ -19,26 +19,26 @@ require('./sqm-text-span-view-7a61ae4c.js');
 const sqmCloseButtonView = require('./sqm-close-button-view-5e85ac51.js');
 require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-ace50780.js');
-const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-c0123bfa.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-dca40eb4.js');
 const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-6a1e63de.js');
 const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-b61c8bdf.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-de90ef03.js');
 const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-4e88f774.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-d968178a.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-1745d9a2.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-69a4b615.js');
 const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-f74b8d6c.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-5c5e29b1.js');
 require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 require('./ErrorView-3f91e5ab.js');
-const sqmQrCodeView = require('./sqm-qr-code-view-a2889aee.js');
-const ShadowViewAddon = require('./ShadowViewAddon-7066fae7.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
+const ShadowViewAddon = require('./ShadowViewAddon-ae3a32c3.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-d39b895d.js');
-const utils = require('./utils-5ecfecd9.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6983eaa1.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-659a139c.js');
+const utils = require('./utils-4eb18a29.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2006001f.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -6369,7 +6369,7 @@ const defaultElements = {
     index.h("table", null, [...Array(10)].map(() => {
       return (index.h("tr", null,
         index.h("td", null,
-          index.h("sqm-skeleton", null))));
+          index.h("sl-skeleton", null))));
     })))),
 };
 const SlottedIntoComponent = () => {
@@ -6446,11 +6446,6 @@ const WarningAlertTransparent = () => (index.h("sqm-form-message", { type: "warn
 const InfoAlertTransparent = () => (index.h("sqm-form-message", { type: "info", transparent: true },
   index.h("p", { part: "alert-title" }, "This is the title"),
   index.h("p", { part: "alert-description" }, "This is the description")));
-const Loading$1 = () => {
-  return (index.h("sqm-form-message", { type: "success", loading: true },
-    index.h("p", { part: "alert-title" }, "This is the title"),
-    index.h("p", { part: "alert-description" }, "This is the description")));
-};
 
 const FormMessage = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6462,8 +6457,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         |";
@@ -7044,19 +7038,19 @@ const InvoiceTable_stories = {
 const loadingElement = (index.h("div", { slot: "loading", style: { display: "contents" } },
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sqm-skeleton", null)))));
+      index.h("sl-skeleton", null)))));
 const emptyElement = (index.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 = {
@@ -7472,7 +7466,7 @@ const Empty$1 = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
-const Loading$2 = () => {
+const Loading$1 = () => {
   const props = {
     states: {
       loading: true,
@@ -7941,7 +7935,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,
@@ -8489,7 +8483,7 @@ const defaultProps$a = {
 const Default$b = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
-const Loading$3 = () => {
+const Loading$2 = () => {
   return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
 };
 const Error$4 = () => {
@@ -8513,7 +8507,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
 });
@@ -8662,7 +8656,7 @@ const Default$c = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object
 const Open = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, openProps));
 const Error$5 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$2));
 const PaswordError = () => (index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
-const Loading$4 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps));
+const Loading$3 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps));
 const Success$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, successProps));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
@@ -8672,7 +8666,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
   Open: Open,
   Error: Error$5,
   PaswordError: PaswordError,
-  Loading: Loading$4,
+  Loading: Loading$3,
   Success: Success$1
 });
 
@@ -8859,7 +8853,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: "",
@@ -9564,7 +9557,7 @@ const successProps$3 = {
 };
 const Default$h = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$i));
 const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
-const Loading$5 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$5));
+const Loading$4 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$5));
 const Disabled = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
 const Error$6 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$7));
 const Success$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps$3));
@@ -9574,7 +9567,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
@@ -10215,7 +10208,7 @@ const CenterAlign = () => {
 const RightAlign$1 = () => {
   return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { alignment: "right" }));
 };
-const Loading$6 = () => {
+const Loading$5 = () => {
   return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { loading: true }));
 };
 const Error$7 = () => {
@@ -10233,7 +10226,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
 });
@@ -10625,7 +10618,7 @@ const EmptyWithCustomTextAndImage = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
-const Loading$7 = () => {
+const Loading$6 = () => {
   return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
     pagination("pagination"),
     shareCodes("shareCodes"),
@@ -10640,7 +10633,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     |              |";
@@ -11164,19 +11157,19 @@ const ReferralTable_stories = {
 const loadingElement$1 = (index.h("div", { slot: "loading", style: { display: "contents" } },
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null)))));
+      index.h("sl-skeleton", null)))));
 const emptyElement$1 = (index.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",
@@ -11905,7 +11898,7 @@ const RedemptionError = () => StoryBase(ShadowViewAddon.redemptionError);
 const QueryError = () => StoryBase(ShadowViewAddon.queryError);
 const SuccessPromo = () => StoryBase(ShadowViewAddon.success);
 const SuccessVariableAndStepped = () => StoryBase(ShadowViewAddon.successVariable);
-const Loading$8 = () => StoryBase(ShadowViewAddon.loading);
+const Loading$7 = () => StoryBase(ShadowViewAddon.loading);
 const Empty$3 = () => StoryBase(ShadowViewAddon.empty);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -11927,7 +11920,7 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   QueryError: QueryError,
   SuccessPromo: SuccessPromo,
   SuccessVariableAndStepped: SuccessVariableAndStepped,
-  Loading: Loading$8,
+  Loading: Loading$7,
   Empty: Empty$3
 });
 
@@ -12539,19 +12532,19 @@ const RewardsTable_stories = {
 const loadingElement$2 = (index.h("div", { slot: "loading", style: { display: "contents" } },
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null))),
+      index.h("sl-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sqm-skeleton", null)))));
+      index.h("sl-skeleton", null)))));
 const emptyElement$2 = (index.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: {
@@ -15137,7 +15130,7 @@ const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
       initialiseLoading: true,
     },
   } }));
-const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
+const Loading$8 = () => (index.h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$p,
       loading: true,
@@ -15161,7 +15154,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetCodeVerification_stories,
   Default: Default$n,
   InitialLoading: InitialLoading,
-  Loading: Loading$9,
+  Loading: Loading$8,
   CodeResent: CodeResent,
   VerificationFailed: VerificationFailed
 });
@@ -15188,7 +15181,7 @@ const EmailIsPrefilled = () => (index.h("div", null,
         email: "test@example.com",
       },
     } })));
-const Loading$a = () => (index.h("sqm-email-verification", { demoData: {
+const Loading$9 = () => (index.h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$q,
       initialLoading: true,
@@ -15229,7 +15222,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,
@@ -16962,7 +16955,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
 const PayoutDetailsCard_stories = {
   title: "Components/Payout Details Card",
 };
-const Loading$b = () => {
+const Loading$a = () => {
   return (index.h("sqm-payout-details-card", { demoData: {
       states: {
         loading: true,
@@ -17002,7 +16995,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,
@@ -17025,7 +17018,7 @@ const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", {
 const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "VERIFICATION:FAILED" } } }));
 const W9ThresholdReached = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "OVER_W9_THRESHOLD" } } }));
 const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "HOLD" } } }));
-const Loading$c = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, loading: true } } }));
+const Loading$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, loading: true } } }));
 const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, error: true } } }));
 const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "NEW_PAYEE_REVIEW" } } }));
 const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$r, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
@@ -17051,7 +17044,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,
@@ -17243,7 +17236,7 @@ const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistration
     backgroundColor: "aquamarine",
   },
 })));
-const Loading$d = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
+const Loading$c = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
   ...defaultProps$s,
   states: {
     error: "",
@@ -17283,7 +17276,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
@@ -17493,7 +17486,7 @@ const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.
       disabled: true,
     },
   } })));
-const Loading$e = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
+const Loading$d = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$v, { states: {
     ...defaultProps$v.states,
     leadFormState: {
       ...defaultProps$v.states.leadFormState,
@@ -17517,7 +17510,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   Multiple: Multiple,
   WithError: WithError$1,
   Disabled: Disabled$3,
-  Loading: Loading$e,
+  Loading: Loading$d,
   WithInitialValue: WithInitialValue$1
 });
 
@@ -17572,31 +17565,6 @@ const LeadCheckboxField = /*#__PURE__*/Object.freeze({
   CustomError: CustomError$3
 });
 
-const Skeleton_stories = {
-  title: "Components/Skeleton",
-};
-const Default$u = () => {
-  return index.h("sqm-skeleton", null);
-};
-const CustomWidth = () => {
-  return index.h("sqm-skeleton", { width: "100px" });
-};
-const CustomHeight = () => {
-  return index.h("sqm-skeleton", { height: "100px" });
-};
-const CustomWidthAndHeight$1 = () => {
-  return index.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 () {
@@ -20283,7 +20251,6 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
-  Skeleton,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/cjs/{useLeadFormState-f8b33c07.js → useLeadFormState-91999606.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const JSS = require('./JSS-8503a151.js');

package/dist/cjs/{utils-5ecfecd9.js → utils-4eb18a29.js}

@@ -1,43 +1,55 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const JSS = require('./JSS-8503a151.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 = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 const LoadingView = () => {
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
-    index.h("sqm-skeleton", { width: "45%", height: "40px !important" }),
+    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
     index.h("div", { class: sheet.classes.HeaderContainer },
-      index.h("sqm-skeleton", { width: "15%" }),
-      index.h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "15%" }),
-    index.h("sqm-skeleton", { width: "80px", height: "30px !important" })));
+      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    index.h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
 };
 
 function validTaxDocument(requiredType) {

package/dist/collection/collection-manifest.json

@@ -107,7 +107,6 @@
     "./components/sqm-share-button/sqm-share-button.js",
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
-    "./components/sqm-skeleton/sqm-skeleton.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/BrandSelector.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile-view.js

@@ -13,7 +13,7 @@ const EditProfileView = (props) => {
         } }, text.editprofileheader),
       h("form", { class: "FormWrapper", onSubmit: callbacks.onSubmit },
         h("div", { class: "FormSection" },
-          states.formState.error && (h("sqm-form-message", { loading: states.loading, type: "error", exportparts: "erroralert-icon" },
+          states.formState.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
             h("div", { part: "erroralert-text" }, states.formState.error))),
           h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: states.formState.firstName, onInput: callbacks.onChange, label: text.firstnametext, disabled: states.loading }, (errors.firstName && errors.firstName.status !== "valid"
             ? { class: "ErrorStyles", helpText: text.fieldEmptyText }