@saasquatch/mint-components 2.0.0-9 → 2.0.0

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-8bba5b3a.js');
+require('./global-39cb0afc.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 require('./cjs-1066ec21.js');
-require('./utils-0d3ac0fb.js');
+require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
 require('./useReferralCodes-11cdf43b.js');
 require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-51c8ee5d.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');
@@ -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-340acad0.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-f1c46d4b.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-5518eb0d.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6b17e545.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
-const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8847804c.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-615e6975.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-845367bb.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-4ccf89da.js');
-const ShadowViewAddon = require('./ShadowViewAddon-016bebfd.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-ca86b9e5.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-e5f70b8b.js');
-const utils = require('./utils-83d125fa.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-06ed3632.js');
+const ShadowViewAddon = require('./ShadowViewAddon-646dec73.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-3e88d710.js');
+const utils = require('./utils-ac82f977.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6d388092.js');
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -5044,7 +5044,7 @@ const BaseRegistrationForm_stories = {
 };
 const defaultProps = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -5064,7 +5064,7 @@ const defaultProps = {
 const errorProps = {
   ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 const Default$1 = () => {
@@ -6432,6 +6432,20 @@ const InfoAlert = () => {
     index.h("p", { part: "alert-title" }, "This is the title"),
     index.h("p", { part: "alert-description" }, "This is the description")));
 };
+const SuccessAlertTransparent = () => {
+  return (index.h("sqm-form-message", { type: "success", transparent: true },
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
+};
+const ErrorAlertTransparent = () => (index.h("sqm-form-message", { type: "error", transparent: true },
+  index.h("p", { part: "alert-title" }, "This is the title"),
+  index.h("p", { part: "alert-description" }, "This is the description")));
+const WarningAlertTransparent = () => (index.h("sqm-form-message", { type: "warning", transparent: true },
+  index.h("p", { part: "alert-title" }, "This is the title"),
+  index.h("p", { part: "alert-description" }, "This is the description")));
+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 FormMessage = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6439,7 +6453,11 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlert: SuccessAlert,
   ErrorAlert: ErrorAlert,
   WarningAlert: WarningAlert,
-  InfoAlert: InfoAlert
+  InfoAlert: InfoAlert,
+  SuccessAlertTransparent: SuccessAlertTransparent,
+  ErrorAlertTransparent: ErrorAlertTransparent,
+  WarningAlertTransparent: WarningAlertTransparent,
+  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         |";
@@ -8232,6 +8250,7 @@ const NameFields_stories = {
 };
 const props = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: undefined,
     },
@@ -8243,6 +8262,7 @@ const props = {
 };
 const errorProps$1 = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: {
         firstName: "Cannot be empty",
@@ -8998,6 +9018,7 @@ const successProps$2 = {
   content: {
     loginText: "Login",
     messageSlot: "Enter your email below to receive a password reset link.",
+    successAlertText: "An email has been sent with instructions to reset your password.",
   },
 };
 const Default$e = () => index.h(ShadowViewAddon.PortalForgotPasswordView, Object.assign({}, defaultProps$e));
@@ -9171,6 +9192,7 @@ const defaultProps$g = {
     formData: (index.h("div", null,
       " ",
       index.h(ShadowViewAddon.NameFieldsView, { states: {
+          optional: false,
           registrationFormState: {
             validationErrors: undefined,
             disabled: true,
@@ -16850,16 +16872,12 @@ const TaxAndCashDashboardDisabled = () => {
       },
     } }));
 };
-// export const TaxAndCashTextProps = () => {
-//   return (
-//     <sqm-tax-and-cash
-//       demoData={{
-//         // @ts-ignore
-//         showTextProps: true,
-//       }}
-//     ></sqm-tax-and-cash>
-//   );
-// };
+const TaxAndCashTextProps = () => {
+  return (index.h("sqm-tax-and-cash", { demoData: {
+      // @ts-ignore
+      showTextProps: true,
+    } }));
+};
 
 const TaxForm = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -16929,7 +16947,8 @@ const TaxForm = /*#__PURE__*/Object.freeze({
   TaxAndCashDashboardLoading: TaxAndCashDashboardLoading,
   TaxAndCashDashboardWithLoadingError: TaxAndCashDashboardWithLoadingError,
   TaxAndCashDashboardWithGeneralError: TaxAndCashDashboardWithGeneralError,
-  TaxAndCashDashboardDisabled: TaxAndCashDashboardDisabled
+  TaxAndCashDashboardDisabled: TaxAndCashDashboardDisabled,
+  TaxAndCashTextProps: TaxAndCashTextProps
 });
 
 const PayoutDetailsCard_stories = {

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

@@ -5,13 +5,10 @@ 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 utils = require('./utils-0d3ac0fb.js');
+const utils = require('./utils-6847bc06.js');
 const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 
-// sl-tab-group {
-//   --sl-color-primary-500: var(--sqm-accent-color-icon);
-// }
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"

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

@@ -38,8 +38,9 @@ const WidgetVerificationController = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     /**
-     * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false } }
-     * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true } }
+     * @undocumented
+     * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false }, "disabled": "true" }
+     * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true }, "disabled": "true" }
      */
     this.stateController = "{}";
     domContextHooks_module.h$1(this);

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

@@ -6,9 +6,8 @@ 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 cjs = require('./cjs-1066ec21.js');
-const utils = require('./utils-0d3ac0fb.js');
-const parseStates = require('./parseStates-d1effc19.js');
-const extractProps = require('./extractProps-fd93ba62.js');
+const utils = require('./utils-6847bc06.js');
+const extractProps = require('./extractProps-e9c55ba8.js');
 const keys = require('./keys-cff24974.js');
 
 const USER_LOOKUP = index_module.dist.gql `
@@ -202,7 +201,7 @@ function useDemoWidgetVerificationInternal(props) {
     initialValue: undefined,
   });
   const setContext = index_module.En(keys.VERIFICATION_PARENT_NAMESPACE);
-  const states = parseStates.parseStates(props.stateController);
+  const states = extractProps.parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});

package/dist/cjs/{useLeadFormState-fd0445f9.js → useLeadFormState-b355759b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-8bba5b3a.js');
+const global = require('./global-39cb0afc.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/{usePortalLogin-353f776a.js → usePortalLogin-1c022d8d.js}

@@ -3,7 +3,7 @@
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const utils = require('./utils-0d3ac0fb.js');
+const utils = require('./utils-6847bc06.js');
 
 function usePortalLogin(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;

package/dist/cjs/{utils-0d3ac0fb.js → utils-6847bc06.js}

@@ -39,10 +39,6 @@ function sanitizeUrlPath(path) {
   cleanUrl.hash = url.hash;
   return cleanUrl;
 }
-function capitalizeFirstLetter(word) {
-  return word[0].toUpperCase() + word.slice(1);
-}
-console.log(capitalizeFirstLetter("warning"));
 
 exports.getMissingProps = getMissingProps;
 exports.getProps = getProps;

package/dist/cjs/{utils-83d125fa.js → utils-ac82f977.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-8bba5b3a.js');
+const global = require('./global-39cb0afc.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/collection/components/sqm-base-registration/BaseRegistrationForm.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 const defaultProps = {
   states: {
-    error: "",
+    validationErrors: {},
   },
   callbacks: {
     handleEmailSubmit: () => console.log("Submit!"),
@@ -25,7 +25,7 @@ const defaultProps = {
 const errorProps = {
   ...defaultProps,
   states: {
-    error: "Something went wrong. Please try again.",
+    validationErrors: { error: "Something went wrong. Please try again." },
   },
 };
 export const Default = () => {

package/dist/collection/components/sqm-base-registration/sqm-base-registration-form-view.js

@@ -37,6 +37,7 @@ sqm-portal-register {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function BaseRegistrationFormView(props) {
+  var _a, _b;
   const { states, content, callbacks } = props;
   return (h("div", { class: sheet.classes.Wrapper },
     h("style", { type: "text/css" },
@@ -44,9 +45,8 @@ export function BaseRegistrationFormView(props) {
       styleString),
     h(TextSpanView, { type: "h3" }, content.pageLabel),
     h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
-      states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
-        h("div", { part: "erroralert-text" }, props.states.error))),
-      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
+      content.formData,
+      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
           if (!value) {
             return content.requiredFieldErrorMessage;
           }
@@ -54,7 +54,13 @@ export function BaseRegistrationFormView(props) {
           if (!value.includes("@")) {
             return content.invalidEmailErrorMessage;
           }
-        } }),
+        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
+        class: sheet.classes.ErrorStyle,
+        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
+          content.requiredFieldErrorMessage,
+      }
+        : []))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
         h("sl-menu-divider", { style: { margin: "0" } }),

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -6,8 +6,6 @@ export function BigStatView(props) {
   const style = {
     Container: {
       display: "flex",
-      // height: "inherit",
-      // "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -120,12 +120,18 @@ const referralsMonthQuery = (programId, status) => {
     });
   });
 };
-const referralsWeekQuery = (programId) => {
+const referralsWeekQuery = (programId, status) => {
   const programFilter = programId === "classic"
     ? { programId_exists: false }
     : { programId_eq: programId };
+  const convertedFilter = status && status == "converted"
+    ? { dateConverted_exists: true }
+    : status && status == "started"
+      ? { dateConverted_exists: false }
+      : {};
   const filter = {
     ...programFilter,
+    ...convertedFilter,
     dateReferralStarted_timeframe: "this_week",
   };
   return debugQuery(gql `

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -8,7 +8,7 @@ import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
  * @uiName Form Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Checkbox Field - <sqm-checkbox-field checkbox-name="terms" checkbox-label="By signing up you agree to the {labelLink}" checkbox-label-link="https://example.com" checkbox-label-link-text="Terms and Conditions" error-message="Must be checked" ></sqm-checkbox-field>
  */

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -8,7 +8,7 @@ import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
  * @uiName Form Dropdown Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @slots [{"name":"", "title":"Drop Down Option"}]
  * @exampleGroup Microsite Components
  * @example Form Dropdown Field - <sqm-dropdown-field dropdown-label="Select an option" error-message="Select an option"><sl-menu-item value="option-1">Option 1</sl-menu-item><sl-menu-item value="option-2">Option 2</sl-menu-item><sl-menu-item value="option-3">Option 3</sl-menu-item></sqm-dropdown-field>

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -22,3 +22,17 @@ export const InfoAlert = () => {
     h("p", { part: "alert-title" }, "This is the title"),
     h("p", { part: "alert-description" }, "This is the description")));
 };
+export const SuccessAlertTransparent = () => {
+  return (h("sqm-form-message", { type: "success", transparent: true },
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
+};
+export const ErrorAlertTransparent = () => (h("sqm-form-message", { type: "error", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export const WarningAlertTransparent = () => (h("sqm-form-message", { type: "warning", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export 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")));

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -49,6 +49,13 @@ sl-alert::part(base) {
   font-size: 24px;
 }
 
+.Transparent::part(base) {
+  background-color: transparent;
+  border: none;
+  color: var(--sqm-text);
+  margin-left: -20px;
+}
+
 ::slotted(*) {
   margin: 0;
 }

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -7,27 +7,31 @@ import { Component, h, Prop, State } from "@stencil/core";
 export class FormMessage {
   constructor() {
     this.ignored = true;
+    /**
+     * Render the alert with transparent styles
+     */
+    this.transparent = false;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
     if (this.type === "error") {
-      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
+      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
         h("slot", null)));
     }
     else if (this.type === "info") {
-      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
+      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
     else if (this.type === "warning") {
-      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
+      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
         h("slot", null)));
     }
     else {
-      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
+      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
@@ -80,6 +84,24 @@ export class FormMessage {
       },
       "attribute": "icon",
       "reflect": false
+    },
+    "transparent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Render the alert with transparent styles"
+      },
+      "attribute": "transparent",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-hero/sqm-hero.js

@@ -122,13 +122,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Content background",
+            "text": "Splash image",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Content background color or image (for use in the left column)"
+        "text": "Splash image or background color (for use in the left column)"
       },
       "attribute": "background",
       "reflect": false
@@ -172,13 +172,13 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Splash image",
+            "text": "Content background",
             "name": "uiName"
           }, {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Splash image or background color (for use in the right column)"
+        "text": "Content background color or image (for use in the right column)"
       },
       "attribute": "secondary-background",
       "reflect": false

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -6,8 +6,8 @@ import { HeroImageView } from "./sqm-hero-image-view";
  * @uiName Hero Image
  * @validParents ["sqm-portal-container","sqm-brand", "div"]
  * @exampleGroup Common Components
- * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
- * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
+ * @example Two Column Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right"></sqm-hero-image>
+ * @example Overlay Hero Image - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export class HeroImage {
   constructor() {

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -8,7 +8,7 @@ import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
  * @uiName Form Input Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @exampleGroup Microsite Components
  * @example Form Input Field - <sqm-input-field input-label="Field Label" field-type="text" error-message="Cannot be empty"></sqm-input-field>
  */

package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js

@@ -7,7 +7,7 @@ import { CheckboxFieldView, } from "../sqm-checkbox-field/sqm-checkbox-field-vie
 import { useCheckboxField } from "../sqm-checkbox-field/useCheckboxField";
 /**
  * @uiName Marketing Emails Checkbox Field
- * @validParents ["sqm-portal-register","sqm-portal-registration-form"]
+ * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
  * @requiredFeatures ["MARKETING_EMAILS"]
  */
 export class MarketingEmailsCheckbox {

package/dist/collection/components/sqm-name-fields/NameFields.stories.js

@@ -9,6 +9,7 @@ export default {
 };
 const props = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: undefined,
     },
@@ -20,6 +21,7 @@ const props = {
 };
 const errorProps = {
   states: {
+    optional: false,
     registrationFormState: {
       validationErrors: {
         firstName: "Cannot be empty",

package/dist/collection/components/sqm-name-fields/sqm-name-fields-view.js

@@ -56,7 +56,7 @@ export function NameFieldsView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: true, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/firstName", type: "text", label: states.content.firstNameLabel, required: !states.optional, disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled) }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.initialData) === null || _e === void 0 ? void 0 : _e.firstName) ? {
       value: (_g = (_f = states.registrationFormState) === null || _f === void 0 ? void 0 : _f.initialData) === null || _g === void 0 ? void 0 : _g.firstName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) ? {
@@ -64,7 +64,7 @@ export function NameFieldsView(props) {
       helpText: (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.firstName) || "Cannot be empty",
     }
       : []))),
-    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: true, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", name: "/lastName", type: "text", label: states.content.lastNameLabel, required: !states.optional, disabled: ((_h = states.registrationFormState) === null || _h === void 0 ? void 0 : _h.loading) || ((_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.disabled) }, (((_l = (_k = states.registrationFormState) === null || _k === void 0 ? void 0 : _k.initialData) === null || _l === void 0 ? void 0 : _l.lastName) ? {
       value: (_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.lastName,
     }
       : {}), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.lastName) ? {