@saasquatch/mint-components 1.15.0-67 → 1.15.0-69

package/dist/cjs/{sqm-big-stat_42.cjs.entry.js → sqm-big-stat_43.cjs.entry.js}

@@ -18,12 +18,14 @@ const useChildElements = require('./useChildElements-966c9041.js');
 require('./luxon-949beaf2.js');
 require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
+const emailRegistrationView = require('./email-registration-view-ace50780.js');
 const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-08bcb487.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const usePortalLogin = require('./usePortalLogin-6aa864ef.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-9a0c5e91.js');
-const ShadowViewAddon = require('./ShadowViewAddon-f06fc674.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f04e82d2.js');
 require('./sqm-portal-container-view-07e4343f.js');
 const usePayoutStatus = require('./usePayoutStatus-3b34dab1.js');
 
@@ -466,7 +468,7 @@ const BrandComponent = class {
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     function getCss(brandColor) {
       if (brandColor) {
         try {
@@ -477,8 +479,9 @@ const BrandComponent = class {
       return undefined;
     }
     const brandingConfigFont = (_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.brandFont;
-    const css = (_c = getCss(this.brandColor)) !== null && _c !== void 0 ? _c : "";
-    const sanitizedFont = ((_d = this.brandFont) !== null && _d !== void 0 ? _d : "Nunito Sans").trim() || undefined;
+    const css = ((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.brandColor) ? ""
+      : (_e = getCss(this.brandColor)) !== null && _e !== void 0 ? _e : "";
+    const sanitizedFont = ((_f = this.brandFont) !== null && _f !== void 0 ? _f : "Nunito Sans").trim() || undefined;
     domContextHooks_module.useEffect(() => {
       if (!sanitizedFont || brandingConfigFont) {
         // Nothing required in default case.
@@ -1556,6 +1559,10 @@ const Hero = class {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
+    /**
+     * @uiName Hide the column in mobile view (can only be used when two columns are present)
+     */
+    this.columnToHideInMobile = null;
     domContextHooks_module.h$1(this);
   }
   disconnectedCallback() { }
@@ -4033,6 +4040,161 @@ function useReferralIframeDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+const ReferredRegistration = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName First name field label
+     */
+    this.firstNameLabel = "First Name";
+    /**
+     * @uiName Last name field label
+     */
+    this.lastNameLabel = "Last Name";
+    /**
+     * @uiName Register button text
+     */
+    this.registerLabel = "Start Referring";
+    /**
+     * Require your participants to enter their first and last name.
+     *
+     * @uiName Include name fields
+     */
+    this.includeName = false;
+    /**
+     * @uiName Hide border
+     * @uiGroup Card style
+     */
+    this.hideBorder = false;
+    /**
+     * Display this message when a required field has not been filled out.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * Display this message when the given email is invalid.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.invalidEmailErrorMessage = "Please enter a valid email address";
+    /**
+     * Display this message when the form submission unexpectedly fails.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.networkErrorMessage = "There was a problem signing you in. Please wait a moment and try again. If this problem continues, contact Support for help resolving this issue.";
+    /**
+     * Display this message when there is suspected fraud.
+     *
+     * @uiName Fraud error message
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.fraudErrorMessage = "Our team will review this referral. If approved, you and your friend will receive your rewards. Need help? Reach out to our Support team.";
+    /**
+     * Display this message when there is suspected fraud.
+     *
+     * @uiName Fraud error message title
+     * @uiWidget textArea
+     * @uiGroup Error messages
+     */
+    this.fraudErrorMessageTitle = "Looks like you tried referring yourself";
+    /**
+     * @uiName Top padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingTop = "large";
+    /**
+     * @uiName Right padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingRight = "large";
+    /**
+     * @uiName Bottom padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingBottom = "large";
+    /**
+     * @uiName Left padding
+     * @uiGroup Card style
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     */
+    this.paddingLeft = "large";
+    /**
+     * @undocumented
+     * @uiType boolean
+     */
+    this.includeCookies = true;
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? useRegistrationDemo(this)
+      : useInstantAccessRegistration.useInstantAccessRegistration(this);
+    const content = {
+      fraudErrorMessage: this.fraudErrorMessage,
+      fraudErrorMessageTitle: this.fraudErrorMessageTitle,
+      emailLabel: this.emailLabel,
+      registerLabel: this.registerLabel,
+      firstNameLabel: this.firstNameLabel,
+      lastNameLabel: this.lastNameLabel,
+      includeName: this.includeName,
+      hideBorder: this.hideBorder,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      paddingTop: this.paddingTop,
+      paddingBottom: this.paddingBottom,
+      paddingLeft: this.paddingLeft,
+      paddingRight: this.paddingRight,
+      backgroundColor: this.backgroundColor,
+      // slots
+      topSlot: index.h("slot", { name: "top" }),
+      bottomSlot: index.h("slot", { name: "bottom" }),
+    };
+    return (index.h(emailRegistrationView.EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useRegistrationDemo(props) {
+  const onSubmit = () => {
+    index_module.setUserIdentity({
+      id: "referrer@example.com",
+      accountId: "referrer@example.com",
+      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
+    });
+  };
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        onSubmit();
+      },
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 // canvas-confetti v1.4.0 built on 2021-03-10T12:32:33.488Z
 var module$1 = {};
 
@@ -5861,6 +6023,7 @@ exports.sqm_program_explainer_step = ProgramExplainerStep;
 exports.sqm_program_menu = ProgramMenu;
 exports.sqm_referral_card = ReferralCard;
 exports.sqm_referral_iframe = SqmReferralIframe;
+exports.sqm_referred_registration = ReferredRegistration;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
 exports.sqm_share_button = ShareButton;

package/dist/cjs/sqm-form-message.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-a43a63b4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 
-const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error::part(icon){color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning::part(icon){color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success::part(icon){color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info::part(icon){color:var(--sqm-informative-color-icon);font-size:24px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";
+const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error::part(alert-icon){color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning::part(alert-icon){color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success::part(alert-icon){color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info::part(alert-icon){color:var(--sqm-informative-color-icon);font-size:24px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";
 
 const FormMessage = class {
   constructor(hostRef) {

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

@@ -482,7 +482,7 @@ const ReferralTableRewardsCell = class {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-informative-color-icon)",
-          color: "var(--sqm-informative-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       DangerBadge: {
@@ -492,7 +492,7 @@ const ReferralTableRewardsCell = class {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-danger-color-icon)",
-          color: "var(--sqm-danger-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       WarningBadge: {
@@ -502,7 +502,7 @@ const ReferralTableRewardsCell = class {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-warning-color-icon)",
-          color: "var(--sqm-warning-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       SuccessBadge: {
@@ -512,7 +512,7 @@ const ReferralTableRewardsCell = class {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-success-color-icon)",
-          color: "var(--sqm-success-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
     };
@@ -756,7 +756,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-informative-color-icon)",
-      color: "var(--sqm-informative-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   DangerBadge: {
@@ -767,7 +767,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-danger-color-icon)",
-      color: "var(--sqm-danger-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   WarningBadge: {
@@ -778,7 +778,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-warning-color-icon)",
-      color: "var(--sqm-warning-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   SuccessBadge: {
@@ -789,7 +789,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-success-color-icon)",
-      color: "var(--sqm-success-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
 };

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

@@ -800,7 +800,7 @@ const style$1 = {
       textAlign: "center",
       whiteSpace: "pre-line",
       background: "var(--sqm-informative-color-icon)",
-      color: "var(--sqm-informative-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   DangerBadge: {
@@ -810,7 +810,7 @@ const style$1 = {
       textAlign: "center",
       whiteSpace: "pre-line",
       background: "var(--sqm-danger-color-icon)",
-      color: "var(--sqm-danger-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   WarningBadge: {
@@ -820,7 +820,7 @@ const style$1 = {
       textAlign: "center",
       whiteSpace: "pre-line",
       background: "var(--sqm-warning-color-icon)",
-      color: "var(--sqm-warning-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   SuccessBadge: {
@@ -830,7 +830,7 @@ const style$1 = {
       textAlign: "center",
       whiteSpace: "pre-line",
       background: "var(--sqm-success-color-icon)",
-      color: "var(--sqm-success-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   Date: {

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

@@ -33,7 +33,7 @@ require('./utilities-9a0c5e91.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25eb2099.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-0c3b2f48.js');
-const ShadowViewAddon = require('./ShadowViewAddon-f06fc674.js');
+const ShadowViewAddon = require('./ShadowViewAddon-f04e82d2.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-eb18813f.js');
 const utils = require('./utils-7bcbf319.js');
@@ -6715,6 +6715,17 @@ const MinHeight = () => {
   };
   return index.h(ShadowViewAddon.HeroView, Object.assign({}, props));
 };
+const InstantAccessLoggedOutView = () => {
+  return (index.h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 2, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "var(--sqm-portal-background)", columnToHideInMobile: "primary" },
+    index.h("sqm-referred-registration", { slot: "secondary-column", "register-label": "Get $50 off", "padding-bottom": "small", "padding-left": "x-large", "padding-right": "x-large", "padding-top": "small" },
+      index.h("sqm-titled-section", { "text-align": "center", "label-margin": "small", padding: "none", slot: "top" },
+        index.h("h1", { slot: "label" }, "You got $50 off thanks to a friend!"),
+        index.h("p", { slot: "content" },
+          index.h("span", null, "Use this reward to get $50 off your next purchase."))),
+      index.h("div", { slot: "bottom" },
+        index.h("p", { style: { textAlign: "center" } }, "*Valid on purchases of $75 or more"),
+        index.h("sqm-portal-footer", { slot: "footer", "show-powered-by": "true", "padding-bottom": "none", "padding-left": "none", "padding-right": "none", "padding-top": "none", "hide-support-text": true, "terms-text": "Terms And Conditions", "terms-link": "https://example.com" })))));
+};
 
 const Hero = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6729,7 +6740,8 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginNoPadding: TwoColumnLoginNoPadding,
   TwoColumnLoginReverseWrap: TwoColumnLoginReverseWrap,
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement,
-  MinHeight: MinHeight
+  MinHeight: MinHeight,
+  InstantAccessLoggedOutView: InstantAccessLoggedOutView
 });
 
 const scenario$8 = "@author:kutay\n@owner:kutay\nFeature: Image\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the image component\n\n\t@motivating\n\t@ui\n\tScenario: Image is displayed from URL\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tThen the image is displayed\n\t\tAnd it is centered\n\n\t@motivating\n\t@ui\n\tScenario Outline: Images can be aligned left, center or right\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"align\" has <value>\n\t\tThen the image is displayed\n\t\tAnd it is aligned to the <value>\n\t\tExamples:\n\t\t\t| value  |\n\t\t\t| left   |\n\t\t\t| center |\n\t\t\t| right  |\n\n\t@motivating\n\t@ui\n\tScenario: Image background can be assigned a color\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"background-color\" is provided a color\n\t\tThen the image is displayed\n\t\tAnd the background is the provided color\n\n\t@motivating\n\t@ui\n\tScenario: Image minimum height can be constrained\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided\n\t\tAnd prop \"min-height\" is given a minimum value\n\t\tThen the image is displayed\n\t\tAnd the container size changes\n\t\tThen the image does not shrink below its minimum height";

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

@@ -88,12 +88,18 @@ const customFieldsQuery = (_programId, locale, fieldName, goalId) => {
     };
   });
 };
-const referralsMonthQuery = (programId) => {
+const referralsMonthQuery = (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_month",
   };
   return debugQuery(gql `

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

@@ -15,7 +15,7 @@ export class BrandComponent {
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     function getCss(brandColor) {
       if (brandColor) {
         try {
@@ -26,8 +26,9 @@ export class BrandComponent {
       return undefined;
     }
     const brandingConfigFont = (_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.brandFont;
-    const css = (_c = getCss(this.brandColor)) !== null && _c !== void 0 ? _c : "";
-    const sanitizedFont = ((_d = this.brandFont) !== null && _d !== void 0 ? _d : "Nunito Sans").trim() || undefined;
+    const css = ((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.brandColor) ? ""
+      : (_e = getCss(this.brandColor)) !== null && _e !== void 0 ? _e : "";
+    const sanitizedFont = ((_f = this.brandFont) !== null && _f !== void 0 ? _f : "Nunito Sans").trim() || undefined;
     useEffect(() => {
       if (!sanitizedFont || brandingConfigFont) {
         // Nothing required in default case.

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

@@ -11,7 +11,7 @@ sl-alert::part(base) {
   font-size: 14px;
 }
 
-.Error::part(icon) {
+.Error::part(alert-icon) {
   color: var(--sqm-danger-color-icon);
   font-size: 24px;
 }
@@ -22,7 +22,7 @@ sl-alert::part(base) {
   border-color: var(--sqm-warning-color-border);
 }
 
-.Warning::part(icon) {
+.Warning::part(alert-icon) {
   color: var(--sqm-warning-color-icon);
   font-size: 24px;
 }
@@ -33,7 +33,7 @@ sl-alert::part(base) {
   border-color: var(--sqm-success-color-border);
 }
 
-.Success::part(icon) {
+.Success::part(alert-icon) {
   color: var(--sqm-success-color-icon);
   font-size: 24px;
 }
@@ -44,7 +44,7 @@ sl-alert::part(base) {
   border-color: var(--sqm-informative-color-border);
 }
 
-.Info::part(icon) {
+.Info::part(alert-icon) {
   color: var(--sqm-informative-color-icon);
   font-size: 24px;
 }

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

@@ -196,3 +196,14 @@ export const MinHeight = () => {
   };
   return h(HeroView, Object.assign({}, props));
 };
+export const InstantAccessLoggedOutView = () => {
+  return (h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 2, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "var(--sqm-portal-background)", columnToHideInMobile: "primary" },
+    h("sqm-referred-registration", { slot: "secondary-column", "register-label": "Get $50 off", "padding-bottom": "small", "padding-left": "x-large", "padding-right": "x-large", "padding-top": "small" },
+      h("sqm-titled-section", { "text-align": "center", "label-margin": "small", padding: "none", slot: "top" },
+        h("h1", { slot: "label" }, "You got $50 off thanks to a friend!"),
+        h("p", { slot: "content" },
+          h("span", null, "Use this reward to get $50 off your next purchase."))),
+      h("div", { slot: "bottom" },
+        h("p", { style: { textAlign: "center" } }, "*Valid on purchases of $75 or more"),
+        h("sqm-portal-footer", { slot: "footer", "show-powered-by": "true", "padding-bottom": "none", "padding-left": "none", "padding-right": "none", "padding-top": "none", "hide-support-text": true, "terms-text": "Terms And Conditions", "terms-link": "https://example.com" })))));
+};

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

@@ -88,6 +88,9 @@ export function HeroView(props) {
       minHeight: `${states.minHeight}px`,
       display: "block",
     },
+    HideColumn: {
+      "@media screen and (max-width: 1023px)": { display: "none" },
+    },
     SingleColumnContainer: {
       background: `no-repeat center/cover ${parseBackground(states.background)}`,
       minHeight: `${states.minHeight}px`,
@@ -120,11 +123,16 @@ export function HeroView(props) {
   
 `;
   // NOTE: Spacing on the columns is controlled on the slots itself. For example using inline styling
+  console.log("column to hide in mobile is ", states.columnToHideInMobile);
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
     states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
-      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "primary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.primaryColumn),
+      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "secondary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }

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

@@ -45,6 +45,10 @@ export class Hero {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
+    /**
+     * @uiName Hide the column in mobile view (can only be used when two columns are present)
+     */
+    this.columnToHideInMobile = null;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -210,6 +214,27 @@ export class Hero {
       "attribute": "wrap-direction",
       "reflect": false,
       "defaultValue": "\"wrap\""
+    },
+    "columnToHideInMobile": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\" | null",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide the column in mobile view (can only be used when two columns are present)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-to-hide-in-mobile",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
 }

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

@@ -7,6 +7,9 @@ import { intl } from "../../global/global";
 import { getProps } from "../../utils/utils";
 import { PaginationView } from "./sqm-pagination-view";
 import { usePagination } from "./usePagination";
+/**
+ * @uiName Pagination
+ */
 export class Pagination {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -61,7 +61,7 @@ export class ReferralTableRewardsCell {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-informative-color-icon)",
-          color: "var(--sqm-informative-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       DangerBadge: {
@@ -71,7 +71,7 @@ export class ReferralTableRewardsCell {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-danger-color-icon)",
-          color: "var(--sqm-danger-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       WarningBadge: {
@@ -81,7 +81,7 @@ export class ReferralTableRewardsCell {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-warning-color-icon)",
-          color: "var(--sqm-warning-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
       SuccessBadge: {
@@ -91,7 +91,7 @@ export class ReferralTableRewardsCell {
           maxWidth: "170px",
           whiteSpace: "pre-line",
           background: "var(--sqm-success-color-icon)",
-          color: "var(--sqm-success-color-text)",
+          color: "var(--sl-color-white)",
         },
       },
     };

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -14,7 +14,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-informative-color-icon)",
-      color: "var(--sqm-informative-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   DangerBadge: {
@@ -25,7 +25,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-danger-color-icon)",
-      color: "var(--sqm-danger-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   WarningBadge: {
@@ -36,7 +36,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-warning-color-icon)",
-      color: "var(--sqm-warning-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
   SuccessBadge: {
@@ -47,7 +47,7 @@ const style = {
       maxWidth: "170px",
       whiteSpace: "pre-line",
       background: "var(--sqm-success-color-icon)",
-      color: "var(--sqm-success-color-text)",
+      color: "var(--sl-color-white)",
     },
   },
 };

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -110,13 +110,6 @@ export class ReferredRegistration {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiGroup Card style
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @undocumented
      * @uiType boolean
@@ -565,8 +558,7 @@ export class ReferredRegistration {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "includeCookies": {
       "type": "boolean",