@saasquatch/mint-components 2.1.6 → 2.1.7-2

package/dist/types/components/sqm-form-message/FormMessage.stories.d.ts

@@ -10,3 +10,4 @@ export declare const SuccessAlertTransparent: () => any;
 export declare const ErrorAlertTransparent: () => any;
 export declare const WarningAlertTransparent: () => any;
 export declare const InfoAlertTransparent: () => any;
+export declare const Loading: () => any;

package/dist/types/components/sqm-form-message/sqm-form-message.d.ts

@@ -10,6 +10,12 @@ export declare class FormMessage {
    * @uiName Alert type
    */
   type: string;
+  /**
+   * Loading state for the alert.
+   *
+   * @uiName Loading
+   */
+  loading: boolean;
   /**
    * Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon
    *

package/dist/types/components/sqm-hero-image/sqm-hero-image-view.d.ts

@@ -18,5 +18,7 @@ export interface HeroImageViewProps {
   imagePos: "left" | "center" | "right";
   imageMobilePos: "top" | "bottom";
   buttonType?: "primary" | "secondary";
+  minHeight?: number;
+  imageAlt?: string;
 }
 export declare function HeroImageView(props: HeroImageViewProps, children: VNode): any;

package/dist/types/components/sqm-hero-image/sqm-hero-image.d.ts

@@ -1,6 +1,7 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @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>
@@ -116,6 +117,18 @@ export declare class HeroImage {
    * @uiGroup Style
    */
   buttonType?: "primary" | "secondary";
+  /**
+   * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
+   *
+   * @uiName Minimum height (px)
+   */
+  minHeight?: number;
+  /**
+   * Alt text for the hero image (columns layout). Leave empty for decorative images.
+   *
+   * @uiName Image alt text
+   */
+  imageAlt?: string;
   constructor();
   disconnectedCallback(): void;
   render(): any;

package/dist/types/components/sqm-lead-form/LeadForm.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
 export default _default;
 export declare const Default: () => any;
 export declare const LeadSubmitSuccess: () => any;
-export declare const LeadSubmitWithError: () => any;
+export declare const LeadSubmitWithErrors: () => any;
 export declare const LeadSubmitLoading: () => any;
 export declare const FieldsHidden: () => any;
 export declare const SlottedInputs: () => any;

package/dist/types/components/sqm-password-field/sqm-password-field.d.ts

@@ -1,14 +1,4 @@
-import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
-export interface PasswordFieldViewDemoProps {
-  initValue: string;
-  states: {
-    enableValidation: boolean;
-    registrationFormState: RegistrationFormState;
-    content: {
-      fieldLabel: string;
-    };
-  };
-}
+import { PasswordFieldViewDemoProps } from "./usePasswordField";
 /**
  * @uiName Form Password Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]

package/dist/types/components/sqm-password-field/usePasswordField.d.ts

@@ -1,3 +1,14 @@
 import { PortalPasswordField } from "./sqm-password-field";
 import { PortalPasswordFieldViewProps } from "./sqm-password-field-view";
+import { RegistrationFormState } from "../sqm-portal-registration-form/useRegistrationFormState";
+export interface PasswordFieldViewDemoProps {
+  initValue: string;
+  states: {
+    enableValidation: boolean;
+    registrationFormState: RegistrationFormState;
+    content: {
+      fieldLabel: string;
+    };
+  };
+}
 export declare function usePasswordField(props: PortalPasswordField): PortalPasswordFieldViewProps;

package/dist/types/components/sqm-portal-reset-password/sqm-portal-reset-password-view.d.ts

@@ -1,4 +1,4 @@
-import { PasswordFieldViewDemoProps } from "../sqm-password-field/sqm-password-field";
+import { PasswordFieldViewDemoProps } from "../sqm-password-field/usePasswordField";
 export interface PortalResetPasswordViewProps {
   states: {
     error: string;

package/dist/types/components/sqm-referral-table/columns/sqm-referral-table-user-column.d.ts

@@ -4,7 +4,7 @@ import { ReferralTableColumn } from "./ReferralTableColumn";
  * @uiName Referral Table User Column
  * @validParents ["sqm-referral-table"]
  * @exampleGroup Referrals
- * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column>
+ * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User"></sqm-referral-table-user-column>
  */
 export declare class ReferralTableUserColumn implements ReferralTableColumn {
   /**

package/dist/types/components/sqm-referral-table/sqm-referral-table.d.ts

@@ -7,7 +7,7 @@ import { GenericTableViewProps } from "../../tables/GenericTableView";
  * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
  */
 export declare class ReferralTable {
   /**

package/dist/types/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.d.ts

@@ -4,7 +4,7 @@ import { RewardTableColumn } from "./RewardTableColumn";
  * @uiName Rewards Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export declare class RewardTableUserColumn implements RewardTableColumn {
   /**

package/dist/types/components/sqm-rewards-table/sqm-rewards-table.d.ts

@@ -6,7 +6,7 @@ import { Referral } from "../../saasquatch";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="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="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="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="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
  */
 export declare class RewardsTable {
   /**

package/dist/types/components/sqm-skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+  title: string;
+};
+export default _default;
+export declare const Default: () => any;
+export declare const CustomWidth: () => any;
+export declare const CustomHeight: () => any;
+export declare const CustomWidthAndHeight: () => any;

package/dist/types/components/sqm-skeleton/sqm-skeleton.d.ts

@@ -0,0 +1,14 @@
+export declare class Skeleton {
+  ignored: boolean;
+  /**
+   * @uiName Height (in pixels or %)
+   */
+  height?: string;
+  /**
+   * @uiName Width (in pixels or %)
+   */
+  width?: string;
+  disconnectedCallback(): void;
+  vanillaStyle: string;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -34,7 +34,7 @@ import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-na
 import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { UsePagination } from "./components/sqm-pagination/usePagination";
-import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/sqm-password-field";
+import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/usePasswordField";
 import { PayoutButtonScrollViewProps } from "./components/sqm-payout-button-scroll/sqm-payout-button-scroll-view";
 import { PayoutStatusAlertViewProps } from "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view";
 import { ChangeMarketingViewProps } from "./components/sqm-portal-change-marketing/sqm-portal-change-marketing-view";
@@ -985,6 +985,11 @@ export namespace Components {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading": boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -1125,6 +1130,11 @@ export namespace Components {
           * @uiName Title
          */
         "header"?: string;
+        /**
+          * Alt text for the hero image (columns layout). Leave empty for decorative images.
+          * @uiName Image alt text
+         */
+        "imageAlt"?: string;
         /**
           * @uiName Image mobile position
           * @uiType string
@@ -1161,6 +1171,11 @@ export namespace Components {
           * @uiGroup Style
          */
         "layout": "overlay" | "columns";
+        /**
+          * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
+          * @uiName Minimum height (px)
+         */
+        "minHeight"?: number;
         /**
           * @uiName Overlay color
           * @uiWidget color
@@ -4957,6 +4972,16 @@ export namespace Components {
          */
         "tooltiptext": string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -7712,6 +7737,12 @@ declare global {
         prototype: HTMLSqmShareLinkElement;
         new (): HTMLSqmShareLinkElement;
     };
+    interface HTMLSqmSkeletonElement extends Components.SqmSkeleton, HTMLStencilElement {
+    }
+    var HTMLSqmSkeletonElement: {
+        prototype: HTMLSqmSkeletonElement;
+        new (): HTMLSqmSkeletonElement;
+    };
     interface HTMLSqmStatContainerElement extends Components.SqmStatContainer, HTMLStencilElement {
     }
     var HTMLSqmStatContainerElement: {
@@ -7930,6 +7961,7 @@ declare global {
         "sqm-share-button": HTMLSqmShareButtonElement;
         "sqm-share-code": HTMLSqmShareCodeElement;
         "sqm-share-link": HTMLSqmShareLinkElement;
+        "sqm-skeleton": HTMLSqmSkeletonElement;
         "sqm-stat-container": HTMLSqmStatContainerElement;
         "sqm-stencilbook": HTMLSqmStencilbookElement;
         "sqm-tab": HTMLSqmTabElement;
@@ -8875,6 +8907,11 @@ declare namespace LocalJSX {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading"?: boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -9016,6 +9053,11 @@ declare namespace LocalJSX {
           * @uiName Title
          */
         "header"?: string;
+        /**
+          * Alt text for the hero image (columns layout). Leave empty for decorative images.
+          * @uiName Image alt text
+         */
+        "imageAlt"?: string;
         /**
           * @uiName Image mobile position
           * @uiType string
@@ -9052,6 +9094,11 @@ declare namespace LocalJSX {
           * @uiGroup Style
          */
         "layout"?: "overlay" | "columns";
+        /**
+          * Minimum height of the component in pixels. Reserves vertical space to prevent layout shift while the image loads.
+          * @uiName Minimum height (px)
+         */
+        "minHeight"?: number;
         /**
           * @uiName Overlay color
           * @uiWidget color
@@ -12818,6 +12865,16 @@ declare namespace LocalJSX {
          */
         "tooltiptext"?: string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -15026,6 +15083,7 @@ declare namespace LocalJSX {
         "sqm-share-button": SqmShareButton;
         "sqm-share-code": SqmShareCode;
         "sqm-share-link": SqmShareLink;
+        "sqm-skeleton": SqmSkeleton;
         "sqm-stat-container": SqmStatContainer;
         "sqm-stencilbook": SqmStencilbook;
         "sqm-tab": SqmTab;
@@ -15159,6 +15217,7 @@ declare module "@stencil/core" {
             "sqm-share-button": LocalJSX.SqmShareButton & JSXBase.HTMLAttributes<HTMLSqmShareButtonElement>;
             "sqm-share-code": LocalJSX.SqmShareCode & JSXBase.HTMLAttributes<HTMLSqmShareCodeElement>;
             "sqm-share-link": LocalJSX.SqmShareLink & JSXBase.HTMLAttributes<HTMLSqmShareLinkElement>;
+            "sqm-skeleton": LocalJSX.SqmSkeleton & JSXBase.HTMLAttributes<HTMLSqmSkeletonElement>;
             "sqm-stat-container": LocalJSX.SqmStatContainer & JSXBase.HTMLAttributes<HTMLSqmStatContainerElement>;
             "sqm-stencilbook": LocalJSX.SqmStencilbook & JSXBase.HTMLAttributes<HTMLSqmStencilbookElement>;
             "sqm-tab": LocalJSX.SqmTab & JSXBase.HTMLAttributes<HTMLSqmTabElement>;

package/dist/types/saasquatch.d.ts

@@ -216,6 +216,10 @@ export interface BrandingConfiguration {
   };
   color?: {
     backgroundColor?: string;
+    loadingSkeleton?: {
+      background?: string;
+      animationBackground?: string;
+    };
     textColorShades?: {
       mainText: string;
       subduedText: string;

package/dist/types/utils/imageUrl.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Adds Cloudinary auto-format and auto-quality transformations to a Cloudinary URL.
+ * Non-Cloudinary URLs are passed through unchanged.
+ *
+ * When no explicit width/height is provided, a c_limit,w_3840 cap is applied
+ * to prevent downloading oversized originals while remaining sharp on 4K/retina.
+ *
+ * @param url - The image URL to optimize
+ * @param options - Optional width/height for server-side resizing (use 2x display size for retina)
+ */
+export declare function optimizeCloudinaryUrl(url: string, options?: {
+  width?: number;
+  height?: number;
+}): string;