@saasquatch/mint-components 2.1.5-6 → 2.1.5-7

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-9d33658c.js');
+const reRender = require('./re-render-2ebec4aa.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-9d33658c.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-2ebec4aa.js');
+const useChildElements = require('./useChildElements-6b1f61c5.js');
 
 const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.

package/dist/cjs/{sqm-text-span-view-7a61ae4c.js → sqm-text-span-view-f274fdf2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
+const index = require('./index-8277cbb3.js');
 const JSS = require('./JSS-8503a151.js');
 
 function TextSpanView(props, children) {

package/dist/cjs/sqm-text-span.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');
+const index = require('./index-8277cbb3.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
 require('./JSS-8503a151.js');
-const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
+const sqmTextSpanView = require('./sqm-text-span-view-f274fdf2.js');
 
 const TextSpan = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-user-info-form-view-a61124db.js → sqm-user-info-form-view-96f0351e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const global = require('./global-e862bfd4.js');
+const index = require('./index-8277cbb3.js');
+const global = require('./global-ab5fc787.js');
 const JSS = require('./JSS-8503a151.js');
-const data = require('./data-62fc9ba5.js');
+const data = require('./data-ee577cc1.js');
 
 const style = {
   Description: {
@@ -1943,7 +1943,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { type: "info" },
+      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { loading: states.loading, type: "info" },
         index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         index.h("p", { part: "alert-description" }, global.intl.formatMessage({
           id: "isPartnerAlertDescription",

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

@@ -2,9 +2,9 @@
 
 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-9d33658c.js');
 const keys = require('./keys-cff24974.js');
 
 const debug = domContextHooks_module.browser("sq:widget-verification");

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

@@ -2,9 +2,9 @@
 
 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-9d33658c.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const extractProps = require('./extractProps-e9c55ba8.js');

package/dist/cjs/{useChildElements-966c9041.js → useChildElements-6b1f61c5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-08bcb487.js → useInstantAccessRegistration-1ba143b1.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-1a8a6507.js');
 
 function useInstantAccessRegistration(props) {
   const locale = index_module.L();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-a43a63b4.js');
-const global = require('./global-e862bfd4.js');
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const index = require('./index-8277cbb3.js');
+const global = require('./global-ab5fc787.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

package/dist/cjs/{usePayoutStatus-a81d05a2.js → usePayoutStatus-c812303d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";
 

package/dist/cjs/{usePortalRegistrationForm-8ed0d753.js → usePortalRegistrationForm-ae89c992.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-1a8a6507.js');
 
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.

package/dist/cjs/{useReferralCodes-11cdf43b.js → useReferralCodes-d78c563e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(

package/dist/cjs/{useReferralTable-d0c7097e.js → useReferralTable-b8414623.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-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 reRender = require('./re-render-d516138a.js');
-const useChildElements = require('./useChildElements-966c9041.js');
+const index = require('./index-8277cbb3.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
+const reRender = require('./re-render-2ebec4aa.js');
+const useChildElements = require('./useChildElements-6b1f61c5.js');
 
 const debug = domContextHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -254,7 +254,8 @@ function useReferralTable(props, emptyElement, loadingElement) {
   const user = index_module.J();
   const programIdContext = index_module.H();
   // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const resolvedProgramId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const programId = resolvedProgramId === "GLOBAL" ? null : resolvedProgramId;
   // If no program ID, shows all programs
   const referralFilter = programId
     ? programId === "classic"

package/dist/cjs/{useRegistrationFormState-bbee6e7b.js → useRegistrationFormState-1a8a6507.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 const REGISTRATION_FORM_STATE_CONTEXT_INTERNAL = "sq:registration-form-state-internal";

package/dist/cjs/{useVerificationEmail-9dd3997a.js → useVerificationEmail-c6363436.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {

package/dist/cjs/{utilities-9a0c5e91.js → utilities-15548f3e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
-const index_module = require('./index.module-4f54e412.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-9d33658c.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/collection-manifest.json

@@ -107,6 +107,7 @@
     "./components/sqm-share-button/sqm-share-button.js",
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
+    "./components/sqm-skeleton/sqm-skeleton.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/BrandSelector.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
@@ -142,6 +143,16 @@
         "sqm-referral-codes"
       ]
     },
+    {
+      "components": [
+        "sqm-portal-forgot-password",
+        "sqm-portal-google-login",
+        "sqm-portal-login",
+        "sqm-portal-register",
+        "sqm-portal-registration-form",
+        "sqm-portal-verify-email"
+      ]
+    },
     {
       "components": [
         "sqm-rewards-table",

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

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

package/dist/collection/components/sqm-empty/EmptyState.stories.js

@@ -21,7 +21,7 @@ const defaultElements = {
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
         h("td", null,
-          h("sl-skeleton", null))));
+          h("sqm-skeleton", null))));
     })))),
 };
 export const SlottedIntoComponent = () => {

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

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
 import { intl } from "../../global/global";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 export function EmptyStateView(props) {
   const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
   return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
-    h("img", { style: { height: "100px", margin: "auto" }, src: emptyStateImage }),
+    h("img", { style: { height: "100px", margin: "auto" }, src: optimizeCloudinaryUrl(emptyStateImage, { height: 200 }), decoding: "async" }),
     h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),

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

@@ -36,3 +36,8 @@ export const WarningAlertTransparent = () => (h("sqm-form-message", { type: "war
 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")));
+export const Loading = () => {
+  return (h("sqm-form-message", { type: "success", loading: true },
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
+};

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

@@ -7,6 +7,12 @@ import { Component, h, Prop, State } from "@stencil/core";
 export class FormMessage {
   constructor() {
     this.ignored = true;
+    /**
+     * Loading state for the alert.
+     *
+     * @uiName Loading
+     */
+    this.loading = false;
     /**
      * Render the alert with transparent styles
      */
@@ -15,6 +21,9 @@ export class FormMessage {
   }
   disconnectedCallback() { }
   render() {
+    if (this.loading) {
+      return h("sqm-skeleton", { height: "90px", width: "100%" });
+    }
     if (this.type === "error") {
       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"}` }),
@@ -65,6 +74,27 @@ export class FormMessage {
       "attribute": "type",
       "reflect": false
     },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Loading",
+            "name": "uiName"
+          }],
+        "text": "Loading state for the alert."
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "icon": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -1,5 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 /**
  * @uiName Header Logo
  * @validParents ["sqm-portal-frame","div","sqm-brand"]
@@ -32,7 +33,9 @@ export class HeroImage {
   disconnectedCallback() { }
   render() {
     return (h(Host, null,
-      h("a", { href: this.nextPage, part: "sqm-link", style: { textDecoration: "none" } }, this.imageUrl ? (h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl })) : (h("h3", { style: {
+      h("a", { href: this.nextPage, part: "sqm-link", style: { textDecoration: "none" } }, this.imageUrl ? (h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: optimizeCloudinaryUrl(this === null || this === void 0 ? void 0 : this.imageUrl, {
+          height: (this === null || this === void 0 ? void 0 : this.height) ? this.height * 2 : undefined,
+        }), decoding: "async" })) : (h("h3", { style: {
           fontSize: `${this.logoTextSize}px`,
           color: this.logoTextColor,
         } }, this.logoText)))));

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { isMobile, isValidColor } from "../../utilities";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 const paddingList = [
   "var(--sl-spacing-xxx-small)",
   "var(--sl-spacing-xx-small)",
@@ -19,7 +20,7 @@ const parseBackground = (provided_bg) => {
       return provided_bg;
     }
     else {
-      return `url(${provided_bg})`;
+      return `url(${optimizeCloudinaryUrl(provided_bg)})`;
     }
   }
   else {

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 export function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
@@ -23,7 +24,7 @@ export function HeroImageView(props, children) {
       objectFit: "cover",
     },
     Background: {
-      backgroundImage: `url(${props.imageUrl})`,
+      backgroundImage: `url(${optimizeCloudinaryUrl(props.imageUrl)})`,
       backgroundSize: "cover",
       backgroundPosition: props.imagePos || "center",
       display: "flex",
@@ -50,6 +51,7 @@ export function HeroImageView(props, children) {
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
       color: props.textColor || "var(--sqm-text)",
+      minHeight: props.minHeight ? props.minHeight + "px" : undefined,
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -57,6 +59,7 @@ export function HeroImageView(props, children) {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
+        minHeight: props.minHeight ? props.minHeight + "px" : undefined,
         "@media (max-width: 599px)": {
           width: "100%",
         },
@@ -131,7 +134,9 @@ export function HeroImageView(props, children) {
     return (h("div", null,
       h("div", { class: sheet.classes.Column },
         h("div", { class: "image-area" },
-          h("img", { class: sheet.classes.Image, src: props.imageUrl, part: "sqm-columns-image" })),
+          h("img", { class: sheet.classes.Image, src: optimizeCloudinaryUrl(props.imageUrl), alt: props.imageAlt || "", loading: "eager", decoding: "async", 
+            // @ts-ignore - fetchpriority is valid but not yet in JSX types
+            fetchpriority: "high", part: "sqm-columns-image" })),
         h("div", { class: "text-area", part: "sqm-columns-text-area" },
           props.header && (h("div", { class: sheet.classes.Header, part: "sqm-columns-header" }, props.header)),
           props.description && (h("div", { class: sheet.classes.Description, part: "sqm-columns-description" }, props.description)),

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

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
+ * @uiOrder ["image-url", "image-alt", "min-height", "layout", "header", "description", "button-text", "button-link", "button-new-tab", "*"]
  * @validParents ["sqm-portal-container","sqm-brand", "div", "sqm-divided-layout", "sqb-program-section", "sqb-conditional-section", "sqm-titled-section", "sqm-tab", "template"]
  * @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"></sqm-hero-image>
@@ -76,6 +77,18 @@ export class HeroImage {
      * @uiGroup Style
      */
     this.buttonType = "primary";
+    /**
+     * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
+     *
+     * @uiName Minimum height (px)
+     */
+    this.minHeight = 400;
+    /**
+     * Alt text for the hero image (columns layout). Leave empty for decorative images.
+     *
+     * @uiName Image alt text
+     */
+    this.imageAlt = "";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -564,6 +577,48 @@ export class HeroImage {
       "attribute": "button-type",
       "reflect": false,
       "defaultValue": "\"primary\""
+    },
+    "minHeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Minimum height (px)",
+            "name": "uiName"
+          }],
+        "text": "Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads."
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "400"
+    },
+    "imageAlt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Image alt text",
+            "name": "uiName"
+          }],
+        "text": "Alt text for the hero image (columns layout). Leave empty for decorative images."
+      },
+      "attribute": "image-alt",
+      "reflect": false,
+      "defaultValue": "\"\""
     }
   }; }
 }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 export function ImageView(props) {
   // Dependent on props, not feasiable to move out
   const style = {
@@ -28,5 +29,5 @@ export function ImageView(props) {
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Container, part: "sqm-base" },
-      h("img", { part: "sqm-image", src: props.imageUrl, class: sheet.classes.Image }))));
+      h("img", { part: "sqm-image", src: optimizeCloudinaryUrl(props.imageUrl), class: sheet.classes.Image, decoding: "async" }))));
 }

package/dist/collection/components/sqm-invoice-table/InvoiceTable.stories.js

@@ -8,19 +8,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": "View your invoice details", "empty-state-text": "Track the status of your invoices and rewards earned by referring friends" }));
 // Reward Status Cases
 const simpleInvoiceTableProps = {

package/dist/collection/components/sqm-invoice-table/sqm-invoice-table.js

@@ -368,7 +368,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sl-skeleton", null))));
+      h("sqm-skeleton", null))));
 }
 function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/collection/components/sqm-lead-form/LeadForm.stories.js

@@ -77,7 +77,7 @@ const slottedProps = {
 };
 export const Default = () => h(LeadFormView, Object.assign({}, defaultProps));
 export const LeadSubmitSuccess = () => h(LeadFormView, Object.assign({}, successProps));
-export const LeadSubmitWithError = () => h(LeadFormView, Object.assign({}, errorProps));
+export const LeadSubmitWithErrors = () => h(LeadFormView, Object.assign({}, errorProps));
 export const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps));
 export const FieldsHidden = () => {
   return (h("sqm-lead-form", { demoData: {

package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js

@@ -76,7 +76,7 @@ export function LeadFormView(props) {
         vanillaStyle,
         styleString),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { exportparts: "success-icon" },
+      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
@@ -87,16 +87,14 @@ export function LeadFormView(props) {
         styleString),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
-          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
-          h("b", null, content.submitErrorHeader),
-          h("br", null),
-          intl.formatMessage({
+        states.error && (h("sqm-form-message", { type: "error" },
+          h("p", { part: "alert-title" }, content.submitErrorHeader),
+          h("p", { part: "alert-description" }, intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          }))),
+          })))),
         h("div", { class: sheet.classes.NameFieldWrapper },
           h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
           h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),

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

@@ -74,10 +74,10 @@ export function LeaderboardView(props) {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(10)].map(() => {
+      h("table", null, [...Array(5)].map(() => {
         return (h("tr", null,
           h("td", null,
-            h("sl-skeleton", null))));
+            h("sqm-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)