npm - @saasquatch/mint-components - Versions diffs - 2.1.5-2 → 2.1.5 - Mend

@saasquatch/mint-components 2.1.5-2 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (556) hide show

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

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

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

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

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

@@ -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 CHANGED Viewed

@@ -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-93e996d6.js} RENAMED Viewed

@@ -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-0f8b1267.js');
 const JSS = require('./JSS-8503a151.js');
-const data = require('./data-62fc9ba5.js');
+const data = require('./data-e83f8a41.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 CHANGED Viewed

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

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

@@ -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-42d413d9.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-89bc50a9.js} RENAMED Viewed

@@ -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-42d413d9.js');
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-08bcb487.js → useInstantAccessRegistration-651aa95b.js} RENAMED Viewed

@@ -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-42d413d9.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-a223f597.js');
 function useInstantAccessRegistration(props) {
   const locale = index_module.L();

package/dist/cjs/{useLeadFormState-91999606.js → useLeadFormState-76d3b511.js} RENAMED Viewed

@@ -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-0f8b1267.js');
+const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
+const index_module = require('./index.module-42d413d9.js');
 const JSS = require('./JSS-8503a151.js');
 const style = {

package/dist/cjs/{usePayoutStatus-a81d05a2.js → usePayoutStatus-da7c44b3.js} RENAMED Viewed

@@ -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-42d413d9.js');
 const TAX_FORM_UPDATED_EVENT_KEY = "sqm:tax-form-updated";

package/dist/cjs/{usePortalRegistrationForm-8ed0d753.js → usePortalRegistrationForm-31822dc4.js} RENAMED Viewed

@@ -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-42d413d9.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
+const useRegistrationFormState = require('./useRegistrationFormState-a223f597.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-89c2b972.js} RENAMED Viewed

@@ -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-42d413d9.js');
 const GET_REFERRAL_CODES = index_module.dist.gql `
   query getCodes(

package/dist/cjs/{useReferralTable-d0c7097e.js → useReferralTable-c6fd7127.js} RENAMED Viewed

@@ -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-42d413d9.js');
+const reRender = require('./re-render-69bde9ee.js');
+const useChildElements = require('./useChildElements-89bc50a9.js');
 const debug = domContextHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -254,7 +254,7 @@ 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 programId = props.programId === "GLOBAL" ? null : ((_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext);
   // If no program ID, shows all programs
   const referralFilter = programId
     ? programId === "classic"

package/dist/cjs/{useRegistrationFormState-bbee6e7b.js → useRegistrationFormState-a223f597.js} RENAMED Viewed

@@ -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-42d413d9.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-994bc32f.js} RENAMED Viewed

@@ -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-42d413d9.js');
 const UserLookupQuery = index_module.dist.gql `
   query userLookup {

package/dist/cjs/{utilities-9a0c5e91.js → utilities-096934ea.js} RENAMED Viewed

@@ -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-42d413d9.js');
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-form-message/FormMessage.stories.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-hero-image/sqm-hero-image-view.js CHANGED Viewed

@@ -50,6 +50,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 +58,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 +133,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: 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 CHANGED Viewed

@@ -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-invoice-table/InvoiceTable.stories.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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)

package/dist/collection/components/sqm-navigation-menu/useNavigationMenu.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { navigation, useTick, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useRef } from "@saasquatch/universal-hooks";
-import { useEffect } from "haunted";
+import { useEffect, useRef } from "@saasquatch/universal-hooks";
 function handleMenu(e) {
   navigation.push(e.detail.item.value);
 }

package/dist/collection/components/sqm-password-field/sqm-password-field.js CHANGED Viewed

@@ -6,7 +6,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
-import { usePasswordField } from "./usePasswordField";
+import { usePasswordField, } from "./usePasswordField";
 /**
  * @uiName Form Password Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
@@ -238,7 +238,8 @@ export class PortalPasswordField {
         "resolved": "PasswordFieldViewDemoProps",
         "references": {
           "PasswordFieldViewDemoProps": {
-            "location": "local"
+            "location": "import",
+            "path": "./usePasswordField"
           }
         }
       },

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
@@ -24,9 +24,10 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    children));
+  return (h(Host, null,
+    h("div", { class: sheet.classes.Container, part: "sqm-base" },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      children)));
 }

package/dist/collection/components/sqm-portal-email-verification/PortalEmailVerification.stories.js CHANGED Viewed

@@ -17,6 +17,7 @@ const defaultContent = {
   resendEmailButtonText: "Re-send Email",
   verificationStatusMessage: "Checking verification status in {countdown}",
   verificationLoadingMessage: "Checking verification status",
+  verificationResentMessage: "Verification email resent to {email}",
 };
 const defaultStates = {
   error: "",