@saasquatch/mint-components 2.1.0 → 2.1.1-1

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

@@ -2,41 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-require('./global-e862bfd4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const index = require('./index-8277cbb3.js');
+require('./global-0f8b1267.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-42d413d9.js');
 require('./cjs-1066ec21.js');
 require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-11cdf43b.js');
+require('./useReferralCodes-89c2b972.js');
 require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-322436c2.js');
-const GenericTableView = require('./GenericTableView-a9845e80.js');
-require('./useChildElements-966c9041.js');
-const luxon = require('./luxon-949beaf2.js');
-require('./sqm-text-span-view-7a61ae4c.js');
-const sqmCloseButtonView = require('./sqm-close-button-view-5e85ac51.js');
+const copyTextView = require('./copy-text-view-bb2c0ea7.js');
+require('./sqm-text-span-view-f274fdf2.js');
+const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-90cd89e3.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-020f661c.js');
+const GenericTableView = require('./GenericTableView-be5648e4.js');
+require('./useChildElements-89bc50a9.js');
+const luxon = require('./luxon-c1ad356a.js');
+const sqmCloseButtonView = require('./sqm-close-button-view-e9f2a454.js');
 require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-ace50780.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-1745d9a2.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-5c5e29b1.js');
-require('./utilities-9a0c5e91.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.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-4ccf89da.js');
-const ShadowViewAddon = require('./ShadowViewAddon-4753ff2d.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
-const sqmUserInfoFormView = require('./sqm-user-info-form-view-a61124db.js');
-const data = require('./data-62fc9ba5.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2006001f.js');
+const emailRegistrationView = require('./email-registration-view-306c8878.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-d90f8941.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-67fd7934.js');
+const sqmLogoutCurrentUserView = require('./sqm-logout-current-user-view-f330d641.js');
+const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-6616e3e0.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-20693e59.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-2b4b92da.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-bfdbb98d.js');
+require('./utilities-096934ea.js');
+const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-6b1acd90.js');
+require('./ErrorView-ee7b0f36.js');
+const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
+const ShadowViewAddon = require('./ShadowViewAddon-41b86f34.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
+const sqmUserInfoFormView = require('./sqm-user-info-form-view-93e996d6.js');
+const data = require('./data-e83f8a41.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-818d9e9a.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -5801,14 +5801,14 @@ const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxField
     ...defaultProps$1.content,
     errorMessage: "This checkbox must be checked to continue",
   } }))));
-const TermsAndConditions = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditions = createHookStory(() => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
     terms: (index.h("p", null,
       index.h("sqm-checkbox-field", null))),
   } }))));
-const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -5818,7 +5818,7 @@ const TermsAndConditionsCustomLabel = createHookStory(() => (index.h(ShadowViewA
       index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
       index.h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
   } }))));
-const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
+const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
   //@ts-ignore
   content: {
     ...defaultRegisterProps.content,
@@ -6367,7 +6367,7 @@ const defaultElements = {
     index.h("table", null, [...Array(10)].map(() => {
       return (index.h("tr", null,
         index.h("td", null,
-          index.h("sl-skeleton", null))));
+          index.h("sqm-skeleton", null))));
     })))),
 };
 const SlottedIntoComponent = () => {
@@ -6444,6 +6444,11 @@ 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,
@@ -6455,7 +6460,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         |";
@@ -6880,11 +6886,11 @@ const TelType = () => {
       fieldType: "tel",
     } })));
 };
-const RegistrationField = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationField = () => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
     formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6)),
   } })));
-const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
+const RegistrationFieldCustomLabel = () => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
     ...defaultRegisterProps$1.content,
     formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$6, { content: {
         ...defaultProps$6.content,
@@ -7036,19 +7042,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("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 6 },
-      index.h("sl-skeleton", null)))));
+      index.h("sqm-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 = {
@@ -7464,7 +7470,7 @@ const Empty$1 = () => {
   };
   return index.h(ShadowViewAddon.LeaderboardView, Object.assign({}, props));
 };
-const Loading$1 = () => {
+const Loading$2 = () => {
   const props = {
     states: {
       loading: true,
@@ -7933,7 +7939,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,
@@ -8481,7 +8487,7 @@ const defaultProps$a = {
 const Default$b = () => {
   return index.h("sqm-portal-change-marketing", null);
 };
-const Loading$2 = () => {
+const Loading$3 = () => {
   return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$a, { states: { ...defaultProps$a.states, loading: true } })));
 };
 const Error$4 = () => {
@@ -8505,7 +8511,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
 });
@@ -8654,7 +8660,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$3 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps));
+const Loading$4 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps));
 const Success$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, successProps));
 
 const ChangePassword = /*#__PURE__*/Object.freeze({
@@ -8664,7 +8670,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
   Open: Open,
   Error: Error$5,
   PaswordError: PaswordError,
-  Loading: Loading$3,
+  Loading: Loading$4,
   Success: Success$1
 });
 
@@ -8851,6 +8857,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: "",
@@ -9019,11 +9026,11 @@ const successProps$2 = {
     successAlertText: "An email has been sent with instructions to reset your password.",
   },
 };
-const Default$e = () => index.h(ShadowViewAddon.PortalForgotPasswordView, Object.assign({}, defaultProps$e));
+const Default$e = () => index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, defaultProps$e));
 const DemoDataTest = () => (index.h("sqm-portal-forgot-password", null));
-const ForgotPasswordWithError = () => (index.h(ShadowViewAddon.PortalForgotPasswordView, Object.assign({}, errorProps$4)));
-const ForgotPasswordLoading = () => (index.h(ShadowViewAddon.PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
-const ForgotPasswordSuccess = () => (index.h(ShadowViewAddon.PortalForgotPasswordView, Object.assign({}, successProps$2)));
+const ForgotPasswordWithError = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, errorProps$4)));
+const ForgotPasswordLoading = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, loadingProps$2)));
+const ForgotPasswordSuccess = () => (index.h(sqmPortalVerifyEmailView.PortalForgotPasswordView, Object.assign({}, successProps$2)));
 
 const PortalForgotPassword = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -9291,7 +9298,7 @@ const WithError = () => {
       states: { ...demoProps.states, error: "This is an error message" },
     } }));
 };
-const Loading$4 = () => {
+const Loading$5 = () => {
   return (index.h("sqm-portal-google-login", { demoData: {
       states: { ...demoProps.states, loading: true },
     } }));
@@ -9302,7 +9309,7 @@ const PortalGoogleLoginFormStories = /*#__PURE__*/Object.freeze({
   'default': GoogleLoginForm_stories,
   Default: Default$g,
   WithError: WithError,
-  Loading: Loading$4
+  Loading: Loading$5
 });
 
 const PortalLogin_stories = {
@@ -9364,7 +9371,7 @@ const googleProps = {
   },
 };
 const Default$h = () => (index.h("sqm-portal-login", { demoData: { ...defaultProps$h } }));
-const Text = () => index.h(ShadowViewAddon.PortalLoginView, Object.assign({}, defaultProps$h));
+const Text = () => index.h(sqmPortalVerifyEmailView.PortalLoginView, Object.assign({}, defaultProps$h));
 const IsGoogle = () => (index.h("sqm-portal-login", { demoData: { ...googleProps } }));
 const LoginWithError = () => (index.h("sqm-portal-login", { demoData: { ...errorProps$6 } }));
 const LoginLoading = () => (index.h("sqm-portal-login", { demoData: { ...loadingProps$4 } }));
@@ -9600,7 +9607,7 @@ const successProps$3 = {
 };
 const Default$i = () => 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$6 = () => 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));
@@ -9610,7 +9617,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
@@ -9714,9 +9721,9 @@ const slottedProps = {
       index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
   },
 };
-const Default$j = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$j));
-const RegisterWithError$1 = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, errorProps$8));
-const RegisterLoading$1 = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, loadingProps$6));
+const Default$j = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultProps$j));
+const RegisterWithError$1 = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, errorProps$8));
+const RegisterLoading$1 = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, loadingProps$6));
 const FieldsHidden = () => {
   return (index.h("sqm-portal-register", { demoData: {
       states: {
@@ -9729,8 +9736,8 @@ const FieldsHidden = () => {
       },
     } }));
 };
-const SlottedInputs = () => index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, slottedProps));
-const TermsAndConditions$3 = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultProps$j, { content: {
+const SlottedInputs = () => index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, slottedProps));
+const TermsAndConditions$3 = () => (index.h(sqmPortalVerifyEmailView.PortalRegisterView, Object.assign({}, defaultProps$j, { content: {
     ...defaultProps$j.content,
     terms: (index.h("p", null,
       "By signing up you agree to the",
@@ -10251,7 +10258,7 @@ const CenterAlign = () => {
 const RightAlign$1 = () => {
   return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { alignment: "right" }));
 };
-const Loading$6 = () => {
+const Loading$7 = () => {
   return index.h(sqmQrCodeView.QrCodeView, Object.assign({}, defaultProps$m, { loading: true }));
 };
 const Error$7 = () => {
@@ -10269,7 +10276,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
 });
@@ -10661,7 +10668,7 @@ const EmptyWithCustomTextAndImage = () => {
     shareCodes("shareCodes"),
     shareButtons("shareButtons")));
 };
-const Loading$7 = () => {
+const Loading$8 = () => {
   return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
     pagination("pagination"),
     shareCodes("shareCodes"),
@@ -10676,7 +10683,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     |              |";
@@ -11200,19 +11207,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("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null)))));
+      index.h("sqm-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",
@@ -12243,7 +12250,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$9 = () => StoryBase(ShadowViewAddon.loading);
 const Empty$3 = () => StoryBase(ShadowViewAddon.empty);
 
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
@@ -12265,7 +12272,7 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
   QueryError: QueryError,
   SuccessPromo: SuccessPromo,
   SuccessVariableAndStepped: SuccessVariableAndStepped,
-  Loading: Loading$8,
+  Loading: Loading$9,
   Empty: Empty$3
 });
 
@@ -12794,19 +12801,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("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null))),
+      index.h("sqm-skeleton", null))),
   index.h("sqm-table-row", null,
     index.h("sqm-table-cell", { colspan: 5 },
-      index.h("sl-skeleton", null)))));
+      index.h("sqm-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: {
@@ -15684,7 +15691,7 @@ const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
       initialiseLoading: true,
     },
   } }));
-const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
+const Loading$a = () => (index.h("sqm-code-verification", { demoData: {
     states: {
       ...defaultProps$q,
       loading: true,
@@ -15708,7 +15715,7 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
   'default': WidgetCodeVerification_stories,
   Default: Default$o,
   InitialLoading: InitialLoading,
-  Loading: Loading$9,
+  Loading: Loading$a,
   CodeResent: CodeResent,
   VerificationFailed: VerificationFailed
 });
@@ -15735,7 +15742,7 @@ const EmailIsPrefilled = () => (index.h("div", null,
         email: "test@example.com",
       },
     } })));
-const Loading$a = () => (index.h("sqm-email-verification", { demoData: {
+const Loading$b = () => (index.h("sqm-email-verification", { demoData: {
     states: {
       ...defaultProps$r,
       initialLoading: true,
@@ -15776,7 +15783,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,
@@ -17513,7 +17520,7 @@ const TaxForm = /*#__PURE__*/Object.freeze({
 const PayoutDetailsCard_stories = {
   title: "Components/Payout Details Card",
 };
-const Loading$b = () => {
+const Loading$c = () => {
   return (index.h("sqm-payout-details-card", { demoData: {
       states: {
         loading: true,
@@ -17553,7 +17560,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,
@@ -17576,7 +17583,7 @@ const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", {
 const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "VERIFICATION:FAILED" } } }));
 const W9ThresholdReached = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "OVER_W9_THRESHOLD" } } }));
 const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "HOLD" } } }));
-const Loading$c = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
+const Loading$d = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, loading: true } } }));
 const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, error: true } } }));
 const NewPayeeReview = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "NEW_PAYEE_REVIEW" } } }));
 const PaymentHoldOnChange = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$s, status: "PAYMENT_HOLD_ON_CHANGE" } } }));
@@ -17602,7 +17609,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,
@@ -17794,7 +17801,7 @@ const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistration
     backgroundColor: "aquamarine",
   },
 })));
-const Loading$d = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
+const Loading$e = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
   ...defaultProps$t,
   states: {
     error: "",
@@ -17834,7 +17841,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
@@ -18044,7 +18051,7 @@ const Disabled$3 = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.
       disabled: true,
     },
   } })));
-const Loading$e = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
+const Loading$f = () => (index.h(ShadowViewAddon.LeadDropdownFieldView, Object.assign({}, defaultProps$w, { states: {
     ...defaultProps$w.states,
     leadFormState: {
       ...defaultProps$w.states.leadFormState,
@@ -18068,7 +18075,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   Multiple: Multiple,
   WithError: WithError$2,
   Disabled: Disabled$3,
-  Loading: Loading$e,
+  Loading: Loading$f,
   WithInitialValue: WithInitialValue$1
 });
 
@@ -18123,6 +18130,31 @@ const LeadCheckboxField = /*#__PURE__*/Object.freeze({
   CustomError: CustomError$3
 });
 
+const Skeleton_stories = {
+  title: "Components/Skeleton",
+};
+const Default$v = () => {
+  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$v,
+  CustomWidth: CustomWidth,
+  CustomHeight: CustomHeight,
+  CustomWidthAndHeight: CustomWidthAndHeight$1
+});
+
 const UserInfoFormView_stories = {
   title: "Components/User Info Form View",
 };
@@ -18266,7 +18298,7 @@ const baseProps = {
     phoneCountryRef: { current: null },
   },
 };
-const Default$v = () => {
+const Default$w = () => {
   return index.h(sqmUserInfoFormView.UserInfoFormView, Object.assign({}, baseProps));
 };
 const WithPrefilledData = () => {
@@ -18288,7 +18320,7 @@ const WithPrefilledData = () => {
       },
     } })));
 };
-const Loading$f = () => {
+const Loading$g = () => {
   return (index.h(sqmUserInfoFormView.UserInfoFormView, Object.assign({}, baseProps, { states: {
       ...baseProps.states,
       loading: true,
@@ -18450,9 +18482,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,
@@ -21153,6 +21185,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
   TaxAndCashRewardsTableCell,
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-require('./index.module-4f54e412.js');
-const reRender = require('./re-render-d516138a.js');
+const index = require('./index-8277cbb3.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+require('./index.module-42d413d9.js');
+const reRender = require('./re-render-69bde9ee.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a43a63b4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const index = require('./index-8277cbb3.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-42d413d9.js');
 const utils = require('./utils-6847bc06.js');
-const reRender = require('./re-render-d516138a.js');
-const useChildElements = require('./useChildElements-966c9041.js');
+const reRender = require('./re-render-69bde9ee.js');
+const useChildElements = require('./useChildElements-89bc50a9.js');
 
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.