@saasquatch/mint-components 2.0.3 → 2.0.4-10

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

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-e862bfd4.js');
+const global = require('./global-94f36ad7.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/{utils-4eb18a29.js → utils-5ecfecd9.js}

@@ -1,55 +1,43 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-e862bfd4.js');
+const global = require('./global-94f36ad7.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "24px",
+    gap: "35px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
-  TitleSkeleton: {
-    width: "45%",
-    height: "40px !important",
-  },
-  StepSkeleton: {
-    width: "15%",
-  },
-  HeaderSkeleton: {
-    width: "25%",
-    height: "30px !important",
-  },
-  InputSkeleton: {
-    width: "75%",
-  },
-  ButtonSkeleton: {
-    width: "80px",
-    height: "30px !important",
-  },
 };
 const sheet = JSS.createStyleSheet(style);
 const styleString = sheet.toString();
 const LoadingView = () => {
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
-    index.h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
+    index.h("sqm-skeleton", { width: "45%", height: "40px !important" }),
     index.h("div", { class: sheet.classes.HeaderContainer },
-      index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
-      index.h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
-    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
-    index.h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
+      index.h("sqm-skeleton", { width: "15%" }),
+      index.h("sqm-skeleton", { width: "25%", height: "30px !important" })),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
+    index.h("sqm-skeleton", { width: "15%" }),
+    index.h("sqm-skeleton", { width: "80px", height: "30px !important" })));
 };
 
 function validTaxDocument(requiredType) {

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",

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

@@ -6,6 +6,16 @@ import { Component, h, Host, Prop } from "@stencil/core";
  */
 export class HeroImage {
   constructor() {
+    /**
+     * @uiName Logo text size (in px)
+     * @uiWidget number
+     */
+    this.logoTextSize = 32;
+    /**
+     * @uiWidget color
+     * @uiName Logo text color
+     */
+    this.logoTextColor = "var(--sqm-primary-color, var(--sqm-text, #555555))";
     /**
      * Page participants are navigated to after clicking the header logo.
      *
@@ -14,7 +24,7 @@ export class HeroImage {
      */
     this.nextPage = "/";
     /**
-     * @uiName Logo height
+     * @uiName Logo height (in px)
      */
     this.height = 60;
     withHooks(this);
@@ -22,8 +32,10 @@ export class HeroImage {
   disconnectedCallback() { }
   render() {
     return (h(Host, null,
-      h("a", { href: this.nextPage, part: "sqm-link" },
-        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("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: {
+          fontSize: `${this.logoTextSize}px`,
+          color: this.logoTextColor,
+        } }, this.logoText)))));
   }
   static get is() { return "sqm-header-logo"; }
   static get encapsulation() { return "shadow"; }
@@ -37,7 +49,7 @@ export class HeroImage {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "ImageUpload",
@@ -54,6 +66,74 @@ export class HeroImage {
       "attribute": "image-url",
       "reflect": false
     },
+    "logoText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Logo text",
+            "name": "uiName"
+          }],
+        "text": "This text will be used as the logo only if no Logo image is selected above. The image takes precedence."
+      },
+      "attribute": "logo-text",
+      "reflect": false
+    },
+    "logoTextSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Logo text size (in px)",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "logo-text-size",
+      "reflect": false,
+      "defaultValue": "32"
+    },
+    "logoTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "Logo text color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "logo-text-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-primary-color, var(--sqm-text, #555555))\""
+    },
     "nextPage": {
       "type": "string",
       "mutable": false,
@@ -90,7 +170,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Logo height",
+            "text": "Logo height (in px)",
             "name": "uiName"
           }],
         "text": ""

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/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("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
+          h("p", { part: "alert-title" }, content.submitErrorHeader),
+          h("p", { part: "alert-text" }, 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)

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

@@ -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: "",

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

@@ -17,7 +17,7 @@ const style = {
   },
   ButtonLinkLoading: {
     fontSize: "14px",
-    color: "var(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     opacity: "0.6",
     display: "inline-block !important",
     textDecoration: "underline",
@@ -54,7 +54,7 @@ export function PortalEmailVerificationView(props) {
       }, {
         email: (h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
       })),
-      h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, intl.formatMessage({
+      h("p", { style: { color: "var(--sqm-text-subdued)", fontSize: "14px" } }, intl.formatMessage({
         id: `verificationStatus`,
         defaultMessage: states.loadingVerification
           ? verificationLoadingMessage + " {countdown}"
@@ -62,7 +62,5 @@ export function PortalEmailVerificationView(props) {
       }, {
         countdown: states.loadingVerification ? (h("sl-spinner", null)) : (states.countdown),
       })),
-      h("a", { class: states.loading
-          ? sheet.classes.ButtonLinkLoading
-          : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.submit, loading: states.loading }, resendEmailButtonText))));
 }

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -3,14 +3,14 @@ import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
 import { PoweredByImg } from "./PoweredByImg";
 const vanillaStyle = `
-  :host{
+  :host {
     margin: 0 auto;
     width: 100%;
   }
-  a{
+  a {
     cursor:pointer;
     color: var(--sqm-text-subdued);
-    text-decoration: none ;
+    text-decoration: none;
   }
 `;
 export function PortalFooterView(props) {

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -68,11 +68,7 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
     }
     else if (loading) {
-      return (h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
-          width: "100px",
-          height: "100px",
-          borderRadius: "0px !important",
-        } }));
+      return h("sqm-skeleton", { height: "100px", width: "100px" });
     }
     else if (qrLink) {
       return (h("svg", { width: "100", height: "100" },

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -233,7 +233,7 @@ function LoadingSlot() {
     h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return h("sl-skeleton", { style: { width: "100%" } });
+  return h("sqm-skeleton", null);
 }
 function useDemoReferralCodes(props) {
   return deepmerge({

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -12,19 +12,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
 const baseReward = {
   id: "123",

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

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

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -567,19 +567,19 @@ export function RewardExchangeView(props) {
         h("sl-card", { class: sheet.classes.Card },
           h("div", { class: sheet.classes.CardLayout },
             h("div", null,
-              h("sl-skeleton", { style: {
-                  width: "100px",
-                  height: "100px",
+              h("sqm-skeleton", { style: {
                   margin: "9px",
-                  "--border-radius": "var(--sqm-border-radius-normal)",
-                } })),
+                }, width: "100px", height: "100px" })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                 width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                gap: "var(--sl-spacing-small)",
               } },
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { width: "45%" } }))))));
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", { width: "45%" }))))));
     })));
   }
   function errorMessage() {

package/dist/collection/components/sqm-rewards-table/RewardsTable.stories.js

@@ -11,19 +11,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
 const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
   states: {

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

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

package/dist/collection/components/sqm-skeleton/Skeleton.stories.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Skeleton",
+};
+export const Default = () => {
+  return h("sqm-skeleton", null);
+};
+export const CustomWidth = () => {
+  return h("sqm-skeleton", { width: "100px" });
+};
+export const CustomHeight = () => {
+  return h("sqm-skeleton", { height: "100px" });
+};
+export const CustomWidthAndHeight = () => {
+  return h("sqm-skeleton", { width: "150px", height: "50px" });
+};